components: migrate livestream

js/app/components/chat/chat-box.tsx

···
 import {
   useChat,
   useCreateChatMessage,
+  useLivestream,
   useReplyToMessage,
   useSetReplyToMessage,
 } from "@streamplace/components";
···
 import {
   LivestreamViewHydrated,
   usePlayerId,
-  usePlayerLivestream,
 } from "features/player/playerSlice";
 import {
   chatWarn,
···
   const chatProfile = useAppSelector(selectChatProfile);
   const chatWarned = useAppSelector(selectChatWarned);
   const loggedOut = isReady && !userProfile;
-  const livestream = useAppSelector(usePlayerLivestream());
+  const livestream = useLivestream();
   const chat = useChat();
   const textAreaRef = useRef<Input>(null);
   const dispatch = useAppDispatch();

js/app/components/chat/chat.tsx

···
-import { useChat, useSetReplyToMessage } from "@streamplace/components";
+import {
+  useChat,
+  useProfile,
+  useSetReplyToMessage,
+} from "@streamplace/components";
 import { Reply, Settings, X } from "@tamagui/lucide-icons";
 import {
   createBlockRecord,
   selectUserProfile,
 } from "features/bluesky/blueskySlice";
-import {
-  MessageViewHydrated,
-  usePlayerLivestream,
-} from "features/player/playerSlice";
+import { MessageViewHydrated } from "features/player/playerSlice";
 import usePlatform from "hooks/usePlatform";
 import { useEffect, useRef, useState } from "react";
 import { Linking, TouchableOpacity } from "react-native";
···
   const [isAtBottom, setIsAtBottom] = useState(true);
   const chat = useChat();
   const scrollRef = useRef<ScrollView>(null);
-  const livestream = useAppSelector(usePlayerLivestream());
+  const streamerProfile = useProfile();
   const userProfile = useAppSelector(selectUserProfile);
   const myStream = !!(
     userProfile &&
-    livestream &&
     userProfile.did &&
-    livestream.author.did &&
-    userProfile.did === livestream.author.did
+    userProfile.did === streamerProfile?.did
   );
 
   const handleScroll = (event: any) => {

js/app/components/edit-livestream.tsx

···
+import { useLivestream } from "@streamplace/components";
 import { useToastController } from "@tamagui/toast";
 import {
   selectNewLivestream,
···
   const [title, setTitle] = useState("");
   const [loading, setLoading] = useState(false);
   const profile = useAppSelector(selectUserProfile);
+  const livestream = useLivestream();
   const newLivestream = useAppSelector(selectNewLivestream);
 
   useEffect(() => {
···
       await dispatch(
         updateLivestreamRecord({
           title,
-          playerId,
+          livestream,
         }),
       );
     } catch (error) {

js/app/components/livestream/livestream.tsx

···
-import { useViewers } from "@streamplace/components";
+import { useLivestream, useProfile, useViewers } from "@streamplace/components";
 import { MessageCircleMore, MessageCircleOff } from "@tamagui/lucide-icons";
 import { useToastController } from "@tamagui/toast";
 import Chat from "components/chat/chat";
···
   const [currentUserDID, setCurrentUserDID] = useState<string | null>(null);
   const { fullscreen, setFullscreen } = useFullscreen();
 
-  const streamerDID = player.livestream?.author?.did;
-  const streamerProfile = streamerDID ? profiles[streamerDID] : undefined;
+  const livestream = useLivestream();
+  const streamerProfile = useProfile();
+
+  const streamerDID = livestream?.author?.did;
   const streamerHandle = streamerProfile?.handle;
-  const startTime = player.livestream?.record?.createdAt
-    ? new Date(player.livestream?.record?.createdAt)
+  const startTime = livestream?.record?.createdAt
+    ? new Date(livestream?.record?.createdAt)
     : undefined;
 
   // this would all be really easy if i had library that would give me the
···
                         : undefined
                     }
                   >
-                    {player.livestream?.record.title}
+                    {livestream?.record.title}
                   </H2>
                 </View>
               </View>
···
                   marginTop={-15}
                 >
                   <Text fontSize={18} numberOfLines={1} ellipsizeMode="tail">
-                    {player.livestream?.record.title}
+                    {livestream?.record.title}
                   </Text>
                 </View>
               </View>

js/app/components/player/provider.tsx

···
   props: Partial<PlayerProps> & { children: React.ReactNode },
 ) {
   const dispatch = useAppDispatch();
-  const { pollLivestream, pollSegment, handleWebSocketMessages } =
-    usePlayerActions();
+  const { pollSegment, handleWebSocketMessages } = usePlayerActions();
 
   const url = useAppSelector(selectUrl);
   let wsUrl = url.replace(/^http\:/, "ws:");
···
       if (!props.src) {
         return;
       }
-      await Promise.all([
-        dispatch(pollLivestream(props.src)),
-        dispatch(pollSegment(props.src)),
-      ]);
+      await Promise.all([dispatch(pollSegment(props.src))]);
     };
     handle = setInterval(poll, POLL_INTERVAL);
     return () => clearInterval(handle);

js/app/features/bluesky/blueskySlice.tsx

···
 } from "features/streamplace/streamplaceSlice";
 import Storage from "storage";
 import {
+  LivestreamViewHydrated,
   PlaceStreamChatProfile,
   PlaceStreamKey,
   PlaceStreamLivestream,
···
 
     updateLivestreamRecord: create.asyncThunk(
       async (
-        { title, playerId }: { title: string; playerId: string },
+        {
+          title,
+          livestream,
+        }: { title: string; livestream: LivestreamViewHydrated | null },
         thunkAPI,
       ) => {
         const now = new Date();
···
           throw new Error("No profile");
         }
 
-        let oldRecord = player[playerId].livestream;
+        let oldRecord = livestream;
         if (!oldRecord) {
           throw new Error("No latest record");
         }

js/app/features/player/playerSlice.tsx

···
   ingestStarted: number | null;
   ingestStarting: boolean;
   ingestConnectionState: RTCPeerConnectionState | null;
-  livestream: LivestreamViewHydrated | null;
   segment: PlaceStreamSegment.Record | null;
   renditions: PlaceStreamDefs.Rendition[];
   selectedRendition: string | null;
···
           ingestStarting: false,
           ingestConnectionState: null,
           protocol: action.payload.forceProtocol ?? PROTOCOL_WEBRTC,
-          livestream: null,
           segment: null,
           renditions: [],
           selectedRendition: "source",
···
           },
         ) => {
           for (const message of action.payload.messages) {
-            if (PlaceStreamLivestream.isLivestreamView(message)) {
-              state = {
-                ...state,
-                [action.payload.playerId]: {
-                  ...state[action.payload.playerId],
-                  livestream: message as LivestreamViewHydrated,
-                },
-              };
-            } else if (PlaceStreamSegment.isRecord(message)) {
+            if (PlaceStreamSegment.isRecord(message)) {
               state = {
                 ...state,
                 [action.payload.playerId]: {
···
         },
       ),
 
-      pollLivestream: create.asyncThunk(
-        async (
-          { playerId, user }: { playerId: string; user: string },
-          { getState },
-        ) => {
-          const { streamplace } = getState() as {
-            streamplace: StreamplaceState;
-          };
-          const res = await fetch(`${streamplace.url}/api/livestream/${user}`);
-          const data = (await res.json()) as LivestreamViewHydrated;
-          return { playerId, livestream: data };
-        },
-        {
-          pending: (state) => {
-            // state.status = "loading";
-          },
-          fulfilled: (state, result) => {
-            return {
-              ...state,
-              [result.payload.playerId]: {
-                ...state[result.payload.playerId],
-                livestream: result.payload.livestream,
-              },
-            };
-          },
-          rejected: (state, error) => {
-            console.error("pollLivestream rejected", error);
-            return state;
-          },
-        },
-      ),
-
       pollSegment: create.asyncThunk(
         async (
           { playerId, user }: { playerId: string; user: string },
···
     selectPlayer: (state, playerId: string) => {
       return state[playerId];
     },
-    selectLivestream: (state, playerId: string) => {
-      return state[playerId].livestream;
-    },
     selectSegment: (state, playerId: string) => {
       return state[playerId].segment;
     },
···
         ingestConnectionState,
       });
     },
-    pollLivestream: (user: string) =>
-      playerSlice.actions.pollLivestream({ playerId, user }),
     pollSegment: (user: string) =>
       playerSlice.actions.pollSegment({ playerId, user }),
     handleWebSocketMessages: (messages: any[]) =>
···
 };
 
 // Action creators are generated for each case reducer function.
-export const { selectPlayer, selectLivestream, selectSegment } =
-  playerSlice.selectors;
+export const { selectPlayer, selectSegment } = playerSlice.selectors;
 export const usePlayer = (): ((state: {
   player: PlayersState;
 }) => PlayerState) => {
   const playerId = usePlayerId();
   return (state) => state.player[playerId];
-};
-export const usePlayerLivestream = (): ((state: {
-  player: PlayersState;
-}) => LivestreamViewHydrated | null) => {
-  const playerId = usePlayerId();
-  return (state) => state.player[playerId].livestream;
 };
 export const usePlayerSegment = (): ((state: {
   player: PlayersState;

js/app/src/screens/live-dashboard.tsx

···
+import { LivestreamProvider } from "@streamplace/components";
 import { Camera, FerrisWheel, X } from "@tamagui/lucide-icons";
 import { Redirect } from "components/aqlink";
 import CreateLivestream from "components/create-livestream";
···
     );
   }
   return (
-    <VideoElementProvider videoElement={videoElement}>
-      <View f={1} ai="stretch" jc="center">
-        <View f={1} fb={0}>
-          {topPane}
-          {closeButton}
-        </View>
-        <View f={1} ai="center" jc="center" fb={0}>
-          <ButtonSelector
-            values={[
-              { label: "Create", value: "create" },
-              { label: "Update", value: "update" },
-            ]}
-            disabledValues={playerId ? [] : ["update"]}
-            selectedValue={page}
-            setSelectedValue={setPage}
-            maxWidth={250}
-            width="100%"
-          />
-          {page === "update" ? <UpdateLivestream playerId={playerId} /> : null}
-          {page === "create" ? <CreateLivestream /> : null}
+    <LivestreamProvider src={userProfile.did}>
+      <VideoElementProvider videoElement={videoElement}>
+        <View f={1} ai="stretch" jc="center">
+          <View f={1} fb={0}>
+            {topPane}
+            {closeButton}
+          </View>
+          <View f={1} ai="center" jc="center" fb={0}>
+            <ButtonSelector
+              values={[
+                { label: "Create", value: "create" },
+                { label: "Update", value: "update" },
+              ]}
+              disabledValues={playerId ? [] : ["update"]}
+              selectedValue={page}
+              setSelectedValue={setPage}
+              maxWidth={250}
+              width="100%"
+            />
+            {page === "update" ? (
+              <UpdateLivestream playerId={playerId} />
+            ) : null}
+            {page === "create" ? <CreateLivestream /> : null}
+          </View>
         </View>
-      </View>
-    </VideoElementProvider>
+      </VideoElementProvider>
+    </LivestreamProvider>
   );
 }
 

js/components/src/livestream-provider/index.tsx

···
-import React, { useRef } from "react";
+import React, { useContext, useRef } from "react";
 import { LivestreamContext, makeLivestreamStore } from "../livestream-store";
 import { useLivestreamWebsocket } from "./websocket";
 
···
   children: React.ReactNode;
   src: string;
 }) {
+  const context = useContext(LivestreamContext);
   const store = useRef(makeLivestreamStore()).current;
+  if (context) {
+    // this is ok, there's use cases for having one in another
+    // like having a player component that's independently usable
+    // but can also be embedded within an entire livestream page
+    return <>{children}</>;
+  }
   (window as any).livestreamStore = store;
   return (
     <LivestreamContext.Provider value={{ store: store }}>

js/components/src/livestream-store/livestream-store.tsx

···
 export const useProfile = () => useLivestreamStore((x) => x.profile);
 
 export const useViewers = () => useLivestreamStore((x) => x.viewers);
+
+export const useLivestream = () => useLivestreamStore((x) => x.livestream);