@brandbrigade/ott-bb-player 1.0.43 → 1.0.45

package/src/OTTPlayer.js

@@ -0,0 +1,254 @@
+import Augmentor from "./Augmentor";
+import { RenderingMode } from "./enums/RenderingMode";
+import { SyncMethod } from "./enums/SyncMethod";
+import merge from "lodash/merge";
+import { datadogLogs } from '@datadog/browser-logs';
+import { version } from '/package.json';
+
+datadogLogs.init({
+    clientToken: 'pub4844895ac30067ac2c4aaa025dbc39d7',
+    site: 'us3.datadoghq.com',
+    forwardErrorsToLogs: true,
+    sessionSampleRate: 100
+});
+
+export default class OTTPlayer {
+  constructor(video, srcFrameRate, optionsFromMK) {
+    console.log(`OTTPlayer: version: ${version}`);
+    this.video = video;
+    this.srcFrameRate = srcFrameRate;
+    console.log("optionsFromMK: ", optionsFromMK);
+    this.options = merge(
+      {
+        enabled: true,
+        stopAugment: false, //setted to true when there is exception or smt went wrong
+        stopAugmentFor: -1, // disable augmentation for several secs (should be used for temporaty issues that occures while working)
+        gameId: "Unknown",
+        medialook: false,
+        allGamesURL: "https://www.virtualott.com/games/",
+        cloudFrontURL: "https://db8igqxlbvayn.cloudfront.net/prod",
+        mediaIdJsonURL: "https://games-prod.virtualott.com/map",
+        offsetJsonURL: "https://games-prod.virtualott.com/offset",
+        renderingMode: RenderingMode.Augment, //MUST, other will not work in this test
+        SynchMethod: SyncMethod.None,
+        debug: false,
+        hls_fps: 60000 / 1001,
+        augmentation: {
+          renderTimecode: true,
+          offset: 0,
+        },
+        syncPoint: {
+          frame: 0,
+          playerTime: 0,
+          mediaTimeMS: 0,
+        },
+      },
+      optionsFromMK || {},
+    );
+
+    console.log("options after merge with MK's options: ", JSON.parse(JSON.stringify(this.options)));
+
+    console.BBlog = function (message) {
+      console.log("OTTPlayer: " + message);
+      datadogLogs.logger.info('Web Unsorted msg: ' + message, {name: 'test'});
+    };
+    console.BBerror = function (...args) {
+      console.log("OTTPlayer: ", ...args);
+      datadogLogs.logger.error('Web Unsorted error: ' + args.join(', '), {name: 'test'});
+    };
+
+    this.getGlobalConfig();
+  }
+
+  //after we merged the options with the url-param global config
+  init() {
+    //override with global options:
+    if (typeof window.globalConfig === "undefined")
+      this.options = Object.assign(this.options, {});
+    else this.options = Object.assign(this.options, JSON.parse(JSON.stringify(window.globalConfig))) 
+    //normalize hls_fps
+    var tmp_mes = {};
+    tmp_mes.value1 = this.options.hls_fps;
+    this.setFps(tmp_mes);
+    console.log("options after merge with the global options: ",  JSON.parse(JSON.stringify(this.options)));
+    //if the debug option is off - make the debug-div disappear
+    if (!this.options.debug) {
+      let elementsToHide = [
+        "debugText",
+        "forplus",
+        "forDoNotRender",
+        "debugText2",
+        "toggleBtn",
+        "numberInput",
+        "plus05CorrectionCheckbox",
+        "doNotRenderAugmentationCheckbox",
+        "plus05CorrectionLabel",
+        "doNotRenderAugmentationLabel",
+        "br1",
+        "br2",
+        "qualityButton",
+        "qualitySelect",
+      ];
+      for (let i = 0; i < elementsToHide.length; i++) {
+        const elemToHide = document.getElementById(elementsToHide[i]);
+        if (elemToHide) {
+          elemToHide.style.display = "none";
+        }
+      }
+    }
+
+    this.fetchAndFindGameIdAndOffsetFromMediaId(this.options.gameId);
+  }
+
+  weHaveTheGameID() {
+    this.frameDrawer = new Augmentor(this.video, this.options);
+    if (this.options.renderingMode == RenderingMode.Augment) {
+      this.frameDrawer.initializeComponents();
+    }
+  }
+
+  async getGlobalConfig() {
+    //make sure we have global config
+    const URLParams = new URL(document.location);
+    const CONFIG_NAME = URLParams.searchParams.get("config") || "";
+    if (CONFIG_NAME !== "") {
+      try {
+        const response = await fetch(CONFIG_NAME);
+        if (!response.ok) {
+          throw new Error("Network response was not ok");
+        }
+        const configJson = await response.json();
+        if (typeof window.globalConfig == "undefined") window.globalConfig = {};
+        globalConfig = Object.assign({}, configJson, window.globalConfig);
+        console.log('final global config:', window.globalConfig)
+      } catch (error) {
+        console.BBerror("Error fetching JSON:", error);
+      }
+    }
+    this.init();
+  }
+
+  mediaID = null;
+
+  // Function to fetch the JSON and find the value for mediaID
+  async fetchAndFindGameIdAndOffsetFromMediaId(mediaID) {
+    mediaID = 'bbtest45'
+    if (this.options.mediaIdJsonURL == "test") {
+      this.weHaveTheGameID();
+      return;
+    }
+
+    try {
+      const response = await fetch(this.options.mediaIdJsonURL + "/" + mediaID);
+      if (!response.ok) {
+        throw new Error(`HTTP error! Status: ${response.status}`);
+      }
+
+      const jsonData = await response.json();
+
+      if (jsonData.hasOwnProperty("GAME_ID")) {
+        console.log({jsonData})
+        const value = jsonData["GAME_ID"];
+        console.log(`GameId for mediaid= ${mediaID}: ${value}`);
+        this.options.gameId = value;
+        this.weHaveTheGameID();
+        this.fetchOffsetForGameIdMediaID(this.options.gameId, mediaID);
+      } else {
+        console.BBerror(`MediaID ${mediaID} not found in JSON.`);
+        this.options.stopAugment = true;
+      }
+    } catch (error) {
+      console.BBerror("Error fetching and processing GameId JSON:" + error);
+    }
+  }
+
+  // Function to fetch the JSON and find the value for mediaID
+  async fetchOffsetForGameIdMediaID(gameId, mediaId) {
+    if (this.options.offsetJsonURL == "test") return 0;
+    try {
+      const response = await fetch(
+        this.options.offsetJsonURL + "/" + gameId,
+      );
+
+      if (!response.ok) {
+        console.log(`HTTP error! Status: ${response.status}`);
+        setTimeout(() => {
+          this.fetchOffsetForGameIdMediaID(gameId, mediaId);
+        }, 5000);
+      }
+
+      const jsonData = await response.json();
+
+      if (
+        jsonData.hasOwnProperty("offset") &&
+        jsonData.hasOwnProperty("found")
+      ) {
+        const value = jsonData["offset"];
+        const found = jsonData["found"];
+
+        if (found == true) {
+          console.log(`Offset for gameid= ${gameId}: ${value}`);
+          this.options.augmentation.offset = value;
+          //call get-offset again later on
+          setTimeout(() => {
+            this.fetchOffsetForGameIdMediaID(gameId, mediaId);
+          }, 60000);
+        }
+      } else {
+        console.log(`offset for ${gameId} not found in JSON.`);
+        setTimeout(() => {
+          this.fetchOffsetForGameIdMediaID(gameId, mediaId);
+        }, 5000);
+      }
+    } catch (error) {
+      console.BBerror("Error fetching and processing offset:", error);
+      setTimeout(() => {
+        this.fetchOffsetForGameIdMediaID(gameId, mediaId);
+      }, 5000);
+    }
+  }
+
+  toggle(flag) {
+    this.options.enabled = flag;
+  }
+
+  getCanvas() {
+    return this.frameDrawer.getCanvas();
+  }
+
+  setFps(message) {
+    var fps = message.value1;
+    switch (fps) {
+      case 59.94:
+      case 60000 / 1001:
+        this.options.hls_fps = 60000 / 1001;
+        break;
+      case 29.97:
+      case 30000 / 1001:
+        this.options.hls_fps = 30000 / 1001;
+        break;
+      default:
+        console.error("Unsupported hls-src frame-rate: " + fps + "fps");
+        this.options.hls_fps = fps;
+        break;
+    }
+  }
+
+  setSyncPoint(syncPoint) {
+    this.options.syncPoint = syncPoint;
+  }
+
+  onNewSegment(eventObj) {
+    this.frameDrawer.onNewSegmentForMetadata(eventObj);
+  }
+
+  onNewMetadata(eventObj) {
+    this.frameDrawer.onNewMetadata(eventObj);
+  }
+}
+
+window.BB = {
+  MAX_LOGOS: 4,
+  RENDER_IN_WORKER: true,
+  OTTPlayer,
+};

