@brandbrigade/ott-bb-player 1.0.42 → 1.0.44

package/src/Composer3DBase.js

@@ -0,0 +1,754 @@
+import { fragmentShaderSourceV1, vertexShaderSourceV1 } from "./shaders/v1";
+import { fragmentShaderSourceV1Old, vertexShaderSourceV1Old } from "./shaders/v1Old";
+import { createProgramFromSources } from "twgl.js";
+import {
+  timeCodeStr2TimeCodeArray,
+  timeCodeAddFrames,
+  printTimecode,
+  isPowerOf2
+} from "./utils";
+
+export default class Composer3DBase {
+  adTexture = null;
+  place2AdTexture = {};
+  place2ad = {};
+  ad2place = {};
+  currentAds2BoundingRect = []; //array of current-frame ads to their bounding rect
+  lastTimeReportedIncomingTC = 0;
+  autoAddIndex = null;
+  digitImg = {};
+  sourceFPS = 60000 / 1001;
+  metadataArr = [];
+  metadataMap = {};
+  videoStarted = false;
+  advertisementMap = {};
+  ad2Url = {};
+  videoCopier = null;
+  autoAddIndex = null;
+
+  constructor(options) {
+    if (options.renderTimecodes) {
+      for (let i = 0; i < 10; ++i) {
+        let str1 = i + ".1";
+        let str2 = i + ".2";
+        this.digitImg[str1] = this.createDigitImg(str1);
+        this.digitImg[str2] = this.createDigitImg(str2);
+      }
+    }
+    this.options = Object.assign(
+      { adLoopTime: 5000, isAdLoop: false },
+      options || {},
+    );
+  }
+
+
+
+  onUserClickOnCanvas(e) {
+    console.log("fix me");
+    return;
+    const rect = e.rect;
+    let x = e.clientX - rect.left;
+    let y = e.clientY - rect.top;
+    x = x / (rect.right - rect.left);
+    y = y / (rect.bottom - rect.top);
+    for (let currentAd of this.currentAds2BoundingRect) {
+      if (
+        currentAd.rect.l <= x &&
+        currentAd.rect.r >= x &&
+        currentAd.rect.t <= y &&
+        currentAd.rect.b >= y
+      ) {
+        let adNameWithoutThatStupidHashSign = currentAd.name.substring(1);
+        if (this.ad2Url[adNameWithoutThatStupidHashSign]) {
+          let urlToGo = this.ad2Url[adNameWithoutThatStupidHashSign];
+          console.log(
+            "Clicked on ad: " +
+              adNameWithoutThatStupidHashSign +
+              " so should navigate to " +
+              urlToGo +
+              " !!!!!!!!!!!!!!!!!!!!!!",
+          );
+          window.open(urlToGo, "_blank");
+        }
+        return;
+      }
+    }
+  }
+
+  texUnitForGenericAd() {
+    return 0;
+  }
+
+  texUnitForAdInPlace(place) {
+    let placesArr = Object.keys(this.place2ad);
+    for (let i = 0; i < placesArr.length; ++i) {
+      if (place == placesArr[i]) return i + 1;
+    }
+    return 0;
+  }
+
+  texUnitForPlaceHolder(placeHolder) {
+    let placesArr = Object.keys(this.place2ad);
+    for (let i = 0; i < placesArr.length; ++i) {
+      let place = placesArr[i]; //wall
+      if (placeHolder.name.indexOf(place) >= 0) return i; // + 1;
+    }
+    return 0;
+  }
+
+  adNameForPlaceHolder(placeHolder) {
+    let placesArr = Object.keys(this.place2ad);
+    for (let i = 0; i < placesArr.length; ++i) {
+      let place = placesArr[i]; //wall
+      if (
+        placeHolder.name.indexOf(place) >= 0 &&
+        this.place2AdTexture &&
+        this.place2AdTexture[place] &&
+        this.place2AdTexture[place].name
+      ) {
+        return this.place2AdTexture[place].name;
+      }
+    }
+    return this.lastAdName;
+  }
+
+  texUnitBaseForAlpha() {
+    return 1 + Object.keys(this.place2ad).length;
+  }
+
+  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();
+  }
+
+  cleanGL() {
+    this.ctx.clearColor(0.0, 0.0, 0.0, 0.0);
+    this.ctx.clear(this.ctx.COLOR_BUFFER_BIT);
+  }
+
+  generateTexture(
+    imageData,
+    textureUnit,
+    uniformName,
+    internalFormat,
+    width,
+    height,
+    oneByteAlignment,
+    flipY = false
+  ) {
+    if (oneByteAlignment) {
+      this.ctx.pixelStorei(this.ctx.UNPACK_ALIGNMENT, 1);
+    } else {
+      this.ctx.pixelStorei(this.ctx.UNPACK_ALIGNMENT, 4);
+    }
+    this.ctx.pixelStorei(this.ctx.UNPACK_FLIP_Y_WEBGL, flipY);
+    const texture = this.ctx.createTexture();
+    this.ctx.activeTexture(this.ctx.TEXTURE0 + textureUnit);
+    this.ctx.bindTexture(this.ctx.TEXTURE_2D, texture);
+
+    try {
+      if (width && height) {
+        this.ctx.texImage2D(
+          this.ctx.TEXTURE_2D,
+          0,
+          internalFormat == null ? this.ctx.RGBA : internalFormat,
+          width,
+          height,
+          0,
+          internalFormat == null ? this.ctx.RGBA : internalFormat,
+          this.ctx.UNSIGNED_BYTE,
+          imageData,
+        );
+      } else {
+        this.ctx.texImage2D(
+          this.ctx.TEXTURE_2D,
+          0,
+          internalFormat == null ? this.ctx.RGBA : internalFormat,
+          this.ctx.RGBA,
+          this.ctx.UNSIGNED_BYTE,
+          imageData,
+        );
+      }
+    } catch (ex) {
+      console.error(ex);
+      return null;
+    }
+    if (this.webGLVersion == 1) {
+      let widthToInspect = width || imageData.width;
+      let heightToInspect = height || imageData.height;
+      if (
+        widthToInspect &&
+        isPowerOf2(widthToInspect) &&
+        heightToInspect &&
+        isPowerOf2(heightToInspect)
+      ) {
+        this.ctx.generateMipmap(this.ctx.TEXTURE_2D);
+      } else {
+        // No, it's not a power of 2. Turn off mips and set
+        // wrapping to clamp to edge
+        this.ctx.texParameteri(
+          this.ctx.TEXTURE_2D,
+          this.ctx.TEXTURE_WRAP_S,
+          this.ctx.CLAMP_TO_EDGE,
+        );
+        this.ctx.texParameteri(
+          this.ctx.TEXTURE_2D,
+          this.ctx.TEXTURE_WRAP_T,
+          this.ctx.CLAMP_TO_EDGE,
+        );
+        this.ctx.texParameteri(
+          this.ctx.TEXTURE_2D,
+          this.ctx.TEXTURE_MIN_FILTER,
+          this.ctx.LINEAR,
+        );
+      }
+    } else {
+      this.ctx.texParameteri(
+        this.ctx.TEXTURE_2D,
+        this.ctx.TEXTURE_WRAP_S,
+        this.ctx.CLAMP_TO_EDGE,
+      );
+      this.ctx.texParameteri(
+        this.ctx.TEXTURE_2D,
+        this.ctx.TEXTURE_WRAP_T,
+        this.ctx.CLAMP_TO_EDGE,
+      );
+      this.ctx.texParameteri(
+        this.ctx.TEXTURE_2D,
+        this.ctx.TEXTURE_MIN_FILTER,
+        this.ctx.LINEAR,
+      );
+      this.ctx.texParameteri(
+        this.ctx.TEXTURE_2D,
+        this.ctx.TEXTURE_MAG_FILTER,
+        this.ctx.LINEAR,
+      );
+    }
+
+    let location = this.ctx.getUniformLocation(this.program, uniformName);
+    if (location) {
+      this.ctx.uniform1i(location, textureUnit);
+    }
+    return texture;
+  }
+
+  _nextAdvertisement() {
+    this.autoAddIndex = setTimeout(() => {
+      const ads = Object.keys(this.advertisementMap);
+      if (ads.length) {
+        this.selectAd(ads[Math.floor(Math.random() * ads.length)]);
+        this._nextAdvertisement();
+      }
+    }, this.options.adLoopTime);
+  }
+
+  makeSureAdPerPlace() {
+    if (this.place2ad) {
+      let placesArr = Object.keys(this.place2ad);
+      for (let i = 0; i < placesArr.length; ++i) {
+        let place = placesArr[i];
+        if (!this.place2AdTexture[place] && this.place2ad[place].length > 0) {
+          console.log(
+            "MakeSureAdPerPlace: Set default image " +
+              this.place2ad[place][0] +
+              " for place " +
+              place,
+          );
+          this.selectAd("#" + this.place2ad[place][0]);
+        }
+      }
+    }
+  }
+
+  selectAd(name) {
+    console.log("composer::SelectAd: selected ad is " + name);
+    let adImage = this.advertisementMap[name];
+    if (!adImage) {
+      console.error("SelectAd: Failed to find image '" + name + "'");
+    } else {
+      if (this.ad2place && this.ad2place[name]) {
+        let place = this.ad2place[name];
+        console.log(
+          "composer::SelectAd: The selected ad should be in place " + place,
+        );
+        let texUnitId = this.texUnitForAdInPlace(place);
+        let texName = "ad" + (texUnitId - 1);
+        if (this.place2AdTexture[place])
+          this.ctx.deleteTexture(this.place2AdTexture[place].tex);
+        this.place2AdTexture[place] = {
+          tex: this.generateTexture(adImage, texUnitId, texName),
+          texUnitId: texUnitId,
+          texName: texName,
+          name: name,
+        };
+      } else {
+        if (this.adTexture) {
+          this.ctx.deleteTexture(this.adTexture);
+        }
+        this.adTexture = this.generateTexture(
+          adImage,
+          this.texUnitForGenericAd(),
+          "ad0",
+        );
+        this.lastAd = adImage;
+        this.lastAdName = name;
+      }
+    }
+  }
+
+  onMetaData(frameMetaData) {
+    this.metadataMap[frameMetaData.timecode] = frameMetaData;
+    this.metadataArr.push(frameMetaData.timecode);
+  }
+
+  renderFrame() {
+    let positionAttributeLocation = this.ctx.getAttribLocation(
+      this.program,
+      "a_position",
+    );
+
+    let uvAttributeLocation = this.ctx.getAttribLocation(
+      this.program,
+      "a_uv",
+    );
+
+    let resolutionLocation = this.ctx.getUniformLocation(
+      this.program,
+      "u_resolution",
+    );
+
+    this.ctx.uniform2f(
+      resolutionLocation,
+      this.ctx.canvas.width,
+      this.ctx.canvas.height,
+    );
+
+    //DELETE THIS WHEN WE DROP OLD MASK SUPPORT
+    resolutionLocation = this.ctx.getUniformLocation(
+      this.program,
+      "u_resolution2",
+    );
+    this.ctx.uniform2f(
+      resolutionLocation,
+      this.ctx.canvas.width,
+      this.ctx.canvas.height,
+    );
+
+    let positionBuffer = this.ctx.createBuffer();
+
+    this.ctx.enableVertexAttribArray(positionAttributeLocation);
+
+    this.ctx.bindBuffer(this.ctx.ARRAY_BUFFER, positionBuffer);
+
+    let size = 2;
+    let type = this.ctx.FLOAT;
+    let normalize = false;
+    let stride = 0;
+    let offset = 0;
+    this.ctx.vertexAttribPointer(
+      positionAttributeLocation,
+      size,
+      type,
+      normalize,
+      stride,
+      offset,
+    );
+
+    let texCoordBuffer = this.ctx.createBuffer();
+    this.ctx.bindBuffer(this.ctx.ARRAY_BUFFER, texCoordBuffer);
+    this.ctx.bufferData(
+      this.ctx.ARRAY_BUFFER,
+      new Float32Array([0,0, 1,0, 0,1, 0,1, 1,0, 1,1]),
+      this.ctx.STATIC_DRAW,
+    );
+    this.ctx.enableVertexAttribArray(uvAttributeLocation);
+    size = 2;    
+    type = this.ctx.FLOAT; 
+    normalize = false;
+    stride = 0;   
+    offset = 0; 
+    this.ctx.vertexAttribPointer(uvAttributeLocation, size, type, normalize, stride, offset);
+
+    this.ctx.viewport(0, 0, this.ctx.canvas.width, this.ctx.canvas.height);
+    this.ctx.clearColor(0, 0, 0, 0);
+    this.ctx.clear(this.ctx.COLOR_BUFFER_BIT | this.ctx.DEPTH_BUFFER_BIT);
+    this.ctx.bindBuffer(this.ctx.ARRAY_BUFFER, positionBuffer);
+
+    this.setRectangle(0, 0, this.canvas.width, this.canvas.height);
+
+    let primitiveType = this.ctx.TRIANGLES;
+    let count = 6;
+    this.ctx.drawArrays(primitiveType, offset, count);
+  }
+
+  setRectangle(x, y, width, height) {
+    let x1 = x;
+    let x2 = x + width;
+    let y1 = y;
+    let y2 = y + height;
+    this.ctx.bufferData(
+      this.ctx.ARRAY_BUFFER,
+      new Float32Array([x1, y1, x2, y1, x1, y2, x1, y2, x2, y1, x2, y2]),
+      this.ctx.STATIC_DRAW,
+    );
+  }
+
+  renderAugmentation(nextTimeCode) {
+    this.canvas.width = 1280;
+    this.canvas.height = 720;
+    this.options.maskMP4 ?
+      this.renderAugmentationMP4(nextTimeCode) :
+      this.renderAugmentationOld(nextTimeCode)
+  }
+
+  renderAugmentationMP4(nextTimeCode) {
+    let tc = timeCodeStr2TimeCodeArray(nextTimeCode);
+    let tcPlus1 = timeCodeAddFrames(tc, 1, this.sourceFPS);
+    let tcPlus2 = timeCodeAddFrames(tc, 2, this.sourceFPS);
+    let tcPlus1Str = printTimecode(tcPlus1);
+    let tcPlus2Str = printTimecode(tcPlus2);
+
+    this.videoStarted = true;
+    const t1 = performance.now();
+
+    let frameMetaData = null;
+    let next = [];
+    if (this.metadataMap[nextTimeCode]) {
+      frameMetaData = this.metadataMap[nextTimeCode];
+
+      if (this.metadataMap[tcPlus1Str]) {
+        next.push({
+          nextVideo: this.metadataMap[tcPlus1Str],
+          nextTimeCode: tcPlus1Str,
+        });
+      }
+      if (this.metadataMap[tcPlus2Str]) {
+        next.push({
+          nextVideo: this.metadataMap[tcPlus2Str],
+          nextTimeCode: tcPlus2Str,
+        });
+      }
+      const metaArrIndex = this.metadataArr.indexOf(nextTimeCode);
+
+      if (metaArrIndex > -5)
+        this.metadataArr.splice(0, metaArrIndex - 4).forEach((item) => {
+          delete this.metadataMap[item];
+        });
+    } else {
+      this.counter++;
+      if (this.counter > 60) {
+        this.counter = 0;
+        console.error("Missing meta data at time code " + nextTimeCode);
+      }
+    }
+
+    let texturesForThisFrame = [];
+
+    let placeHolderIndex = 0;
+    this.currentAds2BoundingRect = [];
+
+    if (frameMetaData?.alphaMask) {
+      let alphaTextureNum = this.texUnitBaseForAlpha();
+        const alphaTexture = this.generateTexture(
+          frameMetaData.alphaMask,
+          alphaTextureNum,
+          "u_alphaMask",
+          this.ctx.RGBA,
+          null,
+          null,
+          false, 
+          true
+        )
+      texturesForThisFrame.push(alphaTexture);
+
+      for (const key in frameMetaData.placeholders) {
+        const holder = frameMetaData.placeholders[key];
+
+        let hasLogoUniformName = "hasLogo" + placeHolderIndex;
+        let hasLogoLoc = this.ctx.getUniformLocation(
+          this.program,
+          hasLogoUniformName,
+        );
+        this.ctx.uniform1i(hasLogoLoc, 1);
+        let adForLogoUniformName = "adForLogo" + placeHolderIndex;
+        let adForLogoUniform = this.ctx.getUniformLocation(
+          this.program,
+          adForLogoUniformName,
+        );
+        this.ctx.uniform1i(
+          adForLogoUniform,
+          this.texUnitForPlaceHolder(holder),
+        );
+
+        let homographyMatrixUniformName = "u_matrix" + placeHolderIndex;
+        let placeHolderHomographyLocation = this.ctx.getUniformLocation(
+          this.program,
+          homographyMatrixUniformName,
+        );
+        this.ctx.uniformMatrix3fv(
+          placeHolderHomographyLocation,
+          false,
+          holder.tranform,
+        );
+
+          let boundingRect = { l: -1, t: -1, r: -1, b: -1 };
+          for (let corner of holder.corners) {
+            if (corner.x < boundingRect.l || boundingRect.l == -1)
+              boundingRect.l = corner.x;
+            if (corner.x > boundingRect.r || boundingRect.r == -1)
+              boundingRect.r = corner.x;
+            if (corner.y < boundingRect.t || boundingRect.t == -1)
+              boundingRect.t = corner.y;
+            if (corner.y > boundingRect.b || boundingRect.b == -1)
+              boundingRect.b = corner.y;
+          }
+          boundingRect.l /= frameMetaData.canvasSize.width;
+          boundingRect.r /= frameMetaData.canvasSize.width;
+          boundingRect.t /= frameMetaData.canvasSize.height;
+          boundingRect.b /= frameMetaData.canvasSize.height;
+          this.currentAds2BoundingRect.push({
+            name: this.adNameForPlaceHolder(holder),
+            rect: boundingRect,
+          });
+        
+
+        placeHolderIndex++;
+      }
+    }
+
+    //@TODO: global object BB contains MAX_LOGOS constant but since this is a base class for somethig that's gonna run in worker
+    //we can't get access to it like that. Hardcoded for now
+    const MAX_LOGOS = 4;
+    for (; placeHolderIndex < MAX_LOGOS; ++placeHolderIndex) {
+      let hasLogoUniformName = "hasLogo" + placeHolderIndex;
+      let uniformLocation = this.ctx.getUniformLocation(
+        this.program,
+        hasLogoUniformName,
+      );
+      this.ctx.uniform1i(uniformLocation, 0);
+    }
+
+    this.renderTimecodes(nextTimeCode)
+    this.renderFrame();
+
+    for (const texture of texturesForThisFrame) {
+      this.ctx.deleteTexture(texture);
+    }
+  }
+
+  renderAugmentationOld(nextTimeCode) {
+    let tc = timeCodeStr2TimeCodeArray(nextTimeCode);
+    let tcPlus1 = timeCodeAddFrames(tc, 1, this.sourceFPS);
+    let tcPlus2 = timeCodeAddFrames(tc, 2, this.sourceFPS);
+    let tcPlus1Str = printTimecode(tcPlus1);
+    let tcPlus2Str = printTimecode(tcPlus2);
+
+    this.videoStarted = true;
+    const t1 = performance.now();
+
+    let frameMetaData = null;
+    let next = [];
+    if (this.metadataMap[nextTimeCode]) {
+      frameMetaData = this.metadataMap[nextTimeCode];
+
+      if (this.metadataMap[tcPlus1Str]) {
+        next.push({
+          nextVideo: this.metadataMap[tcPlus1Str],
+          nextTimeCode: tcPlus1Str,
+        });
+      }
+      if (this.metadataMap[tcPlus2Str]) {
+        next.push({
+          nextVideo: this.metadataMap[tcPlus2Str],
+          nextTimeCode: tcPlus2Str,
+        });
+      }
+      const metaArrIndex = this.metadataArr.indexOf(nextTimeCode);
+
+      if (metaArrIndex > -5)
+        this.metadataArr.splice(0, metaArrIndex - 4).forEach((item) => {
+          delete this.metadataMap[item];
+        });
+    } else {
+      this.counter++;
+      if (this.counter > 60) {
+        this.counter = 0;
+        console.error("Missing meta data at time code " + nextTimeCode);
+      }
+    }
+
+    let texturesForThisFrame = [];
+
+    let placeHolderIndex = 0;
+    this.currentAds2BoundingRect = [];
+
+    for (const key in frameMetaData?.placeholders) {
+      const holder = frameMetaData.placeholders[key];
+
+      if (!holder.alphaAsUint8Array) continue;
+      let alphaUnfiromName = "alpha" + placeHolderIndex;
+      let alphaTextureNum = this.texUnitBaseForAlpha() + placeHolderIndex;
+      holder.alphaTex = this.generateTexture(
+        holder.alphaAsUint8Array,
+        alphaTextureNum,
+        alphaUnfiromName,
+        this.ctx.ALPHA,
+        holder.width,
+        holder.height,
+        true,
+      );
+      holder.alphaAsUint8Array = null;
+      if (!holder.alphaTex) {
+        console.error("Failed to create alpha texture");
+        continue;
+      }
+      texturesForThisFrame.push(holder.alphaTex);
+      let hasLogoUniformName = "hasLogo" + placeHolderIndex;
+      let hasLogoLoc = this.ctx.getUniformLocation(
+        this.program,
+        hasLogoUniformName,
+      );
+      this.ctx.uniform1i(hasLogoLoc, 1);
+      let adForLogoUniformName = "adForLogo" + placeHolderIndex;
+      let adForLogoUniform = this.ctx.getUniformLocation(
+        this.program,
+        adForLogoUniformName,
+      );
+      let isBlur = false;
+      if (holder.name.indexOf("blur") >= 0) {
+        this.ctx.uniform1i(adForLogoUniform, 99);
+        isBlur = true;
+      } else {
+        this.ctx.uniform1i(
+          adForLogoUniform,
+          this.texUnitForPlaceHolder(holder),
+        );
+      }
+
+      let alphaTopLeftUniformName = "u_alpha" + placeHolderIndex + "TopLeft";
+      let alphaTopLeftLoc = this.ctx.getUniformLocation(
+        this.program,
+        alphaTopLeftUniformName,
+      );
+      this.ctx.uniform2fv(alphaTopLeftLoc, [holder.maskX, holder.maskY]);
+      let alphaSizeUniformName = "u_alpha" + placeHolderIndex + "Size";
+      let alphaSizeLoc = this.ctx.getUniformLocation(
+        this.program,
+        alphaSizeUniformName,
+      );
+      this.ctx.uniform2fv(alphaSizeLoc, [holder.width, holder.height]);
+      let homographyMatrixUniformName = "u_matrix" + placeHolderIndex;
+      let placeHolderHomographyLocation = this.ctx.getUniformLocation(
+        this.program,
+        homographyMatrixUniformName,
+      );
+      this.ctx.uniformMatrix3fv(
+        placeHolderHomographyLocation,
+        false,
+        holder.tranform,
+      );
+
+      if (!isBlur) {
+        let boundingRect = { l: -1, t: -1, r: -1, b: -1 };
+        for (let corner of holder.corners) {
+          if (corner.x < boundingRect.l || boundingRect.l == -1)
+            boundingRect.l = corner.x;
+          if (corner.x > boundingRect.r || boundingRect.r == -1)
+            boundingRect.r = corner.x;
+          if (corner.y < boundingRect.t || boundingRect.t == -1)
+            boundingRect.t = corner.y;
+          if (corner.y > boundingRect.b || boundingRect.b == -1)
+            boundingRect.b = corner.y;
+        }
+        boundingRect.l /= frameMetaData.canvasSize.width;
+        boundingRect.r /= frameMetaData.canvasSize.width;
+        boundingRect.t /= frameMetaData.canvasSize.height;
+        boundingRect.b /= frameMetaData.canvasSize.height;
+        this.currentAds2BoundingRect.push({
+          name: this.adNameForPlaceHolder(holder),
+          rect: boundingRect,
+        });
+      }
+
+      placeHolderIndex++;
+    }
+
+    //@TODO: global object BB contains MAX_LOGOS constant but since this is a base class for somethig that's gonna run in worker
+    //we can't get access to it like that. Hardcoded for now
+    const MAX_LOGOS = 4;
+    for (; placeHolderIndex < MAX_LOGOS; ++placeHolderIndex) {
+      let hasLogoUniformName = "hasLogo" + placeHolderIndex;
+      let uniformLocation = this.ctx.getUniformLocation(
+        this.program,
+        hasLogoUniformName,
+      );
+      this.ctx.uniform1i(uniformLocation, 0);
+    }
+
+    this.renderTimecodes(nextTimeCode)
+    this.renderFrame();
+
+    for (const texture of texturesForThisFrame) {
+      this.ctx.deleteTexture(texture);
+    }
+  }
+
+  renderTimecodes(nextTimeCode) {
+    if (this.options.renderTimecodes) {
+      let framesAndField = nextTimeCode.split(":")[3];
+      let field = framesAndField.indexOf(".") >= 0 ? 2 : 1;
+      let frameLastDigit = parseInt(framesAndField.split(".")[0]) % 10;
+      let debugImgStr = frameLastDigit + "." + field;
+      let digitTextureNum = this.texUnitBaseForAlpha() + 5;
+      console.log( debugImgStr, this.digitImg,
+        digitTextureNum,
+        "digitTex")
+      let digitTex = this.generateTexture(
+        this.digitImg[debugImgStr],
+        digitTextureNum,
+        "digitTex",
+      );
+      texturesForThisFrame.push(digitTex);
+      let hasDigitUniformName = "hasDigit";
+      let hasDigitLoc = this.ctx.getUniformLocation(
+        this.program,
+        hasDigitUniformName,
+      );
+      this.ctx.uniform1i(hasDigitLoc, 1);
+      let digitTopLeftUniformName = "u_digitTopLeft";
+      let digitTopLeftLoc = this.ctx.getUniformLocation(
+        this.program,
+        digitTopLeftUniformName,
+      );
+      this.ctx.uniform2fv(digitTopLeftLoc, [0, 0]);
+
+      let digitSizeUniformName = "u_digitSize";
+      let digitSizeLoc = this.ctx.getUniformLocation(
+        this.program,
+        digitSizeUniformName,
+      );
+      this.ctx.uniform2fv(digitSizeLoc, [200, 200]);
+    } else {
+      let hasDigitUniformName = "hasDigit";
+      let hasDigitLoc = this.ctx.getUniformLocation(
+        this.program,
+        hasDigitUniformName,
+      );
+      this.ctx.uniform1i(hasDigitLoc, 0);
+    }
+  }
+
+  toggleFullscreen() {
+    (this.requestFullscreen || this.webkitRequestFullscreen)
+      .call(this)
+      .catch((err) => {
+        console.error(err);
+      });
+  }
+}