@brandbrigade/ott-bb-player 1.0.42 → 1.0.44

package/src/meta_worker.js

@@ -0,0 +1,144 @@
+import MetaDataDecoder from "./MetaDataDecoder";
+import { isTCBigger, getNextTimeCode_TC, getNextTimeCode, addSecondsToTimeCode, timeCode2Str, str2TimeCode } from "./utils";
+
+try {
+  let started = false;
+  let cloudFrontURL = "";
+  let folderName = "";
+  let lastRequest = {}; //{tc:"00_00_00_00", path:"..."}
+  let lastTimeCodeFound = null; //for statistics
+  let msecAvg = []; //for statistics
+  let maxTimeCode = {}; //don't pass this timecode
+  let enabled = true;
+  let isWorking = false;
+  const decoder = new MetaDataDecoder();
+  let isMaskMP4 
+
+  const TryNextFrame = (seconds) => {
+    if (!enabled) return;
+    //if the required time code exceed the max time code, wait a bit
+    if (
+      seconds > 0 &&
+      isTCBigger(getNextTimeCode_TC(lastRequest.tc, seconds), maxTimeCode)
+    ) {
+      setTimeout(() => {
+        TryNextFrame(seconds);
+      }, 100);
+    } else {
+      setTimeout(() => {
+        lastRequest.tc = getNextTimeCode(lastRequest.tc, seconds);
+        GetMetaData();
+      }, 0);
+    }
+  };
+
+  const getUrl = (request) => {
+    const tc = request.tc.replaceAll(":", "_")
+    return isMaskMP4 ? 
+      `${request.path}/manifests/59.94/${tc}.zip` : 
+      `${request.path}/${tc}.zip`
+  }
+
+  const GetMetaData = async () => {
+    isWorking = true;
+    const item = lastRequest;
+    const url = getUrl(item)
+    try {
+      const t1 = performance.now();
+      const res = await fetch(url);
+      if (res.status >= 400) {
+        let now = performance.now();
+        let msecSinceLastTimeDate = now - lastTimeCodeFound;
+        let secSinceLastTimeDate = msecSinceLastTimeDate / 1000;
+        if (secSinceLastTimeDate > 4) {
+          console.error(
+            "Didn't find timecode ",
+            item.tc,
+            ", now for " +
+              secSinceLastTimeDate.toFixed(2) +
+              " seconds - give up !",
+          );
+          TryNextFrame(2);
+        } else {
+          console.error(
+            "Didn't find timecode ",
+            item.tc,
+            ", now for " + secSinceLastTimeDate.toFixed(2) + " seconds",
+          );
+          TryNextFrame(0);
+        }
+        isWorking = false;
+        return;
+      }
+
+      let now = performance.now();
+      let msecSinceLastTimeDate = 0;
+      if (lastTimeCodeFound) {
+        msecSinceLastTimeDate = now - lastTimeCodeFound;
+        msecAvg.push(msecSinceLastTimeDate);
+        while (msecAvg.length > 1000) msecAvg.shift();
+      }
+      lastTimeCodeFound = now;
+      const data = await res.arrayBuffer();
+      await decoder.handleData(data, item.tc);
+      const t2 = performance.now();
+    } catch (err) {
+      console.error(`Error on url ${url}`, err);
+    }
+    isWorking = false;
+    TryNextFrame(2);
+  };
+
+  addEventListener("message", (request) => {
+    if (!started && request.data.cloudFrontURL) {
+      started = true;
+      isMaskMP4 = request.data.maskMP4 ?? false
+      cloudFrontURL = request.data.cloudFrontURL;
+      folderName = request.data.folderName;
+      let timeCode = str2TimeCode(request.data.tc, ':'); //parse the time code string into a real time-code
+      maxTimeCode = addSecondsToTimeCode(Object.assign({}, timeCode), 4); //set the max limit (on a clone)
+      //set the timecode needed
+      timeCode.f = 0;
+      timeCode.s = timeCode.s % 2 === 0 ? timeCode.s : timeCode.s - 1;
+      lastRequest = { tc: timeCode2Str(timeCode), path: `${cloudFrontURL}/${folderName}` }; //from the lastReqest object
+      console.log(
+        "Meta-data worker starting from this time-code:",
+        lastRequest.tc,
+      );
+      GetMetaData();
+    } else {
+      let timeCode = str2TimeCode(request.data.tc, ':');
+      timeCode.f = 0;
+      timeCode.s = timeCode.s % 2 === 0 ? timeCode.s : timeCode.s - 1;
+      if (isTCBigger(timeCode, maxTimeCode)) {
+        lastRequest.tc = timeCode2Str(timeCode);
+        console.log(
+          "Meta-data worker jumps forward to this time-code: ",
+          lastRequest.tc,
+        );
+      }
+      if (
+        isTCBigger(
+          str2TimeCode(lastRequest.tc, ':'),
+          addSecondsToTimeCode(timeCode, 4),
+        )
+      ) {
+        lastRequest.tc = timeCode2Str(timeCode);
+        console.log(
+          "Meta-data worker jumps back to this time-code: ",
+          lastRequest.tc,
+        );
+      }
+      maxTimeCode = addSecondsToTimeCode(timeCode, 4);
+      if (!enabled && request.data.enabled) {
+        enabled = request.data.enabled;
+        if (!isWorking) GetMetaData();
+      } else {
+        enabled = request.data.enabled;
+      }
+      //console.log("max time code: ", maxTimeCode);
+    }
+  });
+} catch (e) {
+  console.error(e);
+}

