Angular implementation - Storm JavaScript Player

Below you'll find a basic implementation for Angular. It just instantiates the player on OnInit and destroys it on OnDestroy.

                        
// storm-player.component.ts
import { Component, ElementRef, Input, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
import {StormLibraryConfig} from "@stormstreaming/stormlibrary";
import {StormPlayer} from "@stormstreaming/stormplayer";
import {StormPlayerConfig} from "@stormstreaming/stormplayer";

@Component({
  selector: 'app-storm-player',
  template: `
    

  `,
})

/**
 * A custom component for Angular
 *
 * Usage example:
 *
 * 
 */
export class StormPlayerComponent implements OnInit, OnDestroy {

  @ViewChild('target', {static: true}) target: ElementRef | undefined;

  // @ts-ignore
  @Input() streamData: {
    stormServerURL: string;
    appName: string;
    streamName: string;
  };

  // @ts-ignore
  @Input() playerSettings: {
    width: number;
    height: number;
    title: string;
    subtitle: string;
  };

  /**
   * Random player id generator
   */
  playerID:string =  "stormPlayer_"+Math.round(Math.random()*1000);

  /**
   * Storm Player Configuration Object
   */
  playerConfig?: StormPlayerConfig;

  /**
   * Storm Library Configuration Object
   */
  libraryConfig?: StormLibraryConfig;

  /**
   * Player itself
   */
  player?: StormPlayer;

  constructor(
    private elementRef: ElementRef,
  ) { }

  ngOnInit() {

    this.target?.nativeElement.setAttribute("id", this.playerID);

    this.libraryConfig = {
      role: "player",
      connectionType: "direct",
      stream: {
        serverList: [
          { host: this.streamData.stormServerURL, port: 443, ssl: true }   // this is where our storm server url goes
        ],
        sourceList: [
          {
            protocol: "storm",
            streamName: this.streamData.streamName,      // our stream name
            application: this.streamData.appName,        // our app name
          },
        ],
      },
      settings: {
        autostart: true,
        restartOnError: true,
        enabledProtocols: ["MSE", "HLS"],
        video: {
          scalingMode: "fill",
          containerID:"none",
          width:640,
          height:360
        },
        debug: {
          console: {
            enabled: true,
            logTypes: ["INFO", "ERROR", "TRACE", "WARNING", "SUCCESS"],
            monoColor: false,
          },
        },
      },
    };

    this.playerConfig = {
      containerID: this.playerID,
      width: this.playerSettings.width,
      height: this.playerSettings.height,
      title: this.playerSettings.title,
      subtitle: this.playerSettings.subtitle,
      unmuteText: "Unmute"
    }

    // start StormPlayer
    this.player = new StormPlayer(this.playerConfig, this.libraryConfig);

  }

  ngOnDestroy() {
    // destroy StormPlayer
    if (this.player) {
      this.player.destroy();
    }
  }
}

                    

You can use it later like this:

                        
<app-storm-player [streamData]="{stormServerURL: 'localhost', appName: 'live', streamName:'test'}" [playerSettings]="{ title:'Title goes here', subtitle:'Subtitle', width:640, height:320}"></app-storm-player>