push-protocol · 0xNilesh · Jul 18, 2023 · Jul 11, 2023 · Jul 11, 2023 · Jul 11, 2023
diff --git a/packages/uiweb/src/lib/components/space/SpaceWidget/EndWidgetContent.tsx b/packages/uiweb/src/lib/components/space/SpaceWidget/EndWidgetContent.tsx
@@ -1,38 +1,56 @@
-import { Button, Container, Image, Text } from '../../../config';
+import React, { MouseEventHandler } from 'react';
+import { Item, Container, Image, Text } from '../../../config';
 import SpaceEnded from '../../../icons/SpaceEnded.svg';
 import { SpaceInfoText } from './ScheduledWidgetContent';
 
 interface IEndWidgetContentProps {
-  tempProp?: string;
+  onClose: MouseEventHandler;
+  toggleWidgetVisibility: () => void;
 }
 
-export const EndWidgetContent = (options: IEndWidgetContentProps) => {
-  <Container
-    display={'flex'}
-    height={'100%'}
-    alignItems={'center'}
-    flexDirection={'column'}
-    justifyContent={'center'}
-    gap={'15px'}
-    padding={'0 24px'}
-  >
-    <Image
-      width={'41px'}
-      height={'41px'}
-      src={SpaceEnded}
-      alt="End Icon"
-    ></Image>
-    <SpaceInfoText>This Space has ended</SpaceInfoText>
-    <Button
-      padding={'9px 34px'}
-      borderRadius={'8px'}
-      background={'#8B5CF6'}
-      border={'1px solid #703BEB'}
-      cursor={'pointer'}
+export const EndWidgetContent: React.FC<IEndWidgetContentProps> = ({
+  onClose,
+  toggleWidgetVisibility,
+}) => {
+  const handleCloseWidget: React.MouseEventHandler<HTMLDivElement> = (
+    event
+  ) => {
+    // Call for hiding the widget
+    toggleWidgetVisibility();
+
+    // Call for running onClose handler from prop
+    onClose(event);
+  };
+
+  return (
+    <Container
+      display={'flex'}
+      height={'100%'}
+      alignItems={'center'}
+      flexDirection={'column'}
+      justifyContent={'center'}
+      gap={'15px'}
+      padding={'0 24px'}
     >
-      <Text fontSize="14px" fontWeight={600} color="#fff">
-        Close
-      </Text>
-    </Button>
-  </Container>;
+      <Image
+        width={'41px'}
+        height={'41px'}
+        src={SpaceEnded}
+        alt="End Icon"
+      ></Image>
+      <SpaceInfoText>This Space has ended</SpaceInfoText>
+      <Item
+        padding={'9px 34px'}
+        borderRadius={'8px'}
+        background={'#8B5CF6'}
+        border={'1px solid #703BEB'}
+        cursor={'pointer'}
+        onClick={handleCloseWidget}
+      >
+        <Text fontSize="14px" fontWeight={600} color="#fff">
+          Close
+        </Text>
+      </Item>
+    </Container>
+  );
 };
diff --git a/packages/uiweb/src/lib/components/space/SpaceWidget/LiveWidgetContent.tsx b/packages/uiweb/src/lib/components/space/SpaceWidget/LiveWidgetContent.tsx
@@ -19,22 +19,24 @@ import MuteIcon from '../../../icons/Muted.svg';
 import ShareIcon from '../../../icons/Share.svg';
 import MembersIcon from '../../../icons/Members.svg';
 import { useSpaceData } from '../../../hooks';
-
+import { SpaceStatus } from './WidgetContent';
 
 interface LiveWidgetContentProps {
   spaceData?: SpaceDTO;
   // temp props only for testing demo purpose for now
   isHost?: boolean;
+  setSpaceStatusState: React.Dispatch<React.SetStateAction<any>>;
 }
 
 export const LiveWidgetContent: React.FC<LiveWidgetContentProps> = ({
   spaceData,
   isHost,
+  setSpaceStatusState,
 }) => {
   const [showMembersModal, setShowMembersModal] = useState<boolean>(false);
   const [playBackUrl, setPlayBackUrl] = useState<string>('');
   const [isLoading, setIsLoading] = useState<boolean>(false);
-  const [isDDOpen, setIsDDOpen] = useState(false)
+  const [isDDOpen, setIsDDOpen] = useState(false);
 
   const dropdownRef = useRef<HTMLDivElement>(null);
 
@@ -62,8 +64,8 @@ export const LiveWidgetContent: React.FC<LiveWidgetContentProps> = ({
   };
 
   const handleDDState = () => {
-      setIsDDOpen(!isDDOpen)
-  }
+    setIsDDOpen(!isDDOpen);
+  };
 
   const handleJoinSpace = async () => {
     if (!spaceData) {
@@ -87,6 +89,7 @@ export const LiveWidgetContent: React.FC<LiveWidgetContentProps> = ({
     await spacesObjectRef?.current?.stop?.();
     spacesObjectRef.current = null;
     setSpaceObjectData?.(PushAPI.space.initSpaceData);
+    setSpaceStatusState?.(SpaceStatus.Ended);
     window.alert('Space ended');
   };
 
@@ -161,7 +164,9 @@ export const LiveWidgetContent: React.FC<LiveWidgetContentProps> = ({
                 isHost={isHost}
                 isSpeaker={isSpeaker}
                 wallet={profile?.address}
-                image={createBlockie?.(profile?.address)?.toDataURL()?.toString()}
+                image={createBlockie?.(profile?.address)
+                  ?.toDataURL()
+                  ?.toString()}
                 stream={profile?.stream}
               />
             ))}
@@ -176,15 +181,11 @@ export const LiveWidgetContent: React.FC<LiveWidgetContentProps> = ({
                 image={profile?.image}
               />
 
-            {
-              isDDOpen ?
-              <DropDown theme={theme} ref={dropdownRef} isDDOpen={isDDOpen}>
-                  <DDItem>
-                      Invite to Speak
-                  </DDItem>
-              </DropDown>
-              : null
-            }
+              {isDDOpen ? (
+                <DropDown theme={theme} ref={dropdownRef} isDDOpen={isDDOpen}>
+                  <DDItem>Invite to Speak</DDItem>
+                </DropDown>
+              ) : null}
             </div>
           ))}
       </Item>
@@ -257,11 +258,7 @@ export const LiveWidgetContent: React.FC<LiveWidgetContentProps> = ({
             </Item>
             {isListener && !isHost && playBackUrl.length > 0 && (
               <PeerPlayerDiv>
-                <Player
-                  title="spaceAudio"
-                  playbackId={playBackUrl}
-                  autoPlay
-                />
+                <Player title="spaceAudio" playbackId={playBackUrl} autoPlay />
               </PeerPlayerDiv>
             )}
           </Item>
@@ -277,7 +274,13 @@ export const LiveWidgetContent: React.FC<LiveWidgetContentProps> = ({
             }
             onClick={handleJoinSpace}
           >
-            <Text color="white" fontSize={'16px'} fontWeight={'600'} display='flex' justifyContent='center'>
+            <Text
+              color="white"
+              fontSize={'16px'}
+              fontWeight={'600'}
+              display="flex"
+              justifyContent="center"
+            >
               {isLoading ? <CircularProgressSpinner /> : 'Join this Space'}
             </Text>
           </Button>
@@ -292,29 +295,29 @@ export const LiveWidgetContent: React.FC<LiveWidgetContentProps> = ({
   );
 };
 
-const DropDown = styled.div<{ theme?: any, isDDOpen: any }>`
-    position: absolute;
-    top: 0px;
-    right: 0px;
+const DropDown = styled.div<{ theme?: any; isDDOpen: any }>`
+  position: absolute;
+  top: 0px;
+  right: 0px;
 
-    display: flex;
-    flex-direction: column;
-    gap: 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
 
-    justify-content: center;
-    align-items: start;
+  justify-content: center;
+  align-items: start;
 
-    animation: ${({ isDDOpen }) => (isDDOpen ? fadeIn : fadeOut)} 0.2s ease-in-out;
-    padding: 16px;
-    background: ${(props => props.theme.bgColorPrimary)};
-    color: ${(props => props.theme.textColorPrimary)};
-    border-radius: 16px;
+  animation: ${({ isDDOpen }) => (isDDOpen ? fadeIn : fadeOut)} 0.2s ease-in-out;
+  padding: 16px;
+  background: ${(props) => props.theme.bgColorPrimary};
+  color: ${(props) => props.theme.textColorPrimary};
+  border-radius: 16px;
 
-    border: 1px solid ${(props => props.theme.borderColor)};
+  border: 1px solid ${(props) => props.theme.borderColor};
 `;
 
 const DDItem = styled.div`
-    cursor: pointer;
+  cursor: pointer;
 `;
 
 const fadeIn = keyframes`

diff --git a/packages/uiweb/src/lib/components/space/SpaceWidget/ScheduledWidgetContent.tsx b/packages/uiweb/src/lib/components/space/SpaceWidget/ScheduledWidgetContent.tsx
@@ -3,7 +3,7 @@ import styled from 'styled-components';
 
 import { Button, Container, Image, Item, Text } from '../../../config';
 import { formatDate } from '../../../helpers';
-import CircularProgressSpinner from '../../loader/loader'
+import CircularProgressSpinner from '../../loader/loader';
 
 import SpacesIcon from '../../../icons/Spaces.svg';
 import TwitterIcon from '../../../icons/twitterVector.svg';
@@ -13,6 +13,7 @@ import { SpaceDTO } from '@pushprotocol/restapi';
 import { useSpaceData } from '../../../hooks';
 import { generateLensterShareURL } from '../helpers/share';
 import { ShareConfig } from '../exportedTypes';
+import { SpaceStatus } from './WidgetContent';
 
 enum ShareOptions {
   Twitter = 'Twitter',
@@ -30,16 +31,16 @@ interface ScheduledWidgetContentProps {
   isHost?: boolean;
   isTimeToStartSpace?: boolean;
   isMember?: boolean;
-  isSpaceLive: boolean;
-  setIsSpaceLive: React.Dispatch<React.SetStateAction<boolean>>;
+  spaceStatusState: any;
+  setSpaceStatusState: React.Dispatch<React.SetStateAction<any>>;
 }
 export const ScheduledWidgetContent: React.FC<ScheduledWidgetContentProps> = ({
   spaceData,
   share,
   isHost,
   isMember,
-  isSpaceLive,
-  setIsSpaceLive,
+  spaceStatusState,
+  setSpaceStatusState,
 }: ScheduledWidgetContentProps) => {
   const { spacesObjectRef, initSpaceObject, spaceObjectData } = useSpaceData();
 
@@ -48,7 +49,8 @@ export const ScheduledWidgetContent: React.FC<ScheduledWidgetContentProps> = ({
   const [isStarted, setIsStarted] = useState<boolean>(false);
   const [isLoading, setIsLoading] = useState<boolean>(false);
 
-  const { shareUrl, shareOptions = ["Twitter", "Lenster", "CopyShareUrl"] } = share || {};
+  const { shareUrl, shareOptions = ['Twitter', 'Lenster', 'CopyShareUrl'] } =
+    share || {};
 
   const handleStartSpace = async () => {
     setIsLoading(!isLoading);
@@ -83,11 +85,11 @@ export const ScheduledWidgetContent: React.FC<ScheduledWidgetContentProps> = ({
 
     const lensterShareUrl = generateLensterShareURL({
       text: lensterShareText,
-      url
+      url,
     });
 
     window.open(lensterShareUrl, '_blank');
-  }
+  };
 
   const handleCopyLink = async () => {
     try {
@@ -139,13 +141,13 @@ export const ScheduledWidgetContent: React.FC<ScheduledWidgetContentProps> = ({
 
   useEffect(() => {
     async function startSpace() {
-      if (isSpaceLive) return;
+      if (spaceStatusState === SpaceStatus.Live) return;
       if (!spaceObjectData?.connectionData?.local?.stream || !isStarted) return;
       await spacesObjectRef?.current?.start?.({
-        livepeerApiKey: '2638ace1-0a3a-4853-b600-016e6125b9bc',
+        livepeerApiKey: '6d29b32d-78d4-4a5c-9848-a4a0669eb530',
       });
       setIsStarted(false);
-      setIsSpaceLive && setIsSpaceLive(true);
+      setSpaceStatusState && setSpaceStatusState(SpaceStatus.Live);
     }
     startSpace();
   }, [isStarted]);
@@ -230,19 +232,12 @@ export const ScheduledWidgetContent: React.FC<ScheduledWidgetContentProps> = ({
             const { icon, alt } = getShareOptionDetails(shareOption);
             return (
               <ShareLinkItem key={shareOption}>
-                <ShareLinkButton
-                  onClick={() => handleShareAction(shareOption)}
-                >
-                  <Image
-                    src={icon}
-                    alt={alt}
-                    width={'25px'}
-                    height={'22px'}
-                  />
+                <ShareLinkButton onClick={() => handleShareAction(shareOption)}>
+                  <Image src={icon} alt={alt} width={'25px'} height={'22px'} />
                 </ShareLinkButton>
                 <Text fontSize={'12px'} fontWeight={600}>
-              {ShareOptions[shareOption]}
-            </Text>
+                  {ShareOptions[shareOption]}
+                </Text>
               </ShareLinkItem>
             );
           })}

diff --git a/packages/uiweb/src/lib/components/space/SpaceWidget/SpaceWidget.tsx b/packages/uiweb/src/lib/components/space/SpaceWidget/SpaceWidget.tsx
@@ -36,7 +36,8 @@ export const SpaceWidget: React.FC<ISpaceWidgetProps> = (
   const { getSpaceInfo, setSpaceInfo } = useSpaceData();
   const [spaceData, setSpaceData] = useState<SpaceDTO | undefined>();
 
-  const isLive = spaceData?.status === 'ACTIVE';
+  const spaceStatus = spaceData && spaceData?.status;
+  // console.log('isLiveInWidget', isLive)
 
   useEffect(() => {
     if (!spaceId) {
@@ -94,18 +95,20 @@ export const SpaceWidget: React.FC<ISpaceWidgetProps> = (
         setIsMinimized={setIsMinimized}
         toggleWidgetVisibility={toggleWidgetVisibility}
         isHost={isHost}
-        isLive={isLive}
+        spaceStatus={spaceStatus}
         spaceData={spaceData}
       />
       <WidgetContent
+        onClose={onClose}
         account={account}
         spaceData={spaceData}
         share={share}
         isHost={isHost}
-        isLive={isLive}
+        spaceStatus={spaceStatus}
         isMember={isMember}
         isTimeToStartSpace={isTimeToStartSpace}
         isMinimized={isMinimized}
+        toggleWidgetVisibility={toggleWidgetVisibility}
       />
     </Container>
   );