package/src/shaders/v1.js

@@ -0,0 +1,87 @@
+export const vertexShaderSourceV1 = `
+precision highp float;
+
+uniform vec2 u_resolution;
+attribute vec2 a_position;
+attribute vec2 a_uv;
+
+varying vec2 v_uv;
+
+void main() {
+  v_uv = a_uv;
+
+  // convert the rectangle from pixels to 0.0 to 1.0
+  vec2 clipSpace = 2.0 * (a_position / u_resolution) - 1.0;
+
+  gl_Position = vec4(clipSpace, 0.0, 1.0);
+}
+`;
+
+export const fragmentShaderSourceV1 = `
+precision highp float;
+
+uniform vec2 u_resolution;
+uniform sampler2D ad0;
+uniform sampler2D ad1;
+uniform sampler2D u_alphaMask;
+
+varying vec2 v_uv;
+
+uniform int hasLogo0;
+uniform mat3 u_matrix0;
+
+uniform int hasLogo1;
+uniform mat3 u_matrix1;//the reverse homography
+
+const float Directions = 16.0; // BLUR DIRECTIONS (Default 16.0 - More is better but slower)
+const float QualityAd = 3.0; // BLUR QUALITY (Default 3.0 - More is better but slower)
+const float QualityAlpha = 5.0; // BLUR QUALITY (Default 3.0 - More is better but slower)
+const float BlurRadiusAd = 10.0;
+const float BlurRadiusAlpha = 10.0;
+const float Pi = 6.28318530718; // Pi*2
+
+vec4 BlurAd(sampler2D adTexture, vec2 adTexCoord) {
+  vec2 Radius = BlurRadiusAd/u_resolution.xy;
+  vec4 res = texture2D(adTexture, adTexCoord);
+   
+  for( float d=0.0; d<Pi; d+=Pi/Directions) {
+		for(float i=1.0/QualityAd; i<=1.0; i+=1.0/QualityAd) {
+			res += texture2D(adTexture, adTexCoord+vec2(cos(d),sin(d))*Radius*i);
+    }
+  }
+
+  res /= QualityAd * Directions - 5.0;
+
+  return res;
+}
+
+void BlendWithLogo(sampler2D ad, mat3 matrix) {
+  vec2 curCoord = gl_FragCoord.xy;
+  curCoord.y = u_resolution[1] - curCoord.y;
+
+  vec2 texCoord;
+  texCoord.x = (matrix[0][0]*curCoord.x + matrix[0][1]*curCoord.y + matrix[0][2]) / (matrix[2][0]*curCoord.x + matrix[2][1]*curCoord.y + 1.0);
+  texCoord.y = (matrix[1][0]*curCoord.x + matrix[1][1]*curCoord.y + matrix[1][2]) / (matrix[2][0]*curCoord.x + matrix[2][1]*curCoord.y + 1.0);
+  texCoord /= u_resolution;
+
+  vec4 maskAlpha = texture2D(u_alphaMask, v_uv);
+  vec4 adColor = BlurAd(ad, texCoord);
+  float adAlpha = texture2D(ad0, texCoord).a;
+
+  float finalAlpha = maskAlpha.r;
+  if (finalAlpha < 0.3) 
+    finalAlpha = 0.0;
+  finalAlpha *= adColor.a;
+  gl_FragColor = vec4(adColor.rgb, finalAlpha);
+  gl_FragColor.rgb *= finalAlpha;
+}
+
+void main() { 
+  if (hasLogo0 == 1) {
+    BlendWithLogo(ad0, u_matrix0);
+  } 
+  if (hasLogo1 == 1) {
+    BlendWithLogo(ad1,  u_matrix1);
+  } 
+}
+`;

