From 0b50c3d8ee5fb432507d6ab1423062c00716a368 Mon Sep 17 00:00:00 2001
From: ZiraiMode <ZiraiMode@users.noreply.github.com>
Date: Mon, 11 May 2026 18:10:52 +0300
Subject: [PATCH] Add VK Video support with shadow-DOM aware video detection
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

VK Video (vkvideo.ru, vk.com, /video_ext.php embeds) mounts its <video>
inside an open shadow root rooted at div.shadow-root-container, so
detectPageVideos and the injected sync code never found it via
document.querySelector*.

- Add the vkvideo entry to SITE_CONFIGS in both video-detection.ts and
  the inline copy in background.ts (the latter is serialised into the
  page via executeScript and can't share imports — collapsing the
  duplication is left to a follow-up PR).
- Introduce collectAllVideos / deepQuerySelector helpers that recurse
  through open shadow roots, and route findSiteVideo, findGenericVideo,
  detectPageVideos, the injected.ts data-synclify-id lookup, and the
  videoPlayer.tsx attach lookup through them.
- Skip the isPlayable filter when the site-specific selector matches —
  VK uses MSE blob URLs that only appear after the first Play, so the
  <video> would otherwise be discarded for missing src/dimensions.
- Bump the inject retry budget to 5 x 800 ms; the VK SPA player loads
  noticeably slower than YouTube/Netflix chunks.
- Surface backend errors in the popup: createOrJoinRoom was silently
  swallowing rejected sendMessage promises, so a missing socket server
  produced no UI feedback. Add a .catch and an error pill under the
  Create Room button.
- Add .env.example documenting WXT_SOCKET_ENDPOINT and unignore it in
  .gitignore (the .env* glob was hiding it).
---
 .env.example                  | 17 +++++++
 .gitignore                    |  1 +
 src/entrypoints/background.ts | 90 ++++++++++++++++++++++++--------
 src/entrypoints/injected.ts   | 18 ++++---
 src/entrypoints/popup/App.tsx | 23 ++++++++-
 src/lib/video-detection.ts    | 96 ++++++++++++++++++++++++++++++-----
 src/runtime/videoPlayer.tsx   | 14 ++---
 7 files changed, 212 insertions(+), 47 deletions(-)
 create mode 100644 .env.example

diff --git a/.env.example b/.env.example
new file mode 100644
index 0000000..7ffa35b
--- /dev/null
+++ b/.env.example
@@ -0,0 +1,17 @@
+# Socket / backend endpoint Synclify will fetch /create from and open a
+# socket.io connection to. Without this, the extension falls back to
+# http://localhost:3001 (see src/types/socket.ts) and "Create Room" fails
+# with `Failed to fetch` in the background service worker.
+#
+# Set it to your own running synclify-server, e.g.:
+#   WXT_SOCKET_ENDPOINT=http://localhost:3001
+#   WXT_SOCKET_ENDPOINT=https://your-server.example.com
+#
+# The upstream production URL lives only in GitHub Actions secrets
+# (PLASMO_PUBLIC_SOCKET_ENDPOINT in .github/workflows/submit.yml) and is
+# not committed to this repo.
+WXT_SOCKET_ENDPOINT=
+
+# Optional PostHog telemetry. Leave blank to disable.
+WXT_PUBLIC_POSTHOG_KEY=
+WXT_PUBLIC_POSTHOG_HOST=
diff --git a/.gitignore b/.gitignore
index e2d2744..90f6d67 100644
--- a/.gitignore
+++ b/.gitignore
@@ -24,6 +24,7 @@ yarn-error.log*
 
 # local env files
 .env*
+!.env.example
 
 out/
 build/
