@nent/core
Version:
242 lines (235 loc) • 8.09 kB
JavaScript
/*!
* NENT 2022
*/
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
const index$1 = require('./index-1829aebc.js');
const index = require('./index-637e8c28.js');
const logging = require('./logging-37c154cf.js');
const interfaces = require('./interfaces-393094fa.js');
const interfaces$1 = require('./interfaces-023ea612.js');
const time = require('./time-95d533f4.js');
/* It listens to the `VIDEO_TOPIC` topic on the `actionBus` and executes the command on the
`childVideo` element */
class VideoActionListener {
constructor(childVideo, eventBus, actionBus, debug) {
this.childVideo = childVideo;
this.eventBus = eventBus;
this.actionBus = actionBus;
this.debug = debug;
this.disposeHandle = this.actionBus.on(interfaces.VIDEO_TOPIC, async (ev) => {
logging.debugIf(this.debug, `n-video actions: event received ${ev.topic}:${ev.command}`);
await this.commandReceived(ev.command, ev.data);
});
}
async commandReceived(command, data) {
switch (command) {
case interfaces.VIDEO_COMMANDS.Play: {
await this.play();
break;
}
case interfaces.VIDEO_COMMANDS.Pause: {
this.pause();
break;
}
case interfaces.VIDEO_COMMANDS.Resume: {
await this.resume();
break;
}
case interfaces.VIDEO_COMMANDS.Mute: {
this.mute(data.value);
break;
}
}
}
/**
* If the child video exists, set the child video's muted property to the value of the muted
* parameter, and if muted is true, emit the Muted event, otherwise emit the Unmuted event
* @param {boolean} muted - boolean - true if you want to mute the video, false if you want to unmute
* it.
* @returns the value of the childVideo.muted property.
*/
mute(muted) {
if (!this.childVideo) {
return;
}
this.childVideo.muted = muted;
if (muted) {
this.eventBus.emit(interfaces.VIDEO_EVENTS.Muted);
}
else {
this.eventBus.emit(interfaces.VIDEO_EVENTS.Unmuted);
}
}
/**
* It plays the video.
*/
async play() {
var _a, _b;
await ((_b = (_a = this.childVideo) === null || _a === void 0 ? void 0 : _a.play) === null || _b === void 0 ? void 0 : _b.call(this));
this.eventBus.emit(interfaces.VIDEO_EVENTS.Played);
}
/**
* If the childVideo object has a pause method, call it
*/
pause() {
var _a, _b;
(_b = (_a = this.childVideo) === null || _a === void 0 ? void 0 : _a.pause) === null || _b === void 0 ? void 0 : _b.call(this);
this.eventBus.emit(interfaces.VIDEO_EVENTS.Paused);
}
/**
* It resumes the video.
*/
async resume() {
var _a, _b;
await ((_b = (_a = this.childVideo) === null || _a === void 0 ? void 0 : _a.play) === null || _b === void 0 ? void 0 : _b.call(this));
this.eventBus.emit(interfaces.VIDEO_EVENTS.Resumed);
}
/**
* If the `disposeHandle` property is not null, then call the function that it points to, passing in
* the current instance of the class
*/
destroy() {
var _a;
(_a = this.disposeHandle) === null || _a === void 0 ? void 0 : _a.call(this);
}
}
/* It creates a timer that emits events based on the current time of a video element */
class VideoTimer extends index.EventEmitter {
/**
* It creates a new instance of the `VideoTimer` class, which is a subclass of `EventEmitter`
* @param {HTMLMediaElement | any} video - HTMLMediaElement | any
* @param {string} [timeEvent=timeupdate] - the event that is fired when the video's current time
* changes.
* @param {string} [timeProperty=currentTime] - the property on the video element that contains the
* current time
* @param {string} [durationProperty=duration] - The property on the video element that contains the
* duration of the video.
* @param {string} [endEvent=ended] - The event that is emitted when the video ends.
* @param {boolean} [debug=false] - boolean - if true, will log to the console
* @returns A new instance of the VideoTimer class.
*/
constructor(video, timeEvent = 'timeupdate', timeProperty = 'currentTime', durationProperty = 'duration', endEvent = 'ended', debug = false) {
super();
this.video = video;
this.timeEvent = timeEvent;
this.timeProperty = timeProperty;
this.durationProperty = durationProperty;
this.endEvent = endEvent;
this.debug = debug;
this.durationSeconds = 0;
if (video == null) {
logging.warn(`n-video-timer: a media element is required`);
return;
}
this.durationSeconds = Number(video[this.durationProperty] || 0);
const start = 0;
logging.debugIf(this.debug, `n-video-timer: creating video timer with duration ${this.durationSeconds}`);
video.addEventListener(this.timeEvent, () => {
const currentTime = Number(video[this.timeProperty] || 0);
this.currentTime = time.getTimeDetails(start, currentTime * 1000, this.durationSeconds * 1000);
this.emit(interfaces$1.TIMER_EVENTS.OnInterval, this.currentTime);
});
video.addEventListener(this.endEvent, () => {
this.emit(interfaces$1.TIMER_EVENTS.OnEnd);
});
this.currentTime = time.getTimeDetails(0, 0, this.durationSeconds * 1000);
}
/**
* It calls the play method on the video element
*/
begin() {
var _a;
try {
(_a = this.video.play) === null || _a === void 0 ? void 0 : _a.call(this.video);
}
catch (error) { }
}
/**
* It pauses the video.
*/
stop() {
var _a;
(_a = this.video.pause) === null || _a === void 0 ? void 0 : _a.call(this.video);
}
/**
* It stops the timer and removes all listeners.
*/
destroy() {
this.stop();
this.removeAllListeners();
}
}
const NVideo = class {
constructor(hostRef) {
index$1.registerInstance(this, hostRef);
this.ready = index$1.createEvent(this, "ready", 7);
/**
* 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() {
logging.debugIf(this.debug, `n-video: loading`);
const video = this.childVideo;
if (video == null) {
logging.warn(`n-video: no child video element was found`);
}
else {
logging.debugIf(this.debug, `n-video: listening to ${this.targetElement} for ${this.readyEvent}`);
video.addEventListener(this.readyEvent, async () => {
logging.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);
});
logging.debugIf(this.debug, `n-video: creating listener`);
this.listener = new VideoActionListener(video, index.eventBus, index.actionBus, this.debug);
}
logging.debugIf(this.debug, `n-video: loaded`);
}
render() {
return index$1.h(index$1.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();
}
get el() { return index$1.getElement(this); }
};
exports.n_video = NVideo;