@brandbrigade/ott-bb-player 1.0.45 → 1.0.46

package/src/Composer3DForMainThread.js

@@ -1,131 +0,0 @@
-import Composer3DBase from "./Composer3DBase";
-import { createProgramFromSources } from "twgl.js";
-import { vertexShaderSourceV1, fragmentShaderSourceV1 } from "./shaders/v1";
-import { vertexShaderSourceV1Old, fragmentShaderSourceV1Old } from "./shaders/v1Old";
-
-export default class Composer3DForMainThread extends Composer3DBase {
-  constructor(options, videoContainer) {
-    super(options);
-
-    this.canvas = document.createElement("canvas");
-    this.ctx = this.canvas.getContext("webgl", {
-      premultipliedAlpha: false,
-      antialias: false,
-    });
-
-    let videoTag = videoContainer.getElementsByTagName("video")[0];
-    this.canvas.style.top = 0;
-    this.canvas.style.left = 0;
-    this.canvas.style.width = "100%";
-    this.canvas.style.zIndex = 100000;
-    this.canvas.width = videoContainer.clientWidth;
-    this.canvas.height = videoContainer.clientHeight;
-    this.canvas.style.position = "absolute";
-    this.canvas.width = 1280;
-    this.canvas.height = 720;
-
-    let nextElement = videoTag.nextSibling;
-
-    if (nextElement) videoContainer.insertBefore(this.canvas, nextElement);
-    else videoContainer.appendChild(this.canvas);
-    this.canvas.style["pointer-events"] = "none";
-    videoTag.addEventListener("click", (e) => {
-      this.onUserClickOnCanvas(e);
-    });
-    this.canvas.addEventListener("dblclick", this.ToggleFullscreen);
-    this.initGL();
-  }
-
-  initGL() {
-    const shaders = this.options.maskMP4 ?
-      [vertexShaderSourceV1, fragmentShaderSourceV1] :
-      [vertexShaderSourceV1Old, fragmentShaderSourceV1Old]
-    this.program = createProgramFromSources(this.ctx, shaders);
-
-    this.ctx.useProgram(this.program);
-    this.counter = 0;
-    this.cleanGL();
-  }
-
-  createDigitImg(str) {
-    let canvas = document.createElement("canvas");
-    canvas.width = 50;
-    canvas.height = 50;
-    let ctx = canvas.getContext("2d");
-    ctx.fillStyle = "black";
-    ctx.fillRect(0, 0, canvas.width, canvas.height);
-    ctx.font = "30px Arial";
-    ctx.fillStyle = "white";
-    ctx.fillText(str, 10, 35); // Adjust the position as needed
-    let dataURL = canvas.toDataURL();
-    let img = document.createElement("img");
-    img.src = dataURL;
-
-    return img;
-  }
-
-  cleanGL() {
-    super.cleanGL();
-  }
-  getCanvas() {
-    return this.canvas;
-  }
-
-  addAdvertisement(name, path, cb = null) {
-    if (name.indexOf(".json") > -1) {
-      fetch(path).then(async (res) => {
-        this.place2ad = await res.json();
-        this.ad2place = {};
-        let placesArr = Object.keys(this.place2ad);
-        for (let i = 0; i < placesArr.length; ++i) {
-          let place = placesArr[i];
-          if (place == "urls") {
-            this.ad2Url = this.place2ad[place];
-            delete this.place2ad[place];
-            continue;
-          }
-          let adsForThisPlace = this.place2ad[place];
-          for (let j = 0; j < adsForThisPlace.length; ++j) {
-            let ad = adsForThisPlace[j];
-            this.ad2place["#" + ad] = place;
-          }
-        }
-        if (Object.keys(this.place2ad).length > 0) {
-          console.log(
-            "composer::AddAdvertisement: place-to-ads mapping: ",
-            this.place2ad,
-          );
-          console.log(
-            "composer::AddAdvertisement: ads-to-place mapping: ",
-            this.ad2place,
-          );
-          setTimeout(() => {
-            this.makeSureAdPerPlace();
-          }, 3000); //make sure its ad is in the right place once all ads are loaded
-        }
-      });
-      if (cb) cb();
-      return;
-    }
-    const adImage = new Image();
-    adImage.crossOrigin = "Anonymous";
-    adImage.onload = () => {
-      let isFirst = Object.keys(this.advertisementMap).length === 0;
-      this.advertisementMap[name] = adImage;
-      console.log("composer::AddAdvertisement", name);
-      if (isFirst) {
-        this.selectAd(name);
-        if (this.options.isAdLoop) {
-          clearTimeout(this.autoAddIndex);
-          this._nextAdvertisement();
-        }
-      }
-      if (cb) cb();
-    };
-    adImage.onerror = () => {
-      alert(`( Security ) We cant reach ${path} .`);
-    };
-    adImage.src = path;
-    return adImage;
-  }
-}

