Live video on the AT Protocol
1import {
2 LivestreamProvider,
3 Player,
4 PlayerProps,
5 PlayerProvider,
6} from "@streamplace/components";
7import { DesktopUi } from "components/mobile/desktop-ui";
8import { useEffect } from "react";
9import { Platform } from "react-native";
10import { useStore } from "store";
11import { queryToProps } from "./util";
12
13const isWeb = Platform.OS === "web";
14
15export default function EmbedScreen({ route }) {
16 const { user, protocol, url } = route.params;
17 let extraProps: Partial<PlayerProps> = {};
18 const setSidebarHidden = useStore((state) => state.setSidebarHidden);
19 const setSidebarUnhidden = useStore((state) => state.setSidebarUnhidden);
20 useEffect(() => {
21 setSidebarHidden();
22 () => {
23 // on unmount, unhide the sidebar
24 setSidebarUnhidden();
25 };
26 }, []);
27 if (isWeb) {
28 extraProps = queryToProps(new URLSearchParams(window.location.search));
29 }
30 let src = user;
31 if (user === "stream") {
32 src = url;
33 }
34 return (
35 <LivestreamProvider src={src}>
36 <PlayerProvider {...extraProps}>
37 <Player src={src} embedded={true} {...extraProps}>
38 <DesktopUi />
39 </Player>
40 </PlayerProvider>
41 </LivestreamProvider>
42 );
43}