Embedding Lura Player in Angular

To add the Lura player to an Angular component, you can use the following code:

1. Import the player script in your component file by adding the following code:

import { Component, AfterViewInit, ElementRef, OnDestroy } from "@angular/core";

@Component({
  selector: "app-lura-player",
  template: `
    <div #playerContainer style="width: 640px; height: 360px;"></div>
  `,
})
export class LuraPlayerComponent implements AfterViewInit, OnDestroy {
  private player: any;
  private script: any;

  constructor(private elementRef: ElementRef) {}

  ngAfterViewInit() {
    this.script = document.createElement("script");
    this.script.src = "https://w3.mp.lura.live/lura-player/latest/loader.js";
    this.script.async = true;
    document.body.appendChild(this.script);

    this.script.onload = () => {
      this.player = LuraPlayer(
        this.elementRef.nativeElement.querySelector("#playerContainer"),
        {
          token:
            "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ2aWQiOiI0MzY2NjIzIiwiaXNzIjoiM1FMWjdaV0JsRko1Vk16Y2pyczJPbTd3VTdEanIzNFkifQ.CruM1W3gIEyQTBTqfaY5gTdf7b_2SSNg4gj6JGOj4Mg",
        }
      );
    };
  }

  ngOnDestroy() {
    document.body.removeChild(this.script);
  }
}

Note that you need to replace the placeholder value for the "token" property with your own Lura player token.

This component uses the ngAfterViewInit lifecycle hook to load the player script and create an instance of the player, and the ngOnDestroy hook to remove the player script when the component is destroyed.

That's it! You should now see the Lura player embedded in your Angular component.