@nent/core
Version:
252 lines (251 loc) • 6.91 kB
JavaScript
/*!
* NENT 2022
*/
import { Component, Element, Event, h, Host, Prop, } from '@stencil/core';
import { actionBus, eventBus } from '../../services/actions';
import { debugIf, warn } from '../../services/common/logging';
import { VideoActionListener } from './services/actions';
import { VideoTimer } from './services/timer';
/**
* This element enables the UI services. These are typically
* web element plug-ins to manage things like Modals, Drawers,
* menus, etc. The basic provider is used to toggle dark-mode.
*
* @system video
* @extension actions
*/
export class NVideo {
constructor() {
/**
* Provide the element selector for the media object that can provide
* time-updates and media-end events.
*/
this.targetElement = 'video';
/**
* Provide the time-event name.
* Default is timeupdate
*/
this.timeEvent = 'timeupdate';
/**
* Provide the ready event name.
* Default is ready
*/
this.readyEvent = 'ready';
/**
* Provide the element property name that
* holds the current time in seconds.
* Default is currentTime
*/
this.timeProperty = 'currentTime';
/**
* Provide the element property name that
* holds the duration time in seconds.
* Default is duration
*/
this.durationProperty = 'duration';
/**
* Provider the end event name.
* Default is ended
*/
this.endEvent = 'ended';
/**
* To debug timed elements, set this value to true.
*/
this.debug = false;
}
get childVideo() {
return this.el.querySelector(this.targetElement);
}
async componentWillLoad() {
debugIf(this.debug, `n-video: loading`);
const video = this.childVideo;
if (video == null) {
warn(`n-video: no child video element was found`);
}
else {
debugIf(this.debug, `n-video: listening to ${this.targetElement} for ${this.readyEvent}`);
video.addEventListener(this.readyEvent, async () => {
debugIf(this.debug, `n-video: creating timer`);
this.timer = new VideoTimer(video, this.timeEvent, this.timeProperty, this.durationProperty, this.endEvent, this.debug);
this.ready.emit(true);
});
debugIf(this.debug, `n-video: creating listener`);
this.listener = new VideoActionListener(video, eventBus, actionBus, this.debug);
}
debugIf(this.debug, `n-video: loaded`);
}
render() {
return h(Host, null);
}
disconnectedCallback() {
var _a, _b;
(_a = this.listener) === null || _a === void 0 ? void 0 : _a.destroy();
(_b = this.timer) === null || _b === void 0 ? void 0 : _b.destroy();
}
static get is() { return "n-video"; }
static get properties() { return {
"targetElement": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Provide the element selector for the media object that can provide\ntime-updates and media-end events."
},
"attribute": "target-element",
"reflect": false,
"defaultValue": "'video'"
},
"timeEvent": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Provide the time-event name.\nDefault is timeupdate"
},
"attribute": "time-event",
"reflect": false,
"defaultValue": "'timeupdate'"
},
"readyEvent": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Provide the ready event name.\nDefault is ready"
},
"attribute": "ready-event",
"reflect": false,
"defaultValue": "'ready'"
},
"timeProperty": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Provide the element property name that\nholds the current time in seconds.\nDefault is currentTime"
},
"attribute": "time-property",
"reflect": false,
"defaultValue": "'currentTime'"
},
"durationProperty": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Provide the element property name that\nholds the duration time in seconds.\nDefault is duration"
},
"attribute": "duration-property",
"reflect": false,
"defaultValue": "'duration'"
},
"endEvent": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Provider the end event name.\nDefault is ended"
},
"attribute": "end-event",
"reflect": false,
"defaultValue": "'ended'"
},
"debug": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "To debug timed elements, set this value to true."
},
"attribute": "debug",
"reflect": false,
"defaultValue": "false"
},
"timer": {
"type": "unknown",
"mutable": true,
"complexType": {
"original": "ITimer",
"resolved": "ITimer",
"references": {
"ITimer": {
"location": "import",
"path": "../n-presentation/services/interfaces"
}
}
},
"required": true,
"optional": false,
"docs": {
"tags": [],
"text": "Normalized timer."
}
}
}; }
static get events() { return [{
"method": "ready",
"name": "ready",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "Ready event letting the presentation layer know it can\nbegin."
},
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
}
}]; }
static get elementRef() { return "el"; }
}