feat: a bunch of improvements to thumbnail overlay

assets/icons/image_filled.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path fill="#ffffff" d="M224.615-160Q197-160 178.5-178.5 160-197 160-224.615v-510.77Q160-763 178.5-781.5 197-800 224.615-800h510.77Q763-800 781.5-781.5 800-763 800-735.385v510.77Q800-197 781.5-178.5 763-160 735.385-160h-510.77ZM300-300h366.154L553.077-450.769 448.462-318.462l-70.001-84.615L300-300Z"/></svg>

assets/icons/image_off.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path fill="#ffffff" d="m800-274-40-40v-421.385q0-9.23-7.692-16.923Q744.615-760 735.385-760H314l-40-40h461.385Q763-800 781.5-781.5 800-763 800-735.385V-274Zm19.692 190.308L743.385-160h-518.77Q197-160 178.5-178.5 160-197 160-224.615v-518.77l-76.308-76.307L112-848l736 736-28.308 28.308ZM300-300l78.461-103.077 70.001 84.615L509.154-394 200-703.154v478.539q0 9.23 7.692 16.923Q215.385-200 224.615-200h478.539l-100-100H300Zm237-237Zm-85.308 85.308Z"/></svg>

assets/resources.json

@@ -10,7 +10,7 @@
   "icon-globe": "icons/globe.svg",
   "icon-help": "icons/help.svg",
   "icon-image": "icons/image.svg",
-  "icon-image_off": "icons/image_off.svg",
+  "icon-image_filled": "icons/image_filled.svg",
   "icon-link": "icons/link.svg",
   "icon-lyrics": "icons/lyrics.svg",
   "icon-skip_to": "icons/skip_to.svg",

assets/translations/README.md

