@twintag/twintag-core 0.2.283 → 0.2.284-fix-scanner-stream-visibility-9ac029dedd8eb46b8c97b6a6b8dfdb114e5e5de8

package/dist/cjs/loader.cjs.js

@@ -14,7 +14,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return index.bootstrapLazy([["twintag-preview.cjs",[[1,"twintag-preview",{"item":[1],"initial":[16],"smoothExtinction":[2,"smooth-extinction"],"extension":[1],"showButtons":[4,"show-buttons"],"previewableItem":[32],"type":[32]}]]],["twintag-auth-callback.cjs",[[1,"twintag-auth-callback"]]],["twintag-auth-logout.cjs",[[1,"twintag-auth-logout"]]],["twintag-media.cjs",[[1,"twintag-media",{"first":[1],"middle":[1],"last":[1]}]]],["twintag-ocr-scanner.cjs",[[1,"twintag-ocr-scanner",{"stream":[1040],"mode":[1],"cropX":[2,"crop-x"],"cropY":[2,"crop-y"],"devices":[32]},[[0,"updateZoom","updateZoom"],[2,"recognize","ocrHandler"]]]]],["twintag-offline-actions.cjs",[[1,"twintag-offline-actions",{"enableSingleRetry":[4,"enable-single-retry"],"header":[1],"showTimestamp":[4,"show-timestamp"],"showDescription":[4,"show-description"],"closeText":[1,"close-text"],"retryText":[1,"retry-text"],"noPendingActionsText":[1,"no-pending-actions-text"],"pendingOfflineRequests":[32],"processing":[32]},[[8,"offlineRequestsChanged","offlineRequestsChangedHandler"]]]]],["twintag-offline-state.cjs",[[1,"twintag-offline-state",{"onlineState":[32],"pendingRequests":[32]},[[8,"onlineChanged","onlineChangedHandler"],[8,"offlineRequestsChanged","offlineRequestsChangedHandler"]]]]],["twintag-offline-support.cjs",[[1,"twintag-offline-support",{"autoSync":[4,"auto-sync"],"forceOffline":[4,"force-offline"],"config":[16]}]]],["twintag-qr-scanner.cjs",[[1,"twintag-qr-scanner",{"stream":[1040],"mode":[1],"format":[1],"crop":[514],"devices":[32],"decoderIsBusy":[32]},[[0,"updateZoom","updateZoom"]]]]],["twintag-share.cjs",[[1,"twintag-share",{"url":[1],"modalTitle":[1,"modal-title"],"modalSubtitle":[1,"modal-subtitle"],"closeBtn":[1,"close-btn"],"copyClipboardBtn":[1,"copy-clipboard-btn"],"open":[1540]},[[0,"keydown","handleKeyDown"]]]]],["twintag-spinner.cjs",[[1,"twintag-spinner",{"color":[513],"duration":[2],"name":[1]}]]],["twintag-pdf-viewer.cjs",[[0,"twintag-pdf-viewer",{"src":[1],"fileName":[1,"file-name"],"file":[32],"fileURL":[32]}]]]], options);
+  return index.bootstrapLazy([["twintag-preview.cjs",[[1,"twintag-preview",{"item":[1],"initial":[16],"smoothExtinction":[2,"smooth-extinction"],"extension":[1],"showButtons":[4,"show-buttons"],"previewableItem":[32],"type":[32]}]]],["twintag-auth-callback.cjs",[[1,"twintag-auth-callback"]]],["twintag-auth-logout.cjs",[[1,"twintag-auth-logout"]]],["twintag-media.cjs",[[1,"twintag-media",{"first":[1],"middle":[1],"last":[1]}]]],["twintag-ocr-scanner.cjs",[[1,"twintag-ocr-scanner",{"stream":[1040],"mode":[1],"cropX":[2,"crop-x"],"cropY":[2,"crop-y"],"devices":[32]},[[0,"updateZoom","updateZoom"],[2,"recognize","ocrHandler"]]]]],["twintag-offline-actions.cjs",[[1,"twintag-offline-actions",{"enableSingleRetry":[4,"enable-single-retry"],"header":[1],"showTimestamp":[4,"show-timestamp"],"showDescription":[4,"show-description"],"closeText":[1,"close-text"],"retryText":[1,"retry-text"],"noPendingActionsText":[1,"no-pending-actions-text"],"pendingOfflineRequests":[32],"processing":[32]},[[8,"offlineRequestsChanged","offlineRequestsChangedHandler"]]]]],["twintag-offline-state.cjs",[[1,"twintag-offline-state",{"onlineState":[32],"pendingRequests":[32]},[[8,"onlineChanged","onlineChangedHandler"],[8,"offlineRequestsChanged","offlineRequestsChangedHandler"]]]]],["twintag-offline-support.cjs",[[1,"twintag-offline-support",{"autoSync":[4,"auto-sync"],"forceOffline":[4,"force-offline"],"config":[16]}]]],["twintag-qr-scanner.cjs",[[1,"twintag-qr-scanner",{"stream":[1040],"mode":[1],"format":[1],"crop":[514],"devices":[32],"decoderIsBusy":[32]},[[1,"updateZoom","updateZoom"]]]]],["twintag-share.cjs",[[1,"twintag-share",{"url":[1],"modalTitle":[1,"modal-title"],"modalSubtitle":[1,"modal-subtitle"],"closeBtn":[1,"close-btn"],"copyClipboardBtn":[1,"copy-clipboard-btn"],"open":[1540]},[[0,"keydown","handleKeyDown"]]]]],["twintag-spinner.cjs",[[1,"twintag-spinner",{"color":[513],"duration":[2],"name":[1]}]]],["twintag-pdf-viewer.cjs",[[0,"twintag-pdf-viewer",{"src":[1],"fileName":[1,"file-name"],"file":[32],"fileURL":[32]}]]]], options);
   });
 };
 

