re-add offline counter, video retry

js/app/components/mobile/desktop-ui.tsx

···
   useLivestreamInfo,
   usePlayerDimensions,
   usePlayerStore,
+  useSegment,
   View,
   zero,
 } from "@streamplace/components";
···
   useSharedValue,
   withTiming,
 } from "react-native-reanimated";
+import { OfflineCounter } from "./offline-counter";
 import { useResponsiveLayout } from "./useResponsiveLayout";
 
 const { borders, colors, gap, h, layout, position, w, px, py, r, p, bg, text } =
···
   const muteWasForced = usePlayerStore((state) => state.muteWasForced);
   const setMuteWasForced = usePlayerStore((state) => state.setMuteWasForced);
   const setMuted = usePlayerStore((state) => state.setMuted);
+  const offline = usePlayerStore((state) => state.offline);
+
+  const segment = useSegment();
 
   const [isControlsVisible, setIsControlsVisible] = useState(true);
   const [isChatOpen, setIsChatOpen] = useState(false);
···
     opacity: shouldShowFloatingMetrics ? 1 : fadeOpacity.value,
   }));
 
+  // Live timer for offline overlay
+  const [timeSinceLastSeen, setTimeSinceLastSeen] = useState("Unknown");
+
+  useEffect(() => {
+    if (!offline || !segment?.startTime) {
+      setTimeSinceLastSeen("Unknown");
+      return;
+    }
+
+    const updateTimer = () => {
+      const now = new Date();
+      const lastSeen = new Date(segment.startTime);
+      const diffMs = now.getTime() - lastSeen.getTime();
+      const diffMinutes = Math.floor(diffMs / 60000);
+      const diffSeconds = Math.floor((diffMs % 60000) / 1000);
+
+      if (diffMinutes > 0) {
+        setTimeSinceLastSeen(`${diffMinutes}m ${diffSeconds}s ago`);
+      } else {
+        setTimeSinceLastSeen(`${diffSeconds}s ago`);
+      }
+    };
+
+    // Update immediately
+    updateTimer();
+
+    // Update every second while offline
+    const interval = setInterval(updateTimer, 1000);
+
+    return () => clearInterval(interval);
+  }, [offline, segment?.startTime]);
+
   const hover = Gesture.Hover().onChange((_) => runOnJS(onPlayerHover)());
 
   return (
···
                   >
                     {profile?.handle}
                   </Text>
-                  <LiveBubble />
+                  {!offline && <LiveBubble />}
                 </View>
               </View>
 
···
             description="We're notifying your followers that you just went live."
             duration={5}
           />
+
+          {offline && <OfflineCounter />}
+
           {muteWasForced && (
             <View
               style={[

js/app/components/mobile/offline-counter/index.tsx

···
+import {
+  Text,
+  usePlayerStore,
+  useSegment,
+  View,
+  zero,
+} from "@streamplace/components";
+import { useEffect, useState } from "react";
+
+const { gap, h, layout, position, w } = zero;
+
+interface OfflineCounterProps {
+  isMobile?: boolean;
+}
+
+export function OfflineCounter({ isMobile = false }: OfflineCounterProps) {
+  const offline = usePlayerStore((state) => state.offline);
+  const segment = useSegment();
+
+  // Live timer for offline overlay
+  const [timeSinceLastSeen, setTimeSinceLastSeen] = useState("Unknown");
+
+  useEffect(() => {
+    if (!offline || !segment?.startTime) {
+      setTimeSinceLastSeen("Unknown");
+      return;
+    }
+
+    const updateTimer = () => {
+      const now = new Date();
+      const lastSeen = new Date(segment.startTime);
+      const diffMs = now.getTime() - lastSeen.getTime();
+      const diffMinutes = Math.floor(diffMs / 60000);
+      const diffSeconds = Math.floor((diffMs % 60000) / 1000);
+
+      if (diffMinutes > 0) {
+        setTimeSinceLastSeen(`${diffMinutes}m ${diffSeconds}s ago`);
+      } else {
+        setTimeSinceLastSeen(`${diffSeconds}s ago`);
+      }
+    };
+
+    // Update immediately
+    updateTimer();
+
+    // Update every second while offline
+    const interval = setInterval(updateTimer, 1000);
+
+    return () => clearInterval(interval);
+  }, [offline, segment?.startTime]);
+
+  if (!offline) return null;
+
+  const titleFontSize = isMobile ? 24 : 32;
+  const subtitleFontSize = isMobile ? 16 : 18;
+  const descriptionFontSize = isMobile ? 14 : 16;
+  const descriptionMarginTop = isMobile ? 8 : 12;
+  const maxWidth = isMobile ? undefined : 400;
+
+  return (
+    <View
+      style={[
+        layout.position.absolute,
+        layout.flex.center,
+        h.percent[100],
+        w.percent[100],
+        {
+          backgroundColor: "rgba(0, 0, 0, 0.85)",
+          zIndex: 1000,
+        },
+      ]}
+    >
+      <View style={[layout.flex.column, layout.flex.center, gap.all[3]]}>
+        <Text
+          style={[
+            {
+              fontSize: titleFontSize,
+              fontWeight: "700",
+              color: "white",
+              textAlign: "center",
+            },
+          ]}
+        >
+          Stream Offline
+        </Text>
+        <Text
+          style={[
+            {
+              fontSize: subtitleFontSize,
+              color: "rgba(255, 255, 255, 0.8)",
+              textAlign: "center",
+              fontVariant: ["tabular-nums"],
+            },
+          ]}
+        >
+          Last seen: {timeSinceLastSeen}
+        </Text>
+        <Text
+          style={[
+            {
+              fontSize: descriptionFontSize,
+              color: "rgba(255, 255, 255, 0.6)",
+              textAlign: "center",
+              marginTop: descriptionMarginTop,
+              maxWidth,
+            },
+          ]}
+        >
+          The stream will resume automatically when the broadcaster returns
+        </Text>
+      </View>
+    </View>
+  );
+}

js/app/components/mobile/player.tsx

···
 import { BottomMetadata } from "./bottom-metadata";
 import { DesktopChatPanel } from "./chat";
 import { DesktopUi } from "./desktop-ui";
+import { OfflineCounter } from "./offline-counter";
 import { MobileUi } from "./ui";
 import { useResponsiveLayout } from "./useResponsiveLayout";
 
···
       >
         <PlayerInnerInner {...props}>
           {(showBottomMetaPanel || fullscreen) && <DesktopUi />}
+          <OfflineCounter isMobile={true} />
         </PlayerInnerInner>
       </Animated.View>
       {showBottomMetaPanel && (

js/app/components/mobile/ui.tsx

···
           />
         </Animated.View>
       </TouchableWithoutFeedback>
+
       {!isSelfAndNotLive && (
         <MobileChatPanel isPlayerRatioGreater={isPlayerRatioGreater} />
       )}

js/components/src/components/mobile-player/fullscreen.tsx

···
 import { getFirstPlayerID, usePlayerStore } from "../..";
 import { View } from "../../components/ui";
 import Video from "./video";
+import VideoRetry from "./video-retry";
 
 export function Fullscreen(props: { src: string; children?: React.ReactNode }) {
   const playerId = getFirstPlayerID();
···
       ref={divRef}
       style={{ width: "100%", height: "100%", overflow: "hidden" }}
     >
-      <Video />
+      <VideoRetry>
+        <Video />
+      </VideoRetry>
       {props.children}
     </View>
   );

js/components/src/components/mobile-player/video-retry.tsx

···
+import React, { useEffect } from "react";
+import { usePlayerStore, useSegment, useStreamplaceStore } from "../..";
+
+import { useRef } from "react";
+
+export default function VideoRetry(props: { children: React.ReactNode }) {
+  const lastSegmentRef = useRef<string | null>(null);
+  const retryTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+  const segment = useSegment();
+
+  const offline = usePlayerStore((x) => x.offline);
+  const spurl = useStreamplaceStore((x) => x.url);
+
+  useEffect(() => {
+    if (
+      lastSegmentRef.current !== null &&
+      segment &&
+      segment.startTime !== lastSegmentRef.current &&
+      offline
+    ) {
+      const jitter = 500 + Math.random() * 1500;
+      retryTimeoutRef.current = setTimeout(() => {
+        lastSegmentRef.current = segment?.startTime;
+      }, jitter);
+    }
+  }, [offline, segment, spurl]);
+
+  return (
+    <React.Fragment key={lastSegmentRef.current}>
+      {props.children}
+    </React.Fragment>
+  );
+}

js/components/src/index.tsx

···
 export * from "./components/chat/chat";
 export * from "./components/chat/chat-box";
 export * from "./components/chat/system-message";
+export { default as VideoRetry } from "./components/mobile-player/video-retry";
 export * from "./lib/system-messages";