Merge pull request #978 from SashaXser/dev

Поддержка тачскрина

Author: ilyhalight

dist/vot-min.user.js

@@ -6395,27 +6395,32 @@ async function getLanguage(player, response, title, description) {
     !window.location.hostname.includes("m.youtube.com") &&
     player?.getAudioTrack
   ) {
-    // ! Experimental ! get lang from selected audio track if availabled
-    const audioTracks = player.getAudioTrack();
-    const trackInfo = audioTracks?.getLanguageInfo(); // get selected track info (id === "und" if tracks are not available)
+    // Experimental: Get language from selected audio track if available
+    const trackInfo = player.getAudioTrack()?.getLanguageInfo(); // Get selected track info
     if (trackInfo?.id !== "und") {
       return normalizeLang(trackInfo.id.split(".")[0]);
     }
-  }
 
-  // TODO: If the audio tracks will work fine, transfer the receipt of captions to the audioTracks variable
-  // Check if there is an automatic caption track in the response
-  const captionTracks =
-    response?.captions?.playerCaptionsTracklistRenderer?.captionTracks;
-  if (captionTracks?.length) {
-    const autoCaption = captionTracks.find((caption) => caption.kind === "asr");
-    if (autoCaption && autoCaption.languageCode) {
+    // Get available audio tracks
+    const audioTracks = player.getAvailableAudioTracks();
+    // Find automatic caption track in audio tracks
+    const autoCaption = audioTracks?.find(
+      track => track.kind === "asr" && track.languageCode
+    );
+    if (autoCaption) {
       return normalizeLang(autoCaption.languageCode);
     }
   }
 
   // If there is no caption track, use detect to get the language code from the description
+  const autoCaption = response?.captions?.playerCaptionsTracklistRenderer?.captionTracks?.find(
+    (caption) => caption.kind === "asr" && caption.languageCode
+  );
+  if (autoCaption) {
+    return normalizeLang(autoCaption.languageCode);
+  }
 
+  // Use the description text to detect the language if no captions are available
   const text = cleanText(title, description);
 
   debug.log(`Detecting language text: ${text}`);
@@ -6948,24 +6953,21 @@ class SubtitlesWidget {
 
   bindEvents() {
     const { signal } = this.abortController;
-
-    this.onMouseDownBound = (e) => this.onMouseDown(e);
-    this.onMouseUpBound = () => this.onMouseUp();
-    this.onMouseMoveBound = (e) => this.onMouseMove(e);
+    this.onPointerDownBound = (e) => this.onPointerDown(e);
+    this.onPointerUpBound = () => this.onPointerUp();
+    this.onPointerMoveBound = (e) => this.onPointerMove(e);
     this.onTimeUpdateBound = this.debounce(() => this.update(), 100);
-
-    document.addEventListener("mousedown", this.onMouseDownBound, { signal });
-    document.addEventListener("mouseup", this.onMouseUpBound, { signal });
-    document.addEventListener("mousemove", this.onMouseMoveBound, { signal });
-    this.video?.addEventListener("timeupdate", this.onTimeUpdateBound, {
-      signal,
-    });
-
+  
+    document.addEventListener("pointerdown", this.onPointerDownBound, { signal });
+    document.addEventListener("pointerup", this.onPointerUpBound, { signal });
+    document.addEventListener("pointermove", this.onPointerMoveBound, { signal });
+    
+    this.video?.addEventListener("timeupdate", this.onTimeUpdateBound, { signal });
     this.resizeObserver = new ResizeObserver(() => this.onResize());
     this.resizeObserver.observe(this.container);
   }
 
-  onMouseDown(e) {
+  onPointerDown(e) {
     if (!this.subtitlesContainer.contains(e.target)) return;
 
     const rect = this.subtitlesContainer.getBoundingClientRect();
@@ -6983,12 +6985,11 @@ class SubtitlesWidget {
       },
     };
   }
-
-  onMouseUp() {
+  onPointerUp() {
     this.dragging.active = false;
   }
 
-  onMouseMove(e) {
+  onPointerMove(e) {
     if (!this.dragging.active) return;
 
     e.preventDefault();
@@ -10726,50 +10727,69 @@ class VideoHandler {
       this.votButton.translateButton.addEventListener("click", async () => {
         await this.handleTranslationBtnClick();
       });
-
-      this.votButton.pipButton.addEventListener("click", () => {
-        (async () => {
-          if (this.video !== document.pictureInPictureElement) {
-            await this.video.requestPictureInPicture();
-          } else {
-            await document.exitPictureInPicture();
-          }
-        })();
+    
+      this.votButton.pipButton.addEventListener("click", async () => {
+        const isPiPActive = this.video === document.pictureInPictureElement;
+        await (isPiPActive ? document.exitPictureInPicture() : this.video.requestPictureInPicture());
       });
-
       this.votButton.menuButton.addEventListener("click", () => {
         this.votMenu.container.hidden = !this.votMenu.container.hidden;
       });
-
-      this.votButton.container.addEventListener("mousedown", () => {
+    
+      // Position update logic
+      const updateButtonPosition = async (percentX) => {
+        const isBigContainer = this.container.clientWidth > 550;
+        const position = isBigContainer 
+          ? (percentX <= 44 ? "left" : percentX >= 66 ? "right" : "default")
+          : "default";
+    
+        this.data.buttonPos = position;
+        this.votButton.container.dataset.direction = position === "default" ? "row" : "column";
+        this.votButton.container.dataset.position = position;
+        this.votMenu.container.dataset.position = position;
+    
+        if (isBigContainer) {
+          await votStorage.set("buttonPos", position);
+        }
+      };
+    
+      // Drag event handler
+      const handleDragMove = async (clientX, rect = this.container.getBoundingClientRect()) => {
+        if (!this.dragging) return;
+        
+        const x = rect ? clientX - rect.left : clientX;
+        const percentX = (x / (rect ? rect.width : this.container.clientWidth)) * 100;
+        await updateButtonPosition(percentX);
+      };
+    
+      // Mouse/pointer events
+      this.votButton.container.addEventListener("pointerdown", (e) => {
         this.dragging = true;
+        e.preventDefault();
       });
-
-      this.container.addEventListener("mouseup", () => {
-        this.dragging = false;
-      });
-
-      this.container.addEventListener("mousemove", async (e) => {
-        if (this.dragging) {
-          e.preventDefault();
-
-          const percentX = (e.clientX / this.container.clientWidth) * 100;
-          // const percentY = (e.clientY / this.video.clientHeight) * 100;
-          const isBigContainer = this.container.clientWidth > 550;
-          const isLeft = percentX <= 44;
-          const isRightSide = percentX >= 66 ? "right" : "default";
-          const side = isLeft ? "left" : isRightSide;
-
-          this.data.buttonPos = isBigContainer ? side : "default";
-          this.votButton.container.dataset.direction =
-            this.data.buttonPos === "default" ? "row" : "column";
-          this.votButton.container.dataset.position = this.data.buttonPos;
-          this.votMenu.container.dataset.position = this.data.buttonPos;
-          if (isBigContainer) {
-            await votStorage.set("buttonPos", this.data.buttonPos);
-          }
-        }
+    
+      this.container.addEventListener("pointerup", () => this.dragging = false);
+      this.container.addEventListener("pointermove", (e) => {
+        e.preventDefault();
+        handleDragMove(e.clientX);
       });
+    
+      // Touch events
+      this.votButton.container.addEventListener("touchstart", (e) => {
+        this.dragging = true;
+        e.preventDefault();
+      }, { passive: false });
+    
+      this.container.addEventListener("touchend", () => this.dragging = false);
+      this.container.addEventListener("touchmove", (e) => {
+        e.preventDefault();
+        handleDragMove(e.touches[0].clientX, this.container.getBoundingClientRect());
+      }, { passive: false });
+    
+      // Cancel events
+      for (const event of ["pointercancel", "touchcancel"]) {
+        document.addEventListener(event, () => this.dragging = false);
+      }      
     }
 
     // VOT Menu
@@ -11460,18 +11480,18 @@ class VideoHandler {
     if (eventContainer)
       addExtraEventListeners(
         eventContainer,
-        ["mousemove", "mouseout"],
+        ["pointermove", "pointerout"],
         this.resetTimer,
       );
 
     addExtraEventListener(
       this.votButton.container,
-      "mousemove",
+      "pointermove",
       this.changeOpacityOnEvent,
     );
     addExtraEventListener(
       this.votMenu.container,
-      "mousemove",
+      "pointermove",
       this.changeOpacityOnEvent,
     );
     // remove listener on xvideos to fix #866
@@ -11484,10 +11504,10 @@ class VideoHandler {
     }
 
     // fix youtube hold to fast
-    addExtraEventListener(this.votButton.container, "mousedown", (e) => {
+    addExtraEventListener(this.votButton.container, "pointerdown", (e) => {
       e.stopImmediatePropagation();
     });
-    addExtraEventListener(this.votMenu.container, "mousedown", (e) => {
+    addExtraEventListener(this.votMenu.container, "pointerdown", (e) => {
       e.stopImmediatePropagation();
     });
 

dist/vot.user.js

@@ -62,16 +62,18 @@ function fixRegexStr(str) {
   brackets = brackets.map((bracket) => bracket[0]);
   const optionalBrackets = brackets.filter((bracket) => bracket.includes("?"));
   if (optionalBrackets.length) {
-    getDomainFromRegex(domain, optionalBrackets).map((dom) => domains.add(dom));
+    for (const dom of getDomainFromRegex(domain, optionalBrackets)) {
+      domains.add(dom);
+    }
   }
 
   for (const bracket of brackets) {
     const parts = bracket.replace(/[?()]+/g, "").split("|");
     for (const part of parts) {
       let partedDomain = domain.replace(bracket, part);
-      getDomainFromRegex(partedDomain, optionalBrackets).map((dom) =>
-        domains.add(dom),
-      );
+      for (const dom of getDomainFromRegex(partedDomain, optionalBrackets)) {
+        domains.add(dom);
+      }
     }
   }
 
@@ -107,7 +109,7 @@ function genMarkdown(supportedSites, lang = "ru") {
 
   return removeDuplicatesKeepLast(sitesData, "host").map((site) => {
     const hasData = Object.hasOwn(siteData, site.host);
-    const limitsData = hasData ? siteData[site.host].limits ?? [] : [];
+    const limitsData = hasData ? (siteData[site.host].limits ?? []) : [];
     if (site.needBypassCSP && !limitsData.includes(locales.needBypassCSP)) {
       limitsData.push(locales.needBypassCSP);
     }