Angular

To add the Lura Player to an Angular component, you can follow the following steps:

1. Install angular cli

npm install -g @angular/cli

2. Create a new workspace

ng new luraplayerdemo

3. Now change your directory to your workspace (In this case, luraplayerdemo)

cd luraplayerdemo/

4. Create a lura-player component

ng generate component lura-player

5. Now copy the following code into src/app/lura-player/lura-player.component.ts

src/app/lura-player/lura-player.component.ts

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

@Component({
  selector: "app-lura-player",
  templateUrl: "./lura-player.component.html",
  styleUrls: ["./lura-player.component.scss"],
})
export class LuraPlayerComponent implements AfterViewInit, OnDestroy {
  @Input() config: any;
  @ViewChild("playerDiv") playerDiv: ElementRef | undefined;
  private script: any;

  constructor() {}

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

    this.script.onload = () => {
      // @ts-ignore
      const luraPlayer = new lura.Player(this.playerDiv?.nativeElement);
      luraPlayer.setConfig(this.config);
    };
  }

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

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.

6. Lastly import the app-lura-player component in your application.

src/app/app-component.html

<app-lura-player
  [config]="
  {
    lura: {
      appKey:
        'PqSpQb9pFu1A_v4qrMnRNwcXJGoFMO0B02BwGBQ4Zwa0_uMdXPXrqjnlSbJbkv8duDNk2-c3JbOXq2auBscWP1GyvlWlgFcIzaO6QFG74nY',
      assetId: '5179686',
    },
  }
  "
></app-lura-player>

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

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