Rework option page and settings handling

- add hideVideoOverlays - add hidePlayPauseAnimation - add preset selection - add trigger zone visualization - rename onlyHotkey to useMouse - cleanup logging - also rollup option.js
nralbrecht · Sep 23, 2022 · 152983b · 152983b
1 parent 7351483
commit 152983b
Show file tree

Hide file tree

Showing 13 changed files with 1,019 additions and 306 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,2 +1,2 @@
-node_modules
+node_modules/
 build/
diff --git a/README.md b/README.md
@@ -16,6 +16,9 @@ In the add-on settings you can configure the individual sides as well as the hot
 
 If you experience any issues, please let me know [here](https://github.com/nralbrecht/youtube-hide-controls/issues).
 
+##### Known issues
+The add-on currently does not work with both embedded YouTube™ players and channel trailers.
+
 ## Building the add-on
 
 A build pipeline using Gulp is set up to create artifacts that are then able to be installed and published.
@@ -36,7 +39,7 @@ npm run build:firefox
 npm run build:chrome
 ```
 
-To debug the add-on see the respective documentation for [Google Chrome](https://developer.chrome.com/docs/extensions/mv3/tut_debugging/) and [Firefox](https://extensionworkshop.com/documentation/develop/temporary-installation-in-firefox/).
+The build output for Firefox and Chrome can be found in the `build` directory. To debug the add-on see the respective documentation for [Google Chrome](https://developer.chrome.com/docs/extensions/mv3/tut_debugging/) and [Firefox](https://extensionworkshop.com/documentation/develop/temporary-installation-in-firefox/).
 
 ### Legal Note
 YouTube™ is a trademark of Google Inc.

diff --git a/gulpfile.js b/gulpfile.js
@@ -27,7 +27,7 @@ function buildFirefox() {
 
     const scripts = src(baseSourceFolder + "**/*.js")
         .pipe(rollup({
-            input: [baseSourceFolder + "content-script.js", baseSourceFolder + "player.js"],
+            input: [baseSourceFolder + "content-script.js", baseSourceFolder + "player.js", baseSourceFolder + "options/options.js"],
             output: {
                 format: "esm"
             }
@@ -56,7 +56,7 @@ function buildChrome() {
 
     const scripts = src(baseSourceFolder + "**/*.js")
         .pipe(rollup({
-            input: [baseSourceFolder + "content-script.js", baseSourceFolder + "player.js"],
+            input: [baseSourceFolder + "content-script.js", baseSourceFolder + "player.js", baseSourceFolder + "options/options.js"],
             output: {
                 format: "esm"
             }
@@ -75,6 +75,7 @@ function watchAllCodeFiles() {
         baseSourceFolder + "manifest_chrome.json",
         baseSourceFolder + "manifest_firefox.json",
         baseSourceFolder + "content-script.js",
+        baseSourceFolder + "settings.js",
         baseSourceFolder + "player.js",
         baseSourceFolder + "options/*"
     ], parallel(firefox, chrome));

diff --git a/src/_locales/de/messages.json b/src/_locales/de/messages.json
@@ -7,52 +7,107 @@
         "message": "Blendet die YouTube™-Vollbild-Steuerelemente aus, wenn der Mauszeiger an den Bildschirmrand bewegt wird.",
         "description": "Beschreibung der Erweiterung"
     },
-    "triggerDistanceOptionTitle": {
-        "message": "Auslöseentfernung",
-        "description": "Titel der Auslöseentfernungsoption"
+
+    "generalSectionTitle": {
+        "message": "Allgemeines",
+        "description": "Title of the general section"
     },
-    "triggerDistanceOptionDescription": {
-        "message": "Legt die Entfernungen von jeder Seite fest, ab der die Bedienungselemente ausgeblendet werden. Alle Werte in Pixel. Benutze \"-1\" um eine Seite zu deaktivieren.",
-        "description": "Beschreibung der Auslöseentfernungsoption"
+
+    "hideVideoOverlaysPreferenceTitle": {
+        "message": "Verstecke Video Overlays",
+        "description": "Title of the hide video overlays option"
     },
-    "useHotkeyOptionTitle": {
-        "message": "Benutze Hotkey",
-        "description": "Titel der 'benutze Hotkey' Option"
+    "hideVideoOverlaysPreferenceDescription": {
+        "message": "Verstecke die meisten Overlays (unter anderem Sponsorhinweise und Videovorschlagskärtchen am Ende von Videos). Untertitel werden nicht versteckt.",
+        "description": "Description of the hide video overlays option"
     },
-    "onlyHotkeyOptionTitle": {
-        "message": "Ausschließlich Hotkey",
-        "description": "Title of the only hotkey option"
+
+    "hidePlayPauseAnimationPreferenceTitle": {
+        "message": "Verstecke die Wiedergabe- und Pauseanimation",
+        "description": "Title of the hide play pause animation option"
     },
-    "onlyHotkeyOptionDescription": {
-        "message": "Blende die Bedienungselemente ausschließlich mit dem Hotkey aus. Mauseingaben werden ignoriert.",
-        "description": "Description of the only hotkey option"
+    "hidePlayPauseAnimationPreferenceDescription": {
+        "message": "Verstecke den animierten Knopf, der angezeigt wird, wenn man das Video pausiert oder wieder abspielt.",
+        "description": "Description of the hide play pause animation option"
     },
-    "hotkeyOptionTitle": {
-        "message": "Hotkey",
-        "description": "Titel der Hotkeyoption"
+
+    "useMouseSectionTitle": {
+        "message": "Mausinteraktion",
+        "description": "Title of the mouse interaction section"
     },
-    "hotkeyOptionDescription": {
-        "message": "Der Hotkey, der die Sichtbarkeit der Steuerelemente umschaltet.",
-        "description": "Beschreibung der der hotkey option"
+
+    "presetPreferenceTitle": {
+        "message": "Voreinstellungen",
+        "description": "Title of the preset option"
     },
-    "hotkeyPlaceholder": {
-        "message": "Nicht Definiert",
-        "description": "Hotkey-Eingabe-Platzhalter-Text"
+    "presetPreferenceDescription": {
+        "message": "Wähle eine Voreinstellung für die Mausinteraktion.",
+        "description": "Description of the preset option"
+    },
+
+    "presetDropdownHideTitle": {
+        "message": "Verstecke, wenn am Bildschirmrand",
+        "description": "Title of the 'hide' entry in the preset dropdown"
+    },
+    "presetDropdownHideDescription": {
+        "message": "Verstecke die Steuerelemente, wenn die Maus an den Bildschirmrand geschoben wird.",
+        "description": "Description of the 'hide' entry in the preset dropdown"
+    },
+    "presetDropdownShowTitle": {
+        "message": "Zeige an, wenn über Steuerelement",
+        "description": "Title of the 'show' entry in the preset dropdown"
+    },
+    "presetDropdownShowDescription": {
+        "message": "Zeige die Steuerelemente nur an, wenn die Maus über die untere oder obere die Leiste bewegt wird.",
+        "description": "Description of the 'show' entry in the preset dropdown"
+    },
+    "presetDropdownCustomTitle": {
+        "message": "Benutzerdefiniert",
+        "description": "Title of the 'custom' entry in the preset dropdown"
+    },
+
+    "triggerDistancePreferenceTitle": {
+        "message": "Auslöseentfernung",
+        "description": "Titel der Auslöseentfernungsoption"
+    },
+    "triggerDistancePreferenceDescription": {
+        "message": "Legt die Entfernungen von jeder Seite fest, ab der die Bedienungselemente ausgeblendet werden. Alle Werte in Pixel. Benutze 0 Pixel um eine Seite zu deaktivieren.",
+        "description": "Beschreibung der Auslöseentfernungsoption"
     },
-    "invertTriggerOptionTitle": {
+
+    "invertTriggerPreferenceTitle": {
         "message": "Invertiere Funktion",
         "description": "Title of the invert trigger option"
     },
-    "invertTriggerOptionDescription": {
-        "message": "Blendet die Vollbild-Steuerelemente standardmäßig aus. Bei Bedarf können die Steuerelemente mit dem Hotkey oder der Maus wieder eingeblendet werden.\nProbiere 70 als Auslöseentfernung für oben und unten.",
+    "invertTriggerPreferenceDescription": {
+        "message": "Blendet die Vollbild-Steuerelemente standardmäßig aus. Bei Bedarf können die Steuerelemente mit dem Hotkey, oder der Maus wieder eingeblendet werden.",
         "description": "Description of the invert trigger option"
     },
-    "onlyFullscreenOptionTitle": {
+
+    "onlyFullscreenPreferenceTitle": {
         "message": "Nur Vollbild",
         "description": "Titel der only fullscreen option"
     },
-    "onlyFullscreenOptionDescription": {
+    "onlyFullscreenPreferenceDescription": {
         "message": "Blende die Steuerelemente nur aus, wenn das YouTube™ Video sich im Vollbildmodus befindet.",
         "description": "Description of the only fullscreen option"
+    },
+
+    "useHotkeySectionTitle": {
+        "message": "Hotkey",
+        "description": "Title of the hotkey usage section"
+    },
+
+    "hotkeyPreferenceTitle": {
+        "message": "Hotkey",
+        "description": "Titel der Hotkeyoption"
+    },
+    "hotkeyPreferenceDescription": {
+        "message": "Beim Drücken des Hotkeys wird die Sichtbarkeit der Steuerelemente umgeschaltet.<br>Beachte, dass die Steuerelemente sofort wieder angezeigt werden, wenn die Maus bewegt wird. Sollte dies stören, kann die Mausinteraktion ausgeschaltet werden.",
+        "description": "Beschreibung der der Hotkeyoption"
+    },
+    "hotkeyPreferencePlaceholder": {
+        "message": "Nicht Definiert",
+        "description": "Hotkey-Eingabe-Platzhalter-Text"
     }
 }
diff --git a/src/_locales/en/messages.json b/src/_locales/en/messages.json
@@ -4,55 +4,110 @@
         "description": "Name of the extension"
     },
     "extensionDescription": {
-        "message": "Hide the YouTube™ fullscreen controls when you move the cursor to the display border.",
+        "message": "Hide the YouTube™ fullscreen controls with the press of a hotkey or when you move the cursor to the display border.",
         "description": "Description of the extension"
     },
-    "triggerDistanceOptionTitle": {
-        "message": "Trigger Distance",
-        "description": "Title of the trigger distance option"
+
+    "generalSectionTitle": {
+        "message": "General",
+        "description": "Title of the general section"
     },
-    "triggerDistanceOptionDescription": {
-        "message": "The threshold, from each site, at wich the controls will be hidden. All values in pixel. Use \"-1\" to disable one site.",
-        "description": "Description of the trigger distance option"
+
+    "hideVideoOverlaysPreferenceTitle": {
+        "message": "Hide Video Overlays",
+        "description": "Title of the hide video overlays option"
     },
-    "useHotkeyOptionTitle": {
-        "message": "Use Hotkey",
-        "description": "Title of the trigger use hotkey option"
+    "hideVideoOverlaysPreferenceDescription": {
+        "message": "Hide most video overlays including video recomendation cards at the end of a video and sponsored content note. Subtitles will not be hidden.",
+        "description": "Description of the hide video overlays option"
     },
-    "onlyHotkeyOptionTitle": {
-        "message": "Only Hotkey",
-        "description": "Title of the only hotkey option"
+
+    "hidePlayPauseAnimationPreferenceTitle": {
+        "message": "Hide Play/Pause Animation",
+        "description": "Title of the hide play pause animation option"
     },
-    "onlyHotkeyOptionDescription": {
-        "message": "Player controls can only be toggled via hotkey and mouse movement will be ignored.",
-        "description": "Description of the only hotkey option"
+    "hidePlayPauseAnimationPreferenceDescription": {
+        "message": "Hide the animated center button that is displayed when starting and stopping the video player.",
+        "description": "Description of the hide play pause animation option"
     },
-    "hotkeyOptionTitle": {
-        "message": "Hotkey",
-        "description": "Title of the hotkey option"
+
+    "useMouseSectionTitle": {
+        "message": "Mouse Interaction",
+        "description": "Title of the mouse interaction section"
     },
-    "hotkeyOptionDescription": {
-        "message": "The hotkey that toggles the YouTube controls",
-        "description": "Description of the hotkey option"
+
+    "presetPreferenceTitle": {
+        "message": "Preset",
+        "description": "Title of the preset option"
     },
-    "hotkeyPlaceholder": {
-        "message": "None",
-        "description": "Hotkey input placeholder text"
+    "presetPreferenceDescription": {
+        "message": "Choose a preset of mouse interaction settings.",
+        "description": "Description of the preset option"
+    },
+
+    "presetDropdownHideTitle": {
+        "message": "Hide when mouse is at border",
+        "description": "Title of the 'hide' entry in the preset dropdown"
+    },
+    "presetDropdownHideDescription": {
+        "message": "Hide the controls when moving the mouse to the left or right border",
+        "description": "Description of the 'hide' entry in the preset dropdown"
+    },
+    "presetDropdownShowTitle": {
+        "message": "Show when mouse is over controls",
+        "description": "Title of the 'show' entry in the preset dropdown"
+    },
+    "presetDropdownShowDescription": {
+        "message": "Show the controls only when moving the mouse over the bottom controls or to any border",
+        "description": "Description of the 'show' entry in the preset dropdown"
+    },
+    "presetDropdownCustomTitle": {
+        "message": "Custom",
+        "description": "Title of the 'custom' entry in the preset dropdown"
+    },
+
+    "triggerDistancePreferenceTitle": {
+        "message": "Trigger Distance",
+        "description": "Title of the trigger distance option"
+    },
+    "triggerDistancePreferenceDescription": {
+        "message": "The threshold from each site at which the controls will be hidden.<br>All values are in pixel. Set the value to 0 pixels to disable interaction with the corresponding side. Disabled sides are colored red.",
+        "description": "Description of the trigger distance option"
     },
-    "invertTriggerOptionTitle": {
+
+    "invertTriggerPreferenceTitle": {
         "message": "Invert Trigger",
         "description": "Title of the invert trigger option"
     },
-    "invertTriggerOptionDescription": {
-        "message": "Inverts the function of the hotkey and the mouse trigger so that they make the controls visible instead of hiding them. This also hides the full screen controls by default.\nTry 70 as trigger distance for the top and bottom.",
+    "invertTriggerPreferenceDescription": {
+        "message": "Inverts the function of the mouse trigger so that they make the controls visible instead of hiding them.",
         "description": "Description of the invert trigger option"
     },
-    "onlyFullscreenOptionTitle": {
+
+    "onlyFullscreenPreferenceTitle": {
         "message": "Only Fullscreen",
         "description": "Title of the only fullscreen option"
     },
-    "onlyFullscreenOptionDescription": {
+    "onlyFullscreenPreferenceDescription": {
         "message": "Only hide the controls when the YouTube™ video is in fullscreen mode.",
         "description": "Description of the only fullscreen option"
+    },
+
+    "useHotkeySectionTitle": {
+        "message": "Hotkey",
+        "description": "Title of the hotkey usage section"
+    },
+
+    "hotkeyPreferenceTitle": {
+        "message": "Hotkey",
+        "description": "Title of the hotkey option"
+    },
+    "hotkeyPreferenceDescription": {
+        "message": "The hotkey toggles the visibility of the video controls.<br>Note that mouse movement will reshow the controls even if you just pressed the hotkey. If you don't like that, consider disabling the mouse interaction.",
+        "description": "Description of the hotkey option"
+    },
+    "hotkeyPreferencePlaceholder": {
+        "message": "None",
+        "description": "Hotkey input placeholder text"
     }
 }