feat: sync webapp

100mslive · Aug 10, 2023 · 1f240ec · 1f240ec · vercel · Aug 10, 2023
2 parents 5ae10b7 + 9c138b1
commit 1f240ec
Show file tree

Hide file tree

Showing 102 changed files with 1,312 additions and 598 deletions.
diff --git a/package.json b/package.json
@@ -9,11 +9,11 @@
     "src"
   ],
   "dependencies": {
-    "@100mslive/roomkit-react": "0.1.1",
-    "@100mslive/hls-player": "0.1.10",
-    "@100mslive/hms-virtual-background": "1.11.10",
-    "@100mslive/react-icons": "0.8.10",
-    "@100mslive/react-sdk": "0.8.10",
+    "@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",
     "@emoji-mart/data": "^1.0.6",
     "@emoji-mart/react": "^1.0.1",
     "@tldraw/tldraw": "^1.18.4",

diff --git a/src/App.js b/src/App.js
@@ -23,7 +23,7 @@ import { KeyboardHandler } from "./components/Input/KeyboardInputManager";
 import { Notifications } from "./components/Notifications";
 import PostLeave from "./components/PostLeave";
 import { ToastContainer } from "./components/Toast/ToastContainer";
-import { hmsActions, hmsNotifications, hmsStats, hmsStore } from "./hms.js";
+import { palette } from "./theme.js";
 import { Confetti } from "./plugins/confetti";
 import { FlyingEmoji } from "./plugins/FlyingEmoji.jsx";
 import { RemoteStopScreenshare } from "./plugins/RemoteStopScreenshare";
@@ -68,7 +68,6 @@ export function EdtechComponent({
     logo = "",
     headerPresent = "false",
     metadata = "",
-    recordingUrl = "",
   },
   policyConfig = envPolicyConfig,
   getDetails = () => {},
@@ -77,7 +76,6 @@ export function EdtechComponent({
   const { 0: width, 1: height } = aspectRatio
     .split("-")
     .map(el => parseInt(el));
-
   globalStyles();
 
   return (
@@ -87,35 +85,29 @@ export function EdtechComponent({
         aspectRatio={getAspectRatio({ width, height })}
         theme={{
           colors: {
-            brandDefault: color,
-            brandDark: shadeColor(color, -30),
-            brandLight: shadeColor(color, 30),
-            brandDisabled: shadeColor(color, 10),
+            ...palette[theme],
+            primary_default: color,
+            primary_dark: shadeColor(color, -30),
+            primary_bright: shadeColor(color, 30),
+            primary_disabled: shadeColor(color, 10),
           },
           fonts: {
             sans: [font, "Inter", "sans-serif"],
           },
         }}
       >
-        <HMSRoomProvider
-          isHMSStatsOn={FeatureFlags.enableStatsForNerds}
-          actions={hmsActions}
-          store={hmsStore}
-          notifications={hmsNotifications}
-          stats={hmsStats}
-        >
+        <HMSRoomProvider isHMSStatsOn={FeatureFlags.enableStatsForNerds}>
           <AppData
             appDetails={metadata}
             policyConfig={policyConfig}
-            recordingUrl={recordingUrl}
             logo={logo}
             tokenEndpoint={tokenEndpoint}
           />
 
           <Init />
           <Box
             css={{
-              bg: "$mainBg",
+              bg: "$background_dim",
               w: "100%",
               lineHeight: "1.5",
               "-webkit-text-size-adjust": "100%",

diff --git a/src/IconButton.jsx b/src/IconButton.jsx
@@ -3,13 +3,13 @@ import { IconButton as BaseIconButton, styled } from "@100mslive/roomkit-react";
 const IconButton = styled(BaseIconButton, {
   width: "$14",
   height: "$14",
-  border: "1px solid $borderLight",
+  border: "1px solid $border_bright",
   r: "$1",
   variants: {
     active: {
       false: {
         border: "1px solid transparent",
-        color: "$white",
+        color: "$on_primary_high",
       },
     },
   },

diff --git a/src/common/constants.js b/src/common/constants.js
@@ -118,7 +118,6 @@ export const APP_DATA = {
   chatSelector: "chatSelector",
   chatDraft: "chatDraft",
   appConfig: "appConfig",
-  recordingUrl: "recordingUrl",
   sidePane: "sidePane",
   hlsStats: "hlsStats",
   hlsViewerRole: "hlsViewerRole",

diff --git a/src/common/utils.js b/src/common/utils.js
@@ -1,4 +1,4 @@
-import { QUERY_PARAM_SKIP_PREVIEW, QUESTION_TYPE } from "./constants";
+import { QUESTION_TYPE } from "./constants";
 
 export function shadeColor(color, percent) {
   let R = parseInt(color.substring(1, 3), 16);
@@ -60,13 +60,6 @@ export const isScreenshareSupported = () => {
   return typeof navigator.mediaDevices.getDisplayMedia !== "undefined";
 };
 
-export const getDefaultMeetingUrl = () => {
-  return (
-    window.location.href.replace("meeting", "preview") +
-    `?${QUERY_PARAM_SKIP_PREVIEW}=true`
-  );
-};
-
 export const getRoutePrefix = () => {
   return window.location.pathname.startsWith("/streaming") ? "/streaming" : "";
 };

diff --git a/src/components/AppData/AppData.jsx b/src/components/AppData/AppData.jsx
@@ -87,7 +87,7 @@ const initialAppData = {
 };
 
 export const AppData = React.memo(
-  ({ appDetails, logo, recordingUrl, tokenEndpoint, policyConfig, uiMode }) => {
+  ({ appDetails, logo, tokenEndpoint, policyConfig, uiMode }) => {
     const hmsActions = useHMSActions();
     const isConnected = useHMSStore(selectIsConnectedToRoom);
     const sidePane = useSidepaneState();
@@ -128,7 +128,6 @@ export const AppData = React.memo(
 
     useEffect(() => {
       const appData = {
-        [APP_DATA.recordingUrl]: recordingUrl,
         [APP_DATA.tokenEndpoint]: tokenEndpoint,
         [APP_DATA.logo]: logo,
         [APP_DATA.hlsViewerRole]:
@@ -140,7 +139,7 @@ export const AppData = React.memo(
       for (const key in appData) {
         hmsActions.setAppData([key], appData[key]);
       }
-    }, [appDetails, logo, recordingUrl, tokenEndpoint, uiMode, hmsActions]);
+    }, [appDetails, logo, tokenEndpoint, uiMode, hmsActions]);
 
     useEffect(() => {
       if (!preferences.subscribedNotifications) {

diff --git a/src/components/Chat/Chat.js b/src/components/Chat/Chat.js
@@ -27,7 +27,12 @@ const PinnedMessage = ({ clearPinnedMessage }) => {
 
   return pinnedMessage ? (
     <Flex
-      css={{ p: "$8", color: "$textMedEmp", bg: "$surfaceLight", r: "$1" }}
+      css={{
+        p: "$8",
+        color: "$on_surface_medium",
+        bg: "$surface_bright",
+        r: "$1",
+      }}
       align="center"
       justify="between"
     >
@@ -37,7 +42,7 @@ const PinnedMessage = ({ clearPinnedMessage }) => {
       <Box
         css={{
           ml: "$8",
-          color: "$textMedEmp",
+          color: "$on_surface_medium",
           w: "100%",
           maxHeight: "$18",
           overflowY: "auto",

diff --git a/src/components/Chat/ChatBody.jsx b/src/components/Chat/ChatBody.jsx
@@ -56,18 +56,22 @@ const MessageTypeContainer = ({ left, right }) => {
         ml: "auto",
         mr: "$4",
         p: "$2 $4",
-        border: "1px solid $textDisabled",
+        border: "1px solid $on_surface_low",
         r: "$0",
       }}
     >
       {left && (
-        <SenderName variant="tiny" as="span" css={{ color: "$textMedEmp" }}>
+        <SenderName
+          variant="tiny"
+          as="span"
+          css={{ color: "$on_surface_medium" }}
+        >
           {left}
         </SenderName>
       )}
       {left && right && (
         <Box
-          css={{ borderLeft: "1px solid $textDisabled", mx: "$4", h: "$8" }}
+          css={{ borderLeft: "1px solid $on_surface_low", mx: "$4", h: "$8" }}
         />
       )}
       {right && (
@@ -108,7 +112,7 @@ const URL_REGEX =
   /^https?:\/\/(www\.)?[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_+.~#?&//=]*)/;
 
 const Link = styled("a", {
-  color: "$brandDefault",
+  color: "$primary_default",
   wordBreak: "break-word",
   "&:hover": {
     textDecoration: "underline",
@@ -219,7 +223,7 @@ const ChatMessage = React.memo(
           align="center"
           css={{
             flexWrap: "wrap",
-            bg: messageType ? "$surfaceLight" : undefined,
+            bg: messageType ? "$surface_bright" : undefined,
             r: messageType ? "$1" : undefined,
             px: messageType ? "$4" : "$2",
             py: messageType ? "$4" : 0,
@@ -230,7 +234,7 @@ const ChatMessage = React.memo(
         >
           <Text
             css={{
-              color: "$textHighEmp",
+              color: "$on_surface_high",
               fontWeight: "$semiBold",
               display: "inline-flex",
               alignItems: "center",
@@ -254,7 +258,7 @@ const ChatMessage = React.memo(
                 variant="sm"
                 css={{
                   ml: "$4",
-                  color: "$textSecondary",
+                  color: "$on_surface_medium",
                   flexShrink: 0,
                 }}
               >

diff --git a/src/components/Chat/ChatFooter.jsx b/src/components/Chat/ChatFooter.jsx
@@ -18,7 +18,7 @@ const TextArea = styled("textarea", {
   width: "100%",
   fontFamily: "$sans",
   bg: "transparent",
-  color: "$textPrimary",
+  color: "$on_surface_high",
   resize: "none",
   lineHeight: "1rem",
   position: "relative",
@@ -113,7 +113,7 @@ export const ChatFooter = ({ role, peerId, onSend, children }) => {
     <Flex
       align="center"
       css={{
-        bg: "$surfaceLight",
+        bg: "$surface_bright",
         minHeight: "$16",
         maxHeight: "$24",
         position: "relative",
@@ -127,6 +127,7 @@ export const ChatFooter = ({ role, peerId, onSend, children }) => {
         placeholder="Write something here"
         ref={inputRef}
         autoFocus
+        css={{ fontSize: "1rem" }}
         onKeyPress={async event => {
           if (event.key === "Enter") {
             if (!event.shiftKey) {

diff --git a/src/components/Chat/ChatHeader.jsx b/src/components/Chat/ChatHeader.jsx
@@ -25,7 +25,7 @@ export const ChatHeader = React.memo(
         onClick={onToggle}
         align="center"
         css={{
-          color: "$textPrimary",
+          color: "$on_surface_high",
           h: "$16",
           mb: "$2",
         }}
@@ -36,7 +36,7 @@ export const ChatHeader = React.memo(
             asChild
             data-testid="participant_list_filter"
             css={{
-              border: "1px solid $textDisabled",
+              border: "1px solid $on_surface_low",
               r: "$0",
               p: "$2 $4",
               ml: "$8",
@@ -47,7 +47,7 @@ export const ChatHeader = React.memo(
               <Text variant="sm" css={{ ...textEllipsis(80) }}>
                 {selection}
               </Text>
-              <Box css={{ ml: "$2", color: "$textDisabled" }}>
+              <Box css={{ ml: "$2", color: "$on_surface_low" }}>
                 {open ? (
                   <ChevronUpIcon width={14} height={14} />
                 ) : (
@@ -61,6 +61,7 @@ export const ChatHeader = React.memo(
               w: "$64",
               overflow: "hidden",
               maxHeight: "unset",
+              backgroundColor: "$surface_default",
             }}
             align="start"
             sideOffset={8}

diff --git a/src/components/Chat/ChatSelector.jsx b/src/components/Chat/ChatSelector.jsx
@@ -22,19 +22,23 @@ import { useFilteredRoles } from "../../common/hooks";
 
 const ChatDotIcon = () => {
   return (
-    <Box css={{ size: "$6", bg: "$brandDefault", mx: "$2", r: "$round" }} />
+    <Box css={{ size: "$6", bg: "$primary_default", mx: "$2", r: "$round" }} />
   );
 };
 
 const SelectorItem = ({ value, active, onClick, unreadCount }) => {
   return (
     <Dropdown.Item
       data-testid="chat_members"
-      css={{ align: "center", px: "$10" }}
+      css={{
+        align: "center",
+        px: "$10",
+        "&:hover": { backgroundColor: "$surface_brighter" },
+      }}
       onClick={onClick}
     >
       <Text variant="sm">{value}</Text>
-      <Flex align="center" css={{ ml: "auto", color: "$textPrimary" }}>
+      <Flex align="center" css={{ ml: "auto", color: "$on_surface_high" }}>
         {unreadCount > 0 && (
           <Tooltip title={`${unreadCount} unread`}>
             <Box css={{ mr: active ? "$3" : 0 }}>

diff --git a/src/components/Chat/useEmojiPickerStyles.js b/src/components/Chat/useEmojiPickerStyles.js
@@ -9,16 +9,16 @@ export const useEmojiPickerStyles = showing => {
         const style = document.createElement("style");
         style.textContent = `
           #root {
-            --em-rgb-color: var(--hms-ui-colors-textPrimary);
-            --em-rgb-input: var(--hms-ui-colors-textPrimary);
-            --em-color-border: var(--hms-ui-colors-surfaceDefault);
-            --color-b: var(--hms-ui-colors-textPrimary);
+            --em-rgb-color: var(--hms-ui-colors-on_surface_high);
+            --em-rgb-input: var(--hms-ui-colors-on_surface_high);
+            --em-color-border: var(--hms-ui-colors-surface_default);
+            --color-b: var(--hms-ui-colors-on_surface_high);
             --rgb-background: transparent;
-            color: var(--hms-ui-colors-textPrimary);
+            color: var(--hms-ui-colors-on_surface_high);
             font-family: var(--hms-ui-fonts-sans);
           }
           .sticky {
-            background-color: var(--hms-ui-colors-surfaceLight);
+            background-color: var(--hms-ui-colors-surface_bright);
           }
         `;
         root?.appendChild(style);

diff --git a/src/components/Connection/TileConnection.jsx b/src/components/Connection/TileConnection.jsx
@@ -8,7 +8,7 @@ const TileConnection = ({ name, peerId, hideLabel, width }) => {
       {!hideLabel ? (
         <Text
           css={{
-            c: "$textHighEmp",
+            c: "$on_surface_high",
             ...textEllipsis(width - 60),
           }}
           variant="xs"
@@ -28,7 +28,7 @@ const Wrapper = styled("div", {
   position: "absolute",
   bottom: "$2",
   left: "$2",
-  backgroundColor: "$backgroundDark",
+  backgroundColor: "$background_dim",
   borderRadius: "$1",
   maxWidth: "85%",
   zIndex: 1,