Merge pull request #844 from ilyhalight/fix-multimedia-keys

fix multimedia keys if browser support audio context

changelog.md

@@ -7,9 +7,23 @@
 # 1.7.1 [WIP]
 
 - Включен обход Media CSP для player.vimeo.com
+- Добавлена поддержка субтитров от сайта для Vimeo
+<!-- - Добавлена поддержка просмотра видео в плеере без перехода по публичной ссылке для Яндекс Диска (Вы все еще должны открыть публичный доступ к файлу (Не к папке!!!)) (#837) -->
+- Исправлено неверное название переменной при отключение чекбокса усилителя громкости аудио, что могло приводить к ошибке
 - Исправлена работа встраиваемого плеера Vimeo (player.vimeo.com), если видео залито в приватный доступ и доступно только через встраивание (#543, #828)
+- Исправлена работа медиаклавиш, если в браузере есть поддержка AudioContext (#192, #357, #841)
+
+  В меню расширения добавлен чекбокс "Restoring multimedia keys". По умолчанию чекбокс включен, если браузер поддерживает AudioContext. С включением чекбокса "Restoring multimedia keys", изменение значения чекбокса "Bypassing Media CSP" становится недоступным т.к. эти два чекбокса выполняют один и тот же функционал, но "Bypassing Media CSP" действует для ограниченного числа веб-сайтов, а "Restoring multimedia keys" для всех веб-сайтов с которыми работает расширение. Если после этого перехода не возникнет серьезных проблем, то чекбокс "Bypassing Media CSP" будет полностью удален.
+
+# 1.7.1 Beta 1
+
+- Включен обход Media CSP для player.vimeo.com
 - Добавлена поддержка субтитров от сайта для Vimeo
-- Исправлено неверное название при отключение чекбокса усилителя громкости аудио
+- Исправлено неверное название переменной при отключение чекбокса усилителя громкости аудио, что могло приводить к ошибке
+- Исправлена работа встраиваемого плеера Vimeo (player.vimeo.com), если видео залито в приватный доступ и доступно только через встраивание (#543, #828)
+- Исправлена работа медиаклавиш, если в браузере есть поддержка AudioContext (#192, #357, #841)
+
+  В меню расширения добавлен чекбокс "Restoring multimedia keys". По умолчанию чекбокс включен, если браузер поддерживает AudioContext. С включением чекбокса "Restoring multimedia keys", изменение значения чекбокса "Bypassing Media CSP" становится недоступным т.к. эти два чекбокса выполняют один и тот же функционал, но "Bypassing Media CSP" действует для ограниченного числа веб-сайтов, а "Restoring multimedia keys" для всех веб-сайтов с которыми работает расширение. Если после этого перехода не возникнет серьезных проблем, то чекбокс "Bypassing Media CSP" будет полностью удален.
 
 # 1.7.0
 

dist/vot.user.js

@@ -161,12 +161,12 @@
 // @connect        onrender.com
 // @connect        workers.dev
 // @namespace      vot
-// @version        1.7.0
+// @version        1.7.1-beta1
 // @icon           https://translate.yandex.ru/icons/favicon.ico
 // @author         sodapng, mynovelhost, Toil, SashaXser, MrSoczekXD
 // @homepageURL    https://github.com/ilyhalight/voice-over-translation
-// @updateURL      https://raw.githubusercontent.com/ilyhalight/voice-over-translation/master/dist/vot.user.js
-// @downloadURL    https://raw.githubusercontent.com/ilyhalight/voice-over-translation/master/dist/vot.user.js
+// @updateURL      https://raw.githubusercontent.com/ilyhalight/voice-over-translation/dev/dist/vot.user.js
+// @downloadURL    https://raw.githubusercontent.com/ilyhalight/voice-over-translation/dev/dist/vot.user.js
 // @supportURL     https://github.com/ilyhalight/voice-over-translation/issues
 // ==/UserScript==
 
@@ -2391,7 +2391,7 @@ const votStorage = new (class {
 
 const localeCacheTTL = 7200;
 const localizationUrl = `${contentUrl}/${
-   false ? 0 : "master"
+   true ? "dev" : 0
 }/src/localization`;
 
 // TODO: add get from hashes.json or use DEFAULT_LOCALES
@@ -7315,6 +7315,10 @@ class VideoHandler {
         "bypassMediaCSP",
         Number(!!this.audioContext),
       ),
+      restoreMultiMediaKeys: votStorage.get(
+        "restoreMultiMediaKeys",
+        Number(!!this.audioContext),
+      ),
       showPiPButton: votStorage.get("showPiPButton", 0),
       translateAPIErrors: votStorage.get("translateAPIErrors", 1),
       translationService: votStorage.get(
@@ -7864,6 +7868,19 @@ class VideoHandler {
         this.votBypassMediaCSPCheckbox.container,
       );
 
+      this.votRestoreMultiMediaKeysCheckbox = ui.createCheckbox(
+        localizationProvider.get("VOTRestoreMultiMediaKeys"),
+        this.data?.restoreMultiMediaKeys ?? false,
+      );
+      if (!this.audioContext) {
+        this.votRestoreMultiMediaKeysCheckbox.input.disabled = true;
+        this.votRestoreMultiMediaKeysCheckbox.container.title =
+          localizationProvider.get("VOTNeedWebAudioAPI");
+      }
+      this.votSettingsDialog.bodyContainer.appendChild(
+        this.votRestoreMultiMediaKeysCheckbox.container,
+      );
+
       // ABOUT
 
       this.votAboutHeader = ui.createHeader(localizationProvider.get("about"));
@@ -8525,6 +8542,28 @@ class VideoHandler {
         })();
       });
 
+      this.votRestoreMultiMediaKeysCheckbox.input.addEventListener(
+        "change",
+        (e) => {
+          (async () => {
+            this.data.restoreMultiMediaKeys = Number(e.target.checked);
+            await votStorage.set(
+              "restoreMultiMediaKeys",
+              this.data.restoreMultiMediaKeys,
+            );
+            utils_debug.log(
+              "restoreMultiMediaKeys value changed. New value: ",
+              this.data.restoreMultiMediaKeys,
+            );
+            this.stopTranslate();
+            // TODO: delete if everything goes well
+            this.votBypassMediaCSPCheckbox.input.disabled = e.target.checked;
+            this.votBypassMediaCSPCheckbox.input.value =
+              e.target.checked ?? this.data.bypassMediaCSP;
+          })();
+        },
+      );
+
       this.votUpdateLocaleFilesButton.addEventListener("click", () => {
         (async () => {
           await votStorage.set("locale-hash", "");
@@ -9205,7 +9244,7 @@ class VideoHandler {
     this.audio.currentTime = this.video.currentTime;
     this.audio.playbackRate = this.video.playbackRate;
 
-    return this.needBypassCSP()
+    return this.needUseAudioContext()
       ? this.lipsyncAudioContext(mode)
       : this.lipsyncAudio(mode);
   }
@@ -9216,7 +9255,9 @@ class VideoHandler {
     this.lipSync(event.type);
   };
 
-  needBypassCSP = () => this.data.bypassMediaCSP && this.site.needBypassCSP;
+  needUseAudioContext = () =>
+    (this.data.bypassMediaCSP && this.site.needBypassCSP) ||
+    this.data.restoreMultiMediaKeys;
 
   // Default actions on stop translate
   stopTranslate() {
@@ -9405,7 +9446,7 @@ class VideoHandler {
     }
 
     // eslint-disable-next-line sonarjs/no-unused-expressions
-    this.needBypassCSP()
+    this.needUseAudioContext()
       ? await this.configurePlaySound(audioUrl)
       : (this.audio.src = audioUrl);
 

package.json

@@ -20,19 +20,19 @@
     "browserslist": "^4.24.0",
     "bun-types": "^1.1.29",
     "enquirer": "^2.4.1",
-    "eslint": "^9.11.1",
-    "eslint-plugin-oxlint": "^0.9.8",
-    "eslint-plugin-sonarjs": "^2.0.2",
+    "eslint": "^9.12.0",
+    "eslint-plugin-oxlint": "^0.9.9",
+    "eslint-plugin-sonarjs": "^2.0.3",
     "eslint-webpack-plugin": "^4.2.0",
-    "globals": "^15.9.0",
+    "globals": "^15.10.0",
     "husky": "^9.1.6",
     "lightningcss": "^1.27.0",
     "lint-staged": "^15.2.10",
     "npm-run-all2": "^6.2.3",
-    "oxlint": "^0.9.8",
+    "oxlint": "^0.9.9",
     "patch-package": "^8.0.0",
     "postinstall-postinstall": "^2.1.0",
-    "sass": "^1.79.3",
+    "sass": "^1.79.4",
     "typescript": "^5.6.2",
     "webpack": "^5.95.0",
     "webpack-cli": "^5.1.4",

src/headers.json

@@ -1,7 +1,7 @@
 {
   "name": "[VOT] - Voice Over Translation",
   "description": "A small extension that adds a Yandex Browser video translation to other browsers",
-  "version": "1.7.0",
+  "version": "1.7.1-beta1",
   "author": "sodapng, mynovelhost, Toil, SashaXser, MrSoczekXD",
   "namespace": "vot",
   "icon": "https://translate.yandex.ru/icons/favicon.ico",

src/index.js

@@ -326,6 +326,10 @@ class VideoHandler {
         "bypassMediaCSP",
         Number(!!this.audioContext),
       ),
+      restoreMultiMediaKeys: votStorage.get(
+        "restoreMultiMediaKeys",
+        Number(!!this.audioContext),
+      ),
       showPiPButton: votStorage.get("showPiPButton", 0),
       translateAPIErrors: votStorage.get("translateAPIErrors", 1),
       translationService: votStorage.get(
@@ -875,6 +879,19 @@ class VideoHandler {
         this.votBypassMediaCSPCheckbox.container,
       );
 
+      this.votRestoreMultiMediaKeysCheckbox = ui.createCheckbox(
+        localizationProvider.get("VOTRestoreMultiMediaKeys"),
+        this.data?.restoreMultiMediaKeys ?? false,
+      );
+      if (!this.audioContext) {
+        this.votRestoreMultiMediaKeysCheckbox.input.disabled = true;
+        this.votRestoreMultiMediaKeysCheckbox.container.title =
+          localizationProvider.get("VOTNeedWebAudioAPI");
+      }
+      this.votSettingsDialog.bodyContainer.appendChild(
+        this.votRestoreMultiMediaKeysCheckbox.container,
+      );
+
       // ABOUT
 
       this.votAboutHeader = ui.createHeader(localizationProvider.get("about"));
@@ -1535,6 +1552,28 @@ class VideoHandler {
         })();
       });
 
+      this.votRestoreMultiMediaKeysCheckbox.input.addEventListener(
+        "change",
+        (e) => {
+          (async () => {
+            this.data.restoreMultiMediaKeys = Number(e.target.checked);
+            await votStorage.set(
+              "restoreMultiMediaKeys",
+              this.data.restoreMultiMediaKeys,
+            );
+            debug.log(
+              "restoreMultiMediaKeys value changed. New value: ",
+              this.data.restoreMultiMediaKeys,
+            );
+            this.stopTranslate();
+            // TODO: delete if everything goes well
+            this.votBypassMediaCSPCheckbox.input.disabled = e.target.checked;
+            this.votBypassMediaCSPCheckbox.input.value =
+              e.target.checked ?? this.data.bypassMediaCSP;
+          })();
+        },
+      );
+
       this.votUpdateLocaleFilesButton.addEventListener("click", () => {
         (async () => {
           await votStorage.set("locale-hash", "");
@@ -2214,7 +2253,7 @@ class VideoHandler {
     this.audio.currentTime = this.video.currentTime;
     this.audio.playbackRate = this.video.playbackRate;
 
-    return this.needBypassCSP()
+    return this.needUseAudioContext()
       ? this.lipsyncAudioContext(mode)
       : this.lipsyncAudio(mode);
   }
@@ -2225,7 +2264,9 @@ class VideoHandler {
     this.lipSync(event.type);
   };
 
-  needBypassCSP = () => this.data.bypassMediaCSP && this.site.needBypassCSP;
+  needUseAudioContext = () =>
+    (this.data.bypassMediaCSP && this.site.needBypassCSP) ||
+    this.data.restoreMultiMediaKeys;
 
   // Default actions on stop translate
   stopTranslate() {
@@ -2414,7 +2455,7 @@ class VideoHandler {
     }
 
     // eslint-disable-next-line sonarjs/no-unused-expressions
-    this.needBypassCSP()
+    this.needUseAudioContext()
       ? await this.configurePlaySound(audioUrl)
       : (this.audio.src = audioUrl);