build: merge main with production · 100mslive/web-sdks@8bf1b34

vercel · 2023-08-10T05:02:24Z

Successfully deployed to the following URLs:

dashboard-app – ./apps/100ms-custom-app

dashboard-app-git-production-100mslive.vercel.app
*.app.100ms.live
dashboard-app-phi.vercel.app
dashboard-app-100mslive.vercel.app
customprod.app.100ms.live
100ms-custom-app-prod.vercel.app

vercel · 2023-08-10T05:02:46Z

Successfully deployed to the following URLs:

storybook-app – ./packages/roomkit-react

storybook-app-git-production-100mslive.vercel.app
ui.100ms.live
storybook-app-100mslive.vercel.app
storybook-app-five.vercel.app

-Original file line number
+Diff line change
@@ Expand Up / @@ -219,7 +219,7 @@ const App = () => { @@
       return (
         <Flex
           direction="column"
-          css={{ size: '100%', overflowY: 'hidden', bg: '$mainBg' }}
+          css={{ size: '100%', overflowY: 'hidden', bg: '$background_dim' }}
         >
           {error && (
             <Suspense fallback={null}>
@@ Expand Down Expand Up / @@ -259,7 +259,6 @@ const App = () => { @@
                     (settings.theme === 'dark' ? logoDark : logoLight),
                   headerPresent: String(!!getAuthInfo().userEmail),
                   metadata: settings.metadataFields.metadata,
-                  recordingUrl: settings.recording_url,
                 }}
                 authTokenByRoomCodeEndpoint={getAuthTokenByRoomCodeEndpoint()}
                 getDetails={fetchData}
@@ Expand Down @@

-Original file line number
+Diff line change
@@ Expand Up / @@ -24,7 +24,7 @@ export const DialogContent = ({ @@
               <Flex justify="between">
                 <Flex align="center" css={{ mb: '$1' }}>
                   {Icon ? (
-                    <Box css={{ mr: '$2', color: '$textPrimary', ...iconCSS }}>
+                    <Box css={{ mr: '$2', color: '$on_primary_high', ...iconCSS }}>
                       <Icon />
                     </Box>
                   ) : null}
@@ Expand Down @@

-Original file line number
+Diff line change
@@ Expand Up / @@ -13,7 +13,7 @@ import { DialogContent } from './DialogContent'; @@
     const Step = ({ value, opacity }) => (
       <Text
         css={{
-          bg: '$mainBg',
+          bg: '$background_dim',
           size: '$12',
           r: '$round',
           mr: '$8',
@@ Expand All @@
       return (
         <Box
           css={{
-            bg: '$bgSecondary',
+            bg: '$surface_bright',
             p: '$8',
             my: '$8',
             opacity,
@@ Expand All @@
           </Flex>
           {selected && (
             <Fragment>
-              <Text css={{ color: '$textSecondary', my: '$8' }}>{description}</Text>
+              <Text css={{ color: '$on_surface_high', my: '$8' }}>
+                {description}
+              </Text>
               <Box css={{ mb: '$8' }}>{children}</Box>
             </Fragment>
           )}
@@ Expand Down @@

-Original file line number
+Diff line change
@@ Expand Up / @@ -71,8 +71,8 @@ export default function Header({ @@
             justify="between"
             css={{
               p: '$6 $4',
-              bg: '$mainBg',
-              borderBottom: '1px solid $borderLight',
+              bg: '$background_dim',
+              borderBottom: '1px solid $border_bright',
             }}
           >
             <LogoImg
@@ Expand All / @@ -93,10 +93,10 @@ export default function Header({ @@
                         togModal(!modal);
                         AppAnalytics.track('invite.clicked');
                       }}
-                      css={{ px: '$8', mr: '$4', color: '$white' }}
+                      css={{ px: '$8', mr: '$4', color: '$on_primary_high' }}
                     >
                       <InviteIcon />
-                      <Text as="span" css={{ ml: '$2', color: '$white' }}>
+                      <Text as="span" css={{ ml: '$2', color: '$on_primary_high' }}>
                         Invite
                       </Text>
                     </Button>
@@ Expand Down Expand Up / @@ -134,7 +134,9 @@ export default function Header({ @@
                 justify="center"
                 css={{ bg: randomColor, w: '$14', h: '$14', r: '$round' }}
               >
-                <Text css={{ color: '$white' }}>{getInitialsFromEmail()}</Text>
+                <Text css={{ color: '$on_primary_high' }}>
+                  {getInitialsFromEmail()}
+                </Text>
               </Flex>
             </Flex>
           </Flex>
@@ Expand Down @@

-Original file line number
+Diff line change
@@ Expand Up / @@ -38,8 +38,8 @@ const InviteLinksModal = ({ onClose, roomLinks }) => { @@
                         asChild
                         ref={ref}
                         css={{
-                          border: '1px solid $borderLight',
-                          bg: '$surfaceLight',
+                          border: '1px solid $border_bright',
+                          bg: '$surface_bright',
                           r: '$1',
                           p: '$6 $9',
                           mt: '$4',
@@ Expand All / @@ -65,7 +65,7 @@ const InviteLinksModal = ({ onClose, roomLinks }) => { @@
                                 css={{
                                   bg:
                                     selectedRole === role
-                                      ? '$primaryDark'
+                                      ? '$primary_dim'
                                       : undefined,
                                   px: '$9',
                                 }}
@@ Expand All / @@ -78,7 +78,10 @@ const InviteLinksModal = ({ onClose, roomLinks }) => { @@
                         </Dropdown.Content>
                       </Dropdown.Portal>
                     </Dropdown.Root>
-                    <Text variant="sm" css={{ color: '$textMedEmp', my: '$10' }}>
+                    <Text
+                      variant="sm"
+                      css={{ color: '$on_surface_medium', my: '$10' }}
+                    >
                       Select a role with relevant permissions that you want to
                       share, to join the room.
                     </Text>
@@ Expand All / @@ -103,7 +106,7 @@ const InviteLinksModal = ({ onClose, roomLinks }) => { @@
                       css={{
                         flex: '1 1 0',
                         my: '$10',
-                        bg: '$white',
+                        bg: '$on_primary_high',
                         r: '$1',
                         px: '$8',
                       }}
@@ Expand All / @@ -130,7 +133,7 @@ const SubHeading = ({ children, css = {} }) => { @@
       return (
         <Text
           variant="tiny"
-          css={{ color: '$textMedEmp', textTransform: 'uppercase', ...css }}
+          css={{ color: '$on_surface_medium', textTransform: 'uppercase', ...css }}
         >
           {children}
         </Text>
@@ Expand Down Expand Up / @@ -162,8 +165,8 @@ const RightContainer = ({ children }) => { @@
             p: '$10 $14',
             w: '45%',
             h: '100%',
-            border: '1px solid $borderLight',
-            bg: '$surfaceLight',
+            border: '1px solid $border_bright',
+            bg: '$surface_bright',
             r: '$1',
             textAlign: 'center',
           }}
@@ Expand Down @@

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Commit

There are no files selected for viewing

2 comments on commit `8bf1b34`

vercel bot commented on `8bf1b34` Aug 10, 2023

vercel bot commented on `8bf1b34` Aug 10, 2023

-Original file line number
+Diff line change
@@ Expand Up / @@ -30,9 +30,9 @@ const ItemRoot = React.memo(({ title, children }) => ( @@
     ));
     const TextArea = styled('textarea', {
-      bg: '$bgSecondary',
+      bg: '$surface_bright',
       p: '$4 $8',
-      color: '$textPrimary',
+      color: '$on_primary_high',
       resize: 'none',
     });
@@ Expand All / @@ -56,7 +56,7 @@ const TileType = ({ type, active, value, change }) => { @@
           css={{
             height: '$20',
             aspectRatio: `${multiplier}/${divider}`,
-            border: `1px solid ${active ? '$brandDefault' : '$bgSecondary'}`,
+            border: `1px solid ${active ? '$primary_default' : '$surface_bright'}`,
             m: '$2',
             cursor: 'pointer',
           }}
@@ Expand All / @@ -77,7 +77,7 @@ const ThemeType = ({ title, active, onClick }) => { @@
             m: '$2',
             p: '$2 $8',
             r: '$1',
-            bg: active ? '$menuBg' : '',
+            bg: active ? '$surface_default' : '',
             cursor: 'pointer',
           }}
           onClick={onClick}
@@ Expand All @@
               htmlFor="logoInput"
               variant="standard"
               css={{
-                bg: '$bgSecondary',
+                bg: '$surface_bright',
                 cursor: 'pointer',
-                color: '$textPrimary',
+                color: '$on_primary_high',
                 display: 'flex',
               }}
             >
@@ Expand All @@
             />
           </ItemRoot>
           <ItemRoot title="Appearance">
-            <Flex align="center" css={{ bg: '$bgSecondary', r: '$1' }}>
+            <Flex align="center" css={{ bg: '$surface_bright', r: '$1' }}>
               <ThemeType
                 title="Dark"
                 active={settings.theme === 'dark'}
@@ Expand All @@
               htmlFor="brandColorPicker"
               align="center"
               css={{
-                bg: '$bgSecondary',
+                bg: '$surface_bright',
                 p: '$4',
                 r: '$1',
                 cursor: 'pointer',
@@ Expand Down @@

-Original file line number
+Diff line change
@@ Expand Up / @@ -150,7 +150,6 @@ module.exports = { @@
           template: path.resolve(__dirname, './public/index.html'),
           base: '/',
         }),
-        // will not be needed in case of prebuilt component. Needed only for 100ms-web app
         new webpack.ProvidePlugin({
           React: 'react',
         }),
@@ Expand Down @@

-Original file line number
+Diff line change
@@ Expand Up @@
     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";
@@ Expand Down Expand Up / @@ -68,7 +68,6 @@ export function EdtechComponent({ @@
         logo = "",
         headerPresent = "false",
         metadata = "",
-        recordingUrl = "",
       },
       policyConfig = envPolicyConfig,
       getDetails = () => {},
@@ Expand All / @@ -77,7 +76,6 @@ export function EdtechComponent({ @@
       const { 0: width, 1: height } = aspectRatio
         .split("-")
         .map(el => parseInt(el));
       globalStyles();
       return (
@@ Expand All / @@ -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%",
@@ Expand Down @@

-Original file line number
+Diff line change
@@ Expand Up @@
     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",
           },
         },
       },
@@ Expand Down @@

-Original file line number
+Diff line change
@@ Expand Up / @@ -118,7 +118,6 @@ export const APP_DATA = { @@
       chatSelector: "chatSelector",
       chatDraft: "chatDraft",
       appConfig: "appConfig",
-      recordingUrl: "recordingUrl",
       sidePane: "sidePane",
       hlsStats: "hlsStats",
       hlsViewerRole: "hlsViewerRole",
@@ Expand Down @@

-Original file line number
+Diff line change
@@ -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);
@@ Expand Down Expand Up / @@ -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" : "";
     };
@@ Expand Down @@

-Original file line number
+Diff line change
@@ Expand Up / @@ -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();
@@ Expand Down Expand Up / @@ -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]:
@@ Expand All / @@ -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) {
@@ Expand Down @@

Commit

There are no files selected for viewing

2 comments on commit 8bf1b34

vercel bot commented on 8bf1b34 Aug 10, 2023

Choose a reason for hiding this comment

dashboard-app – ./apps/100ms-custom-app

vercel bot commented on 8bf1b34 Aug 10, 2023

Choose a reason for hiding this comment

storybook-app – ./packages/roomkit-react

2 comments on commit `8bf1b34`

vercel bot commented on `8bf1b34` Aug 10, 2023

vercel bot commented on `8bf1b34` Aug 10, 2023