package/src/shaders/v1Old.js

@@ -0,0 +1,174 @@
+export const vertexShaderSourceV1Old = `
+
+//High precision mode
+precision highp float;
+
+// an attribute is an input (in) to a vertex shader.
+// It will receive vertex data from the buffer
+attribute vec2 a_position;
+attribute vec2 a_uv;
+uniform vec2 u_resolution;
+varying vec2 v_texCoord;
+
+
+// Main vertex shader
+void main() {
+  // convert the rectangle from pixels to 0.0 to 1.0
+   vec2 zeroToOne = a_position / u_resolution;
+
+   // convert from 0->1 to 0->2
+   vec2 zeroToTwo = zeroToOne * 2.0;
+
+   // convert from 0->2 to -1->+1 (clipspace)
+   vec2 clipSpace = zeroToTwo - 1.0;
+
+   gl_Position = vec4(clipSpace * vec2(1, -1), 0, 1);
+
+   // pass the texCoord to the fragment shader
+   // The GPU will interpolate this value between points.
+   v_texCoord = a_uv;
+}
+`;
+
+export const fragmentShaderSourceV1Old = `
+
+//High precision mode
+precision highp float;
+
+//The textures
+uniform sampler2D u_image;//video frame's texture2D
+uniform sampler2D ad0;//the ad texture2D
+uniform sampler2D ad1;//the ad texture2D
+uniform sampler2D ad2;//the ad texture2D
+uniform sampler2D ad3;//the ad texture2D
+
+uniform vec2 u_resolution2;//resolution of the canvas
+
+//v_texCoord from the vertex shader
+varying vec2 v_texCoord;
+
+//Logos' staff
+uniform int hasLogo0;//has logo ?
+uniform int adForLogo0;
+uniform sampler2D alpha0;//the alpha's mate
+uniform mat3 u_matrix0;//the reverse homography
+uniform vec2 u_alpha0TopLeft;//the alpha mate's top-left
+uniform vec2 u_alpha0Size;//the alpha mate's size
+
+uniform int hasLogo1;//has logo ?
+uniform int adForLogo1;
+uniform sampler2D alpha1;//the alpha's mate
+uniform mat3 u_matrix1;//the reverse homography
+uniform vec2 u_alpha1TopLeft;//the alpha mate's top-left
+uniform vec2 u_alpha1Size;//the alpha mate's size
+
+uniform int hasLogo2;//has logo ?
+uniform int adForLogo2;
+uniform sampler2D alpha2;//the alpha's mate
+uniform mat3 u_matrix2;//the reverse homography
+uniform vec2 u_alpha2TopLeft;//the alpha mate's top-left
+uniform vec2 u_alpha2Size;//the alpha mate's size
+
+uniform int hasLogo3;//has logo ?
+uniform int adForLogo3;
+uniform sampler2D alpha3;//the alpha's mate
+uniform mat3 u_matrix3;//the reverse homography
+uniform vec2 u_alpha3TopLeft;//the alpha mate's top-left
+uniform vec2 u_alpha3Size;//the alpha mate's size
+
+const float Directions = 16.0; // BLUR DIRECTIONS (Default 16.0 - More is better but slower)
+const float QualityAd = 3.0; // BLUR QUALITY (Default 3.0 - More is better but slower)
+const float QualityAlpha = 5.0; // BLUR QUALITY (Default 3.0 - More is better but slower)
+const float BlurRadiusAd = 10.0;
+const float BlurRadiusAlpha = 10.0;
+const float Pi = 6.28318530718; // Pi*2
+
+float BlurAlpha(sampler2D alphaTexture, vec2 alphaCoord) {
+	float res = texture2D(alphaTexture, alphaCoord).a;
+  vec2 Radius = BlurRadiusAlpha/u_resolution2.xy;
+   
+  for( float d=0.0; d<Pi; d+=Pi/Directions) {
+		for(float i=1.0/QualityAlpha; i<=1.0; i+=1.0/QualityAlpha) {
+			res += texture2D(alphaTexture, alphaCoord+vec2(cos(d),sin(d))*Radius*i).a;
+    }
+  }
+
+  res /= QualityAlpha * Directions - 15.0;
+
+  return res;
+}
+
+vec4 BlurAd(sampler2D adTexture, vec2 adTexCoord) {
+  vec2 Radius = BlurRadiusAd/u_resolution2.xy;
+  vec4 res = texture2D(adTexture, adTexCoord);
+   
+  for( float d=0.0; d<Pi; d+=Pi/Directions) {
+		for(float i=1.0/QualityAd; i<=1.0; i+=1.0/QualityAd) {
+			res += texture2D(adTexture, adTexCoord+vec2(cos(d),sin(d))*Radius*i);
+    }
+  }
+
+  res /= QualityAd * Directions - 5.0;
+
+  return res;
+}
+
+bool BlendWithLogo(int adUnit, sampler2D alphaTexture, mat3 matrix, vec2 curCoord, vec2 alphaTopLeft, vec2 alphaSize, vec4 videoImagePix) {
+
+  vec2 texCoord;
+  texCoord.x = (matrix[0][0]*curCoord.x + matrix[0][1]*curCoord.y + matrix[0][2]) / (matrix[2][0]*curCoord.x + matrix[2][1]*curCoord.y + 1.0);
+  texCoord.y = (matrix[1][0]*curCoord.x + matrix[1][1]*curCoord.y + matrix[1][2]) / (matrix[2][0]*curCoord.x + matrix[2][1]*curCoord.y + 1.0);
+  texCoord /= u_resolution2;
+
+  //if we're in the bounding rect of the logo
+  if (texCoord.x >= 0.0 && texCoord.y >= 0.0 && texCoord.x <= 1.0 && texCoord.y <= 1.0) {
+		float maskAlpha = 1.0;
+    vec2 alphaCoord = (curCoord - alphaTopLeft)/alphaSize;//get the coordinate on the alpha mate
+    if (alphaCoord.x >= 0.0 && alphaCoord.y >= 0.0 && alphaCoord.x <= 1.0 && alphaCoord.y <= 1.0) {
+      // maskAlpha = BlurAlpha(alphaTexture, alphaCoord);
+      maskAlpha = texture2D(alphaTexture, alphaCoord).a;
+    }
+
+    vec4 adColor = 
+      adUnit == 0 ? BlurAd(ad0, texCoord) :
+      adUnit == 1 ? BlurAd(ad1, texCoord) :
+      adUnit == 2 ? BlurAd(ad2, texCoord) :
+					          BlurAd(ad3, texCoord); //get the logo's texel
+
+    float adAlpha = 
+      adUnit == 0 ? texture2D(ad0, texCoord).a :
+      adUnit == 1 ? texture2D(ad1, texCoord).a :
+      adUnit == 2 ? texture2D(ad2, texCoord).a :
+                    texture2D(ad3, texCoord).a; //get the logo's texel             
+
+    float finalAlpha = maskAlpha * adColor.a;
+    gl_FragColor = vec4(adColor.rgb, finalAlpha);
+    gl_FragColor.rgb *= finalAlpha;
+    return true;
+  } else {
+    return false;
+  }
+}
+void main()
+{
+  //calculate cur-coord (with pixels units)
+  vec2 curCoord = gl_FragCoord.xy;
+  curCoord.y = u_resolution2[1] - curCoord.y;
+
+  vec4 videoImagePix = texture2D(u_image, v_texCoord);
+
+  if (hasLogo0 == 1) {
+    BlendWithLogo(adForLogo0,alpha0, u_matrix0, curCoord,u_alpha0TopLeft, u_alpha0Size, videoImagePix);
+    return;
+  } else if (hasLogo1 == 1) {
+    BlendWithLogo(adForLogo1, alpha1, u_matrix1, curCoord,u_alpha1TopLeft, u_alpha1Size, videoImagePix);
+    return;
+  } else if (hasLogo2 == 1) {
+    BlendWithLogo(adForLogo2, alpha2, u_matrix2, curCoord,u_alpha2TopLeft, u_alpha2Size, videoImagePix);
+    return;
+  } else if (hasLogo3 == 1) {
+    BlendWithLogo(adForLogo3, alpha3, u_matrix3, curCoord,u_alpha3TopLeft, u_alpha3Size, videoImagePix);
+    return;
+  }
+}
+`;

