@brandbrigade/ott-bb-player 1.0.16 → 1.0.18

package/js/OTTPlayer.js

@@ -0,0 +1,4335 @@
+// test v3
+const META_WORKER = `try {
+
+let UZIP = {};
+if(typeof module == "object") module.exports = UZIP;
+UZIP["parse"] = function(buf, onlyNames)	// ArrayBuffer
+{
+    let rUs = UZIP.bin.readUshort, rUi = UZIP.bin.readUint, o = 0, out = {};
+    let data = new Uint8Array(buf);
+    let eocd = data.length-4;
+
+    while(rUi(data, eocd)!=0x06054b50) eocd--;
+
+    o = eocd;
+    o+=4;	// sign  = 0x06054b50
+    o+=4;  // disks = 0;
+    let cnu = rUs(data, o);  o+=2;
+    let cnt = rUs(data, o);  o+=2;
+
+    let csize = rUi(data, o);  o+=4;
+    let coffs = rUi(data, o);  o+=4;
+
+    o = coffs;
+    for(let i=0; i<cnu; i++)
+    {
+        let sign = rUi(data, o);  o+=4;
+        o += 4;  // versions;
+        o += 4;  // flag + compr
+        o += 4;  // time
+
+        let crc32 = rUi(data, o);  o+=4;
+        let csize = rUi(data, o);  o+=4;
+        let usize = rUi(data, o);  o+=4;
+
+        let nl = rUs(data, o), el = rUs(data, o+2), cl = rUs(data, o+4);  o += 6;  // name, extra, comment
+        o += 8;  // disk, attribs
+
+        let roff = rUi(data, o);  o+=4;
+        o += nl + el + cl;
+
+        UZIP._readLocal(data, roff, out, csize, usize, onlyNames);
+    }
+    //console.log(out);
+    return out;
+}
+
+UZIP._readLocal = function(data, o, out, csize, usize, onlyNames)
+{
+    let rUs = UZIP.bin.readUshort, rUi = UZIP.bin.readUint;
+    let sign  = rUi(data, o);  o+=4;
+    let ver   = rUs(data, o);  o+=2;
+    let gpflg = rUs(data, o);  o+=2;
+    //if((gpflg&8)!=0) throw "unknown sizes";
+    let cmpr  = rUs(data, o);  o+=2;
+
+    let time  = rUi(data, o);  o+=4;
+
+    let crc32 = rUi(data, o);  o+=4;
+    //let csize = rUi(data, o);  o+=4;
+    //let usize = rUi(data, o);  o+=4;
+    o+=8;
+
+    let nlen  = rUs(data, o);  o+=2;
+    let elen  = rUs(data, o);  o+=2;
+
+    let name =  UZIP.bin.readUTF8(data, o, nlen);  o+=nlen;  //console.log(name);
+    o += elen;
+
+    //console.log(sign.toString(16), ver, gpflg, cmpr, crc32.toString(16), "csize, usize", csize, usize, nlen, elen, name, o);
+    if(onlyNames) {  out[name]={size:usize, csize:csize};  return;  }
+    let file = new Uint8Array(data.buffer, o);
+    if(false) {}
+    else if(cmpr==0) out[name] = new Uint8Array(file.buffer.slice(o, o+csize));
+    else if(cmpr==8) {
+        let buf = new Uint8Array(usize);  UZIP.inflateRaw(file, buf);
+        /*let nbuf = pako["inflateRaw"](file);
+        if(usize>8514000) {
+            //console.log(PUtils.readASCII(buf , 8514500, 500));
+            //console.log(PUtils.readASCII(nbuf, 8514500, 500));
+        }
+        for(let i=0; i<buf.length; i++) if(buf[i]!=nbuf[i]) {  console.log(buf.length, nbuf.length, usize, i);  throw "e";  }
+        */
+        out[name] = buf;
+    }
+    else throw "unknown compression method: "+cmpr;
+}
+
+UZIP.inflateRaw = function(file, buf) {  return UZIP.F.inflate(file, buf);  }
+UZIP.inflate    = function(file, buf) {
+    let CMF = file[0], FLG = file[1];
+    let CM = (CMF&15), CINFO = (CMF>>>4);
+    //console.log(CM, CINFO,CMF,FLG);
+    return UZIP.inflateRaw(new Uint8Array(file.buffer, file.byteOffset+2, file.length-6), buf);
+}
+UZIP.deflate    = function(data, opts/*, buf, off*/) {
+    if(opts==null) opts={level:6};
+    let off=0, buf=new Uint8Array(50+Math.floor(data.length*1.1));
+    buf[off]=120;  buf[off+1]=156;  off+=2;
+    off = UZIP.F.deflateRaw(data, buf, off, opts.level);
+    let crc = UZIP.adler(data, 0, data.length);
+    buf[off+0]=((crc>>>24)&255);
+    buf[off+1]=((crc>>>16)&255);
+    buf[off+2]=((crc>>> 8)&255);
+    buf[off+3]=((crc>>> 0)&255);
+    return new Uint8Array(buf.buffer, 0, off+4);
+}
+UZIP.deflateRaw = function(data, opts) {
+    if(opts==null) opts={level:6};
+    let buf=new Uint8Array(50+Math.floor(data.length*1.1));
+    let off = UZIP.F.deflateRaw(data, buf, off, opts.level);
+    return new Uint8Array(buf.buffer, 0, off);
+}
+
+
+UZIP.encode = function(obj, noCmpr) {
+    if(noCmpr==null) noCmpr=false;
+    let tot = 0, wUi = UZIP.bin.writeUint, wUs = UZIP.bin.writeUshort;
+    let zpd = {};
+    for(let p in obj) {  let cpr = !UZIP._noNeed(p) && !noCmpr, buf = obj[p], crc = UZIP.crc.crc(buf,0,buf.length);
+        zpd[p] = {  cpr:cpr, usize:buf.length, crc:crc, file: (cpr ? UZIP.deflateRaw(buf) : buf)  };  }
+
+    for(let p in zpd) tot += zpd[p].file.length + 30 + 46 + 2*UZIP.bin.sizeUTF8(p);
+    tot +=  22;
+
+    let data = new Uint8Array(tot), o = 0;
+    let fof = []
+
+    for(let p in zpd) {
+        let file = zpd[p];  fof.push(o);
+        o = UZIP._writeHeader(data, o, p, file, 0);
+    }
+    let i=0, ioff = o;
+    for(let p in zpd) {
+        let file = zpd[p];  fof.push(o);
+        o = UZIP._writeHeader(data, o, p, file, 1, fof[i++]);
+    }
+    let csize = o-ioff;
+
+    wUi(data, o, 0x06054b50);  o+=4;
+    o += 4;  // disks
+    wUs(data, o, i);  o += 2;
+    wUs(data, o, i);  o += 2;	// number of c d records
+    wUi(data, o, csize);  o += 4;
+    wUi(data, o, ioff );  o += 4;
+    o += 2;
+    return data.buffer;
+}
+// no need to compress .PNG, .ZIP, .JPEG ....
+UZIP._noNeed = function(fn) {  let ext = fn.split(".").pop().toLowerCase();  return "png,jpg,jpeg,zip".indexOf(ext)!=-1;  }
+
+UZIP._writeHeader = function(data, o, p, obj, t, roff)
+{
+    let wUi = UZIP.bin.writeUint, wUs = UZIP.bin.writeUshort;
+    let file = obj.file;
+
+    wUi(data, o, t==0 ? 0x04034b50 : 0x02014b50);  o+=4; // sign
+    if(t==1) o+=2;  // ver made by
+    wUs(data, o, 20);  o+=2;	// ver
+    wUs(data, o,  0);  o+=2;    // gflip
+    wUs(data, o,  obj.cpr?8:0);  o+=2;	// cmpr
+
+    wUi(data, o,  0);  o+=4;	// time
+    wUi(data, o, obj.crc);  o+=4;	// crc32
+    wUi(data, o, file.length);  o+=4;	// csize
+    wUi(data, o, obj.usize);  o+=4;	// usize
+
+    wUs(data, o, UZIP.bin.sizeUTF8(p));  o+=2;	// nlen
+    wUs(data, o, 0);  o+=2;	// elen
+
+    if(t==1) {
+        o += 2;  // comment length
+        o += 2;  // disk number
+        o += 6;  // attributes
+        wUi(data, o, roff);  o+=4;	// usize
+    }
+    let nlen = UZIP.bin.writeUTF8(data, o, p);  o+= nlen;
+    if(t==0) {  data.set(file, o);  o += file.length;  }
+    return o;
+}
+UZIP.crc = {
+    table : ( function() {
+        let tab = new Uint32Array(256);
+        for (let n=0; n<256; n++) {
+            let c = n;
+            for (let k=0; k<8; k++) {
+                if (c & 1)  c = 0xedb88320 ^ (c >>> 1);
+                else        c = c >>> 1;
+            }
+            tab[n] = c;  }
+        return tab;  })(),
+    update : function(c, buf, off, len) {
+        for (let i=0; i<len; i++)  c = UZIP.crc.table[(c ^ buf[off+i]) & 0xff] ^ (c >>> 8);
+        return c;
+    },
+    crc : function(b,o,l)  {  return UZIP.crc.update(0xffffffff,b,o,l) ^ 0xffffffff;  }
+}
+UZIP.adler = function(data,o,len) {
+    let a = 1, b = 0;
+    let off = o, end=o+len;
+    while(off<end) {
+        let eend = Math.min(off+5552, end);
+        while(off<eend) {
+            a += data[off++];
+            b += a;
+        }
+        a=a%65521;
+        b=b%65521;
+    }
+    return (b << 16) | a;
+}
+
+UZIP.bin = {
+    readUshort : function(buff,p)  {  return (buff[p]) | (buff[p+1]<<8);  },
+    writeUshort: function(buff,p,n){  buff[p] = (n)&255;  buff[p+1] = (n>>8)&255;  },
+    readUint   : function(buff,p)  {  return (buff[p+3]*(256*256*256)) + ((buff[p+2]<<16) | (buff[p+1]<< 8) | buff[p]);  },
+    writeUint  : function(buff,p,n){  buff[p]=n&255;  buff[p+1]=(n>>8)&255;  buff[p+2]=(n>>16)&255;  buff[p+3]=(n>>24)&255;  },
+    readASCII  : function(buff,p,l){  let s = "";  for(let i=0; i<l; i++) s += String.fromCharCode(buff[p+i]);  return s;    },
+    writeASCII : function(data,p,s){  for(let i=0; i<s.length; i++) data[p+i] = s.charCodeAt(i);  },
+    pad : function(n) { return n.length < 2 ? "0" + n : n; },
+    readUTF8 : function(buff, p, l) {
+        let s = "", ns;
+        for(let i=0; i<l; i++) s += "%" + UZIP.bin.pad(buff[p+i].toString(16));
+        try {  ns = decodeURIComponent(s); }
+        catch(e) {  return UZIP.bin.readASCII(buff, p, l);  }
+        return  ns;
+    },
+    writeUTF8 : function(buff, p, str) {
+        let strl = str.length, i=0;
+        for(let ci=0; ci<strl; ci++)
+        {
+            let code = str.charCodeAt(ci);
+            if     ((code&(0xffffffff-(1<< 7)+1))==0) {  buff[p+i] = (     code     );  i++;  }
+            else if((code&(0xffffffff-(1<<11)+1))==0) {  buff[p+i] = (192|(code>> 6));  buff[p+i+1] = (128|((code>> 0)&63));  i+=2;  }
+            else if((code&(0xffffffff-(1<<16)+1))==0) {  buff[p+i] = (224|(code>>12));  buff[p+i+1] = (128|((code>> 6)&63));  buff[p+i+2] = (128|((code>>0)&63));  i+=3;  }
+            else if((code&(0xffffffff-(1<<21)+1))==0) {  buff[p+i] = (240|(code>>18));  buff[p+i+1] = (128|((code>>12)&63));  buff[p+i+2] = (128|((code>>6)&63));  buff[p+i+3] = (128|((code>>0)&63)); i+=4;  }
+            else throw "e";
+        }
+        return i;
+    },
+    sizeUTF8 : function(str) {
+        let strl = str.length, i=0;
+        for(let ci=0; ci<strl; ci++)
+        {
+            let code = str.charCodeAt(ci);
+            if     ((code&(0xffffffff-(1<< 7)+1))==0) {  i++ ;  }
+            else if((code&(0xffffffff-(1<<11)+1))==0) {  i+=2;  }
+            else if((code&(0xffffffff-(1<<16)+1))==0) {  i+=3;  }
+            else if((code&(0xffffffff-(1<<21)+1))==0) {  i+=4;  }
+            else throw "e";
+        }
+        return i;
+    }
+}
+UZIP.F = {};
+
+UZIP.F.deflateRaw = function(data, out, opos, lvl) {
+    let opts = [
+        /*
+             ush good_length; /* reduce lazy search above this match length
+             ush max_lazy;    /* do not perform lazy search above this match length
+             ush nice_length; /* quit search above this match length
+        */
+        /*      good lazy nice chain */
+        /* 0 */ [ 0,   0,   0,    0,0],  /* store only */
+        /* 1 */ [ 4,   4,   8,    4,0], /* max speed, no lazy matches */
+        /* 2 */ [ 4,   5,  16,    8,0],
+        /* 3 */ [ 4,   6,  16,   16,0],
+
+        /* 4 */ [ 4,  10,  16,   32,0],  /* lazy matches */
+        /* 5 */ [ 8,  16,  32,   32,0],
+        /* 6 */ [ 8,  16, 128,  128,0],
+        /* 7 */ [ 8,  32, 128,  256,0],
+        /* 8 */ [32, 128, 258, 1024,1],
+        /* 9 */ [32, 258, 258, 4096,1]]; /* max compression */
+
+    let opt = opts[lvl];
+
+
+    let U = UZIP.F.U, goodIndex = UZIP.F._goodIndex, hash = UZIP.F._hash, putsE = UZIP.F._putsE;
+    let i = 0, pos = opos<<3, cvrd = 0, dlen = data.length;
+
+    if(lvl==0) {
+        while(i<dlen) {   let len = Math.min(0xffff, dlen-i);
+            putsE(out, pos, (i+len==dlen ? 1 : 0));  pos = UZIP.F._copyExact(data, i, len, out, pos+8);  i += len;  }
+        return pos>>>3;
+    }
+
+    let lits = U.lits, strt=U.strt, prev=U.prev, li=0, lc=0, bs=0, ebits=0, c=0, nc=0;  // last_item, literal_count, block_start
+    if(dlen>2) {  nc=UZIP.F._hash(data,0);  strt[nc]=0;  }
+    let nmch=0,nmci=0;
+
+    for(i=0; i<dlen; i++)  {
+        c = nc;
+        //*
+        if(i+1<dlen-2) {
+            nc = UZIP.F._hash(data, i+1);
+            let ii = ((i+1)&0x7fff);
+            prev[ii]=strt[nc];
+            strt[nc]=ii;
+        } //*/
+        if(cvrd<=i) {
+            if((li>14000 || lc>26697) && (dlen-i)>100) {
+                if(cvrd<i) {  lits[li]=i-cvrd;  li+=2;  cvrd=i;  }
+                pos = UZIP.F._writeBlock(((i==dlen-1) || (cvrd==dlen))?1:0, lits, li, ebits, data,bs,i-bs, out, pos);  li=lc=ebits=0;  bs=i;
+            }
+
+            let mch = 0;
+            //if(nmci==i) mch= nmch;  else
+            if(i<dlen-2) mch = UZIP.F._bestMatch(data, i, prev, c, Math.min(opt[2],dlen-i), opt[3]);
+            /*
+            if(mch!=0 && opt[4]==1 && (mch>>>16)<opt[1] && i+1<dlen-2) {
+                nmch = UZIP.F._bestMatch(data, i+1, prev, nc, opt[2], opt[3]);  nmci=i+1;
+                //let mch2 = UZIP.F._bestMatch(data, i+2, prev, nnc);  //nmci=i+1;
+                if((nmch>>>16)>(mch>>>16)) mch=0;
+            }//*/
+            let len = mch>>>16, dst = mch&0xffff;  //if(i-dst<0) throw "e";
+            if(mch!=0) {
+                let len = mch>>>16, dst = mch&0xffff;  //if(i-dst<0) throw "e";
+                let lgi = goodIndex(len, U.of0);  U.lhst[257+lgi]++;
+                let dgi = goodIndex(dst, U.df0);  U.dhst[    dgi]++;  ebits += U.exb[lgi] + U.dxb[dgi];
+                lits[li] = (len<<23)|(i-cvrd);  lits[li+1] = (dst<<16)|(lgi<<8)|dgi;  li+=2;
+                cvrd = i + len;
+            }
+            else {	U.lhst[data[i]]++;  }
+            lc++;
+        }
+    }
+    if(bs!=i || data.length==0) {
+        if(cvrd<i) {  lits[li]=i-cvrd;  li+=2;  cvrd=i;  }
+        pos = UZIP.F._writeBlock(1, lits, li, ebits, data,bs,i-bs, out, pos);  li=0;  lc=0;  li=lc=ebits=0;  bs=i;
+    }
+    while((pos&7)!=0) pos++;
+    return pos>>>3;
+}
+UZIP.F._bestMatch = function(data, i, prev, c, nice, chain) {
+    let ci = (i&0x7fff), pi=prev[ci];
+    //console.log("----", i);
+    let dif = ((ci-pi + (1<<15)) & 0x7fff);  if(pi==ci || c!=UZIP.F._hash(data,i-dif)) return 0;
+    let tl=0, td=0;  // top length, top distance
+    let dlim = Math.min(0x7fff, i);
+    while(dif<=dlim && --chain!=0 && pi!=ci /*&& c==UZIP.F._hash(data,i-dif)*/) {
+        if(tl==0 || (data[i+tl]==data[i+tl-dif])) {
+            let cl = UZIP.F._howLong(data, i, dif);
+            if(cl>tl) {
+                tl=cl;  td=dif;  if(tl>=nice) break;    //*
+                if(dif+2<cl) cl = dif+2;
+                let maxd = 0; // pi does not point to the start of the word
+                for(let j=0; j<cl-2; j++) {
+                    let ei =  (i-dif+j+ (1<<15)) & 0x7fff;
+                    let li = prev[ei];
+                    let curd = (ei-li + (1<<15)) & 0x7fff;
+                    if(curd>maxd) {  maxd=curd;  pi = ei; }
+                }  //*/
+            }
+        }
+
+        ci=pi;  pi = prev[ci];
+        dif += ((ci-pi + (1<<15)) & 0x7fff);
+    }
+    return (tl<<16)|td;
+}
+UZIP.F._howLong = function(data, i, dif) {
+    if(data[i]!=data[i-dif] || data[i+1]!=data[i+1-dif] || data[i+2]!=data[i+2-dif]) return 0;
+    let oi=i, l = Math.min(data.length, i+258);  i+=3;
+    //while(i+4<l && data[i]==data[i-dif] && data[i+1]==data[i+1-dif] && data[i+2]==data[i+2-dif] && data[i+3]==data[i+3-dif]) i+=4;
+    while(i<l && data[i]==data[i-dif]) i++;
+    return i-oi;
+}
+UZIP.F._hash = function(data, i) {
+    return (((data[i]<<8) | data[i+1])+(data[i+2]<<4))&0xffff;
+    //let hash_shift = 0, hash_mask = 255;
+    //let h = data[i+1] % 251;
+    //h = (((h << 8) + data[i+2]) % 251);
+    //h = (((h << 8) + data[i+2]) % 251);
+    //h = ((h<<hash_shift) ^ (c) ) & hash_mask;
+    //return h | (data[i]<<8);
+    //return (data[i] | (data[i+1]<<8));
+}
+//UZIP.___toth = 0;
+UZIP.saved = 0;
+UZIP.F._writeBlock = function(BFINAL, lits, li, ebits, data,o0,l0, out, pos) {
+    let U = UZIP.F.U, putsF = UZIP.F._putsF, putsE = UZIP.F._putsE;
+
+    //*
+    let T, ML, MD, MH, numl, numd, numh, lset, dset;  U.lhst[256]++;
+    T = UZIP.F.getTrees(); ML=T[0]; MD=T[1]; MH=T[2]; numl=T[3]; numd=T[4]; numh=T[5]; lset=T[6]; dset=T[7];
+
+    let cstSize = (((pos+3)&7)==0 ? 0 : 8-((pos+3)&7)) + 32 + (l0<<3);
+    let fxdSize = ebits + UZIP.F.contSize(U.fltree, U.lhst) + UZIP.F.contSize(U.fdtree, U.dhst);
+    let dynSize = ebits + UZIP.F.contSize(U.ltree , U.lhst) + UZIP.F.contSize(U.dtree , U.dhst);
+    dynSize    += 14 + 3*numh + UZIP.F.contSize(U.itree, U.ihst) + (U.ihst[16]*2 + U.ihst[17]*3 + U.ihst[18]*7);
+
+    for(let j=0; j<286; j++) U.lhst[j]=0;   for(let j=0; j<30; j++) U.dhst[j]=0;   for(let j=0; j<19; j++) U.ihst[j]=0;
+    //*/
+    let BTYPE = (cstSize<fxdSize && cstSize<dynSize) ? 0 : ( fxdSize<dynSize ? 1 : 2 );
+    putsF(out, pos, BFINAL);  putsF(out, pos+1, BTYPE);  pos+=3;
+
+    let opos = pos;
+    if(BTYPE==0) {
+        while((pos&7)!=0) pos++;
+        pos = UZIP.F._copyExact(data, o0, l0, out, pos);
+    }
+    else {
+        let ltree, dtree;
+        if(BTYPE==1) {  ltree=U.fltree;  dtree=U.fdtree;  }
+        if(BTYPE==2) {
+            UZIP.F.makeCodes(U.ltree, ML);  UZIP.F.revCodes(U.ltree, ML);
+            UZIP.F.makeCodes(U.dtree, MD);  UZIP.F.revCodes(U.dtree, MD);
+            UZIP.F.makeCodes(U.itree, MH);  UZIP.F.revCodes(U.itree, MH);
+
+            ltree = U.ltree;  dtree = U.dtree;
+
+            putsE(out, pos,numl-257);  pos+=5;  // 286
+            putsE(out, pos,numd-  1);  pos+=5;  // 30
+            putsE(out, pos,numh-  4);  pos+=4;  // 19
+
+            for(let i=0; i<numh; i++) putsE(out, pos+i*3, U.itree[(U.ordr[i]<<1)+1]);   pos+=3* numh;
+            pos = UZIP.F._codeTiny(lset, U.itree, out, pos);
+            pos = UZIP.F._codeTiny(dset, U.itree, out, pos);
+        }
+
+        let off=o0;
+        for(let si=0; si<li; si+=2) {
+            let qb=lits[si], len=(qb>>>23), end = off+(qb&((1<<23)-1));
+            while(off<end) pos = UZIP.F._writeLit(data[off++], ltree, out, pos);
+
+            if(len!=0) {
+                let qc = lits[si+1], dst=(qc>>16), lgi=(qc>>8)&255, dgi=(qc&255);
+                pos = UZIP.F._writeLit(257+lgi, ltree, out, pos);
+                putsE(out, pos, len-U.of0[lgi]);  pos+=U.exb[lgi];
+
+                pos = UZIP.F._writeLit(dgi, dtree, out, pos);
+                putsF(out, pos, dst-U.df0[dgi]);  pos+=U.dxb[dgi];  off+=len;
+            }
+        }
+        pos = UZIP.F._writeLit(256, ltree, out, pos);
+    }
+    //console.log(pos-opos, fxdSize, dynSize, cstSize);
+    return pos;
+}
+UZIP.F._copyExact = function(data,off,len,out,pos) {
+    let p8 = (pos>>>3);
+    out[p8]=(len);  out[p8+1]=(len>>>8);  out[p8+2]=255-out[p8];  out[p8+3]=255-out[p8+1];  p8+=4;
+    out.set(new Uint8Array(data.buffer, off, len), p8);
+    //for(let i=0; i<len; i++) out[p8+i]=data[off+i];
+    return pos + ((len+4)<<3);
+}
+/*
+	Interesting facts:
+	- decompressed block can have bytes, which do not occur in a Huffman tree (copied from the previous block by reference)
+*/
+
+UZIP.F.getTrees = function() {
+    let U = UZIP.F.U;
+    let ML = UZIP.F._hufTree(U.lhst, U.ltree, 15);
+    let MD = UZIP.F._hufTree(U.dhst, U.dtree, 15);
+    let lset = [], numl = UZIP.F._lenCodes(U.ltree, lset);
+    let dset = [], numd = UZIP.F._lenCodes(U.dtree, dset);
+    for(let i=0; i<lset.length; i+=2) U.ihst[lset[i]]++;
+    for(let i=0; i<dset.length; i+=2) U.ihst[dset[i]]++;
+    let MH = UZIP.F._hufTree(U.ihst, U.itree,  7);
+    let numh = 19;  while(numh>4 && U.itree[(U.ordr[numh-1]<<1)+1]==0) numh--;
+    return [ML, MD, MH, numl, numd, numh, lset, dset];
+}
+UZIP.F.getSecond= function(a) {  let b=[];  for(let i=0; i<a.length; i+=2) b.push  (a[i+1]);  return b;  }
+UZIP.F.nonZero  = function(a) {  let b= "";  for(let i=0; i<a.length; i+=2) if(a[i+1]!=0)b+=(i>>1)+",";  return b;  }
+UZIP.F.contSize = function(tree, hst) {  let s=0;  for(let i=0; i<hst.length; i++) s+= hst[i]*tree[(i<<1)+1];  return s;  }
+UZIP.F._codeTiny = function(set, tree, out, pos) {
+    for(let i=0; i<set.length; i+=2) {
+        let l = set[i], rst = set[i+1];  //console.log(l, pos, tree[(l<<1)+1]);
+        pos = UZIP.F._writeLit(l, tree, out, pos);
+        let rsl = l==16 ? 2 : (l==17 ? 3 : 7);
+        if(l>15) {  UZIP.F._putsE(out, pos, rst, rsl);  pos+=rsl;  }
+    }
+    return pos;
+}
+UZIP.F._lenCodes = function(tree, set) {
+    let len=tree.length;  while(len!=2 && tree[len-1]==0) len-=2;  // when no distances, keep one code with length 0
+    for(let i=0; i<len; i+=2) {
+        let l = tree[i+1], nxt = (i+3<len ? tree[i+3]:-1),  nnxt = (i+5<len ? tree[i+5]:-1),  prv = (i==0 ? -1 : tree[i-1]);
+        if(l==0 && nxt==l && nnxt==l) {
+            let lz = i+5;
+            while(lz+2<len && tree[lz+2]==l) lz+=2;
+            let zc = Math.min((lz+1-i)>>>1, 138);
+            if(zc<11) set.push(17, zc-3);
+            else set.push(18, zc-11);
+            i += zc*2-2;
+        }
+        else if(l==prv && nxt==l && nnxt==l) {
+            let lz = i+5;
+            while(lz+2<len && tree[lz+2]==l) lz+=2;
+            let zc = Math.min((lz+1-i)>>>1, 6);
+            set.push(16, zc-3);
+            i += zc*2-2;
+        }
+        else set.push(l, 0);
+    }
+    return len>>>1;
+}
+UZIP.F._hufTree   = function(hst, tree, MAXL) {
+    let list=[], hl = hst.length, tl=tree.length, i=0;
+    for(i=0; i<tl; i+=2) {  tree[i]=0;  tree[i+1]=0;  }
+    for(i=0; i<hl; i++) if(hst[i]!=0) list.push({lit:i, f:hst[i]});
+    let end = list.length, l2=list.slice(0);
+    if(end==0) return 0;  // empty histogram (usually for dist)
+    if(end==1) {  let lit=list[0].lit, l2=lit==0?1:0;  tree[(lit<<1)+1]=1;  tree[(l2<<1)+1]=1;  return 1;  }
+    list.sort(function(a,b){return a.f-b.f;});
+    let a=list[0], b=list[1], i0=0, i1=1, i2=2;  list[0]={lit:-1,f:a.f+b.f,l:a,r:b,d:0};
+    while(i1!=end-1) {
+        if(i0!=i1 && (i2==end || list[i0].f<list[i2].f)) {  a=list[i0++];  }  else {  a=list[i2++];  }
+        if(i0!=i1 && (i2==end || list[i0].f<list[i2].f)) {  b=list[i0++];  }  else {  b=list[i2++];  }
+        list[i1++]={lit:-1,f:a.f+b.f, l:a,r:b};
+    }
+    let maxl = UZIP.F.setDepth(list[i1-1], 0);
+    if(maxl>MAXL) {  UZIP.F.restrictDepth(l2, MAXL, maxl);  maxl = MAXL;  }
+    for(i=0; i<end; i++) tree[(l2[i].lit<<1)+1]=l2[i].d;
+    return maxl;
+}
+
+UZIP.F.setDepth  = function(t, d) {
+    if(t.lit!=-1) {  t.d=d;  return d;  }
+    return Math.max( UZIP.F.setDepth(t.l, d+1),  UZIP.F.setDepth(t.r, d+1) );
+}
+
+UZIP.F.restrictDepth = function(dps, MD, maxl) {
+    let i=0, bCost=1<<(maxl-MD), dbt=0;
+    dps.sort(function(a,b){return b.d==a.d ? a.f-b.f : b.d-a.d;});
+
+    for(i=0; i<dps.length; i++) if(dps[i].d>MD) {  let od=dps[i].d;  dps[i].d=MD;  dbt+=bCost-(1<<(maxl-od));  }  else break;
+    dbt = dbt>>>(maxl-MD);
+    while(dbt>0) {  let od=dps[i].d;  if(od<MD) {  dps[i].d++;  dbt-=(1<<(MD-od-1));  }  else  i++;  }
+    for(; i>=0; i--) if(dps[i].d==MD && dbt<0) {  dps[i].d--;  dbt++;  }  if(dbt!=0) console.log("debt left");
+}
+
+UZIP.F._goodIndex = function(v, arr) {
+    let i=0;  if(arr[i|16]<=v) i|=16;  if(arr[i|8]<=v) i|=8;  if(arr[i|4]<=v) i|=4;  if(arr[i|2]<=v) i|=2;  if(arr[i|1]<=v) i|=1;  return i;
+}
+UZIP.F._writeLit = function(ch, ltree, out, pos) {
+    UZIP.F._putsF(out, pos, ltree[ch<<1]);
+    return pos+ltree[(ch<<1)+1];
+}
+UZIP.F.inflate = function(data, buf) {
+    let u8=Uint8Array;
+    if(data[0]==3 && data[1]==0) return (buf ? buf : new u8(0));
+    let F=UZIP.F, bitsF = F._bitsF, bitsE = F._bitsE, decodeTiny = F._decodeTiny, makeCodes = F.makeCodes, codes2map=F.codes2map, get17 = F._get17;
+    let U = F.U;
+
+    let noBuf = (buf==null);
+    if(noBuf) buf = new u8((data.length>>>2)<<3);
+
+    let BFINAL=0, BTYPE=0, HLIT=0, HDIST=0, HCLEN=0, ML=0, MD=0;
+    let off = 0, pos = 0;
+    let lmap, dmap;
+
+    while(BFINAL==0) {
+        BFINAL = bitsF(data, pos  , 1);
+        BTYPE  = bitsF(data, pos+1, 2);  pos+=3;
+        //console.log(BFINAL, BTYPE);
+
+        if(BTYPE==0) {
+            if((pos&7)!=0) pos+=8-(pos&7);
+            let p8 = (pos>>>3)+4, len = data[p8-4]|(data[p8-3]<<8);  //console.log(len);//bitsF(data, pos, 16),
+            if(noBuf) buf=UZIP.F._check(buf, off+len);
+            buf.set(new u8(data.buffer, data.byteOffset+p8, len), off);
+            //for(let i=0; i<len; i++) buf[off+i] = data[p8+i];
+            //for(let i=0; i<len; i++) if(buf[off+i] != data[p8+i]) throw "e";
+            pos = ((p8+len)<<3);  off+=len;  continue;
+        }
+        if(noBuf) buf=UZIP.F._check(buf, off+(1<<17));  // really not enough in many cases (but PNG and ZIP provide buffer in advance)
+        if(BTYPE==1) {  lmap = U.flmap;  dmap = U.fdmap;  ML = (1<<9)-1;  MD = (1<<5)-1;   }
+        if(BTYPE==2) {
+            HLIT  = bitsE(data, pos   , 5)+257;
+            HDIST = bitsE(data, pos+ 5, 5)+  1;
+            HCLEN = bitsE(data, pos+10, 4)+  4;  pos+=14;
+
+            let ppos = pos;
+            for(let i=0; i<38; i+=2) {  U.itree[i]=0;  U.itree[i+1]=0;  }
+            let tl = 1;
+            for(let i=0; i<HCLEN; i++) {  let l=bitsE(data, pos+i*3, 3);  U.itree[(U.ordr[i]<<1)+1] = l;  if(l>tl)tl=l;  }     pos+=3*HCLEN;  //console.log(itree);
+            makeCodes(U.itree, tl);
+            codes2map(U.itree, tl, U.imap);
+
+            lmap = U.lmap;  dmap = U.dmap;
+
+            pos = decodeTiny(U.imap, (1<<tl)-1, HLIT+HDIST, data, pos, U.ttree);
+            let mx0 = F._copyOut(U.ttree,    0, HLIT , U.ltree);  ML = (1<<mx0)-1;
+            let mx1 = F._copyOut(U.ttree, HLIT, HDIST, U.dtree);  MD = (1<<mx1)-1;
+
+            //let ml = decodeTiny(U.imap, (1<<tl)-1, HLIT , data, pos, U.ltree); ML = (1<<(ml>>>24))-1;  pos+=(ml&0xffffff);
+            makeCodes(U.ltree, mx0);
+            codes2map(U.ltree, mx0, lmap);
+
+            //let md = decodeTiny(U.imap, (1<<tl)-1, HDIST, data, pos, U.dtree); MD = (1<<(md>>>24))-1;  pos+=(md&0xffffff);
+            makeCodes(U.dtree, mx1);
+            codes2map(U.dtree, mx1, dmap);
+        }
+        //let ooff=off, opos=pos;
+        while(true) {
+            let code = lmap[get17(data, pos) & ML];  pos += code&15;
+            let lit = code>>>4;  //U.lhst[lit]++;
+            if((lit>>>8)==0) {  buf[off++] = lit;  }
+            else if(lit==256) {  break;  }
+            else {
+                let end = off+lit-254;
+                if(lit>264) { let ebs = U.ldef[lit-257];  end = off + (ebs>>>3) + bitsE(data, pos, ebs&7);  pos += ebs&7;  }
+                //UZIP.F.dst[end-off]++;
+
+                let dcode = dmap[get17(data, pos) & MD];  pos += dcode&15;
+                let dlit = dcode>>>4;
+                let dbs = U.ddef[dlit], dst = (dbs>>>4) + bitsF(data, pos, dbs&15);  pos += dbs&15;
+
+                //let o0 = off-dst, stp = Math.min(end-off, dst);
+                //if(stp>20) while(off<end) {  buf.copyWithin(off, o0, o0+stp);  off+=stp;  }  else
+                //if(end-dst<=off) buf.copyWithin(off, off-dst, end-dst);  else
+                //if(dst==1) buf.fill(buf[off-1], off, end);  else
+                if(noBuf) buf=UZIP.F._check(buf, off+(1<<17));
+                while(off<end) {  buf[off]=buf[off++-dst];    buf[off]=buf[off++-dst];  buf[off]=buf[off++-dst];  buf[off]=buf[off++-dst];  }
+                off=end;
+                //while(off!=end) {  buf[off]=buf[off++-dst];  }
+            }
+        }
+        //console.log(off-ooff, (pos-opos)>>>3);
+    }
+    //console.log(UZIP.F.dst);
+    //console.log(tlen, dlen, off-tlen+tcnt);
+    return buf.length==off ? buf : buf.slice(0,off);
+}
+UZIP.F._check=function(buf, len) {
+    let bl=buf.length;  if(len<=bl) return buf;
+    let nbuf = new Uint8Array(Math.max(bl<<1,len));  nbuf.set(buf,0);
+    //for(let i=0; i<bl; i+=4) {  nbuf[i]=buf[i];  nbuf[i+1]=buf[i+1];  nbuf[i+2]=buf[i+2];  nbuf[i+3]=buf[i+3];  }
+    return nbuf;
+}
+
+UZIP.F._decodeTiny = function(lmap, LL, len, data, pos, tree) {
+    let bitsE = UZIP.F._bitsE, get17 = UZIP.F._get17;
+    let i = 0;
+    while(i<len) {
+        let code = lmap[get17(data, pos)&LL];  pos+=code&15;
+        let lit = code>>>4;
+        if(lit<=15) {  tree[i]=lit;  i++;  }
+        else {
+            let ll = 0, n = 0;
+            if(lit==16) {
+                n = (3  + bitsE(data, pos, 2));  pos += 2;  ll = tree[i-1];
+            }
+            else if(lit==17) {
+                n = (3  + bitsE(data, pos, 3));  pos += 3;
+            }
+            else if(lit==18) {
+                n = (11 + bitsE(data, pos, 7));  pos += 7;
+            }
+            let ni = i+n;
+            while(i<ni) {  tree[i]=ll;  i++; }
+        }
+    }
+    return pos;
+}
+UZIP.F._copyOut = function(src, off, len, tree) {
+    let mx=0, i=0, tl=tree.length>>>1;
+    while(i<len) {  let v=src[i+off];  tree[(i<<1)]=0;  tree[(i<<1)+1]=v;  if(v>mx)mx=v;  i++;  }
+    while(i<tl ) {  tree[(i<<1)]=0;  tree[(i<<1)+1]=0;  i++;  }
+    return mx;
+}
+
+UZIP.F.makeCodes = function(tree, MAX_BITS) {  // code, length
+    let U = UZIP.F.U;
+    let max_code = tree.length;
+    let code, bits, n, i, len;
+
+    let bl_count = U.bl_count;  for(let i=0; i<=MAX_BITS; i++) bl_count[i]=0;
+    for(i=1; i<max_code; i+=2) bl_count[tree[i]]++;
+
+    let next_code = U.next_code;	// smallest code for each length
+
+    code = 0;
+    bl_count[0] = 0;
+    for (bits = 1; bits <= MAX_BITS; bits++) {
+        code = (code + bl_count[bits-1]) << 1;
+        next_code[bits] = code;
+    }
+
+    for (n = 0; n < max_code; n+=2) {
+        len = tree[n+1];
+        if (len != 0) {
+            tree[n] = next_code[len];
+            next_code[len]++;
+        }
+    }
+}
+UZIP.F.codes2map = function(tree, MAX_BITS, map) {
+    let max_code = tree.length;
+    let U=UZIP.F.U, r15 = U.rev15;
+    for(let i=0; i<max_code; i+=2) if(tree[i+1]!=0)  {
+        let lit = i>>1;
+        let cl = tree[i+1], val = (lit<<4)|cl; // :  (0x8000 | (U.of0[lit-257]<<7) | (U.exb[lit-257]<<4) | cl);
+        let rest = (MAX_BITS-cl), i0 = tree[i]<<rest, i1 = i0 + (1<<rest);
+        //tree[i]=r15[i0]>>>(15-MAX_BITS);
+        while(i0!=i1) {
+            let p0 = r15[i0]>>>(15-MAX_BITS);
+            map[p0]=val;  i0++;
+        }
+    }
+}
+UZIP.F.revCodes = function(tree, MAX_BITS) {
+    let r15 = UZIP.F.U.rev15, imb = 15-MAX_BITS;
+    for(let i=0; i<tree.length; i+=2) {  let i0 = (tree[i]<<(MAX_BITS-tree[i+1]));  tree[i] = r15[i0]>>>imb;  }
+}
+
+// used only in deflate
+UZIP.F._putsE= function(dt, pos, val   ) {  val = val<<(pos&7);  let o=(pos>>>3);  dt[o]|=val;  dt[o+1]|=(val>>>8);                        }
+UZIP.F._putsF= function(dt, pos, val   ) {  val = val<<(pos&7);  let o=(pos>>>3);  dt[o]|=val;  dt[o+1]|=(val>>>8);  dt[o+2]|=(val>>>16);  }
+
+UZIP.F._bitsE= function(dt, pos, length) {  return ((dt[pos>>>3] | (dt[(pos>>>3)+1]<<8)                        )>>>(pos&7))&((1<<length)-1);  }
+UZIP.F._bitsF= function(dt, pos, length) {  return ((dt[pos>>>3] | (dt[(pos>>>3)+1]<<8) | (dt[(pos>>>3)+2]<<16))>>>(pos&7))&((1<<length)-1);  }
+/*
+UZIP.F._get9 = function(dt, pos) {
+	return ((dt[pos>>>3] | (dt[(pos>>>3)+1]<<8))>>>(pos&7))&511;
+} */
+UZIP.F._get17= function(dt, pos) {	// return at least 17 meaningful bytes
+    return (dt[pos>>>3] | (dt[(pos>>>3)+1]<<8) | (dt[(pos>>>3)+2]<<16) )>>>(pos&7);
+}
+UZIP.F._get25= function(dt, pos) {	// return at least 17 meaningful bytes
+    return (dt[pos>>>3] | (dt[(pos>>>3)+1]<<8) | (dt[(pos>>>3)+2]<<16) | (dt[(pos>>>3)+3]<<24) )>>>(pos&7);
+}
+UZIP.F.U = function(){
+    let u16=Uint16Array, u32=Uint32Array;
+    return {
+        next_code : new u16(16),
+        bl_count  : new u16(16),
+        ordr : [ 16, 17, 18, 0, 8, 7, 9, 6, 10, 5, 11, 4, 12, 3, 13, 2, 14, 1, 15 ],
+        of0  : [3,4,5,6,7,8,9,10,11,13,15,17,19,23,27,31,35,43,51,59,67,83,99,115,131,163,195,227,258,999,999,999],
+        exb  : [0,0,0,0,0,0,0, 0, 1, 1, 1, 1, 2, 2, 2, 2, 3, 3, 3, 3, 4, 4, 4,  4,  5,  5,  5,  5,  0,  0,  0,  0],
+        ldef : new u16(32),
+        df0  : [1,2,3,4,5,7,9,13,17,25,33,49,65,97,129,193,257,385,513,769,1025,1537,2049,3073,4097,6145,8193,12289,16385,24577, 65535, 65535],
+        dxb  : [0,0,0,0,1,1,2, 2, 3, 3, 4, 4, 5, 5,  6,  6,  7,  7,  8,  8,   9,   9,  10,  10,  11,  11,  12,   12,   13,   13,     0,     0],
+        ddef : new u32(32),
+        flmap: new u16(  512),  fltree: [],
+        fdmap: new u16(   32),  fdtree: [],
+        lmap : new u16(32768),  ltree : [],  ttree:[],
+        dmap : new u16(32768),  dtree : [],
+        imap : new u16(  512),  itree : [],
+        //rev9 : new u16(  512)
+        rev15: new u16(1<<15),
+        lhst : new u32(286), dhst : new u32( 30), ihst : new u32(19),
+        lits : new u32(15000),
+        strt : new u16(1<<16),
+        prev : new u16(1<<15)
+    };
+} ();
+
+(function(){
+    let U = UZIP.F.U;
+    let len = 1<<15;
+    for(let i=0; i<len; i++) {
+        let x = i;
+        x = (((x & 0xaaaaaaaa) >>> 1) | ((x & 0x55555555) << 1));
+        x = (((x & 0xcccccccc) >>> 2) | ((x & 0x33333333) << 2));
+        x = (((x & 0xf0f0f0f0) >>> 4) | ((x & 0x0f0f0f0f) << 4));
+        x = (((x & 0xff00ff00) >>> 8) | ((x & 0x00ff00ff) << 8));
+        U.rev15[i] = (((x >>> 16) | (x << 16)))>>>17;
+    }
+
+    function pushV(tgt, n, sv) {  while(n--!=0) tgt.push(0,sv);  }
+
+    for(let i=0; i<32; i++) {  U.ldef[i]=(U.of0[i]<<3)|U.exb[i];  U.ddef[i]=(U.df0[i]<<4)|U.dxb[i];  }
+
+    pushV(U.fltree, 144, 8);  pushV(U.fltree, 255-143, 9);  pushV(U.fltree, 279-255, 7);  pushV(U.fltree,287-279,8);
+    /*
+    let i = 0;
+    for(; i<=143; i++) U.fltree.push(0,8);
+    for(; i<=255; i++) U.fltree.push(0,9);
+    for(; i<=279; i++) U.fltree.push(0,7);
+    for(; i<=287; i++) U.fltree.push(0,8);
+    */
+    UZIP.F.makeCodes(U.fltree, 9);
+    UZIP.F.codes2map(U.fltree, 9, U.flmap);
+    UZIP.F.revCodes (U.fltree, 9)
+
+    pushV(U.fdtree,32,5);
+    //for(i=0;i<32; i++) U.fdtree.push(0,5);
+    UZIP.F.makeCodes(U.fdtree, 5);
+    UZIP.F.codes2map(U.fdtree, 5, U.fdmap);
+    UZIP.F.revCodes (U.fdtree, 5)
+
+    pushV(U.itree,19,0);  pushV(U.ltree,286,0);  pushV(U.dtree,30,0);  pushV(U.ttree,320,0);
+    /*
+    for(let i=0; i< 19; i++) U.itree.push(0,0);
+    for(let i=0; i<286; i++) U.ltree.push(0,0);
+    for(let i=0; i< 30; i++) U.dtree.push(0,0);
+    for(let i=0; i<320; i++) U.ttree.push(0,0);
+    */
+})();
+
+
+
+let started = false;
+let cloudFrontURL = "";
+let folderName = "";
+let lastRequest = {};//{tc:"00_00_00_00", path:"..."}
+let lastTimeCodeFound = null;//for statistics
+let msecAvg = [];//for statistics
+const delimiter = "_";
+let maxTimeCode = {};//don't pass this timecode
+let enabled = true;
+let isWorking = false;
+
+const HandleData = async (data) => {
+    const result = UZIP.parse(data);
+    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];//new Uint8Array(result[alphaKey].buffer);
+						transferableArray.push(result[alphaKey].buffer);
+					}
+                }
+            }
+            postMessage(metadata,transferableArray);
+        }
+    }
+}
+
+const Str2TimeCode = (str) => {
+    const list = str.split(delimiter);
+    const timecode = {h: parseInt(list[0]), m: parseInt(list[1]), s: parseInt(list[2]), f: parseInt(list[3])};
+    return timecode;
+}
+const TimeCode2Str = (timecode) => {
+    return ("0" + timecode.h).slice(-2) + delimiter + ("0" + timecode.m).slice(-2) + delimiter + ("0" + timecode.s).slice(-2) + delimiter + ("0" + timecode.f).slice(-2);
+}
+const AddSecondsToTimeCode = (timecode, seconds) => {
+    let ret = {...timecode};//cloning araay
+	ret.s += seconds;
+    if (ret.s >= 60) {
+        ret.s = 0;
+        ret.m++;
+        if (ret.m >= 60) {
+            ret.m = 0;
+            ret.h++;
+        }
+    }
+    return ret;
+}
+const GetNextTimeCode_TC = (tc, seconds = 0) => {
+    let timecode = Str2TimeCode(tc);
+    if (seconds) timecode = AddSecondsToTimeCode(timecode, seconds);
+	return timecode;
+}
+const GetNextTimeCode = (tc, seconds = 0) => {
+    let timecode = GetNextTimeCode_TC(tc,seconds);
+    return TimeCode2Str(timecode);
+}
+
+
+const IsTCBigger = (tc1, tc2) => {
+	//return true iif tc1 > tc2
+	if (tc1.h > tc2.h) return true;
+	else if (tc1.h < tc2.h) return false;
+	else if (tc1.m > tc2.m) return true;
+	else if (tc1.m < tc2.m) return false;
+	else if (tc1.s > tc2.s) return true;
+	else if (tc1.s < tc2.s) return false;
+	else if (tc1.f > tc2.f) return true;
+	else return false;
+}
+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)) {
+		//console.log("the current TC ", GetNextTimeCode_TC(lastRequest.tc, seconds), " is bigger than the max time code: ", maxTimeCode);//@oror
+		setTimeout(() => {
+			TryNextFrame(seconds);
+		}, 100);
+	}
+    else 
+	{
+		//console.log("We're good to take the next timecode");//@oror
+		setTimeout(() => {
+			lastRequest.tc = GetNextTimeCode(lastRequest.tc, seconds);
+			//console.log("next time code: ", lastRequest.tc);//@oror
+			GetMetaData();
+			}, 0);
+	}
+}
+
+const AvgMetaDataMsec = () => {
+    let sum = 0;
+    for (let i = 0; i < msecAvg.length; i++) {
+        sum += msecAvg[i];
+    }
+    return sum / msecAvg.length;
+};
+const GetMetaData = async () => {
+    isWorking = true;
+	const item = lastRequest;
+    const url = \`\${item.path}/\${item.tc}.zip\`;
+    try {
+        const t1 = performance.now();
+        const res = await fetch(url);
+        if (res.status >= 400) {
+            //console.log(\`\${item.tc} time code not found, url is \${url}\`);
+			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);//try the same time  code again
+			}
+			else {
+				console.error("Didn't find timecode ", item.tc, ", now for " + secSinceLastTimeDate.toFixed(2) + " seconds");
+				TryNextFrame(0);//try the same time  code again
+			}
+			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;
+
+        //console.log(\`\${item.tc} time code found, (\${msecSinceLastTimeDate} msec from last time, avg: \${AvgMetaDataMsec()})\`);
+
+        const data = await res.arrayBuffer();
+        await HandleData(data);
+        const t2 = performance.now();
+        //postMessage({time: \`Fetch and Decompress: \${t2 - t1} msec\`});
+    } catch (err) {
+        console.error(\`Error on url \${url}\`, err);
+    }
+	isWorking = false;
+    TryNextFrame(2);
+}
+
+addEventListener("message", (request) => {
+	if (!started && request.data.cloudFrontURL) {
+		started = true;
+		cloudFrontURL = request.data.cloudFrontURL;
+		folderName = request.data.folderName;
+		let tcReplaced = request.data.tc.replace(/:/g,"_");//replaceAll(":", "_")
+		lastRequest = {tc: tcReplaced, path: \`\${cloudFrontURL}/\${folderName}\`};//from the lastReqest object
+		let timeCode = Str2TimeCode(lastRequest.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);
+		console.log("Meta-data worker starting from this time-code: ", lastRequest.tc);//@oror
+		GetMetaData();
+	}
+	else {
+		let tcReplaced = request.data.tc.replace(/:/g,"_");
+		//console.log("metaDataDownloader new timecode = " + tcReplaced);
+		let timeCode = Str2TimeCode(tcReplaced);
+		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);
+}`;
+
+/*   
+ * Copyright 2021, GFXFundamentals.
+ * All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions are
+ * met:
+ *
+ *     * Redistributions of source code must retain the above copyright
+ * notice, this list of conditions and the following disclaimer.
+ *     * Redistributions in binary form must reproduce the above
+ * copyright notice, this list of conditions and the following disclaimer
+ * in the documentation and/or other materials provided with the
+ * distribution.
+ *     * Neither the name of GFXFundamentals. nor the names of his
+ * contributors may be used to endorse or promote products derived from
+ * this software without specific prior written permission.
+ *
+ * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+ * "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+ * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+ * A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+ * OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+ * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+ * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+ * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+ * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+ * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+
+let debug_lastFrameFromVideoCallback=-1;
+let debug_tc = "";
+
+/* global define */
+(function(root, factory) {  // eslint-disable-line
+  if (typeof define === 'function' && define.amd) {
+    // AMD. Register as an anonymous module.
+    define([], function() {
+      return factory.call(root);
+    });
+  } else {
+    // Browser globals
+    root.webglUtils = factory.call(root);
+  }
+}(this, function() {
+  "use strict";
+
+  const topWindow = this;
+
+  /** @module webgl-utils */
+
+  function isInIFrame(w) {
+    w = w || topWindow;
+    return w !== w.top;
+  }
+
+  if (!isInIFrame()) {
+    console.log("%c%s", 'color:blue;font-weight:bold;', 'for more about webgl-utils.js see:');  // eslint-disable-line
+    console.log("%c%s", 'color:blue;font-weight:bold;', 'http://webgl2fundamentals.org/webgl/lessons/webgl-boilerplate.html');  // eslint-disable-line
+  }
+
+  /**
+   * Wrapped logging function.
+   * @param {string} msg The message to log.
+   */
+  function error(msg) {
+    if (topWindow.console) {
+      if (topWindow.console.error) {
+        topWindow.console.error(msg);
+      } else if (topWindow.console.log) {
+        topWindow.console.log(msg);
+      }
+    }
+  }
+
+  const errorRE = /ERROR:\s*\d+:(\d+)/gi;
+  function addLineNumbersWithError(src, log = '') {
+    // Note: Error message formats are not defined by any spec so this may or may not work.
+    const matches = [...log.matchAll(errorRE)];
+    const lineNoToErrorMap = new Map(matches.map((m, ndx) => {
+      const lineNo = parseInt(m[1]);
+      const next = matches[ndx + 1];
+      const end = next ? next.index : log.length;
+      const msg = log.substring(m.index, end);
+      return [lineNo - 1, msg];
+    }));
+    return src.split('\n').map((line, lineNo) => {
+      const err = lineNoToErrorMap.get(lineNo);
+      return `${lineNo + 1}: ${line}${err ? `\n\n^^^ ${err}` : ''}`;
+    }).join('\n');
+  }
+
+
+  /**
+   * Error Callback
+   * @callback ErrorCallback
+   * @param {string} msg error message.
+   * @memberOf module:webgl-utils
+   */
+
+  /**
+   * Loads a shader.
+   * @param {WebGLRenderingContext} gl The WebGLRenderingContext to use.
+   * @param {string} shaderSource The shader source.
+   * @param {number} shaderType The type of shader.
+   * @param {module:webgl-utils.ErrorCallback} opt_errorCallback callback for errors.
+   * @return {WebGLShader} The created shader.
+   */
+  function loadShader(gl, shaderSource, shaderType, opt_errorCallback) {
+    const errFn = opt_errorCallback || error;
+    // Create the shader object
+    const shader = gl.createShader(shaderType);
+
+    // Load the shader source
+    gl.shaderSource(shader, shaderSource);
+
+    // Compile the shader
+    gl.compileShader(shader);
+
+    // Check the compile status
+    const compiled = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
+    if (!compiled) {
+      // Something went wrong during compilation; get the error
+      const lastError = gl.getShaderInfoLog(shader);
+      errFn(`Error compiling shader: ${lastError}\n${addLineNumbersWithError(shaderSource, lastError)}`);
+      gl.deleteShader(shader);
+      return null;
+    }
+
+    return shader;
+  }
+
+  /**
+   * Creates a program, attaches shaders, binds attrib locations, links the
+   * program and calls useProgram.
+   * @param {WebGLShader[]} shaders The shaders to attach
+   * @param {string[]} [opt_attribs] An array of attribs names. Locations will be assigned by index if not passed in
+   * @param {number[]} [opt_locations] The locations for the. A parallel array to opt_attribs letting you assign locations.
+   * @param {module:webgl-utils.ErrorCallback} opt_errorCallback callback for errors. By default it just prints an error to the console
+   *        on error. If you want something else pass an callback. It's passed an error message.
+   * @memberOf module:webgl-utils
+   */
+  function createProgram(
+      gl, shaders, opt_attribs, opt_locations, opt_errorCallback) {
+    const errFn = opt_errorCallback || error;
+    const program = gl.createProgram();
+    shaders.forEach(function(shader) {
+      gl.attachShader(program, shader);
+    });
+    if (opt_attribs) {
+      opt_attribs.forEach(function(attrib, ndx) {
+        gl.bindAttribLocation(
+            program,
+            opt_locations ? opt_locations[ndx] : ndx,
+            attrib);
+      });
+    }
+    gl.linkProgram(program);
+
+    // Check the link status
+    const linked = gl.getProgramParameter(program, gl.LINK_STATUS);
+    if (!linked) {
+        // something went wrong with the link
+        const lastError = gl.getProgramInfoLog(program);
+        errFn(`Error in program linking: ${lastError}\n${
+          shaders.map(shader => {
+            const src = addLineNumbersWithError(gl.getShaderSource(shader));
+            const type = gl.getShaderParameter(shader, gl.SHADER_TYPE);
+            return `${glEnumToString(gl, type)}:\n${src}`;
+          }).join('\n')
+        }`);
+
+        gl.deleteProgram(program);
+        return null;
+    }
+    return program;
+  }
+
+  /**
+   * Loads a shader from a script tag.
+   * @param {WebGLRenderingContext} gl The WebGLRenderingContext to use.
+   * @param {string} scriptId The id of the script tag.
+   * @param {number} opt_shaderType The type of shader. If not passed in it will
+   *     be derived from the type of the script tag.
+   * @param {module:webgl-utils.ErrorCallback} opt_errorCallback callback for errors.
+   * @return {WebGLShader} The created shader.
+   */
+  function createShaderFromScript(
+      gl, scriptId, opt_shaderType, opt_errorCallback) {
+    let shaderSource = "";
+    let shaderType;
+    const shaderScript = document.getElementById(scriptId);
+    if (!shaderScript) {
+      throw ("*** Error: unknown script element" + scriptId);
+    }
+    shaderSource = shaderScript.text;
+
+    if (!opt_shaderType) {
+      if (shaderScript.type === "x-shader/x-vertex") {
+        shaderType = gl.VERTEX_SHADER;
+      } else if (shaderScript.type === "x-shader/x-fragment") {
+        shaderType = gl.FRAGMENT_SHADER;
+      } else if (shaderType !== gl.VERTEX_SHADER && shaderType !== gl.FRAGMENT_SHADER) {
+        throw ("*** Error: unknown shader type");
+      }
+    }
+
+    return loadShader(
+        gl, shaderSource, opt_shaderType ? opt_shaderType : shaderType,
+        opt_errorCallback);
+  }
+
+  const defaultShaderType = [
+    "VERTEX_SHADER",
+    "FRAGMENT_SHADER",
+  ];
+
+  /**
+   * Creates a program from 2 script tags.
+   *
+   * @param {WebGLRenderingContext} gl The WebGLRenderingContext
+   *        to use.
+   * @param {string[]} shaderScriptIds Array of ids of the script
+   *        tags for the shaders. The first is assumed to be the
+   *        vertex shader, the second the fragment shader.
+   * @param {string[]} [opt_attribs] An array of attribs names. Locations will be assigned by index if not passed in
+   * @param {number[]} [opt_locations] The locations for the. A parallel array to opt_attribs letting you assign locations.
+   * @param {module:webgl-utils.ErrorCallback} opt_errorCallback callback for errors. By default it just prints an error to the console
+   *        on error. If you want something else pass an callback. It's passed an error message.
+   * @return {WebGLProgram} The created program.
+   * @memberOf module:webgl-utils
+   */
+  function createProgramFromScripts(
+      gl, shaderScriptIds, opt_attribs, opt_locations, opt_errorCallback) {
+    const shaders = [];
+    for (let ii = 0; ii < shaderScriptIds.length; ++ii) {
+      shaders.push(createShaderFromScript(
+          gl, shaderScriptIds[ii], gl[defaultShaderType[ii]], opt_errorCallback));
+    }
+    return createProgram(gl, shaders, opt_attribs, opt_locations, opt_errorCallback);
+  }
+
+  /**
+   * Creates a program from 2 sources.
+   *
+   * @param {WebGLRenderingContext} gl The WebGLRenderingContext
+   *        to use.
+   * @param {string[]} shaderSourcess Array of sources for the
+   *        shaders. The first is assumed to be the vertex shader,
+   *        the second the fragment shader.
+   * @param {string[]} [opt_attribs] An array of attribs names. Locations will be assigned by index if not passed in
+   * @param {number[]} [opt_locations] The locations for the. A parallel array to opt_attribs letting you assign locations.
+   * @param {module:webgl-utils.ErrorCallback} opt_errorCallback callback for errors. By default it just prints an error to the console
+   *        on error. If you want something else pass an callback. It's passed an error message.
+   * @return {WebGLProgram} The created program.
+   * @memberOf module:webgl-utils
+   */
+  function createProgramFromSources(
+      gl, shaderSources, opt_attribs, opt_locations, opt_errorCallback) {
+    const shaders = [];
+    for (let ii = 0; ii < shaderSources.length; ++ii) {
+      shaders.push(loadShader(
+          gl, shaderSources[ii], gl[defaultShaderType[ii]], opt_errorCallback));
+    }
+    return createProgram(gl, shaders, opt_attribs, opt_locations, opt_errorCallback);
+  }
+
+  /**
+   * Resize a canvas to match the size its displayed.
+   * @param {HTMLCanvasElement} canvas The canvas to resize.
+   * @param {number} [multiplier] amount to multiply by.
+   *    Pass in window.devicePixelRatio for native pixels.
+   * @return {boolean} true if the canvas was resized.
+   * @memberOf module:webgl-utils
+   */
+  function resizeCanvasToDisplaySize(canvas, multiplier) {
+    multiplier = multiplier || 1;
+    const width  = canvas.clientWidth  * multiplier | 0;
+    const height = canvas.clientHeight * multiplier | 0;
+    if (canvas.width !== width ||  canvas.height !== height) {
+      canvas.width  = width;
+      canvas.height = height;
+      return true;
+    }
+    return false;
+  }
+
+  return {
+    createProgram: createProgram,
+    createProgramFromScripts: createProgramFromScripts,
+    createProgramFromSources: createProgramFromSources,
+    resizeCanvasToDisplaySize: resizeCanvasToDisplaySize,
+  };
+
+}));
+const BB = {MAX_LOGOS:4}; 
+BB.GL = {
+	
+vertexShaderSource : `#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;
+}
+`,
+
+fragmentShaderSource : `#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.y >= 0.0 && 
+		alphaCoord.x <= 1.0 && 
+		alphaCoord.y <= 1.0
+		)
+        {
+            //get the alpha texel:
+            alpha *= texture(alphaTexture, alphaCoord).a;//without blur
+        }		
+		vec4 ad0Pix = 
+			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);
+  }
+}
+`,
+
+vertexShaderSourceV1 : `
+
+//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_texCoord;
+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_texCoord;
+}
+`,
+
+fragmentShaderSourceV1 : `
+
+//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
+
+uniform sampler2D injectoLogo;//the injecto logo to cover the timecode watermark
+
+const float Directions = 16.0; // BLUR DIRECTIONS (Default 16.0 - More is better but slower)
+const float Quality = 3.0; // BLUR QUALITY (Default 3.0 - More is better but slower)
+const float Size = 12.0; // BLUR SIZE (Radius)
+const float Pi = 6.28318530718; // Pi*2
+
+vec3 BlurBGR(vec4 videoImagePix)
+{
+	vec3 res = videoImagePix.rgb;
+ //get the kernel radius:
+    vec2 Radius = Size/u_resolution2.xy;
+   
+    // Blur around:
+    for( float d=0.0; d<Pi; d+=Pi/Directions)
+    {
+		for(float i=1.0/Quality; i<=1.0; i+=1.0/Quality)
+        {
+			res += texture2D( u_image, v_texCoord+vec2(cos(d),sin(d))*Radius*i).rgb;
+        }
+    }
+    res /= Quality * Directions - 15.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 alpha = 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)
+        {
+            //get the alpha texel:
+            //alpha *= BlurAlpha(alphaCoord);//blurred
+            alpha *= texture2D(alphaTexture, alphaCoord).a;//without blur
+        }
+		if (adUnit == 99)//blur
+		{
+			gl_FragColor = vec4(BlurBGR(videoImagePix)*alpha +  videoImagePix.rgb*(1.0-alpha), 1.0);
+			//outColor = vec4(BlurBGR(videoImagePix), 1.0);
+			return true;
+		}
+		vec4 ad0Pix = 
+			adUnit == 0 ? texture2D(ad0, texCoord) :
+			adUnit == 1 ? texture2D(ad1, texCoord) :
+			adUnit == 2 ? texture2D(ad2, texCoord) :
+						  texture2D(ad3, texCoord);//get the logo's texel
+		alpha *= ad0Pix.a;//consider the alpha of the logo
+        vec3 resultRGB = ad0Pix.rgb*alpha + videoImagePix.rgb*(1.0-alpha);//blend
+        gl_FragColor = vec4(resultRGB, 1.0);
+        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;
+
+  //cover the timecode with some watermark
+  if (v_texCoord[0] <= 0.125 && (1.0-v_texCoord[1]) <= 0.125)
+  { 
+    gl_FragColor = texture2D(injectoLogo, vec2(v_texCoord[0]*8.0, 1.0-(1.0-v_texCoord[1])*8.0));
+    return;
+  }
+
+  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;
+  }
+  else {//only video texel, no logo
+    gl_FragColor = videoImagePix;
+  }
+}
+`
+}
+BB.FrameRateMode = {
+		Src60_MediaTime60: Symbol('Src60_MediaTime60'),//source is 60, player's fps is 60 as well
+		Src59_MediaTime60: Symbol('Src59_MediaTime60'),//source is 59.94, player's fps is 60 (dropping every 1001 frame)
+		Src59_MediaTime59: Symbol('Src59_MediaTime59'),//source is 59.94, player's fps is 59.94fps as well
+		Src29_MediaTime29: Symbol('Src29_MediaTime29')//source is 29.97, player's fps is 29.97fps as well
+	};
+BB.RenderingMode = {
+	RenderDigits : Symbol('RenderDigits'),
+	RenderTimecode : Symbol('RenderTimecode'),
+	Augment : Symbol('Augment')
+};
+BB.SynchMethod = {
+	OnNewSegment : Symbol('OnNewSegment'),
+	OnMetadata   : Symbol('OnMetadata'),
+	None         : Symbol('None'),
+};
+BB.Utils = (() => {
+	const padZero = (num) => {
+		return num.toString().padStart(2, '0');
+	}
+	const TimeCodesFramesTranslator = (() => {
+		const printTimecode = (timecode, duplicated, dot2) => {
+			let str = "";
+			if (Array.isArray(timecode)) {
+				str = [
+					padZero(timecode[0]),
+					padZero(timecode[1]),
+					padZero(timecode[2]),
+					padZero(timecode[3])
+				  ].join(':');
+				if (dot2==true){
+					if(timecode[4]==1 && (duplicated === undefined || duplicated))
+						str += ".2";
+					else
+						str += ".1";
+				}
+				else{
+					if(timecode[4]==1 && (duplicated === undefined || duplicated))
+						str += ".1";
+				}
+			}
+			else {
+				const delimiter = ":";
+				str = ("0" + timecode.h).slice(-2) + delimiter + ("0" + timecode.m).slice(-2) + delimiter + ("0" + timecode.s).slice(-2) + delimiter + ("0" + timecode.f).slice(-2);
+				if (duplicated) str += "." + (timecode.field ? "1" : "2");
+			}
+		  
+			return str;
+		}
+
+		const timeCodeStr2TimeCodeArray = (timecodeStr) => {
+			let tokens = timecodeStr.split(":");
+			if (tokens.length != 4) {
+				console.error("timeCodeStr2TimeCodeArray: Failed to parse " + timecodeStr);
+				return [0,0,0,0,0];
+			}
+			let timeCodeArray = [
+				parseInt(tokens[0]),//hours
+				parseInt(tokens[1]),//minutes
+				parseInt(tokens[2])];//seconds
+			if (tokens[3].indexOf(".") >= 0) {
+				let framesAndField = tokens[3].split(".");
+				timeCodeArray.push(parseInt(framesAndField[0]));//frames
+				timeCodeArray.push(parseInt(framesAndField[1]));//field
+			}
+			else {
+				timeCodeArray.push(parseInt(tokens[3]));//frames
+				timeCodeArray.push(0);//field
+			}
+			return timeCodeArray;
+		}
+
+
+		const Timecode2Frames = (timecode, fps, duplicated) => { //timecode [hh,mm,ss,ff,.1] //.1= 1|0, fps (60,59.94,30.29.96), duplicated (true|false)
+			// finding counting fps and dropped frames
+			let countingFps=60;
+			let dropFrames=0;
+			if (Math.floor(fps)==60) 
+			{
+				countingFps = 60;
+				dropFrames=0;
+			}
+			else if (Math.floor(fps)==59) 
+			{
+				countingFps = 60;
+				dropFrames=4;
+			}
+			else if (Math.floor(fps)==30) 
+			{
+				countingFps = 30;
+				dropFrames=0;
+			}
+			else if (Math.floor(fps)==29) 
+			{
+				countingFps = 30;
+				dropFrames=2;
+			}
+			let result=0;
+			let framesPerMinute = Math.floor(fps*60); //3600|3596|1800|1798
+			let framesPer10Minutes = Math.floor(fps*60*10); //36000|35964|18000|17982 
+			let framesPerHour = framesPer10Minutes*6;
+			let hh=timecode[0];
+			let mm=timecode[1];
+			let ss=timecode[2];
+			let ff=timecode[3];
+			let dotOne = timecode[4];//(timecode[4]==0)?false:true;
+			result += hh*framesPerHour;
+			result += mm*(countingFps*60);
+			result += ss*countingFps;
+			if (duplicated)
+				result += ff * 2 + (dotOne-1); //we are on .1|.2 mode
+			else
+				result += ff;
+			result -= dropFrames*(mm);
+			result += dropFrames*(Math.floor(mm/10));//drop Frames on every minute exept every 10th
+			return result;
+		}
+
+		const Frames2Timecode = (frames, fps, duplicated) => { //timecode [hh,mm,ss,ff,.1] //.1= 1|0, fps (60,59.94,30.29.96), duplicated (true|false)
+			
+				// finding counting fps and dropped frames
+			let countingFps=60;
+			let dropFrames=0;
+			if (Math.floor(fps)==60) 
+			{
+				countingFps = 60;
+				dropFrames=0;
+			}
+			else if (Math.floor(fps)==59) 
+			{
+				countingFps = 60;
+				dropFrames=4;
+			}
+			else if (Math.floor(fps)==30) 
+			{
+				countingFps = 30;
+				dropFrames=0;
+			}
+			else if (Math.floor(fps)==29) 
+			{
+				countingFps = 30;
+				dropFrames=2;
+			}
+			let result=0;
+			let framesPerMinute = Math.floor(fps*60); //3600|3596|1800|1798
+			let framesPer10Minutes = Math.floor(fps*60*10) //36000|35964|18000|17982
+			let framesPerHour = framesPer10Minutes*6;
+			
+			let framesLeft=frames;
+			let hh = Math.floor(framesLeft / framesPerHour);
+			framesLeft-=hh*framesPerHour;
+			let mm10 = Math.floor(framesLeft / framesPer10Minutes);
+			
+			framesLeft-=mm10*framesPer10Minutes;
+			
+			if (framesLeft >= countingFps*60) //3600 (in 59.94fps)
+				framesLeft+= dropFrames*(Math.floor((framesLeft-countingFps*60)/framesPerMinute)+1); //3600 /3596 (in 59.94fps)
+			
+			//framesLeft-= Math.floor(framesLeft / framesPerMinute)*(dropFrames)
+			
+			let mm = Math.floor(framesLeft / (countingFps*60)); //3600 (in 59.94fps)
+			 
+			framesLeft-=mm*(countingFps*60); //3600 (in 59.94fps)
+
+			let ss = Math.floor((framesLeft) / countingFps);
+			framesLeft-=ss*countingFps;
+			let ff = framesLeft;
+			mm+=mm10*10;
+			
+			dotOne=0;
+			if (duplicated)
+			{
+				dotOne = ff % 2;
+				ff=Math.floor(ff/2);
+			}
+			let returnTimecode = [hh,mm,ss,ff,dotOne];
+			return returnTimecode;
+
+		}
+
+		const TimeCodeAddFrames = (tc, framesToAdd, fps) => {
+			let duplicated = fps > 30;
+			let frames = Timecode2Frames(tc, fps, duplicated);
+			frames += framesToAdd;
+			return Frames2Timecode(frames, fps, duplicated);
+		}
+
+		const TimeCodeArray2TimeCodeJson = (timeCodeArray) => {
+			return {h:timeCodeArray[0],m:timeCodeArray[1],s:timeCodeArray[2],f:timeCodeArray[3],field:timeCodeArray[4]};
+		}
+
+		const timeDate2TCString =  (timeDate, fps) => {
+			let tc = BB.Utils.timeDate2TC(timeDate,fps);
+			//didn't check new version
+			if (fps>59){
+				return BB.Utils.TimeCodesFramesTranslator.printTimecode(tcFromMessage,true);
+			}
+			else{
+				return BB.Utils.TimeCodesFramesTranslator.printTimecode(tcFromMessage,false);
+			}
+			//--------------
+			//old
+			let platform = BB.Utils.Platform;
+			
+			let timeStampStr = "";
+			if (platform.isApple()){
+				timeStampStr = timeDate;
+			}else{
+				timeStampStr = timeDate.toISOString();
+			}
+            let timeStr = timeStampStr.split("T")[1];
+            let arr1 = timeStr.split(":");
+            let hrs = parseInt(arr1[0]);
+            let mins = parseInt(arr1[1]);
+            let arr2 = arr1[2].split(".");
+            let secs = parseInt(arr2[0]);
+            let msec = parseInt(arr2[1].substring(0, 3));
+            let frames = Math.round(((msec / 1000) * fps) /*+ 0.45*/);
+			if (fps>59){
+
+            let field = (frames % 2 == 0 ? 1 : 2);
+            frames = Math.floor(frames / 2);
+            let str = hrs.toString().padStart(2, '0') + ":" +
+                mins.toString().padStart(2, '0') + ":" +
+                secs.toString().padStart(2, '0') + ":" +
+                frames.toString().padStart(2, '0') + "." + field.toString();
+				return str;
+			}
+			else {
+            let str = hrs.toString().padStart(2, '0') + ":" +
+                mins.toString().padStart(2, '0') + ":" +
+                secs.toString().padStart(2, '0') + ":" +
+                frames.toString().padStart(2, '0');
+				return str;
+			}
+            return str;
+            
+        }
+	
+		const timeDate2TC =  (timeDate, fps) => {
+            let platform = BB.Utils.Platform;
+			let timeStampStr = "";
+			if (platform.isApple()){
+				timeStampStr = timeDate;
+			}else{
+				timeStampStr = timeDate.toISOString();
+			}
+            let timeStr = timeStampStr.split("T")[1];
+            let arr1 = timeStr.split(":");
+            let hrs = parseInt(arr1[0]);
+            let mins = parseInt(arr1[1]);
+            let arr2 = arr1[2].split(".");
+            let secs = parseInt(arr2[0]);
+            let msec = parseInt(arr2[1].substring(0, 3));
+            //let frames = Math.round(((msec / 1000) * fps)+0.02 /*+ 0.45*/);
+		if (fps>59){
+            //let field = (frames % 2 == 0 ? 1 : 2);
+            //frames = Math.floor(frames / 2);
+				//let returnTimecode = [hrs,mins,secs,frames,field-1];
+				let allFrames = Math.round((msec/1000+secs+mins*60+hrs*60*60)*fps);
+				let returnTimecode = BB.Utils.TimeCodesFramesTranslator.Frames2Timecode(allFrames,fps,true);
+				return returnTimecode;
+			}
+			else
+			{
+				//let returnTimecode = [hrs,mins,secs,frames,0];
+				//let returnTimecode = BB.Utils.TimeCodesFramesTranslator.Frames2Timecode(frames+secs*fps+mins*fps*60+hrs*fps*60*60,fps,false);
+				let allFrames = Math.round((msec/1000+secs+mins*60+hrs*60*60)*fps);
+				let returnTimecode = BB.Utils.TimeCodesFramesTranslator.Frames2Timecode(allFrames,fps,false);
+				return returnTimecode;
+			}
+            
+        }
+
+
+		return {
+			printTimecode:printTimecode,
+			timeCodeStr2TimeCodeArray:timeCodeStr2TimeCodeArray,
+			Timecode2Frames:Timecode2Frames,
+			Frames2Timecode:Frames2Timecode,
+			TimeCodeAddFrames:TimeCodeAddFrames,
+			TimeCodeArray2TimeCodeJson:TimeCodeArray2TimeCodeJson,
+			timeDate2TCString:timeDate2TCString,
+			timeDate2TC:timeDate2TC
+		};
+		
+	})();
+
+	const MedianCalculator = (maxSize_) => {
+		let maxSize = maxSize_ || 9999999999;
+		let values = [];
+		let count = 0;
+		
+		const add = (value) => {
+			++count;
+			values.push(value);
+			while (values.length > maxSize) values.shift();
+		};
+		const getMedian = () => {
+			if (values.length == 0) return -1;
+			let sortedValues = Array.from(values).sort((a,b) => { return a - b; });
+			return sortedValues[parseInt(sortedValues.length/2)];
+		};
+		const howMany = () => {
+			return count;
+		};
+		
+		return {
+			add,
+			getMedian,
+			howMany
+		};
+	};
+
+//todo: make it use one function. Now they are similar
+	const Platform = (() => {
+		const getCurrentPlatform = () => {
+			const userAgent = navigator.userAgent;
+			if (/windows/i.test(userAgent)) {
+				return 'Windows';
+			} else if (/android/i.test(userAgent)) {
+				return 'Android';
+			} else if (/iphone|ipad|ipod/i.test(userAgent)) {
+				return 'iOS';
+			} else if (/mac/i.test(userAgent)) {
+				let isIPadAnyhow = 'ontouchstart' in window || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0;
+				if (isIPadAnyhow) return 'iPad';
+				else return 'Mac';
+			} else if (/ipad/i.test(userAgent)) {
+				return 'iPad';
+			} else {
+				return 'Something else';
+			}
+		}
+		const isMac = () => {
+			let platform = getCurrentPlatform();
+			return platform =='Mac';
+		};
+		const isiPad = () => {
+			let platform = getCurrentPlatform();
+			return platform =='iPad';
+		};
+		const isiPhone = () => {
+			let platform = getCurrentPlatform();
+			return platform =='iOS';
+		};
+		const isApple = () => {
+			let platform = getCurrentPlatform();
+			return platform == 'iOS' || platform == 'Mac' || platform == 'iPad';
+		}
+		const isWindows = () => {
+			//return true;
+			let platform = getCurrentPlatform();
+			return platform == 'Windows';
+		}
+		const isAndroid = () => {
+			let platform = getCurrentPlatform();
+			return platform == 'Android';
+		}
+		const getDeviceDescription = () => {
+			let deviceType = getCurrentPlatform();
+			if (deviceType == 'Windows') return "a Windows PC";
+			else if (deviceType == 'Android') return "an Android phone";
+			else if (deviceType == 'iOS') return "an iPhone";
+			else if (deviceType == 'Mac') return "a Mac";
+			else if (deviceType == 'iPad') return "an iPad";
+			else return "an Unknown device";
+		};
+		const getDeviceName = () => {
+			let module = {
+				options: [],
+				header: [navigator.platform, navigator.userAgent, navigator.appVersion, navigator.vendor, window.opera],
+				dataos: [
+					{ name: 'Windows Phone', value: 'Windows Phone', version: 'OS' },
+					{ name: 'Windows', value: 'Win', version: 'NT' },
+					{ name: 'iPhone', value: 'iPhone', version: 'OS' },
+					{ name: 'iPad', value: 'iPad', version: 'OS' },
+					{ name: 'Kindle', value: 'Silk', version: 'Silk' },
+					{ name: 'Android', value: 'Android', version: 'Android' },
+					{ name: 'PlayBook', value: 'PlayBook', version: 'OS' },
+					{ name: 'BlackBerry', value: 'BlackBerry', version: '/' },
+					{ name: 'Macintosh', value: 'Mac', version: 'OS X' },
+					{ name: 'Linux', value: 'Linux', version: 'rv' },
+					{ name: 'Palm', value: 'Palm', version: 'PalmOS' }
+				],
+				databrowser: [
+					{ name: 'Chrome', value: 'Chrome', version: 'Chrome' },
+					{ name: 'Firefox', value: 'Firefox', version: 'Firefox' },
+					{ name: 'Safari', value: 'Safari', version: 'Version' },
+					{ name: 'Internet Explorer', value: 'MSIE', version: 'MSIE' },
+					{ name: 'Opera', value: 'Opera', version: 'Opera' },
+					{ name: 'BlackBerry', value: 'CLDC', version: 'CLDC' },
+					{ name: 'Mozilla', value: 'Mozilla', version: 'Mozilla' }
+				],
+				init: function () {
+					let agent = this.header.join(' '),
+						os = this.matchItem(agent, this.dataos),
+						browser = this.matchItem(agent, this.databrowser);
+					
+					return { os: os, browser: browser };
+				},
+				matchItem: function (string, data) {
+					let i = 0,
+						j = 0,
+						html = '',
+						regex,
+						regexv,
+						match,
+						matches,
+						version;
+					
+					for (i = 0; i < data.length; i += 1) {
+						regex = new RegExp(data[i].value, 'i');
+						match = regex.test(string);
+						if (match) {
+							regexv = new RegExp(data[i].version + '[- /:;]([\\d._]+)', 'i');
+							matches = string.match(regexv);
+							version = '';
+							if (matches) { if (matches[1]) { matches = matches[1]; } }
+							if (matches) {
+								matches = matches.split(/[._]+/);
+								for (j = 0; j < matches.length; j += 1) {
+									if (j === 0) {
+										version += matches[j] + '.';
+									} else {
+										version += matches[j];
+									}
+								}
+							} else {
+								version = '0';
+							}
+							return {
+								name: data[i].name,
+								version: parseFloat(version)
+							};
+						}
+					}
+					return { name: 'unknown', version: 0 };
+				}
+			};
+			
+			let e = module.init();
+			return e.os.name;
+		};
+		const getBrowserName = () => {
+			const userAgent = navigator.userAgent;
+
+			if (userAgent.indexOf("Chrome") > -1 && userAgent.indexOf("Edge") === -1) {
+			  return "Chrome";
+			} else if (userAgent.indexOf("Safari") > -1 && userAgent.indexOf("Chrome") === -1) {
+			  return "Safari";
+			} else if (userAgent.indexOf("Firefox") > -1) {
+			  return "Firefox";
+			} else if (userAgent.indexOf("MSIE") > -1 || userAgent.indexOf("Trident") > -1) {
+			  return "Internet Explorer";
+			} else if (userAgent.indexOf("Edge") > -1) {
+			  return "Edge";
+			} else {
+			  return "Unknown";
+			}
+		}
+		const isSafariMac = () => {
+			return (isMac()&&(getBrowserName() == "Safari"))
+		}
+		const isChromeMac = () => {
+			return (isMac()&&(getBrowserName() == "Chrome"))
+		}
+		const isChromeWin = () => {
+			return (isWindows()&&(getBrowserName() == "Chrome"))
+		}
+		return {
+			getDeviceName,
+			getCurrentPlatform,
+			isApple,
+			isWindows,
+			isAndroid,
+			isMac,
+			isiPhone,
+			isiPad,
+			getDeviceDescription,
+			getBrowserName,
+			isSafariMac,
+			isChromeMac,
+			isChromeWin
+		}
+	})();
+
+	const getMediaTimeFPS = (frameRateMode) => {
+		let fps = 60;
+		switch(frameRateMode) {
+			case BB.FrameRateMode.Src60_MediaTime60: 
+				fps = 60;
+				break;
+			case BB.FrameRateMode.Src59_MediaTime60:
+				fps = 60;
+				break;
+			case BB.FrameRateMode.Src59_MediaTime59:
+				fps = 60000/1001;
+				break;
+			case BB.FrameRateMode.Src29_MediaTime29:
+				fps = 30000/1001;
+				break;
+			default:
+				console.error("BB.Utils.getMediaTimeFPS: Unknown FrameRate mode");
+				break;
+		};
+		return fps;
+	};
+	const getSourceFPS = (frameRateMode) => {
+		let fps = 60;
+		switch(frameRateMode) {
+			case BB.FrameRateMode.Src60_MediaTime60: 
+				fps = 60;
+				break;
+			case BB.FrameRateMode.Src59_MediaTime60:
+				fps = 60000/1001;
+				break;
+			case BB.FrameRateMode.Src59_MediaTime59:
+				fps = 60000/1001;
+				break;
+			case BB.FrameRateMode.Src29_MediaTime29:
+				fps = 30000/1001;
+				break;
+			default:
+				console.error("BB.Utils.getSourceFPS: Unknown FrameRate mode");
+				break;
+		};
+		return fps;
+	};
+	const setMediaFPS = (newFPS, options) => {
+		const equil = (one, two) => {
+			if (Math.abs(one-two)<0.01)
+				return true;
+			else 
+				return false;
+		}
+		
+		if (equil(newFPS,60)){
+			if (equil(BB.Utils.getSourceFPS(options.frameRateMode),60))
+				options.frameRateMode = BB.FrameRateMode.Src60_MediaTime60;
+			else if(equil(BB.Utils.getSourceFPS(options.frameRateMode),60000/1001))
+				options.frameRateMode = BB.FrameRateMode.Src59_MediaTime60;
+			else
+				console.error("setMediaFPS: Unknown Source FrameRate mode");
+		}
+		else if (equil(newFPS,60000/1001)){
+			if (equil(BB.Utils.getSourceFPS(options.frameRateMode),60))
+				options.frameRateMode = BB.FrameRateMode.Src60_MediaTime59;
+			else if(equil(BB.Utils.getSourceFPS(options.frameRateMode),60000/1001))
+				options.frameRateMode = BB.FrameRateMode.Src59_MediaTime59;
+			else
+				console.error("setMediaFPS: Unknown Source FrameRate mode");
+		}
+		else if (equil(newFPS,30000/1001)){
+			if (equil(BB.Utils.getSourceFPS(options.frameRateMode),30000/1001))
+				options.frameRateMode = BB.FrameRateMode.Src29_MediaTime29;
+			else 
+				console.error("setMediaFPS: Unknown Source FrameRate mode, fps = " + newFPS);
+		}
+		else
+			console.error("setMediaFPS: Unknown Media FrameRate mode");
+	};
+
+
+	const FPSGetter = () => {
+
+		const possibleFps29_30 = [
+			30000/1001,//29.97
+			30/1//30,0
+
+		];
+		const possibleFps59_60 = [
+			60000/1001,//59.94
+			60/1///60
+		];
+		let bestFPSMatches = [];
+		let deltaStorage = [];
+		let deltaCount =0;
+		let lastMediaTimeForFPSGetting = -1;
+		//let fps = 60;
+		let count = 0;
+		const addTime = (mediaTime) => {
+			count++;
+			//let fraction2PossibleFPS = new Map();
+			let minFraction=999;
+			let minCandidateFps=0;
+			if (lastMediaTimeForFPSGetting == -1){
+				lastMediaTimeForFPSGetting = mediaTime;
+				return;
+			}
+			else
+			{
+				let delta = mediaTime - lastMediaTimeForFPSGetting;
+				if (deltaCount<100){
+					deltaStorage.push(delta);
+					deltaCount++;
+					return;
+				}
+				else{
+					deltaStorage.push(delta);
+					deltaStorage.shift();
+				}
+				let total = 0;
+				for(let i = 0; i < deltaStorage.length; i++) {
+					total += deltaStorage[i];
+				}
+				delta = total / deltaStorage.length;
+				//console.log("delta= " +  delta.toFixed(5) + " fps= " + (1/delta).toFixed(2));
+				if ((1/delta) < 40)
+					possibleFps = possibleFps29_30; 
+				else 
+					possibleFps = possibleFps59_60;
+			}
+			//possibleFps = possibleFps59_60;
+			lastMediaTimeForFPSGetting = mediaTime;
+			
+			for (let i = 0; i < possibleFps.length; ++i) {
+				let candidateFps = possibleFps[i];
+				let dblFrame = mediaTime*candidateFps;
+				let intFrame = Math.round(dblFrame);
+				let fraction = Math.abs(dblFrame - intFrame);
+				if (fraction < minFraction)
+				{
+					minFraction = fraction;
+					minCandidateFps = candidateFps;
+				}
+					
+				//fraction2PossibleFPS.set(fraction, candidateFps);
+			}
+			let bestFPSMatch = minCandidateFps;//fraction2PossibleFPS.entries().next().value[1];
+			bestFPSMatches.push(bestFPSMatch);
+			//console.log("bestFPSMatch = " + bestFPSMatch);
+			if(count>1000)
+				bestFPSMatches.shift(); //deleting the first el
+		}
+		const getProbableFPS = () => {
+		  let count = {};
+		  let mostOccurringValue;
+		  let maxCount = 0;
+		  
+		  // Count the occurrences of each value in the array
+		  for (let i = 0; i < bestFPSMatches.length; i++) {
+			let value = bestFPSMatches[i];
+			count[value] = (count[value] || 0) + 1;
+			
+			// Update the most occurring value and its count if necessary
+			if (count[value] > maxCount) {
+			  mostOccurringValue = value;
+			  maxCount = count[value];
+			}
+		  }
+		  
+		  return mostOccurringValue;
+		}
+
+		const howMany = () => {
+				return count;
+			};
+			
+			return {
+				addTime:addTime,
+				getProbableFPS:getProbableFPS,
+				howMany:howMany
+			};
+			
+			
+		};
+	
+	return  {
+		TimeCodesFramesTranslator,
+		MedianCalculator,
+		Platform,
+		getMediaTimeFPS,
+		getSourceFPS,
+		setMediaFPS,
+		FPSGetter
+	}
+})();
+BB.Socket = class {
+    constructor(callback) {
+        this.isConnected = false;
+        this.folderName = "";
+        this.callback = callback;
+        this.name = "";
+    }
+
+    Connect (channel){
+        if (typeof io == "undefined" || this.isConnected) return;
+        this.isConnected = true;
+        const socket = io("https://www.virtualott.com");
+        socket.on("connect", () => {
+            console.log("socket connected");
+			let platform = BB.Utils.Platform;
+			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);
+        });
+    }
+}
+BB.Augmenter = (line, video, options) => {
+console.log("BB.Augmenter Start");
+// MK OnMetaData Sync Begin
+	function processTimedMetadata(messageData, presentationTime) {
+		// Timed metadata
+		let finalTimeCodeData = "";        
+		if (messageData && messageData.includes("www.mediakind.com/NTC")) {
+			const metadata = messageData.replace(/.*NTC./, "");
+			let pos = 0;
+			while (pos + 8 <= metadata.length) {
+				const type = metadata.substring(pos, pos + 4);
+				const length = ((metadata.charCodeAt(pos + 4) * 256 + metadata.charCodeAt(pos + 5)) * 256 + metadata.charCodeAt(pos + 6)) * 256 + metadata.charCodeAt(pos + 7);
+				if (pos + 8 + length > metadata.length) {
+					break; // oops!
+				}
+				const value = metadata.substring(pos + 8, pos + 8 + length);
+				if (type == "utc_" ) {
+					//previousTimeCode = currentTimeCode;                        
+					timecodeDateTime = new Date(parseInt(value)).getTime()/1000;
+					timecodeDelta = timecodeDateTime - presentationTime;
+					//finalTimeCodeData += `${new Date(parseInt(value)).toISOString()} | timestamp: ${new Date(parseInt(value)).getTime()/1000} | delta: ${timecodeDelta}`;
+
+				}
+				if (type == "tc__" ) {
+					//previousTimeCode = currentTimeCode;                        
+					//tcDateTime = new Date(parseInt(value)).getTime()/1000;
+					//tcDelta = tcDateTime - presentationTime;
+					tcTimeStamp = new Date(parseInt(value)).getTime();
+					//finalTimeCodeData += `${new Date(parseInt(value)).toISOString()} | tcTimestamp: ${tcTimeStamp} | segmentPlaybackDateTime: ${hlsDateTime}`;
+
+				}
+				if (type === "offs") {
+						timecode_offset = (parseInt(value)/90);
+						if (options.debug) console.log("We are HERE:TimeCode", timecode_offset);
+						
+
+				}
+				pos += 8 + length;
+			}
+		}
+		return finalTimeCodeData;
+	}
+
+	let firstFrameTimecode = [0,0,0,0,0];	
+	function onNewMetadata(data) {
+		// look for timed metadata and display in UI if available
+		if ((data && data.metadata && data.metadata.id == 0) || (platform.isSafariMac())){ //mac check is temp. Need to get id from safari CallBack
+			if (data.metadata.messageData) {
+				// Typically seen on Chrome, Edge browsers
+				data.metadata.messageData = processTimedMetadata(data.metadata.messageData, data.metadata.presentationTime);
+			} else if (data.metadata.frames && data.metadata.frames.length && data.metadata.frames[0].key && data.metadata.frames[0].key.toLowerCase() === "priv") {
+				// Typically seen on Safari browser
+				const NTC_DATA = data.metadata.frames.filter((el) => {
+					return ( el.info && el.info.toLowerCase().includes("ntc")) ;
+				});
+				if (NTC_DATA.length) {
+					messageData = `${NTC_DATA[NTC_DATA.length - 1].info}\u0000${String.fromCharCode(...NTC_DATA[NTC_DATA.length - 1].data)}`;
+					data.metadata.messageData = processTimedMetadata(messageData, data.metadata.presentationTime);
+				}
+			}
+			if((data.metadata.id == 0) || ((platform.isSafariMac()&&(timecode_offset == 0)))){ //mac check is temp. Need to get id from safari CallBack
+				presentationTime = data.metadata.presentationTime * 1000;
+
+				offsetTimeCode = new Date(tcTimeStamp - timecode_offset);
+				//offsetTimeCode = new Date(1721866388183); 
+				offsetTimeCodeframeNumber = Math.round((offsetTimeCode.getUTCMilliseconds() * 30 * 2)/1001)/2;
+				decimalPartOff = offsetTimeCodeframeNumber % 1;
+				partoff=1; 
+				if(decimalPartOff == 0.5){
+					offsetTimeCodeframeNumber = Math.floor(offsetTimeCodeframeNumber);
+					partoff=2;
+				}                   
+				
+				firstFrameTimecode = [offsetTimeCode.getUTCHours(),offsetTimeCode.getUTCMinutes(),offsetTimeCode.getUTCSeconds(),parseInt(offsetTimeCodeframeNumber),partoff==1?0:1];
+
+				//timeCodeOff = `${offsetTimeCode.getUTCHours()}:${offsetTimeCode.getUTCMinutes()}:${offsetTimeCode.getUTCSeconds()}:${parseInt(offsetTimeCodeframeNumber)}.${partoff}`;
+				
+				//console.log("timeCodeOff=", timeCodeOff);
+				//data.metadata.messageData = ``;
+				//data.metadata.messageData = `TimeCode: ${timeCodeOff} | offsetTimeCodeframeNumber: ${offsetTimeCodeframeNumber} | offsetTimeCodeMilliseconds: ${offsetTimeCode.getUTCMilliseconds()}`;
+				//dataForCSV += `${timeCodeOff},`
+				//timedMetadata.textContent = JSON.stringify(data.metadata, null, 4);
+				//timedMetadata.textContent+=`{"counter" : ${counter++}}`;
+			}
+		}
+  
+	
+	}
+	function onNewSegmentForMetadata(eventObj) {
+		if (typeof globalConfig !== 'undefined')
+		{
+			if (typeof globalConfig.MKsync !== 'undefined')
+				if (globalConfig.MKsync=="no")
+				{
+					return; //Temp for testing without MK
+				}
+		}
+		if (BB.Utils.getSourceFPS(options.frameRateMode) == 30000/1001)
+		{
+			let syncPoint =  {frame:0,playerTime:0}
+			syncPoint.frame = BB.Utils.TimeCodesFramesTranslator.Timecode2Frames(firstFrameTimecode,30000/1001,false);//@alal
+			syncPoint.stringTime = BB.Utils.TimeCodesFramesTranslator.printTimecode(firstFrameTimecode,false,false);// timeDate2TCString(eventObj.dateTime, 30000/1001);
+			console.log("New segment (" + eventObj.url +"): " + syncPoint.stringTime + " (" + syncPoint.frame + ")" + " playing at " + eventObj.playbackTime);
+			syncPoint.playerTime = eventObj.playbackTime;
+			options.syncPoint = syncPoint;
+		}
+		else if (BB.Utils.getSourceFPS(options.frameRateMode) == 60000/1001)
+		{
+			let syncPoint =  {frame:0,playerTime:0}
+			syncPoint.frame = BB.Utils.TimeCodesFramesTranslator.Timecode2Frames(firstFrameTimecode,60000/1001,true);//@alal
+			syncPoint.stringTime = BB.Utils.TimeCodesFramesTranslator.printTimecode(firstFrameTimecode,true,true);// timeDate2TCString(eventObj.dateTime, 30000/1001);
+			console.log("New segment (" + eventObj.url +"): " + syncPoint.stringTime + " (" + syncPoint.frame + ")" + " playing at " + eventObj.playbackTime);
+			syncPoint.playerTime = eventObj.playbackTime;
+			options.syncPoint = syncPoint;
+		}
+		if(eventObj.mimeType.includes("video")){
+
+			console.log("url: " + eventObj.url);
+
+		}
+	}
+// MK OnMetaData Sync End
+	function onNewSegment(eventObj) {
+            switch (eventObj.eventType) { //just for check
+				case wmcEvents.AMC_EVENT_PLAYER_SEGMENT_PLAYBACK:
+					let syncPoint =  {frame:0,playerTime:0}
+				
+					//if ((fps == 30000/1001) || (fps == 30))
+					if (BB.Utils.getSourceFPS(options.frameRateMode) == 30000/1001)
+					{
+						console.log("New segment (" + eventObj.url +"): " + BB.Utils.TimeCodesFramesTranslator.timeDate2TCString(eventObj.dateTime, 30000/1001) + " playing at " + eventObj.playbackTime);
+						syncPoint.frame = BB.Utils.TimeCodesFramesTranslator.Timecode2Frames(BB.Utils.TimeCodesFramesTranslator.timeDate2TC(eventObj.dateTime, 30000/1001),30000/1001,false);//@alal
+						syncPoint.stringTime = BB.Utils.TimeCodesFramesTranslator.timeDate2TCString(eventObj.dateTime, 30000/1001);
+					}
+					//else ((fps == 60000/1001) || (fps == 30))
+					if (BB.Utils.getSourceFPS(options.frameRateMode) == 60000/1001)
+					{
+						console.log("New segment (" + eventObj.url +"): " + BB.Utils.TimeCodesFramesTranslator.timeDate2TCString(eventObj.dateTime, 60000/1001) + " playing at " + eventObj.playbackTime);
+						syncPoint.frame = BB.Utils.TimeCodesFramesTranslator.Timecode2Frames(BB.Utils.TimeCodesFramesTranslator.timeDate2TC(eventObj.dateTime),fps,true);//@alal
+						syncPoint.stringTime = BB.Utils.TimeCodesFramesTranslator.timeDate2TCString(eventObj.dateTime, 60000/1001);
+					}
+					syncPoint.playerTime = eventObj.playbackTime;
+					options.syncPoint = syncPoint;
+					//bbPlayer.SetSyncPoint(syncPoint);
+					break;
+				default:
+            }
+	}
+	//do not need this anymore
+	// if (player!={}){
+	// 	if (options.SynchMethod == BB.SynchMethod.OnNewSegment)
+	// 	{
+	// 		player.addEventListener(wmcEvents.AMC_EVENT_PLAYER_SEGMENT_PLAYBACK, onNewSegment);
+	// 	}
+	// 	else if (options.SynchMethod == BB.SynchMethod.OnMetadata)
+	// 	{
+	// 		player.addEventListener(wmcEvents.AMC_EVENT_PLAYER_METADATA, onNewMetadata);
+	// 		player.addEventListener(wmcEvents.AMC_EVENT_PLAYER_SEGMENT_PLAYBACK, onNewSegmentForMetadata);
+	// 	}
+	// }
+	
+	
+	
+	
+	let tcTranslator = BB.Utils.TimeCodesFramesTranslator;
+	let sourceFPS = BB.Utils.getSourceFPS(options.frameRateMode);
+	let mediaTimeFPS = BB.Utils.getMediaTimeFPS(options.frameRateMode);
+	refreshRate = options.refreshRate;
+	//augmentation
+	let metaDataFetcher = null;
+	let composer = null;
+	let ctxGl = null;
+	if (options.renderingMode == BB.RenderingMode.Augment) {
+		//We load it all only when we know the game id
+		/*
+		let playerCont = video.parentElement;
+		composer = new BB.Composer3d(playerCont,video,options);
+		ads = BB.Ads(composer, options);
+		metaDataFetcher = BB.MetaDataFetcher(options,composer);
+		*/
+	} 
+	else 
+	{
+		//add a gl canvas to draw digits/timecode
+		let canvas = document.createElement("canvas");
+		canvas.width = 500;//video.videoWidth;
+		canvas.height = 500;//video.videoHeight;
+		document.body.appendChild(canvas);
+		ctxGl  = canvas.getContext('webgl');
+	}
+	let platform = BB.Utils.Platform;
+	
+	//GL rendering method:
+	let lastVideoFrameRenderedInGL = -1;
+	let lastCorrection = false;
+	const render = (currentFrame, correction) => {
+		const startTime = performance.now();
+		//if (BB.Utils.getSourceFPS(options.frameRateMode) != 30000/1001){ //ignoring this check for 29.97 fps
+			if ((lastVideoFrameRenderedInGL == currentFrame) && (correction == lastCorrection))
+			{
+				if (options.debug) console.BBlog("render(): lastVideoFrameRenderedInGL==currentFrame: " + currentFrame);
+				return 0;
+			}
+		//}
+		if ((!options.enabled)||(options.stopAugment)){
+			composer.CleanGL();
+			return 0;
+		}
+		
+		if (options.renderingMode == BB.RenderingMode.RenderDigits) 
+			renderDigit(ctxGl, currentFrame);
+		else if (options.renderingMode == BB.RenderingMode.RenderTimecode) {
+			if ((sourceFPS==60000/1001)||(sourceFPS==60))
+				renderTimecode(ctxGl, tcTranslator.Frames2Timecode(currentFrame,sourceFPS,true),true);
+			else if ((sourceFPS==30000/1001)||(sourceFPS==30))
+				renderTimecode(ctxGl, tcTranslator.Frames2Timecode(currentFrame,sourceFPS,false),false);
+		}
+		else if (options.renderingMode == BB.RenderingMode.Augment) 
+			if ((sourceFPS==60000/1001)||(sourceFPS==60))
+				composer.renderAugmentation(tcTranslator.printTimecode(tcTranslator.Frames2Timecode(currentFrame,sourceFPS,true)));
+			else if ((sourceFPS==30000/1001)||(sourceFPS==30)){
+				if(correction){
+					composer.renderAugmentation(tcTranslator.printTimecode(tcTranslator.Frames2Timecode(currentFrame*2+1,sourceFPS*2,true),true)); //@alal
+				} else {
+					composer.renderAugmentation(tcTranslator.printTimecode(tcTranslator.Frames2Timecode(currentFrame,sourceFPS,false),false)); //@alal
+				}
+			}
+		lastVideoFrameRenderedInGL = currentFrame;
+		lastCorrection = correction;
+		const endTime = performance.now();
+		return endTime - startTime;
+	};
+	
+	
+	
+	
+	
+	
+	//Windows/Android://////////////
+	
+	
+	
+	
+	//------------------
+	
+	let countVid = 0;
+	let lastVidDateTime=0;
+	let prevDeltaVid=32;
+	let prevprevDeltaVid=32;
+	let lastCalled = "";
+	let lastOffset=0;
+	let lastOffsetShown;
+	let onFrameVideoWindows2 = function(now,metadata) {
+		//console.log("VID");
+		if (lastCalled=="ANI2")
+		{
+			if (options.debug) console.BBlog("This videoCallback can be incorrect. This time doing stuff in requestAnimation frame");
+			video.requestVideoFrameCallback(onFrameVideoWindows2);
+			return;
+		}
+		lastCalled = "VID";
+		lastNow=now;
+		//console.log("mediaTime-currentTime = " + ((metadata.mediaTime - curTime)*mediaTimeFPS).toFixed(4) +
+		//			" expected-now = " + ((metadata.expectedDisplayTime - now)/1000*mediaTimeFPS).toFixed(4));
+		let dblFullFrame = ((metadata.mediaTime - options.syncPoint.playerTime)%(60*60*24))*mediaTimeFPS; // take time excluding days
+		let timeFromLastSync = metadata.mediaTime - options.syncPoint.playerTime;
+		lastFrameFromVideoCallback = Math.floor(dblFullFrame+0.1) + options.syncPoint.frame;
+		if (options.debug) {
+			var numberInput = document.getElementById("numberInput").value;
+			var number = parseInt(numberInput);
+			lastFrameFromVideoCallback+=number;
+		}
+		else
+		{
+			lastFrameFromVideoCallback+=1;
+		}
+		lastMediaTime = metadata.mediaTime;
+
+		let playerTime = video.currentTime;
+		let DebugLine2 = document.getElementById("debugText2");
+		var timeStr = "";
+		if (BB.Utils.getSourceFPS(options.frameRateMode) == 60000/1001){
+			timeStr=tcTranslator.printTimecode(tcTranslator.Frames2Timecode(lastFrameFromVideoCallback, sourceFPS,true),true,true);
+		}else if (BB.Utils.getSourceFPS(options.frameRateMode) == 30000/1001){
+			timeStr=tcTranslator.printTimecode(tcTranslator.Frames2Timecode(lastFrameFromVideoCallback, sourceFPS,false),false,false);
+		}else{
+			timeStr="NOT SUPPORTED";
+		}
+		var offsetStr = "";
+		if (BB.Utils.getSourceFPS(options.frameRateMode) == 60000/1001){
+			offsetStr=tcTranslator.printTimecode(tcTranslator.Frames2Timecode(options.augmentation.offset, sourceFPS,true),true,true);
+		}else if (BB.Utils.getSourceFPS(options.frameRateMode) == 30000/1001){
+			offsetStr=tcTranslator.printTimecode(tcTranslator.Frames2Timecode(options.augmentation.offset, sourceFPS,false),false,false);
+		}else{
+			offsetStr="NOT SUPPORTED";
+		}
+		let resultFrames = lastFrameFromVideoCallback - options.augmentation.offset;
+		if (metaDataFetcher) metaDataFetcher.setLastFrame(resultFrames);
+		var resultTimecodeStr = "";
+		if (BB.Utils.getSourceFPS(options.frameRateMode) == 60000/1001){
+			resultTimecodeStr=tcTranslator.printTimecode(tcTranslator.Frames2Timecode(resultFrames, sourceFPS,true),true,true);
+		}else if (BB.Utils.getSourceFPS(options.frameRateMode) == 30000/1001){
+			resultTimecodeStr=tcTranslator.printTimecode(tcTranslator.Frames2Timecode(resultFrames, sourceFPS,false),false,false);
+		}else{
+			resultTimecodeStr="NOT SUPPORTED";
+		}
+		let deltaVid = (Date.now()-lastVidDateTime);
+		
+		let nowTime = new Date();
+		let hours = String(nowTime.getHours()).padStart(2, '0');
+		let minutes = String(nowTime.getMinutes()).padStart(2, '0');
+		let seconds = String(nowTime.getSeconds()).padStart(2, '0');
+		let milliseconds = String(nowTime.getMilliseconds()).padStart(3, '0');
+		let formattedTime = `${hours}:${minutes}:${seconds}.${milliseconds}`;
+
+		if (options.debug) {
+			if ((options.augmentation.offset != lastOffset) || (lastOffsetShown< 10*60))
+			{
+				// set something to print offset different color
+				var offsetColor = "red";
+			}
+			else
+			{
+				var offsetColor = "black";
+			}
+			DebugLine2.innerHTML = "VID. "
+						 + " Game: " + options.gameId 
+						 + ", Time Fired: "  + formattedTime
+						 + ", PlayerTime:" + metadata.mediaTime.toFixed(4)
+						 
+
+						 + ", Stream Time-Code: "  + timeStr
+						 //+ ", offset: "  + options.augmentation.offset + "(" + offsetStr +  ")"
+						 + ", offset: <span style='color:" + offsetColor + "'>" + options.augmentation.offset + "(" + offsetStr + ")</span>"
+						 + ", Brain Time-Code: "  + resultTimecodeStr
+						 //+ ", count:" + countVid
+						 + ", TimeFromLastSync:" + timeFromLastSync.toFixed(4)
+						 + ", LastSyncPointTime:" + options.syncPoint.playerTime.toFixed(4)
+						 + ", LastSyncPointFrame:" + options.syncPoint.frame
+						 + ", LastSyncPoint:" + options.syncPoint.stringTime
+						 //+ ", deltaVid: " + deltaVid + " ms"
+						 //+ ", prevDeltaVid: " + prevDeltaVid + " ms"
+						 //+ ", prevprevDeltaVid: " + prevprevDeltaVid + " ms"
+						 //+ ", expected-now = " + (metadata.expectedDisplayTime - now).toFixed(4)
+						 + " </br>"; 
+			if (options.augmentation.offset != lastOffset)
+			{
+				lastOffsetShown=0;
+			}
+			lastOffset = options.augmentation.offset;
+			lastOffsetShown++;
+			}	
+		
+		countVid++;
+		lastVidDateTime = Date.now();
+		let plus05Correction = false;
+		if (options.debug) {
+			var checkbox_plus05Correction = document.getElementById('plus05CorrectionCheckbox');
+			plus05Correction = checkbox_plus05Correction.checked;
+		}
+		let renderingDuration = 0;
+		//if ((metadata.expectedDisplayTime - now)>5)
+		if (BB.Utils.getSourceFPS(options.frameRateMode) == 30000/1001){
+			let bottomBorder = 24;
+			let topBorder = 33+(33-bottomBorder);
+			if (((deltaVid<bottomBorder)&&(prevDeltaVid<topBorder)) || ((prevDeltaVid<bottomBorder)&&(deltaVid<topBorder)) || ((prevprevDeltaVid<bottomBorder)&&(prevDeltaVid<topBorder)&&(deltaVid<topBorder)) || (plus05Correction==true))
+			{
+				DebugLine2.innerHTML += " Setting (some) ms timer";
+				setTimeout(function() {
+					render(resultFrames,false);
+					//video.requestVideoFrameCallback(onFrameVideoWindows2);
+				}, 10);
+			}
+			else
+			{
+				render(resultFrames,false);
+			}
+		} 
+		else if (BB.Utils.getSourceFPS(options.frameRateMode) == 60000/1001)
+		{
+			renderingDuration = render(resultFrames,false);
+		}
+		else
+		{
+			console.BBlog("FPS not supported");
+		}
+		prevprevDeltaVid=prevDeltaVid;
+		prevDeltaVid=deltaVid;
+		if (options.debug)
+			{
+				console.BBlog("VID."
+					+ " TimeFired: "  + formattedTime
+					+ ", rendering: "  + timeStr
+					+ ", took: "  + renderingDuration.toFixed(4) + " ms"
+				);
+			}
+		video.requestVideoFrameCallback(onFrameVideoWindows2);
+		return;
+	}
+
+	const onAnimatedFrameWindows2 = (timeStamp) => {
+		let nowTime = new Date();
+		let hours = String(nowTime.getHours()).padStart(2, '0');
+		let minutes = String(nowTime.getMinutes()).padStart(2, '0');
+		let seconds = String(nowTime.getSeconds()).padStart(2, '0');
+		let milliseconds = String(nowTime.getMilliseconds()).padStart(3, '0');
+		let formattedTime = `${hours}:${minutes}:${seconds}.${milliseconds}`;
+		//console.log("ANI");
+		if (video.paused) //doing nothing
+		{
+			window.requestAnimationFrame(onAnimatedFrameWindows2);
+			return;
+		}
+		let DebugLine = document.getElementById("debugText");
+		if (options.debug) DebugLine.innerHTML = "ANI. "
+					 + " Time Fired: "  + formattedTime;
+		
+		if ((lastCalled=="ANI") || (lastCalled=="ANI2"))
+		{
+			
+			var timeStr = "";
+			if (BB.Utils.getSourceFPS(options.frameRateMode) == 60000/1001){
+				timeStr=tcTranslator.printTimecode(tcTranslator.Frames2Timecode(lastVideoFrameRenderedInGL+1, sourceFPS,true),true,true);
+			}else if (BB.Utils.getSourceFPS(options.frameRateMode) == 30000/1001){
+				timeStr=tcTranslator.printTimecode(tcTranslator.Frames2Timecode(lastVideoFrameRenderedInGL+1, sourceFPS,false),false,false);
+			}else{
+				timeStr="NOT SUPPORTED";
+			}
+			var offsetStr = "";
+			if (BB.Utils.getSourceFPS(options.frameRateMode) == 60000/1001){
+				offsetStr=tcTranslator.printTimecode(tcTranslator.Frames2Timecode(options.augmentation.offset, sourceFPS,true),true,true);
+			}else if (BB.Utils.getSourceFPS(options.frameRateMode) == 30000/1001){
+				offsetStr=tcTranslator.printTimecode(tcTranslator.Frames2Timecode(options.augmentation.offset, sourceFPS,false),false,false);
+			}else{
+				offsetStr="NOT SUPPORTED";
+			}
+			let resultFrames = lastVideoFrameRenderedInGL - options.augmentation.offset;
+			var resultTimecodeStr = "";
+			if (BB.Utils.getSourceFPS(options.frameRateMode) == 60000/1001){
+				resultTimecodeStr=tcTranslator.printTimecode(tcTranslator.Frames2Timecode(resultFrames, sourceFPS,true),true,true);
+			}else if (BB.Utils.getSourceFPS(options.frameRateMode) == 30000/1001){
+				resultTimecodeStr=tcTranslator.printTimecode(tcTranslator.Frames2Timecode(resultFrames, sourceFPS,false),false,false);
+			}else{
+				resultTimecodeStr="NOT SUPPORTED";
+			}
+			if (options.debug) 
+				{
+					console.BBlog("Probable videoFrameCallback was not fired. Apllying correction mechanism (" + timeStr + ")" + ", stage: " + lastCalled);
+					DebugLine.innerHTML += "  correction";
+				}
+				
+				let renderingDuration = render(lastVideoFrameRenderedInGL+1,false);
+				if (options.debug) console.BBlog("ANI."
+					+ " Time Fired: "  + formattedTime
+					+ ", correction"
+					+ ", time: " + timeStr
+					+ ", offset: "  + options.augmentation.offset + "(" + offsetStr +  ")"
+					+ ", resultTime: "  + resultTimecodeStr
+					+ ", took: "  + renderingDuration.toFixed(4) + " ms");
+				if (lastCalled=="ANI")
+					lastCalled = "ANI2";
+				else if (lastCalled=="ANI2")
+					lastCalled = "ANI";
+		}
+		else
+		{
+			//DebugLine.innerHTML = "ANI. ";
+			if (options.debug) console.BBlog("ANI."
+				+ " Time Fired: "  + formattedTime);
+			lastCalled = "ANI";
+		}
+
+
+		
+		window.requestAnimationFrame(onAnimatedFrameWindows2);
+	}
+	
+
+	
+	//Apple://///////////////////////
+	//default rounding error:
+	let roundingError = options.frameRateMode == BB.FrameRateMode.Src59_MediaTime60 ? -0.04 : +0.05;
+	//debug - delete it after
+	let deltaCur=0;
+	let lastMetadata={};
+	let lastExpectedDisplayTime=0;
+	let lastTimeStamp=0;
+	let nowFromVideoFrame=0;
+	//--------------
+	let countAppleVideo = 0;
+	let frame = 0;
+	let lastMediaTime = -1;
+
+	let lastVIDDate=0;
+	let forceSync=false;
+	
+	let lastCorr=0;
+	let prevCorr=0;
+	
+
+
+
+
+	// const onFrameVideoApple3 = (now,metadata) => {
+	// 	lastVIDDate=performance.now();
+	// 	var frameDbl = metadata.mediaTime*mediaTimeFPS;
+	// 	var frame = Math.floor(frameDbl);
+	// 	var timeStr = "";
+	// 	if (BB.Utils.getSourceFPS(options.frameRateMode) == 60000/1001){
+	// 		timeStr=tcTranslator.printTimecode(tcTranslator.Frames2Timecode(frame, sourceFPS,true),true,true);
+	// 	}else if (BB.Utils.getSourceFPS(options.frameRateMode) == 30000/1001){
+	// 		timeStr=tcTranslator.printTimecode(tcTranslator.Frames2Timecode(frame, sourceFPS,false),false,false);
+	// 	}else{
+	// 		timeStr="NOT SUPPORTED";
+	// 	}
+	// 	let DebugLine2 = document.getElementById("debugText2");
+	// 	DebugLine2.textContent = " dblFrame: " + frameDbl.toFixed(4)
+	// 	                       + " Frame: " + frame
+	// 						   + " countAppleVideo: " + countAppleVideo
+	// 						   + " Time: " + timeStr;
+		
+							 
+		
+	// 	countAppleVideo++;
+	// 	video.requestVideoFrameCallback(onFrameVideoApple3);
+	// 	return;
+	// }
+	let correction=false;
+	const onAnimatedFrameApple3 = (timeStamp) => {
+		var number = 2;
+		if (options.debug)
+		{
+			let DebugLine = document.getElementById("debugText");
+			var numberInput = document.getElementById("numberInput").value;
+			number = parseInt(numberInput);
+		}
+		var realFrame = 0;
+
+		var dblFrame = ((video.currentTime - options.syncPoint.playerTime)%(60*60*24))*mediaTimeFPS; // take time excluding days
+		realFrame=Math.floor(dblFrame) + options.syncPoint.frame;
+
+		realFrame+=number;
+		var fraction = dblFrame - Math.floor(dblFrame);
+		if ((correction)||(fraction<0.226)) correction=true;
+		if (fraction>0.8) correction=false;
+		if(correction) realFrame--;
+		var timeStr = "";
+		if (BB.Utils.getSourceFPS(options.frameRateMode) == 60000/1001){
+			timeStr=tcTranslator.printTimecode(tcTranslator.Frames2Timecode(realFrame, sourceFPS,true),true,true);
+		}else if (BB.Utils.getSourceFPS(options.frameRateMode) == 30000/1001){
+			timeStr=tcTranslator.printTimecode(tcTranslator.Frames2Timecode(realFrame, sourceFPS,false),false,false);
+		}else{
+			timeStr="NOT SUPPORTED";
+		}
+		var offsetStr = "";
+		if (BB.Utils.getSourceFPS(options.frameRateMode) == 60000/1001){
+			offsetStr=tcTranslator.printTimecode(tcTranslator.Frames2Timecode(options.augmentation.offset, sourceFPS,true),true,true);
+		}else if (BB.Utils.getSourceFPS(options.frameRateMode) == 30000/1001){
+			offsetStr=tcTranslator.printTimecode(tcTranslator.Frames2Timecode(options.augmentation.offset, sourceFPS,false),false,false);
+		}else{
+			offsetStr="NOT SUPPORTED";
+		}
+		let resultFrames = realFrame - options.augmentation.offset;
+		// if (options.debug) DebugLine.textContent = " countAppleANI: " + countAppleANI
+							  // + " dblFrame: " + dblFrame.toFixed(4)
+							  // + " realFrame: " + realFrame
+							  // + ", offset: "  + options.augmentation.offset + "(" + offsetStr +  ")"
+					 		  // + ", resultTime: "  + resultTimecodeStr
+							  // + " Time: "  + timeStr
+							  // + " correction: " + correction;
+		
+
+		if (metaDataFetcher) metaDataFetcher.setLastFrame(resultFrames);
+		render(resultFrames);
+		countAppleANI++;
+		// lastFrame=realFrame;
+		// prevCorr=lastCorr;
+		// lastCorr=corr;
+	
+		window.requestAnimationFrame(onAnimatedFrameApple3); 
+		return;
+	}
+	//-----------------------------------------------
+	const onFrameVideoApple = (now,metadata) => {
+		//if((!playing)&&(lastMediaTime!=-1)&&(lastMediaTime!=metadata.mediaTime)) playing=true;
+		
+		let frameDbl = metadata.mediaTime*mediaTimeFPS;
+		var number = 0;
+		if (options.debug)
+		{
+			var numberInput = document.getElementById("numberInput").value;
+			number = parseInt(numberInput);
+		}
+		frameDbl+=number;
+		frame = Math.floor(frameDbl);
+		var timeStr = "";
+		if (BB.Utils.getSourceFPS(options.frameRateMode) == 60000/1001){
+			timeStr=tcTranslator.printTimecode(tcTranslator.Frames2Timecode(frame, sourceFPS,true),true,true);
+		}else if (BB.Utils.getSourceFPS(options.frameRateMode) == 30000/1001){
+			timeStr=tcTranslator.printTimecode(tcTranslator.Frames2Timecode(frame, sourceFPS,false),false,false);
+		}else{
+			timeStr="NOT SUPPORTED";
+		}
+		let DebugLine2 = document.getElementById("debugText2");
+		DebugLine2.textContent = " dblFrame: " + frameDbl.toFixed(4)
+		                       + " Frame: " + frame
+							   + " countAppleVideo: " + countAppleVideo
+							   + " Time: " + timeStr;
+		
+							 
+		
+		countAppleVideo++;
+		lastMediaTime=metadata.mediaTime;
+		video.requestVideoFrameCallback(onFrameVideoApple);
+		return;
+	nowFromVideoFrame=now;
+	lastMetadata = metadata;
+		/*if(fpsGetter.howMany()<500)
+		{
+			fpsGetter.addTime(metadata.mediaTime);
+			if((fpsGetter.howMany()>100)&& (fpsGetter.howMany() % 100 == 0)){  
+				let probableFPS = fpsGetter.getProbableFPS();
+				console.log("Setting new media FPS " + probableFPS);
+				BB.Utils.setMediaFPS(probableFPS, options);
+			}
+		}*/
+
+		//calculate delta between mediatime and current time
+		let playerTime = video.currentTime;
+		let delta = ((playerTime - metadata.mediaTime)*1000);
+		//deltaCalc.add(delta);
+		deltaCur=delta;
+		video.requestVideoFrameCallback(onFrameVideoApple);
+
+	}
+	
+	let renderOnNextFrame = -1;
+	let lastDisplayTimeDelay = 9999;
+	let countUnderCorrection = 0;
+	let countAppleANI = 0;
+	let lastFrame=0;
+	
+	console.BBlog("Setting Callbacks");
+	console.BBlog("Checking window and methods");
+	if (typeof window !== 'undefined') {
+	  console.BBlog('The window object is defined. This script is running in a browser environment.');
+	} else {
+	  console.BBlog('The window object is not defined. This script might not be running in a browser environment.');
+	}
+
+	if ('requestAnimationFrame' in window) {
+	  console.BBlog('requestAnimationFrame is supported');
+	} else {
+	  console.BBlog('requestAnimationFrame is not supported');
+	}
+
+	if (typeof video !== 'undefined') {
+	  console.BBlog('Video object is defined. This script is running in a browser environment.');
+	} else {
+	  console.BBlog('Video object is not defined. This script might not be running in a browser environment.');
+	}
+
+	if ('requestVideoFrameCallback' in video) {
+	  console.BBlog('requestVideoFrameCallback is supported');
+	} else {
+	  console.BBlog('requestVideoFrameCallback is not supported');
+	}
+
+	if (platform.isWindows() || platform.isAndroid() || platform.isChromeMac()) {
+		window.requestAnimationFrame(onAnimatedFrameWindows2);
+		if (video.readyState >= 2) {
+			console.BBlog("video element is already loaded. Setting up requestVideoFrameCallback");
+			video.requestVideoFrameCallback(onFrameVideoWindows2);
+		}
+		else{
+			console.BBlog("video element is not yet loaded. Setting up loadedmetadata event to wait until it's loaded");
+			video.addEventListener('loadedmetadata', () => {
+				video.requestVideoFrameCallback(onFrameVideoWindows2);
+			});
+		}
+	} else if (platform.isSafariMac()) {
+		window.requestAnimationFrame(onAnimatedFrameApple3);
+		//video.requestVideoFrameCallback(onFrameVideoApple3);
+
+	}else {
+		console.BBlog("Platform not supported");
+	}
+	console.BBlog("CallBacks are set");
+	console.BBlog("Calculating ScreenFrameRate");
+	
+	function getAverageRefreshRate() {
+		return new Promise((resolve) => {
+		  let lastFrameTime = 0;
+		  const refreshRates = [];
+		  const numSamples = 20;
+	  
+		  function calculateRefreshRate(timestamp) {
+			if (lastFrameTime) {
+			  const delta = timestamp - lastFrameTime;
+			  const refreshRate = 1000 / delta;
+			  if (!(refreshRate === undefined))
+			  {
+				if ((refreshRate>0)&&(refreshRate<200))
+					refreshRates.push(refreshRate);
+			  }
+			  if (refreshRates.length === numSamples) {
+				const averageRate = refreshRates.reduce((a, b) => a + b, 0) / numSamples;
+
+				resolve(Math.round(averageRate));
+				return; // Stop after collecting the required number of samples
+			  }
+			}
+			lastFrameTime = timestamp;
+			requestAnimationFrame(calculateRefreshRate);
+		  }
+	  
+		  requestAnimationFrame(calculateRefreshRate);
+		});
+	}
+	  
+	  // Example usage:
+	getAverageRefreshRate().then((rate) => {
+		options.ScreenFPS = rate;
+		
+		if ((options.ScreenFPS > 70) || (options.ScreenFPS < 50))
+		{
+			console.BBerror(`Average refresh screen rate: ${rate} FPS, Aborting augmentation. Only 60FPS screens supported`);
+			options.stopAugment = true;
+		}
+		else
+		{
+			console.BBlog(`Average refresh screen rate: ${rate} FPS, Continuing augmentation`);
+		}
+
+	});	
+	const initializeComponents = () => {
+		//We load it all only when we know the game id
+		let playerCont = video.parentElement;
+		composer = new BB.Composer3d(playerCont,video,options);
+		ads = BB.Ads(composer, options);
+		metaDataFetcher = BB.MetaDataFetcher(options,composer);
+	}
+	const getCanvas = () => {
+		return composer.getCanvas();
+	}
+	const onNewSegmentInterface = (eventObj) =>
+	{
+		onNewSegmentForMetadata(eventObj);
+	};
+	const onNewMetadataInterface = (eventObj) =>
+	{
+		onNewMetadata(eventObj);
+	};
+	return {getCanvas, onNewSegmentInterface, onNewMetadataInterface, initializeComponents};
+};
+BB.Composer3d = class {
+    constructor(videoContainer,video,options) {
+		if (options.augmentation.renderTimecode) {
+			this.digitImg = {};
+			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 || {});
+		this.sourceFPS = BB.Utils.getSourceFPS(this.options.frameRateMode);
+        this.metadataArr = [];
+        this.metadataMap = {};
+        this.videoStarted = false;
+        this.advertisementMap = {};
+		this.ad2Url = {};//map an ad to its url
+		this.videoCopier = null;
+		//create a webgl canvas: 
+        this.canvas = document.createElement('canvas');
+		this.ctx = this.canvas.getContext('webgl2', {premultipliedAlpha: false});
+		if (this.ctx == null)
+		{
+			this.ctx = this.canvas.getContext('webgl', {premultipliedAlpha: false});
+			this.webGLVersion = 1;
+		}
+		else
+		{
+			this.webGLVersion = 2;
+		}
+		console.log("Created webgl1 context: " + this.ctx + " version " + this.webGLVersion);//@oror
+        
+		//place it on top of the video player:
+		let oTop = videoContainer.offsetTop;
+		let oLeft = videoContainer.offsetLeft;
+		let videoTag = videoContainer.getElementsByTagName("video")[0];
+		this.canvas.style.top = 0;
+		this.canvas.style.left = 0;	
+
+		// if (typeof wmcPlayer !='undefined')
+		// {
+		// 	this.canvas.style.top = 0;
+		// 	this.canvas.style.left = 0;	
+		// }
+		// else
+		// {
+		// 	this.canvas.style.top = oTop + "px";
+		// 	this.canvas.style.left = oLeft + "px";	
+		// }
+		
+		// if (videoTag.readyState >= 2) 
+		// {
+			// this.canvas.style.top = videoTag.style.top;
+			// this.canvas.style.left = videoTag.style.left;	
+		// }
+		// else
+		// {
+			// videoTag.addEventListener('loadedmetadata', () => {
+				// this.canvas.style.top = videoTag.offsetTop + "px";
+				// this.canvas.style.left = videoTag.offsetLeft + "px";	
+			// });
+		// }
+		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";
+		
+		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);
+		//let that = this;
+		//this.canvas.addEventListener("mousedown", function(e) {
+			//that.OnUserClickOnCanvas(e);
+		//});
+        this.InitGL();
+        this.adTexture = null;//general ad texture
+		this.place2AdTexture = {};//mapping specific places to their texture
+		this.place2ad = {};//mapping which ads belong to whcih place
+		this.ad2place = {};//other way around
+		this.currentAds2BoundingRect = [];//array of current-frame ads to their bounding rect 
+        this.lastTimeReportedIncomingTC = 0;
+        this.autoAddIndex = null;
+    }
+	
+	isPowerOf2(value) {
+	  return (value & (value - 1)) == 0;
+	}
+	CreateDigitImg(str) {
+		// Create a canvas element
+		let canvas = document.createElement('canvas');
+		canvas.width = 50; // Set the width of the canvas
+		canvas.height = 50; // Set the height of the canvas
+
+		// Get the 2D rendering context
+		let ctx = canvas.getContext('2d');
+		// Set the fill style to black
+		ctx.fillStyle = 'black';
+
+		// Fill the entire canvas with black
+		ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+		// Set the font properties
+		ctx.font = '30px Arial';
+		ctx.fillStyle = 'white';
+
+		// Draw the number on the canvas
+		ctx.fillText(str, 10, 35); // Adjust the position as needed
+		
+
+		// Convert the canvas to a data URL
+		let dataURL = canvas.toDataURL();
+
+		// Create an image element and set its source to the data URL
+		let img = document.createElement('img');
+		img.src = dataURL;
+		
+		return img;
+	}
+	OnUserClickOnCanvas(e) {
+		const rect = this.canvas.getBoundingClientRect();
+		let x = event.clientX - rect.left;
+		let y = event.clientY - rect.top;
+		x = x/(rect.right - rect.left);
+		y = y/(rect.bottom - rect.top);
+		//console.log("CANVAS CLICKED ! x: " + x + " y: " + y);
+		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;
+			}
+		}
+		
+	}
+	/*TexUnitForInjectoLogo(){
+		return 0;
+	}*/
+	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;
+	}
+	/*TexUnitForVideo() {
+		let placesArr = Object.keys(this.place2ad);
+		return 1 + placesArr.length;
+	}*/
+	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;// + 1;
+	}
+    InitGL() {
+		// setup GLSL this.program
+		let newFragmentShaderSource = BB.GL.fragmentShaderSource;
+		//FIX for MAC (it has bugs with transparensy with light and bright colors so didabling transparensy if alpha in shader is less then 0.8)
+		if (BB.Utils.Platform.isSafariMac())
+			newFragmentShaderSource = BB.GL.fragmentShaderSource.replace("if (alpha == 0.0)", "if (alpha < 0.8)");
+		this.program = webglUtils.createProgramFromSources(this.ctx,
+		this.webGLVersion == 2 ? [BB.GL.vertexShaderSource, newFragmentShaderSource] :
+								 [BB.GL.vertexShaderSourceV1, BB.GL.fragmentShaderSourceV1]);
+		this.ctx.clearColor(0.0, 0.0, 0.0, 0.0);//Set clear color to black, fully opaque
+		this.ctx.clear(this.ctx.COLOR_BUFFER_BIT);// Clear the color buffer with specified clear color
+		this.ctx.useProgram(this.program);// Tell it to use our this.program (pair of shaders)
+		this.counter = 0;
+		this.CleanGL();
+    }
+	CleanGL() {
+		this.canvas.style.display="none";
+		this.alphaFound = 0;
+	}
+    GenerateTexture(
+        imageData,
+        textureUnit,
+        uniformName,
+        internalFormat,
+        width,
+        height,
+        oneByteAlignment) {
+        //void this.ctx.texImage2D(target, level, internalformat, width, height, border, format, type, ImageData source);
+        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, false);
+        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 && this.isPowerOf2(widthToInspect) && heightToInspect && this.isPowerOf2(heightToInspect)) {
+				// Yes, it's a power of 2. Generate mips.
+			   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
+		{
+			// Set the parameters so we can render any size image.
+			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);
+    }
+	AddAdvertisement(name, path, cb = null) {
+		
+        if(name.indexOf(".json") > -1) {
+            fetch(path).then(async res => {
+                this.place2ad = await res.json();
+				this.ad2place = {}
+				//create also the reverse mapping
+				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;
+            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;
+    }
+	MakeSureAdPerPlace() {
+		//in case we have places, make sure each place has its initial ad
+		if (this.place2ad) {
+			let placesArr = Object.keys(this.place2ad);
+			for (let i = 0; i < placesArr.length; ++i) {
+				let place = placesArr[i];
+				//do we have a texture for that place ?
+				if (!this.place2AdTexture[place] && this.place2ad[place].length > 0) {//no we don't, add one
+					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 {
+			//is it for specific place ?
+			if (this.ad2place && this.ad2place[name]) {//ad for a particular place
+				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 {//general ad
+				if (this.adTexture != null) {
+					this.ctx.deleteTexture(this.adTexture)
+				}
+				this.adTexture = this.GenerateTexture(adImage, this.TexUnitForGenericAd(), "ad0");
+				this.lastAd = adImage;
+				this.lastAdName = name;
+			}
+        }
+    };
+
+    OnMetaData(frameMetaData) {
+		//console.BBlog("OnMetaData " + frameMetaData.timecode);
+		this.metadataMap[frameMetaData.timecode] = frameMetaData;
+		this.metadataArr.push(frameMetaData.timecode);
+    }
+
+    ToggleFullscreen ()  {
+        (this.requestFullscreen || this.webkitRequestFullscreen).call(this).catch((err) => {
+            console.error(err)
+        });
+    }
+
+    RenderFrame() {
+        // look up where the vertex data needs to go.
+        //let texCoordAttributeLocation = this.ctx.getAttribLocation(this.program, "a_texCoord");
+        let positionAttributeLocation = this.ctx.getAttribLocation(this.program, "a_position");
+        
+
+        // set the resolution for both vertex and fragment shaders
+        let resolutionLocation = this.ctx.getUniformLocation(this.program, "u_resolution");
+        let resolutionLocation2 = this.ctx.getUniformLocation(this.program, "u_resolution2");
+        this.ctx.uniform2f(resolutionLocation, this.ctx.canvas.width, this.ctx.canvas.height);
+        this.ctx.uniform2f(resolutionLocation2, this.ctx.canvas.width, this.ctx.canvas.height);
+
+        //shader matrix (unity):
+		if (this.webGLVersion == 2)
+		{
+			let matrixLocation = this.ctx.getUniformLocation(this.program, "u_matrix");
+			let matrix = [
+				1, 0, 0,
+				0, 1, 0,
+				0, 0, 1
+			];
+			this.ctx.uniformMatrix3fv(matrixLocation, false, matrix);
+		}
+		
+		let vao = null;
+		if (this.webGLVersion == 2)
+		{
+			// Create a vertex array object (attribute state)
+			vao = this.ctx.createVertexArray();
+
+			// and make it the one we're currently working with
+			this.ctx.bindVertexArray(vao);
+		}
+
+        // Create a buffer and put a single pixel space rectangle in
+        // it (2 triangles)
+        let positionBuffer = this.ctx.createBuffer();
+
+        // Turn on the attribute
+        this.ctx.enableVertexAttribArray(positionAttributeLocation);
+
+        // Bind it to ARRAY_BUFFER (think of it as ARRAY_BUFFER = positionBuffer)
+        this.ctx.bindBuffer(this.ctx.ARRAY_BUFFER, positionBuffer);
+
+        // Tell the attribute how to get data out of positionBuffer (ARRAY_BUFFER)
+        let size = 2;          // 2 components per iteration
+        let type = this.ctx.FLOAT;   // the data is 32bit floats
+        let normalize = false; // don't normalize the data
+        let stride = 0;        // 0 = move forward size * sizeof(type) each iteration to get the next position
+        let offset = 0;        // start at the beginning of the buffer
+        this.ctx.vertexAttribPointer(
+            positionAttributeLocation, size, type, normalize, stride, offset);
+
+        // provide texture coordinates for the rectangle.
+        let texCoordBuffer = this.ctx.createBuffer();
+        this.ctx.bindBuffer(this.ctx.ARRAY_BUFFER, texCoordBuffer);
+        this.ctx.bufferData(this.ctx.ARRAY_BUFFER, new Float32Array([
+            0.0, 0.0,
+            1.0, 0.0,
+            0.0, 1.0,
+            0.0, 1.0,
+            1.0, 0.0,
+            1.0, 1.0,
+        ]), this.ctx.STATIC_DRAW);
+
+        
+		/*
+        // Turn on the attribute
+        this.ctx.enableVertexAttribArray(texCoordAttributeLocation);
+
+        // Tell the attribute how to get data out of texCoordBuffer (ARRAY_BUFFER)
+        let size = 2;          // 2 components per iteration
+        let type = this.ctx.FLOAT;   // the data is 32bit floats
+        let normalize = false; // don't normalize the data
+        let stride = 0;        // 0 = move forward size * sizeof(type) each iteration to get the next position
+        let offset = 0;        // start at the beginning of the buffer
+        this.ctx.vertexAttribPointer(
+            texCoordAttributeLocation, size, type, normalize, stride, offset);
+		*/
+        //webglUtils.resizeCanvasToDisplaySize(this.ctx.canvas);
+
+        // Tell WebGL how to convert from clip space to pixels
+        this.ctx.viewport(0, 0, this.ctx.canvas.width, this.ctx.canvas.height);
+
+        // Clear the canvas
+        this.ctx.clearColor(0, 0, 0, 0);
+        this.ctx.clear(this.ctx.COLOR_BUFFER_BIT | this.ctx.DEPTH_BUFFER_BIT);
+
+        // Bind the attribute/buffer set we want.
+        //this.ctx.bindVertexArray(vao);
+
+
+        // Bind the position buffer so this.ctx.bufferData that will be called
+        // in setRectangle puts data in the position buffer
+        this.ctx.bindBuffer(this.ctx.ARRAY_BUFFER, positionBuffer);
+
+        // Set a rectangle the same size as the image.
+        this.SetRectangle(this.ctx, 0, 0, this.canvas.width, this.canvas.height);
+
+        // Draw the rectangle.
+        let primitiveType = this.ctx.TRIANGLES;
+        //let offset = 0;
+        let count = 6;
+        this.ctx.drawArrays(primitiveType, offset, count);
+    }
+
+    SetRectangle(gl, 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) {
+		let tcTranslator = BB.Utils.TimeCodesFramesTranslator;
+		//console.log("nextTimeCode: " + nextTimeCode);//@oror  "00:00:14:02.1"
+		let tc = tcTranslator.timeCodeStr2TimeCodeArray(nextTimeCode);
+		let tcPlus1 = tcTranslator.TimeCodeAddFrames(tc, 1, this.sourceFPS);
+		let tcPlus2 = tcTranslator.TimeCodeAddFrames(tc, 2, this.sourceFPS);
+		let tcPlus1Str = tcTranslator.printTimecode(tcPlus1);
+		let tcPlus2Str = tcTranslator.printTimecode(tcPlus2);
+		
+		
+		this.videoStarted = true;
+        const t1 = performance.now();
+        
+            
+		//clean all the earliest meta:
+		/*
+		while (this.metadataArr.length > 0 &&
+			this.metadataArr[0] < nextTimeCode) {
+			let toDeleteFrameMetaData = this.metadataMap[this.metadataArr[0]];
+			for (const key in toDeleteFrameMetaData.placeholders) {
+				let holderToDelete = toDeleteFrameMetaData.placeholders[key];
+				if (holderToDelete.alphaAsUint8Array) {
+					holderToDelete.alphaAsUint8Array = null;
+				}
+			}
+			delete this.metadataArr[this.metadataArr[0]];
+			this.metadataArr.shift();
+		}
+		*/
+
+		//get the next meta frame
+		let frameMetaData = null;
+		let next = [];
+		if (this.metadataMap[nextTimeCode]) {
+			frameMetaData = this.metadataMap[nextTimeCode];
+			/*delete this.metadataMap[nextTimeCode];
+			if (this.sourceFPS < 40) {
+				delete this.metadataMap[nextTimeCode + ".1"];
+			}*/
+				
+			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 > -1) this.metadataArr.splice(metaArrIndex, 1); //was
+			if (metaArrIndex > -5) this.metadataArr.splice(0, metaArrIndex-4).forEach(item => {
+				delete this.metadataMap[item];
+			});
+			this.alphaFound++;
+		}
+		else {
+			this.counter++;
+			if(this.counter > 60)
+			{
+				this.counter = 0;
+				console.error("Missing meta data at time code " + nextTimeCode);
+			}
+			this.alphaFound++; //test for drawing number always
+			//this.alphaFound = 0;
+			////nextImageData.buffer = null;
+			//return;
+		}
+		if (this.alphaFound > 30 && this.canvas.style.display == "none") {
+			this.canvas.style.display = "";
+		}
+		
+		let texturesForThisFrame = [];
+		this.canvas.width = 1280;
+		this.canvas.height = 720;
+				
+		let placeHolderIndex = 0;
+		this.currentAds2BoundingRect = [];//reset the coordinates
+		if (frameMetaData) {
+			//set the canvas size according the engine's canvas size
+			// if (frameMetaData.canvasSize && (
+			//     frameMetaData.canvasSize.width != this.ctx.canvas.width ||
+			//     frameMetaData.canvasSize.height != this.ctx.canvas.height)) {
+			//     this.ctx.canvas.width = frameMetaData.canvasSize.width;
+			//     this.ctx.canvas.height = frameMetaData.canvasSize.height;
+			// }
+
+			//for each place-holder, create an alpha texture and inform the shader of the alpha mate's position and size
+			//if (false)
+			let doNotRenderAugmentation = false;
+			if (this.options.debug)
+			{
+				var checkbox_doNotRenderAugmentation = document.getElementById('doNotRenderAugmentationCheckbox');
+				doNotRenderAugmentation = checkbox_doNotRenderAugmentation.checked;
+			}
+			if(!doNotRenderAugmentation)
+			for (const key in frameMetaData.placeholders) {
+				const holder = frameMetaData.placeholders[key];
+				if (!holder.alphaAsUint8Array) continue;
+				//create the alpha texture
+				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);
+				//notify the shader that this place-holder exist
+				let hasLogoUniformName = "hasLogo" + placeHolderIndex;
+				let hasLogoLoc = this.ctx.getUniformLocation(this.program, hasLogoUniformName);
+				this.ctx.uniform1i(hasLogoLoc, 1);
+				//tell the shader whcih add to use for this placeholder
+				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));
+				}
+				
+				//set that alpha top-left and size
+				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]);
+				//homography:
+				let homographyMatrixUniformName = "u_matrix" + placeHolderIndex;
+				let placeHolderHomographyLocation = this.ctx.getUniformLocation(this.program, homographyMatrixUniformName);
+				this.ctx.uniformMatrix3fv(placeHolderHomographyLocation, false, holder.tranform);
+				//bounding rect:
+				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
+					});
+				}
+				/*
+				//This code create the perspective transform in JS
+				//Currently we use the transformation supplied with the frameMetaData instead
+				let srcCorners = [
+					0, 0,
+					this.canvas.width, 0,
+					this.canvas.width, this.canvas.height,
+					0, this.canvas.height];
+			   
+				let dstCorners = [];
+				let ratioX = this.canvas.width / frameMetaData.processingWidth;
+				let ratioY = this.canvas.height / frameMetaData.processingHeight;
+				for (let corner of holder.corners) {
+					corner.x *= ratioX;
+					corner.y *= ratioY;
+					dstCorners[dstCorners.length] = corner.x;
+					dstCorners[dstCorners.length] = corner.y;
+				}
+			   
+				let perspT = PerspT(srcCorners, dstCorners);
+				this.ctx.uniformMatrix3fv(placeHolderHomographyLocation, false, perspT.coeffsInv);
+				*/
+				placeHolderIndex++;
+			}
+		} else {
+			//    console.log(`No data at ${tc}`);
+		}
+
+		//mark the other logo as "not exist"
+		for (; placeHolderIndex < BB.MAX_LOGOS; ++placeHolderIndex) {
+			let hasLogoUniformName = "hasLogo" + placeHolderIndex;
+			let hasLogoLoc = this.ctx.getUniformLocation(this.program, hasLogoUniformName);
+			this.ctx.uniform1i(hasLogoLoc, 0);
+                        //unbind the textures that are not required 
+                        let alphaUnfiromName = "alpha" + placeHolderIndex;
+			let location = this.ctx.getUniformLocation(this.program, alphaUnfiromName);
+			this.ctx.uniform1i(location, 0);
+		}
+		//render the timecode on the canvas (for debug)
+		if (this.options.augmentation.renderTimecode) 
+		{{
+			let framesAndField = nextTimeCode.split(":")[3];
+			let field = (framesAndField.indexOf(".") >= 0) ? 2 : 1;
+			let frameLastDigit = parseInt(framesAndField.split(".")[0])%10;
+			let debugImgStr = frameLastDigit + "." + field;//"1.1";
+			//console.log("render " + debugImgStr + " tc = " + nextTimeCode + " scedueled on frame " + debug_lastFrameFromVideoCallback + "(" + debug_tc + ")");
+			let digitTextureNum = this.TexUnitBaseForAlpha() + 5;
+			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);
+			//set that digit's top-left and size
+			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]);
+			
+			//let digitTopLeftUniformName2 = "u_digitTopLeft2";
+			//let digitTopLeftLoc2 = this.ctx.getUniformLocation(this.program, digitTopLeftUniformName2);
+			//this.ctx.uniform2fv(digitTopLeftLoc2, [1000, 0]);
+			
+			
+		}
+		/*{
+			let framesAndField = nextTimeCode.split(":")[3];
+			let field = (framesAndField.indexOf(".") >= 0) ? 2 : 1;
+			let frameLastDigit = parseInt(framesAndField.split(".")[0])%10;
+			let debugImgStr = frameLastDigit + "." + field;//"1.1";
+			//console.log("render " + debugImgStr + " tc = " + nextTimeCode + " scedueled on frame " + debug_lastFrameFromVideoCallback + "(" + debug_tc + ")");
+			let digitTextureNum = this.TexUnitBaseForAlpha() + 5;
+			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);
+			//set that digit's top-left and size
+			let digitTopLeftUniformName = "u_digitTopLeft2";
+			let digitTopLeftLoc2 = this.ctx.getUniformLocation(this.program, digitTopLeftUniformName);
+			this.ctx.uniform2fv(digitTopLeftLoc2, [1000, 0]);
+			let digitSizeUniformName = "u_digitSize";
+			let digitSizeLoc = this.ctx.getUniformLocation(this.program, digitSizeUniformName);
+			this.ctx.uniform2fv(digitSizeLoc, [200, 200]);
+		}*/
+			/*
+			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));
+			}
+			*/
+		}	
+		else //no digit
+		{
+			let hasDigitUniformName = "hasDigit";
+			let hasDigitLoc = this.ctx.getUniformLocation(this.program, hasDigitUniformName);
+			this.ctx.uniform1i(hasDigitLoc, 0);
+		}
+
+		//render the frame
+		this.RenderFrame();
+
+		//cleanup:
+		//delete the texture created for this frame
+		for (const texture of texturesForThisFrame) {
+			this.ctx.deleteTexture(texture);
+		}
+        
+    }
+	getCanvas() {
+		return this.canvas;
+	}
+}
+BB.Ads = (composer, options) => {
+	let selectedAdsList = [];
+	const socket = new BB.Socket((type, message) => {
+        switch (type) {
+            case "roommembers":
+                console.log("roommembers message: ", message);
+                break;
+            case "join":
+                const name = document.getElementById("name");
+				if(name){
+					name.textContent = socket.name;	
+				}
+                break;
+            case "messageroom":
+                if (message.player === socket.name) {
+                    if (message.url) {
+                        const name = "#external";
+                        composer.AddAdvertisement(name, message.url, () => {
+                            composer.SelectAd(name);
+                        });
+                    } else {
+                        selectedAdsList = message.ads;
+                        if (selectedAdsList.length) {
+                            composer.SelectAd(selectedAdsList[0]);
+                        }
+                    }
+                }
+                break;
+            case "ads":
+                selectedAdsList = message;
+                if (selectedAdsList.length) {
+                    composer.SelectAd(selectedAdsList[0]);
+                }
+                break;
+        }
+    });
+	
+	var script = document.createElement('script');
+    script.src = 'https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.0/socket.io.js';
+    document.getElementsByTagName('head')[0].appendChild(script);
+	script.onload = function() {
+		socket.Connect(options.augmentation.channelName);
+	}
+
+	//load the ads for this projects:
+	if (options.augmentation.logoURL) {
+		composer.AddAdvertisement(`#ad`, options.augmentation.logoURL);
+	}
+	else //get logo according to the channel's S3 bucket
+	{
+		fetch("https://www.virtualott.com/ads/" + options.augmentation.channelName).then(async (res) => {
+				const list = await res.json();
+			list.forEach(photo => {
+				composer.AddAdvertisement(`#${photo.name}`, photo.url);
+			});
+		});
+	}
+	
+};
+BB.MetaDataFetcher = (options, composer) => {
+	let tcTranslator = BB.Utils.TimeCodesFramesTranslator;
+	let sourceFPS = BB.Utils.getSourceFPS(options.frameRateMode);
+	let folderName;
+	let lastFrames;
+	let metadataWorker = null;
+	let overlayWorker = null;
+	console.log("Project name: " + options.gameId);
+	const setMetaDataFolderName = (_folderName) => {
+		folderName = _folderName;
+		console.log("Folder name for " + options.gameId + ": " + folderName);
+		if (lastFrames) {
+			loadMetaData(lastFrames);
+		}
+	};
+	async function getMetaDataFolderName() {
+		const res = await fetch(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);
+		//}
+		setMetaDataFolderName(options.gameId);//set the project's folder
+	}
+	getMetaDataFolderName();
+	const setLastFrame = (framesNum) => {
+		lastFrames = framesNum;
+		if (folderName) {
+			loadMetaData(lastFrames);
+		}
+	}
+	const loadMetaData = (lastFrames) => {
+		//console.BBlog("loadMetaData");
+		if (metadataWorker == null) {
+			console.BBlog("We have no MetaDataDownloaderThread yet. Creating it");
+			let blob = new Blob([META_WORKER], { type: 'application/javascript' });
+			metadataWorker = new Worker(URL.createObjectURL(blob));
+			// Handle errors from the worker
+			metadataWorker.onerror = function(error) {
+				console.error('Error from worker:', error);
+			};
+
+			// Optionally handle the onerror event using addEventListener
+			metadataWorker.addEventListener('error', function(error) {
+				console.error('Error from worker (via addEventListener):', error.message);
+			});
+			if (metadataWorker) console.BBlog("MetaDataDownloaderThread created");
+			else console.BBlog("Error in creating MetaDataDownloaderThread");
+			metadataWorker.addEventListener("message", (msg) => {
+				if (msg.data.time) {
+					//Debug("prof",msg.data.time);
+				} else {
+					//console.BBlog("loaded MetaData");
+					composer.OnMetaData(msg.data);//send to composer
+				}
+			});
+			//get the last timecode with 2-sec round-down
+			let timeCode = tcTranslator.TimeCodeArray2TimeCodeJson(tcTranslator.Frames2Timecode(lastFrames,sourceFPS,true));
+			metadataWorker.postMessage({cloudFrontURL:options.cloudFrontURL, folderName:folderName, tc: tcTranslator.printTimecode(timeCode, false)});
+		}
+		else //the metadata worker is already in action, let it know the current playing data so the max-timecode is updated accordingly
+		{
+			let timeCode = tcTranslator.TimeCodeArray2TimeCodeJson(tcTranslator.Frames2Timecode(lastFrames,sourceFPS,true));
+			metadataWorker.postMessage({tc: tcTranslator.printTimecode(timeCode, false),enabled:options.enabled});
+		}
+	}	
+	
+	return {
+		setLastFrame:setLastFrame
+	};
+}
+BB.OTTPlayer = class {
+	constructor(video, srcFrameRate, optionsFromMK){
+		//first, generate the inital options:
+		this.video = video;
+		this.srcFrameRate = srcFrameRate;
+		console.log("optionsFromMK: ", optionsFromMK);
+		this.options = Object.assign({
+			enabled:true,
+			stopAugment:false, //setted to true when there is exception or smt went wrong
+			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",
+			frameRateMode:BB.FrameRateMode.Src59_MediaTime60,
+			renderingMode:BB.RenderingMode.Augment, //MUST, other will not work in this test
+			SynchMethod:BB.SynchMethod.None,
+			debug:false,
+			augmentation: {
+				renderTimecode:true,
+				offset:0
+			},
+			syncPoint: {
+				frame:0,
+				playerTime:0,
+				mediaTimeMS:0
+			}
+		}, optionsFromMK || {});
+		console.log("options after merge with MK's options: ", this.options);
+		this.options.augmentation.channelName = "nba";
+		console.BBlog = function(message) {
+			console.log("OTTPlayer: " + message);
+		};
+		console.BBerror = function(message) {
+			console.error("OTTPlayer: " + message);
+		};
+		//this.options.debug = true; //alal//
+		function compareVersions(version1, version2) {
+
+			const v1 = version1.split('.').map(Number);
+			const v2 = version2.split('.').map(Number);
+		
+			for (let i = 0; i < Math.max(v1.length, v2.length); i++) {
+				const num1 = v1[i] || 0;
+				const num2 = v2[i] || 0;
+		
+				if (num1 < num2) {
+					return -1;
+				} else if (num1 > num2) {
+					return 1;
+				}
+			}
+		
+			return 0;
+		}
+		this.getGlobalConfig();
+		
+		
+	}
+	//after we merged the options with the url-param global config
+	init() {			
+		//override with global options:
+		if (typeof globalConfig === 'undefined') 
+			this.options = Object.assign(this.options, {});
+		else
+			this.options = Object.assign(this.options, globalConfig);
+		this.options.augmentation.offset = 0;
+		console.log("options after merge with the global options: ", this.options);
+		//this.options.debug = true; //alal
+		//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"];
+			for (let i = 0; i < elementsToHide.length; i++) {
+				const elemToHide = document.getElementById(elementsToHide[i]);
+				if (elemToHide) {
+					elemToHide.style.display = "none";
+				}
+			}
+		}
+				
+		let platformDetector = BB.Utils.Platform;
+		let tcTranslator = BB.Utils.TimeCodesFramesTranslator;
+		if (this.srcFrameRate) this.SetFps(this.srcFrameRate);
+		this.fetchAndFindGameIdAndOffsetFromMediaId(this.options.gameId);//this will fetch the right game id and the right 
+		
+	}
+	weHaveTheGameID() {
+		//we need to have this.option.offset updated at this stage so the augmentor will get the right offset
+		let line = {};
+		this.frameDrawer = BB.Augmenter(line, this.video, this.options);
+		if (this.options.renderingMode == BB.RenderingMode.Augment) {
+			//we need the game id to connect to the right bucket
+			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();
+				console.log("Got the following config: ", configJson);
+				if (typeof globalConfig== 'undefined') window.globalConfig = {};
+				globalConfig = Object.assign({}, globalConfig, configJson);
+				
+				
+			} catch (error) {
+				console.error('Error fetching JSON:', error);
+			}
+		}
+		this.init();
+	}	
+		
+	// Function to fetch the JSON and find the value for mediaID
+	async fetchAndFindGameIdAndOffsetFromMediaId(mediaID) {
+		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")) {
+				const value = jsonData["GAME_ID"];
+				console.BBlog(`GameId for mediaid= ${mediaID}: ${value}`);
+				this.options.gameId = value;
+				console.log("fetchAndFindGameIdAndOffsetFromMediaId: I Know what is the game id ! Its " +  this.options.gameId + ", so I'm launching the meta-data fetcher web-worker");
+				this.weHaveTheGameID();
+				
+				//metaDataFetcher = BB.MetaDataFetcher(options,composer);
+				this.fetchOffsetForGameId(this.options.gameId);
+
+			} else {
+				console.BBerror(`MediaID ${mediaID} not found in JSON.`);
+				this.options.stopAugment = true;
+		}
+		} catch (error) {
+			console.BBerror('Error fetching and processing GameId JSON:', error);
+			//this.options.stopAugment = true;
+		}
+	}
+
+	// Function to fetch the JSON and find the value for mediaID
+	async fetchOffsetForGameId(gameId) {	
+		try {
+			const response = await fetch(this.options.offsetJsonURL + "/" + this.options.gameId);
+			
+			if (!response.ok) {
+				console.BBlog(`HTTP error! Status: ${response.status}`);
+				setTimeout(() => {
+				  this.fetchOffsetForGameId(gameId);
+				}, 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.BBlog(`Offest for gameid= ${gameId}: ${value}`);
+					this.options.augmentation.offset = value;
+					//call get-offset again later on
+					setTimeout(() => {
+					  this.fetchOffsetForGameId(gameId);
+					}, 60000);
+				}
+			} else {
+				console.BBlog(`offset for ${mediaID} not found in JSON.`);
+				setTimeout(() => {
+				  this.fetchOffsetForGameId(gameId);
+				}, 5000);
+			}
+		} catch (error) {
+			console.BBerror('Error fetching and processing JSON:', error);
+			setTimeout(() => {
+				  this.fetchOffsetForGameId(gameId);
+				}, 5000);
+			
+		}
+	}
+
+	Toggle (flag) {
+		this.options.enabled = flag;
+	}
+	GetCanvas(){
+		return this.frameDrawer.getCanvas();
+	}
+	SetFps(fps){
+		let platformDetector = BB.Utils.Platform;
+		switch(fps)
+		{
+			case 60:
+				this.options.frameRateMode = BB.FrameRateMode.Src60_MediaTime60;
+				break;
+			case 60000/1001:
+			case 59.94:
+				if (platformDetector.isWindows() || platformDetector.isAndroid() || platformDetector.isChromeMac()) {
+					this.options.frameRateMode = BB.FrameRateMode.Src59_MediaTime59;
+				}
+				else { //we are playing on MAC Safary 59.94 source HLS(only) in 59.99 mediaTimeFPS //only for HLS
+					//options.frameRateMode = BB.FrameRateMode.Src59_MediaTime60;
+					this.options.frameRateMode = BB.FrameRateMode.Src59_MediaTime59;
+				}
+				break;
+			case 30000/1001:
+			case 29.97:
+				this.options.frameRateMode = BB.FrameRateMode.Src29_MediaTime29;
+				break;
+			default:
+				console.error("Unsupported src frame-rate: " + fps + "fps");
+				break;
+		}
+	}
+	SetSyncPoint(syncPoint)
+	{
+		this.options.syncPoint = syncPoint;
+		
+	}
+	onNewSegment(eventObj) 
+	{
+		this.frameDrawer.onNewSegmentInterface(eventObj);
+	}
+	onNewMetadata(eventObj) 
+	{
+		this.frameDrawer.onNewMetadataInterface(eventObj);
+	}
+}