package/src/Socket.js

@@ -0,0 +1,44 @@
+import io from "socket.io-client";
+import { Platform } from "./utils";
+
+
+export default class Socket {
+  constructor(callback) {
+    this.isConnected = false;
+    this.folderName = "";
+    this.callback = callback;
+    this.name = "";
+  }
+
+  connect(channel) {
+    if (this.isConnected) return;
+    this.isConnected = true;
+
+    const socket = io("https://www.virtualott.com", { reconnect: true });
+    socket.on("connect", () => {
+      console.log("socket connected");
+
+      socket.emit("setinfo", { device: Platform.getDeviceName() }, (info) => {
+        this.name = info.name;
+        socket.emit("join", channel, (data) => {
+          console.log(`join  ${channel} room`);
+          this.callback("join", data);
+        });
+      });
+    });
+    socket.on("error", (err) => {
+      console.error(`error::${err}`);
+    });
+    socket.on("disconnect", (reason) => {
+      console.error(`disconnect from signaling::${reason}`);
+    });
+    socket.on("messageroom", (message) => {
+      this.callback("messageroom", message);
+      console.log("messageroom: ", message);
+    });
+    socket.on("ads", (message) => {
+      this.callback("ads", message);
+      console.log("ads:", message);
+    });
+  }
+}