package/src/shaders/v2.js

@@ -0,0 +1,193 @@
+export const vertexShaderSourceV2 = `#version 300 es
+
+// an attribute is an input (in) to a vertex shader.
+// It will receive vertex data from the buffer
+in vec2 a_position;
+
+//Identity matrix for now
+uniform mat3 u_matrix;
+
+//The canvas resolution, to covert to ZeTor
+uniform vec2 u_resolution;
+
+//a_texCoord->v_texCoord interpolation
+//in vec2 a_texCoord;
+//out vec2 v_texCoord;
+
+// Main vertex shader
+void main() {
+  //Translate, rotate, scale by u_matrix:
+  vec2 position = (u_matrix * vec3(a_position, 1)).xy;
+
+  //Convert the position from pixels to ZeTor [0.0,1.0]
+  vec2 zeroToOne = position / u_resolution;
+
+  //Convert from [0,1] to [0,2]
+  vec2 zeroToTwo = zeroToOne * 2.0;
+
+  //Convert from [0,2] to [-1,+1] (clipspace)
+  vec2 clipSpace = zeroToTwo - 1.0;
+
+  gl_Position = vec4(clipSpace * vec2(1, -1), 0, 1);
+
+  //Pass the texCoord to the fragment shader
+  //The GPU will interpolate this value between points.
+  //v_texCoord = a_texCoord;
+}
+`;
+
+export const fragmentShaderSourceV2 = `#version 300 es
+
+//High precision mode
+precision highp float;
+
+//The textures
+//uniform sampler2D u_image;//video frame's texture
+uniform sampler2D ad0;//the ad texture
+uniform sampler2D ad1;//the ad texture
+uniform sampler2D ad2;//the ad texture
+uniform sampler2D ad3;//the ad texture
+
+uniform vec2 u_resolution2;//resolution of the canvas
+
+//v_texCoord from the vertex shader
+//in vec2 v_texCoord;
+
+//Logos' staff
+uniform int hasLogo0;//has logo ?
+uniform int adForLogo0;
+uniform sampler2D alpha0;//the alpha's mate
+uniform mat3 u_matrix0;//the reverse homography
+uniform vec2 u_alpha0TopLeft;//the alpha mate's top-left
+uniform vec2 u_alpha0Size;//the alpha mate's size
+
+uniform int hasLogo1;//has logo ?
+uniform int adForLogo1;
+uniform sampler2D alpha1;//the alpha's mate
+uniform mat3 u_matrix1;//the reverse homography
+uniform vec2 u_alpha1TopLeft;//the alpha mate's top-left
+uniform vec2 u_alpha1Size;//the alpha mate's size
+
+uniform int hasLogo2;//has logo ?
+uniform int adForLogo2;
+uniform sampler2D alpha2;//the alpha's mate
+uniform mat3 u_matrix2;//the reverse homography
+uniform vec2 u_alpha2TopLeft;//the alpha mate's top-left
+uniform vec2 u_alpha2Size;//the alpha mate's size
+
+uniform int hasLogo3;//has logo ?
+uniform int adForLogo3;
+uniform sampler2D alpha3;//the alpha's mate
+uniform mat3 u_matrix3;//the reverse homography
+uniform vec2 u_alpha3TopLeft;//the alpha mate's top-left
+uniform vec2 u_alpha3Size;//the alpha mate's size
+
+uniform int hasDigit;//has debug digit texture
+uniform sampler2D digitTex;//the digits's mate
+uniform vec2 u_digitTopLeft;//the digit mate's top-left
+uniform vec2 u_digitTopLeft2;//the digit mate's top-left
+uniform vec2 u_digitSize;//the digit mate's size
+
+//Output
+out vec4 outColor;
+bool BlendDigit(in vec2 curCoord) {
+	//vec2 texCoord = curCoord;
+	//texCoord /= u_resolution2;
+	vec2 digitCoord = (curCoord - u_digitTopLeft)/u_digitSize;//get the coordinate on the digit size
+	if (digitCoord.x >= 0.0 && digitCoord.y >= 0.0 && digitCoord.x <= 1.0 && digitCoord.y <= 1.0)
+	{
+		outColor = texture(digitTex, digitCoord);
+		return true;
+	}
+	return false;
+}
+bool BlendDigit2(in vec2 curCoord) {
+	//vec2 texCoord = curCoord;
+	//texCoord /= u_resolution2;
+	vec2 digitCoord = (curCoord - u_digitTopLeft2)/u_digitSize;//get the coordinate on the digit size
+	if (digitCoord.x >= 0.0 && digitCoord.y >= 0.0 && digitCoord.x <= 1.0 && digitCoord.y <= 1.0)
+	{
+		outColor = texture(digitTex, digitCoord);
+		return true;
+	}
+	return false;
+}
+bool BlendWithLogo(
+	in int adUnit,
+    in sampler2D alphaTexture,
+    in mat3 matrix,
+    in vec2 curCoord,
+    in vec2 alphaTopLeft,
+    in vec2 alphaSize) 
+{
+	
+	
+	
+    vec2 texCoord;
+    texCoord.x = (matrix[0][0]*curCoord.x + matrix[0][1]*curCoord.y + matrix[0][2]) / (matrix[2][0]*curCoord.x + matrix[2][1]*curCoord.y + 1.0);
+    texCoord.y = (matrix[1][0]*curCoord.x + matrix[1][1]*curCoord.y + matrix[1][2]) / (matrix[2][0]*curCoord.x + matrix[2][1]*curCoord.y + 1.0);
+    texCoord /= u_resolution2;
+    
+    //if we're in the bounding rect of the logo
+    if (texCoord.x >= 0.0 && texCoord.y >= 0.0 && texCoord.x <= 1.0 && texCoord.y <= 1.0)
+    {
+      float alpha = 1.0;
+      vec2 alphaCoord = (curCoord - alphaTopLeft)/alphaSize;//get the coordinate on the alpha mate
+      if (alphaCoord.x >= 0.0 && alphaCoord.x <= 1.0 &&  
+		      alphaCoord.y >= 0.0 && alphaCoord.y <= 1.0)
+      {
+          //get the alpha texel:
+          alpha *= texture(alphaTexture, alphaCoord).a;//without blur
+      }		
+
+		  vec4 ad0Pix = texture(ad0, texCoord);
+			adUnit == 0 ? texture(ad0, texCoord) :
+			adUnit == 1 ? texture(ad1, texCoord) :
+			adUnit == 2 ? texture(ad2, texCoord) :
+			texture(ad3, texCoord);//get the logo's texel
+        
+		  alpha *= ad0Pix.a;//consider the alpha of the logo
+      vec3 resultRGB = ad0Pix.rgb;// + videoImagePix.rgb*(1.0-alpha);//blend
+      // if (alpha == 0.0) resultRGB = vec3(0,0,0);
+		  outColor = vec4(resultRGB, alpha);
+      return true;
+    } else {
+      return false;
+    }
+}
+void main()
+{
+  //calculate cur-coord (with pixels units)
+  vec2 curCoord = gl_FragCoord.xy;
+  curCoord.y = u_resolution2[1] - curCoord.y;
+  //if (hasDigit == 1 && (BlendDigit(curCoord) || BlendDigit2(curCoord))) return;
+  if (hasDigit == 1 && (BlendDigit(curCoord))) return;
+  else if (hasLogo0 == 1 && 
+     BlendWithLogo(adForLogo0,
+	 alpha0, u_matrix0, curCoord,u_alpha0TopLeft, u_alpha0Size))
+  {
+    return;
+  }
+  else if (hasLogo1 == 1 &&
+     BlendWithLogo(adForLogo1,
+	 alpha1, u_matrix1, curCoord,u_alpha1TopLeft, u_alpha1Size))
+  {
+    return;
+  }
+  else if (hasLogo2 == 1 &&
+     BlendWithLogo(adForLogo2,
+	 alpha2, u_matrix2, curCoord,u_alpha2TopLeft, u_alpha2Size))
+  {
+    return;
+  }
+  else if (hasLogo3 == 1 &&
+     BlendWithLogo(adForLogo3,
+	 alpha3, u_matrix3, curCoord,u_alpha3TopLeft, u_alpha3Size))
+  {
+    return;
+  }
+  else {//no logo
+    outColor = vec4(0,0,0,0);
+  }
+}
+`;

