feat: shared volume icon

assets/translations/README.md

@@ -21,14 +21,14 @@ To submit or edit a translation, please follow [this guide](../../contributing.m
 |   | Locale | Translated keys | Based on |
 | :----: | ------ | --------------- | :------: |
 | ─ | [`en_US`](./en_US.json) | 181 (default locale) |  |
-| ‼️ | [`de_DE`](./de_DE.json) | `162/181` (89.5%) | ─ |
+| ‼️ | [`de_DE`](./de_DE.json) | `161/181` (89%) | ─ |
 | ─ | [`en_UK`](./en_UK.json) | `181/181` (100%) | `en_US` |
-| ‼️ | [`es_ES`](./es_ES.json) | `162/181` (89.5%) | ─ |
-| ‼️ | [`fr_FR`](./fr_FR.json) | `162/181` (89.5%) | ─ |
-| ‼️ | [`hi_IN`](./hi_IN.json) | `162/181` (89.5%) | ─ |
-| ‼️ | [`ja_JA`](./ja_JA.json) | `162/181` (89.5%) | ─ |
-| ‼️ | [`pt_BR`](./pt_BR.json) | `162/181` (89.5%) | ─ |
-| ‼️ | [`zh_CN`](./zh_CN.json) | `162/181` (89.5%) | ─ |
+| ‼️ | [`es_ES`](./es_ES.json) | `161/181` (89%) | ─ |
+| ‼️ | [`fr_FR`](./fr_FR.json) | `161/181` (89%) | ─ |
+| ‼️ | [`hi_IN`](./hi_IN.json) | `161/181` (89%) | ─ |
+| ‼️ | [`ja_JA`](./ja_JA.json) | `161/181` (89%) | ─ |
+| ‼️ | [`pt_BR`](./pt_BR.json) | `161/181` (89%) | ─ |
+| ‼️ | [`zh_CN`](./zh_CN.json) | `161/181` (89%) | ─ |
 
 <sub>
 ✅ - Fully translated
@@ -49,12 +49,13 @@ This means to figure out which keys are untranslated, you will need to manually
 
 ### Missing keys:
 
-<details><summary><code>de_DE</code> - 19 missing keys <i>(click to show)</i></summary><br>
+<details><summary><code>de_DE</code> - 20 missing keys <i>(click to show)</i></summary><br>
 
 | Key | English text |
 | --- | ------------ |
 | `copy_hidden_value` | `Copy hidden value` |
 | `copy_hidden_tooltip` | `Click to copy the hidden value - this is sensitive data ⚠️` |
+| `volume_shared_tooltip` | `Volume level is shared between tabs - disable in the configuration menu` |
 | `active_mode_display` | `%1 Mode` |
 | `active_mode_tooltip-1` | `The %1 is currently active` |
 | `active_mode_tooltip-n` | `The %1 are currently active` |
@@ -75,12 +76,13 @@ This means to figure out which keys are untranslated, you will need to manually
 
 <br></details>
 
-<details><summary><code>es_ES</code> - 19 missing keys <i>(click to show)</i></summary><br>
+<details><summary><code>es_ES</code> - 20 missing keys <i>(click to show)</i></summary><br>
 
 | Key | English text |
 | --- | ------------ |
 | `copy_hidden_value` | `Copy hidden value` |
 | `copy_hidden_tooltip` | `Click to copy the hidden value - this is sensitive data ⚠️` |
+| `volume_shared_tooltip` | `Volume level is shared between tabs - disable in the configuration menu` |
 | `active_mode_display` | `%1 Mode` |
 | `active_mode_tooltip-1` | `The %1 is currently active` |
 | `active_mode_tooltip-n` | `The %1 are currently active` |
@@ -101,12 +103,13 @@ This means to figure out which keys are untranslated, you will need to manually
 
 <br></details>
 
-<details><summary><code>fr_FR</code> - 19 missing keys <i>(click to show)</i></summary><br>
+<details><summary><code>fr_FR</code> - 20 missing keys <i>(click to show)</i></summary><br>
 
 | Key | English text |
 | --- | ------------ |
 | `copy_hidden_value` | `Copy hidden value` |
 | `copy_hidden_tooltip` | `Click to copy the hidden value - this is sensitive data ⚠️` |
+| `volume_shared_tooltip` | `Volume level is shared between tabs - disable in the configuration menu` |
 | `active_mode_display` | `%1 Mode` |
 | `active_mode_tooltip-1` | `The %1 is currently active` |
 | `active_mode_tooltip-n` | `The %1 are currently active` |
@@ -127,12 +130,13 @@ This means to figure out which keys are untranslated, you will need to manually
 
 <br></details>
 
-<details><summary><code>hi_IN</code> - 19 missing keys <i>(click to show)</i></summary><br>
+<details><summary><code>hi_IN</code> - 20 missing keys <i>(click to show)</i></summary><br>
 
 | Key | English text |
 | --- | ------------ |
 | `copy_hidden_value` | `Copy hidden value` |
 | `copy_hidden_tooltip` | `Click to copy the hidden value - this is sensitive data ⚠️` |
+| `volume_shared_tooltip` | `Volume level is shared between tabs - disable in the configuration menu` |
 | `active_mode_display` | `%1 Mode` |
 | `active_mode_tooltip-1` | `The %1 is currently active` |
 | `active_mode_tooltip-n` | `The %1 are currently active` |
@@ -153,12 +157,13 @@ This means to figure out which keys are untranslated, you will need to manually
 
 <br></details>
 
-<details><summary><code>ja_JA</code> - 19 missing keys <i>(click to show)</i></summary><br>
+<details><summary><code>ja_JA</code> - 20 missing keys <i>(click to show)</i></summary><br>
 
 | Key | English text |
 | --- | ------------ |
 | `copy_hidden_value` | `Copy hidden value` |
 | `copy_hidden_tooltip` | `Click to copy the hidden value - this is sensitive data ⚠️` |
+| `volume_shared_tooltip` | `Volume level is shared between tabs - disable in the configuration menu` |
 | `active_mode_display` | `%1 Mode` |
 | `active_mode_tooltip-1` | `The %1 is currently active` |
 | `active_mode_tooltip-n` | `The %1 are currently active` |
@@ -179,12 +184,13 @@ This means to figure out which keys are untranslated, you will need to manually
 
 <br></details>
 
-<details><summary><code>pt_BR</code> - 19 missing keys <i>(click to show)</i></summary><br>
+<details><summary><code>pt_BR</code> - 20 missing keys <i>(click to show)</i></summary><br>
 
 | Key | English text |
 | --- | ------------ |
 | `copy_hidden_value` | `Copy hidden value` |
 | `copy_hidden_tooltip` | `Click to copy the hidden value - this is sensitive data ⚠️` |
+| `volume_shared_tooltip` | `Volume level is shared between tabs - disable in the configuration menu` |
 | `active_mode_display` | `%1 Mode` |
 | `active_mode_tooltip-1` | `The %1 is currently active` |
 | `active_mode_tooltip-n` | `The %1 are currently active` |
@@ -205,12 +211,13 @@ This means to figure out which keys are untranslated, you will need to manually
 
 <br></details>
 
-<details><summary><code>zh_CN</code> - 19 missing keys <i>(click to show)</i></summary><br>
+<details><summary><code>zh_CN</code> - 20 missing keys <i>(click to show)</i></summary><br>
 
 | Key | English text |
 | --- | ------------ |
 | `copy_hidden_value` | `Copy hidden value` |
 | `copy_hidden_tooltip` | `Click to copy the hidden value - this is sensitive data ⚠️` |
+| `volume_shared_tooltip` | `Volume level is shared between tabs - disable in the configuration menu` |
 | `active_mode_display` | `%1 Mode` |
 | `active_mode_tooltip-1` | `The %1 is currently active` |
 | `active_mode_tooltip-n` | `The %1 are currently active` |

assets/translations/en_US.json

@@ -51,7 +51,7 @@
     "scroll_to_playing": "Scroll to the currently playing song",
     "scroll_to_bottom": "Click to scroll to the bottom",
     "volume_tooltip": "Volume: %1% (Sensitivity: %2%)",
-    "volume_locked": "Volume is locked at %1% - you can change this in the config menu.",
+    "volume_shared_tooltip": "Volume level is shared between tabs - disable in the configuration menu",
     "middle_click_open_tab": "Middle-click to open in a new tab",
     "active_mode_display": "%1 Mode",
     "active_mode_tooltip-1": "The %1 is currently active",

src/features/layout.css

@@ -193,39 +193,6 @@ yt-multi-page-menu-section-renderer.ytd-multi-page-menu-renderer {
   text-decoration: underline;
 }
 
-/* #MARKER volume slider */
-
-#bytm-vol-slider-cont {
-  position: relative;
-}
-
-#bytm-vol-slider-label {
-  opacity: 0.000001;
-  position: absolute;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: 5px;
-  font-size: 1.4rem;
-  top: 50%;
-  left: 0;
-  transform: translate(calc(-50% - 10px), -50%);
-  text-align: right;
-  transition: opacity 0.2s ease;
-}
-
-#bytm-vol-slider-label svg {
-  padding: 4px;
-}
-
-#bytm-vol-slider-label svg path {
-  fill: #909090;
-}
-
-#bytm-vol-slider-label.bytm-visible {
-  opacity: 1;
-}
-
 /* #MARKER scroll to active */
 
 #bytm-scroll-to-active-btn-cont {

