feat: separate merge-lines toggle from lock-to-bottom

netflix-subtitle-restyle.user.js

@@ -2,7 +2,7 @@
 // @name        Netflix subtitle restyle
 // @namespace   https://git.owall.se/oscar/nfsub
 // @description Render Netflix subtitles in a custom font, with optional size, color, and outline overrides
-// @version     1.3.1
+// @version     1.4.0
 // @match       *://www.netflix.com/*
 // @homepageURL  https://git.owall.se/oscar/nfsub
 // @supportURL   https://git.owall.se/oscar/nfsub/issues
@@ -28,6 +28,7 @@ const defaults = {
   edgeColor: '#000000',
   lockBottom: false,
   bottomOffset: 6,
+  mergeLines: true,
 };
 
 const stored = GM_getValue('config', {});
@@ -104,13 +105,19 @@ function applyConfig() {
     );
   }
   if (config.lockBottom) {
-    rules.push(
-      `.player-timedtext {
-         display: flex !important;
+    const layout = config.mergeLines
+      ? `display: flex !important;
          flex-flow: row wrap !important;
          justify-content: center !important;
          align-content: flex-end !important;
-         align-items: flex-end !important;
+         align-items: flex-end !important;`
+      : `display: flex !important;
+         flex-direction: column !important;
+         align-items: center !important;
+         justify-content: flex-end !important;`;
+    rules.push(
+      `.player-timedtext {
+         ${layout}
          padding-bottom: ${config.bottomOffset}% !important;
          box-sizing: border-box !important;
        }
@@ -126,11 +133,15 @@ function applyConfig() {
          transform: none !important;
          text-align: center !important;
          margin: 0 !important;
-       }
-       .player-timedtext .player-timedtext-text-container + .player-timedtext-text-container > span > span::before {
-         content: "\\00a0" !important;
        }`
     );
+    if (config.mergeLines) {
+      rules.push(
+        `.player-timedtext .player-timedtext-text-container + .player-timedtext-text-container > span > span::before {
+           content: "\\00a0" !important;
+         }`
+      );
+    }
   }
   subtitleStyle.textContent = rules.join('\n');
 }
@@ -223,8 +234,10 @@ function buildPanel() {
     step: '1',
     value: String(config.bottomOffset),
   });
+  const mergeToggle = el('input', { type: 'checkbox', checked: config.mergeLines });
   const syncLockInputs = () => {
     offsetInput.disabled = !config.lockBottom;
+    mergeToggle.disabled = !config.lockBottom;
   };
   lockToggle.addEventListener('input', () => {
     config.lockBottom = lockToggle.checked;
@@ -235,6 +248,10 @@ function buildPanel() {
     config.bottomOffset = Math.min(40, Math.max(0, parseFloat(offsetInput.value) || 0));
     save();
   });
+  mergeToggle.addEventListener('input', () => {
+    config.mergeLines = mergeToggle.checked;
+    save();
+  });
   syncLockInputs();
 
   const closeButton = el('button', { type: 'button', className: 'nfsub-close' }, '×');
@@ -251,6 +268,7 @@ function buildPanel() {
     row('Edge style', edgeSelect),
     row('Edge width', el('span', { className: 'nfsub-pair' }, edgeWidthInput, edgeColorInput)),
     row('Lock to bottom', el('span', { className: 'nfsub-pair' }, lockToggle, offsetInput, el('span', {}, '% up'))),
+    row('Merge lines', mergeToggle),
     resetButton
   );