package/src/Composer3DForWorker.js

@@ -1,80 +0,0 @@
-import Composer3DBase from "./Composer3DBase";
-
-export default class Composer3DForWorker extends Composer3DBase {
-  constructor(options, canvas) {
-    super(options);
-
-    this.canvas = canvas;
-    this.ctx = this.canvas.getContext("webgl", {
-      premultipliedAlpha: false,
-      antialias: false,
-    });
-
-    this.initGL();
-  }
-
-  async createDigitImg(str) {
-    let canvas = new OffscreenCanvas(50, 50);
-    let ctx = canvas.getContext("2d");
-    ctx.fillStyle = "black";
-    ctx.fillRect(0, 0, canvas.width, canvas.height);
-    ctx.font = "30px Arial";
-    ctx.fillStyle = "white";
-    ctx.fillText(str, 10, 35);
-
-    return await canvas.transferToImageBitmap();
-  }
-
-  async addAdvertisement(params) {
-    let { name, path, isSelected } = params;
-    if (name.indexOf(".json") > -1) {
-      fetch(path).then(async (res) => {
-        this.place2ad = await res.json();
-        this.ad2place = {};
-        let placesArr = Object.keys(this.place2ad);
-        for (let i = 0; i < placesArr.length; ++i) {
-          let place = placesArr[i];
-          if (place == "urls") {
-            this.ad2Url = this.place2ad[place];
-            delete this.place2ad[place];
-            continue;
-          }
-          let adsForThisPlace = this.place2ad[place];
-          for (let j = 0; j < adsForThisPlace.length; ++j) {
-            let ad = adsForThisPlace[j];
-            this.ad2place["#" + ad] = place;
-          }
-        }
-        if (Object.keys(this.place2ad).length > 0) {
-          console.log(
-            "composer::AddAdvertisement: place-to-ads mapping: ",
-            this.place2ad,
-          );
-          console.log(
-            "composer::AddAdvertisement: ads-to-place mapping: ",
-            this.ad2place,
-          );
-          setTimeout(() => {
-            this.makeSureAdPerPlace();
-          }, 3000); //make sure its ad is in the right place once all ads are loaded
-        }
-        if (isSelected) this.selectAd(name);
-      });
-      return;
-    }
-
-    const response = await fetch(path);
-    const blob = await response.blob();
-    const imageBitmap = await createImageBitmap(blob);
-
-    let isFirst = Object.keys(this.advertisementMap).length === 0;
-    this.advertisementMap[name] = imageBitmap;
-    if (isFirst) {
-      this.selectAd(name);
-      if (this.options.isAdLoop) {
-        clearTimeout(this.autoAddIndex);
-        this._nextAdvertisement();
-      }
-    }
-  }
-}

package/src/Composer3DWorker.js

@@ -1,60 +0,0 @@
-import ComposerWorker from "./composer_worker?worker&inline";
-
-export default class Composer3DWorker {
-  constructor(canvas, options) {
-    this.canvas = canvas;
-    this.worker = new ComposerWorker();
-
-    this.worker.onmessage = (e) => {
-      const { action, url } = e.data;
-      if (action === "open-uri" && url) {
-        window.open(url, "_blank"); // Opens the URI in a new tab
-      }
-    };
-    const offscreen = canvas.transferControlToOffscreen();
-    let sourceFPS = 60000 / 1001;
-    let renderTimecodes = options.renderTimecode;
-    this.worker.postMessage(
-      {
-        method: "constructor",
-        canvas: offscreen,
-        options: { sourceFPS, renderTimecodes, maskMP4: options.maskMP4 },
-      },
-      [offscreen],
-    );
-  }
-
-  onUserClickOnCanvas(clientX, clientY, rect) {
-    this.worker.postMessage({
-      method: "onUserClickOnCanvas",
-      data: { clientX, clientY, rect },
-    });
-  }
-
-  cleanGL() {
-    this.worker.postMessage({ method: "cleanGL", data: "" });
-  }
-
-  renderAugmentation(nextTimeCode) {
-    this.worker.postMessage({
-      method: "renderAugmentation",
-      data: nextTimeCode,
-    });
-  }
-
-  addAdvertisement(params) {
-    this.worker.postMessage({ method: "addAdvertisement", data: params });
-  }
-
-  getCanvas() {
-    return this.canvas;
-  }
-
-  selectAd(name) {
-    this.worker.postMessage({ method: "selectAd", data: name });
-  }
-
-  onMetaData(frameMetaData) {
-    this.worker.postMessage({ method: "onMetaData", data: frameMetaData });
-  }
-}

