@vime/core
Version:
Customizable, extensible, accessible and framework agnostic media player.
336 lines (335 loc) • 9.24 kB
JavaScript
import { Component, Event, 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 whether there is audio output or not. In other words the muted state of
* the player.
*
* ## Visual
*
* <img
* src="https://raw.githubusercontent.com/vime-js/vime/master/packages/core/src/components/ui/controls/mute-control/mute-control.png"
* alt="Vime mute control component"
* />
*/
export class MuteControl {
constructor() {
/**
* The name of the low volume icon to resolve from the icon library.
*/
this.lowVolumeIcon = 'volume-low';
/**
* The name of the high volume icon to resolve from the icon library.
*/
this.highVolumeIcon = 'volume-high';
/**
* The name of the muted volume icon to resolve from the icon library.
*/
this.mutedIcon = 'volume-mute';
/**
* 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 = 'm';
/** @internal */
this.volume = 50;
/** @internal */
this.muted = false;
/** @internal */
this.i18n = {};
withComponentRegistry(this);
withPlayerContext(this, ['muted', 'volume', 'i18n']);
}
connectedCallback() {
this.dispatch = createDispatcher(this);
}
getIcon() {
const volumeIcon = this.volume < 50 ? this.lowVolumeIcon : this.highVolumeIcon;
return this.muted || this.volume === 0 ? this.mutedIcon : volumeIcon;
}
onClick() {
this.dispatch('muted', !this.muted);
}
render() {
const tooltip = this.muted ? this.i18n.unmute : this.i18n.mute;
const tooltipWithHint = !isUndefined(this.keys)
? `${tooltip} (${this.keys})`
: tooltip;
return (h("vm-control", { label: this.i18n.mute, pressed: this.muted, keys: this.keys, onClick: this.onClick.bind(this) },
h("vm-icon", { name: this.getIcon(), library: this.icons }),
h("vm-tooltip", { hidden: this.hideTooltip, position: this.tooltipPosition, direction: this.tooltipDirection }, tooltipWithHint)));
}
static get is() { return "vm-mute-control"; }
static get encapsulation() { return "shadow"; }
static get properties() { return {
"lowVolumeIcon": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "The name of the low volume icon to resolve from the icon library."
},
"attribute": "low-volume-icon",
"reflect": false,
"defaultValue": "'volume-low'"
},
"highVolumeIcon": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "The name of the high volume icon to resolve from the icon library."
},
"attribute": "high-volume-icon",
"reflect": false,
"defaultValue": "'volume-high'"
},
"mutedIcon": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "The name of the muted volume icon to resolve from the icon library."
},
"attribute": "muted-icon",
"reflect": false,
"defaultValue": "'volume-mute'"
},
"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": "'m'"
},
"volume": {
"type": "number",
"mutable": false,
"complexType": {
"original": "PlayerProps['volume']",
"resolved": "number",
"references": {
"PlayerProps": {
"location": "import",
"path": "../../../core/player/PlayerProps"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"text": undefined,
"name": "internal"
}],
"text": ""
},
"attribute": "volume",
"reflect": false,
"defaultValue": "50"
},
"muted": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "PlayerProps['muted']",
"resolved": "boolean",
"references": {
"PlayerProps": {
"location": "import",
"path": "../../../core/player/PlayerProps"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"text": undefined,
"name": "internal"
}],
"text": ""
},
"attribute": "muted",
"reflect": false,
"defaultValue": "false"
},
"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": "{}"
}
}; }
static get events() { return [{
"method": "vmFocus",
"name": "vmFocus",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "Emitted when the control receives focus."
},
"complexType": {
"original": "void",
"resolved": "void",
"references": {}
}
}, {
"method": "vmBlur",
"name": "vmBlur",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "Emitted when the control loses focus."
},
"complexType": {
"original": "void",
"resolved": "void",
"references": {}
}
}]; }
}