stream.place
Live video on the AT Protocol
ui: workarounds for slow-loading chat
+17
-1
js/app/components/mobile/ui.tsx
+17
-1
js/app/components/mobile/ui.tsx
···
1
1
import { useNavigation } from "@react-navigation/native";
2
2
import {
3
3
ContentWarningBadge,
4
+
PlayerStatus,
4
5
PlayerUI,
5
6
Slider,
6
7
Text,
···
80
81
81
82
const muteWasForced = usePlayerStore((state) => state.muteWasForced);
82
83
const setMuteWasForced = usePlayerStore((state) => state.setMuteWasForced);
84
+
const [playerIsReady, setPlayerIsReady] = useState(false);
85
+
const playerStatusReady = usePlayerStore(
86
+
(state) => state.status === PlayerStatus.PLAYING,
87
+
);
88
+
useEffect(() => {
89
+
if (playerIsReady) return;
90
+
if (playerStatusReady) {
91
+
setPlayerIsReady(true);
92
+
} else {
93
+
const handle = setTimeout(() => {
94
+
setPlayerIsReady(true);
95
+
}, 5000);
96
+
return () => clearTimeout(handle);
97
+
}
98
+
}, [playerStatusReady]);
83
99
const muted = useMuted();
84
100
const setMuted = useSetMuted();
85
101
const ls = useLivestream();
···
268
284
<PlayerUI.AutoplayButton />
269
285
</View>
270
286
</GestureDetector>
271
-
{showChat === undefined && !isSelfAndNotLive && (
287
+
{showChat === undefined && !isSelfAndNotLive && playerIsReady && (
272
288
<MobileChatPanel isPlayerRatioGreater={isPlayerRatioGreater} />
273
289
)}
274
290
</>
+1
-1
js/components/src/components/mobile-player/video-retry.tsx
+1
-1
js/components/src/components/mobile-player/video-retry.tsx
···
8
8
9
9
useEffect(() => {
10
10
if (!playing) {
11
-
const jitter = 500 + Math.random() * 1500;
11
+
const jitter = 2000 + Math.random() * 1500;
12
12
retryTimeoutRef.current = setTimeout(() => {
13
13
console.log("Retrying video playback...");
14
14
setRetries((prevRetries) => prevRetries + 1);