Доработка VideoObserver и прочее

src/config/sites.js

@@ -138,15 +138,16 @@ const sites = () => {
       host: "bilibili",
       url: "https://www.bilibili.com/video/",
       match: /^(www|m|player).bilibili.com$/,
-      selector: ".bpx-player-video-wrap",
-    },
-    {
-      additionalData: "old", // /blackboard/webplayer/embed-old.html
-      host: "bilibili",
-      url: "https://www.bilibili.com/video/",
-      match: /^(www|m).bilibili.com$/,
-      selector: null,
+      selector: "#bilibili-player",
     },
+    // Добавляет лишние видео в обработчик
+    // {
+    //   additionalData: "old", // /blackboard/webplayer/embed-old.html
+    //   host: "bilibili",
+    //   url: "https://www.bilibili.com/video/",
+    //   match: /^(www|m).bilibili.com$/,
+    //   selector: null,
+    // },
     {
       host: "twitter",
       url: "https://twitter.com/i/status/",

src/index.js

@@ -59,6 +59,8 @@ import {
 
 const browserInfo = Bowser.getParser(window.navigator.userAgent).getResult();
 
+const dontTranslateMusic = false; // Пока не придумал как стоит реализовать
+
 const sitesChromiumBlocked = [...sitesInvidious, ...sitesPiped];
 
 const videoLipSyncEvents = [
@@ -269,6 +271,13 @@ class VideoHandler {
   }
 
   async autoTranslate() {
+    if (
+      this.site.host === "youtube" &&
+      dontTranslateMusic &&
+      youtubeUtils.isMusic()
+    ) {
+      return;
+    }
     if (
       !(
         this.firstPlay &&
@@ -1390,7 +1399,7 @@ class VideoHandler {
       this.container.style.height = "100%";
     }
 
-    addExtraEventListener(this.video, "loadeddata", async () => {
+    addExtraEventListener(this.video, "canplaythrough", async () => {
       // Временное решение
       if (this.site.host === "rutube" && this.video.src) {
         return;

src/utils/VideoObserver.js

@@ -15,6 +15,22 @@ function filterVideoNodes(nodes) {
   });
 }
 
+function isVideoReady(video) {
+  return video.readyState >= 3;
+}
+
+function waitForVideoReady(video, callback) {
+  function checkVideoState() {
+    if (isVideoReady(video)) {
+      callback(video);
+    } else {
+      requestAnimationFrame(checkVideoState);
+    }
+  }
+
+  checkVideoState();
+}
+
 export class VideoObserver {
   constructor() {
     this.onVideoAdded = new EventImpl();
@@ -28,7 +44,7 @@ export class VideoObserver {
 
             const addedNodes = filterVideoNodes(mutation.addedNodes);
             for (let j = 0; j < addedNodes.length; j++) {
-              this.handleVideoAdded(addedNodes[j]);
+              this.checkAndHandleVideo(addedNodes[j]);
             }
 
             const removedNodes = filterVideoNodes(mutation.removedNodes);
@@ -40,6 +56,7 @@ export class VideoObserver {
         { timeout: 1000 },
       );
     });
+    this.videoCache = new Set();
   }
 
   enable() {
@@ -49,14 +66,21 @@ export class VideoObserver {
     });
     const videos = document.querySelectorAll("video");
     for (let i = 0; i < videos.length; i++) {
-      this.handleVideoAdded(videos[i]);
+      this.checkAndHandleVideo(videos[i]);
     }
   }
 
   disable() {
     this.observer.disconnect();
   }
 
+  checkAndHandleVideo(video) {
+    waitForVideoReady(video, (readyVideo) => {
+      this.handleVideoAdded(readyVideo);
+      this.videoCache.add(readyVideo);
+    });
+  }
+
   handleVideoAdded = (video) => {
     this.onVideoAdded.dispatch(video);
   };

src/utils/utils.js

@@ -351,7 +351,7 @@ function cleanText(title, description) {
     .replace(/[^\p{L}\s]/gu, " ")
     .trim()
     .replace(/\s+/g, " ")
-    .slice(0, 1000);
+    .slice(0, 450);
 }
 
 async function GM_fetch(url, opt = {}) {

src/utils/youtubeUtils.js

@@ -99,6 +99,91 @@ function videoSeek(video, time) {
   video.currentTime = finalTime;
 }
 
+function isMusic() {
+  // Нужно доработать логику
+  const channelName = getPlayerData().author,
+    titleStr = getPlayerData().title.toUpperCase(),
+    titleWordsList = titleStr.match(/\w+/g),
+    playerData = document.body.querySelector("ytd-watch-flexy")?.playerData;
+
+  return (
+    [
+      titleStr,
+      document.URL,
+      channelName,
+      playerData?.microformat?.playerMicroformatRenderer.category,
+      playerData?.title,
+    ].some((i) => i?.toUpperCase().includes("MUSIC")) ||
+    document.body.querySelector(
+      "#upload-info #channel-name .badge-style-type-verified-artist",
+    ) ||
+    (channelName &&
+      /(VEVO|Topic|Records|RECORDS|Recordings|AMV)$/.test(channelName)) ||
+    (channelName &&
+      /(MUSIC|ROCK|SOUNDS|SONGS)/.test(channelName.toUpperCase())) ||
+    (titleWordsList?.length &&
+      [
+        "🎵",
+        "♫",
+        "SONG",
+        "SONGS",
+        "SOUNDTRACK",
+        "LYRIC",
+        "LYRICS",
+        "AMBIENT",
+        "MIX",
+        "VEVO",
+        "CLIP",
+        "KARAOKE",
+        "OPENING",
+        "COVER",
+        "COVERED",
+        "VOCAL",
+        "INSTRUMENTAL",
+        "ORCHESTRAL",
+        "DUBSTEP",
+        "DJ",
+        "DNB",
+        "BASS",
+        "BEAT",
+        "ALBUM",
+        "PLAYLIST",
+        "DUBSTEP",
+        "CHILL",
+        "RELAX",
+        "CLASSIC",
+        "CINEMATIC",
+      ].some((i) => titleWordsList.includes(i))) ||
+    [
+      "OFFICIAL VIDEO",
+      "OFFICIAL AUDIO",
+      "FEAT.",
+      "FT.",
+      "LIVE RADIO",
+      "DANCE VER",
+      "HIP HOP",
+      "ROCK N ROLL",
+      "HOUR VER",
+      "HOURS VER",
+      "INTRO THEME",
+    ].some((i) => titleStr.includes(i)) ||
+    (titleWordsList?.length &&
+      [
+        "OP",
+        "ED",
+        "MV",
+        "OST",
+        "NCS",
+        "BGM",
+        "EDM",
+        "GMV",
+        "AMV",
+        "MMD",
+        "MAD",
+      ].some((i) => titleWordsList.includes(i)))
+  );
+}
+
 function getSubtitles() {
   const response = getPlayerResponse();
   let captionTracks =
@@ -162,4 +247,5 @@ export default {
   setVideoVolume,
   videoSeek,
   isMuted,
+  isMusic,
 };