feat: drop in livekit inplace of livepeer

push-protocol · Sep 27, 2023 · ad19a22 · ad19a22
1 parent e536453
commit ad19a22
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 26 deletions.
diff --git a/packages/uiweb/src/lib/components/space/SpaceWidget/LiveWidgetContent.tsx b/packages/uiweb/src/lib/components/space/SpaceWidget/LiveWidgetContent.tsx
@@ -5,7 +5,7 @@ import * as PushAPI from '@pushprotocol/restapi';
 import { SpaceDTO } from '@pushprotocol/restapi';
 
 // livekit imports
-import { LiveKitRoom, RoomAudioRenderer } from '@livekit/components-react';
+import { LiveKitRoom, ConnectionState, RoomName, RoomAudioRenderer, ControlBar } from '@livekit/components-react';
 import { Room } from 'livekit-client';
 
 import { LiveSpaceProfileContainer } from './LiveSpaceProfileContainer';
@@ -63,20 +63,23 @@ export const LiveWidgetContent: React.FC<LiveWidgetContentProps> = ({
 
   const isMicOn = spaceObjectData?.connectionData?.local?.audio;
 
-  const numberOfRequests = spaceObjectData.liveSpaceData.listeners.filter((listener: any) => listener.handRaised).length;
+  // const numberOfRequests = spaceObjectData.liveSpaceData.listeners.filter((listener: any) => listener.handRaised).length;
 
   const handleMicState = async () => {
     await spacesObjectRef?.current?.enableAudio?.({ state: !isMicOn });
   };
 
   useEffect(() => {
     (async function () {
-      if(isListener && spaceData?.spaceId) {
+      if (isListener && spaceData?.spaceId) {
         const livekitToken = await getLivekitRoomToken({ userType: "receiver", roomId: spaceData?.spaceId });
         setLivekitToken(livekitToken.data);
+      } else if (isHost && spaceData?.spaceId) {
+        const livekitToken = await getLivekitRoomToken({ userType: "sender", roomId: spaceData?.spaceId });
+        setLivekitToken(livekitToken.data);
       }
     })();
-  }, [isListener, spaceData]);
+  }, [isListener, isHost, spaceData]);
 
   useEffect(() => {
     if (!spaceObjectData?.connectionData?.local?.stream || !isRequestedForMic)
@@ -398,13 +401,13 @@ export const LiveWidgetContent: React.FC<LiveWidgetContentProps> = ({
             </Item>
             <Item display={'flex'} alignItems={'center'} gap={'16px'}>
               <MembersContainer>
-                {
+                {/* {
                   isHost && numberOfRequests ?
                     <RequestsCount>
                       {numberOfRequests}
                     </RequestsCount>
                     : null
-                }
+                } */}
                 <Image
                   width={'21px'}
                   height={'24px'}
@@ -435,20 +438,11 @@ export const LiveWidgetContent: React.FC<LiveWidgetContentProps> = ({
                 {!isHost ? 'Leave' : 'End space'}
               </Button>
             </Item>
-            {isListener && !isHost && playBackUrl.length > 0 && (
+            {/* {isListener && !isHost && playBackUrl.length > 0 && (
               <PeerPlayerDiv>
                 <Player title="spaceAudio" playbackId={playBackUrl} autoPlay />
               </PeerPlayerDiv>
-            )}
-            {isListener && !isHost && livekitToken && (
-              <LiveKitRoom
-                serverUrl={LIVEKIT_SERVER_URL}
-                token={livekitToken}
-                room={livekitRoom}
-              >
-                <RoomAudioRenderer />
-              </LiveKitRoom>
-            )}
+            )} */}
           </Item>
         ) : (
           <Button
@@ -481,6 +475,19 @@ export const LiveWidgetContent: React.FC<LiveWidgetContentProps> = ({
           />
         ) : null}
       </Item>
+      <LiveKitComp>
+        {livekitToken && (
+          <LiveKitRoom
+            serverUrl={LIVEKIT_SERVER_URL}
+            token={livekitToken}
+            room={livekitRoom}
+          >
+            <ConnectionState />
+            <RoomAudioRenderer />
+            <ControlBar />
+          </LiveKitRoom>
+        )}
+      </LiveKitComp>
     </ThemeProvider>
   );
 };
@@ -509,3 +516,9 @@ const RequestsCount = styled.div`
   border-radius: 4px;
   font-size: 12px;
 `;
+
+const LiveKitComp = styled.div`
+  background-color: white;
+  padding: 12px;
+  margin: 12px;
+`;
diff --git a/packages/uiweb/src/lib/components/space/SpaceWidget/ScheduledWidgetContent.tsx b/packages/uiweb/src/lib/components/space/SpaceWidget/ScheduledWidgetContent.tsx
@@ -68,6 +68,18 @@ export const ScheduledWidgetContent: React.FC<ScheduledWidgetContentProps> = ({
     setIsStarted(true);
   };
 
+  const handleStartSpaceLiveKit = async () => {
+    setIsLoading(!isLoading);
+    console.log(spaceStatusState)
+
+    await initSpaceObject?.(spaceData?.spaceId as string);
+
+    setIsLoading(!isLoading);
+    setIsStarted(true);
+
+    console.log(spaceStatusState)
+  }
+
   const handleShareTweet = () => {
     if (!shareUrl) return;
     const url = shareUrl;
@@ -141,14 +153,23 @@ export const ScheduledWidgetContent: React.FC<ScheduledWidgetContentProps> = ({
     return { icon, alt };
   };
 
+  // useEffect(() => {
+  //   async function startSpace() {
+  //     if (spaceStatusState === SpaceStatus.Live) return;
+  //     if (!spaceObjectData?.connectionData?.local?.stream || !isStarted) return;
+  //     console.log('SPACE STARTING');
+  //     await spacesObjectRef?.current?.start?.({
+  //       livepeerApiKey: 'ac9d3e33-56c2-4a22-a328-a08a46fd9356',
+  //     });
+  //     console.log('SPACE STARTED');
+  //     setIsStarted(false);
+  //     setSpaceStatusState && setSpaceStatusState(SpaceStatus.Live);
+  //   }
+  //   startSpace();
+  // }, [isStarted]);
+
   useEffect(() => {
     async function startSpace() {
-      if (spaceStatusState === SpaceStatus.Live) return;
-      if (!spaceObjectData?.connectionData?.local?.stream || !isStarted) return;
-      console.log('SPACE STARTING');
-      await spacesObjectRef?.current?.start?.({
-        livepeerApiKey: 'ac9d3e33-56c2-4a22-a328-a08a46fd9356',
-      });
       console.log('SPACE STARTED');
       setIsStarted(false);
       setSpaceStatusState && setSpaceStatusState(SpaceStatus.Live);
@@ -195,7 +216,7 @@ export const ScheduledWidgetContent: React.FC<ScheduledWidgetContentProps> = ({
             background={`${theme.btnColorPrimary}`}
             border={`1px solid ${theme.btnOutline}`}
             cursor={'pointer'}
-            onClick={handleStartSpace}
+            onClick={handleStartSpaceLiveKit}
           >
             <Text fontSize="14px" fontWeight={600} color="#fff">
               {isLoading ? <CircularProgressSpinner /> : 'Start this Space'}

diff --git a/packages/uiweb/src/lib/config/constants.ts b/packages/uiweb/src/lib/config/constants.ts
@@ -94,5 +94,6 @@ export const FILE_ICON = (extension: string) =>
   `https://cdn.jsdelivr.net/gh/napthedev/file-icons/file/${extension}.svg`;
 
 // Livekit Server URLs
-export const LIVEKIT_SERVER_URL = "";
-export const LIVEKIT_TOKEN_GENERATOR_SERVER_URL = "";
+export const LIVEKIT_SERVER_URL = "https://spacev2-demo-17wvllxz.livekit.cloud";
+export const LIVEKIT_SERVER_WEBSOCKET_URL = "wss://spacev2-demo-17wvllxz.livekit.cloud";
+export const LIVEKIT_TOKEN_GENERATOR_SERVER_URL = "https://ms-lk-server.onrender.com";