jump in video by 10s by double tapping left/right

resource/support/plugins/explain/explain.js

 "use strict";
 
 let ExplainPlugin = (function () {
-
   // configuration parameters
-  const config = Decker.meta.explain || {};
+  const config = Decker.meta.explain || {};
 
   // GUI elements
   let playPanel, playButton, player;
@@ -26,7 +25,7 @@ let ExplainPlugin = (function () {
   // greenscreen
   let useGreenScreen = config.useGreenScreen || false;
   let gsBackground = config.greenScreenBackground || undefined;
-  let gsKey = config.greenScreenKey || {r:0, g:255, b:0};
+  let gsKey = config.greenScreenKey || { r: 0, g: 255, b: 0 };
   let gsSimilarity = config.greenScreenSimilarity || 0.4;
   let gsSmoothness = config.greenScreenSmoothness || 0.08;
   let gsSpill = config.greenScreenSpill || 0.1;
@@ -344,7 +343,7 @@ let ExplainPlugin = (function () {
         // store label, since ID changes after reboot
         localStorage.setItem("decker-microphone", selectedMicrophone);
       }
-    } 
+    }
     // if mic capture failed...
     else {
       voiceIndicator.removeAttribute("title");
@@ -404,7 +403,7 @@ let ExplainPlugin = (function () {
       } else {
         // cameraVideo.srcObject = cameraStream;
       }
-    } 
+    }
     // if camera capture failed...
     else {
       camIndicator.removeAttribute("title");
@@ -706,6 +705,9 @@ let ExplainPlugin = (function () {
         pictureInPictureToggle: false,
       },
       userActions: {
+        // disable going to fullscreen by double click
+        doubleClick: false,
+        // our keyboard shortcuts
         hotkeys: function (event) {
           event.stopPropagation();
 
@@ -727,28 +729,29 @@ let ExplainPlugin = (function () {
 
             // up/down: increase/decrease volume by 5%
             case "ArrowUp":
-              this.volume(Math.min(1.0, this.volume()+0.05));
+              this.volume(Math.min(1.0, this.volume() + 0.05));
               break;
             case "ArrowDown":
-              this.volume(Math.max(0.0, this.volume()-0.05));
+              this.volume(Math.max(0.0, this.volume() - 0.05));
               break;
 
             // c: toggle captions
             case "KeyC":
               let tracks = player.textTracks();
               for (let i = 0; i < tracks.length; i++) {
-                if (tracks[i].kind === 'captions') {
-                    tracks[i].mode = (tracks[i].mode === 'showing') ? 'disabled' : 'showing';
+                if (tracks[i].kind === "captions") {
+                  tracks[i].mode =
+                    tracks[i].mode === "showing" ? "disabled" : "showing";
                 }
               }
               break;
 
             // j/l: jump backward/forward by 10sec
             case "KeyJ":
-              player.currentTime(player.currentTime()-10);
+              player.currentTime(player.currentTime() - 10);
               break;
             case "KeyL":
-              player.currentTime(player.currentTime()+10);
+              player.currentTime(player.currentTime() + 10);
               break;
 
             // m: mute/unmute
@@ -765,6 +768,22 @@ let ExplainPlugin = (function () {
       },
     });
 
+    // use double tap on left/right part of player to jump backward/forward by 10sec
+    let lastTap = null;
+    player.on("touchstart", (evt) => {
+      const now = Date.now();
+      if (lastTap && now - lastTap < 300) {
+        const tapX = evt.touches[0].clientX;
+        const playerWidth = player.el().clientWidth;
+        if (tapX > 0.66 * playerWidth) {
+          player.currentTime(player.currentTime() + 10);
+        } else if (tapX < 0.33 * playerWidth) {
+          player.currentTime(player.currentTime() - 10);
+        }
+      }
+      lastTap = now;
+    });
+
     player.on("ended", transition("stop"));
 
     player.on("error", (_) => {
@@ -999,7 +1018,7 @@ let ExplainPlugin = (function () {
         }
       });
 
-      // select previously chosen camera 
+      // select previously chosen camera
       camSelect.selectedIndex = -1;
       const selectedCamera = localStorage.getItem("decker-camera");
       if (selectedCamera) {
@@ -1102,8 +1121,7 @@ let ExplainPlugin = (function () {
       cameraCanvas.style.backgroundImage = `url('${gsBackground}')`;
       cameraCanvas.style.backgroundSize = "cover";
       cameraCanvas.setAttribute("data-has-background", true);
-    }
-    else {
+    } else {
       cameraCanvas.setAttribute("data-has-background", false);
     }
 
@@ -1111,8 +1129,7 @@ let ExplainPlugin = (function () {
     if (useGreenScreen) {
       cameraVideo.style.display = "none";
       cameraPanel = cameraCanvas;
-    }
-    else {
+    } else {
       cameraPanel = cameraVideo;
     }
 
@@ -1233,9 +1250,13 @@ let ExplainPlugin = (function () {
 
     const vb = gl.createBuffer();
     gl.bindBuffer(gl.ARRAY_BUFFER, vb);
-    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, 1, -1, -1, 1, -1, 1, 1]), gl.STATIC_DRAW);
+    gl.bufferData(
+      gl.ARRAY_BUFFER,
+      new Float32Array([-1, 1, -1, -1, 1, -1, 1, 1]),
+      gl.STATIC_DRAW
+    );
 
-    const coordLoc = gl.getAttribLocation(prog, 'c');
+    const coordLoc = gl.getAttribLocation(prog, "c");
     gl.vertexAttribPointer(coordLoc, 2, gl.FLOAT, false, 0, 0);
     gl.enableVertexAttribArray(coordLoc);
 
@@ -1261,12 +1282,24 @@ let ExplainPlugin = (function () {
         cameraCanvas.height = metadata.height;
       }
       gl.viewport(0, 0, metadata.width, metadata.height);
-      gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, cameraVideo);
+      gl.texImage2D(
+        gl.TEXTURE_2D,
+        0,
+        gl.RGB,
+        gl.RGB,
+        gl.UNSIGNED_BYTE,
+        cameraVideo
+      );
 
       gl.uniform1i(texLoc, 0);
       gl.uniform1f(texWidthLoc, metadata.width);
       gl.uniform1f(texHeightLoc, metadata.height);
-      gl.uniform3f(keyColorLoc, gsKey.r/255.0, gsKey.g/255.0,gsKey.b/255.0);
+      gl.uniform3f(
+        keyColorLoc,
+        gsKey.r / 255.0,
+        gsKey.g / 255.0,
+        gsKey.b / 255.0
+      );
       gl.uniform1f(similarityLoc, gsSimilarity);
       gl.uniform1f(smoothnessLoc, gsSmoothness);
       gl.uniform1f(spillLoc, gsSpill);