mirror of https://github.com/requarks/wiki
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
97 lines
2.1 KiB
97 lines
2.1 KiB
import { LitElement, html, css } from 'lit'
|
|
|
|
/**
|
|
* Block Media Player
|
|
*/
|
|
export class BlockMediaPlayerElement extends LitElement {
|
|
/**
|
|
* Metadata for the admin area and the editor's block picker. Collected at build time into
|
|
* `compiled/blocks.manifest.json`, which the server reads to register the block. Values must be
|
|
* plain literals. See `props` in `block-index` for what the picker does with that list.
|
|
*/
|
|
static definition = {
|
|
block: 'media-player',
|
|
name: 'Media Player',
|
|
description: 'Plays an audio or video file inline.',
|
|
icon: 'video-playlist',
|
|
props: [
|
|
{
|
|
name: 'src',
|
|
type: 'string',
|
|
label: 'Source URL',
|
|
hint: 'Path or URL of the audio or video file to play.',
|
|
required: true
|
|
}
|
|
]
|
|
}
|
|
|
|
static get styles() {
|
|
return css`
|
|
:host {
|
|
display: block;
|
|
}
|
|
|
|
/* -> The gap below the block. On this element rather than :host: see block-index. */
|
|
.container {
|
|
margin-bottom: 16px;
|
|
overflow: hidden;
|
|
border-radius: 5px;
|
|
position: relative;
|
|
}
|
|
`
|
|
}
|
|
|
|
static get properties() {
|
|
return {
|
|
/**
|
|
* Source URL
|
|
* @type {string}
|
|
*/
|
|
src: { type: String }
|
|
|
|
// Internal Properties
|
|
// _loading: { state: true }
|
|
}
|
|
}
|
|
|
|
constructor() {
|
|
super()
|
|
}
|
|
|
|
async connectedCallback() {
|
|
super.connectedCallback()
|
|
}
|
|
|
|
// get _video() {
|
|
// return this.renderRoot?.querySelector('.video-display') ?? null
|
|
// }
|
|
|
|
// _playPause () {
|
|
// if (this._video.paused) {
|
|
// this._video.play()
|
|
// } else {
|
|
// this._video.pause()
|
|
// }
|
|
// }
|
|
|
|
// _fullScreen () {
|
|
// if (this._video.requestFullscreen) {
|
|
// this._video.requestFullscreen()
|
|
// } else if (this._video.webkitRequestFullscreen) {
|
|
// this._video.webkitRequestFullscreen()
|
|
// }
|
|
// }
|
|
|
|
render() {
|
|
return html`
|
|
<div class="container">
|
|
<video class="video-display" controls>
|
|
<source src="${this.src}" type="video/mp4" />
|
|
</video>
|
|
</div>
|
|
`
|
|
}
|
|
}
|
|
|
|
window.customElements.define('block-media-player', BlockMediaPlayerElement)
|