@vime/core
Version:
Customizable, extensible, accessible and framework agnostic media player.
309 lines (308 loc) • 8.22 kB
JavaScript
import { Component, Element, Event, h, Prop, State, Watch, } from '@stencil/core';
import { isNull, isUndefined } from '../../../utils/unit';
import { LazyLoader } from '../../core/player/LazyLoader';
import { withComponentRegistry } from '../../core/player/withComponentRegistry';
import { withPlayerContext } from '../../core/player/withPlayerContext';
/**
* Loads the poster set in the player prop `currentPoster` and displays it. The poster will automatically
* dissapear once playback starts.
*
* ## Visual
*
* <img
* src="https://raw.githubusercontent.com/vime-js/vime/master/packages/core/src/components/ui/poster/poster.png"
* alt="Vime poster component"
* />
*/
export class Poster {
constructor() {
this.isHidden = true;
this.isActive = false;
this.hasLoaded = false;
/**
* How the poster image should be resized to fit the container (sets the `object-fit` property).
*/
this.fit = 'cover';
/** @internal */
this.isVideoView = false;
/** @internal */
this.playbackStarted = false;
/** @internal */
this.currentTime = 0;
withComponentRegistry(this);
withPlayerContext(this, [
'mediaTitle',
'currentPoster',
'playbackStarted',
'currentTime',
'isVideoView',
]);
}
onCurrentPosterChange() {
var _a;
this.hasLoaded = false;
(_a = this.lazyLoader) === null || _a === void 0 ? void 0 : _a.onMutation();
}
connectedCallback() {
this.lazyLoader = new LazyLoader(this.host, ['data-src', 'src'], el => {
const src = el.getAttribute('data-src');
el.removeAttribute('src');
if (!isNull(src)) {
el.setAttribute('src', src);
}
});
this.onEnabledChange();
this.onActiveChange();
}
disconnectedCallback() {
this.lazyLoader.destroy();
}
onVisibilityChange() {
!this.isHidden && this.isActive
? this.vmWillShow.emit()
: this.vmWillHide.emit();
}
onEnabledChange() {
this.isHidden = !this.isVideoView;
this.onVisibilityChange();
}
onActiveChange() {
this.isActive = !this.playbackStarted || this.currentTime <= 0.1;
this.onVisibilityChange();
}
onPosterLoad() {
this.vmLoaded.emit();
this.hasLoaded = true;
}
render() {
return (h("div", { class: {
poster: true,
hidden: this.isHidden,
active: this.isActive && this.hasLoaded,
} },
h("img", { class: "lazy", "data-src": this.currentPoster, alt: !isUndefined(this.mediaTitle)
? `${this.mediaTitle} Poster`
: 'Media Poster', style: { objectFit: this.fit }, onLoad: this.onPosterLoad.bind(this) })));
}
static get is() { return "vm-poster"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() { return {
"$": ["poster.css"]
}; }
static get styleUrls() { return {
"$": ["poster.css"]
}; }
static get properties() { return {
"fit": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'fill' | 'contain' | 'cover' | 'scale-down' | 'none'",
"resolved": "\"contain\" | \"cover\" | \"fill\" | \"none\" | \"scale-down\" | undefined",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "How the poster image should be resized to fit the container (sets the `object-fit` property)."
},
"attribute": "fit",
"reflect": false,
"defaultValue": "'cover'"
},
"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"
},
"currentPoster": {
"type": "string",
"mutable": false,
"complexType": {
"original": "PlayerProps['currentPoster']",
"resolved": "string | undefined",
"references": {
"PlayerProps": {
"location": "import",
"path": "../../core/player/PlayerProps"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"text": undefined,
"name": "internal"
}],
"text": ""
},
"attribute": "current-poster",
"reflect": false
},
"mediaTitle": {
"type": "string",
"mutable": false,
"complexType": {
"original": "PlayerProps['mediaTitle']",
"resolved": "string | undefined",
"references": {
"PlayerProps": {
"location": "import",
"path": "../../core/player/PlayerProps"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"text": undefined,
"name": "internal"
}],
"text": ""
},
"attribute": "media-title",
"reflect": false
},
"playbackStarted": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "PlayerProps['playbackStarted']",
"resolved": "boolean",
"references": {
"PlayerProps": {
"location": "import",
"path": "../../core/player/PlayerProps"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"text": undefined,
"name": "internal"
}],
"text": ""
},
"attribute": "playback-started",
"reflect": false,
"defaultValue": "false"
},
"currentTime": {
"type": "number",
"mutable": false,
"complexType": {
"original": "PlayerProps['currentTime']",
"resolved": "number",
"references": {
"PlayerProps": {
"location": "import",
"path": "../../core/player/PlayerProps"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"text": undefined,
"name": "internal"
}],
"text": ""
},
"attribute": "current-time",
"reflect": false,
"defaultValue": "0"
}
}; }
static get states() { return {
"isHidden": {},
"isActive": {},
"hasLoaded": {}
}; }
static get events() { return [{
"method": "vmLoaded",
"name": "vmLoaded",
"bubbles": false,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "Emitted when the poster has loaded."
},
"complexType": {
"original": "void",
"resolved": "void",
"references": {}
}
}, {
"method": "vmWillShow",
"name": "vmWillShow",
"bubbles": false,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "Emitted when the poster will be shown."
},
"complexType": {
"original": "void",
"resolved": "void",
"references": {}
}
}, {
"method": "vmWillHide",
"name": "vmWillHide",
"bubbles": false,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "Emitted when the poster will be hidden."
},
"complexType": {
"original": "void",
"resolved": "void",
"references": {}
}
}]; }
static get elementRef() { return "host"; }
static get watchers() { return [{
"propName": "currentPoster",
"methodName": "onCurrentPosterChange"
}, {
"propName": "isVideoView",
"methodName": "onEnabledChange"
}, {
"propName": "currentTime",
"methodName": "onActiveChange"
}, {
"propName": "playbackStarted",
"methodName": "onActiveChange"
}]; }
}