@vime/core
Version:
Customizable, extensible, accessible and framework agnostic media player.
1,585 lines (1,584 loc) • 97.7 kB
JavaScript
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
};
import { Component, Element, Event, h, Host, Listen, Method, Prop, State, Watch, writeTask, } from '@stencil/core';
import { Universe } from 'stencil-wormhole';
import { Disposal } from '../../../utils/Disposal';
import { canAutoplay, canRotateScreen, IS_IOS, onMobileChange, onTouchInputChange, } from '../../../utils/support';
import { isString, isUndefined } from '../../../utils/unit';
import { withProviderHost } from '../../providers/ProviderConnect';
import { withFindPlayer } from './findPlayer';
import { FullscreenController } from './fullscreen/FullscreenController';
import { en } from './lang/en';
import { MediaType } from './MediaType';
import { Logger } from './PlayerLogger';
import { initialState } from './PlayerProps';
import { ViewType } from './ViewType';
import { autopause, withAutopause } from './withAutopause';
import { isComponentRegistered, withComponentRegistrar, } from './withComponentRegistry';
import { withPlayerEvents } from './withPlayerEvents';
import { withPlayerScheduler } from './withPlayerScheduler';
let idCount = 0;
/**
* The root component that encapsulates all providers, plugins and UI components. This is the
* primary component you will interact with to set properties on the player, listen for events
* and call methods.
*
* @slot - Used to pass in providers, plugins and UI components.
*/
export class Player {
constructor() {
this.disposal = new Disposal();
/**
* ------------------------------------------------------
* Props
* ------------------------------------------------------
*/
/** @internal @readonly */
this.logger = new Logger();
/** @inheritDoc */
this.icons = 'vime';
/** @inheritDoc */
this.paused = true;
/** @inheritDoc @readonly */
this.playing = false;
/** @inheritDoc @readonly */
this.duration = -1;
/** @inheritDoc */
this.currentTime = 0;
/** @inheritDoc */
this.autoplay = false;
/** @inheritDoc @readonly */
this.ready = false;
/** @inheritDoc @readonly */
this.playbackReady = false;
/** @inheritDoc */
this.loop = false;
/** @inheritDoc */
this.muted = false;
/** @inheritDoc @readonly */
this.buffered = 0;
/** @inheritDoc */
this.playbackRate = 1;
this.lastRateCheck = 1;
/** @inheritDoc @readonly */
this.playbackRates = [1];
/** @inheritDoc @readonly */
this.playbackQualities = [];
/** @inheritDoc @readonly */
this.seeking = false;
/** @inheritDoc */
this.debug = false;
/** @inheritDoc @readonly */
this.playbackStarted = false;
/** @inheritDoc @readonly */
this.playbackEnded = false;
/** @inheritDoc @readonly */
this.buffering = false;
/** @inheritDoc */
this.controls = false;
/** @inheritDoc */
this.isControlsActive = false;
/** @inheritDoc @readonly */
this.isSettingsActive = false;
/** @inheritDoc */
this.volume = 50;
/** @inheritDoc @readonly */
this.isFullscreenActive = false;
/** @inheritDoc */
this.aspectRatio = '16:9';
/** @inheritDoc @readonly */
this.isAudioView = false;
/** @inheritDoc @readonly */
this.isVideoView = false;
/** @inheritDoc @readonly */
this.isAudio = false;
/** @inheritDoc @readonly */
this.isVideo = false;
/** @inheritDoc @readonly */
this.isLive = false;
/** @inheritDoc @readonly */
this.isMobile = false;
/** @inheritDoc @readonly */
this.isTouch = false;
/** @inheritDoc @readonly */
this.isPiPActive = false;
/** @inheritDoc @readonly */
this.textTracks = [];
/** @inheritDoc @readonly */
this.currentTextTrack = -1;
/** @inheritDoc @readonly */
this.isTextTrackVisible = true;
/** @inheritDoc */
this.shouldRenderNativeTextTracks = true;
/** @inheritDoc @readonly */
this.audioTracks = [];
/** @inheritDoc @readonly */
this.currentAudioTrack = -1;
/** @inheritDoc */
this.autopause = true;
/** @inheritDoc */
this.playsinline = false;
/** @inheritDoc */
this.language = 'en';
/** @inheritDoc */
this.translations = { en };
/** @inheritDoc @readonly */
this.languages = ['en'];
/** @inheritDoc @readonly */
this.i18n = en;
withFindPlayer(this);
withComponentRegistrar(this);
withAutopause(this);
withProviderHost(this);
withPlayerEvents(this);
this.safeAdapterCall = withPlayerScheduler(this);
}
get adapter() {
var _a;
return (_a = this.provider) === null || _a === void 0 ? void 0 : _a.getAdapter();
}
onContainerChange() {
var _a;
(_a = this.fullscreenController) === null || _a === void 0 ? void 0 : _a.destroy();
if (isUndefined(this.container))
return;
this.fullscreenController = new FullscreenController(this.container);
this.fullscreenController.on('change', isActive => {
this.isFullscreenActive = isActive;
if (isActive)
this.rotateDevice();
});
this.fullscreenController.on('error', error => {
this.vmError.emit(error);
});
}
onPausedChange() {
if (this.paused) {
this.playing = false;
}
else {
autopause(this);
}
this.safeAdapterCall('paused', !this.paused ? 'play' : 'pause');
}
onDurationChange() {
this.isLive = this.duration === Infinity;
}
onCurrentTimeChange() {
const duration = this.playbackReady ? this.duration : Infinity;
this.currentTime = Math.max(0, Math.min(this.currentTime, duration));
this.safeAdapterCall('currentTime', 'setCurrentTime');
}
onPlaybackReadyChange() {
if (!this.ready)
this.ready = true;
}
onMutedChange() {
this.safeAdapterCall('muted', 'setMuted');
}
onPlaybackRateChange(newRate, prevRate) {
var _a, _b;
return __awaiter(this, void 0, void 0, function* () {
if (newRate === this.lastRateCheck)
return;
if (!(yield ((_b = (_a = (yield this.adapter)) === null || _a === void 0 ? void 0 : _a.canSetPlaybackRate) === null || _b === void 0 ? void 0 : _b.call(_a)))) {
this.logger.log('provider cannot change `playbackRate`.');
this.lastRateCheck = prevRate;
this.playbackRate = prevRate;
return;
}
if (!this.playbackRates.includes(newRate)) {
this.logger.log(`invalid \`playbackRate\` of ${newRate}, ` +
`valid values are [${this.playbackRates.join(', ')}]`);
this.lastRateCheck = prevRate;
this.playbackRate = prevRate;
return;
}
this.lastRateCheck = newRate;
this.safeAdapterCall('playbackRate', 'setPlaybackRate');
});
}
onPlaybackQualityChange(newQuality, prevQuality) {
var _a, _b;
return __awaiter(this, void 0, void 0, function* () {
if (isUndefined(newQuality) || newQuality === this.lastQualityCheck)
return;
if (!(yield ((_b = (_a = (yield this.adapter)) === null || _a === void 0 ? void 0 : _a.canSetPlaybackQuality) === null || _b === void 0 ? void 0 : _b.call(_a)))) {
this.logger.log('provider cannot change `playbackQuality`.');
this.lastQualityCheck = prevQuality;
this.playbackQuality = prevQuality;
return;
}
if (!this.playbackQualities.includes(newQuality)) {
this.logger.log(`invalid \`playbackQuality\` of ${newQuality}, ` +
`valid values are [${this.playbackQualities.join(', ')}]`);
this.lastQualityCheck = prevQuality;
this.playbackQuality = prevQuality;
return;
}
this.lastQualityCheck = newQuality;
this.safeAdapterCall('playbackQuality', 'setPlaybackQuality');
});
}
onDebugChange() {
this.logger.silent = !this.debug;
}
onVolumeChange() {
return __awaiter(this, void 0, void 0, function* () {
this.volume = Math.max(0, Math.min(this.volume, 100));
this.safeAdapterCall('volume', 'setVolume');
});
}
onViewTypeChange() {
this.isAudioView = this.viewType === ViewType.Audio;
this.isVideoView = this.viewType === ViewType.Video;
}
onMediaTypeChange() {
this.isAudio = this.mediaType === MediaType.Audio;
this.isVideo = this.mediaType === MediaType.Video;
}
onLanguageChange(_, prevLanguage) {
if (!this.languages.includes(this.language)) {
this.logger.log(`invalid \`language\` of ${this.language}, ` +
`valid values are [${this.languages.join(', ')}]`);
this.language = prevLanguage;
return;
}
this.i18n = this.translations[this.language];
}
onTranslationsChange() {
Object.assign(this.translations, { en });
this.languages = Object.keys(this.translations);
this.i18n = this.translations[this.language];
}
onError(event) {
this.logger.warn(event.detail);
}
/**
* ------------------------------------------------------
* Methods
* ------------------------------------------------------
*/
/** @inheritDoc */
getProvider() {
return __awaiter(this, void 0, void 0, function* () {
return this.provider;
});
}
/** @internal */
getAdapter() {
return __awaiter(this, void 0, void 0, function* () {
return this.adapter;
});
}
/** @inheritDoc */
play() {
var _a;
return __awaiter(this, void 0, void 0, function* () {
return (_a = (yield this.adapter)) === null || _a === void 0 ? void 0 : _a.play();
});
}
/** @inheritDoc */
pause() {
var _a;
return __awaiter(this, void 0, void 0, function* () {
return (_a = (yield this.adapter)) === null || _a === void 0 ? void 0 : _a.pause();
});
}
/** @inheritDoc */
canPlay(type) {
var _a, _b;
return __awaiter(this, void 0, void 0, function* () {
return (_b = (_a = (yield this.adapter)) === null || _a === void 0 ? void 0 : _a.canPlay(type)) !== null && _b !== void 0 ? _b : false;
});
}
/** @inheritDoc */
canAutoplay() {
return __awaiter(this, void 0, void 0, function* () {
return canAutoplay();
});
}
/** @inheritDoc */
canMutedAutoplay() {
return __awaiter(this, void 0, void 0, function* () {
return canAutoplay(true);
});
}
/** @inheritDoc */
canSetPlaybackRate() {
var _a, _b, _c;
return __awaiter(this, void 0, void 0, function* () {
return (_c = (_b = (_a = (yield this.adapter)) === null || _a === void 0 ? void 0 : _a.canSetPlaybackRate) === null || _b === void 0 ? void 0 : _b.call(_a)) !== null && _c !== void 0 ? _c : false;
});
}
/** @inheritDoc */
canSetPlaybackQuality() {
var _a, _b, _c;
return __awaiter(this, void 0, void 0, function* () {
return (_c = (_b = (_a = (yield this.adapter)) === null || _a === void 0 ? void 0 : _a.canSetPlaybackQuality) === null || _b === void 0 ? void 0 : _b.call(_a)) !== null && _c !== void 0 ? _c : false;
});
}
/** @inheritDoc */
canSetFullscreen() {
var _a, _b, _c;
return __awaiter(this, void 0, void 0, function* () {
return (this.fullscreenController.isSupported ||
((_c = (_b = (_a = (yield this.adapter)) === null || _a === void 0 ? void 0 : _a.canSetFullscreen) === null || _b === void 0 ? void 0 : _b.call(_a)) !== null && _c !== void 0 ? _c : false));
});
}
/** @inheritDoc */
enterFullscreen(options) {
var _a, _b, _c;
return __awaiter(this, void 0, void 0, function* () {
if (!this.isVideoView) {
throw Error('Cannot enter fullscreen on an audio player view.');
}
if (this.fullscreenController.isSupported) {
return this.fullscreenController.requestFullscreen();
}
const adapter = yield this.adapter;
const canProviderSetFullscreen = (_b = (yield ((_a = adapter === null || adapter === void 0 ? void 0 : adapter.canSetFullscreen) === null || _a === void 0 ? void 0 : _a.call(adapter)))) !== null && _b !== void 0 ? _b : false;
if (canProviderSetFullscreen) {
return (_c = adapter === null || adapter === void 0 ? void 0 : adapter.enterFullscreen) === null || _c === void 0 ? void 0 : _c.call(adapter, options);
}
throw Error('Fullscreen API is not available.');
});
}
/** @inheritDoc */
exitFullscreen() {
var _a, _b;
return __awaiter(this, void 0, void 0, function* () {
if (this.fullscreenController.isSupported) {
return this.fullscreenController.exitFullscreen();
}
return (_b = (_a = (yield this.adapter)) === null || _a === void 0 ? void 0 : _a.exitFullscreen) === null || _b === void 0 ? void 0 : _b.call(_a);
});
}
/** @inheritDoc */
canSetPiP() {
var _a, _b, _c;
return __awaiter(this, void 0, void 0, function* () {
return (_c = (_b = (_a = (yield this.adapter)) === null || _a === void 0 ? void 0 : _a.canSetPiP) === null || _b === void 0 ? void 0 : _b.call(_a)) !== null && _c !== void 0 ? _c : false;
});
}
/** @inheritDoc */
enterPiP() {
var _a, _b;
return __awaiter(this, void 0, void 0, function* () {
if (!this.isVideoView)
throw Error('Cannot enter PiP mode on an audio player view.');
if (!(yield this.canSetPiP()))
throw Error('Picture-in-Picture API is not available.');
return (_b = (_a = (yield this.adapter)) === null || _a === void 0 ? void 0 : _a.enterPiP) === null || _b === void 0 ? void 0 : _b.call(_a);
});
}
/** @inheritDoc */
exitPiP() {
var _a, _b;
return __awaiter(this, void 0, void 0, function* () {
return (_b = (_a = (yield this.adapter)) === null || _a === void 0 ? void 0 : _a.exitPiP) === null || _b === void 0 ? void 0 : _b.call(_a);
});
}
/** @inheritDoc */
canSetAudioTrack() {
var _a;
return __awaiter(this, void 0, void 0, function* () {
return !isUndefined((_a = (yield this.adapter)) === null || _a === void 0 ? void 0 : _a.setCurrentAudioTrack);
});
}
/** @inheritDoc */
setCurrentAudioTrack(trackId) {
var _a, _b;
return __awaiter(this, void 0, void 0, function* () {
(_b = (_a = (yield this.adapter)) === null || _a === void 0 ? void 0 : _a.setCurrentAudioTrack) === null || _b === void 0 ? void 0 : _b.call(_a, trackId);
});
}
/** @inheritDoc */
canSetTextTrack() {
var _a;
return __awaiter(this, void 0, void 0, function* () {
return !isUndefined((_a = (yield this.adapter)) === null || _a === void 0 ? void 0 : _a.setCurrentTextTrack);
});
}
/** @inheritDoc */
setCurrentTextTrack(trackId) {
var _a, _b;
return __awaiter(this, void 0, void 0, function* () {
(_b = (_a = (yield this.adapter)) === null || _a === void 0 ? void 0 : _a.setCurrentTextTrack) === null || _b === void 0 ? void 0 : _b.call(_a, trackId);
});
}
/** @inheritDoc */
canSetTextTrackVisibility() {
var _a;
return __awaiter(this, void 0, void 0, function* () {
return !isUndefined((_a = (yield this.adapter)) === null || _a === void 0 ? void 0 : _a.setTextTrackVisibility);
});
}
/** @inheritDoc */
setTextTrackVisibility(isVisible) {
var _a, _b;
return __awaiter(this, void 0, void 0, function* () {
(_b = (_a = (yield this.adapter)) === null || _a === void 0 ? void 0 : _a.setTextTrackVisibility) === null || _b === void 0 ? void 0 : _b.call(_a, isVisible);
});
}
/** @inheritDoc */
extendLanguage(language, translation) {
var _a;
return __awaiter(this, void 0, void 0, function* () {
const translations = Object.assign(Object.assign({}, this.translations), { [language]: Object.assign(Object.assign({}, ((_a = this.translations[language]) !== null && _a !== void 0 ? _a : {})), translation) });
this.translations = translations;
});
}
connectedCallback() {
this.onPausedChange();
this.onCurrentTimeChange();
this.onVolumeChange();
this.onMutedChange();
this.onDebugChange();
this.onContainerChange();
this.onTranslationsChange();
this.onLanguageChange(this.language, initialState.language);
this.disposal.add(onMobileChange(isMobile => {
this.isMobile = isMobile;
}));
this.disposal.add(onTouchInputChange(isTouch => {
this.isTouch = isTouch;
}));
}
componentWillLoad() {
Universe.create(this, this.getPlayerState());
}
disconnectedCallback() {
var _a;
(_a = this.fullscreenController) === null || _a === void 0 ? void 0 : _a.destroy();
this.disposal.empty();
}
rotateDevice() {
return __awaiter(this, void 0, void 0, function* () {
if (!this.isMobile || !canRotateScreen())
return;
try {
if (this.isFullscreenActive) {
yield window.screen.orientation.lock('landscape');
}
else {
yield window.screen.orientation.unlock();
}
}
catch (err) {
this.vmError.emit(err);
}
});
}
getPlayerState() {
const state = {};
const props = Object.keys(initialState);
for (let i = 0; i < props.length; i += 1) {
state[props[i]] = this[props[i]];
}
return state;
}
calcAspectRatio() {
const [width, height] = /\d{1,2}:\d{1,2}/.test(this.aspectRatio)
? this.aspectRatio.split(':')
: [16, 9];
return (100 / Number(width)) * Number(height);
}
/**
* Returns the inner container.
*/
getContainer() {
return __awaiter(this, void 0, void 0, function* () {
return this.container;
});
}
/** @internal Exposed for E2E testing. */
callAdapter(method, value) {
return __awaiter(this, void 0, void 0, function* () {
return (yield this.adapter)[method](value);
});
}
hasCustomControls() {
return isComponentRegistered(this, 'vm-controls');
}
genId() {
var _a;
const id = (_a = this.host) === null || _a === void 0 ? void 0 : _a.id;
if (isString(id) && id.length > 0)
return id;
idCount += 1;
return `vm-player-${idCount}`;
}
render() {
const label = `${this.isAudioView ? 'Audio Player' : 'Video Player'}` +
`${!isUndefined(this.mediaTitle) ? ` - ${this.mediaTitle}` : ''}`;
const canShowCustomUI = !IS_IOS ||
!this.isVideoView ||
(this.playsinline && !this.isFullscreenActive);
if (!canShowCustomUI) {
this.controls = true;
}
const isIdle = canShowCustomUI &&
this.hasCustomControls() &&
this.isVideoView &&
!this.paused &&
!this.isControlsActive;
const isBlockerVisible = !this.controls && canShowCustomUI && this.isVideoView;
return (h(Host, { id: this.genId(), idle: isIdle, mobile: this.isMobile, touch: this.isTouch, live: this.isLive, audio: this.isAudioView, video: this.isVideoView, pip: this.isPiPActive, fullscreen: this.isFullscreenActive },
h("div", { "aria-label": label, "aria-hidden": !this.ready ? 'true' : 'false', "aria-busy": !this.playbackReady ? 'true' : 'false', class: {
player: true,
idle: isIdle,
audio: this.isAudioView,
video: this.isVideoView,
fullscreen: this.isFullscreenActive,
}, style: {
paddingBottom: this.isVideoView
? `${this.calcAspectRatio()}%`
: undefined,
}, ref: el => {
writeTask(() => {
this.container = el;
});
} },
isBlockerVisible && h("div", { class: "blocker" }),
h(Universe.Provider, { state: this.getPlayerState() },
h("slot", null)))));
}
static get is() { return "vm-player"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() { return {
"$": ["player.css"]
}; }
static get styleUrls() { return {
"$": ["player.css"]
}; }
static get properties() { return {
"logger": {
"type": "unknown",
"mutable": false,
"complexType": {
"original": "Logger",
"resolved": "Logger",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"text": undefined,
"name": "internal"
}, {
"text": undefined,
"name": "readonly"
}],
"text": ""
},
"defaultValue": "new Logger()"
},
"theme": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string | undefined",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"text": undefined,
"name": "inheritDoc"
}],
"text": "This property has no role other than scoping CSS selectors."
},
"attribute": "theme",
"reflect": true
},
"icons": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"text": undefined,
"name": "inheritDoc"
}],
"text": "The default icon library to be used throughout the player. You can use a predefined\nicon library such as vime, material, remix or boxicons. If you'd like to provide your own\nsee the `<vm-icon-library>` component. Remember to pass in the name of your icon library here."
},
"attribute": "icons",
"reflect": true,
"defaultValue": "'vime'"
},
"paused": {
"type": "boolean",
"mutable": true,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"text": undefined,
"name": "inheritDoc"
}],
"text": "Whether playback should be paused. Defaults to `true` if no media has loaded or playback has\nnot started. Setting this to `true` will begin/resume playback."
},
"attribute": "paused",
"reflect": false,
"defaultValue": "true"
},
"playing": {
"type": "boolean",
"mutable": true,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"text": undefined,
"name": "inheritDoc"
}, {
"text": undefined,
"name": "readonly"
}],
"text": "Whether media is actively playing back. Defaults to `false` if no media has\nloaded or playback has not started."
},
"attribute": "playing",
"reflect": false,
"defaultValue": "false"
},
"duration": {
"type": "number",
"mutable": true,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"text": undefined,
"name": "inheritDoc"
}, {
"text": undefined,
"name": "readonly"
}],
"text": "A `double` indicating the total playback length of the media in seconds. Defaults\nto `-1` if no media has been loaded. If the media is being streamed live then the duration is\nequal to `Infinity`."
},
"attribute": "duration",
"reflect": false,
"defaultValue": "-1"
},
"mediaTitle": {
"type": "string",
"mutable": true,
"complexType": {
"original": "string",
"resolved": "string | undefined",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"text": undefined,
"name": "inheritDoc"
}, {
"text": undefined,
"name": "readonly"
}],
"text": "The title of the current media. Defaults to `undefined` if no media has been\nloaded."
},
"attribute": "media-title",
"reflect": false
},
"currentProvider": {
"type": "string",
"mutable": true,
"complexType": {
"original": "Provider",
"resolved": "Provider.Audio | Provider.Dailymotion | Provider.Dash | Provider.HLS | Provider.Video | Provider.Vimeo | Provider.YouTube | undefined",
"references": {
"Provider": {
"location": "import",
"path": "../../providers/Provider"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"text": undefined,
"name": "inheritDoc"
}, {
"text": undefined,
"name": "readonly"
}],
"text": "The current provider name whose responsible for loading and playing media.\nDefaults to `undefined` when no provider has been loaded."
},
"attribute": "current-provider",
"reflect": false
},
"currentSrc": {
"type": "string",
"mutable": true,
"complexType": {
"original": "string",
"resolved": "string | undefined",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"text": undefined,
"name": "inheritDoc"
}, {
"text": undefined,
"name": "readonly"
}],
"text": "The absolute URL of the media resource that has been chosen. Defaults to\n`undefined` if no media has been loaded."
},
"attribute": "current-src",
"reflect": false
},
"currentPoster": {
"type": "string",
"mutable": true,
"complexType": {
"original": "string",
"resolved": "string | undefined",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"text": undefined,
"name": "inheritDoc"
}, {
"text": undefined,
"name": "readonly"
}],
"text": "The absolute URL of the poster for the current media resource. Defaults to\n`undefined` if no media/poster has been loaded."
},
"attribute": "current-poster",
"reflect": false
},
"currentTime": {
"type": "number",
"mutable": true,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"text": undefined,
"name": "inheritDoc"
}],
"text": "A `double` indicating the current playback time in seconds. Defaults to `0` if the media has\nnot started to play and has not seeked. Setting this value seeks the media to the new\ntime. The value can be set to a minimum of `0` and maximum of the total length of the\nmedia (indicated by the duration prop)."
},
"attribute": "current-time",
"reflect": false,
"defaultValue": "0"
},
"autoplay": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"text": undefined,
"name": "inheritDoc"
}],
"text": "Whether playback should automatically begin playing once the media is ready to do so. This\nwill only work if the browsers `autoplay` policies have been satisfied. It'll generally work\nif the player is muted, or the user frequently interacts with your site. You can check\nif it's possible to autoplay via the `canAutoplay()` or `canMutedAutoplay()` methods.\nDepending on the provider, changing this prop may cause the player to completely reset."
},
"attribute": "autoplay",
"reflect": false,
"defaultValue": "false"
},
"ready": {
"type": "boolean",
"mutable": true,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"text": undefined,
"name": "inheritDoc"
}, {
"text": undefined,
"name": "readonly"
}],
"text": "Whether the player has loaded and is ready to be interacted with."
},
"attribute": "ready",
"reflect": true,
"defaultValue": "false"
},
"playbackReady": {
"type": "boolean",
"mutable": true,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"text": undefined,
"name": "inheritDoc"
}, {
"text": undefined,
"name": "readonly"
}],
"text": "Whether media is ready for playback to begin."
},
"attribute": "playback-ready",
"reflect": false,
"defaultValue": "false"
},
"loop": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"text": undefined,
"name": "inheritDoc"
}],
"text": "Whether media should automatically start playing from the beginning every time it ends."
},
"attribute": "loop",
"reflect": false,
"defaultValue": "false"
},
"muted": {
"type": "boolean",
"mutable": true,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"text": undefined,
"name": "inheritDoc"
}],
"text": "Whether the audio is muted or not."
},
"attribute": "muted",
"reflect": false,
"defaultValue": "false"
},
"buffered": {
"type": "number",
"mutable": true,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"text": undefined,
"name": "inheritDoc"
}, {
"text": undefined,
"name": "readonly"
}],
"text": "The length of the media in seconds that has been downloaded by the browser."
},
"attribute": "buffered",
"reflect": false,
"defaultValue": "0"
},
"playbackRate": {
"type": "number",
"mutable": true,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"text": undefined,
"name": "inheritDoc"
}],
"text": "A `double` indicating the rate at which media is being played back. If the value is `<1` then\nplayback is slowed down; if `>1` then playback is sped up. Defaults to `1`. The playback rate\ncan only be set to a rate found in the `playbackRates` prop. Some providers may not\nallow changing the playback rate, you can check if it's possible via `canSetPlaybackRate()`."
},
"attribute": "playback-rate",
"reflect": false,
"defaultValue": "1"
},
"playbackRates": {
"type": "unknown",
"mutable": true,
"complexType": {
"original": "number[]",
"resolved": "number[]",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"text": undefined,
"name": "inheritDoc"
}, {
"text": undefined,
"name": "readonly"
}],
"text": "The playback rates available for the current media."
},
"defaultValue": "[1]"
},
"playbackQuality": {
"type": "string",
"mutable": true,
"complexType": {
"original": "string",
"resolved": "string | undefined",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"text": undefined,
"name": "inheritDoc"
}],
"text": "Indicates the quality of the media. The value will differ between audio and video. For audio\nthis might be some combination of the encoding format (AAC, MP3), bitrate in kilobits per\nsecond (kbps) and sample rate in kilohertz (kHZ). For video this will be the number of vertical\npixels it supports. For example, if the video has a resolution of `1920x1080` then the quality\nwill return `1080p`. Defaults to `undefined` which you can interpret as the quality is unknown.\nThe value can also be `Auto` for adaptive bit streams (ABR), where the provider can\nautomatically manage the playback quality. The quality can only be set to a quality found\nin the `playbackQualities` prop. Some providers may not allow changing the quality, you can\ncheck if it's possible via `canSetPlaybackQuality()`."
},
"attribute": "playback-quality",
"reflect": false
},
"playbackQualities": {
"type": "unknown",
"mutable": true,
"complexType": {
"original": "string[]",
"resolved": "string[]",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"text": undefined,
"name": "inheritDoc"
}, {
"text": undefined,
"name": "readonly"
}],
"text": "The media qualities available for the current media."
},
"defaultValue": "[]"
},
"seeking": {
"type": "boolean",
"mutable": true,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"text": undefined,
"name": "inheritDoc"
}, {
"text": undefined,
"name": "readonly"
}],
"text": "Whether the player is in the process of seeking to a new time position."
},
"attribute": "seeking",
"reflect": false,
"defaultValue": "false"
},
"debug": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"text": undefined,
"name": "inheritDoc"
}],
"text": "Whether the player is in debug mode and should `console.x` information about\nits internal state."
},
"attribute": "debug",
"reflect": false,
"defaultValue": "false"
},
"playbackStarted": {
"type": "boolean",
"mutable": true,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"text": undefined,
"name": "inheritDoc"
}, {
"text": undefined,
"name": "readonly"
}],
"text": "Whether the media has initiated playback. In other words it will be true if\n`currentTime > 0`."
},
"attribute": "playback-started",
"reflect": false,
"defaultValue": "false"
},
"playbackEnded": {
"type": "boolean",
"mutable": true,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"text": undefined,
"name": "inheritDoc"
}, {
"text": undefined,
"name": "readonly"
}],
"text": "Whether media playback has reached the end. In other words it'll be true if\n`currentTime === duration`."
},
"attribute": "playback-ended",
"reflect": false,
"defaultValue": "false"
},
"buffering": {
"type": "boolean",
"mutable": true,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"text": undefined,
"name": "inheritDoc"
}, {
"text": undefined,
"name": "readonly"
}],
"text": "Whether playback has temporarily stopped because of a lack of temporary data."
},
"attribute": "buffering",
"reflect": false,
"defaultValue": "false"
},
"controls": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"text": undefined,
"name": "inheritDoc"
}],
"text": "Indicates whether a user interface should be shown for controlling the resource. Set this to\n`false` when you want to provide your own custom controls, and `true` if you want the current\nprovider to supply its own default controls. Depending on the provider, changing this prop\nmay cause the player to completely reset."
},
"attribute": "controls",
"reflect": false,
"defaultValue": "false"
},
"isControlsActive": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"text": undefined,
"name": "inheritDoc"
}],
"text": "Whether the controls are currently visible. This is currently only supported by custom\ncontrols."
},
"attribute": "is-controls-active",
"reflect": false,
"defaultValue": "false"
},
"isSettingsActive": {
"type": "boolean",
"mutable": true,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"text": undefined,
"name": "inheritDoc"
}, {
"text": undefined,
"name": "readonly"
}],
"text": "Whether the settings menu has been opened and is currently visible. This is\ncurrently only supported by custom settings."
},
"attribute": "is-settings-active",
"reflect": false,
"defaultValue": "false"
},
"volume": {
"type": "number",
"mutable": true,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"text": undefined,
"name": "inheritDoc"
}],
"text": "An `int` between `0` (silent) and `100` (loudest) indicating the audio volume."
},
"attribute": "volume",
"reflect": false,
"defaultValue": "50"
},
"isFullscreenActive": {
"type": "boolean",
"mutable": true,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"text": undefined,
"name": "inheritDoc"
}, {
"text": undefined,
"name": "readonly"
}],
"text": "Whether the player is currently in fullscreen mode."
},
"attribute": "is-fullscreen-active",
"reflect": false,
"defaultValue": "false"
},
"aspectRatio": {
"type": "string",
"mutable": true,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"text": undefined,
"name": "inheritDoc"
}],
"text": "The aspect ratio of the player expressed as `width:height` (`16:9`). This is only applied if\nthe `viewType` is `video` and the player is not in fullscreen mode."
},
"attribute": "aspect-ratio",
"reflect": false,
"defaultValue": "'16:9'"
},
"viewType": {
"type": "string",
"mutable": true,
"complexType": {
"original": "ViewType",
"resolved": "ViewType.Audio | ViewType.Video | undefined",
"references": {
"ViewType": {
"location": "import",
"path": "./ViewType"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"text": undefined,
"name": "inheritDoc"
}, {
"text": undefined,
"name": "readonly"
}],
"text": "The type of player view that is being used, whether it's an audio player view or\nvideo player view. Normally if the media type is of audio then the view is of type audio, but\nin some cases it might be desirable to show a different view type. For example, when playing\naudio with a poster. This is subject to the provider allowing it. Defaults to `undefined`\nwhen no media has been loaded."
},
"attribute": "view-type",
"reflect": false
},
"isAudioView": {
"type": "boolean",
"mutable": true,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"text": undefined,
"name": "inheritDoc"
}, {
"text": undefined,
"name": "readonly"
}],
"text": "Whether the current view is of type `audio`, shorthand for\n`viewType === ViewType.Audio`."
},
"attribute": "is-audio-view",
"reflect": false,
"defaultValue": "false"
},
"isVideoView": {
"type": "boolean",
"mutable": true,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"text": undefined,
"name": "inheritDoc"
}, {
"text": undefined,
"name": "readonly"
}],
"text": "Whether the current view is of type `video`, shorthand for\n`viewType === ViewType.Video`."
},
"attribute": "is-video-view",
"reflect": false,
"defaultValue": "false"
},
"mediaType": {
"type": "string",
"mutable": true,
"complexType": {
"original": "MediaType",
"resolved": "MediaType.Audio | MediaType.Video | undefined",
"references": {
"MediaType": {
"location": "import",
"path": "./MediaType"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"text": undefined,
"name": "inheritDoc"
}, {
"text": undefined,
"name": "readonly"
}],
"text": "The type of media that is currently active, whether it's audio or video. Defaults\nto `undefined` when no media has been loaded or the type cannot be determined."
},
"attribute": "media-type",
"reflect": false
},
"isAudio": {
"type": "boolean",
"mutable": true,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"text": undefined,
"name": "inheritDoc"
}, {
"text": undefined,
"name": "readonly"
}],
"text": "Whether the current media is of type `audio`, shorthand for\n`mediaType === MediaType.Audio`."
},
"attribute": "is-audio",
"reflect": false,
"defaultValue": "false"
},
"isVideo": {
"type": "boolean",
"mutable": true,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"text": undefined,
"name": "inheritDoc"
}, {
"text": undefined,
"name": "readonly"
}],
"text": "Whether the current media is of type `video`, shorthand for\n`mediaType === MediaType.Video`."
},
"attribute": "is-video",
"reflect": false,
"defaultValue": "false"
},
"isLive": {
"type": "boolean",
"mutable": true,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"text": undefined,
"name": "inheritDoc"
}, {
"text": undefined,
"name": "readonly"
}],
"text": "Whether the current media is being broadcast live (`duration === Infinity`)."
},
"attribute": "is-live",
"reflect": false,
"defaultValue": "false"
},
"isMobile": {
"type": "boolean",
"mutable": true,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"text": undefined,
"name": "inheritDoc"
}, {
"text": undefined,
"name": "readonly"
}],
"text": "Whether the player is in mobile mode. This is determined by parsing\n`window.navigator.userAgent`."
},
"attribute": "is-mobile",
"reflect": false,
"defaultValue": "false"
},
"isTouch": {
"type": "boolean",
"mutable": true,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"text": undefined,
"name": "inheritDoc"
}, {
"text": undefined,
"name": "readonly"
}],
"text": "Whether the player is in touch mode. This is determined by listening for\nmouse/touch events and toggling this value."
},
"attribute": "is-touch",
"reflect": false,
"defaultValue": "false"
},
"isPiPActive": {
"type": "boolean",
"mutable": true,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"text": undefined,
"name": "inheritDoc"
}, {
"text": undefined,
"name": "readonly"
}],
"text": "Whether the player is currently in picture-in-picture mode."
},
"attribute": "is-pi-p-active",
"reflect": false,
"defaultValue": "false"
},
"textTracks": {
"type": "unknown",
"mutable": false,
"complexType": {
"original": "never[]",
"resolved": "never[]",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"text": undefined,
"name": "inheritDoc"
}, {
"text": undefined,
"name": "readonly"
}],
"text": "The text tracks associated with the current media."
},
"defaultValue": "[]"
},
"currentTextTrack": {
"type": "number",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"text": undefined,
"name": "inheritDoc"
}, {
"text": undefined,
"name": "readonly"
}],
"text": "Gets the index of the currently active text track. Defaults to `-1` to when\nall text tracks are disabled. If you'd like to set it than see the `setCurrentTextTrack`\nmethod."
},
"attribute": "current-text-track",
"reflect": false,
"defaultValue": "-1"
},
"isTextTrackVisible": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,