Adding functionality for changing the offset of caption lines

src/popup.css

@@ -63,3 +63,18 @@ body.removeCaptions #removeCaptions > div {
 #offsetCaptions > span:hover {
     background-color: aliceblue;
     }
+
+#lineCaptions {
+    display: flex;
+    justify-content: space-evenly;
+    user-select: none;
+    }
+#lineCaptions > span {
+    cursor: pointer;
+    padding: 1em 0.75em;
+    }
+#lineCaptions > span:hover {
+    background-color: aliceblue;
+    }
+
+

src/popup.html

@@ -24,6 +24,15 @@
             <span data-offset="1">&plus;1</span>
             <span data-offset="10">&plus;10</span>
         </div>
+        <div class="menu-item">Line offset:
+        </div>
+        <div id="lineCaptions">
+            <span line-offset="-2">&minus;2</span>
+            <span line-offset="-1">&minus;1</span>
+            <span line-offset="1">&plus;1</span>
+            <span line-offset="2">&plus;2</span>
+        </div>
+
     </div>
 </div>
 <script src="popup.js"></script>

src/popup.js

@@ -30,14 +30,30 @@
         if ( track === null ) { return; }
         timeDelta += parseFloat(track.getAttribute('data-vtt-offset') || '0');
         track.setAttribute('data-vtt-offset', timeDelta);
+        track.setAttribute('lineOffset',-1)
     };
 
     const timeSetContentScript = function() {
         let timeDelta = parseFloat('$0') || 0;
         const track = document.querySelector('video > track[label="CCaptioner"][data-vtt]');
         if ( track === null ) { return; }
         track.setAttribute('data-vtt-offset', timeDelta);
+        track.setAttribute('lineOffset',-1)
     };
+
+    const lineShiftContentScript = function() {
+        let lineDelta = parseFloat('$0') || 0;
+        const track = document.querySelector('video > track[label="CCaptioner"][data-vtt]');
+        if ( track === null ) { return; }
+        if (!track.hasAttribute('lineOffset')) {track.setAttribute('lineOffset',-1)} 
+        lineDelta += parseFloat(track.getAttribute('lineOffset') || '0')
+        track.setAttribute('lineOffset', lineDelta)
+
+        for (const cue of track.track.cues) {
+            cue.line = lineDelta
+        }
+    };
+
 
     const makeContentScript = function(fn, ...args) {
         let code = [ '(', fn.toString(), ')();', ].join('\n');
@@ -108,6 +124,21 @@
         }
     );
 
+    document.querySelector('#lineCaptions').addEventListener(
+        'click',
+        ev => {
+            const button = ev.target;
+            if (button.hasAttribute('line-offset') === false) {return; }
+            injectScriptCode(
+                makeContentScript(
+                    lineShiftContentScript,
+                    button.getAttribute('line-offset')
+                )
+            );
+
+
+        }
+    );
 
     document.querySelector('#reset0Sec').addEventListener(
         'click',