@sesionario/blocks 1.12.0 → 1.13.1

package/dist/index.cjs

@@ -3462,6 +3462,20 @@ function kindForNative(input) {
   if (code === MEDIA_ERR_NETWORK) return "unavailable";
   return "generic";
 }
+function describeAvResync(input) {
+  const lag = Number.isFinite(input.lagSeconds) ? input.lagSeconds : 0;
+  return {
+    summary: `av-resync lag=${lag.toFixed(3)}s (non-fatal)`,
+    kind: "resync",
+    detail: {
+      source: input.context.source,
+      kind: "resync",
+      fatal: false,
+      reason: `presented frame lag ${lag.toFixed(3)}s`,
+      context: input.context
+    }
+  };
+}
 function describePlaybackError(input) {
   if (input.source === "unsupported") {
     return {
@@ -3520,6 +3534,10 @@ function describePlaybackError(input) {
 // src/components/video/useHlsPlayback.ts
 var RETRY_INTERVAL_MS = 3e3;
 var MAX_MEDIA_ERROR_RETRIES = 5;
+var DRIFT_THRESHOLD_S = 0.4;
+var DRIFT_CONSECUTIVE_SAMPLES = 3;
+var RESYNC_COOLDOWN_MS = 1e4;
+var LIVE_EDGE_RESYNC_THRESHOLD_S = 8;
 function useHlsPlayback({
   src,
   mode,
@@ -3559,6 +3577,7 @@ function useHlsPlayback({
     let retryTimer = null;
     let manifestParsed = false;
     let mediaErrorRetries = 0;
+    let playbackSource = "hls";
     const teardown = [];
     media.muted = muted;
     setState("loading");
@@ -3567,7 +3586,13 @@ function useHlsPlayback({
     setQualities([]);
     setActiveLevel(-1);
     function baseContext() {
-      return { mode, src, manifestParsed, retryCount: mediaErrorRetries };
+      return {
+        mode,
+        src,
+        manifestParsed,
+        retryCount: mediaErrorRetries,
+        source: playbackSource
+      };
     }
     function clearRetryTimer() {
       if (retryTimer !== null) {
@@ -3606,6 +3631,53 @@ function useHlsPlayback({
         if (!cancelled) retryFn();
       }, RETRY_INTERVAL_MS);
     }
+    function startDriftWatchdog(el) {
+      if (typeof el.requestVideoFrameCallback !== "function") return;
+      let consecutiveLagSamples = 0;
+      let lastResyncAt = 0;
+      let handle = null;
+      const tick = (_now, metadata) => {
+        if (cancelled) return;
+        handle = el.requestVideoFrameCallback(tick);
+        if (el.paused || el.ended) {
+          consecutiveLagSamples = 0;
+          return;
+        }
+        const lag = el.currentTime - metadata.mediaTime;
+        if (!(lag > DRIFT_THRESHOLD_S)) {
+          consecutiveLagSamples = 0;
+          return;
+        }
+        consecutiveLagSamples += 1;
+        if (consecutiveLagSamples < DRIFT_CONSECUTIVE_SAMPLES) return;
+        const nowMs = performance.now();
+        if (nowMs - lastResyncAt < RESYNC_COOLDOWN_MS) return;
+        lastResyncAt = nowMs;
+        consecutiveLagSamples = 0;
+        if (mode === "live" && el.seekable.length > 0) {
+          const edge = el.seekable.end(el.seekable.length - 1);
+          if (edge - el.currentTime > LIVE_EDGE_RESYNC_THRESHOLD_S) {
+            el.currentTime = edge;
+          } else {
+            el.currentTime = el.currentTime + 1e-3;
+          }
+        } else {
+          el.currentTime = el.currentTime + 1e-3;
+        }
+        onErrorRef.current?.(
+          describeAvResync({
+            lagSeconds: lag,
+            context: baseContext()
+          })
+        );
+      };
+      handle = el.requestVideoFrameCallback(tick);
+      teardown.push(() => {
+        if (handle != null && typeof el.cancelVideoFrameCallback === "function") {
+          el.cancelVideoFrameCallback(handle);
+        }
+      });
+    }
     function onPlaying() {
       manifestParsed = true;
       mediaErrorRetries = 0;
@@ -3624,7 +3696,9 @@ function useHlsPlayback({
       media.removeEventListener("pause", onPaused);
       media.removeEventListener("ended", onPaused);
     });
+    startDriftWatchdog(media);
     function initNative() {
+      playbackSource = "native";
       manifestParsed = false;
       media.removeAttribute("src");
       media.load();
@@ -3640,7 +3714,7 @@ function useHlsPlayback({
           reportFatal({
             source: "native",
             mediaError: media.error,
-            context: { ...baseContext(), source: "native" }
+            context: baseContext()
           });
           return;
         }
@@ -3648,7 +3722,7 @@ function useHlsPlayback({
           describePlaybackError({
             source: "native",
             mediaError: media.error,
-            context: { ...baseContext(), source: "native" }
+            context: baseContext()
           })
         );
         scheduleRetry(() => {
@@ -3664,6 +3738,7 @@ function useHlsPlayback({
       });
     }
     function initHlsJs(Hls) {
+      playbackSource = "hls";
       destroyHls();
       manifestParsed = false;
       const config = mode === "live" ? createLiveHlsConfig() : createVodHlsConfig();
@@ -3695,7 +3770,7 @@ function useHlsPlayback({
             response: data.response,
             reason: data.reason,
             error: data.error,
-            context: { ...baseContext(), source: "hls" }
+            context: baseContext()
           })
         );
         if (!data.fatal) return;
@@ -3730,7 +3805,7 @@ function useHlsPlayback({
           response: data.response,
           reason: data.reason,
           error: data.error,
-          context: { ...baseContext(), source: "hls" }
+          context: baseContext()
         });
       });
     }
@@ -3747,9 +3822,10 @@ function useHlsPlayback({
       } else if (media.canPlayType("application/vnd.apple.mpegurl")) {
         initNative();
       } else {
+        playbackSource = "unsupported";
         reportFatal({
           source: "unsupported",
-          context: { ...baseContext(), source: "unsupported" }
+          context: baseContext()
         });
       }
     }
@@ -4096,6 +4172,8 @@ function VideoPlayer({
         return t.errorMedia;
       case "unsupported":
         return t.errorUnsupported;
+      case "resync":
+        return t.errorMedia;
       case "generic":
         return t.errorGeneric;
       default: {
@@ -6107,7 +6185,7 @@ function MessageScrollerButton({
       "data-size": size,
       direction,
       className: cn(
-        "absolute inset-s-1/2 -translate-x-1/2 border-border bg-background text-foreground transition-[translate,scale,opacity] duration-200 hover:bg-muted hover:text-foreground data-[active=false]:pointer-events-none data-[active=false]:scale-95 data-[active=false]:opacity-0 data-[active=false]:duration-400 data-[active=false]:ease-[cubic-bezier(0.7,0,0.84,0)] data-[active=true]:translate-y-0 data-[active=true]:scale-100 data-[active=true]:opacity-100 data-[active=true]:ease-[cubic-bezier(0.23,1,0.32,1)] data-[direction=end]:bottom-4 data-[direction=end]:data-[active=false]:translate-y-full data-[direction=start]:top-4 data-[direction=start]:data-[active=false]:-translate-y-full rtl:translate-x-1/2 data-[direction=start]:[&_svg]:rotate-180",
+        "absolute left-1/2 -translate-x-1/2 border-border bg-background text-foreground transition-[translate,scale,opacity] duration-200 hover:bg-muted hover:text-foreground data-[active=false]:pointer-events-none data-[active=false]:scale-95 data-[active=false]:opacity-0 data-[active=false]:duration-400 data-[active=false]:ease-[cubic-bezier(0.7,0,0.84,0)] data-[active=true]:translate-y-0 data-[active=true]:scale-100 data-[active=true]:opacity-100 data-[active=true]:ease-[cubic-bezier(0.23,1,0.32,1)] data-[direction=end]:bottom-4 data-[direction=end]:data-[active=false]:translate-y-full data-[direction=start]:top-4 data-[direction=start]:data-[active=false]:-translate-y-full data-[direction=start]:[&_svg]:rotate-180",
         className
       ),
       render: render ?? /* @__PURE__ */ jsxRuntime.jsx(Button, { variant, size }),
@@ -6905,6 +6983,105 @@ function createSupportChatClient(basePath = "/api/chat-svc") {
     }
   };
 }
+var DEFAULT_RECONNECT_MS = 2e3;
+var MAX_RECONNECT_MS = 3e4;
+function useRealtimeChannel({
+  getWsUrl,
+  onEvent,
+  enabled = true,
+  reconnectDelayMs = DEFAULT_RECONNECT_MS
+}) {
+  const onEventRef = React7.useRef(onEvent);
+  onEventRef.current = onEvent;
+  const getWsUrlRef = React7.useRef(getWsUrl);
+  getWsUrlRef.current = getWsUrl;
+  React7.useEffect(() => {
+    if (!enabled) return;
+    let cancelled = false;
+    let socket = null;
+    let reconnectTimer = null;
+    let attempt = 0;
+    const connectGen = { current: 0 };
+    const clearReconnect = () => {
+      if (reconnectTimer) {
+        clearTimeout(reconnectTimer);
+        reconnectTimer = null;
+      }
+    };
+    const scheduleReconnect = () => {
+      if (cancelled) return;
+      clearReconnect();
+      const delay = Math.min(reconnectDelayMs * 2 ** attempt, MAX_RECONNECT_MS);
+      attempt += 1;
+      reconnectTimer = setTimeout(() => {
+        void connect();
+      }, delay);
+    };
+    const connect = async () => {
+      const gen = ++connectGen.current;
+      clearReconnect();
+      const url = await getWsUrlRef.current();
+      if (cancelled || gen !== connectGen.current) return;
+      if (!url) {
+        scheduleReconnect();
+        return;
+      }
+      if (socket) {
+        try {
+          socket.close();
+        } catch {
+        }
+        socket = null;
+      }
+      const ws = new WebSocket(url);
+      socket = ws;
+      ws.onopen = () => {
+        if (cancelled || gen !== connectGen.current) return;
+        attempt = 0;
+      };
+      ws.onmessage = (msg) => {
+        if (cancelled || gen !== connectGen.current) return;
+        let data;
+        try {
+          data = JSON.parse(String(msg.data));
+        } catch {
+          return;
+        }
+        if (typeof data?.type !== "string") return;
+        if (data.type === "pong") return;
+        onEventRef.current(data);
+      };
+      ws.onclose = () => {
+        if (cancelled || gen !== connectGen.current) return;
+        socket = null;
+        scheduleReconnect();
+      };
+      ws.onerror = () => {
+      };
+    };
+    const onVisibility = () => {
+      if (document.visibilityState !== "visible" || cancelled) return;
+      if (!socket || socket.readyState === WebSocket.CLOSED) {
+        void connect();
+      }
+    };
+    void connect();
+    document.addEventListener("visibilitychange", onVisibility);
+    return () => {
+      cancelled = true;
+      connectGen.current += 1;
+      clearReconnect();
+      document.removeEventListener("visibilitychange", onVisibility);
+      if (socket) {
+        try {
+          socket.close();
+        } catch {
+        }
+        socket = null;
+      }
+    };
+  }, [enabled, reconnectDelayMs]);
+}
 
 Object.defineProperty(exports, "useMessageScroller", {
   enumerable: true,
@@ -6977,6 +7154,7 @@ exports.createLiveHlsConfig = createLiveHlsConfig;
 exports.createSupportChatClient = createSupportChatClient;
 exports.createVodHlsConfig = createVodHlsConfig;
 exports.defaultLanguages = defaultLanguages;
+exports.describeAvResync = describeAvResync;
 exports.describePlaybackError = describePlaybackError;
 exports.fuzzyMatch = fuzzyMatch;
 exports.getAvatarColors = getAvatarColors;
@@ -6991,6 +7169,7 @@ exports.useHlsPlayback = useHlsPlayback;
 exports.useLanguageContext = useLanguageContext;
 exports.useMediaQuery = useMediaQuery2;
 exports.usePlaybackStats = usePlaybackStats;
+exports.useRealtimeChannel = useRealtimeChannel;
 exports.useSearchHotkey = useSearchHotkey;
 exports.useSupportConversation = useSupportConversation;
 exports.useSupportMessenger = useSupportMessenger;