@interactive-video-labs/angular
Version:
Thin Angular wrapper for the @interactive-video-labs/core engine. Enables cue-based interactive video playback in Angular applications.
192 lines (189 loc) • 6.53 kB
JavaScript
/**
*
* Thin Angular wrapper for the @interactive-video-labs/core engine. Enables cue-based interactive video playback in Angular applications.
* @interactive-video-labs/angular v0.2.0
* @author Taj
* @license MIT
*
*/
"use strict";
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
var __decorateClass = (decorators, target, key, kind) => {
var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
for (var i = decorators.length - 1, decorator; i >= 0; i--)
if (decorator = decorators[i])
result = (kind ? decorator(target, key, result) : decorator(result)) || result;
if (kind && result) __defProp(target, key, result);
return result;
};
// src/index.ts
var index_exports = {};
__export(index_exports, {
IVLabsPlayer: () => import_core3.IVLabsPlayer,
InteractiveVideoComponent: () => InteractiveVideoComponent,
InteractiveVideoModule: () => InteractiveVideoModule
});
module.exports = __toCommonJS(index_exports);
var import_core = require("@angular/core");
var import_common = require("@angular/common");
var import_core2 = require("@interactive-video-labs/core");
var import_core3 = require("@interactive-video-labs/core");
var InteractiveVideoComponent = class {
constructor() {
this.autoplay = false;
this.loop = false;
this.locale = "en";
this.analyticsEvent = new import_core.EventEmitter();
this.player = null;
this.playerTargetId = this.targetElementId || `ivlabs-player-${Math.random().toString(36).substring(2, 9)}`;
}
ngOnChanges(changes) {
if (this.player) {
const shouldReinitialize = changes["videoUrl"] && changes["videoUrl"].currentValue || changes["autoplay"] && changes["autoplay"].currentValue != null || changes["loop"] && changes["loop"].currentValue != null;
if (shouldReinitialize) {
this.player.destroy();
this.player = null;
this.initializePlayer();
} else {
if (changes["cues"] && changes["cues"].currentValue) {
this.player.loadCues(changes["cues"].currentValue);
}
if (changes["translations"] && changes["translations"].currentValue) {
this.player.loadTranslations(this.locale, changes["translations"].currentValue);
}
if (changes["locale"] && changes["locale"].currentValue) {
this.player.setLocale(changes["locale"].currentValue);
}
}
}
}
ngAfterViewInit() {
setTimeout(() => this.initializePlayer(), 0);
}
ngOnDestroy() {
if (this.player) {
this.player.destroy();
this.player = null;
}
}
initializePlayer() {
if (this.player) {
return;
}
const targetId = this.targetElementId || this.playerTargetId;
const targetElement = document.getElementById(targetId);
if (!targetElement) {
console.error(`IVLabsPlayer target element with ID '${targetId}' not found.`);
return;
}
const playerConfig = {
videoUrl: this.videoUrl,
autoplay: this.autoplay,
loop: this.loop,
locale: this.locale
};
try {
this.player = new import_core2.IVLabsPlayer(targetId, playerConfig);
if (this.analyticsEvent.observed) {
const eventsToRegister = [
"PLAYER_LOADED",
"VIDEO_STARTED",
"VIDEO_PAUSED",
"VIDEO_ENDED",
"CUE_TRIGGERED",
"INTERACTION_COMPLETED",
"ERROR"
];
eventsToRegister.forEach((event) => {
this.player?.on(event, (payload) => {
this.analyticsEvent.emit([event, payload]);
});
});
}
if (this.cues) {
this.player.loadCues(this.cues);
}
if (this.translations) {
this.player.loadTranslations(this.locale, this.translations);
}
} catch (error) {
console.error("Error initializing IVLabsPlayer:", error);
}
}
};
__decorateClass([
(0, import_core.Input)({ required: true })
], InteractiveVideoComponent.prototype, "videoUrl", 2);
__decorateClass([
(0, import_core.Input)()
], InteractiveVideoComponent.prototype, "cues", 2);
__decorateClass([
(0, import_core.Input)()
], InteractiveVideoComponent.prototype, "translations", 2);
__decorateClass([
(0, import_core.Input)()
], InteractiveVideoComponent.prototype, "autoplay", 2);
__decorateClass([
(0, import_core.Input)()
], InteractiveVideoComponent.prototype, "loop", 2);
__decorateClass([
(0, import_core.Input)()
], InteractiveVideoComponent.prototype, "locale", 2);
__decorateClass([
(0, import_core.Input)()
], InteractiveVideoComponent.prototype, "targetElementId", 2);
__decorateClass([
(0, import_core.Output)()
], InteractiveVideoComponent.prototype, "analyticsEvent", 2);
__decorateClass([
(0, import_core.ViewChild)("playerContainer")
], InteractiveVideoComponent.prototype, "playerContainer", 2);
InteractiveVideoComponent = __decorateClass([
(0, import_core.Component)({
selector: "iv-interactive-video",
standalone: true,
template: `
<div
*ngIf="!targetElementId"
#playerContainer
[id]="playerTargetId"
style="width: 100%; height: auto;"
data-testid="interactive-video-container"
></div>
`,
changeDetection: import_core.ChangeDetectionStrategy.OnPush
})
], InteractiveVideoComponent);
var InteractiveVideoModule = class {
// Module for the InteractiveVideoComponent for non-standalone usage.
constructor() {
}
};
InteractiveVideoModule = __decorateClass([
(0, import_core.NgModule)({
imports: [import_common.CommonModule, InteractiveVideoComponent],
exports: [InteractiveVideoComponent]
})
], InteractiveVideoModule);
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
IVLabsPlayer,
InteractiveVideoComponent,
InteractiveVideoModule
});