package/src/MetaDataDecoder.js

@@ -1,143 +0,0 @@
-import MP4Box, { DataStream } from "mp4box";
-import UZIP from "uzip";
-
-export default class MetaDataDecoder {
-  async handleData(data, tc) {
-    const result = UZIP.parse(data);
-    if (result["alpha.mp4"] || result["alpha.webm"]) {
-      await this.decodeAlphaMaskVideo(result, tc);
-      return;
-    }
-
-    let sortedKeys = Object.keys(result).sort();
-
-    for (const key of sortedKeys) {
-      if (key.endsWith(".json")) {
-        let transferableArray = [];
-        const metadata = JSON.parse(new TextDecoder().decode(result[key]));
-        const tc = metadata.timecode.replace(/:/g, "_"); //replaceAll(":", "_");
-        if (metadata.placeholders) {
-          for (const groupId in metadata.placeholders) {
-            let alphaKey = `${tc}_${groupId}.alpha`;
-            if (result[alphaKey]) {
-              metadata.placeholders[groupId].alphaAsUint8Array = result[alphaKey];
-              transferableArray.push(result[alphaKey].buffer);
-            }
-          }
-        }
-        postMessage(metadata, transferableArray);
-      }
-    }
-  }
-
-  getDescription(trak) {
-    for (const entry of trak.mdia.minf.stbl.stsd.entries) {
-      const box = entry.avcC || entry.hvcC || entry.vpcC || entry.av1C;
-      if (box) {
-        const stream = new DataStream(undefined, 0, DataStream.BIG_ENDIAN);
-        box.write(stream);
-        return new Uint8Array(stream.buffer, 8); // Remove the box header.
-      }
-    }
-    console.error("avcC, hvcC, vpcC, or av1C box not found on ", trak);
-    return null;
-  }
-
-  numericFileComparator(a, b) {
-    const regex = /^(\d{2})_(\d{2})_(\d{2})_(\d{2})(?:\.(\d+))?\.(.+)$/;
-    const matchA = a.match(regex);
-    const matchB = b.match(regex);
-
-    if (!matchA || !matchB) return 0;
-
-    const [, hoursA, minutesA, secondsA, framesA, versionA = "0", extA] =
-      matchA;
-    const [, hoursB, minutesB, secondsB, framesB, versionB = "0", extB] =
-      matchB;
-
-    return (
-      parseInt(hoursA, 10) - parseInt(hoursB, 10) ||
-      parseInt(minutesA, 10) - parseInt(minutesB, 10) ||
-      parseInt(secondsA, 10) - parseInt(secondsB, 10) ||
-      parseInt(framesA, 10) - parseInt(framesB, 10) ||
-      parseInt(versionA, 10) - parseInt(versionB, 10) ||
-      extA.localeCompare(extB)
-    );
-  }
-
-  async decodeAlphaMaskVideo(result, tc) {
-    let metadatas = Object.keys(result)
-      .filter((a) => a.endsWith(".json"))
-      .sort(this.numericFileComparator)
-      .map((key) => JSON.parse(new TextDecoder().decode(result[key])))
-      .filter((json) => json["placeholders"]);
-
-    const start = performance.now();
-    const count = metadatas.length;
-    console.info("We need to decode ", count, "frames");
-    const blob = new Blob([result["alpha.mp4"] || result["alpha.webm"]], {
-      type: result["alpha.mp4"] ? "video/mp4" : "video/webm",
-    });
-    const arrayBuffer = await blob.arrayBuffer();
-    arrayBuffer.fileStart = 0;
-    let index = 0;
-
-    // Initialize the video decoder
-    const videoDecoder = new VideoDecoder({
-      output: (frame) => {
-        metadatas[index].alphaMask = frame;
-        postMessage(metadatas[index], [frame]);
-        frame.close()
-
-        index++;
-        if (index >= count) {
-          console.log(
-            tc,
-            "Decoded",
-            index,
-            "Frames in",
-            performance.now() - start,
-            "milliseconds.",
-          );
-        }
-      },
-      error: (e) => console.error("--Decoder error:", e),
-    });
-
-    // Initialize MP4Box
-    const mp4boxfile = MP4Box.createFile();
-    mp4boxfile.onError = (e) => console.error("MP4 parsing error:", e);
-
-    mp4boxfile.onReady = (info) => {
-      const videoTrack = info.tracks.find((track) => track.type === "video");
-      if (videoTrack) {
-        videoDecoder.configure({
-          codec: videoTrack.codec,
-          width: videoTrack.video.width,
-          height: videoTrack.video.height,
-          description: this.getDescription(
-            mp4boxfile.getTrackById(videoTrack.id),
-          ),
-        });
-
-        mp4boxfile.setExtractionOptions(videoTrack.id);
-        mp4boxfile.start();
-      }
-    };
-
-    // Callback to handle parsed samples (video frames)
-    mp4boxfile.onSamples = (id, user, samples) => {
-      samples.forEach((sample) => {
-        const chunk = new EncodedVideoChunk({
-          type: sample.is_sync ? "key" : "delta",
-          timestamp: sample.cts,
-          data: new Uint8Array(sample.data),
-        });
-
-        videoDecoder.decode(chunk);
-      });
-    };
-
-    mp4boxfile.appendBuffer(arrayBuffer);
-  }
-}