package/src/composer_worker.js

@@ -0,0 +1,30 @@
+import Composer3DForWorker from "./Composer3DForWorker.js";
+
+let composer = null;
+onmessage = (evt) => {
+  switch (evt.data.method) {
+    case "onUserClickOnCanvas":
+      if (composer) composer.onUserClickOnCanvas(evt.data.data);
+      break;
+    case "cleanGL":
+      if (composer) composer.cleanGL();
+      break;
+    case "addAdvertisement":
+      if (composer) composer.addAdvertisement(evt.data.data);
+      break;
+    case "selectAd":
+      if (composer) composer.selectAd(evt.data.data);
+      break;
+    case "onMetaData":
+      if (composer) composer.onMetaData(evt.data.data);
+      break;
+    case "renderAugmentation":
+      if (composer) composer.renderAugmentation(evt.data.data);
+      break;
+    case "constructor":
+      composer = new Composer3DForWorker(evt.data.options, evt.data.canvas);
+      break;
+    default:
+      console.error("Wrong Thread Message");
+  }
+};

package/src/configs/OTT_Dev_Config_Debug.json

@@ -0,0 +1,8 @@
+{
+  "url": "https://nbablpng.akamaized.net/live/hls-itc/bbtestexternal/v1-121.m3u8?stSecret=rj12sw543terw32422334swees",
+  "cloudFrontURL": "https://db8igqxlbvayn.cloudfront.net",
+  "mediaIdJsonURL": "https://games-dev.virtualott.com/map",
+  "offsetJsonURL": "https://games-dev.virtualott.com/offset",
+  "debug": true,
+  "augmentation": { "channelName": "nba2" }
+}

