@100mslive/roomkit-react 0.1.4-alpha.0 → 0.1.4

package/src/Prebuilt/components/LeaveRoom.jsx

@@ -1,33 +1,35 @@
-import React, { Fragment, useState } from 'react';
+import React from 'react';
 import { useParams } from 'react-router-dom';
+import { useMedia } from 'react-use';
 import { selectIsConnectedToRoom, selectPermissions, useHMSActions, useHMSStore } from '@100mslive/react-sdk';
-import { AlertTriangleIcon, ExitIcon, HangUpIcon, VerticalMenuIcon } from '@100mslive/react-icons';
+import { DesktopLeaveRoom } from './MoreSettings/SplitComponents/DesktopLeaveRoom';
+import { MwebLeaveRoom } from './MoreSettings/SplitComponents/MwebLeaveRoom';
+import { PictureInPicture } from './PIP/PIPManager';
 import { ToastManager } from './Toast/ToastManager';
-import { Button } from '../../Button';
-import { Dropdown } from '../../Dropdown';
 import { IconButton } from '../../IconButton';
-import { Box, Flex } from '../../Layout';
-import { Dialog } from '../../Modal';
-import { Text } from '../../Text';
-import { styled } from '../../Theme';
-import { Tooltip } from '../../Tooltip';
+import { config as cssConfig, styled } from '../../Theme';
 import { useHMSPrebuiltContext } from '../AppContext';
-import { DialogCheckbox, DialogContent, DialogRow } from '../primitives/DialogContent';
-import { useDropdownList } from './hooks/useDropdownList';
 import { useNavigation } from './hooks/useNavigation';