package/src/MetaDataFetcher.js

@@ -1,88 +0,0 @@
-import MetaWorker from './meta_worker?worker&inline'
-
-import {
-  timeCodeArray2TimeCodeJson,
-  frames2Timecode,
-  printTimecode,
-} from "./utils";
-
-export default class MetaDataFetcher {
-  constructor(options, composer) {
-    this.options = options;
-    this.composer = composer;
-    this.sourceFPS = 60000 / 1001;
-    this.folderName;
-    this.lastFrames;
-    this.metadataWorker = null;
-    this.getMetaDataFolderName();
-  }
-
-  setMetaDataFolderName(_folderName) {
-    this.folderName = _folderName;
-    console.log(
-      "Folder name for " + this.options.gameId + ": " + this.folderName,
-    );
-    if (this.lastFrames) {
-      this.loadMetaData(this.lastFrames);
-    }
-  }
-
-  async getMetaDataFolderName() {
-    const res = await fetch(this.options.allGamesURL); //get all the games
-    const list = await res.json(); //extract the games' list
-    //if (typeof list[options.gameId] != "undefined") {//see if we found the current project
-    //    setMetaDataFolderName(list[options.gameId].folder);//set the project's folder
-    //} else {
-    //	setTimeout(async ()=>{
-    //        await getMetaDataFolderName();//Didn't find it ? Don't give up, try again after 2 secs
-    //    },2000);
-    //}
-    this.setMetaDataFolderName(this.options.gameId); //set the project's folder
-  }
-
-  setLastFrame(framesNum) {
-    this.lastFrames = framesNum;
-    if (this.folderName) {
-      this.loadMetaData(this.lastFrames);
-    }
-  }
-
-  loadMetaData(lastFrames) {
-    //console.log("loadMetaData");
-    if (this.metadataWorker == null) {
-      const metadataWorker = new MetaWorker();
-
-      metadataWorker.onerror = function (error) {
-        console.error("Error from worker:", error);
-      };
-
-      metadataWorker.addEventListener("message", (msg) => {
-        if (msg.data.time) {
-          //Debug("prof",msg.data.time);
-        } else {
-          this.composer.onMetaData(msg.data); //send to composer
-        }
-      });
-      //get the last timecode with 2-sec round-down
-      let timeCode = timeCodeArray2TimeCodeJson(
-        frames2Timecode(lastFrames, this.sourceFPS, true),
-      );
-      metadataWorker.postMessage({
-        cloudFrontURL: this.options.cloudFrontURL,
-        folderName: this.folderName,
-        tc: printTimecode(timeCode, false),
-        maskMP4: this.options.maskMP4
-      });
-      this.metadataWorker = metadataWorker;
-    } //the metadata worker is already in action, let it know the current playing data so the max-timecode is updated accordingly
-    else {
-      let timeCode = timeCodeArray2TimeCodeJson(
-        frames2Timecode(this.lastFrames, this.sourceFPS, true),
-      );
-      this.metadataWorker.postMessage({
-        tc: printTimecode(timeCode, false),
-        enabled: this.options.enabled,
-      });
-    }
-  }
-}