package/src/test-pages/mp4/index.html

@@ -0,0 +1,63 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>MP4 Video Player</title>
+    <link rel="stylesheet" href="./style.css" />
+    <script type="module" src="./index.js"></script>
+  </head>
+  <body>
+    <br />
+    <input type="number" id="numberInput" value="2" />
+
+    <input
+      type="checkbox"
+      id="plus05CorrectionCheckbox"
+      name="plus05CorrectionCheckbox"
+    />
+    <label for="plus05CorrectionCheckbox" id="plus05CorrectionLabel"
+      >plus05Correction (for 29.97 only):</label
+    >
+
+    <input
+      type="checkbox"
+      id="doNotRenderAugmentationCheckbox"
+      name="doNotRenderAugmentationCheckbox"
+    />
+    <label
+      for="doNotRenderAugmentationCheckbox"
+      id="doNotRenderAugmentationLabel"
+      >doNotRenderAugmentation:</label
+    >
+
+    <br />
+    <button id="toggleBtn" onclick="toggleBBPlayer()">
+      Toggle ott player OFF
+    </button>
+    <br />
+    <div id="forceUpdate" style="font-size: 3px"></div>
+    <button id="qualityButton">Get Available Qualities</button>
+    <select id="qualitySelect">
+      <option value="">Select Quality</option>
+    </select>
+    <div id="debugText"></div>
+    <div id="debugText2"></div>
+    <div id="player_container">
+      <video
+        id="video_element"
+        src="22-10-2024-Test10-Home.mp4"
+        poster=""
+        crossorigin
+        controls
+      ></video>
+    </div>
+    <canvas
+      style="position: absolute; top: 700px"
+      width="1280"
+      height="720"
+      id="test"
+    ></canvas>
+    <script src="https://www.virtualott.com/MK_player_lib/wmc.prod.js"></script>
+  </body>
+</html>

