feat: sync webapp

100mslive · Aug 24, 2023 · 95f0fe4 · 95f0fe4 · vercel · Aug 24, 2023
2 parents 1f240ec + 93770c8
commit 95f0fe4
Show file tree

Hide file tree

Showing 16 changed files with 495 additions and 765 deletions.
diff --git a/package.json b/package.json
@@ -9,17 +9,16 @@
     "src"
   ],
   "dependencies": {
-    "@100mslive/hls-player": "0.1.11",
-    "@100mslive/hms-virtual-background": "1.11.11",
-    "@100mslive/react-icons": "0.8.11",
-    "@100mslive/react-sdk": "0.8.11",
-    "@100mslive/roomkit-react": "0.1.2",
+    "@100mslive/hls-player": "0.1.13",
+    "@100mslive/hms-virtual-background": "1.11.13",
+    "@100mslive/react-icons": "0.8.13",
+    "@100mslive/react-sdk": "0.8.13",
+    "@100mslive/roomkit-react": "0.1.4",
     "@emoji-mart/data": "^1.0.6",
     "@emoji-mart/react": "^1.0.1",
     "@tldraw/tldraw": "^1.18.4",
     "emoji-mart": "^5.2.2",
     "eventemitter2": "^6.4.7",
-    "hls.js": "^1.3.0",
     "js-confetti": "^0.10.2",
     "mobx": "^6.3.12",
     "pusher-js": "^7.0.3",

diff --git a/src/App.js b/src/App.js
@@ -87,7 +87,7 @@ export function EdtechComponent({
           colors: {
             ...palette[theme],
             primary_default: color,
-            primary_dark: shadeColor(color, -30),
+            primary_dim: shadeColor(color, -30),
             primary_bright: shadeColor(color, 30),
             primary_disabled: shadeColor(color, 10),
           },

diff --git a/src/components/AppData/useUISettings.js b/src/components/AppData/useUISettings.js
@@ -2,12 +2,14 @@ import { useCallback, useMemo } from "react";
 import {
   selectAppData,
   selectAppDataByPath,
+  selectAudioTrackByPeerID,
   selectIsAllowedToPublish,
   selectLocalPeerRoleName,
   selectPermissions,
   selectPolls,
   selectSessionStore,
   selectTrackByID,
+  selectVideoTrackByPeerID,
   useHMSActions,
   useHMSStore,
   useHMSVanillaStore,
@@ -112,10 +114,20 @@ export const useResetEmbedConfig = () => {
 };
 export const usePinnedTrack = () => {
   const pinnedTrackId = useHMSStore(selectAppData(APP_DATA.pinnedTrackId));
-  const spotlightTrackId = useHMSStore(
+  const spotlightPeerId = useHMSStore(
     selectSessionStore(SESSION_STORE_KEY.SPOTLIGHT)
   );
-  return useHMSStore(selectTrackByID(pinnedTrackId || spotlightTrackId));
+  const spotlightVideoTrackId = useHMSStore(
+    selectVideoTrackByPeerID(spotlightPeerId)
+  )?.id;
+  const spotlightAudioTrackId = useHMSStore(
+    selectAudioTrackByPeerID(spotlightPeerId)
+  )?.id;
+  return useHMSStore(
+    selectTrackByID(
+      pinnedTrackId || spotlightVideoTrackId || spotlightAudioTrackId
+    )
+  );
 };
 
 export const useSubscribedNotifications = notificationKey => {

diff --git a/src/components/Chat/ChatBody.jsx b/src/components/Chat/ChatBody.jsx
@@ -162,9 +162,9 @@ const ChatActions = ({ onPin }) => {
       <Dropdown.Trigger asChild>
         <IconButton>
           <Tooltip title="More options">
-            <Box>
+            <Flex>
               <HorizontalMenuIcon />
-            </Box>
+            </Flex>
           </Tooltip>
         </IconButton>
       </Dropdown.Trigger>

diff --git a/src/components/Chat/ChatHeader.jsx b/src/components/Chat/ChatHeader.jsx
@@ -61,7 +61,7 @@ export const ChatHeader = React.memo(
               w: "$64",
               overflow: "hidden",
               maxHeight: "unset",
-              backgroundColor: "$surface_default",
+              backgroundColor: "$surface_dim",
             }}
             align="start"
             sideOffset={8}

diff --git a/src/components/Chat/ChatSelector.jsx b/src/components/Chat/ChatSelector.jsx
@@ -164,7 +164,10 @@ const VirtualizedSelectItemList = ({
   }, [onSelect, selectedRole, selectedPeerId, roles, filteredPeers]);
 
   return (
-    <Dropdown.Group ref={ref} css={{ height: "$64", overflowY: "auto" }}>
+    <Dropdown.Group
+      ref={ref}
+      css={{ height: "$64", overflowY: "auto", bg: "$surface_dim" }}
+    >
       <FixedSizeList
         itemSize={52}
         itemCount={listItems.length}
@@ -186,7 +189,7 @@ export const ChatSelector = ({ role, peerId, onSelect }) => {
   const [search, setSearch] = useState("");
 
   return (
-    <Fragment>
+    <>
       {peers.length > 0 && (
         <Box css={{ px: "$8" }}>
           <ParticipantSearch
@@ -202,6 +205,6 @@ export const ChatSelector = ({ role, peerId, onSelect }) => {
         peers={peers}
         searchValue={search}
       />
-    </Fragment>
+    </>
   );
 };
diff --git a/src/components/Header/ParticipantFilter.js b/src/components/Header/ParticipantFilter.js
@@ -64,7 +64,7 @@ export const ParticipantFilter = ({
           maxHeight: "$96",
           boxShadow: "$md",
           w: "$48",
-          backgroundColor: "$surface_default",
+          backgroundColor: "$surface_dim",
         }}
       >
         <Item
@@ -99,7 +99,7 @@ export const ParticipantFilter = ({
   );
 };
 
-const Item = ({ selected, title, onSelection, value, icon }) => {
+const Item = ({ selected, title, onSelection, value, icon = null }) => {
   return (
     <Dropdown.Item
       css={{ "&:hover": { backgroundColor: "$surface_bright" } }}
@@ -109,7 +109,7 @@ const Item = ({ selected, title, onSelection, value, icon }) => {
       }}
     >
       <Flex align="center" css={{ flex: "1 1 0" }}>
-        {icon && <Text>{icon}</Text>}
+        {icon}
         <Text css={{ ml: "$4" }}>{title}</Text>
       </Flex>
       {selected && (

diff --git a/src/components/Header/ParticipantList.jsx b/src/components/Header/ParticipantList.jsx
@@ -34,6 +34,7 @@ import {
 import IconButton from "../../IconButton";
 import { ConnectionIndicator } from "../Connection/ConnectionIndicator";
 import { RoleChangeModal } from "../RoleChangeModal";
+import { ToastManager } from "../Toast/ToastManager";
 import { ParticipantFilter } from "./ParticipantFilter";
 import {
   useIsSidepaneTypeOpen,
@@ -266,7 +267,11 @@ const ParticipantMoreActions = ({ onRoleChange, peerId }) => {
   const actions = useHMSActions();
   const [open, setOpen] = useState(false);
   return (
-    <Dropdown.Root open={open} onOpenChange={value => setOpen(value)}>
+    <Dropdown.Root
+      open={open}
+      onOpenChange={value => setOpen(value)}
+      modal={false}
+    >
       <Dropdown.Trigger
         asChild
         data-testid="participant_more_actions"
@@ -283,7 +288,7 @@ const ParticipantMoreActions = ({ onRoleChange, peerId }) => {
           sideOffset={8}
           css={{
             w: "$64",
-            backgroundColor: "$surface_default",
+            backgroundColor: "$surface_dim",
           }}
         >
           {canChangeRole && (
@@ -298,18 +303,20 @@ const ParticipantMoreActions = ({ onRoleChange, peerId }) => {
           <ParticipantVolume peerId={peerId} />
           {!isLocal && canRemoveOthers && (
             <Dropdown.Item
+              css={{ color: "$alert_error_default" }}
               onClick={async () => {
                 try {
                   await actions.removePeer(peerId, "");
                 } catch (error) {
-                  // TODO: Toast here
+                  ToastManager.addToast({
+                    title: error.message,
+                    variant: "error",
+                  });
                 }
               }}
             >
               <RemoveUserIcon />
-              <Text css={{ ml: "$4", color: "$alert_error_default" }}>
-                Remove Participant
-              </Text>
+              <Text css={{ ml: "$4", c: "inherit" }}>Remove Participant</Text>
             </Dropdown.Item>
           )}
         </Dropdown.Content>
@@ -373,8 +380,8 @@ export const ParticipantSearch = ({ onSearch, placeholder }) => {
       </Box>
       <Input
         type="text"
-        placeholder={placeholder || "Find what you are looking for"}
-        css={{ w: "100%", pl: "$14" }}
+        placeholder={placeholder || "Search among participants"}
+        css={{ w: "100%", pl: "$14", bg: "$surface_bright" }}
         value={value}
         onKeyDown={event => {
           event.stopPropagation();

diff --git a/src/components/LeaveRoom.jsx b/src/components/LeaveRoom.jsx
@@ -99,7 +99,7 @@ export const LeaveRoom = () => {
               )}
             </Tooltip>
           </LeaveIconButton>
-          <Dropdown.Root open={open} onOpenChange={setOpen}>
+          <Dropdown.Root open={open} onOpenChange={setOpen} modal={false}>
             <Dropdown.Trigger
               asChild
               css={{
@@ -201,6 +201,7 @@ export const LeaveRoom = () => {
           }
           setShowEndRoomModal(value);
         }}
+        modal={false}
       >
         <DialogContent title="End Room" Icon={HangUpIcon}>
           <DialogCheckbox

diff --git a/src/components/MoreSettings/ChangeSelfRole.jsx b/src/components/MoreSettings/ChangeSelfRole.jsx
@@ -39,7 +39,10 @@ export const ChangeSelfRole = ({ onClick }) => {
     </Dropdown.Item>
   ) : (
     <Dropdown.SubMenu>
-      <Dropdown.TriggerItem data-testid="change_my_role_btn">
+      <Dropdown.TriggerItem
+        data-testid="change_my_role_btn"
+        css={{ bg: "$surface_dim" }}
+      >
         <PersonIcon />
         <Text variant="sm" css={{ flex: "1 1 0", mx: "$4" }}>
           Change My Role
@@ -50,7 +53,7 @@ export const ChangeSelfRole = ({ onClick }) => {
         sideOffset={8}
         alignOffset={-5}
         css={{
-          backgroundColor: "$surface_default",
+          backgroundColor: "$surface_dim",
           "@md": { w: "$64" },
         }}
       >

diff --git a/src/components/MoreSettings/MoreSettings.jsx b/src/components/MoreSettings/MoreSettings.jsx
@@ -1,6 +1,6 @@
 import React, { Fragment, useState } from "react";
 import { useMedia } from "react-use";
-import Hls from "hls.js";
+import { HMSHLSPlayer } from "@100mslive/hls-player";
 import {
   selectAppData,
   selectIsAllowedToPublish,
@@ -85,6 +85,8 @@ export const MoreSettings = () => {
     setOpenModals(modals => {
       const copy = new Set(modals);
       if (value) {
+        // avoiding extra set state trigger which removes currently open dialog by clearing set.
+        copy.clear();
         copy.add(modalName);
       } else {
         copy.delete(modalName);
@@ -98,6 +100,7 @@ export const MoreSettings = () => {
       <Dropdown.Root
         open={openModals.has(MODALS.MORE_SETTINGS)}
         onOpenChange={value => updateState(MODALS.MORE_SETTINGS, value)}
+        modal={false}
       >
         <Dropdown.Trigger asChild data-testid="more_settings_btn">
           <IconButton>
@@ -113,7 +116,7 @@ export const MoreSettings = () => {
           sideOffset={5}
           align="center"
           css={{
-            backgroundColor: "$surface_default",
+            backgroundColor: "$surface_dim",
             maxHeight: "$96",
             "@md": { w: "$64" },
             "div[role='separator']:first-child": {
@@ -169,7 +172,7 @@ export const MoreSettings = () => {
           )}
           {permissions.mute && (
             <Dropdown.Item
-              css={{ "&:hover": { backgroundColor: "$surfaceight" } }}
+              css={{ "&:hover": { backgroundColor: "$surface_bright" } }}
               onClick={() => updateState(MODALS.MUTE_ALL, true)}
               data-testid="mute_all_btn"
             >
@@ -180,7 +183,7 @@ export const MoreSettings = () => {
             </Dropdown.Item>
           )}
           <Dropdown.Item
-            css={{ "&:hover": { backgroundColor: "$surfaceight" } }}
+            css={{ "&:hover": { backgroundColor: "$surface_bright" } }}
             onClick={() => updateState(MODALS.DEVICE_SETTINGS, true)}
             data-testid="device_settings_btn"
           >
@@ -192,9 +195,9 @@ export const MoreSettings = () => {
           {FeatureFlags.enableStatsForNerds &&
             isSFNEnabled &&
             (localPeerRole === "hls-viewer" ? (
-              Hls.isSupported() ? (
+              HMSHLSPlayer.isSupported() ? (
                 <Dropdown.Item
-                  css={{ "&:hover": { backgroundColor: "$surfaceight" } }}
+                  css={{ "&:hover": { backgroundColor: "$surface_bright" } }}
                   onClick={() =>
                     hmsActions.setAppData(APP_DATA.hlsStats, !enablHlsStats)
                   }
@@ -225,7 +228,7 @@ export const MoreSettings = () => {
               ) : null
             ) : (
               <Dropdown.Item
-                css={{ "&:hover": { backgroundColor: "$surfaceight" } }}
+                css={{ "&:hover": { backgroundColor: "$surface_bright" } }}
                 onClick={() => updateState(MODALS.STATS_FOR_NERDS, true)}
                 data-testid="stats_for_nreds_btn"
               >

diff --git a/src/components/TileMenu.jsx b/src/components/TileMenu.jsx
@@ -47,28 +47,22 @@ const isSameTile = ({ trackId, videoTrackID, audioTrackID }) =>
   ((videoTrackID && videoTrackID === trackId) ||
     (audioTrackID && audioTrackID === trackId));
 
-const SpotlightActions = ({ audioTrackID, videoTrackID }) => {
+const SpotlightActions = ({ peerId }) => {
   const hmsActions = useHMSActions();
-  const spotlightTrackId = useHMSStore(
+  const spotlightPeerId = useHMSStore(
     selectSessionStore(SESSION_STORE_KEY.SPOTLIGHT)
   );
-  const isTileSpotlighted = isSameTile({
-    trackId: spotlightTrackId,
-    videoTrackID,
-    audioTrackID,
-  });
+  const isTileSpotlighted = spotlightPeerId === peerId;
 
-  const setSpotlightTrackId = trackId =>
+  const setSpotlightPeerId = peer =>
     hmsActions.sessionStore
-      .set(SESSION_STORE_KEY.SPOTLIGHT, trackId)
+      .set(SESSION_STORE_KEY.SPOTLIGHT, peer)
       .catch(err => ToastManager.addToast({ title: err.description }));
 
   return (
     <StyledMenuTile.ItemButton
       onClick={() =>
-        isTileSpotlighted
-          ? setSpotlightTrackId()
-          : setSpotlightTrackId(videoTrackID || audioTrackID)
+        isTileSpotlighted ? setSpotlightPeerId() : setSpotlightPeerId(peerId)
       }
     >
       <StarIcon />
@@ -186,12 +180,7 @@ const TileMenu = ({
                 audioTrackID={audioTrackID}
                 videoTrackID={videoTrackID}
               />
-              {showSpotlight && (
-                <SpotlightActions
-                  audioTrackID={audioTrackID}
-                  videoTrackID={videoTrackID}
-                />
-              )}
+              {showSpotlight && <SpotlightActions peerId={peerID} />}
             </>
           )
         ) : (
@@ -244,12 +233,7 @@ const TileMenu = ({
                   audioTrackID={audioTrackID}
                   videoTrackID={videoTrackID}
                 />
-                {showSpotlight && (
-                  <SpotlightActions
-                    audioTrackID={audioTrackID}
-                    videoTrackID={videoTrackID}
-                  />
-                )}
+                {showSpotlight && <SpotlightActions peerId={peerID} />}
               </>
             )}
             <SimulcastLayers trackId={videoTrackID} />