@vime/core
Version:
Customizable, extensible, accessible and framework agnostic media player.
192 lines (191 loc) • 8.09 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, h, Method, Prop } from '@stencil/core';
import { isString } from '../../../utils/unit';
import { ViewType } from '../../core/player/ViewType';
import { withComponentRegistry } from '../../core/player/withComponentRegistry';
import { audioRegex } from '../file/utils';
import { withProviderConnect } from '../ProviderConnect';
/**
* Enables loading, playing and controlling audio via the
* HTML5 [`<audio>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio) element.
*
* > You don't interact with this component for passing player properties, controlling playback,
* listening to player events and so on, that is all done through the `vime-player` component.
*
* @slot - Pass `<source>` and `<track>` elements to the underlying HTML5 media player.
*/
export class Audio {
constructor() {
/**
* @internal Whether an external SDK will attach itself to the media player and control it.
*/
this.willAttach = false;
/** @inheritdoc */
this.preload = 'metadata';
withComponentRegistry(this);
if (!this.willAttach)
withProviderConnect(this);
}
/** @internal */
getAdapter() {
var _a, _b;
return __awaiter(this, void 0, void 0, function* () {
const adapter = (_b = (yield ((_a = this.fileProvider) === null || _a === void 0 ? void 0 : _a.getAdapter()))) !== null && _b !== void 0 ? _b : {};
adapter.canPlay = (type) => __awaiter(this, void 0, void 0, function* () { return isString(type) && audioRegex.test(type); });
return adapter;
});
}
render() {
return (
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
h("vm-file", { noConnect: true, willAttach: this.willAttach, crossOrigin: this.crossOrigin, preload: this.preload, disableRemotePlayback: this.disableRemotePlayback, mediaTitle: this.mediaTitle, viewType: ViewType.Audio, ref: (el) => {
this.fileProvider = el;
} },
h("slot", null)));
}
static get is() { return "vm-audio"; }
static get properties() { return {
"willAttach": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"text": "Whether an external SDK will attach itself to the media player and control it.",
"name": "internal"
}],
"text": ""
},
"attribute": "will-attach",
"reflect": false,
"defaultValue": "false"
},
"crossOrigin": {
"type": "string",
"mutable": false,
"complexType": {
"original": "MediaCrossOriginOption",
"resolved": "\"\" | \"anonymous\" | \"use-credentials\" | undefined",
"references": {
"MediaCrossOriginOption": {
"location": "import",
"path": "../file/MediaFileProvider"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"text": undefined,
"name": "inheritdoc"
}],
"text": "Whether to use CORS to fetch the related image. See\n[MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin) for more\ninformation."
},
"attribute": "cross-origin",
"reflect": false
},
"preload": {
"type": "string",
"mutable": false,
"complexType": {
"original": "MediaPreloadOption",
"resolved": "\"\" | \"auto\" | \"metadata\" | \"none\" | undefined",
"references": {
"MediaPreloadOption": {
"location": "import",
"path": "../file/MediaFileProvider"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"text": undefined,
"name": "inheritdoc"
}],
"text": "Provides a hint to the browser about what the author thinks will lead to the best user\nexperience with regards to what content is loaded before the video is played. See\n[MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#attr-preload) for more\ninformation."
},
"attribute": "preload",
"reflect": false,
"defaultValue": "'metadata'"
},
"disableRemotePlayback": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean | undefined",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"text": undefined,
"name": "inheritdoc"
}],
"text": "**EXPERIMENTAL:** Whether to disable the capability of remote playback in devices that are\nattached using wired (HDMI, DVI, etc.) and wireless technologies\n(Miracast, Chromecast, DLNA, AirPlay, etc)."
},
"attribute": "disable-remote-playback",
"reflect": false
},
"mediaTitle": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string | undefined",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "The title of the current media."
},
"attribute": "media-title",
"reflect": false
}
}; }
static get methods() { return {
"getAdapter": {
"complexType": {
"signature": "() => Promise<{ getInternalPlayer: () => Promise<HTMLMediaElement>; play: () => Promise<void | undefined>; pause: () => Promise<void | undefined>; canPlay: (type: any) => Promise<boolean>; setCurrentTime: (time: number) => Promise<void>; setMuted: (muted: boolean) => Promise<void>; setVolume: (volume: number) => Promise<void>; canSetPlaybackRate: () => Promise<boolean>; setPlaybackRate: (rate: number) => Promise<void>; canSetPiP: () => Promise<boolean>; enterPiP: () => Promise<any>; exitPiP: () => Promise<any>; canSetFullscreen: () => Promise<boolean>; enterFullscreen: () => Promise<void>; exitFullscreen: () => Promise<void>; setCurrentTextTrack: (trackId: number) => Promise<void>; setTextTrackVisibility: (isVisible: boolean) => Promise<void>; }>",
"parameters": [],
"references": {
"Promise": {
"location": "global"
},
"HTMLMediaElement": {
"location": "global"
}
},
"return": "Promise<{ getInternalPlayer: () => Promise<HTMLMediaElement>; play: () => Promise<void | undefined>; pause: () => Promise<void | undefined>; canPlay: (type: any) => Promise<boolean>; setCurrentTime: (time: number) => Promise<void>; setMuted: (muted: boolean) => Promise<void>; setVolume: (volume: number) => Promise<void>; canSetPlaybackRate: () => Promise<boolean>; setPlaybackRate: (rate: number) => Promise<void>; canSetPiP: () => Promise<boolean>; enterPiP: () => Promise<any>; exitPiP: () => Promise<any>; canSetFullscreen: () => Promise<boolean>; enterFullscreen: () => Promise<void>; exitFullscreen: () => Promise<void>; setCurrentTextTrack: (trackId: number) => Promise<void>; setTextTrackVisibility: (isVisible: boolean) => Promise<void>; }>"
},
"docs": {
"text": "",
"tags": [{
"name": "internal",
"text": undefined
}]
}
}
}; }
}