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
import { useNavigation } from "@react-navigation/native";
2
import {
3
ContentWarningBadge,
4
PlayerUI,
5
Slider,
6
Text,
···
80
81
const muteWasForced = usePlayerStore((state) => state.muteWasForced);
82
const setMuteWasForced = usePlayerStore((state) => state.setMuteWasForced);
83
const muted = useMuted();
84
const setMuted = useSetMuted();
85
const ls = useLivestream();
···
268
<PlayerUI.AutoplayButton />
269
</View>
270
</GestureDetector>
271
-
{showChat === undefined && !isSelfAndNotLive && (
272
<MobileChatPanel isPlayerRatioGreater={isPlayerRatioGreater} />
273
)}
274
</>
···
1
import { useNavigation } from "@react-navigation/native";
2
import {
3
ContentWarningBadge,
4
+
PlayerStatus,
5
PlayerUI,
6
Slider,
7
Text,
···
81
82
const muteWasForced = usePlayerStore((state) => state.muteWasForced);
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]);
99
const muted = useMuted();
100
const setMuted = useSetMuted();
101
const ls = useLivestream();
···
284
<PlayerUI.AutoplayButton />
285
</View>
286
</GestureDetector>
287
+
{showChat === undefined && !isSelfAndNotLive && playerIsReady && (
288
<MobileChatPanel isPlayerRatioGreater={isPlayerRatioGreater} />
289
)}
290
</>
+1
-1
js/components/src/components/mobile-player/video-retry.tsx
+1
-1
js/components/src/components/mobile-player/video-retry.tsx