check if we should actually collapse the player

js/app/components/mobile/player.tsx

···
   const hasReceivedSegment = useLivestreamStore((x) => x.hasReceivedSegment);
   const [showUnavailable, setShowUnavailable] = useState(false);
   const segs = useSegment();
+
+  // periodically check if segment has become stale
+  const [now, setNow] = useState(Date.now());
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setNow(Date.now());
+    }, 15000); // check every 15 seconds
+    return () => clearInterval(interval);
+  }, []);
+
   useEffect(() => {
     if (!websocketConnected) {
       setShowUnavailable(false);
       return;
     }
 
-    const now = new Date().getTime();
     const then = new Date(segs?.startTime || 0).getTime();
     const segmentIsStale = segs?.startTime ? then < now - 300_000 : true;
 
···
       setShowUnavailable(true);
     }, SEGMENT_TIMEOUT);
     return () => clearTimeout(timer);
-  }, [websocketConnected, hasReceivedSegment, segs]);
+  }, [websocketConnected, hasReceivedSegment, segs, now]);
 
   const [isStreamingElsewhere, setIsStreamingElsewhere] = useState<
     boolean | null

js/app/src/screens/user-offline.tsx

···
             w.percent[100],
             isSmallScreen
               ? { maxWidth: "100%", aspectRatio: 16 / 9 }
-              : { maxWidth: 650, aspectRatio: 16 / 9 },
+              : { maxWidth: 650, minWidth: 650, aspectRatio: 16 / 9 },
             overflow.hidden,
             r.lg,
             overflow.hidden,
             borders.color.neutral[800],
             borders.width.thin,
+            bg.black,
             gap.row[2],
           ]}
         >