@vime/core
Version:
Customizable, extensible, accessible and framework agnostic media player.
250 lines (249 loc) • 7.02 kB
JavaScript
import { Component, h, Prop } from '@stencil/core';
import { isUndefined } from '../../../../utils/unit';
import { createDispatcher, } from '../../../core/player/PlayerDispatcher';
import { withComponentRegistry } from '../../../core/player/withComponentRegistry';
import { withPlayerContext } from '../../../core/player/withPlayerContext';
/**
* A control for toggling the playback state (play/pause) of the current media.
*
* ## Visual
*
* <img
* src="https://raw.githubusercontent.com/vime-js/vime/master/packages/core/src/components/ui/controls/playback-control/playback-control.png"
* alt="Vime playback control component"
* />
*/
export class PlaybackControl {
constructor() {
/**
* The name of the play icon to resolve from the icon library.
*/
this.playIcon = 'play';
/**
* The name of the pause icon to resolve from the icon library.
*/
this.pauseIcon = 'pause';
/**
* Whether the tooltip is positioned above/below the control.
*/
this.tooltipPosition = 'top';
/**
* Whether the tooltip should not be displayed.
*/
this.hideTooltip = false;
/** @inheritdoc */
this.keys = 'k';
/** @internal */
this.paused = true;
/** @internal */
this.i18n = {};
withComponentRegistry(this);
withPlayerContext(this, ['paused', 'i18n']);
}
connectedCallback() {
this.dispatch = createDispatcher(this);
}
onClick() {
this.dispatch('paused', !this.paused);
}
render() {
const tooltip = this.paused ? this.i18n.play : this.i18n.pause;
const tooltipWithHint = !isUndefined(this.keys)
? `${tooltip} (${this.keys})`
: tooltip;
return (h("vm-control", { label: this.i18n.playback, keys: this.keys, pressed: !this.paused, onClick: this.onClick.bind(this) },
h("vm-icon", { name: this.paused ? this.playIcon : this.pauseIcon, library: this.icons }),
h("vm-tooltip", { hidden: this.hideTooltip, position: this.tooltipPosition, direction: this.tooltipDirection }, tooltipWithHint)));
}
static get is() { return "vm-playback-control"; }
static get encapsulation() { return "shadow"; }
static get properties() { return {
"playIcon": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "The name of the play icon to resolve from the icon library."
},
"attribute": "play-icon",
"reflect": false,
"defaultValue": "'play'"
},
"pauseIcon": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "The name of the pause icon to resolve from the icon library."
},
"attribute": "pause-icon",
"reflect": false,
"defaultValue": "'pause'"
},
"icons": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string | undefined",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "The name of an icon library to use. Defaults to the library defined by the `icons` player\nproperty."
},
"attribute": "icons",
"reflect": false
},
"tooltipPosition": {
"type": "string",
"mutable": false,
"complexType": {
"original": "TooltipPosition",
"resolved": "\"bottom\" | \"top\"",
"references": {
"TooltipPosition": {
"location": "import",
"path": "../../tooltip/types"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Whether the tooltip is positioned above/below the control."
},
"attribute": "tooltip-position",
"reflect": false,
"defaultValue": "'top'"
},
"tooltipDirection": {
"type": "string",
"mutable": false,
"complexType": {
"original": "TooltipDirection",
"resolved": "\"left\" | \"right\" | undefined",
"references": {
"TooltipDirection": {
"location": "import",
"path": "../../tooltip/types"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "The direction in which the tooltip should grow."
},
"attribute": "tooltip-direction",
"reflect": false
},
"hideTooltip": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Whether the tooltip should not be displayed."
},
"attribute": "hide-tooltip",
"reflect": false,
"defaultValue": "false"
},
"keys": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string | undefined",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"text": undefined,
"name": "inheritdoc"
}],
"text": "A slash (`/`) separated string of JS keyboard keys (`KeyboardEvent.key`), that when caught in\na `keydown` event, will trigger a `click` event on the control."
},
"attribute": "keys",
"reflect": false,
"defaultValue": "'k'"
},
"paused": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "PlayerProps['paused']",
"resolved": "boolean",
"references": {
"PlayerProps": {
"location": "import",
"path": "../../../core/player/PlayerProps"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"text": undefined,
"name": "internal"
}],
"text": ""
},
"attribute": "paused",
"reflect": false,
"defaultValue": "true"
},
"i18n": {
"type": "unknown",
"mutable": false,
"complexType": {
"original": "PlayerProps['i18n']",
"resolved": "Translation | { [x: string]: string; }",
"references": {
"PlayerProps": {
"location": "import",
"path": "../../../core/player/PlayerProps"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"text": undefined,
"name": "internal"
}],
"text": ""
},
"defaultValue": "{}"
}
}; }
}