@interactive-video-labs/angular/dist/index.cjs

Thin Angular wrapper for the @interactive-video-labs/core engine. Enables cue-based interactive video playback in Angular applications.

/**
 * @interactive-video-labs/angular v0.0.1
 * Author: Taj
 */
    
"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, {
  AnalyticsEvent: () => import_core3.AnalyticsEvent,
  AnalyticsPayload: () => import_core3.AnalyticsPayload,
  CuePoint: () => import_core3.CuePoint,
  IVLabsPlayer: () => import_core3.IVLabsPlayer,
  InteractiveVideoComponent: () => InteractiveVideoComponent,
  InteractiveVideoModule: () => InteractiveVideoModule,
  PlayerConfig: () => import_core3.PlayerConfig,
  Translations: () => import_core3.Translations
});
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",
    template: `
    <div *ngIf="!targetElementId" #playerContainer [id]="playerTargetId" style="width: 100%; height: auto;" data-testid="interactive-video-container"></div>
  `,
    changeDetection: import_core.ChangeDetectionStrategy.OnPush,
    standalone: true
  })
], InteractiveVideoComponent);
var InteractiveVideoModule = class {
};
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 = {
  AnalyticsEvent,
  AnalyticsPayload,
  CuePoint,
  IVLabsPlayer,
  InteractiveVideoComponent,
  InteractiveVideoModule,
  PlayerConfig,
  Translations
});