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

package/dist/utils/animations.d.ts

@@ -22,6 +22,22 @@ export declare const slideRightAndFade: (start?: string) => {
     (): string;
     name: string;
 };
+export declare const sheetSlideIn: {
+    (): string;
+    name: string;
+};
+export declare const sheetSlideOut: {
+    (): string;
+    name: string;
+};
+export declare const sheetFadeIn: {
+    (): string;
+    name: string;
+};
+export declare const sheetFadeOut: {
+    (): string;
+    name: string;
+};
 export declare const slideDownAndFade: (start?: string) => {
     (): string;
     name: string;

package/package.json

@@ -10,7 +10,7 @@
     "prebuilt",
     "roomkit"
   ],
-  "version": "0.1.4-alpha.0",
+  "version": "0.1.4",
   "author": "100ms",
   "license": "MIT",
   "files": [
@@ -75,17 +75,17 @@
     "react": ">=17.0.2 <19.0.0"
   },
   "dependencies": {
-    "@100mslive/hls-player": "0.1.13-alpha.0",
-    "@100mslive/hms-virtual-background": "1.11.13-alpha.0",
-    "@100mslive/react-icons": "0.8.13-alpha.0",
-    "@100mslive/react-sdk": "0.8.13-alpha.0",
+    "@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/types-prebuilt": "0.10.0",
     "@emoji-mart/data": "^1.0.6",
     "@emoji-mart/react": "^1.0.1",
     "@radix-ui/react-accordion": "1.0.0",
     "@radix-ui/react-checkbox": "1.0.0",
     "@radix-ui/react-collapsible": "1.0.0",
-    "@radix-ui/react-dialog": "1.0.0",
+    "@radix-ui/react-dialog": "1.0.4",
     "@radix-ui/react-dropdown-menu": "2.0.5",
     "@radix-ui/react-label": "1.0.0",
     "@radix-ui/react-popover": "1.0.6",
@@ -98,10 +98,8 @@
     "@radix-ui/react-toast": "1.0.0",
     "@radix-ui/react-tooltip": "1.0.6",
     "@stitches/react": "^1.2.8",
-    "@tldraw/tldraw": "^1.18.4",
     "emoji-mart": "^5.2.2",
     "eventemitter2": "^6.4.7",
-    "hls.js": "^1.3.0",
     "lodash.merge": "^4.6.2",
     "pusher-js": "^7.0.3",
     "qrcode.react": "^3.1.0",
@@ -114,8 +112,7 @@
     "recordrtc": "^5.6.2",
     "screenfull": "^5.1.0",
     "uuid": "^8.3.2",
-    "worker-timers": "^7.0.40",
-    "zipyai": "^1.3.24"
+    "worker-timers": "^7.0.40"
   },
-  "gitHead": "149d1cf9dd51d27800097d81057207e52a046797"
+  "gitHead": "a545bf04356bdc9c665e184e2b3413a3d14c2f6c"
 }

package/src/Button/Button.tsx

@@ -107,8 +107,8 @@ const StyledButton = styled('button', {
         '$secondary_bright',
         '$secondary_dim',
         '$secondary_disabled',
-        '$on_secondary_high',
-        '$on_secondary_low',
+        '$on_surface_high',
+        '$on_surface_low',
       ),
     },
     {
@@ -131,8 +131,8 @@ const StyledButton = styled('button', {
         '$primary_bright',
         '$primary_dim',
         '$primary_disabled',
-        '$on_primary_high',
-        '$on_primary_low',
+        '$on_surface_high',
+        '$on_surface_low',
       ),
     },
   ],

package/src/Dropdown/Dropdown.tsx

