Live video on the AT Protocol
stream.place
check if we should actually collapse the player
authored by Natalie Bridgers and committed by Natalie B. 39a4410e 72f2ac8d
+11
-2
js/app/components/mobile/player.tsx
+11
-2
js/app/components/mobile/player.tsx
···
57
57
const hasReceivedSegment = useLivestreamStore((x) => x.hasReceivedSegment);
58
58
const [showUnavailable, setShowUnavailable] = useState(false);
59
59
const segs = useSegment();
60
+
61
+
// periodically check if segment has become stale
62
+
const [now, setNow] = useState(Date.now());
63
+
useEffect(() => {
64
+
const interval = setInterval(() => {
65
+
setNow(Date.now());
66
+
}, 15000); // check every 15 seconds
67
+
return () => clearInterval(interval);
68
+
}, []);
69
+
60
70
useEffect(() => {
61
71
if (!websocketConnected) {
62
72
setShowUnavailable(false);
63
73
return;
64
74
}
65
75
66
-
const now = new Date().getTime();
67
76
const then = new Date(segs?.startTime || 0).getTime();
68
77
const segmentIsStale = segs?.startTime ? then < now - 300_000 : true;
69
78
···
76
85
setShowUnavailable(true);
77
86
}, SEGMENT_TIMEOUT);
78
87
return () => clearTimeout(timer);
79
-
}, [websocketConnected, hasReceivedSegment, segs]);
88
+
}, [websocketConnected, hasReceivedSegment, segs, now]);
80
89
81
90
const [isStreamingElsewhere, setIsStreamingElsewhere] = useState<
82
91
boolean | null
+2
-1
js/app/src/screens/user-offline.tsx
+2
-1
js/app/src/screens/user-offline.tsx
···
109
109
w.percent[100],
110
110
isSmallScreen
111
111
? { maxWidth: "100%", aspectRatio: 16 / 9 }
112
-
: { maxWidth: 650, aspectRatio: 16 / 9 },
112
+
: { maxWidth: 650, minWidth: 650, aspectRatio: 16 / 9 },
113
113
overflow.hidden,
114
114
r.lg,
115
115
overflow.hidden,
116
116
borders.color.neutral[800],
117
117
borders.width.thin,
118
+
bg.black,
118
119
gap.row[2],
119
120
]}
120
121
>