src/features/volume.css

@@ -0,0 +1,47 @@
+/* #MARKER volume slider */
+
+#bytm-vol-slider-cont {
+  position: relative;
+}
+
+#bytm-vol-slider-label {
+  opacity: 0.000001;
+  position: absolute;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 5px;
+  font-size: 1.4rem;
+  top: 50%;
+  left: 0;
+  transform: translate(calc(-50% - 10px), -50%);
+  text-align: right;
+  transition: opacity 0.2s ease;
+}
+
+#bytm-vol-slider-label.has-icon {
+  transform: translate(calc(-50% - 25px), -50%);
+}
+
+#bytm-vol-slider-label svg {
+  padding: 4px;
+}
+
+#bytm-vol-slider-label svg path {
+  fill: #909090;
+}
+
+#bytm-vol-slider-label.bytm-visible {
+  opacity: 1;
+}
+
+#bytm-vol-slider-shared {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+#bytm-vol-slider-shared svg {
+  width: 20px;
+  height: 20px;
+}

src/features/volume.ts

@@ -1,8 +1,9 @@
 import { addGlobalStyle, addParent, type Stringifiable } from "@sv443-network/userutils";
 import { getFeatures } from "../config";
-import { error, onSelectorOld, t } from "../utils";
+import { error, onSelectorOld, resourceToHTMLString, t } from "../utils";
 import { siteEvents } from "../siteEvents";
 import { featInfo } from ".";