-import { isStreamingKit } from '../common/utils';
 
 export const LeaveRoom = () => {
   const navigate = useNavigation();
   const params = useParams();
-  const [open, setOpen] = useState(false);
-  const [showEndRoomModal, setShowEndRoomModal] = useState(false);
-  const [lockRoom, setLockRoom] = useState(false);
   const isConnected = useHMSStore(selectIsConnectedToRoom);
   const permissions = useHMSStore(selectPermissions);
+  const isMobile = useMedia(cssConfig.media.md);
   const hmsActions = useHMSActions();
   const { showLeave, onLeave } = useHMSPrebuiltContext();
-  useDropdownList({ open, name: 'LeaveRoom' });
+
+  const stopStream = async () => {
+    try {
+      console.log('Stopping HLS stream');
+      await hmsActions.stopHLSStreaming();
+      ToastManager.addToast({ title: 'Stopping the stream' });
+    } catch (e) {
+      console.error('Error stopping stream', e);
+      ToastManager.addToast({ title: 'Error in stopping the stream', type: 'error' });
+    }
+  };
 
   const redirectToLeavePage = () => {
     if (showLeave) {
@@ -37,6 +39,7 @@ export const LeaveRoom = () => {
         navigate('/leave/' + params.roomId);
       }
     }
+    PictureInPicture.stop().catch(() => console.error('stopping pip'));
     ToastManager.clearAllToast();
     onLeave?.();
   };
@@ -46,147 +49,39 @@ export const LeaveRoom = () => {
     redirectToLeavePage();
   };
 
-  const endRoom = () => {
-    hmsActions.endRoom(lockRoom, 'End Room');
-    redirectToLeavePage();
-  };
+  // const endRoom = () => {
+  //   hmsActions.endRoom(false, 'End Room');
+  //   redirectToLeavePage();
+  // };
 
-  const isStreamKit = isStreamingKit();
   if (!permissions || !isConnected) {
     return null;
   }
-
-  return (
-    <Fragment>
-      {permissions.endRoom ? (
-        <Flex>
-          <LeaveIconButton
-            variant="danger"
-            key="LeaveRoom"
-            data-testid="leave_room_btn"
-            css={{ borderTopRightRadius: 0, borderBottomRightRadius: 0 }}
-            onClick={leaveRoom}
-          >
-            <Tooltip title="Leave Room">
-              {!isStreamKit ? (
-                <Box>
-                  <HangUpIcon key="hangUp" />
-                </Box>
-              ) : (
-                <Flex gap={2}>
-                  <Box css={{ '@md': { transform: 'rotate(180deg)' } }}>
-                    <ExitIcon key="hangUp" />
-                  </Box>
-                  <Text css={{ '@md': { display: 'none' }, color: 'inherit' }} variant="button">
-                    Leave Studio
-                  </Text>
-                </Flex>
-              )}
-            </Tooltip>
-          </LeaveIconButton>
-          <Dropdown.Root open={open} onOpenChange={setOpen}>
-            <Dropdown.Trigger
-              asChild
-              css={{
-                '&[data-state="open"]': {
-                  bg: '$alert_error_dim',
-                },
-              }}
-            >
-              <MenuTriggerButton variant="danger" data-testid="leave_end_dropdown_trigger">
-                <VerticalMenuIcon />
-              </MenuTriggerButton>
-            </Dropdown.Trigger>
-            <Dropdown.Content css={{ p: 0 }} alignOffset={-50} sideOffset={10}>
-              <Dropdown.Item
-                css={{ w: '100%', bg: 'rgba(178, 71, 81, 0.1)' }}
-                onClick={() => {
-                  setShowEndRoomModal(true);
-                }}
-                data-testid="end_room_btn"
-              >
-                <Flex gap={4}>
-                  <Box css={{ color: '$alert_error_default' }}>
-                    <AlertTriangleIcon />
-                  </Box>
-                  <Flex direction="column" align="start">
-                    <Text variant="lg" css={{ c: '$alert_error_default' }}>
-                      End Room for All
-                    </Text>
-                    <Text variant="sm" css={{ c: '$on_surface_medium', mt: '$2' }}>
-                      Warning: You can’t undo this action
-                    </Text>
-                  </Flex>
-                </Flex>
-              </Dropdown.Item>
-              <Dropdown.Item css={{ bg: '$surface_default' }} onClick={leaveRoom} data-testid="just_leave_btn">
-                <Flex gap={4}>
-                  <Box>
-                    <ExitIcon />
-                  </Box>
-                  <Flex direction="column" align="start">
-                    <Text variant="lg">Leave {isStreamKit ? 'Studio' : 'Room'}</Text>
-                    <Text variant="sm" css={{ c: '$on_surface_medium', mt: '$2' }}>
-                      You can always rejoin later
-                    </Text>
-                  </Flex>
-                </Flex>
-              </Dropdown.Item>
-            </Dropdown.Content>
-          </Dropdown.Root>
-        </Flex>
-      ) : (
-        <LeaveIconButton onClick={leaveRoom} variant="danger" key="LeaveRoom" data-testid="leave_room_btn">
-          <Tooltip title="Leave Room">
-            <Box>
-              {isStreamKit ? (
-                <Box css={{ '@md': { transform: 'rotate(180deg)' } }}>
-                  <ExitIcon />
-                </Box>
-              ) : (
-                <HangUpIcon key="hangUp" />
-              )}
-            </Box>
-          </Tooltip>
-        </LeaveIconButton>
-      )}
-
-      <Dialog.Root
-        open={showEndRoomModal}
-        onOpenChange={value => {
-          if (!value) {
-            setLockRoom(false);
-          }
-          setShowEndRoomModal(value);
-        }}
-      >
-        <DialogContent title="End Room" Icon={HangUpIcon}>
-          <DialogCheckbox id="lockRoom" title="Disable future joins" value={lockRoom} onChange={setLockRoom} />
-          <DialogRow justify="end">
-            <Button variant="danger" onClick={endRoom} data-testid="lock_end_room">
-              End Room
-            </Button>
-          </DialogRow>
-        </DialogContent>
-      </Dialog.Root>
-    </Fragment>
+  return isMobile ? (
+    <MwebLeaveRoom leaveIconButton={LeaveIconButton} leaveRoom={leaveRoom} stopStream={stopStream} />
+  ) : (
+    <DesktopLeaveRoom
+      leaveIconButton={LeaveIconButton}
+      menuTriggerButton={MenuTriggerButton}
+      leaveRoom={leaveRoom}
+      stopStream={stopStream}
+    />
   );
 };
 
 const LeaveIconButton = styled(IconButton, {
   color: '$on_primary_high',
   h: '$14',
-  px: '$8',
+  px: '$4',
   r: '$1',
   bg: '$alert_error_default',
   '&:not([disabled]):hover': {
-    bg: '$alert_error_default',
+    bg: '$alert_error_bright',
   },
   '&:not([disabled]):active': {
     bg: '$alert_error_default',
   },
   '@md': {
-    px: '$4',
     mx: 0,
   },
 });
@@ -195,8 +90,5 @@ const MenuTriggerButton = styled(LeaveIconButton, {
   borderLeft: '1px solid $alert_error_dim',
   borderTopLeftRadius: 0,
   borderBottomLeftRadius: 0,
-  px: '$3',
-  '@md': {
-    px: '$2',
-  },
+  px: '$2',
 });

package/src/Prebuilt/components/LeaveSessionContent.jsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { AlertTriangleIcon, CrossIcon } from '@100mslive/react-icons';
+import { Button } from '../../Button';
+import { Box, Flex } from '../../Layout';
+import { Text } from '../../Text';
+
+export const LeaveSessionContent = ({ setShowLeaveRoomAlert, leaveRoom, isModal = false }) => {
+  return (
+    <Box>
+      <Flex
+        css={{
+          color: '$alert_error_default',
+          display: 'flex',
+          alignItems: 'center',
+        }}
+      >
+        <AlertTriangleIcon style={{ marginRight: '0.5rem' }} />
+        <Text variant="lg" css={{ color: 'inherit', fontWeight: '$semiBold' }}>
+          Leave
+        </Text>
+        {isModal ? null : (
+          <Box css={{ color: '$on_surface_high', ml: 'auto' }} onClick={() => setShowLeaveRoomAlert(false)}>
+            <CrossIcon />
+          </Box>
+        )}
+      </Flex>
+      <Text variant="sm" css={{ color: '$on_surface_medium', mb: '$8', mt: '$4' }}>
+        Others will continue after you leave. You can join the session again.
+      </Text>
+      <Flex align="center" justify="between" css={{ w: '100%', gap: '$8' }}>
+        <Button
+          outlined
+          variant="standard"
+          css={{ w: '100%', '@md': { display: 'none' } }}
+          onClick={() => setShowLeaveRoomAlert(false)}
+        >
+          Cancel
+        </Button>
+        <Button variant="danger" css={{ w: '100%' }} onClick={leaveRoom} id="leaveRoom" data-testid="leave_room">
+          Leave Session
+        </Button>
+      </Flex>
+    </Box>
+  );
+};

package/src/Prebuilt/components/MoreSettings/ActionTile.jsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import { Flex } from '../../../Layout';
+import { Text } from '../../../Text';
+import { styled } from '../../../Theme';
+
+const ActionTileRoot = ({ active, disabled = false, children, onClick, ...props }) => (
+  <Flex
+    {...props}
+    css={{
+      flexDirection: 'column',
+      alignItems: 'center',
+      p: '$4 $2',
+      position: 'relative',
+      bg: active ? '$surface_bright' : '',
+      color: disabled ? '$on_surface_low' : '$on_surface_high',
+      gap: '$4',
+      r: '$1',
+      '&:hover': {
+        bg: '$surface_bright',
+      },
+    }}
+    onClick={() => {
+      if (!disabled) {
+        onClick();
+      }
+    }}
+  >
+    {children}
+  </Flex>
+);
+
+const ActionTileCount = styled(Text, {
+  position: 'absolute',
+  top: 0,
+  right: 0,
+  fontWeight: '$semiBold',
+  color: '$on_surface_high',
+  p: '$1 $2',
+  bg: '$surface_bright',
+  r: '$round',
+  fontSize: '$tiny !important',
+});
+
+const ActionTileTitle = styled(Text, {
+  fontWeight: '$semiBold',
+  color: 'inherit',
+  textAlign: 'center',
+  fontSize: '$xs !important',
+});
+
+export const ActionTile = {
+  Root: ActionTileRoot,
+  Title: ActionTileTitle,
+  Count: ActionTileCount,
+};

package/src/Prebuilt/components/MoreSettings/ChangeNameContent.jsx

@@ -0,0 +1,96 @@
+import React from 'react';
+import { ChevronLeftIcon, CrossIcon } from '@100mslive/react-icons';
+import { Button } from '../../../Button';
+import { Input } from '../../../Input';
+import { Box, Flex } from '../../../Layout';
+import { Text } from '../../../Text';
+
+export const ChangeNameContent = ({
+  changeName,
+  setCurrentName,
+  currentName,
+  localPeerName,
+  isMobile,
+  onExit,
+  onBackClick,
+}) => {
+  return (
+    <form
+      onSubmit={async e => {
+        e.preventDefault();
+        await changeName();
+      }}
+    >
+      <Text
+        variant={isMobile ? 'md' : 'lg'}
+        css={{
+          color: '$on_surface_high',
+          fontWeight: '$semiBold',
+          display: 'flex',
+          borderBottom: isMobile ? '1px solid $border_default' : '',
+          pb: '$6',
+          mb: '$8',
+          px: isMobile ? '$8' : '',
+        }}
+      >
+        {isMobile ? <ChevronLeftIcon onClick={onBackClick} style={{ marginRight: '0.5rem' }} /> : null}
+        Change Name
+        <Box css={{ color: 'inherit', ml: 'auto' }} onClick={onExit}>
+          <CrossIcon />
+        </Box>
+      </Text>
+      <Flex justify="center" align="center" css={{ my: '$8', w: '100%', px: isMobile ? '$8' : '' }}>
+        <Input
+          css={{ width: '100%', bg: '$surface_default' }}
+          value={currentName}
+          onChange={e => {
+            setCurrentName(e.target.value);
+          }}
+          autoComplete="name"
+          required
+          data-testid="change_name_field"
+          onKeyDown={async e => {
+            if (e.key === 'Enter' && currentName.trim().length > 0 && currentName !== localPeerName) {
+              e.preventDefault();
+              changeName();
+            }
+          }}
+        />
+      </Flex>
+
+      <Flex
+        justify="between"
+        align="center"
+        css={{
+          width: '100%',
+          gap: '$md',
+          mt: '$10',
+          px: isMobile ? '$4' : '',
+        }}
+      >
+        {isMobile ? null : (
+          <Button
+            variant="standard"
+            css={{ w: '100%' }}
+            outlined
+            type="submit"
+            disabled={!localPeerName}
+            onClick={onExit}
+          >
+            Cancel
+          </Button>
+        )}
+
+        <Button
+          variant="primary"
+          css={{ width: '100%' }}
+          type="submit"
+          disabled={!currentName.trim() || currentName.trim() === localPeerName}
+          data-testid="popup_change_btn"
+        >
+          Change
+        </Button>
+      </Flex>
+    </form>
+  );
+};

package/src/Prebuilt/components/MoreSettings/ChangeNameModal.jsx

@@ -1,14 +1,18 @@
 import React, { useState } from 'react';
+import { useMedia } from 'react-use';
 import { selectLocalPeerName, useHMSActions, useHMSStore } from '@100mslive/react-sdk';
-import { Box, Button, Dialog, Flex, Input, Text } from '../../../';
+import { config as cssConfig, Dialog } from '../../../';
+import { Sheet } from '../../../Sheet';
 import { ToastManager } from '../Toast/ToastManager';
+import { ChangeNameContent } from './ChangeNameContent';
 import { UserPreferencesKeys, useUserPreferences } from '../hooks/useUserPreferences';
 
-export const ChangeNameModal = ({ onOpenChange }) => {
+export const ChangeNameModal = ({ onOpenChange, openParentSheet = null }) => {
   const [previewPreference, setPreviewPreference] = useUserPreferences(UserPreferencesKeys.PREVIEW);
   const hmsActions = useHMSActions();
   const localPeerName = useHMSStore(selectLocalPeerName);
   const [currentName, setCurrentName] = useState(localPeerName);
+  const isMobile = useMedia(cssConfig.media.md);
 
   const changeName = async () => {
     const name = currentName.trim();
@@ -29,62 +33,35 @@ export const ChangeNameModal = ({ onOpenChange }) => {
     }
   };
 
+  const props = {
+    changeName,
+    setCurrentName,
+    currentName,
+    localPeerName,
+    isMobile,
+    onExit: () => onOpenChange(false),
+    onBackClick: () => {
+      onOpenChange(false);
+      openParentSheet();
+    },
+  };
+
+  if (isMobile) {
+    return (
+      <Sheet.Root defaultOpen onOpenChange={onOpenChange}>
+        <Sheet.Content css={{ bg: '$surface_dim', py: '$8', px: 0 }}>
+          <ChangeNameContent {...props} />
+        </Sheet.Content>
+      </Sheet.Root>
+    );
+  }
+
   return (
     <Dialog.Root defaultOpen onOpenChange={onOpenChange}>
       <Dialog.Portal>
         <Dialog.Overlay />
-        <Dialog.Content css={{ width: 'min(400px,80%)', p: '$10' }}>
-          <Dialog.Title css={{ p: '0 $4' }}>
-            <Text variant="h6"> Change Name</Text>
-          </Dialog.Title>
-          <form
-            onSubmit={async e => {
-              e.preventDefault();
-              await changeName();
-            }}
-          >
-            <Flex justify="center" align="center" css={{ my: '$8', w: '100%' }}>
-              <Input
-                css={{ width: '100%' }}
-                value={currentName}
-                onChange={e => {
-                  setCurrentName(e.target.value);
-                }}
-                autoComplete="name"
-                required
-                data-testid="change_name_field"
-              />
-            </Flex>
-
-            <Flex
-              justify="between"
-              align="center"
-              css={{
-                width: '100%',
-                gap: '$md',
-                mt: '$10',
-              }}
-            >
-              <Box css={{ w: '50%' }}>
-                <Dialog.Close css={{ w: '100%' }}>
-                  <Button variant="standard" css={{ w: '100%' }} outlined type="submit" disabled={!localPeerName}>
-                    Cancel
-                  </Button>
-                </Dialog.Close>
-              </Box>
-              <Box css={{ w: '50%' }}>
-                <Button
-                  variant="primary"
-                  css={{ width: '100%' }}
-                  type="submit"
-                  disabled={!currentName.trim() || currentName.trim() === localPeerName}
-                  data-testid="popup_change_btn"
-                >
-                  Change
-                </Button>
-              </Box>
-            </Flex>
-          </form>
+        <Dialog.Content css={{ bg: '$surface_dim', width: 'min(400px,80%)', p: '$10' }}>
+          <ChangeNameContent {...props} />
         </Dialog.Content>
       </Dialog.Portal>
     </Dialog.Root>

package/src/Prebuilt/components/MoreSettings/EmbedUrl.jsx

@@ -1,7 +1,6 @@
 import React, { useState } from 'react';
-import { ViewIcon } from '@100mslive/react-icons';
-import { Button, Dialog, Dropdown, Text } from '../../../';
-import { DialogContent, DialogInput, DialogRow } from '../../primitives/DialogContent';
+import { LinkIcon } from '@100mslive/react-icons';
+import { Button, Dialog, Dropdown, Flex, Input, Text } from '../../../';
 import { useSetAppDataByKey } from '../AppData/useUISettings';
 import { APP_DATA } from '../../common/constants';
 
@@ -17,7 +16,7 @@ export const EmbedUrl = ({ setShowOpenUrl }) => {
       }}
       data-testid="embed_url_btn"
     >
-      <ViewIcon />
+      <LinkIcon />
       <Text variant="sm" css={{ ml: '$4' }}>
         Embed URL
       </Text>
@@ -29,78 +28,54 @@ export function EmbedUrlModal({ onOpenChange }) {
   const [embedConfig, setEmbedConfig] = useSetAppDataByKey(APP_DATA.embedConfig);
   const [url, setUrl] = useState(embedConfig?.url || '');
 
-  const isAnythingEmbedded = !!embedConfig?.url;
-  const isModifying = isAnythingEmbedded && url && url !== embedConfig.url;
-
   return (
     <Dialog.Root defaultOpen onOpenChange={onOpenChange}>
-      <DialogContent title="Embed URL" Icon={ViewIcon}>
-        <DialogInput title="URL" value={url} onChange={setUrl} placeholder="https://www.tldraw.com/" type="url" />
-        <DialogRow>
-          <Text>
-            Embed a url and share with everyone in the room. Ensure that you're sharing the current tab when the prompt
-            opens. Note that not all websites support being embedded.
+      <Dialog.Portal>
+        <Dialog.Overlay />
+        <Dialog.Content css={{ w: 'min(420px, 90%)', p: '$8', bg: '$surface_dim' }}>
+          <Dialog.Title
+            css={{
+              borderBottom: '1px solid $border_default',
+              color: '$on_surface_high',
+              display: 'flex',
+              alignItems: 'center',
+            }}
+          >
+            Embed URL
+          </Dialog.Title>
+          <Text variant="sm" css={{ color: '$on_surface_medium', mt: '$4', mb: '$8' }}>
+            Ensure that you're sharing the current tab when the prompt opens. Note that not all websites support being
+            embedded.
+          </Text>
+          <Text variant="sm" css={{ color: '$on_surface_high' }}>
+            URL
           </Text>
-        </DialogRow>
-        <DialogRow justify="end">
-          {isAnythingEmbedded ? (
-            <>
-              <Button
-                variant="primary"
-                type="submit"
-                disabled={!isModifying}
-                onClick={() => {
-                  setEmbedConfig({ url, shareScreen: embedConfig.shareScreen });
-                  onOpenChange(false);
-                }}
-                data-testid="embed_url_btn"
-                css={{ mr: '$4' }}
-              >
-                Update Embed
-              </Button>
-              <Button
-                variant="danger"
-                type="submit"
-                onClick={() => {
-                  setEmbedConfig({ url: '' });
-                  onOpenChange(false);
-                }}
-                data-testid="embed_url_btn"
-              >
-                Stop Embed
-              </Button>
-            </>
-          ) : (
-            <>
-              <Button
-                variant="primary"
-                type="submit"
-                disabled={!url.trim()}
-                onClick={() => {
-                  setEmbedConfig({ url });
-                  onOpenChange(false);
-                }}
-                data-testid="embed_url_btn"
-                css={{ mr: '$4' }}
-              >
-                Just Embed
-              </Button>
-              <Button
-                variant="primary"
-                type="submit"
-                disabled={!url.trim()}
-                onClick={() => {
-                  setEmbedConfig({ url, shareScreen: true });
-                  onOpenChange(false);
-                }}
-                data-testid="embed_url_btn"
-              >
-                Embed and Share
-              </Button>
-            </>
-          )}
-        </DialogRow>
-      </DialogContent>
+          <Input
+            css={{ w: '100%', mt: '$4' }}
+            placeholder="Enter your URL"
+            value={url}
+            onChange={e => setUrl(e.target.value)}
+            type="url"
+          />
+          <Flex justify="between" css={{ w: '100%', gap: '$8', mt: '$8' }}>
+            <Button outlined variant="standard" css={{ w: '100%' }} onClick={() => onOpenChange(false)}>
+              Cancel
+            </Button>
+            <Button
+              css={{ w: '100%' }}
+              type="submit"
+              disabled={!url.toString().trim()}
+              onClick={() => {
+                setEmbedConfig({ url, shareScreen: true });
+                onOpenChange(false);
+              }}
+              data-testid="embed_url_btn"
+            >
+              Embed and Share
+            </Button>
+          </Flex>
+        </Dialog.Content>
+      </Dialog.Portal>
     </Dialog.Root>
   );
 }