package/src/configs/OTT_Dev_Config_Debug_14fps.json

@@ -0,0 +1,8 @@
+{
+  "url": "https://nbablpng.akamaized.net/live/hls-itc/bbtestexternal/v7-121.m3u8?stSecret=rj12sw543terw32422334swees",
+  "cloudFrontURL": "https://db8igqxlbvayn.cloudfront.net",
+  "mediaIdJsonURL": "https://games-dev.virtualott.com/map",
+  "offsetJsonURL": "https://games-dev.virtualott.com/offset",
+  "debug": true,
+  "augmentation": { "channelName": "nba2" }
+}

package/src/configs/OTT_Dev_Config_Debug_29fps.json

@@ -0,0 +1,8 @@
+{
+  "url": "https://nbablpng.akamaized.net/live/hls-itc/bbtestexternal/v2-121.m3u8?stSecret=rj12sw543terw32422334swees",
+  "cloudFrontURL": "https://db8igqxlbvayn.cloudfront.net",
+  "mediaIdJsonURL": "https://games-dev.virtualott.com/map",
+  "offsetJsonURL": "https://games-dev.virtualott.com/offset",
+  "debug": true,
+  "hls_fps": 29.97
+}

package/src/configs/OTT_Dev_Config_Debug_General.json

@@ -0,0 +1,7 @@
+{
+  "url": "https://nbablpng.akamaized.net/live/hls-itc/bbtestexternal/index.m3u8?ISO3166=US&sessionId=2249876534844428711287488243568748000000457785884432&stSecret=rj12sw543terw32422334swees",
+  "cloudFrontURL": "https://db8igqxlbvayn.cloudfront.net",
+  "mediaIdJsonURL": "https://games-dev.virtualott.com/map",
+  "offsetJsonURL": "https://games-dev.virtualott.com/offset",
+  "debug": true
+}

package/src/enums/RenderingMode.js

@@ -0,0 +1,5 @@
+export const RenderingMode = {
+  RenderDigits: Symbol("RenderDigits"),
+  RenderTimecode: Symbol("RenderTimecode"),
+  Augment: Symbol("Augment"),
+};

package/src/enums/SyncMethod.js

@@ -0,0 +1,5 @@
+export const SyncMethod = {
+  OnNewSegment: Symbol("OnNewSegment"),
+  OnMetadata: Symbol("OnMetadata"),
+  None: Symbol("None"),
+};

package/src/index.js

