@vime/core
Version:
Customizable, extensible, accessible and framework agnostic media player.
317 lines (316 loc) • 10.2 kB
JavaScript
import { Component, Fragment, h, Prop } from '@stencil/core';
import { withComponentRegistry } from '../../../core/player/withComponentRegistry';
import { withPlayerContext } from '../../../core/player/withPlayerContext';
/**
* Default set of controls for when you're in a hurry. The controls displayed depend on whether the
* media is audio/video/live, and whether the device is mobile/desktop. See
* [`vime-default-ui`](../default-ui.md) for visuals.
*/
export class DefaultControls {
constructor() {
/**
* The length in milliseconds that the controls are active for before fading out. Audio players
* are not effected by this prop.
*/
this.activeDuration = 2750;
/**
* Whether the controls should wait for playback to start before being shown. Audio players
* are not effected by this prop.
*/
this.waitForPlaybackStart = false;
/**
* Whether the controls should show/hide when paused. Audio players are not effected by this prop.
*/
this.hideWhenPaused = false;
/**
* Whether the controls should hide when the mouse leaves the player. Audio players are not
* effected by this prop.
*/
this.hideOnMouseLeave = false;
/** @internal */
this.isMobile = false;
/** @internal */
this.isLive = false;
/** @internal */
this.isAudioView = false;
/** @internal */
this.isVideoView = false;
withComponentRegistry(this);
withPlayerContext(this, [
'theme',
'isMobile',
'isAudioView',
'isVideoView',
'isLive',
]);
}
buildAudioControls() {
return (h("vm-controls", { fullWidth: true },
h("vm-playback-control", { tooltipDirection: "right" }),
h("vm-volume-control", null),
!this.isLive && h("vm-current-time", null),
this.isLive && h("vm-control-spacer", null),
!this.isLive && h("vm-scrubber-control", null),
this.isLive && h("vm-live-indicator", null),
!this.isLive && h("vm-end-time", null),
!this.isLive && h("vm-settings-control", { tooltipDirection: "left" }),
h("div", { style: { marginLeft: '0', paddingRight: '2px' } })));
}
buildMobileVideoControls() {
return (h(Fragment, null,
h("vm-scrim", { gradient: "up" }),
h("vm-controls", { pin: "topLeft", fullWidth: true, activeDuration: this.activeDuration, waitForPlaybackStart: this.waitForPlaybackStart, hideWhenPaused: this.hideWhenPaused },
h("vm-control-spacer", null),
h("vm-volume-control", null),
!this.isLive && h("vm-caption-control", null),
!this.isLive && h("vm-settings-control", null),
this.isLive && h("vm-fullscreen-control", null)),
h("vm-controls", { pin: "center", justify: "center", activeDuration: this.activeDuration, waitForPlaybackStart: this.waitForPlaybackStart, hideWhenPaused: this.hideWhenPaused },
h("vm-playback-control", { style: { '--vm-control-scale': '1.3' } })),
!this.isLive && (h("vm-controls", { pin: "bottomLeft", fullWidth: true, activeDuration: this.activeDuration, waitForPlaybackStart: this.waitForPlaybackStart, hideWhenPaused: this.hideWhenPaused },
h("vm-control-group", null,
h("vm-current-time", null),
h("vm-control-spacer", null),
h("vm-end-time", null),
h("vm-fullscreen-control", null)),
h("vm-control-group", { space: "top" },
h("vm-scrubber-control", null))))));
}
buildDesktopVideoControls() {
return (h(Fragment, null,
this.theme !== 'light' && h("vm-scrim", { gradient: "up" }),
h("vm-controls", { fullWidth: true, pin: "bottomRight", activeDuration: this.activeDuration, waitForPlaybackStart: this.waitForPlaybackStart, hideWhenPaused: this.hideWhenPaused, hideOnMouseLeave: this.hideOnMouseLeave },
!this.isLive && (h("vm-control-group", null,
h("vm-scrubber-control", null))),
h("vm-control-group", { space: this.isLive ? 'none' : 'top' },
h("vm-playback-control", { tooltipDirection: "right" }),
h("vm-volume-control", null),
!this.isLive && h("vm-time-progress", null),
h("vm-control-spacer", null),
!this.isLive && h("vm-caption-control", null),
this.isLive && h("vm-live-indicator", null),
h("vm-pip-control", null),
!this.isLive && h("vm-settings-control", null),
h("vm-fullscreen-control", { tooltipDirection: "left" })))));
}
render() {
if (this.isAudioView)
return this.buildAudioControls();
if (this.isVideoView && this.isMobile)
return this.buildMobileVideoControls();
if (this.isVideoView)
return this.buildDesktopVideoControls();
return null;
}
static get is() { return "vm-default-controls"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() { return {
"$": ["default-controls.css"]
}; }
static get styleUrls() { return {
"$": ["default-controls.css"]
}; }
static get properties() { return {
"activeDuration": {
"type": "number",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "The length in milliseconds that the controls are active for before fading out. Audio players\nare not effected by this prop."
},
"attribute": "active-duration",
"reflect": false,
"defaultValue": "2750"
},
"waitForPlaybackStart": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Whether the controls should wait for playback to start before being shown. Audio players\nare not effected by this prop."
},
"attribute": "wait-for-playback-start",
"reflect": false,
"defaultValue": "false"
},
"hideWhenPaused": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Whether the controls should show/hide when paused. Audio players are not effected by this prop."
},
"attribute": "hide-when-paused",
"reflect": false,
"defaultValue": "false"
},
"hideOnMouseLeave": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Whether the controls should hide when the mouse leaves the player. Audio players are not\neffected by this prop."
},
"attribute": "hide-on-mouse-leave",
"reflect": false,
"defaultValue": "false"
},
"theme": {
"type": "string",
"mutable": false,
"complexType": {
"original": "PlayerProps['theme']",
"resolved": "string | undefined",
"references": {
"PlayerProps": {
"location": "import",
"path": "../../../core/player/PlayerProps"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"text": undefined,
"name": "internal"
}],
"text": ""
},
"attribute": "theme",
"reflect": false
},
"isMobile": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "PlayerProps['isMobile']",
"resolved": "boolean",
"references": {
"PlayerProps": {
"location": "import",
"path": "../../../core/player/PlayerProps"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"text": undefined,
"name": "internal"
}],
"text": ""
},
"attribute": "is-mobile",
"reflect": false,
"defaultValue": "false"
},
"isLive": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "PlayerProps['isLive']",
"resolved": "boolean",
"references": {
"PlayerProps": {
"location": "import",
"path": "../../../core/player/PlayerProps"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"text": undefined,
"name": "internal"
}],
"text": ""
},
"attribute": "is-live",
"reflect": false,
"defaultValue": "false"
},
"isAudioView": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "PlayerProps['isAudioView']",
"resolved": "boolean",
"references": {
"PlayerProps": {
"location": "import",
"path": "../../../core/player/PlayerProps"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"text": undefined,
"name": "internal"
}],
"text": ""
},
"attribute": "is-audio-view",
"reflect": false,
"defaultValue": "false"
},
"isVideoView": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "PlayerProps['isVideoView']",
"resolved": "boolean",
"references": {
"PlayerProps": {
"location": "import",
"path": "../../../core/player/PlayerProps"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"text": undefined,
"name": "internal"
}],
"text": ""
},
"attribute": "is-video-view",
"reflect": false,
"defaultValue": "false"
}
}; }
}