+import "./volume.css";
 
 //#MARKER init
 
@@ -73,6 +74,21 @@ async function addVolumeSliderLabel(sliderElem: HTMLInputElement, sliderContaine
   const labelContElem = document.createElement("div");
   labelContElem.id = "bytm-vol-slider-label";
 
+  const volShared = getFeatures().volumeSharedBetweenTabs;
+  if(volShared) {
+    const linkIconHtml = await resourceToHTMLString("icon-link");
+    if(linkIconHtml) {
+      const linkIconElem = document.createElement("div");
+      linkIconElem.id = "bytm-vol-slider-shared";
+      linkIconElem.innerHTML = linkIconHtml;
+      linkIconElem.role = "alert";
+      linkIconElem.title = linkIconElem.ariaLabel = t("volume_shared_tooltip");
+
+      labelContElem.classList.add("has-icon");
+      labelContElem.appendChild(linkIconElem);
+    }
+  }
+
   const getLabel = (value: Stringifiable) => `${value}%`;
 
   const labelElem = document.createElement("div");
@@ -81,6 +97,7 @@ async function addVolumeSliderLabel(sliderElem: HTMLInputElement, sliderContaine
 
   // prevent video from minimizing
   labelContElem.addEventListener("click", (e) => e.stopPropagation());
+  labelContElem.addEventListener("keydown", (e) => ["Enter", "Space", " "].includes(e.key) && e.stopPropagation());
 
   const getLabelText = (slider: HTMLInputElement) =>
     t("volume_tooltip", slider.value, getFeatures().volumeSliderStep ?? slider.step);