@@ -0,0 +1,241 @@
+import OTTPlayer from "./OTTPlayer";
+
+window.globalConfig 
+// = {
+// 	debug: true,
+// 	augmentation: {
+//     channelName: "nba2", 
+//     renderTimecode: true
+//   },
+//   // gameId: "12-11-2024-Test9-National",
+//   gameId: "06-11-2024-Test9-Home",
+//   maskMP4: true
+// }
+
+function doAllStuff() {
+  const video = document.getElementById("video_element");
+  const wmcEvents = amc.AmcEvents;
+  const wmcConstants = amc.AmcConstants;
+
+  // MK STUF
+  let config = {
+    server_url: "https://ottapp-appgw-amp-a.prodb.nba.tv3cloud.com",
+    owner_Uid: "azuki",
+    playback_mode: wmcConstants.IMC_MODE_LIVE,
+    start: "LIVE",
+    media_id: "bbtestexternal", //"bbtest45"
+    app_id: "100419", //"99569"
+    authorization_token:
+      "AuthToken1jVDLbtswEPwa6yaBb5EHHQQ3TtLCbYrWRXvkY2ULlkSFpJI4X186jxYo2iIAsRzMzswC0y6uh8lCc0hpjivarsgmvwDDqZ_2sw7pVM3BO1NNRlfpjtrBL66yfsyq4jrGBcIf3pjifyxn7W-pPcCoY_UwDtHrufJhn9n7mAdBiOfvafQOptSnU4Z20P143k96hGaJJbEYgOGuVIzqkhmjSmkoKxmzrmOIEFC4-AqTntK1axx0ehlS0Q6Dvwf3ysdfi12EkHVvDW6t9ctTsjWaZ64rNWaQRdKWCrquRMZ1WBqCwLni3fOVlyNvsvy1r7G3wUffpZdWXxuT58bEPxoLfoAmLiba0BsIRbukgw_9o069n7Y6HhvMFWaUUS44xhTXhDOpakIoVgwJJYkQUlKCGVdCEs4xx0QoLpGSgiOCCVWEMoRpxrwmjEiORQayuHiY-wDx09Tk1JoKlO3FOoBO4J5JUXOBMvkBTpdL7xphGEiU6wfG6pIBpaVxFkoNOVIbgykxxdW2XX-5agkXzeXxbv7B9uPuuL-5uWjXcs-3O_RtRbr3k9l8vv3IH4neHG6-m1vkV9T9BA",
+  };
+  //let bbPlayer = null;
+
+  function processEventPlay(eventObj) {
+    switch (eventObj.eventType) {
+      case wmcEvents.AMC_EVENT_STATE_CHANGED:
+        // start the VOD/LIVE playback
+        //wmcMgr.createPlayer(config.playback_mode, config.media_id, config.app_id);
+        //if (eventObj.value1==2)
+        //	playing=true;
+        console.log("!!!!!!!!!!!!!!!!!!!!!!!! AMC_EVENT_STATE_CHANGED");
+        break;
+      default:
+    }
+  }
+
+  function processEvent(eventObj) {
+    switch (eventObj.eventType) {
+      case wmcEvents.AMC_EVENT_METRICS_UPDATE:
+        console.log("AMC_EVENT_METRICS_UPDATE");
+        break;
+      case wmcEvents.AMC_EVENT_PLAYER_SEGMENT_PLAYBACK:
+        let syncPoint = { frame: 0, playerTime: 0 };
+        //bbPlayer.SetSyncPoint(syncPoint);
+
+        // if (typeof eventObj.mediaInfo.frameRate != "undefined"){
+        // 	console.log("FPS=", eventObj.mediaInfo.frameRate );
+        // 	if(bbPlayer)
+        // 	{
+        // 		bbPlayer.SetFps(eventObj.mediaInfo.frameRate);
+        // 	}
+        // }
+        break;
+
+      case wmcEvents.AMC_EVENT_PLAY_READY:
+        var logTextBox = document.getElementById("editable-element");
+
+        wmcMgr.setContainer(video);
+        wmcMgr.start();
+        break;
+      case wmcEvents.AMC_EVENT_PLAYER_METADATA:
+        break;
+      case wmcEvents.AMC_EVENT_PLAYER_METADATA_PARSED:
+        //console.info("AMC_EVENT_PLAYER_METADATA_PARSED",eventObj);
+        break;
+      case wmcEvents.AMC_EVENT_DEVICE_REGISTERED:
+        break;
+      case wmcEvents.AMC_EVENT_INIT_COMPLETE:
+        // start the VOD/LIVE playback
+        wmcMgr.createPlayer(
+          config.playback_mode,
+          config.media_id,
+          config.app_id,
+        );
+
+        break;
+
+      case wmcEvents.AMC_EVENT_ERROR:
+        console.error(
+          eventObj.code +
+            ":" +
+            (eventObj.message ? eventObj.message : eventObj.message.error),
+        );
+        break;
+      default:
+    }
+  }
+
+  const wmcMgr = new amc.AmcManager(config.server_url, config.owner_Uid);
+  //<!-- enable brandBrigade -->
+  // when this flag is enabled sdk will initialise the brandBrigade player with the required information and will make the necessary calls on the appropriate player callbacks
+  wmcMgr.enableBrandBrigade(true);
+
+  wmcMgr.setSTSToken(config.authorization_token);
+  wmcMgr.setCDNToken({ start: "LIVE" });
+  wmcMgr.setKssUrl(
+    "https://ottapp-appgw-client.prodb.nba.tv3cloud.com/S1/kss/signkey",
+  );
+  wmcMgr.setLogLevel(wmcConstants.IMC_LOG_DEBUG);
+
+  function onPlaybackControlBlock(eventObj) {
+    playBackControlRestrictions =
+      eventObj && eventObj.hasOwnProperty("controlRestrictions")
+        ? eventObj.controlRestrictions
+        : [];
+    if (!playBackControlRestrictions.length) {
+      return;
+    }
+    //blockControls();
+  }
+
+  wmcMgr.setNativeHlsParsing(true);
+  wmcMgr.addEventListener(
+    wmcEvents.AMC_EVENT_PROGRAM_RESTRICTIONS,
+    onPlaybackControlBlock,
+  );
+
+  wmcMgr.addEventListener(wmcEvents.AMC_EVENT_PROGRAM_CHANGED, processEvent);
+  wmcMgr.addEventListener(wmcEvents.AMC_EVENT_BIT_RATE_CHANGED, processEvent);
+  wmcMgr.addEventListener(wmcEvents.AMC_EVENT_AD_STARTED, processEvent);
+  wmcMgr.addEventListener(wmcEvents.AMC_EVENT_AD_QUARTILE, processEvent);
+  wmcMgr.addEventListener(wmcEvents.AMC_EVENT_AD_FINISHED, processEvent);
+  wmcMgr.addEventListener(wmcEvents.AMC_EVENT_AD_BREAK_START, processEvent);
+  wmcMgr.addEventListener(wmcEvents.AMC_EVENT_AD_BREAK_END, processEvent);
+  wmcMgr.addEventListener(
+    wmcEvents.AMC_EVENT_TEXT_TRACKS_CHANGED,
+    processEvent,
+  );
+  wmcMgr.addEventListener(wmcEvents.AMC_EVENT_TEXT_TRACKS_ADDED, processEvent);
+  wmcMgr.addEventListener(
+    wmcEvents.AMC_EVENT_AUDIO_TRACKS_CHANGED,
+    processEvent,
+  );
+  wmcMgr.addEventListener(wmcEvents.AMC_EVENT_PERIOD_SWITCH, processEvent);
+  wmcMgr.addEventListener(wmcEvents.AMC_EVENT_PERIOD_SWITCHED, processEvent);
+  wmcMgr.addEventListener(wmcEvents.AMC_EVENT_AD_MARKER_DATA, processEvent);
+  wmcMgr.addEventListener(
+    wmcEvents.AMC_EVENT_PLAYOUT_METRIC_UPDATE,
+    processEvent,
+  );
+  wmcMgr.addEventListener(wmcEvents.BEACON_FAIL_OPEN_STATUS, processEvent);
+  wmcMgr.addEventListener(
+    wmcEvents.AMC_EVENT_PROGRAM_QUERY_STATUS,
+    processEvent,
+  );
+  wmcMgr.addEventListener(
+    wmcEvents.AMC_EVENT_VIDEO_QUALITY_CHANGED,
+    processEvent,
+  );
+  wmcMgr.addEventListener(wmcEvents.AMC_EVENT_PROFILING, processEvent);
+  wmcMgr.addEventListener(
+    wmcEvents.AMC_EVENT_PLAYER_SEGMENT_PLAYBACK,
+    processEvent,
+  );
+  wmcMgr.addEventListener(wmcEvents.AMC_EVENT_ERROR, processEvent);
+  wmcMgr.addEventListener(wmcEvents.AMC_EVENT_STATE_CHANGED, processEventPlay);
+  wmcMgr.addEventListener(
+    wmcEvents.AMC_EVENT_VIDEO_POSITION_CHANGED,
+    processEvent,
+  );
+  wmcMgr.addEventListener(wmcEvents.AMC_EVENT_SEEK_COMPLETE, processEvent);
+  wmcMgr.addEventListener(wmcEvents.AMC_EVENT_DEVICE_REGISTERED, processEvent);
+  wmcMgr.addEventListener(wmcEvents.AMC_EVENT_INIT_COMPLETE, processEvent);
+  wmcMgr.addEventListener(wmcEvents.AMC_EVENT_PLAY_READY, processEvent);
+  wmcMgr.addEventListener(wmcEvents.AMC_EVENT_PRELOAD_COMPLETE, processEvent);
+  wmcMgr.addEventListener(wmcEvents.AMC_EVENT_PLAYER_METADATA, processEvent);
+  wmcMgr.addEventListener(
+    wmcEvents.AMC_EVENT_PLAYER_METADATA_PARSED,
+    processEvent,
+  );
+  wmcMgr.addEventListener(wmcEvents.AMC_EVENT_METRICS_UPDATE, processEvent);
+  wmcMgr.setPlayerKey("60a31c68-c920-42be-a74a-506d51df7233");
+  //wmcMgr.setExternalSourceParams({ sourceUrl: "https://nbablpng.akamaized.net/live/hls-itc/bbtest45/v1-121.m3u8?stSecret=rj12sw543terw32422334swees", licenseUrl: "" });
+  wmcMgr.setExternalSourceParams({
+    sourceUrl: globalConfig.url,
+    licenseUrl: "",
+  });
+  wmcMgr.init();
+  const toggleBtn = document.getElementById("toggleBtn");
+  function toggleBBPlayer() {
+    // if(bbPlayer)
+    // {
+    // 	bbPlayer.Toggle(!bbPlayer.options.enabled);
+    // 	toggleBtn.innerText = "Toggle ott player " + (bbPlayer.options.enabled ? "OFF" : "ON");
+    // }
+  }
+  // Add event listener to the quality button
+  document.getElementById("qualityButton").addEventListener("click", () => {
+    const qualities = wmcMgr.getAvailableVideoQualities();
+    const qualitySelect = document.getElementById("qualitySelect");
+    qualitySelect.innerHTML = '<option value="">Select Quality</option>'; // Clear previous options
+    qualities.forEach((quality) => {
+      const option = document.createElement("option");
+      option.value = quality.id;
+      option.text = quality.label;
+      qualitySelect.appendChild(option);
+    });
+  });
+
+  // Add event listener to the quality select dropdown
+  document
+    .getElementById("qualitySelect")
+    .addEventListener("change", function () {
+      const selectedQuality = this.value;
+      if (selectedQuality) {
+        wmcMgr.setVideoQuality(selectedQuality);
+      }
+    });
+}
+
+const URLParams = new URL(document.location);
+const CONFIG_NAME = URLParams.searchParams.get("config") || "";
+
+//@TODO: config merge happens incorrectly if debug config is in `globalConfig` but correctly for fetched one
+async function fetchConfig() {
+  if (CONFIG_NAME) {
+    try {
+      const response = await fetch(CONFIG_NAME);
+      const configJson = await response.json();
+      console.log("Got the following config: ", configJson);
+      if (!window.globalConfig) window.globalConfig = {};
+      window.globalConfig = Object.assign({}, window.globalConfig, configJson);
+      doAllStuff();
+    } catch (error) {
+      console.error("Error fetching JSON:", error);
+    }
+  } else {
+    if (!window.globalConfig) window.globalConfig = {};
+    doAllStuff();
+  }
+}
+fetchConfig();