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

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

/**
 *
 * 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
 * 
 */
    
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
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
import {
  Component,
  Input,
  Output,
  EventEmitter,
  ViewChild,
  ChangeDetectionStrategy,
  NgModule
} from "@angular/core";
import { CommonModule } from "@angular/common";
import {
  IVLabsPlayer
} from "@interactive-video-labs/core";
import {
  IVLabsPlayer as IVLabsPlayer2
} from "@interactive-video-labs/core";
var InteractiveVideoComponent = class {
  constructor() {
    this.autoplay = false;
    this.loop = false;
    this.locale = "en";
    this.analyticsEvent = new 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 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([
  Input({ required: true })
], InteractiveVideoComponent.prototype, "videoUrl", 2);
__decorateClass([
  Input()
], InteractiveVideoComponent.prototype, "cues", 2);
__decorateClass([
  Input()
], InteractiveVideoComponent.prototype, "translations", 2);
__decorateClass([
  Input()
], InteractiveVideoComponent.prototype, "autoplay", 2);
__decorateClass([
  Input()
], InteractiveVideoComponent.prototype, "loop", 2);
__decorateClass([
  Input()
], InteractiveVideoComponent.prototype, "locale", 2);
__decorateClass([
  Input()
], InteractiveVideoComponent.prototype, "targetElementId", 2);
__decorateClass([
  Output()
], InteractiveVideoComponent.prototype, "analyticsEvent", 2);
__decorateClass([
  ViewChild("playerContainer")
], InteractiveVideoComponent.prototype, "playerContainer", 2);
InteractiveVideoComponent = __decorateClass([
  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: ChangeDetectionStrategy.OnPush
  })
], InteractiveVideoComponent);
var InteractiveVideoModule = class {
  // Module for the InteractiveVideoComponent for non-standalone usage.
  constructor() {
  }
};
InteractiveVideoModule = __decorateClass([
  NgModule({
    imports: [CommonModule, InteractiveVideoComponent],
    exports: [InteractiveVideoComponent]
  })
], InteractiveVideoModule);
export {
  IVLabsPlayer2 as IVLabsPlayer,
  InteractiveVideoComponent,
  InteractiveVideoModule
};