fix: fix members modal, add requestMic

push-protocol · Jul 21, 2023 · 57cec95 · 57cec95
1 parent 5f592b1
commit 57cec95
Show file tree

Hide file tree

Showing 6 changed files with 103 additions and 56 deletions.
diff --git a/packages/restapi/src/lib/space/index.ts b/packages/restapi/src/lib/space/index.ts
@@ -14,3 +14,4 @@ export * from './approve';
 export * from './requests';
 export {spaceFeed as space} from './spaceFeed';
 export * from './Space'
+export * from './broadcastRaisedHand';
diff --git a/packages/uiweb/src/lib/components/space/SpaceWidget/LiveWidgetContent.tsx b/packages/uiweb/src/lib/components/space/SpaceWidget/LiveWidgetContent.tsx
@@ -65,6 +65,18 @@ export const LiveWidgetContent: React.FC<LiveWidgetContentProps> = ({
     await spacesObjectRef?.current?.enableAudio?.({ state: !isMicOn });
   };
 
+  const handleRequest = async () => {
+    await spacesObjectRef?.current?.requestToBePromoted?.({ role: 'SPEAKER', promotorAddress: pCAIP10ToWallet(spaceObjectData?.spaceCreator) })
+  }
+
+    // handleAcceptPromoReq {
+    // btn click on accept
+    // call create audio stream
+    // await spacesObjectRef?.current?.createAudioStream?.();
+
+    // new useEffect to call acceptPromote (join speker like)
+  // }
+
   const handleDDState = () => {
     setIsDDOpen(!isDDOpen);
   };
@@ -228,11 +240,11 @@ export const LiveWidgetContent: React.FC<LiveWidgetContentProps> = ({
                 image={profile?.image}
               />
 
-              {isDDOpen ? (
+              {/* {isDDOpen ? (
                 <DropDown theme={theme} ref={dropdownRef} isDDOpen={isDDOpen}>
                   <DDItem>Invite to Speak</DDItem>
                 </DropDown>
-              ) : null}
+              ) : null} */}
             </div>
           ))}
       </Item>
@@ -251,7 +263,7 @@ export const LiveWidgetContent: React.FC<LiveWidgetContentProps> = ({
               alignItems={'center'}
               gap={'8px'}
               padding={'10px'}
-              onClick={() => (isHost || isSpeaker ? handleMicState() : null)}
+              onClick={() => (isHost || isSpeaker ? handleMicState() : handleRequest())}
             >
               <Image
                 width={'14px'}
@@ -337,6 +349,7 @@ export const LiveWidgetContent: React.FC<LiveWidgetContentProps> = ({
         {showMembersModal ? (
           <SpaceMembersSectionModal
             onClose={() => setShowMembersModal(false)}
+            spaceData={spaceObjectData}
           />
         ) : null}
       </Item>

diff --git a/packages/uiweb/src/lib/components/space/SpaceWidget/SpaceMembersSectionModal.tsx b/packages/uiweb/src/lib/components/space/SpaceWidget/SpaceMembersSectionModal.tsx
@@ -1,12 +1,16 @@
-import React, { ReactNode, useState } from 'react';
+import React, { ReactNode, useState, useContext } from 'react';
 import styled from 'styled-components';
 
 import { Modal } from '../reusables/Modal';
 import { ModalHeader } from '../reusables/ModalHeader';
 import { ProfileContainer } from '../reusables/ProfileContainer';
+import { ThemeContext } from '../theme/ThemeProvider';
+import { createBlockie } from '../helpers/blockies';
 
 import { Button, Container, Image, Text } from '../../../config';
 import SettingsIcon from '../../../icons/settingsBlack.svg';
+import { SettingsLogo } from '../../../icons/SettingsLogo';
+
 
 const tempImageUrl = "https://imgv3.fotor.com/images/blog-richtext-image/10-profile-picture-ideas-to-make-you-stand-out.jpg";
 const Requests: React.FC = () => {
@@ -28,40 +32,27 @@ const Requests: React.FC = () => {
   )
 }
 
-const Speakers: React.FC = () => {
+const Speakers = (props: any) => {
+  const { members, theme } = props;
   return (
-    <Container>
-      <ProfileWithSettingsContainer>
-        <ProfileContainer
-          imageUrl={tempImageUrl}
-          name={'Dan'}
-          handle={'red'}
-          imageHeight='48px'
-        />
-        <SettingsIconContainer>
-          <Image
-            alt="Settings icon"
-            height={'40px'}
-            src={SettingsIcon}
-          />
-        </SettingsIconContainer>
-      </ProfileWithSettingsContainer>
-      <ProfileWithSettingsContainer>
-        <ProfileContainer
-          imageUrl={tempImageUrl}
-          name={'Abramov'}
-          handle={'ux'}
-          imageHeight='48px'
-        />
-        <SettingsIconContainer>
-          <Image
-            alt="Settings icon"
-            height={'40px'}
-            src={SettingsIcon}
-          />
-        </SettingsIconContainer>
-      </ProfileWithSettingsContainer>
-    </Container>
+    <MembersContainer>
+      {members.map((item: any) => {
+        return <ProfileContainer
+        handle={item.wallet.substring(7)}
+        name={item.wallet.substring(7)}
+        imageUrl={item.image}
+        imageHeight='48px'
+        contBtn={
+          <SettingsCont>
+            <SettingsLogo color={theme.textColorPrimary} />
+          </SettingsCont>
+      }
+      // removeCallback={() => handleDeleteInvitedAdmin(item)}
+      // promoteCallback={() => handlePromoteToAdmin(item)}
+      border
+    />
+      })}
+    </MembersContainer>
   )
 }
 
@@ -141,17 +132,23 @@ const Listeners: React.FC = () => {
 
 interface ISpaceMembersModalProps {
   onClose: () => void;
+  spaceData: any;
 }
 enum MemberTabsEnum {
-  CoHost = 'Co-Host',
+  // CoHost = 'Co-Host',
   Speakers = 'Speakers',
-  Requests = 'Requests',
+  // Requests = 'Requests',
   Listeners = 'Listeners',
 }
 
-export const SpaceMembersSectionModal: React.FC<ISpaceMembersModalProps> = ({ onClose }: ISpaceMembersModalProps) => {
+export const SpaceMembersSectionModal: React.FC<ISpaceMembersModalProps> = ({ onClose, spaceData }: ISpaceMembersModalProps) => {
+
+  const [activeTab, setActiveTab] = useState<MemberTabsEnum>(MemberTabsEnum.Speakers);
+
+  const theme = useContext(ThemeContext);
 
-    const [activeTab, setActiveTab] = useState<MemberTabsEnum>(MemberTabsEnum.CoHost);
+  const coHosts = spaceData.members.filter((member: any) => member.isSpeaker) 
+  const listeners = spaceData.pendingMembers.filter((member: any) => !member.isSpeaker) 
 
     const handleTabClick = (index: MemberTabsEnum) => {
       setActiveTab(index);
@@ -178,9 +175,11 @@ export const SpaceMembersSectionModal: React.FC<ISpaceMembersModalProps> = ({ on
             <SpacesMembersContainer>
 
             <ProfileContainer
-                imageUrl={tempImageUrl}
-                name={'Arnab Chatterjee'}
-                handle={'arn4b'}
+                imageUrl={createBlockie?.(spaceData.spaceCreator.substring(7))
+                  ?.toDataURL()
+                  ?.toString()}
+                name={spaceData.spaceCreator.substring(7)}
+                handle={spaceData.spaceCreator.substring(7)}
                 imageHeight='48px'
                 tag='Host'
             />
@@ -189,12 +188,12 @@ export const SpaceMembersSectionModal: React.FC<ISpaceMembersModalProps> = ({ on
               {renderTabs()}
             </TabContainer>
 
-            {activeTab === MemberTabsEnum.CoHost && <CoHosts />}
-            {activeTab === MemberTabsEnum.Speakers && <Speakers />}
-            {activeTab === MemberTabsEnum.Requests && <Requests />}
-            {activeTab === MemberTabsEnum.Listeners && <Listeners />}
+            {/* {activeTab === MemberTabsEnum.CoHost && <CoHosts members={coHosts} />} */}
+            {activeTab === MemberTabsEnum.Speakers && <Speakers members={coHosts} theme={theme} />}
+            {/* {activeTab === MemberTabsEnum.Requests && <Requests />} */}
+            {activeTab === MemberTabsEnum.Listeners && <Speakers members={listeners} theme={theme} />}
 
-            <Button 
+            {/* <Button 
               padding={'16px'} 
               borderRadius={'8px'} 
               background={'#8B5CF6'} 
@@ -206,19 +205,20 @@ export const SpaceMembersSectionModal: React.FC<ISpaceMembersModalProps> = ({ on
               <Text fontSize="14px" fontWeight={600} color="#fff">
                 Update Members
               </Text>
-            </Button>
+            </Button> */}
 
             </SpacesMembersContainer>
         </Modal>
     )
 }
 
 /* styling */
-// const ButtonContainer = styled.div`
-//     display: flex;
-//     justify-content: space-between;
-//     width: 100%;
-// `;
+const MembersContainer = styled.div`
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+`;
+
 const SpacesMembersContainer = styled.div`
     color: black;
     display: flex;
@@ -254,3 +254,10 @@ const Tab = styled.div<{active: boolean}>`
   cursor: pointer;
   color: ${(props) => (props.active ? '#8B5CF6' : '#82828A')};
 `;
+
+const SettingsCont = styled.div`
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+`;
diff --git a/packages/uiweb/src/lib/context/spacesContext.ts b/packages/uiweb/src/lib/context/spacesContext.ts
@@ -64,6 +64,7 @@ export interface ISpaceDataContextValues {
   setSpeakerData: (key: string, value: PushAPI.video.VideoDataType) => void;
   acceptSpaceRequest: (spaceMetaData: PushAPI.video.VideoDataType) => Promise<void>;
   connectSpaceRequest: (spaceMetaData: PushAPI.video.VideoDataType) => Promise<void>;
+  broadcastRaisedHand: (spaceMetaData: PushAPI.video.VideoDataType) => Promise<void>;
   customSearch?: (query: string) => ICustomSearchResult;
 }
 
@@ -153,6 +154,9 @@ export const initialSpaceDataContextValues: ISpaceDataContextValues = {
   connectSpaceRequest: async () => {
     /** */
   },
+  broadcastRaisedHand: async () => {
+    /** */
+  },
   customSearch: undefined,
 };
 

diff --git a/packages/uiweb/src/lib/dataProviders/SpaceDataProvider.tsx b/packages/uiweb/src/lib/dataProviders/SpaceDataProvider.tsx
@@ -22,7 +22,7 @@ import {
   studioProvider,
 } from '@livepeer/react';
 import { spaceChainId } from '../components/space/helpers/account';
-import { walletToPCAIP10 } from '../helpers';
+import { walletToPCAIP10, pCAIP10ToWallet } from '../helpers';
 
 export enum FeedTabs {
   ForYou = 'For You',
@@ -158,6 +158,15 @@ export const SpacesUIProvider = ({
     });
   };
 
+  const broadcastRaisedHand = async ({
+    senderAddress,
+  }: PushAPI.video.VideoDataType) => {
+
+    await spacesObjectRef.current.broadcastRaisedHand({
+      promoteeAddress: pCAIP10ToWallet(senderAddress),
+    });
+  }
+
   const getSpaceInfo = (spaceId: string): SpaceDTO | undefined => {
     return spaceInfo[spaceId];
   };
@@ -342,6 +351,7 @@ export const SpacesUIProvider = ({
     setSpeakerData: setSpeakerDataItem,
     acceptSpaceRequest,
     connectSpaceRequest,
+    broadcastRaisedHand,
     customSearch,
   };
 
@@ -381,6 +391,7 @@ export const SpacesUIProvider = ({
     env,
     acceptSpaceRequest,
     connectSpaceRequest,
+    broadcastRaisedHand,
   });
   // usePushSpaceSocket({ account, env });
 

diff --git a/packages/uiweb/src/lib/hooks/space/useSpaceNotificationSocket.ts b/packages/uiweb/src/lib/hooks/space/useSpaceNotificationSocket.ts
@@ -15,12 +15,16 @@ export type SDKSpaceNotificationSocketHookOptions = {
   connectSpaceRequest: (
     spaceMetaData: PushAPI.video.VideoDataType
   ) => Promise<void>;
+  broadcastRaisedHand: (
+    spaceMetaData: PushAPI.video.VideoDataType
+  ) => Promise<void>;
 };
 
 export const useSpaceNotificationSocket = ({
   account,
   acceptSpaceRequest,
   connectSpaceRequest,
+  broadcastRaisedHand,
   env = ENV.PROD,
 }: SDKSpaceNotificationSocketHookOptions) => {
   const [notificationSocket, setNotificationSocket] = useState<any>(null);
@@ -74,6 +78,13 @@ export const useSpaceNotificationSocket = ({
           ) {
             acceptSpaceRequest(receivedSpaceMetaData);
           }
+
+          if (
+            callDetails?.type ===
+            PushAPI.payloads.SPACE_REQUEST_TYPE.REQUEST_TO_PROMOTE
+          ) {
+            broadcastRaisedHand(receivedSpaceMetaData);
+          }
         }
         if (status === PushAPI.VideoCallStatus.RECEIVED) {
           connectSpaceRequest(receivedSpaceMetaData);