@@ -20,15 +20,15 @@ To submit or edit a translation, please follow [this guide](../../contributing.m
 ### Translation progress:
 |   | Locale | Translated keys | Based on |
 | :----: | ------ | --------------- | :------: |
-| ─ | [`en_US`](./en_US.json) | 191 (default locale) |  |
-| ‼️ | [`de_DE`](./de_DE.json) | `161/191` (84.3%) | ─ |
-| ─ | [`en_UK`](./en_UK.json) | `191/191` (100%) | `en_US` |
-| ‼️ | [`es_ES`](./es_ES.json) | `161/191` (84.3%) | ─ |
-| ‼️ | [`fr_FR`](./fr_FR.json) | `161/191` (84.3%) | ─ |
-| ‼️ | [`hi_IN`](./hi_IN.json) | `161/191` (84.3%) | ─ |
-| ‼️ | [`ja_JA`](./ja_JA.json) | `161/191` (84.3%) | ─ |
-| ‼️ | [`pt_BR`](./pt_BR.json) | `161/191` (84.3%) | ─ |
-| ‼️ | [`zh_CN`](./zh_CN.json) | `161/191` (84.3%) | ─ |
+| ─ | [`en_US`](./en_US.json) | 193 (default locale) |  |
+| ‼️ | [`de_DE`](./de_DE.json) | `161/193` (83.4%) | ─ |
+| ─ | [`en_UK`](./en_UK.json) | `193/193` (100%) | `en_US` |
+| ‼️ | [`es_ES`](./es_ES.json) | `161/193` (83.4%) | ─ |
+| ‼️ | [`fr_FR`](./fr_FR.json) | `161/193` (83.4%) | ─ |
+| ‼️ | [`hi_IN`](./hi_IN.json) | `161/193` (83.4%) | ─ |
+| ‼️ | [`ja_JA`](./ja_JA.json) | `161/193` (83.4%) | ─ |
+| ‼️ | [`pt_BR`](./pt_BR.json) | `161/193` (83.4%) | ─ |
+| ‼️ | [`zh_CN`](./zh_CN.json) | `161/193` (83.4%) | ─ |
 
 <sub>
 ✅ - Fully translated
@@ -49,7 +49,7 @@ This means to figure out which keys are untranslated, you will need to manually
 
 ### Missing keys:
 
-<details><summary><code>de_DE</code> - 30 missing keys <i>(click to show)</i></summary><br>
+<details><summary><code>de_DE</code> - 32 missing keys <i>(click to show)</i></summary><br>
 
 | Key | English text |
 | --- | ------------ |
@@ -66,8 +66,9 @@ This means to figure out which keys are untranslated, you will need to manually
 | `thumbnail_overlay_behavior_videos_only` | `Only for videos` |
 | `thumbnail_overlay_behavior_songs_only` | `Only for songs` |
 | `thumbnail_overlay_behavior_always` | `Always` |
-| `thumbnail_overlay_toggle_btn_tooltip_hide` | `Click to hide the thumbnail overlay` |
-| `thumbnail_overlay_toggle_btn_tooltip_show` | `Click to show the thumbnail overlay` |
+| `thumbnail_overlay_toggle_btn_tooltip_hide` | `Disable the thumbnail overlay - middle-click or shift-click to open in a new tab` |
+| `thumbnail_overlay_toggle_btn_tooltip_show` | `Enable the thumbnail overlay - middle-click or shift-click to open in a new tab` |
+| `thumbnail_overlay_indicator_tooltip` | `The thumbnail overlay is currently active` |
 | `feature_category_volume` | `Volume` |
 | `feature_desc_volumeSharedBetweenTabs` | `Should the set volume be shared between tabs and remembered between sessions?` |
 | `feature_helptext_volumeSharedBetweenTabs` | `If you change the volume in one tab, the volume level will be set to the same value in all other tabs that have this feature enabled.\nThis value will be remembered and restored across sessions, until disabled.` |
@@ -78,6 +79,7 @@ This means to figure out which keys are untranslated, you will need to manually
 | `feature_helptext_thumbnailOverlayBehavior` | `The thumbnail overlay will be shown over top of the currently playing video or song.\nThis will not save any bandwidth as the video will still be loaded and played in the background!` |
 | `feature_desc_thumbnailOverlayToggleBtnShown` | `Add a button to the media controls to manually toggle the thumbnail overlay` |
 | `feature_helptext_thumbnailOverlayToggleBtnShown` | `This button will allow you to manually toggle the thumbnail overlay on and off.\nOnce a new video or song starts playing, the default state will be restored.\nHold shift while clicking or press the middle mouse button to open the thumbnail of the highest quality in a new tab.` |
+| `feature_desc_thumbnailOverlayShowIndicator` | `Show an indicator in the bottom right corner of the thumbnail overlay while it's active?` |
 | `feature_desc_rememberSongTimeDuration` | `How long in seconds to remember the song's time for after it was last played` |
 | `feature_desc_rememberSongTimeReduction` | `How many seconds to subtract when restoring the time of a remembered song` |
 | `feature_helptext_rememberSongTimeReduction` | `When restoring the time of a song that was remembered, this amount of seconds will be subtracted from the remembered time so you can re-listen to the part that was interrupted.` |
@@ -86,7 +88,7 @@ This means to figure out which keys are untranslated, you will need to manually
 
 <br></details>
 
-<details><summary><code>es_ES</code> - 30 missing keys <i>(click to show)</i></summary><br>
+<details><summary><code>es_ES</code> - 32 missing keys <i>(click to show)</i></summary><br>
 
 | Key | English text |
 | --- | ------------ |
@@ -103,8 +105,9 @@ This means to figure out which keys are untranslated, you will need to manually
 | `thumbnail_overlay_behavior_videos_only` | `Only for videos` |
 | `thumbnail_overlay_behavior_songs_only` | `Only for songs` |
 | `thumbnail_overlay_behavior_always` | `Always` |
-| `thumbnail_overlay_toggle_btn_tooltip_hide` | `Click to hide the thumbnail overlay` |
-| `thumbnail_overlay_toggle_btn_tooltip_show` | `Click to show the thumbnail overlay` |
+| `thumbnail_overlay_toggle_btn_tooltip_hide` | `Disable the thumbnail overlay - middle-click or shift-click to open in a new tab` |
+| `thumbnail_overlay_toggle_btn_tooltip_show` | `Enable the thumbnail overlay - middle-click or shift-click to open in a new tab` |
+| `thumbnail_overlay_indicator_tooltip` | `The thumbnail overlay is currently active` |
 | `feature_category_volume` | `Volume` |
 | `feature_desc_volumeSharedBetweenTabs` | `Should the set volume be shared between tabs and remembered between sessions?` |
 | `feature_helptext_volumeSharedBetweenTabs` | `If you change the volume in one tab, the volume level will be set to the same value in all other tabs that have this feature enabled.\nThis value will be remembered and restored across sessions, until disabled.` |
@@ -115,6 +118,7 @@ This means to figure out which keys are untranslated, you will need to manually
 | `feature_helptext_thumbnailOverlayBehavior` | `The thumbnail overlay will be shown over top of the currently playing video or song.\nThis will not save any bandwidth as the video will still be loaded and played in the background!` |
 | `feature_desc_thumbnailOverlayToggleBtnShown` | `Add a button to the media controls to manually toggle the thumbnail overlay` |
 | `feature_helptext_thumbnailOverlayToggleBtnShown` | `This button will allow you to manually toggle the thumbnail overlay on and off.\nOnce a new video or song starts playing, the default state will be restored.\nHold shift while clicking or press the middle mouse button to open the thumbnail of the highest quality in a new tab.` |
+| `feature_desc_thumbnailOverlayShowIndicator` | `Show an indicator in the bottom right corner of the thumbnail overlay while it's active?` |
 | `feature_desc_rememberSongTimeDuration` | `How long in seconds to remember the song's time for after it was last played` |
 | `feature_desc_rememberSongTimeReduction` | `How many seconds to subtract when restoring the time of a remembered song` |
 | `feature_helptext_rememberSongTimeReduction` | `When restoring the time of a song that was remembered, this amount of seconds will be subtracted from the remembered time so you can re-listen to the part that was interrupted.` |
@@ -123,7 +127,7 @@ This means to figure out which keys are untranslated, you will need to manually
 
 <br></details>
 
-<details><summary><code>fr_FR</code> - 30 missing keys <i>(click to show)</i></summary><br>
+<details><summary><code>fr_FR</code> - 32 missing keys <i>(click to show)</i></summary><br>
 
 | Key | English text |
 | --- | ------------ |
@@ -140,8 +144,9 @@ This means to figure out which keys are untranslated, you will need to manually
 | `thumbnail_overlay_behavior_videos_only` | `Only for videos` |
 | `thumbnail_overlay_behavior_songs_only` | `Only for songs` |
 | `thumbnail_overlay_behavior_always` | `Always` |
-| `thumbnail_overlay_toggle_btn_tooltip_hide` | `Click to hide the thumbnail overlay` |
-| `thumbnail_overlay_toggle_btn_tooltip_show` | `Click to show the thumbnail overlay` |
+| `thumbnail_overlay_toggle_btn_tooltip_hide` | `Disable the thumbnail overlay - middle-click or shift-click to open in a new tab` |
+| `thumbnail_overlay_toggle_btn_tooltip_show` | `Enable the thumbnail overlay - middle-click or shift-click to open in a new tab` |
+| `thumbnail_overlay_indicator_tooltip` | `The thumbnail overlay is currently active` |
 | `feature_category_volume` | `Volume` |
 | `feature_desc_volumeSharedBetweenTabs` | `Should the set volume be shared between tabs and remembered between sessions?` |
 | `feature_helptext_volumeSharedBetweenTabs` | `If you change the volume in one tab, the volume level will be set to the same value in all other tabs that have this feature enabled.\nThis value will be remembered and restored across sessions, until disabled.` |
@@ -152,6 +157,7 @@ This means to figure out which keys are untranslated, you will need to manually
 | `feature_helptext_thumbnailOverlayBehavior` | `The thumbnail overlay will be shown over top of the currently playing video or song.\nThis will not save any bandwidth as the video will still be loaded and played in the background!` |
 | `feature_desc_thumbnailOverlayToggleBtnShown` | `Add a button to the media controls to manually toggle the thumbnail overlay` |
 | `feature_helptext_thumbnailOverlayToggleBtnShown` | `This button will allow you to manually toggle the thumbnail overlay on and off.\nOnce a new video or song starts playing, the default state will be restored.\nHold shift while clicking or press the middle mouse button to open the thumbnail of the highest quality in a new tab.` |
+| `feature_desc_thumbnailOverlayShowIndicator` | `Show an indicator in the bottom right corner of the thumbnail overlay while it's active?` |
 | `feature_desc_rememberSongTimeDuration` | `How long in seconds to remember the song's time for after it was last played` |
 | `feature_desc_rememberSongTimeReduction` | `How many seconds to subtract when restoring the time of a remembered song` |
 | `feature_helptext_rememberSongTimeReduction` | `When restoring the time of a song that was remembered, this amount of seconds will be subtracted from the remembered time so you can re-listen to the part that was interrupted.` |
@@ -160,7 +166,7 @@ This means to figure out which keys are untranslated, you will need to manually
 
 <br></details>
 
-<details><summary><code>hi_IN</code> - 30 missing keys <i>(click to show)</i></summary><br>
+<details><summary><code>hi_IN</code> - 32 missing keys <i>(click to show)</i></summary><br>
 
 | Key | English text |
 | --- | ------------ |
@@ -177,8 +183,9 @@ This means to figure out which keys are untranslated, you will need to manually
 | `thumbnail_overlay_behavior_videos_only` | `Only for videos` |
 | `thumbnail_overlay_behavior_songs_only` | `Only for songs` |
 | `thumbnail_overlay_behavior_always` | `Always` |
-| `thumbnail_overlay_toggle_btn_tooltip_hide` | `Click to hide the thumbnail overlay` |
-| `thumbnail_overlay_toggle_btn_tooltip_show` | `Click to show the thumbnail overlay` |
+| `thumbnail_overlay_toggle_btn_tooltip_hide` | `Disable the thumbnail overlay - middle-click or shift-click to open in a new tab` |
+| `thumbnail_overlay_toggle_btn_tooltip_show` | `Enable the thumbnail overlay - middle-click or shift-click to open in a new tab` |
+| `thumbnail_overlay_indicator_tooltip` | `The thumbnail overlay is currently active` |
 | `feature_category_volume` | `Volume` |
 | `feature_desc_volumeSharedBetweenTabs` | `Should the set volume be shared between tabs and remembered between sessions?` |
 | `feature_helptext_volumeSharedBetweenTabs` | `If you change the volume in one tab, the volume level will be set to the same value in all other tabs that have this feature enabled.\nThis value will be remembered and restored across sessions, until disabled.` |
@@ -189,6 +196,7 @@ This means to figure out which keys are untranslated, you will need to manually
 | `feature_helptext_thumbnailOverlayBehavior` | `The thumbnail overlay will be shown over top of the currently playing video or song.\nThis will not save any bandwidth as the video will still be loaded and played in the background!` |
 | `feature_desc_thumbnailOverlayToggleBtnShown` | `Add a button to the media controls to manually toggle the thumbnail overlay` |
 | `feature_helptext_thumbnailOverlayToggleBtnShown` | `This button will allow you to manually toggle the thumbnail overlay on and off.\nOnce a new video or song starts playing, the default state will be restored.\nHold shift while clicking or press the middle mouse button to open the thumbnail of the highest quality in a new tab.` |
+| `feature_desc_thumbnailOverlayShowIndicator` | `Show an indicator in the bottom right corner of the thumbnail overlay while it's active?` |
 | `feature_desc_rememberSongTimeDuration` | `How long in seconds to remember the song's time for after it was last played` |
 | `feature_desc_rememberSongTimeReduction` | `How many seconds to subtract when restoring the time of a remembered song` |
 | `feature_helptext_rememberSongTimeReduction` | `When restoring the time of a song that was remembered, this amount of seconds will be subtracted from the remembered time so you can re-listen to the part that was interrupted.` |
@@ -197,7 +205,7 @@ This means to figure out which keys are untranslated, you will need to manually
 
 <br></details>
 
-<details><summary><code>ja_JA</code> - 30 missing keys <i>(click to show)</i></summary><br>
+<details><summary><code>ja_JA</code> - 32 missing keys <i>(click to show)</i></summary><br>
 
 | Key | English text |
 | --- | ------------ |
@@ -214,8 +222,9 @@ This means to figure out which keys are untranslated, you will need to manually
 | `thumbnail_overlay_behavior_videos_only` | `Only for videos` |
 | `thumbnail_overlay_behavior_songs_only` | `Only for songs` |
 | `thumbnail_overlay_behavior_always` | `Always` |
-| `thumbnail_overlay_toggle_btn_tooltip_hide` | `Click to hide the thumbnail overlay` |
-| `thumbnail_overlay_toggle_btn_tooltip_show` | `Click to show the thumbnail overlay` |
+| `thumbnail_overlay_toggle_btn_tooltip_hide` | `Disable the thumbnail overlay - middle-click or shift-click to open in a new tab` |
+| `thumbnail_overlay_toggle_btn_tooltip_show` | `Enable the thumbnail overlay - middle-click or shift-click to open in a new tab` |
+| `thumbnail_overlay_indicator_tooltip` | `The thumbnail overlay is currently active` |
 | `feature_category_volume` | `Volume` |
 | `feature_desc_volumeSharedBetweenTabs` | `Should the set volume be shared between tabs and remembered between sessions?` |
 | `feature_helptext_volumeSharedBetweenTabs` | `If you change the volume in one tab, the volume level will be set to the same value in all other tabs that have this feature enabled.\nThis value will be remembered and restored across sessions, until disabled.` |
@@ -226,6 +235,7 @@ This means to figure out which keys are untranslated, you will need to manually
 | `feature_helptext_thumbnailOverlayBehavior` | `The thumbnail overlay will be shown over top of the currently playing video or song.\nThis will not save any bandwidth as the video will still be loaded and played in the background!` |
 | `feature_desc_thumbnailOverlayToggleBtnShown` | `Add a button to the media controls to manually toggle the thumbnail overlay` |
 | `feature_helptext_thumbnailOverlayToggleBtnShown` | `This button will allow you to manually toggle the thumbnail overlay on and off.\nOnce a new video or song starts playing, the default state will be restored.\nHold shift while clicking or press the middle mouse button to open the thumbnail of the highest quality in a new tab.` |
+| `feature_desc_thumbnailOverlayShowIndicator` | `Show an indicator in the bottom right corner of the thumbnail overlay while it's active?` |
 | `feature_desc_rememberSongTimeDuration` | `How long in seconds to remember the song's time for after it was last played` |
 | `feature_desc_rememberSongTimeReduction` | `How many seconds to subtract when restoring the time of a remembered song` |
 | `feature_helptext_rememberSongTimeReduction` | `When restoring the time of a song that was remembered, this amount of seconds will be subtracted from the remembered time so you can re-listen to the part that was interrupted.` |
@@ -234,7 +244,7 @@ This means to figure out which keys are untranslated, you will need to manually
 
 <br></details>
 
-<details><summary><code>pt_BR</code> - 30 missing keys <i>(click to show)</i></summary><br>
+<details><summary><code>pt_BR</code> - 32 missing keys <i>(click to show)</i></summary><br>
 
 | Key | English text |
 | --- | ------------ |
@@ -251,8 +261,9 @@ This means to figure out which keys are untranslated, you will need to manually
 | `thumbnail_overlay_behavior_videos_only` | `Only for videos` |
 | `thumbnail_overlay_behavior_songs_only` | `Only for songs` |
 | `thumbnail_overlay_behavior_always` | `Always` |
-| `thumbnail_overlay_toggle_btn_tooltip_hide` | `Click to hide the thumbnail overlay` |
-| `thumbnail_overlay_toggle_btn_tooltip_show` | `Click to show the thumbnail overlay` |
+| `thumbnail_overlay_toggle_btn_tooltip_hide` | `Disable the thumbnail overlay - middle-click or shift-click to open in a new tab` |
+| `thumbnail_overlay_toggle_btn_tooltip_show` | `Enable the thumbnail overlay - middle-click or shift-click to open in a new tab` |
+| `thumbnail_overlay_indicator_tooltip` | `The thumbnail overlay is currently active` |
 | `feature_category_volume` | `Volume` |
 | `feature_desc_volumeSharedBetweenTabs` | `Should the set volume be shared between tabs and remembered between sessions?` |
 | `feature_helptext_volumeSharedBetweenTabs` | `If you change the volume in one tab, the volume level will be set to the same value in all other tabs that have this feature enabled.\nThis value will be remembered and restored across sessions, until disabled.` |
@@ -263,6 +274,7 @@ This means to figure out which keys are untranslated, you will need to manually
 | `feature_helptext_thumbnailOverlayBehavior` | `The thumbnail overlay will be shown over top of the currently playing video or song.\nThis will not save any bandwidth as the video will still be loaded and played in the background!` |
 | `feature_desc_thumbnailOverlayToggleBtnShown` | `Add a button to the media controls to manually toggle the thumbnail overlay` |
 | `feature_helptext_thumbnailOverlayToggleBtnShown` | `This button will allow you to manually toggle the thumbnail overlay on and off.\nOnce a new video or song starts playing, the default state will be restored.\nHold shift while clicking or press the middle mouse button to open the thumbnail of the highest quality in a new tab.` |
+| `feature_desc_thumbnailOverlayShowIndicator` | `Show an indicator in the bottom right corner of the thumbnail overlay while it's active?` |
 | `feature_desc_rememberSongTimeDuration` | `How long in seconds to remember the song's time for after it was last played` |
 | `feature_desc_rememberSongTimeReduction` | `How many seconds to subtract when restoring the time of a remembered song` |
 | `feature_helptext_rememberSongTimeReduction` | `When restoring the time of a song that was remembered, this amount of seconds will be subtracted from the remembered time so you can re-listen to the part that was interrupted.` |
@@ -271,7 +283,7 @@ This means to figure out which keys are untranslated, you will need to manually
 
 <br></details>
 
-<details><summary><code>zh_CN</code> - 30 missing keys <i>(click to show)</i></summary><br>
+<details><summary><code>zh_CN</code> - 32 missing keys <i>(click to show)</i></summary><br>
 
 | Key | English text |
 | --- | ------------ |
@@ -288,8 +300,9 @@ This means to figure out which keys are untranslated, you will need to manually
 | `thumbnail_overlay_behavior_videos_only` | `Only for videos` |
 | `thumbnail_overlay_behavior_songs_only` | `Only for songs` |
 | `thumbnail_overlay_behavior_always` | `Always` |
-| `thumbnail_overlay_toggle_btn_tooltip_hide` | `Click to hide the thumbnail overlay` |
-| `thumbnail_overlay_toggle_btn_tooltip_show` | `Click to show the thumbnail overlay` |
+| `thumbnail_overlay_toggle_btn_tooltip_hide` | `Disable the thumbnail overlay - middle-click or shift-click to open in a new tab` |
+| `thumbnail_overlay_toggle_btn_tooltip_show` | `Enable the thumbnail overlay - middle-click or shift-click to open in a new tab` |
+| `thumbnail_overlay_indicator_tooltip` | `The thumbnail overlay is currently active` |
 | `feature_category_volume` | `Volume` |
 | `feature_desc_volumeSharedBetweenTabs` | `Should the set volume be shared between tabs and remembered between sessions?` |
 | `feature_helptext_volumeSharedBetweenTabs` | `If you change the volume in one tab, the volume level will be set to the same value in all other tabs that have this feature enabled.\nThis value will be remembered and restored across sessions, until disabled.` |
@@ -300,6 +313,7 @@ This means to figure out which keys are untranslated, you will need to manually
 | `feature_helptext_thumbnailOverlayBehavior` | `The thumbnail overlay will be shown over top of the currently playing video or song.\nThis will not save any bandwidth as the video will still be loaded and played in the background!` |
 | `feature_desc_thumbnailOverlayToggleBtnShown` | `Add a button to the media controls to manually toggle the thumbnail overlay` |
 | `feature_helptext_thumbnailOverlayToggleBtnShown` | `This button will allow you to manually toggle the thumbnail overlay on and off.\nOnce a new video or song starts playing, the default state will be restored.\nHold shift while clicking or press the middle mouse button to open the thumbnail of the highest quality in a new tab.` |
+| `feature_desc_thumbnailOverlayShowIndicator` | `Show an indicator in the bottom right corner of the thumbnail overlay while it's active?` |
 | `feature_desc_rememberSongTimeDuration` | `How long in seconds to remember the song's time for after it was last played` |
 | `feature_desc_rememberSongTimeReduction` | `How many seconds to subtract when restoring the time of a remembered song` |
 | `feature_helptext_rememberSongTimeReduction` | `When restoring the time of a song that was remembered, this amount of seconds will be subtracted from the remembered time so you can re-listen to the part that was interrupted.` |

assets/translations/en_US.json

@@ -115,8 +115,9 @@
     "thumbnail_overlay_behavior_videos_only": "Only for videos",
     "thumbnail_overlay_behavior_songs_only": "Only for songs",
     "thumbnail_overlay_behavior_always": "Always",
-    "thumbnail_overlay_toggle_btn_tooltip_hide": "Click to hide the thumbnail overlay",
-    "thumbnail_overlay_toggle_btn_tooltip_show": "Click to show the thumbnail overlay",
+    "thumbnail_overlay_toggle_btn_tooltip_hide": "Disable the thumbnail overlay - middle-click or shift-click to open in a new tab",
+    "thumbnail_overlay_toggle_btn_tooltip_show": "Enable the thumbnail overlay - middle-click or shift-click to open in a new tab",
+    "thumbnail_overlay_indicator_tooltip": "The thumbnail overlay is currently active",
 
     "unit_entries-1": "entry",
     "unit_entries-n": "entries",
@@ -154,6 +155,7 @@
     "feature_helptext_thumbnailOverlayBehavior": "The thumbnail overlay will be shown over top of the currently playing video or song.\nThis will not save any bandwidth as the video will still be loaded and played in the background!",
     "feature_desc_thumbnailOverlayToggleBtnShown": "Add a button to the media controls to manually toggle the thumbnail overlay",
     "feature_helptext_thumbnailOverlayToggleBtnShown": "This button will allow you to manually toggle the thumbnail overlay on and off.\nOnce a new video or song starts playing, the default state will be restored.\nHold shift while clicking or press the middle mouse button to open the thumbnail of the highest quality in a new tab.",
+    "feature_desc_thumbnailOverlayShowIndicator": "Show an indicator in the bottom right corner of the thumbnail overlay while it's active?",
 
     "feature_desc_lyricsQueueButton": "Add a button to each song in a queue to quickly open its lyrics page",
     "feature_desc_deleteFromQueueButton": "Add a button to each song in a queue to quickly remove it",

src/config.ts

@@ -53,6 +53,7 @@ export const migrations: DataMigrationsDict = {
     "rememberSongTimeMinPlayTime", "volumeSharedBetweenTabs",
     "setInitialTabVolume", "initialTabVolumeLevel",
     "thumbnailOverlayBehavior", "thumbnailOverlayToggleBtnShown",
+    "thumbnailOverlayShowIndicator",
   ], oldData),
   // TODO: once advanced filtering is fully implemented, clear cache on migration to fv6
   // 5 -> 6 (v1.3)

