@sesionario/blocks 1.12.0 → 1.13.1

package/dist/index.d.cts

@@ -431,7 +431,7 @@ declare function insertAtCaret(element: {
  */
 type HlsPlayerMode = "live" | "vod";
 /** Coarse category the player uses to pick the right localized message. */
-type PlaybackErrorKind = "unavailable" | "network" | "media" | "unsupported" | "generic";
+type PlaybackErrorKind = "unavailable" | "network" | "media" | "unsupported" | "resync" | "generic";
 type PlaybackErrorContext = {
     mode: HlsPlayerMode;
     src: string;
@@ -481,6 +481,15 @@ type DescribedPlaybackError = {
     kind: PlaybackErrorKind;
     detail: PlaybackErrorDetail;
 };
+/**
+ * Soft (non-fatal) report for an automatic A/V resync. Apps should treat this
+ * like other non-fatal playback events (breadcrumb / warn), never as a hard
+ * error UI — the player recovers in place.
+ */
+declare function describeAvResync(input: {
+    lagSeconds: number;
+    context: PlaybackErrorContext;
+}): DescribedPlaybackError;
 declare function describePlaybackError(input: DescribePlaybackErrorInput): DescribedPlaybackError;
 
 interface PlaybackStats {
@@ -1095,6 +1104,30 @@ type UseSupportConversationResult = {
 };
 declare function useSupportConversation({ client, getWsUrl, conversationId: conversationIdProp, open, enabled, onConversationReady, onIncomingMessage, }: UseSupportConversationOptions): UseSupportConversationResult;
 
+type RealtimeEvent = {
+    type: string;
+    payload: unknown;
+    ts: number;
+};
+type UseRealtimeChannelOptions = {
+    /**
+     * Resolve a WebSocket URL (including auth token). Return null to skip.
+     * Called on each (re)connect so tokens can be refreshed.
+     */
+    getWsUrl: () => Promise<string | null>;
+    /** Called for every server event (invalidation hints). */
+    onEvent: (event: RealtimeEvent) => void;
+    enabled?: boolean;
+    /** Base reconnect delay in ms (exponential backoff capped at 30s). */
+    reconnectDelayMs?: number;
+};
+/**
+ * Subscribe to a realtime-svc channel WebSocket.
+ * Reconnects with exponential backoff; refreshes the URL (token) on each attempt.
+ * Treats events as invalidation signals — callers should re-fetch authoritative data.
+ */
+declare function useRealtimeChannel({ getWsUrl, onEvent, enabled, reconnectDelayMs, }: UseRealtimeChannelOptions): void;
+
 declare function cn(...inputs: ClassValue[]): string;
 
-export { type AutoplayState, AvatarEditor, AvatarEditorDialog, type AvatarEditorDialogProps, type AvatarEditorProps, type BlocksLanguage, Bubble, BubbleContent, BubbleGroup, BubbleReactions, type ChatListMessage, ChatMessageList, type ChatMessageListProps, ConfirmDestructiveDialog, type ConfirmDestructiveDialogProps, type ConversationKind, type DescribedPlaybackError, type EmojiCategoryData, type EmojiCategoryKey, type EmojiDatum, EmojiInput, type EmojiInputProps, EmojiPicker, type EmojiPickerLabels, type EmojiPickerLocale, EmojiPickerPopover, type EmojiPickerPopoverProps, type EmojiPickerProps, type EmojiSkinTone, EmojiTextarea, type EmojiTextareaProps, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyState, type EmptyStateProps, EmptyTitle, ErrorState, ExpandableText, type ExpandableTextProps, type FeatureEntry, type FindOrCreateConversationInput, type HlsPlayerMode, ImageLightbox, type ImageLightboxLabels, type ImageLightboxProps, type Language, LanguageContext, type LanguageContextValue, LanguageSwitcher, type LanguageSwitcherLabels, type LanguageSwitcherProps, LoadingState, MEXICO_STATES, MEXICO_STATE_PATHS, Marker, MarkerContent, MarkerIcon, Message, MessageAvatar, MessageComposer, type MessageComposerProps, MessageContent, MessageFooter, MessageGroup, MessageHeader, MessageScroller, MessageScrollerButton, MessageScrollerContent, MessageScrollerItem, MessageScrollerProvider, MessageScrollerViewport, MexicoMap, type MexicoMapProps, type MexicoState, type MexicoStateId, type OpenThreadRequest, OrgSwitcher, type OrgSwitcherLabels, type OrgSwitcherProps, type OrgSwitcherTenant, PhoneInput, type PhoneInputProps, type PlaybackErrorContext, type PlaybackErrorDetail, type PlaybackErrorKind, type PlaybackState, type PlaybackStats, type ProfessionalVerificationStatus, type QualityLevel, SearchCommand, type SearchCommandLabels, type SearchCommandProps, type SearchCommandSelection, type SearchHit, SearchablePicker, type SearchablePickerCreateOption, type SearchablePickerLabels, type SearchablePickerMultipleProps, type SearchablePickerPinned, type SearchablePickerProps, type SearchablePickerSingleProps, type SupportChatClient, type SupportConversation, type SupportMessage, type SupportMessengerItem, type SupportMessengerLabels, SupportMessengerProvider, type SupportMessengerProviderProps, type SupportMessengerTab, ThemeSwitcher, type ThemeSwitcherLabels, type ThemeSwitcherProps, type UseHlsPlaybackOptions, type UseHlsPlaybackResult, type UsePlaybackStatsOptions, type UseSearchHotkeyOptions, type UseSearchHotkeyResult, type UseSupportConversationOptions, type UseSupportConversationResult, VerifiedProfessionalBadge, type VerifiedProfessionalBadgeProps, VideoPlayer, type VideoPlayerLabels, type VideoPlayerProps, bubbleVariants, cn, createLiveHlsConfig, createSupportChatClient, createVodHlsConfig, defaultLanguages, describePlaybackError, fuzzyMatch, insertAtCaret, markerVariants, normalizeEmojiQuery, shouldRetryLiveEdge404, useDebouncedValue, useDebouncedValueStrict, useHlsPlayback, useLanguageContext, useMediaQuery, usePlaybackStats, useSearchHotkey, useSupportConversation, useSupportMessenger, useSupportMessengerOptional };
+export { type AutoplayState, AvatarEditor, AvatarEditorDialog, type AvatarEditorDialogProps, type AvatarEditorProps, type BlocksLanguage, Bubble, BubbleContent, BubbleGroup, BubbleReactions, type ChatListMessage, ChatMessageList, type ChatMessageListProps, ConfirmDestructiveDialog, type ConfirmDestructiveDialogProps, type ConversationKind, type DescribedPlaybackError, type EmojiCategoryData, type EmojiCategoryKey, type EmojiDatum, EmojiInput, type EmojiInputProps, EmojiPicker, type EmojiPickerLabels, type EmojiPickerLocale, EmojiPickerPopover, type EmojiPickerPopoverProps, type EmojiPickerProps, type EmojiSkinTone, EmojiTextarea, type EmojiTextareaProps, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyState, type EmptyStateProps, EmptyTitle, ErrorState, ExpandableText, type ExpandableTextProps, type FeatureEntry, type FindOrCreateConversationInput, type HlsPlayerMode, ImageLightbox, type ImageLightboxLabels, type ImageLightboxProps, type Language, LanguageContext, type LanguageContextValue, LanguageSwitcher, type LanguageSwitcherLabels, type LanguageSwitcherProps, LoadingState, MEXICO_STATES, MEXICO_STATE_PATHS, Marker, MarkerContent, MarkerIcon, Message, MessageAvatar, MessageComposer, type MessageComposerProps, MessageContent, MessageFooter, MessageGroup, MessageHeader, MessageScroller, MessageScrollerButton, MessageScrollerContent, MessageScrollerItem, MessageScrollerProvider, MessageScrollerViewport, MexicoMap, type MexicoMapProps, type MexicoState, type MexicoStateId, type OpenThreadRequest, OrgSwitcher, type OrgSwitcherLabels, type OrgSwitcherProps, type OrgSwitcherTenant, PhoneInput, type PhoneInputProps, type PlaybackErrorContext, type PlaybackErrorDetail, type PlaybackErrorKind, type PlaybackState, type PlaybackStats, type ProfessionalVerificationStatus, type QualityLevel, type RealtimeEvent, SearchCommand, type SearchCommandLabels, type SearchCommandProps, type SearchCommandSelection, type SearchHit, SearchablePicker, type SearchablePickerCreateOption, type SearchablePickerLabels, type SearchablePickerMultipleProps, type SearchablePickerPinned, type SearchablePickerProps, type SearchablePickerSingleProps, type SupportChatClient, type SupportConversation, type SupportMessage, type SupportMessengerItem, type SupportMessengerLabels, SupportMessengerProvider, type SupportMessengerProviderProps, type SupportMessengerTab, ThemeSwitcher, type ThemeSwitcherLabels, type ThemeSwitcherProps, type UseHlsPlaybackOptions, type UseHlsPlaybackResult, type UsePlaybackStatsOptions, type UseRealtimeChannelOptions, type UseSearchHotkeyOptions, type UseSearchHotkeyResult, type UseSupportConversationOptions, type UseSupportConversationResult, VerifiedProfessionalBadge, type VerifiedProfessionalBadgeProps, VideoPlayer, type VideoPlayerLabels, type VideoPlayerProps, bubbleVariants, cn, createLiveHlsConfig, createSupportChatClient, createVodHlsConfig, defaultLanguages, describeAvResync, describePlaybackError, fuzzyMatch, insertAtCaret, markerVariants, normalizeEmojiQuery, shouldRetryLiveEdge404, useDebouncedValue, useDebouncedValueStrict, useHlsPlayback, useLanguageContext, useMediaQuery, usePlaybackStats, useRealtimeChannel, useSearchHotkey, useSupportConversation, useSupportMessenger, useSupportMessengerOptional };

package/dist/index.d.ts

@@ -431,7 +431,7 @@ declare function insertAtCaret(element: {
  */
 type HlsPlayerMode = "live" | "vod";
 /** Coarse category the player uses to pick the right localized message. */
-type PlaybackErrorKind = "unavailable" | "network" | "media" | "unsupported" | "generic";
+type PlaybackErrorKind = "unavailable" | "network" | "media" | "unsupported" | "resync" | "generic";
 type PlaybackErrorContext = {
     mode: HlsPlayerMode;
     src: string;
@@ -481,6 +481,15 @@ type DescribedPlaybackError = {
     kind: PlaybackErrorKind;
     detail: PlaybackErrorDetail;
 };
+/**
+ * Soft (non-fatal) report for an automatic A/V resync. Apps should treat this
+ * like other non-fatal playback events (breadcrumb / warn), never as a hard
+ * error UI — the player recovers in place.
+ */
+declare function describeAvResync(input: {
+    lagSeconds: number;
+    context: PlaybackErrorContext;
+}): DescribedPlaybackError;
 declare function describePlaybackError(input: DescribePlaybackErrorInput): DescribedPlaybackError;
 
 interface PlaybackStats {
@@ -1095,6 +1104,30 @@ type UseSupportConversationResult = {
 };
 declare function useSupportConversation({ client, getWsUrl, conversationId: conversationIdProp, open, enabled, onConversationReady, onIncomingMessage, }: UseSupportConversationOptions): UseSupportConversationResult;
 
+type RealtimeEvent = {
+    type: string;
+    payload: unknown;
+    ts: number;
+};
+type UseRealtimeChannelOptions = {
+    /**
+     * Resolve a WebSocket URL (including auth token). Return null to skip.
+     * Called on each (re)connect so tokens can be refreshed.
+     */
+    getWsUrl: () => Promise<string | null>;
+    /** Called for every server event (invalidation hints). */
+    onEvent: (event: RealtimeEvent) => void;
+    enabled?: boolean;
+    /** Base reconnect delay in ms (exponential backoff capped at 30s). */
+    reconnectDelayMs?: number;
+};
+/**
+ * Subscribe to a realtime-svc channel WebSocket.
+ * Reconnects with exponential backoff; refreshes the URL (token) on each attempt.
+ * Treats events as invalidation signals — callers should re-fetch authoritative data.
+ */
+declare function useRealtimeChannel({ getWsUrl, onEvent, enabled, reconnectDelayMs, }: UseRealtimeChannelOptions): void;
+
 declare function cn(...inputs: ClassValue[]): string;
 
-export { type AutoplayState, AvatarEditor, AvatarEditorDialog, type AvatarEditorDialogProps, type AvatarEditorProps, type BlocksLanguage, Bubble, BubbleContent, BubbleGroup, BubbleReactions, type ChatListMessage, ChatMessageList, type ChatMessageListProps, ConfirmDestructiveDialog, type ConfirmDestructiveDialogProps, type ConversationKind, type DescribedPlaybackError, type EmojiCategoryData, type EmojiCategoryKey, type EmojiDatum, EmojiInput, type EmojiInputProps, EmojiPicker, type EmojiPickerLabels, type EmojiPickerLocale, EmojiPickerPopover, type EmojiPickerPopoverProps, type EmojiPickerProps, type EmojiSkinTone, EmojiTextarea, type EmojiTextareaProps, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyState, type EmptyStateProps, EmptyTitle, ErrorState, ExpandableText, type ExpandableTextProps, type FeatureEntry, type FindOrCreateConversationInput, type HlsPlayerMode, ImageLightbox, type ImageLightboxLabels, type ImageLightboxProps, type Language, LanguageContext, type LanguageContextValue, LanguageSwitcher, type LanguageSwitcherLabels, type LanguageSwitcherProps, LoadingState, MEXICO_STATES, MEXICO_STATE_PATHS, Marker, MarkerContent, MarkerIcon, Message, MessageAvatar, MessageComposer, type MessageComposerProps, MessageContent, MessageFooter, MessageGroup, MessageHeader, MessageScroller, MessageScrollerButton, MessageScrollerContent, MessageScrollerItem, MessageScrollerProvider, MessageScrollerViewport, MexicoMap, type MexicoMapProps, type MexicoState, type MexicoStateId, type OpenThreadRequest, OrgSwitcher, type OrgSwitcherLabels, type OrgSwitcherProps, type OrgSwitcherTenant, PhoneInput, type PhoneInputProps, type PlaybackErrorContext, type PlaybackErrorDetail, type PlaybackErrorKind, type PlaybackState, type PlaybackStats, type ProfessionalVerificationStatus, type QualityLevel, SearchCommand, type SearchCommandLabels, type SearchCommandProps, type SearchCommandSelection, type SearchHit, SearchablePicker, type SearchablePickerCreateOption, type SearchablePickerLabels, type SearchablePickerMultipleProps, type SearchablePickerPinned, type SearchablePickerProps, type SearchablePickerSingleProps, type SupportChatClient, type SupportConversation, type SupportMessage, type SupportMessengerItem, type SupportMessengerLabels, SupportMessengerProvider, type SupportMessengerProviderProps, type SupportMessengerTab, ThemeSwitcher, type ThemeSwitcherLabels, type ThemeSwitcherProps, type UseHlsPlaybackOptions, type UseHlsPlaybackResult, type UsePlaybackStatsOptions, type UseSearchHotkeyOptions, type UseSearchHotkeyResult, type UseSupportConversationOptions, type UseSupportConversationResult, VerifiedProfessionalBadge, type VerifiedProfessionalBadgeProps, VideoPlayer, type VideoPlayerLabels, type VideoPlayerProps, bubbleVariants, cn, createLiveHlsConfig, createSupportChatClient, createVodHlsConfig, defaultLanguages, describePlaybackError, fuzzyMatch, insertAtCaret, markerVariants, normalizeEmojiQuery, shouldRetryLiveEdge404, useDebouncedValue, useDebouncedValueStrict, useHlsPlayback, useLanguageContext, useMediaQuery, usePlaybackStats, useSearchHotkey, useSupportConversation, useSupportMessenger, useSupportMessengerOptional };
+export { type AutoplayState, AvatarEditor, AvatarEditorDialog, type AvatarEditorDialogProps, type AvatarEditorProps, type BlocksLanguage, Bubble, BubbleContent, BubbleGroup, BubbleReactions, type ChatListMessage, ChatMessageList, type ChatMessageListProps, ConfirmDestructiveDialog, type ConfirmDestructiveDialogProps, type ConversationKind, type DescribedPlaybackError, type EmojiCategoryData, type EmojiCategoryKey, type EmojiDatum, EmojiInput, type EmojiInputProps, EmojiPicker, type EmojiPickerLabels, type EmojiPickerLocale, EmojiPickerPopover, type EmojiPickerPopoverProps, type EmojiPickerProps, type EmojiSkinTone, EmojiTextarea, type EmojiTextareaProps, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyState, type EmptyStateProps, EmptyTitle, ErrorState, ExpandableText, type ExpandableTextProps, type FeatureEntry, type FindOrCreateConversationInput, type HlsPlayerMode, ImageLightbox, type ImageLightboxLabels, type ImageLightboxProps, type Language, LanguageContext, type LanguageContextValue, LanguageSwitcher, type LanguageSwitcherLabels, type LanguageSwitcherProps, LoadingState, MEXICO_STATES, MEXICO_STATE_PATHS, Marker, MarkerContent, MarkerIcon, Message, MessageAvatar, MessageComposer, type MessageComposerProps, MessageContent, MessageFooter, MessageGroup, MessageHeader, MessageScroller, MessageScrollerButton, MessageScrollerContent, MessageScrollerItem, MessageScrollerProvider, MessageScrollerViewport, MexicoMap, type MexicoMapProps, type MexicoState, type MexicoStateId, type OpenThreadRequest, OrgSwitcher, type OrgSwitcherLabels, type OrgSwitcherProps, type OrgSwitcherTenant, PhoneInput, type PhoneInputProps, type PlaybackErrorContext, type PlaybackErrorDetail, type PlaybackErrorKind, type PlaybackState, type PlaybackStats, type ProfessionalVerificationStatus, type QualityLevel, type RealtimeEvent, SearchCommand, type SearchCommandLabels, type SearchCommandProps, type SearchCommandSelection, type SearchHit, SearchablePicker, type SearchablePickerCreateOption, type SearchablePickerLabels, type SearchablePickerMultipleProps, type SearchablePickerPinned, type SearchablePickerProps, type SearchablePickerSingleProps, type SupportChatClient, type SupportConversation, type SupportMessage, type SupportMessengerItem, type SupportMessengerLabels, SupportMessengerProvider, type SupportMessengerProviderProps, type SupportMessengerTab, ThemeSwitcher, type ThemeSwitcherLabels, type ThemeSwitcherProps, type UseHlsPlaybackOptions, type UseHlsPlaybackResult, type UsePlaybackStatsOptions, type UseRealtimeChannelOptions, type UseSearchHotkeyOptions, type UseSearchHotkeyResult, type UseSupportConversationOptions, type UseSupportConversationResult, VerifiedProfessionalBadge, type VerifiedProfessionalBadgeProps, VideoPlayer, type VideoPlayerLabels, type VideoPlayerProps, bubbleVariants, cn, createLiveHlsConfig, createSupportChatClient, createVodHlsConfig, defaultLanguages, describeAvResync, describePlaybackError, fuzzyMatch, insertAtCaret, markerVariants, normalizeEmojiQuery, shouldRetryLiveEdge404, useDebouncedValue, useDebouncedValueStrict, useHlsPlayback, useLanguageContext, useMediaQuery, usePlaybackStats, useRealtimeChannel, useSearchHotkey, useSupportConversation, useSupportMessenger, useSupportMessengerOptional };

package/dist/index.js

@@ -3431,6 +3431,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 {
@@ -3489,6 +3503,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,
@@ -3528,6 +3546,7 @@ function useHlsPlayback({
     let retryTimer = null;
     let manifestParsed = false;
     let mediaErrorRetries = 0;
+    let playbackSource = "hls";
     const teardown = [];
     media.muted = muted;
     setState("loading");
@@ -3536,7 +3555,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) {
@@ -3575,6 +3600,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;
@@ -3593,7 +3665,9 @@ function useHlsPlayback({
       media.removeEventListener("pause", onPaused);
       media.removeEventListener("ended", onPaused);
     });
+    startDriftWatchdog(media);
     function initNative() {
+      playbackSource = "native";
       manifestParsed = false;
       media.removeAttribute("src");
       media.load();
@@ -3609,7 +3683,7 @@ function useHlsPlayback({
           reportFatal({
             source: "native",
             mediaError: media.error,
-            context: { ...baseContext(), source: "native" }
+            context: baseContext()
           });
           return;
         }
@@ -3617,7 +3691,7 @@ function useHlsPlayback({
           describePlaybackError({
             source: "native",
             mediaError: media.error,
-            context: { ...baseContext(), source: "native" }
+            context: baseContext()
           })
         );
         scheduleRetry(() => {
@@ -3633,6 +3707,7 @@ function useHlsPlayback({
       });
     }
     function initHlsJs(Hls) {
+      playbackSource = "hls";
       destroyHls();
       manifestParsed = false;
       const config = mode === "live" ? createLiveHlsConfig() : createVodHlsConfig();
@@ -3664,7 +3739,7 @@ function useHlsPlayback({
             response: data.response,
             reason: data.reason,
             error: data.error,
-            context: { ...baseContext(), source: "hls" }
+            context: baseContext()
           })
         );
         if (!data.fatal) return;
@@ -3699,7 +3774,7 @@ function useHlsPlayback({
           response: data.response,
           reason: data.reason,
           error: data.error,
-          context: { ...baseContext(), source: "hls" }
+          context: baseContext()
         });
       });
     }
@@ -3716,9 +3791,10 @@ function useHlsPlayback({
       } else if (media.canPlayType("application/vnd.apple.mpegurl")) {
         initNative();
       } else {
+        playbackSource = "unsupported";
         reportFatal({
           source: "unsupported",
-          context: { ...baseContext(), source: "unsupported" }
+          context: baseContext()
         });
       }
     }
@@ -4065,6 +4141,8 @@ function VideoPlayer({
         return t.errorMedia;
       case "unsupported":
         return t.errorUnsupported;
+      case "resync":
+        return t.errorMedia;
       case "generic":
         return t.errorGeneric;
       default: {
@@ -6076,7 +6154,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__ */ jsx(Button, { variant, size }),
@@ -6874,7 +6952,106 @@ 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 = useRef(onEvent);
+  onEventRef.current = onEvent;
+  const getWsUrlRef = useRef(getWsUrl);
+  getWsUrlRef.current = getWsUrl;
+  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]);
+}
 
-export { AvatarEditor, AvatarEditorDialog, Bubble, BubbleContent, BubbleGroup, BubbleReactions, ChatMessageList, ConfirmDestructiveDialog, EmojiInput, EmojiPicker, EmojiPickerPopover, EmojiTextarea, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyState, EmptyTitle, ErrorState, ExpandableText, ImageLightbox, LanguageContext, LanguageSwitcher, LoadingState, MEXICO_STATES, MEXICO_STATE_PATHS, Marker, MarkerContent, MarkerIcon, Message, MessageAvatar, MessageComposer, MessageContent, MessageFooter, MessageGroup, MessageHeader, MessageScroller, MessageScrollerButton, MessageScrollerContent, MessageScrollerItem, MessageScrollerProvider, MessageScrollerViewport, MexicoMap, OrgSwitcher, PhoneInput, SearchCommand, SearchablePicker, SupportMessengerProvider, ThemeSwitcher, VerifiedProfessionalBadge, VideoPlayer, avatarFallbackStyle, bubbleVariants, cn, createLiveHlsConfig, createSupportChatClient, createVodHlsConfig, defaultLanguages, describePlaybackError, fuzzyMatch, getAvatarColors, getInitials, insertAtCaret, markerVariants, normalizeEmojiQuery, shouldRetryLiveEdge404, useDebouncedValue, useDebouncedValueStrict, useHlsPlayback, useLanguageContext, useMediaQuery2 as useMediaQuery, usePlaybackStats, useSearchHotkey, useSupportConversation, useSupportMessenger, useSupportMessengerOptional };
+export { AvatarEditor, AvatarEditorDialog, Bubble, BubbleContent, BubbleGroup, BubbleReactions, ChatMessageList, ConfirmDestructiveDialog, EmojiInput, EmojiPicker, EmojiPickerPopover, EmojiTextarea, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyState, EmptyTitle, ErrorState, ExpandableText, ImageLightbox, LanguageContext, LanguageSwitcher, LoadingState, MEXICO_STATES, MEXICO_STATE_PATHS, Marker, MarkerContent, MarkerIcon, Message, MessageAvatar, MessageComposer, MessageContent, MessageFooter, MessageGroup, MessageHeader, MessageScroller, MessageScrollerButton, MessageScrollerContent, MessageScrollerItem, MessageScrollerProvider, MessageScrollerViewport, MexicoMap, OrgSwitcher, PhoneInput, SearchCommand, SearchablePicker, SupportMessengerProvider, ThemeSwitcher, VerifiedProfessionalBadge, VideoPlayer, avatarFallbackStyle, bubbleVariants, cn, createLiveHlsConfig, createSupportChatClient, createVodHlsConfig, defaultLanguages, describeAvResync, describePlaybackError, fuzzyMatch, getAvatarColors, getInitials, insertAtCaret, markerVariants, normalizeEmojiQuery, shouldRetryLiveEdge404, useDebouncedValue, useDebouncedValueStrict, useHlsPlayback, useLanguageContext, useMediaQuery2 as useMediaQuery, usePlaybackStats, useRealtimeChannel, useSearchHotkey, useSupportConversation, useSupportMessenger, useSupportMessengerOptional };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map