Add id3 to audio

eslint.config.js

@@ -20,7 +20,7 @@ export default [
       "sonarjs/max-switch-cases": 0,
       "sonarjs/prefer-for-of": 0,
       "sonarjs/new-cap": 0,
-      "sonarjs/todo-tag": 0,
+      "sonarjs/todo-tag": "warn",
       "sonarjs/no-commented-code": 0,
       "sonarjs/no-nested-assignment": 0,
       "sonarjs/cognitive-complexity": "warn",

package.json

@@ -16,6 +16,7 @@
     "voice-over-translation"
   ],
   "devDependencies": {
+    "browser-id3-writer": "^6.1.0",
     "browserslist": "^4.23.3",
     "bun-types": "^1.1.28",
     "enquirer": "^2.4.1",

src/index.js

@@ -5,6 +5,7 @@
 import { availableLangs, availableTTS, subtitlesFormats } from "vot.js/consts";
 import { convertSubs } from "vot.js/utils/subs";
 import { svg, html } from "lit-html";
+import { ID3Writer } from "browser-id3-writer";
 
 import {
   defaultAutoVolume,
@@ -362,7 +363,7 @@
     }
 
     // convert old vot-worker domain to actual
     // TODO: remove converter in one of the next versions after release 1.7.0
     if (this.data.proxyWorkerHost === "vot.toil.cc") {
       this.data.proxyWorkerHost = proxyWorkerHost;
       await votStorage.set("proxyWorkerHost", proxyWorkerHost);
@@ -472,7 +473,7 @@
     }
   }
 
   initUI() {
     // VOT Button
     {
       this.votButton = ui.createVOTButton(
@@ -1101,7 +1102,11 @@
         const filename = clearFileName(
           this.videoData.title ?? this.videoData.videoId,
         );
-        downloadBlob(blob, `${filename}.mp3`);
+        const arrayBuffer = await blob.arrayBuffer();
+        const writer = new ID3Writer(arrayBuffer);
+        writer.setFrame("TIT2", filename);
+        writer.addTag();
+        downloadBlob(writer.getBlob(), `${filename}.mp3`);
       });
 
       this.votDownloadSubtitlesButton.addEventListener("click", async () => {
@@ -2173,6 +2178,9 @@
               localizationProvider.get("grantPermissionToAutoPlay"),
             );
             throw new VOTLocalizedError("grantPermissionToAutoPlay");
+          } else if (e.name === "NotSupportedError") {
+            this.data.audioProxy = 1;
+            await votStorage.set("audioProxy", 1);
           }
         });
       }
@@ -2354,20 +2362,6 @@
     return audioUrl;
   }
 
-  async setAudioSourceAndPlay(audioUrl) {
-    debug.log("setAudioSourceAndPlay");
-    this.audio.src = audioUrl;
-    try {
-      await this.audio.play();
-    } catch (e) {
-      console.error("[VOT]", e);
-      if (e.name === "NotSupportedError") {
-        this.data.audioProxy = 1;
-        await votStorage.set("audioProxy", 1);
-      }
-    }
-  }
-
   /**
    * Download audio file and connect it to audio context
    *
@@ -2422,7 +2416,7 @@
     // eslint-disable-next-line sonarjs/no-unused-expressions
     this.needBypassCSP()
       ? await this.configurePlaySound(audioUrl)
-      : await this.setAudioSourceAndPlay(audioUrl);
+      : (this.audio.src = audioUrl);
 
     if (!this.volumeOnStart) {
       this.volumeOnStart = this.getVideoVolume();
@@ -2449,7 +2443,7 @@
   }
 
   // Define a function to translate a video and handle the callback
   async translateFunc(
     VIDEO_ID,
     isStream,
     requestLang,