diff --git a/src/entrypoints/background.ts b/src/entrypoints/background.ts
index f319301..99ee462 100644
--- a/src/entrypoints/background.ts
+++ b/src/entrypoints/background.ts
@@ -312,6 +312,15 @@ export default defineBackground(async () => {
         hostPatterns: [/mubi\.com$/],
         videoSelector: "video",
         playerContainer: ".player"
+      },
+      vkvideo: {
+        hostPatterns: [/(^|\.)vkvideo\.ru$/, /(^|\.)vk\.com$/],
+        videoSelector: '[data-testid="video-container"] video',
+        playerContainer: ".vk-vp-root",
+        watchPageTest: () =>
+          /^\/video_ext\.php/.test(location.pathname) ||
+          /^\/video-?\d+_\d+/.test(location.pathname),
+        excludeSelector: ".ads-container video"
       }
     }
 
@@ -322,6 +331,8 @@ export default defineBackground(async () => {
       "#hudson-wrapper",
       '[data-testid="playerContainer"]',
       ".ContentPlayer",
+      ".vk-vp-root",
+      '[data-testid="video-container"]',
       ".html5-video-player",
       ".video-player",
       ".jw-wrapper",
@@ -374,29 +385,66 @@ export default defineBackground(async () => {
       )
     }
 
-    /* Find candidate videos */
+    /* Deep-walk that crosses open shadow roots. VK Video, and a growing
+       number of modern players, mount their <video> inside a closed-looking
+       shadow tree (mode: "open" but not queryable via document.*). */
+    const collectAllVideos = (): HTMLVideoElement[] => {
+      const found: HTMLVideoElement[] = []
+      const visit = (root: Document | ShadowRoot) => {
+        for (const v of Array.from(
+          root.querySelectorAll<HTMLVideoElement>("video")
+        )) {
+          found.push(v)
+        }
+        for (const el of Array.from(root.querySelectorAll<HTMLElement>("*"))) {
+          const sr = el.shadowRoot
+          if (sr) visit(sr)
+        }
+      }
+      visit(document)
+      return found
+    }
+
+    /* Find candidate videos. When the site-specific selector matches,
+       trustSelector=true and we skip the isPlayable filter — the player
+       <video> may not yet have src/dimensions (e.g. VK Video uses MSE
+       blob-URL only after the first Play). On the fallback path and on
+       unknown sites we still require isPlayable so generic detection
+       picks the right element. */
+    const allVideos = collectAllVideos()
     let candidates: HTMLVideoElement[]
+    let trustSelector = false
     if (siteConfig) {
-      // Use site-specific selector for more precise matching
-      candidates = Array.from(
-        document.querySelectorAll<HTMLVideoElement>(siteConfig.videoSelector)
-      )
-      // Filter out excluded elements (ads, overlays, etc.)
-      if (siteConfig.excludeSelector) {
-        const excludeSel = siteConfig.excludeSelector
-        candidates = candidates.filter((v) => !v.matches(excludeSel))
-      }
-      // If site-specific selector returned nothing, fall back to all videos
-      if (candidates.length === 0) {
-        candidates = Array.from(document.getElementsByTagName("video"))
+      const sel = siteConfig.videoSelector
+      const exclude = siteConfig.excludeSelector
+      candidates = allVideos.filter((v) => {
+        try {
+          if (!v.matches(sel)) return false
+        } catch {
+          return false
+        }
+        if (exclude) {
+          try {
+            if (v.matches(exclude)) return false
+          } catch {
+            /* ignore bad exclude selector */
+          }
+        }
+        return true
+      })
+      if (candidates.length > 0) {
+        trustSelector = true
+      } else {
+        // Fall back to all <video> (including shadow) if site selector matched nothing
+        candidates = allVideos
       }
     } else {
-      candidates = Array.from(document.getElementsByTagName("video"))
+      candidates = allVideos
     }
 
     return candidates
       .map((video) => {
-        if (!isPlayable(video)) return null
+        if (!trustSelector && !isPlayable(video)) return null
         if (!video.dataset.synclifyId)
           video.dataset.synclifyId = Math.random().toString(36).slice(2, 7)
 
@@ -678,7 +726,8 @@ export default defineBackground(async () => {
 
     if (!frameIds) {
       let videos: Array<Video & { frameId: number }> = []
-      for (let attempt = 0; attempt < 3 && videos.length === 0; attempt++) {
+      const MAX_ATTEMPTS = 5
+      for (let attempt = 0; attempt < MAX_ATTEMPTS && videos.length === 0; attempt++) {
         const result = await browser.scripting.executeScript({
           func: detectPageVideos,
           target: { tabId: tabId, allFrames: true }
@@ -698,8 +747,8 @@ export default defineBackground(async () => {
             })
           )
 
-        if (videos.length === 0 && attempt < 2) {
-          await wait(700)
+        if (videos.length === 0 && attempt < MAX_ATTEMPTS - 1) {
+          await wait(800)
         }
       }
 
@@ -850,7 +899,8 @@ export default defineBackground(async () => {
       frameId: number
       needsCustomPlayer: boolean
     }> = []
-    for (let attempt = 0; attempt < 3 && videos.length === 0; attempt++) {
+    const MAX_ATTEMPTS = 5
+    for (let attempt = 0; attempt < MAX_ATTEMPTS && videos.length === 0; attempt++) {
       const result = await browser.scripting.executeScript({
         func: detectPageVideos,
         target: { tabId, allFrames: true }
@@ -871,7 +921,7 @@ export default defineBackground(async () => {
             frameId: injection.frameId
           }))
         )
-      if (videos.length === 0 && attempt < 2) await wait(700)
+      if (videos.length === 0 && attempt < MAX_ATTEMPTS - 1) await wait(800)
     }
     if (videos.length === 0) return
 
diff --git a/src/entrypoints/injected.ts b/src/entrypoints/injected.ts
index 7675f69..79b9bcf 100644
--- a/src/entrypoints/injected.ts
+++ b/src/entrypoints/injected.ts
@@ -12,7 +12,11 @@ import {
 } from "~/types/socket"
 import type { State, TabState } from "~/types/state"
 import { VIDEO_EVENTS } from "~/types/video"
-import { findSiteVideo, detectStreamingSite } from "~/lib/video-detection"
+import {
+  findSiteVideo,
+  detectStreamingSite,
+  deepQuerySelector
+} from "~/lib/video-detection"
 import { debugRoomLog } from "~/lib/debug"
 import browser from "webextension-polyfill"
 import { io } from "socket.io-client"
@@ -309,11 +313,11 @@ export default defineUnlistedScript(async () => {
   })
 
   const getVideo = (videoId?: string) => {
-    // First try by synclify-id if provided
+    // First try by synclify-id if provided (deep — crosses shadow boundaries)
     if (videoId) {
-      video = document.querySelector(
+      video = deepQuerySelector<HTMLVideoElement>(
         `[data-synclify-id="${videoId}"]`
-      ) as HTMLVideoElement | null
+      )
     }
 
     // If no videoId or element not found, use site-specific detection
@@ -330,12 +334,12 @@ export default defineUnlistedScript(async () => {
       }
     }
 
-    // Final fallback: first video on the page
+    // Final fallback: first video on the page (deep — shadow-aware)
     if (!video) {
-      video = document.querySelector("video")
+      video = deepQuerySelector<HTMLVideoElement>("video")
       posthog.capture("video_id_null_fallback", {
         message:
-          "videoId is null, using first element returned by document.querySelector"
+          "videoId is null, using first element returned by deepQuerySelector"
       })
     }
 
diff --git a/src/entrypoints/popup/App.tsx b/src/entrypoints/popup/App.tsx
index 32314b0..2a3461e 100644
--- a/src/entrypoints/popup/App.tsx
+++ b/src/entrypoints/popup/App.tsx
@@ -244,7 +244,23 @@ function App() {
       } else {
         browser.runtime
           .sendMessage({ action: "createRoom" })
-          .then((roomCode: string) => roomCallback(roomCode))
+          .then((roomCode: string) => {
+            if (typeof roomCode !== "string" || roomCode.length === 0) {
+              setError(true)
+              setErrorMessage(t("videoNotDetectedYet"))
+              return
+            }
+            roomCallback(roomCode)
+          })
+          .catch((err) => {
+            console.error("createRoom failed", err)
+            setError(true)
+            setErrorMessage(
+              err instanceof Error && err.message
+                ? err.message
+                : t("videoNotDetectedYet")
+            )
+          })
       }
     },
     [roomCallback]
@@ -643,6 +659,11 @@ function App() {
                 className="relative w-full overflow-hidden rounded-lg bg-[hsl(38_92%_55%)] py-5 text-sm font-semibold tracking-wide text-[hsl(220_20%_6%)] shadow-lg shadow-[hsl(38_92%_55%/0.2)] transition-all hover:bg-[hsl(38_80%_50%)] hover:shadow-[hsl(38_92%_55%/0.3)]">
                 {t("createRoom")}
               </Button>
+              {error && (
+                <div className="mt-2 rounded-md border border-destructive/30 bg-destructive/10 px-3 py-2 text-center text-xs text-destructive">
+                  {errorMessage}
+                </div>
+              )}
             </div>
 
             {/* Divider */}
diff --git a/src/lib/video-detection.ts b/src/lib/video-detection.ts
index bc32b01..2b2b563 100644
--- a/src/lib/video-detection.ts
+++ b/src/lib/video-detection.ts
@@ -27,6 +27,7 @@ export type StreamingSite =
   | "stan"
   | "britbox"
   | "shudder"
+  | "vkvideo"
   | "unknown"
 
 /* ------------------------------------------------------------------
@@ -181,6 +182,23 @@ export const SITE_CONFIGS: Record<
     hostPatterns: [/shudder\.com$/],
     videoSelector: "video",
     playerContainer: ".player-container"
+  },
+
+  /* ---- VK Video (vkvideo.ru + vk.com, including /video_ext.php embeds) ----
+     The VK player lives inside an open Shadow DOM rooted at
+     div.shadow-root-container. Inside, the main <video> sits in
+     .vk-vp-root > .player-wrapper > ... > [data-testid="video-container"],
+     and an ad <video> sits in .ads-container. The detection code uses a
+     deep walk that crosses shadow boundaries — selectors below are
+     matched against video elements regardless of shadow root. */
+  vkvideo: {
+    hostPatterns: [/(^|\.)vkvideo\.ru$/, /(^|\.)vk\.com$/],
+    videoSelector: '[data-testid="video-container"] video',
+    playerContainer: ".vk-vp-root",
+    watchPageTest: () =>
+      /^\/video_ext\.php/.test(location.pathname) ||
+      /^\/video-?\d+_\d+/.test(location.pathname),
+    excludeSelector: ".ads-container video"
   }
 }
 
@@ -208,6 +226,49 @@ export function getSiteConfig(hostname?: string): SiteConfig | null {
   return SITE_CONFIGS[site]
 }
 
+/* ------------------------------------------------------------------
+ *  Shadow-DOM aware traversal helpers
+ *
+ *  Modern players (VK Video, Bitmovin, etc.) put their <video> inside
+ *  open shadow roots. document.querySelector* does not cross shadow
+ *  boundaries — these helpers do.
+ * ------------------------------------------------------------------ */
+
+export function collectAllVideos(): HTMLVideoElement[] {
+  const found: HTMLVideoElement[] = []
+  const visit = (root: Document | ShadowRoot) => {
+    for (const v of Array.from(
+      root.querySelectorAll<HTMLVideoElement>("video")
+    )) {
+      found.push(v)
+    }
+    for (const el of Array.from(root.querySelectorAll<HTMLElement>("*"))) {
+      const sr = el.shadowRoot
+      if (sr) visit(sr)
+    }
+  }
+  visit(document)
+  return found
+}
+
+export function deepQuerySelector<E extends Element = Element>(
+  selector: string
+): E | null {
+  const visit = (root: Document | ShadowRoot): E | null => {
+    const direct = root.querySelector<E>(selector)
+    if (direct) return direct
+    for (const el of Array.from(root.querySelectorAll<HTMLElement>("*"))) {
+      const sr = el.shadowRoot
+      if (sr) {
+        const nested = visit(sr)
+        if (nested) return nested
+      }
+    }
+    return null
+  }
+  return visit(document)
+}
+
 /* ------------------------------------------------------------------
  *  Find the primary video element using site-specific knowledge
  *
@@ -224,22 +285,31 @@ export function findSiteVideo(hostname?: string): HTMLVideoElement | null {
       return null
     }
 
-    const candidates = Array.from(
-      document.querySelectorAll<HTMLVideoElement>(config.videoSelector)
-    )
-
-    // Filter out excluded elements
-    const filtered = config.excludeSelector
-      ? candidates.filter((v) => !v.matches(config.excludeSelector!))
-      : candidates
+    const sel = config.videoSelector
+    const exclude = config.excludeSelector
+    const candidates = collectAllVideos().filter((v) => {
+      try {
+        if (!v.matches(sel)) return false
+      } catch {
+        return false
+      }
+      if (exclude) {
+        try {
+          if (v.matches(exclude)) return false
+        } catch {
+          /* ignore bad exclude selector */
+        }
+      }
+      return true
+    })
 
     // Return the first video that has actual content
-    for (const video of filtered) {
+    for (const video of candidates) {
       if (isPlayableVideo(video)) return video
     }
 
     // Fallback: the selector might not match yet (lazy load); return first
-    return filtered[0] ?? null
+    return candidates[0] ?? null
   }
 
   // Unknown site — use generic heuristic
@@ -253,9 +323,7 @@ export function findSiteVideo(hostname?: string): HTMLVideoElement | null {
  * ------------------------------------------------------------------ */
 
 function findGenericVideo(): HTMLVideoElement | null {
-  const videos = Array.from(
-    document.querySelectorAll<HTMLVideoElement>("video")
-  )
+  const videos = collectAllVideos()
   const scored = videos
     .filter((v) => isPlayableVideo(v))
     .map((v) => ({
@@ -298,6 +366,8 @@ export const COMMERCIAL_PLAYER_SELECTORS = [
   "#hudson-wrapper", // Disney+, Peacock, Crunchyroll, Apple TV+
   '[data-testid="playerContainer"]', // Max / HBO Max
   ".ContentPlayer", // Hulu
+  ".vk-vp-root", // VK Video (shadow DOM player root)
+  '[data-testid="video-container"]', // VK Video (player video container)
 
   // --- Generic commercial player wrappers ---
   ".html5-video-player",
diff --git a/src/runtime/videoPlayer.tsx b/src/runtime/videoPlayer.tsx
index 8e34dad..2f35148 100644
--- a/src/runtime/videoPlayer.tsx
+++ b/src/runtime/videoPlayer.tsx
@@ -3,7 +3,10 @@ import { createPortal } from "react-dom"
 import { useCallback, useEffect, useRef, useState } from "react"
 import browser from "webextension-polyfill"
 import { t } from "~/lib/i18n"
-import { shouldShowCustomPlayer } from "~/lib/video-detection"
+import {
+  shouldShowCustomPlayer,
+  deepQuerySelector
+} from "~/lib/video-detection"
 import { mountUi, runOnce, whenBodyReady } from "~/lib/runtime-ui"
 
 const WRAPPER_ATTR = "data-synclify-player-wrapper"
@@ -903,9 +906,9 @@ function PlayerManager() {
           sendResponse(null)
           return true
         }
-        const el = document.querySelector(
+        const el = deepQuerySelector<HTMLVideoElement>(
           `[data-synclify-id="${msg.videoId}"]`
-        ) as HTMLVideoElement | null
+        )
         if (el) attachToVideo(el)
         sendResponse(null)
         return true
@@ -936,9 +939,8 @@ function PlayerManager() {
           (entry: { videoFound?: boolean }) => entry.videoFound
         )
         if (hasVideo) {
-          const vid = document.querySelector(
-            "[data-synclify-id]"
-          ) as HTMLVideoElement | null
+          const vid =
+            deepQuerySelector<HTMLVideoElement>("[data-synclify-id]")
           if (vid) attachToVideo(vid)
         }
       }