package/dist/cjs/stencil-web-components.cjs.js

@@ -15,5 +15,5 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return index.bootstrapLazy([["twintag-preview.cjs",[[1,"twintag-preview",{"item":[1],"initial":[16],"smoothExtinction":[2,"smooth-extinction"],"extension":[1],"showButtons":[4,"show-buttons"],"previewableItem":[32],"type":[32]}]]],["twintag-auth-callback.cjs",[[1,"twintag-auth-callback"]]],["twintag-auth-logout.cjs",[[1,"twintag-auth-logout"]]],["twintag-media.cjs",[[1,"twintag-media",{"first":[1],"middle":[1],"last":[1]}]]],["twintag-ocr-scanner.cjs",[[1,"twintag-ocr-scanner",{"stream":[1040],"mode":[1],"cropX":[2,"crop-x"],"cropY":[2,"crop-y"],"devices":[32]},[[0,"updateZoom","updateZoom"],[2,"recognize","ocrHandler"]]]]],["twintag-offline-actions.cjs",[[1,"twintag-offline-actions",{"enableSingleRetry":[4,"enable-single-retry"],"header":[1],"showTimestamp":[4,"show-timestamp"],"showDescription":[4,"show-description"],"closeText":[1,"close-text"],"retryText":[1,"retry-text"],"noPendingActionsText":[1,"no-pending-actions-text"],"pendingOfflineRequests":[32],"processing":[32]},[[8,"offlineRequestsChanged","offlineRequestsChangedHandler"]]]]],["twintag-offline-state.cjs",[[1,"twintag-offline-state",{"onlineState":[32],"pendingRequests":[32]},[[8,"onlineChanged","onlineChangedHandler"],[8,"offlineRequestsChanged","offlineRequestsChangedHandler"]]]]],["twintag-offline-support.cjs",[[1,"twintag-offline-support",{"autoSync":[4,"auto-sync"],"forceOffline":[4,"force-offline"],"config":[16]}]]],["twintag-qr-scanner.cjs",[[1,"twintag-qr-scanner",{"stream":[1040],"mode":[1],"format":[1],"crop":[514],"devices":[32],"decoderIsBusy":[32]},[[0,"updateZoom","updateZoom"]]]]],["twintag-share.cjs",[[1,"twintag-share",{"url":[1],"modalTitle":[1,"modal-title"],"modalSubtitle":[1,"modal-subtitle"],"closeBtn":[1,"close-btn"],"copyClipboardBtn":[1,"copy-clipboard-btn"],"open":[1540]},[[0,"keydown","handleKeyDown"]]]]],["twintag-spinner.cjs",[[1,"twintag-spinner",{"color":[513],"duration":[2],"name":[1]}]]],["twintag-pdf-viewer.cjs",[[0,"twintag-pdf-viewer",{"src":[1],"fileName":[1,"file-name"],"file":[32],"fileURL":[32]}]]]], options);
+  return index.bootstrapLazy([["twintag-preview.cjs",[[1,"twintag-preview",{"item":[1],"initial":[16],"smoothExtinction":[2,"smooth-extinction"],"extension":[1],"showButtons":[4,"show-buttons"],"previewableItem":[32],"type":[32]}]]],["twintag-auth-callback.cjs",[[1,"twintag-auth-callback"]]],["twintag-auth-logout.cjs",[[1,"twintag-auth-logout"]]],["twintag-media.cjs",[[1,"twintag-media",{"first":[1],"middle":[1],"last":[1]}]]],["twintag-ocr-scanner.cjs",[[1,"twintag-ocr-scanner",{"stream":[1040],"mode":[1],"cropX":[2,"crop-x"],"cropY":[2,"crop-y"],"devices":[32]},[[0,"updateZoom","updateZoom"],[2,"recognize","ocrHandler"]]]]],["twintag-offline-actions.cjs",[[1,"twintag-offline-actions",{"enableSingleRetry":[4,"enable-single-retry"],"header":[1],"showTimestamp":[4,"show-timestamp"],"showDescription":[4,"show-description"],"closeText":[1,"close-text"],"retryText":[1,"retry-text"],"noPendingActionsText":[1,"no-pending-actions-text"],"pendingOfflineRequests":[32],"processing":[32]},[[8,"offlineRequestsChanged","offlineRequestsChangedHandler"]]]]],["twintag-offline-state.cjs",[[1,"twintag-offline-state",{"onlineState":[32],"pendingRequests":[32]},[[8,"onlineChanged","onlineChangedHandler"],[8,"offlineRequestsChanged","offlineRequestsChangedHandler"]]]]],["twintag-offline-support.cjs",[[1,"twintag-offline-support",{"autoSync":[4,"auto-sync"],"forceOffline":[4,"force-offline"],"config":[16]}]]],["twintag-qr-scanner.cjs",[[1,"twintag-qr-scanner",{"stream":[1040],"mode":[1],"format":[1],"crop":[514],"devices":[32],"decoderIsBusy":[32]},[[1,"updateZoom","updateZoom"]]]]],["twintag-share.cjs",[[1,"twintag-share",{"url":[1],"modalTitle":[1,"modal-title"],"modalSubtitle":[1,"modal-subtitle"],"closeBtn":[1,"close-btn"],"copyClipboardBtn":[1,"copy-clipboard-btn"],"open":[1540]},[[0,"keydown","handleKeyDown"]]]]],["twintag-spinner.cjs",[[1,"twintag-spinner",{"color":[513],"duration":[2],"name":[1]}]]],["twintag-pdf-viewer.cjs",[[0,"twintag-pdf-viewer",{"src":[1],"fileName":[1,"file-name"],"file":[32],"fileURL":[32]}]]]], options);
 });

