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