stream.place
Live video on the AT Protocol
1import {
2 KeepAwake,
3 LivestreamProvider,
4 Player,
5 PlayerProps,
6 PlayerProvider,
7 ThemeProvider,
8 usePlayerStore,
9 zero,
10} from "@streamplace/components";
11import { DesktopUi } from "components/mobile/desktop-ui";
12import { FullscreenProvider } from "contexts/FullscreenContext";
13import { useEffect, useState } from "react";
14import { Text, View } from "react-native";
15
16const { layout, flex } = zero;
17
18function IdViewer({ reqid }) {
19 const id = usePlayerStore((p) => p.id);
20 return (
21 <View style={[layout.flex.center, layout.flex.row]}>
22 <Text>
23 {reqid} {id}
24 </Text>
25 </View>
26 );
27}
28
29export default function MultiScreen({ route }) {
30 const config = route.params?.config;
31 if (typeof config !== "string") {
32 return <View />;
33 }
34
35 const [rows, setRows] = useState<Partial<PlayerProps | null>[][]>([]);
36 const [error, setError] = useState<string | null>(null);
37
38 useEffect(() => {
39 try {
40 let nearestSquareExpo = 1;
41 const playerProps = JSON.parse(
42 config as string,
43 ) as Partial<PlayerProps>[];
44 while (Math.pow(nearestSquareExpo, 2) < playerProps.length) {
45 nearestSquareExpo += 1;
46 }
47 const rows: Partial<PlayerProps | null>[][] = [];
48 let idx = 0;
49 for (let i = 0; i < nearestSquareExpo; i += 1) {
50 const row: Partial<PlayerProps | null>[] = [];
51 for (let j = 0; j < nearestSquareExpo; j += 1) {
52 if (playerProps[idx]) {
53 row.push(playerProps[idx]);
54 } else {
55 row.push(null);
56 }
57 idx += 1;
58 }
59 rows.push(row);
60 }
61 setRows(rows);
62 } catch (e) {
63 setError(e.message);
64 }
65 }, [config]);
66
67 if (error) {
68 return <Text>{error}</Text>;
69 }
70
71 return (
72 <ThemeProvider>
73 <KeepAwake />
74 <FullscreenProvider>
75 <View style={[flex.values[1]]}>
76 {rows.map((players, i) => (
77 <View key={i} style={[flex.values[1], layout.flex.row]}>
78 {players.map((props, j) => (
79 <View key={j} style={[flex.values[1]]}>
80 {props === null ? (
81 <View />
82 ) : (
83 <LivestreamProvider src={props.src || ""}>
84 <PlayerProvider defaultId={props.playerId}>
85 <Player {...props}>
86 <DesktopUi />
87 <IdViewer reqid={props.playerId} />
88 </Player>
89 </PlayerProvider>
90 </LivestreamProvider>
91 )}
92 </View>
93 ))}
94 </View>
95 ))}
96 </View>
97 </FullscreenProvider>
98 </ThemeProvider>
99 );
100}