package/dist/cjs/twintag-offline-support.cjs.entry.js

@@ -18524,37 +18524,24 @@ class OfflineDataService {
     let objectName;
     let projectId;
     let instanceId;
-    let queryParams;
-    let splitUrlAndQueryArgs = url.split('?');
-    const urlPath = splitUrlAndQueryArgs[0];
-    if (splitUrlAndQueryArgs.length > 1) {
-      splitUrlAndQueryArgs = splitUrlAndQueryArgs.slice(1);
-    }
-    if (splitUrlAndQueryArgs.length > 1) {
-      queryParams = splitUrlAndQueryArgs.join('?');
+    const url_instance = new URL(url);
+    const queryParams = url.split('?')[1];
+    const path_segments = url_instance.pathname.split('/').filter((s) => s.length > 0);
+    const viewsIndex = path_segments.findIndex((p) => p === 'views');
+    const dataIndex = path_segments.findIndex((p) => p === 'data');
+    const viewOrProject = (viewsIndex > -1 ? 'view' : 'project');
+    if (dataIndex > -1) {
+      objectName = path_segments[dataIndex + 1];
     }
     else {
-      queryParams = splitUrlAndQueryArgs[0];
-    }
-    const pathParts = urlPath.split('/');
-    // console.log(pathParts)
-    const viewsIndex = pathParts.findIndex((p) => p === 'views');
-    const dataIndex = pathParts.findIndex((p) => p === 'data');
-    const viewOrProject = viewsIndex > -1 ? 'view' : 'project';
-    objectName = pathParts[dataIndex + 1];
+      objectName = 'metadata';
+    }
     if (viewsIndex > -1) {
-      viewId = pathParts[viewsIndex + 1];
-    }
-    let lastPathPart = pathParts[pathParts.length - 1];
-    if (lastPathPart !== objectName) {
-      if (lastPathPart.includes('?')) {
-        const parts = lastPathPart.split('?');
-        lastPathPart = parts[0];
-        queryParams = parts[1];
-      }
-      if (lastPathPart !== '') {
-        instanceId = lastPathPart;
-      }
+      viewId = path_segments[viewsIndex + 1];
+    }
+    let lastPathPart = path_segments[path_segments.length - 1];
+    if (lastPathPart !== objectName && lastPathPart !== '') {
+      instanceId = lastPathPart;
     }
     return {
       type: viewOrProject,

package/dist/cjs/twintag-qr-scanner.cjs.entry.js

@@ -11,262 +11,6 @@ const workerMsgId = 'stencil.scanner.worker';
 const workerPath = /*@__PURE__*/(typeof document === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __dirname + '/scanner.worker-02c80109.js').href : new URL('scanner.worker-02c80109.js', document.currentScript && document.currentScript.src || document.baseURI).href);
 const worker = /*@__PURE__*/_workerHelper.createWorker(workerPath, workerName, workerMsgId);
 
-class Preprocessing {
-  constructor(canvas, context) {
-    this.canvas = canvas;
-    this.context = context;
-  }
-  preprocessImage() {
-    const processedImageData = this.context.getImageData(0, 0, this.canvas.width, this.canvas.height);
-    this.blurARGB(processedImageData.data, this.canvas, 1);
-    this.dilate(processedImageData.data, this.canvas);
-    this.invertColors(processedImageData.data);
-    this.thresholdFilter(processedImageData.data, 0.4);
-    return processedImageData;
-  }
-  // from https://github.com/processing/p5.js/blob/main/src/image/filters.js
-  thresholdFilter(pixels, level) {
-    if (level === undefined)
-      level = 0.5;
-    const thresh = Math.floor(level * 255);
-    for (let i = 0; i < pixels.length; i += 4) {
-      const r = pixels[i];
-      const g = pixels[i + 1];
-      const b = pixels[i + 2];
-      const gray = 0.2126 * r + 0.7152 * g + 0.0722 * b;
-      let val;
-      if (gray >= thresh)
-        val = 255;
-      else
-        val = 0;
-      pixels[i] = pixels[i + 1] = pixels[i + 2] = val;
-    }
-  }
-  getARGB(data, i) {
-    const offset = i * 4;
-    return (((data[offset + 3] << 24) & 0xff000000) |
-      ((data[offset] << 16) & 0x00ff0000) |
-      ((data[offset + 1] << 8) & 0x0000ff00) |
-      (data[offset + 2] & 0x000000ff));
-  }
-  setPixels(pixels, data) {
-    let offset = 0;
-    for (let i = 0, al = pixels.length; i < al; i++) {
-      offset = i * 4;
-      pixels[offset + 0] = (data[i] & 0x00ff0000) >>> 16;
-      pixels[offset + 1] = (data[i] & 0x0000ff00) >>> 8;
-      pixels[offset + 2] = data[i] & 0x000000ff;
-      pixels[offset + 3] = (data[i] & 0xff000000) >>> 24;
-    }
-  }
-  invertColors(pixels) {
-    for (var i = 0; i < pixels.length; i += 4) {
-      pixels[i] = pixels[i] ^ 255; // Invert Red
-      pixels[i + 1] = pixels[i + 1] ^ 255; // Invert Green
-      pixels[i + 2] = pixels[i + 2] ^ 255; // Invert Blue
-    }
-  }
-  // from https://github.com/processing/p5.js/blob/main/src/image/filters.js
-  dilate(pixels, canvas) {
-    let currIdx = 0;
-    const maxIdx = pixels.length ? pixels.length / 4 : 0;
-    const out = new Int32Array(maxIdx);
-    let currRowIdx, maxRowIdx, colOrig, colOut, currLum;
-    let idxRight, idxLeft, idxUp, idxDown;
-    let colRight, colLeft, colUp, colDown;
-    let lumRight, lumLeft, lumUp, lumDown;
-    while (currIdx < maxIdx) {
-      currRowIdx = currIdx;
-      maxRowIdx = currIdx + canvas.width;
-      while (currIdx < maxRowIdx) {
-        colOrig = colOut = this.getARGB(pixels, currIdx);
-        idxLeft = currIdx - 1;
-        idxRight = currIdx + 1;
-        idxUp = currIdx - canvas.width;
-        idxDown = currIdx + canvas.width;
-        if (idxLeft < currRowIdx) {
-          idxLeft = currIdx;
-        }
-        if (idxRight >= maxRowIdx) {
-          idxRight = currIdx;
-        }
-        if (idxUp < 0) {
-          idxUp = 0;
-        }
-        if (idxDown >= maxIdx) {
-          idxDown = currIdx;
-        }
-        colUp = this.getARGB(pixels, idxUp);
-        colLeft = this.getARGB(pixels, idxLeft);
-        colDown = this.getARGB(pixels, idxDown);
-        colRight = this.getARGB(pixels, idxRight);
-        //compute luminance
-        currLum =
-          77 * ((colOrig >> 16) & 0xff) +
-            151 * ((colOrig >> 8) & 0xff) +
-            28 * (colOrig & 0xff);
-        lumLeft =
-          77 * ((colLeft >> 16) & 0xff) +
-            151 * ((colLeft >> 8) & 0xff) +
-            28 * (colLeft & 0xff);
-        lumRight =
-          77 * ((colRight >> 16) & 0xff) +
-            151 * ((colRight >> 8) & 0xff) +
-            28 * (colRight & 0xff);
-        lumUp =
-          77 * ((colUp >> 16) & 0xff) +
-            151 * ((colUp >> 8) & 0xff) +
-            28 * (colUp & 0xff);
-        lumDown =
-          77 * ((colDown >> 16) & 0xff) +
-            151 * ((colDown >> 8) & 0xff) +
-            28 * (colDown & 0xff);
-        if (lumLeft > currLum) {
-          colOut = colLeft;
-          currLum = lumLeft;
-        }
-        if (lumRight > currLum) {
-          colOut = colRight;
-          currLum = lumRight;
-        }
-        if (lumUp > currLum) {
-          colOut = colUp;
-          currLum = lumUp;
-        }
-        if (lumDown > currLum) {
-          colOut = colDown;
-          currLum = lumDown;
-        }
-        out[currIdx++] = colOut;
-      }
-    }
-    this.setPixels(pixels, out);
-  }
-  // from https://github.com/processing/p5.js/blob/main/src/image/filters.js
-  buildBlurKernel(r) {
-    let radius = (r * 3.5) | 0;
-    radius = radius < 1 ? 1 : radius < 248 ? radius : 248;
-    if (this.blurRadius !== radius) {
-      this.blurRadius = radius;
-      this.blurKernelSize = (1 + this.blurRadius) << 1;
-      this.blurKernel = new Int32Array(this.blurKernelSize);
-      this.blurMult = new Array(this.blurKernelSize);
-      for (let l = 0; l < this.blurKernelSize; l++) {
-        this.blurMult[l] = new Int32Array(256);
-      }
-      let bk, bki;
-      let bm, bmi;
-      for (let i = 1, radiusi = radius - 1; i < radius; i++) {
-        this.blurKernel[radius + i] = this.blurKernel[radiusi] = bki =
-          radiusi * radiusi;
-        bm = this.blurMult[radius + i];
-        bmi = this.blurMult[radiusi--];
-        for (let j = 0; j < 256; j++) {
-          bm[j] = bmi[j] = bki * j;
-        }
-      }
-      bk = this.blurKernel[radius] = radius * radius;
-      bm = this.blurMult[radius];
-      for (let k = 0; k < 256; k++) {
-        bm[k] = bk * k;
-      }
-    }
-  }
-  // from https://github.com/processing/p5.js/blob/main/src/image/filters.js
-  blurARGB(pixels, canvas, radius) {
-    const width = canvas.width;
-    const height = canvas.height;
-    const numPackedPixels = width * height;
-    const argb = new Int32Array(numPackedPixels);
-    for (let j = 0; j < numPackedPixels; j++) {
-      argb[j] = this.getARGB(pixels, j);
-    }
-    let sum, cr, cg, cb, ca;
-    let read, ri, ym, ymi, bk0;
-    const a2 = new Int32Array(numPackedPixels);
-    const r2 = new Int32Array(numPackedPixels);
-    const g2 = new Int32Array(numPackedPixels);
-    const b2 = new Int32Array(numPackedPixels);
-    let yi = 0;
-    this.buildBlurKernel(radius);
-    let x, y, i;
-    let bm;
-    for (y = 0; y < height; y++) {
-      for (x = 0; x < width; x++) {
-        cb = cg = cr = ca = sum = 0;
-        read = x - this.blurRadius;
-        if (read < 0) {
-          bk0 = -read;
-          read = 0;
-        }
-        else {
-          if (read >= width)
-            break;
-          bk0 = 0;
-        }
-        for (i = bk0; i < this.blurKernelSize; i++) {
-          if (read >= width)
-            break;
-          const c = argb[read + yi];
-          bm = this.blurMult[i];
-          ca += bm[(c & -16777216) >>> 24];
-          cr += bm[(c & 16711680) >> 16];
-          cg += bm[(c & 65280) >> 8];
-          cb += bm[c & 255];
-          sum += this.blurKernel[i];
-          read++;
-        }
-        ri = yi + x;
-        a2[ri] = ca / sum;
-        r2[ri] = cr / sum;
-        g2[ri] = cg / sum;
-        b2[ri] = cb / sum;
-      }
-      yi += width;
-    }
-    yi = 0;
-    ym = -this.blurRadius;
-    ymi = ym * width;
-    for (y = 0; y < height; y++) {
-      for (x = 0; x < width; x++) {
-        cb = cg = cr = ca = sum = 0;
-        if (ym < 0) {
-          bk0 = ri = -ym;
-          read = x;
-        }
-        else {
-          if (ym >= height)
-            break;
-          bk0 = 0;
-          ri = ym;
-          read = x + ymi;
-        }
-        for (i = bk0; i < this.blurKernelSize; i++) {
-          if (ri >= height)
-            break;
-          bm = this.blurMult[i];
-          ca += bm[a2[read]];
-          cr += bm[r2[read]];
-          cg += bm[g2[read]];
-          cb += bm[b2[read]];
-          sum += this.blurKernel[i];
-          ri++;
-          read += width;
-        }
-        argb[x + yi] =
-          ((ca / sum) << 24) |
-            ((cr / sum) << 16) |
-            ((cg / sum) << 8) |
-            (cb / sum);
-      }
-      yi += width;
-      ymi += width;
-      ym++;
-    }
-    this.setPixels(pixels, argb);
-  }
-}
-
 const twintagScannerCss = ":host{--twintag-scanner-bg-select-cameras:white;--twintag-scanner-text-select-cameras:black;--twintag-scanner-radius-select-cameras:6px 0 0 0;--twintag-scanner-min-height:min-content;--twintag-scanner-corners-color:white;--twintag-scanner-corners-width:4px;--twintag-scanner-corners-length:36px;--twintag-scanner-corners-offset:24px;display:grid;place-items:center;position:relative;width:100%}:host .icon-container{display:grid;place-items:center;position:absolute;inset:0;z-index:-2222}:host .icon-container .check-icon{opacity:0;z-index:2222}:host .video-container{--crop:0;--crop-x:var(--crop);--crop-y:var(--crop);display:flex;align-items:center;justify-content:center;position:relative;width:100%;height:100%;opacity:0;overflow:hidden;z-index:1}:host .video-container::after{content:\"\";position:absolute;width:100%;height:100%;opacity:inherit;background:rgba(0, 0, 0, 0.5);-webkit-clip-path:polygon(0% 0%, 0% 100%, calc(var(--crop-x) * 1%) 100%, calc(var(--crop-x) * 1%) calc(var(--crop-y) * 1%), calc(calc(100 - var(--crop-x)) * 1%) calc(var(--crop-y) * 1%), calc(calc(100 - var(--crop-x)) * 1%) calc(calc(100 - var(--crop-y)) * 1%), calc(var(--crop-x) * 1%) calc(calc(100 - var(--crop-y)) * 1%), calc(var(--crop-x) * 1%) 100%, 100% 100%, 100% 0%);clip-path:polygon(0% 0%, 0% 100%, calc(var(--crop-x) * 1%) 100%, calc(var(--crop-x) * 1%) calc(var(--crop-y) * 1%), calc(calc(100 - var(--crop-x)) * 1%) calc(var(--crop-y) * 1%), calc(calc(100 - var(--crop-x)) * 1%) calc(calc(100 - var(--crop-y)) * 1%), calc(var(--crop-x) * 1%) calc(calc(100 - var(--crop-y)) * 1%), calc(var(--crop-x) * 1%) 100%, 100% 100%, 100% 0%)}:host .video-container:before{display:block;content:\"\";width:100%;padding-top:100%}:host .video-container .video-corners{position:absolute;width:calc((1 - var(--crop-x) / 50) * 100% + var(--twintag-scanner-corners-offset));height:calc((1 - var(--crop-y) / 50) * 100% + var(--twintag-scanner-corners-offset));opacity:inherit;background:linear-gradient(to right, var(--twintag-scanner-corners-color) var(--twintag-scanner-corners-width), transparent var(--twintag-scanner-corners-width)) 0 0, linear-gradient(to right, var(--twintag-scanner-corners-color) var(--twintag-scanner-corners-width), transparent var(--twintag-scanner-corners-width)) 0 100%, linear-gradient(to left, var(--twintag-scanner-corners-color) var(--twintag-scanner-corners-width), transparent var(--twintag-scanner-corners-width)) 100% 0, linear-gradient(to left, var(--twintag-scanner-corners-color) var(--twintag-scanner-corners-width), transparent var(--twintag-scanner-corners-width)) 100% 100%, linear-gradient(to bottom, var(--twintag-scanner-corners-color) var(--twintag-scanner-corners-width), transparent var(--twintag-scanner-corners-width)) 0 0, linear-gradient(to bottom, var(--twintag-scanner-corners-color) var(--twintag-scanner-corners-width), transparent var(--twintag-scanner-corners-width)) 100% 0, linear-gradient(to top, var(--twintag-scanner-corners-color) var(--twintag-scanner-corners-width), transparent var(--twintag-scanner-corners-width)) 0 100%, linear-gradient(to top, var(--twintag-scanner-corners-color) var(--twintag-scanner-corners-width), transparent var(--twintag-scanner-corners-width)) 100% 100%;background-size:var(--twintag-scanner-corners-length) var(--twintag-scanner-corners-length);background-repeat:no-repeat;z-index:2222}:host .video-container video{position:absolute;width:100% !important;object-fit:cover;object-position:center;aspect-ratio:1/1 !important;min-height:var(--twintag-scanner-min-height)}";
 
 const TwintagQRScanner = class {
@@ -276,6 +20,8 @@ const TwintagQRScanner = class {
     this.streamIsActive = index.createEvent(this, "streamIsActive", 7);
     this.frame = index.createEvent(this, "frame", 7);
     this.stageScale = 1;
+    this.eventsController = new AbortController();
+    this.videoIsPlaying = false;
     this.devices = [];
     this.decoderIsBusy = false;
     this.stream = null;
@@ -302,9 +48,6 @@ const TwintagQRScanner = class {
       }
     }
   }
-  connectedCallback() {
-    worker.addEventListener('message', this.messageHandler.bind(this));
-  }
   messageHandler(e) {
     const event = e.data;
     if (event.code === 'busy') {
@@ -313,20 +56,57 @@ const TwintagQRScanner = class {
     if (event.code === 'ready') {
       this.decoderIsBusy = false;
       this.symbol.emit(event.result);
+      this.frame.emit(this.canvas.toDataURL('image/png', 0.7));
       if (this.mode === 'single') {
+        this.eventsController.abort();
         this.stopStream();
       }
     }
   }
-  async componentDidLoad() {
+  componentWillLoad() {
     this.canvas = document.createElement('canvas');
     this.context = this.canvas.getContext('2d', {
       alpha: false,
       willReadFrequently: true,
     });
-    this.preprocessor = new Preprocessing(this.canvas, this.context);
+  }
+  async componentDidLoad() {
+    worker.addEventListener('message', (e) => {
+      const event = e.data;
+      if (event.code === 'busy') {
+        this.decoderIsBusy = true;
+      }
+      if (event.code === 'ready') {
+        this.decoderIsBusy = false;
+        this.symbol.emit(event.result);
+        if (this.mode === 'single') {
+          this.eventsController.abort();
+          this.stopStream();
+        }
+      }
+    }, {
+      passive: true,
+      // @ts-ignore - old typscript version
+      signal: this.eventsController.signal,
+    });
+    document.addEventListener("visibilitychange", async () => {
+      if (document.hidden) {
+        if (this.stream) {
+          this.stopStream();
+        }
+      }
+      else {
+        await this.startStream();
+      }
+    }, {
+      passive: true,
+      // @ts-ignore - old typscript version
+      signal: this.eventsController.signal,
+    });
     this.videoContainerRef.style.setProperty('--crop', `${(1 - this.crop) * 50}`);
-    await this.startStream();
+    if (!document.hidden) {
+      await this.startStream();
+    }
   }
   readBarcodeFromCanvas() {
     this.drawInCanvas();
@@ -342,7 +122,6 @@ const TwintagQRScanner = class {
           sourceBuffer: sourceBuffer,
         },
       });
-      this.frame.emit(this.canvas.toDataURL('image/png'));
     }
     requestAnimationFrame(this.readBarcodeFromCanvas.bind(this));
   }
@@ -360,14 +139,26 @@ const TwintagQRScanner = class {
   async updateStream(constraints) {
     if (this.stream) {
       this.stream.getTracks().forEach((track) => {
-        return track.stop();
+        track.stop();
       });
     }
     try {
       this.stream = await navigator.mediaDevices.getUserMedia(constraints);
+      this.video.srcObject = null;
       this.video.srcObject = this.stream;
       this.video.setAttribute('playsinline', 'true'); // required to tell iOS safari we don't want fullscreen
-      await this.video.play();
+      // On video playing toggle values
+      this.video.onplaying = () => {
+        this.videoIsPlaying = true;
+      };
+      // On video pause toggle values
+      this.video.onpause = () => {
+        this.videoIsPlaying = false;
+      };
+      if (!this.videoIsPlaying) {
+        await this.video.play();
+        this.videoIsPlaying = true;
+      }
     }
     catch (err) {
       console.error(err);
@@ -434,6 +225,9 @@ const TwintagQRScanner = class {
     catch (err) {
       console.error(err);
     }
+    if (this.stream) {
+      this.streamIsActive.emit(true);
+    }
   }
   async startStream() {
     const constraints = {
@@ -448,38 +242,38 @@ const TwintagQRScanner = class {
       constraints.video['zoom'] = true;
     }
     await this.getMedia(constraints);
-    index$1.gsapWithCSS.to(this.videoContainerRef, {
-      duration: 0.2,
-      opacity: 1,
-      onComplete: () => {
-        this.streamIsActive.emit(true);
-        const currentStage = Math.min(this.video.videoWidth, this.video.videoHeight);
-        const maxStageValue = 400;
-        this.stageScale = Math.min(currentStage, maxStageValue) / currentStage;
-        const stage = currentStage * this.stageScale;
-        this.canvas.width = stage;
-        this.canvas.height = stage;
-        this.context.canvas.width = stage;
-        this.context.canvas.height = stage;
-        this.readBarcodeFromCanvas();
-      },
-    });
+    if (this.videoIsPlaying) {
+      index$1.gsapWithCSS.to(this.videoContainerRef, {
+        duration: 0.2,
+        opacity: 1,
+        onComplete: () => {
+          const currentStage = Math.min(this.video.videoWidth, this.video.videoHeight);
+          const maxStageValue = 400;
+          this.stageScale = Math.min(currentStage, maxStageValue) / currentStage;
+          const stage = currentStage * this.stageScale;
+          this.canvas.width = stage;
+          this.canvas.height = stage;
+          this.context.canvas.width = stage;
+          this.context.canvas.height = stage;
+          this.readBarcodeFromCanvas();
+        },
+      });
+    }
   }
   stopStream() {
-    worker.removeEventListener('message', this.messageHandler.bind(this));
+    this.streamIsActive.emit(false);
+    this.stream.getTracks().forEach((track) => {
+      track.stop();
+    });
+    this.video.srcObject = null;
+    this.context.clearRect(0, 0, this.context.canvas.width, this.context.canvas.height);
     index$1.gsapWithCSS.to(this.videoContainerRef, {
       duration: 0.2,
       opacity: 0,
-      onComplete: () => {
-        this.stream.getTracks().forEach((track) => {
-          return track.stop();
-        });
-        this.video.srcObject = null;
-        this.context.clearRect(0, 0, this.context.canvas.width, this.context.canvas.height);
-      },
     });
   }
   disconnectedCallback() {
+    this.eventsController.abort();
     this.stopStream();
   }
   render() {

package/dist/collection/components/twintag-offline-support/local-data.service.js

@@ -61,37 +61,24 @@ export class OfflineDataService {
     let objectName;
     let projectId;
     let instanceId;
-    let queryParams;
-    let splitUrlAndQueryArgs = url.split('?');
-    const urlPath = splitUrlAndQueryArgs[0];
-    if (splitUrlAndQueryArgs.length > 1) {
-      splitUrlAndQueryArgs = splitUrlAndQueryArgs.slice(1);
-    }
-    if (splitUrlAndQueryArgs.length > 1) {
-      queryParams = splitUrlAndQueryArgs.join('?');
+    const url_instance = new URL(url);
+    const queryParams = url.split('?')[1];
+    const path_segments = url_instance.pathname.split('/').filter((s) => s.length > 0);
+    const viewsIndex = path_segments.findIndex((p) => p === 'views');
+    const dataIndex = path_segments.findIndex((p) => p === 'data');
+    const viewOrProject = (viewsIndex > -1 ? 'view' : 'project');
+    if (dataIndex > -1) {
+      objectName = path_segments[dataIndex + 1];
     }
     else {
-      queryParams = splitUrlAndQueryArgs[0];
+      objectName = 'metadata';
     }
-    const pathParts = urlPath.split('/');
-    // console.log(pathParts)
-    const viewsIndex = pathParts.findIndex((p) => p === 'views');
-    const dataIndex = pathParts.findIndex((p) => p === 'data');
-    const viewOrProject = viewsIndex > -1 ? 'view' : 'project';
-    objectName = pathParts[dataIndex + 1];
     if (viewsIndex > -1) {
-      viewId = pathParts[viewsIndex + 1];
+      viewId = path_segments[viewsIndex + 1];
     }
-    let lastPathPart = pathParts[pathParts.length - 1];
-    if (lastPathPart !== objectName) {
-      if (lastPathPart.includes('?')) {
-        const parts = lastPathPart.split('?');
-        lastPathPart = parts[0];
-        queryParams = parts[1];
-      }
-      if (lastPathPart !== '') {
-        instanceId = lastPathPart;
-      }
+    let lastPathPart = path_segments[path_segments.length - 1];
+    if (lastPathPart !== objectName && lastPathPart !== '') {
+      instanceId = lastPathPart;
     }
     return {
       type: viewOrProject,