package/src/test-pages/mp4/index.js

@@ -0,0 +1,23 @@
+import OTTPlayer from "../../OTTPlayer";
+
+window.BB = {
+  MAX_LOGOS: 4,
+  RENDER_IN_WORKER: true,
+  OTTPlayer,
+};
+
+const video = document.getElementById("video_element");
+  new OTTPlayer(video, 60000 / 1001, {
+    url: "https://nbablpng.akamaized.net/live/hls-itc/bbtestexternal/v7-121.m3u8?stSecret=rj12sw543terw32422334swees",
+    cloudFrontURL: "https://db8igqxlbvayn.cloudfront.net",
+    mediaIdJsonURL: "test",
+    offsetJsonURL: "test",
+    gameId: "22-10-2024-Test10-Home",
+    debug: false,
+    augmentation: {
+      channelName: "nba2",
+      offset: (28 * 60 * 60 + 49 * 60 + 36) * -59.94 
+    },
+    maskMP4: true
+  });
+

package/src/test-pages/mp4/style.css

@@ -0,0 +1,16 @@
+body {
+  margin: 0;
+}
+
+#player_container {
+  position: relative;
+  height: 80%;
+}
+
+#player_container > * {
+  top: 0;
+  left: 0;
+  position: absolute;
+  text-align: center;
+  width: 100%;
+}