@vime/core
Version:
Customizable, extensible, accessible and framework agnostic media player.
238 lines (237 loc) • 6.6 kB
JavaScript
import { Component, h, Prop } from '@stencil/core';
import { withComponentRegistry } from '../../core/player/withComponentRegistry';
/**
* This component is a shorthand way to setup the entire default vime user interface, such as
* controls, settings, captions and so on.
*
* ## Visuals
*
* There are also alternative interfaces for live media, and the light player theme, but they're not
* shown here for the sake of brevity.
*
* ### Audio
*
* <img
* src="https://raw.githubusercontent.com/vime-js/vime/master/packages/core/src/components/ui/default-ui/default-ui--audio.png"
* alt="Vime default audio player"
* />
*
* ### Desktop Video
*
* <img
* src="https://raw.githubusercontent.com/vime-js/vime/master/packages/core/src/components/ui/default-ui/default-ui--desktop.png"
* alt="Vime default desktop video player"
* />
*
* ### Mobile Video
*
* <img
* src="https://raw.githubusercontent.com/vime-js/vime/master/packages/core/src/components/ui/default-ui/default-ui--mobile.png"
* alt="Vime default desktop mobile player"
* />
*
* @slot - Used to extend the default user interface with custom UI components.
*/
export class DefaultUI {
constructor() {
/**
* Whether clicking the player should not toggle playback.
*/
this.noClickToPlay = false;
/**
* Whether double clicking the player should not toggle fullscreen mode.
*/
this.noDblClickFullscreen = false;
/**
* Whether the custom captions UI should not be loaded.
*/
this.noCaptions = false;
/**
* Whether the custom poster UI should not be loaded.
*/
this.noPoster = false;
/**
* Whether the custom spinner UI should not be loaded.
*/
this.noSpinner = false;
/**
* Whether the custom default controls should not be loaded.
*/
this.noControls = false;
/**
* Whether the custom default settings menu should not be loaded.
*/
this.noSettings = false;
/**
* Whether the default loading screen should not be loaded.
*/
this.noLoadingScreen = false;
withComponentRegistry(this);
}
render() {
return (h("vm-ui", null,
!this.noClickToPlay && h("vm-click-to-play", null),
!this.noDblClickFullscreen && h("vm-dbl-click-fullscreen", null),
!this.noCaptions && h("vm-captions", null),
!this.noPoster && h("vm-poster", null),
!this.noSpinner && h("vm-spinner", null),
!this.noLoadingScreen && h("vm-loading-screen", null),
!this.noControls && h("vm-default-controls", null),
!this.noSettings && h("vm-default-settings", null),
h("slot", null)));
}
static get is() { return "vm-default-ui"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() { return {
"$": ["default-ui.css"]
}; }
static get styleUrls() { return {
"$": ["default-ui.css"]
}; }
static get properties() { return {
"noClickToPlay": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Whether clicking the player should not toggle playback."
},
"attribute": "no-click-to-play",
"reflect": false,
"defaultValue": "false"
},
"noDblClickFullscreen": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Whether double clicking the player should not toggle fullscreen mode."
},
"attribute": "no-dbl-click-fullscreen",
"reflect": false,
"defaultValue": "false"
},
"noCaptions": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Whether the custom captions UI should not be loaded."
},
"attribute": "no-captions",
"reflect": false,
"defaultValue": "false"
},
"noPoster": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Whether the custom poster UI should not be loaded."
},
"attribute": "no-poster",
"reflect": false,
"defaultValue": "false"
},
"noSpinner": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Whether the custom spinner UI should not be loaded."
},
"attribute": "no-spinner",
"reflect": false,
"defaultValue": "false"
},
"noControls": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Whether the custom default controls should not be loaded."
},
"attribute": "no-controls",
"reflect": false,
"defaultValue": "false"
},
"noSettings": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Whether the custom default settings menu should not be loaded."
},
"attribute": "no-settings",
"reflect": false,
"defaultValue": "false"
},
"noLoadingScreen": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Whether the default loading screen should not be loaded."
},
"attribute": "no-loading-screen",
"reflect": false,
"defaultValue": "false"
}
}; }
}