src/features/index.ts

@@ -124,10 +124,20 @@ export const featInfo = {
   thumbnailOverlayToggleBtnShown: {
     type: "toggle",
     category: "layout",
-    default: false,
+    default: true,
     enable: noopTODO,
     disable: noopTODO,
   },
+  thumbnailOverlayShowIndicator: {
+    type: "toggle",
+    category: "layout",
+    default: true,
+    enable: noopTODO,
+    disable: noopTODO,
+    advanced: true,
+    // TODO: to be reworked or removed in the big menu rework
+    textAdornment: adornments.advanced,
+  },
 
   //#SECTION volume
   volumeSliderLabel: {

src/features/layout.css

@@ -243,6 +243,17 @@ yt-multi-page-menu-section-renderer.ytd-multi-page-menu-renderer {
   object-fit: cover;
 }
 
+#bytm-thumbnail-overlay-indicator {
+  position: absolute;
+  bottom: 16px;
+  right: 16px;
+  width: calc(min(56px, 100% - 16px));
+  height: calc(min(56px, 100% - 16px));
+  z-index: 1;
+  cursor: help;
+  filter: drop-shadow(0 0 3px #000);
+}
+
 ytmusic-player#player #bezel {
   z-index: 1;
 }

src/features/layout.ts

@@ -406,7 +406,7 @@ export async function initThumbnailOverlay() {
   const playerEl = document.querySelector<HTMLElement>(playerSelector);
 
   if(!playerEl)
-    return warn("Couldn't find video player element while adding thumbnail overlay");
+    return error("Couldn't find video player element while adding thumbnail overlay");
 
   /** Checks and updates the overlay and toggle button states based on the current song type (yt video or ytm song) */
   const updateOverlayVisibility = async () => {
@@ -422,29 +422,45 @@ export async function initThumbnailOverlay() {
 
     const overlayElem = document.querySelector<HTMLElement>("#bytm-thumbnail-overlay");
     const thumbElem = document.querySelector<HTMLElement>("#bytm-thumbnail-overlay-img");
-    if(!overlayElem || !thumbElem)
-      return warn("Couldn't find thumbnail overlay element while checking visibility");
-
-    overlayElem.style.display = showOverlay ? "block" : "none";
-    thumbElem.ariaHidden = String(!showOverlay);
+    const indicatorElem = document.querySelector<HTMLElement>("#bytm-thumbnail-overlay-indicator");
+
+    if(overlayElem)
+      overlayElem.style.display = showOverlay ? "block" : "none";
+    if(thumbElem)
+      thumbElem.ariaHidden = String(!showOverlay);
+    if(indicatorElem) {
+      indicatorElem.style.display = showOverlay ? "block" : "none";
+      indicatorElem.ariaHidden = String(!showOverlay);
+    }
 
     if(getFeatures().thumbnailOverlayToggleBtnShown) {
       const toggleBtnElem = document.querySelector<HTMLImageElement>("#bytm-thumbnail-overlay-toggle");
       const toggleBtnImgElem = document.querySelector<HTMLImageElement>("#bytm-thumbnail-overlay-toggle > img");
       if(!toggleBtnElem || !toggleBtnImgElem)
-        return warn("Couldn't find thumbnail overlay toggle button element while checking visibility");
+        return error("Couldn't find thumbnail overlay toggle button element while checking visibility");
 
-      toggleBtnImgElem.src = await getResourceUrl(`icon-image${showOverlay ? "" : "_off"}` as "icon-image" | "icon-image_off");
+      toggleBtnImgElem.src = await getResourceUrl(`icon-image${showOverlay ? "_filled" : ""}` as "icon-image" | "icon-image_filled");
       toggleBtnElem.ariaLabel = toggleBtnElem.title = t(`thumbnail_overlay_toggle_btn_tooltip${showOverlay ? "_hide" : "_show"}`);
     }
   };
 
-  const createElements = () => {
+  const createElements = async () => {
     // overlay
     const overlayElem = document.createElement("div");
     overlayElem.id = "bytm-thumbnail-overlay";
     overlayElem.classList.add("bytm-no-select");
     overlayElem.style.display = "none";
+
+    let indicatorElem: HTMLImageElement | undefined;
+    if(getFeatures().thumbnailOverlayShowIndicator) {
+      indicatorElem = document.createElement("img");
+      indicatorElem.id = "bytm-thumbnail-overlay-indicator";
+      indicatorElem.src = await getResourceUrl("icon-image");
+      indicatorElem.role = "presentation";
+      indicatorElem.title = indicatorElem.ariaLabel = t("thumbnail_overlay_indicator_tooltip");
+      indicatorElem.ariaHidden = "true";
+      indicatorElem.style.display = "none";
+    }
   
     const thumbImgElem = document.createElement("img");
     thumbImgElem.id = "bytm-thumbnail-overlay-img";
@@ -453,6 +469,7 @@ export async function initThumbnailOverlay() {
   
     overlayElem.appendChild(thumbImgElem);
     playerEl.appendChild(overlayElem);
+    indicatorElem && playerEl.appendChild(indicatorElem);
   
     siteEvents.on("watchIdChanged", async () => {
       const watchId = getWatchId();

src/features/lyrics.ts

@@ -30,12 +30,17 @@ async function addActualMediaCtrlLyricsBtn(likeContainer: HTMLElement) {
   (async () => {
     const gUrl = await getCurrentLyricsUrl();
 
-    const linkElem = await createLyricsBtn(gUrl ?? undefined);
-    linkElem.id = "betterytm-lyrics-button";
+    const lyricsBtnElem = await createLyricsBtn(gUrl ?? undefined);
+    lyricsBtnElem.id = "betterytm-lyrics-button";
 
     log("Inserted lyrics button into media controls bar");
 
-    insertAfter(likeContainer, linkElem);
+    const thumbToggleElem = document.querySelector<HTMLElement>("#bytm-thumbnail-overlay-toggle");
+
+    if(thumbToggleElem)
+      insertAfter(thumbToggleElem, lyricsBtnElem);
+    else
+      insertAfter(likeContainer, lyricsBtnElem);
   })();
 
   currentSongTitle = songTitleElem.title;

src/types.ts

@@ -320,6 +320,8 @@ export interface FeatureConfig {
   thumbnailOverlayBehavior: "never" | "videosOnly" | "songsOnly" | "always";
   /** Whether to show a button to toggle the thumbnail overlay in the media controls */
   thumbnailOverlayToggleBtnShown: boolean;
+  /** Whether to show an indicator on the thumbnail overlay when it is active */
+  thumbnailOverlayShowIndicator: boolean;
 
   //#SECTION volume
   /** Add a percentage label to the volume slider */