@vime/core
Version:
Customizable, extensible, accessible and framework agnostic media player.
82 lines (81 loc) • 2.45 kB
JavaScript
import { Component, h, Prop } from '@stencil/core';
import { withComponentRegistry } from '../../core/player/withComponentRegistry';
import { withPlayerContext } from '../../core/player/withPlayerContext';
/**
* The view that is displayed while the player is booting or media is loading. By default there
* are animated dots that are shown below the `<slot />` to indicate to the user content is being
* loaded. The default `<slot />` is your opportunity to brand the player with your logo.
*
* @slot - Used to pass in any content to be shown above the animated dots while the player
* is booting or media is loading. Use this as an opportunity to brand your player, similar to
* how Netflix shows their logo when content is loading.
*/
export class LoadingScreen {
constructor() {
/** @internal */
this.playbackReady = false;
/**
* Whether the loading dots are hidden or not.
*/
this.hideDots = false;
withComponentRegistry(this);
withPlayerContext(this, ['playbackReady']);
}
render() {
return (h("div", { class: {
loadingScreen: true,
inactive: this.playbackReady,
} },
h("slot", null),
!this.hideDots && h("div", { class: "dotPulse" })));
}
static get is() { return "vm-loading-screen"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() { return {
"$": ["loading-screen.css"]
}; }
static get styleUrls() { return {
"$": ["loading-screen.css"]
}; }
static get properties() { return {
"playbackReady": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"text": undefined,
"name": "internal"
}],
"text": ""
},
"attribute": "playback-ready",
"reflect": false,
"defaultValue": "false"
},
"hideDots": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Whether the loading dots are hidden or not."
},
"attribute": "hide-dots",
"reflect": false,
"defaultValue": "false"
}
}; }
}