@@ -53,7 +53,7 @@ const DropdownItem = styled(Item, {
   display: 'flex',
   alignItems: 'center',
   outline: 'none',
-  backgroundColor: '$surface_default',
+  backgroundColor: '$surface_dim',
   '&:hover': {
     cursor: 'pointer',
     bg: '$surface_bright',
@@ -74,7 +74,7 @@ const DropdownContent = styled(Content, {
   maxHeight: '$64',
   r: '$1',
   py: '$4',
-  backgroundColor: '$surface_default',
+  backgroundColor: '$surface_dim',
   overflowY: 'auto',
   boxShadow: '0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23)',
   zIndex: 20,

package/src/IconButton/IconButton.tsx

@@ -17,8 +17,10 @@ export const IconButton = styled('button', {
   '&:not([disabled]):focus': {
     outline: 'none',
   },
-  '&:not([disabled]):hover': {
-    backgroundColor: '$on_surface_low',
+  '@media (hover: hover)': {
+    '&:not([disabled]):hover': {
+      backgroundColor: '$on_surface_low',
+    },
   },
   '&[disabled]': {
     opacity: 0.5,

package/src/Pagination/StyledPagination.tsx

@@ -21,6 +21,7 @@ const Chevron = styled('button', {
     color: '$on_surface_low',
     cursor: 'not-allowed',
   },
+  backgroundColor: 'transparent',
   display: 'flex',
 });
 

package/src/Popover/index.tsx

@@ -1,4 +1,4 @@
-import { Arrow, Content, Popover as Root, Portal, Trigger } from '@radix-ui/react-popover';
+import { Arrow, Close, Content, Popover as Root, Portal, Trigger } from '@radix-ui/react-popover';
 import { styled } from '../Theme';
 import { popoverAnimation } from '../utils/animations';
 
@@ -23,4 +23,5 @@ export const Popover = {
   Trigger: StyledTrigger,
   Portal: Portal,
   Arrow: StyledArrow,
+  Close: Close,
 };

package/src/Prebuilt/{App.jsx → App.tsx}

@@ -1,37 +1,80 @@
-import React, { Suspense, useEffect, useRef } from 'react';
+import React, { MutableRefObject, ReactElement, Suspense, useEffect, useRef } from 'react';
 import { BrowserRouter, MemoryRouter, Navigate, Route, Routes, useParams } from 'react-router-dom';
+import { HMSStatsStoreWrapper, HMSStoreWrapper, IHMSNotifications } from '@100mslive/hms-video-store';
+import { Layout, Logo, Screens, Theme, Typography } from '@100mslive/types-prebuilt';
 import {
+  HMSActions,
   HMSReactiveStore,
   HMSRoomProvider,
   selectIsConnectedToRoom,
   useHMSActions,
   useHMSStore,
 } from '@100mslive/react-sdk';
+// @ts-ignore: No implicit Any
 import { AppData } from './components/AppData/AppData';
+// @ts-ignore: No implicit Any
 import { BeamSpeakerLabelsLogging } from './components/AudioLevel/BeamSpeakerLabelsLogging';
+// @ts-ignore: No implicit Any
 import AuthToken from './components/AuthToken';
+// @ts-ignore: No implicit Any
 import { ErrorBoundary } from './components/ErrorBoundary';
+// @ts-ignore: No implicit Any
 import FullPageProgress from './components/FullPageProgress';
+// @ts-ignore: No implicit Any
 import { Init } from './components/init/Init';
+// @ts-ignore: No implicit Any
 import { KeyboardHandler } from './components/Input/KeyboardInputManager';
+// @ts-ignore: No implicit Any
 import { Notifications } from './components/Notifications';
+// @ts-ignore: No implicit Any
 import PostLeave from './components/PostLeave';
+// @ts-ignore: No implicit Any
 import PreviewContainer from './components/Preview/PreviewContainer';
+// @ts-ignore: No implicit Any
 import { ToastContainer } from './components/Toast/ToastContainer';
-import { RoomLayoutContext, RoomLayoutProvider } from './provider/roomLayoutProvider/index.tsx';
+import { RoomLayoutContext, RoomLayoutProvider } from './provider/roomLayoutProvider';
 import { Box } from '../Layout';
 import { globalStyles, HMSThemeProvider } from '../Theme';
+// @ts-ignore: No implicit Any
 import { HMSPrebuiltContext, useHMSPrebuiltContext } from './AppContext';
+// @ts-ignore: No implicit Any
 import { FlyingEmoji } from './plugins/FlyingEmoji';
+// @ts-ignore: No implicit Any
 import { RemoteStopScreenshare } from './plugins/RemoteStopScreenshare';
+// @ts-ignore: No implicit Any
 import { getRoutePrefix } from './common/utils';
+// @ts-ignore: No implicit Any
 import { FeatureFlags } from './services/FeatureFlags';
 
+// @ts-ignore: No implicit Any
 const Conference = React.lazy(() => import('./components/conference'));
 
+export type HMSPrebuiltOptions = {
+  userName?: string;
+  userId?: string;
+  endpoints?: object;
+};
+
+export type HMSPrebuiltProps = {
+  roomCode?: string;
+  logo?: Logo;
+  typography?: Typography;
+  themes?: Theme[];
+  options?: HMSPrebuiltOptions;
+  screens?: Screens;
+  onLeave?: () => void;
+};
+
+export type HMSPrebuiltRefType = {
+  hmsActions: HMSActions;
+  hmsStore: HMSStoreWrapper;
+  hmsStats: HMSStatsStoreWrapper;
+  hmsNotifications: IHMSNotifications;
+};
+
 // TODO: remove now that there are options to change to portrait
-const getAspectRatio = ({ width, height }) => {
-  const host = process.env.REACT_APP_HOST_NAME;
+const getAspectRatio = ({ width, height }: { width: number; height: number }) => {
+  const host = process.env.REACT_APP_HOST_NAME || '';
   const portraitDomains = (process.env.REACT_APP_PORTRAIT_MODE_DOMAINS || '').split(',');
   if (portraitDomains.includes(host) && width > height) {
     return { width: height, height: width };
@@ -39,23 +82,14 @@ const getAspectRatio = ({ width, height }) => {
   return { width, height };
 };
 
-export const HMSPrebuilt = React.forwardRef(
+export const HMSPrebuilt = React.forwardRef<HMSPrebuiltRefType, HMSPrebuiltProps>(
   (
     {
       roomCode = '',
       logo,
       typography,
       themes,
-      options: {
-        userName = '',
-        userId = '',
-        endpoints: {
-          init: initEndpoint = '',
-          tokenByRoomCode: tokenByRoomCodeEndpoint = '',
-          tokenByRoomIdRole: tokenByRoomIdRoleEndpoint = '',
-          roomLayout: roomLayoutEndpoint = '',
-        } = {},
-      } = {},
+      options: { userName = '', userId = '', endpoints } = {},
       screens,
       onLeave,
     },
@@ -64,7 +98,7 @@ export const HMSPrebuilt = React.forwardRef(
     const aspectRatio = '1-1';
     const metadata = '';
     const { 0: width, 1: height } = aspectRatio.split('-').map(el => parseInt(el));
-    const reactiveStore = useRef();
+    const reactiveStore = useRef<HMSPrebuiltRefType>();
 
     const [hydrated, setHydrated] = React.useState(false);
     useEffect(() => {
@@ -87,26 +121,31 @@ export const HMSPrebuilt = React.forwardRef(
       if (!ref || !reactiveStore.current) {
         return;
       }
-
-      ref.current = { ...reactiveStore.current };
+      (ref as MutableRefObject<HMSPrebuiltRefType>).current = { ...reactiveStore.current };
     }, [ref]);
 
     // leave room when component unmounts
     useEffect(
       () => () => {
-        return reactiveStore.current.hmsActions.leave();
+        reactiveStore?.current?.hmsActions.leave();
       },
       [],
     );
 
-    const endpoints = {
-      tokenByRoomCode: tokenByRoomCodeEndpoint,
-      init: initEndpoint,
-      tokenByRoomIdRole: tokenByRoomIdRoleEndpoint,
-      roomLayout: roomLayoutEndpoint,
-    };
+    const endpointsObj = endpoints as
+      | {
+          init: string;
+          tokenByRoomCode: string;
+          tokenByRoomIdRole: string;
+          roomLayout: string;
+        }
+      | undefined;
+    const tokenByRoomCodeEndpoint: string = endpointsObj?.tokenByRoomCode || '';
+    const initEndpoint: string = endpointsObj?.init || '';
+    const roomLayoutEndpoint: string = endpointsObj?.roomLayout || '';
+    const tokenByRoomIdRoleEndpoint: string = endpointsObj?.tokenByRoomIdRole || '';
 
-    const overrideLayout = {
+    const overrideLayout: Partial<Layout> = {
       logo,
       themes,
       typography,
@@ -129,21 +168,26 @@ export const HMSPrebuilt = React.forwardRef(
             onLeave,
             userName,
             userId,
-            endpoints,
+            endpoints: {
+              tokenByRoomCode: tokenByRoomCodeEndpoint,
+              init: initEndpoint,
+              tokenByRoomIdRole: tokenByRoomIdRoleEndpoint,
+              roomLayout: roomLayoutEndpoint,
+            },
           }}
         >
           <HMSRoomProvider
             isHMSStatsOn={FeatureFlags.enableStatsForNerds}
-            actions={reactiveStore.current.hmsActions}
-            store={reactiveStore.current.hmsStore}
-            notifications={reactiveStore.current.hmsNotifications}
-            stats={reactiveStore.current.hmsStats}
+            actions={reactiveStore.current?.hmsActions}
+            store={reactiveStore.current?.hmsStore}
+            notifications={reactiveStore.current?.hmsNotifications}
+            stats={reactiveStore.current?.hmsStats}
           >
             <RoomLayoutProvider roomLayoutEndpoint={roomLayoutEndpoint} overrideLayout={overrideLayout}>
               <RoomLayoutContext.Consumer>
                 {layout => {
-                  const theme = layout.themes?.[0] || {};
-                  const { typography } = layout;
+                  const theme: Theme = layout?.themes?.[0] || ({} as Theme);
+                  const { typography } = layout || {};
                   let fontFamily = ['sans-serif'];
                   if (typography?.font_family) {
                     fontFamily = [`${typography?.font_family}`, ...fontFamily];
@@ -157,8 +201,10 @@ export const HMSPrebuilt = React.forwardRef(
                       themeType={`${theme.name}-${Date.now()}`}
                       aspectRatio={getAspectRatio({ width, height })}
                       theme={{
+                        //@ts-ignore: Prebuilt theme to match stiches theme
                         colors: theme.palette,
                         fonts: {
+                          //@ts-ignore: font list to match token types of stiches
                           sans: fontFamily,
                         },
                       }}
@@ -189,7 +235,7 @@ export const HMSPrebuilt = React.forwardRef(
 
 HMSPrebuilt.displayName = 'HMSPrebuilt';
 
-const Redirector = ({ showPreview }) => {
+const Redirector = ({ showPreview }: { showPreview: boolean }) => {
   const { roomId, role } = useParams();
 
   if (!roomId && !role) {
@@ -278,7 +324,7 @@ const BackSwipe = () => {
   return null;
 };
 
-const Router = ({ children }) => {
+const Router = ({ children }: { children: ReactElement }) => {
   const { roomId, role, roomCode } = useHMSPrebuiltContext();
   return [roomId, role, roomCode].every(value => !value) ? (
     <BrowserRouter>{children}</BrowserRouter>
@@ -289,21 +335,22 @@ const Router = ({ children }) => {
   );
 };
 
-function AppRoutes({ authTokenByRoomCodeEndpoint }) {
+function AppRoutes({ authTokenByRoomCodeEndpoint }: { authTokenByRoomCodeEndpoint: string }) {
   return (
     <Router>
-      <ToastContainer />
-      <Notifications />
-      <BackSwipe />
-      <FlyingEmoji />
-      <RemoteStopScreenshare />
-      <KeyboardHandler />
-      <BeamSpeakerLabelsLogging />
-      <AuthToken authTokenByRoomCodeEndpoint={authTokenByRoomCodeEndpoint} />
-      <Routes>
-        <Route path="/*" element={<RouteList />} />
-        <Route path="/streaming/*" element={<RouteList />} />
-      </Routes>
+      <>
+        <ToastContainer />
+        <Notifications />
+        <BackSwipe />
+        <FlyingEmoji />
+        <RemoteStopScreenshare />
+        <KeyboardHandler />
+        <BeamSpeakerLabelsLogging />
+        <AuthToken authTokenByRoomCodeEndpoint={authTokenByRoomCodeEndpoint} />
+        <Routes>
+          <Route path="/*" element={<RouteList />} />
+        </Routes>
+      </>
     </Router>
   );
 }

package/src/Prebuilt/Prebuilt.stories.tsx

@@ -1,28 +1,42 @@
 import React from 'react';
 import { Meta, StoryFn } from '@storybook/react';
-import { HMSPrebuilt } from '.';
+import { HMSPrebuilt, HMSPrebuiltOptions, HMSPrebuiltProps } from '.';
 
 export default {
   title: 'UI Components/Prebuilt',
   component: HMSPrebuilt,
   argTypes: {
-    roomCode: { control: { type: 'text' }, defaultValue: 'tsj-obqh-lwx' },
-    logo: { control: { type: 'object' }, defaultValue: undefined },
+    roomCode: { control: { type: 'text' }, defaultValue: '' },
+    logo: { control: { type: 'object' }, defaultValue: null },
     typography: { control: { type: 'object' }, defaultValue: 'Roboto' },
   },
 } as Meta<typeof HMSPrebuilt>;
 
-const PrebuiltRoomCodeStory: StoryFn<typeof HMSPrebuilt> = ({ roomCode = '', logo, themes, typography, options }) => {
+const PrebuiltRoomCodeStory: StoryFn<typeof HMSPrebuilt> = ({
+  roomCode = '',
+  logo,
+  themes,
+  typography,
+  options,
+}: HMSPrebuiltProps) => {
   return <HMSPrebuilt roomCode={roomCode} logo={logo} options={options} themes={themes} typography={typography} />;
 };
 
 export const Example = PrebuiltRoomCodeStory.bind({});
+const endpoints: HMSPrebuiltOptions['endpoints'] = {
+  roomLayout: process.env.STORYBOOK_ROOM_LAYOUT_ENDPOINT,
+  tokenByRoomCode: process.env.STORYBOOK_TOKEN_BY_ROOM_CODE_ENDPOINT,
+  init: process.env.STORYBOOK_INIT_API_ENDPOINT,
+};
+
+const hasEndpoints = Object.values(endpoints).some(val => !!val);
+
 Example.args = {
-  roomCode: 'tsj-obqh-lwx',
+  roomCode: process.env.STORYBOOK_SAMPLE_ROOM_CODE,
   options: {
-    endpoints: {
-      roomLayout: 'https://demo8271564.mockable.io/v2/layouts/ui',
-    },
+    userName: '',
+    userId: '',
+    endpoints: hasEndpoints ? endpoints : undefined,
   },
   typography: {
     font_family: 'Roboto',

package/src/Prebuilt/common/constants.js

@@ -134,6 +134,7 @@ export const APP_DATA = {
   dropdownList: 'dropdownList',
   authToken: 'authToken',
   pdfConfig: 'pdfConfig',
+  minimiseInset: 'minimiseInset',
 };
 export const UI_SETTINGS = {
   isAudioOnly: 'isAudioOnly',
@@ -143,8 +144,6 @@ export const UI_SETTINGS = {
   showStatsOnTiles: 'showStatsOnTiles',
   enableAmbientMusic: 'enableAmbientMusic',
   mirrorLocalVideo: 'mirrorLocalVideo',
-  activeSpeakerSorting: 'activeSpeakerSorting',
-  hideLocalVideo: 'hideLocalVideo',
 };
 
 export const SIDE_PANE_OPTIONS = {

package/src/Prebuilt/common/hooks.js

@@ -1,6 +1,8 @@
 // @ts-check
 import { useEffect, useRef, useState } from 'react';
+import { JoinForm_JoinBtnType } from '@100mslive/types-prebuilt/elements/join_form';
 import { selectAvailableRoleNames, selectIsConnectedToRoom, selectPeerCount, useHMSStore } from '@100mslive/react-sdk';
+import { useRoomLayout } from '../provider/roomLayoutProvider';
 import { isInternalRole } from './utils';
 
 /**
@@ -45,3 +47,9 @@ export const useFilteredRoles = () => {
   const roles = useHMSStore(selectAvailableRoleNames).filter(role => !isInternalRole(role));
   return roles;
 };
+
+export const useShowStreamingUI = () => {
+  const layout = useRoomLayout();
+  const { join_form } = layout?.screens?.preview?.default?.elements || {};
+  return join_form?.join_btn_type === JoinForm_JoinBtnType.JOIN_BTN_TYPE_JOIN_AND_GO_LIVE;
+};

package/src/Prebuilt/common/utils.js

@@ -83,3 +83,18 @@ export const getUpdatedHeight = (e, MINIMUM_HEIGHT) => {
   const sheetHeightInVH = Math.max(MINIMUM_HEIGHT, heightToPercentage > 80 ? 100 : heightToPercentage);
   return `${sheetHeightInVH}vh`;
 };
+
+export const getFormattedCount = num => {
+  const formatter = new Intl.NumberFormat('en', { notation: 'compact', maximumFractionDigits: 2 });
+  const formattedNum = formatter.format(num);
+  return formattedNum;
+};
+
+export const formatTime = timeInSeconds => {
+  timeInSeconds = Math.floor(timeInSeconds / 1000);
+  const hours = Math.floor(timeInSeconds / 3600);
+  const minutes = Math.floor((timeInSeconds % 3600) / 60);
+  const seconds = timeInSeconds % 60;
+  const hour = hours !== 0 ? `${hours < 10 ? '0' : ''}${hours}:` : '';
+  return `${hour}${minutes < 10 ? '0' : ''}${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
+};

package/src/Prebuilt/components/AppData/AppData.jsx

@@ -48,8 +48,6 @@ const initialAppData = {
     [UI_SETTINGS.enableAmbientMusic]: false,
     [UI_SETTINGS.uiViewMode]: UI_MODE_GRID,
     [UI_SETTINGS.mirrorLocalVideo]: true,
-    [UI_SETTINGS.activeSpeakerSorting]: process.env.REACT_APP_ENV === 'qa',
-    [UI_SETTINGS.hideLocalVideo]: false,
   },
   [APP_DATA.subscribedNotifications]: {
     PEER_JOINED: false,
@@ -72,6 +70,7 @@ const initialAppData = {
   [APP_DATA.waitingViewerRole]: DEFAULT_WAITING_VIEWER_ROLE,
   [APP_DATA.dropdownList]: [],
   [APP_DATA.authToken]: '',
+  [APP_DATA.minimiseInset]: false,
 };
 
 export const AppData = React.memo(({ appDetails, tokenEndpoint }) => {

package/src/Prebuilt/components/AppData/useUISettings.js

@@ -51,11 +51,6 @@ export const useIsHeadless = () => {
   return isHeadless;
 };
 
-export const useActiveSpeakerSorting = () => {
-  const activeSpeakerSorting = useUISettings(UI_SETTINGS.activeSpeakerSorting);
-  return activeSpeakerSorting;
-};
-
 export const useHLSViewerRole = () => {
   return useHMSStore(selectAppData(APP_DATA.hlsViewerRole));
 };