@100mslive/roomkit-react 0.2.7-alpha.0 → 0.2.7-alpha.1

package/README.md

@@ -1,5 +1,8 @@
+
+![Banner](https://github.com/100mslive/web-sdks/blob/06c65259912db6ccd8617f2ecb6fef51429251ec/prebuilt-banner.png)
 # Room Kit React Library
 
+
 100ms Room Kit provides simple & easy to use UI components to build Live Streaming & Video Conferencing experiences in your apps.
 
 ## Installation
@@ -40,42 +43,30 @@ export default App() {
 
 For additional props, refer the [docs](https://www.100ms.live/docs/javascript/v2/quickstart/prebuilt-quickstart#props-for-hmsprebuilt)
 
+## Cutomization
+While we offer [a no-code way to customize Prebuilt](https://www.100ms.live/docs/get-started/v2/get-started/prebuilt/overview#customize-prebuilt), you can fork your copy of the Prebuilt component and make changes to the code to allow for more fine-tuning.
 
 Prebuilt customisations are available on [100ms dashboard](https://dashboard.100ms.live)
 
-
-#### Understanding the flow:
+### Understanding the Structure
 
 The `src` folder contains all the components, `Button`, `Accordion` etc.
-The `Prebuilt` folder contains the full prebuilt implementation.
-`App.tsx` is the entry point for the prebuilt which contains the `HMSPrebuilt` component.
-
-**Major Components in Prebuilt:**
-
-[RoomLayoutProvider](src/Prebuilt/provider/roomLayoutProvider/index.tsx)
-This is a context that contains the configuration from the dashboard [customiser](dashboard.100ms.live). Whatever changes are made in the dashboard customiser are available the next time you join.
-
-[AppStateContext](src/Prebuilt/AppStateContext.tsx)
-Contains the logic to switch between different screens, for example, Preview to Meeting, Meeting to Leave.
-These transitions are based on the roomState that is available from the reactive store(`useHMSStore(selectHMSRoomState)`)
-
-[PreviewScreen](src/Prebuilt/components/Preview/PreviewScreen.tsx)
+The `Prebuilt` folder contains the full Prebuilt implementation.
+`App.tsx` is the entry point for the Prebuilt which contains the `HMSPrebuilt` component.
 
-Contains the Preview implementation. Contains the Video tile, video, audio toggles and Virtual background and settings along with the name input.
+### Major Components in Prebuilt
 
-[ConferenceScreen](src/Prebuilt/components/ConferenceScreen.tsx)
+| Component | Description |
+|--|--|
+| [RoomLayoutProvider](src/Prebuilt/provider/roomLayoutProvider/index.tsx) | This is a context that contains the configuration from the dashboard [customiser](dashboard.100ms.live). Whatever changes are made in the dashboard customiser are available the next time you join.|
+|[AppStateContext](src/Prebuilt/AppStateContext.tsx)  | Contains the logic to switch between different screens, for example, Preview to Meeting, Meeting to Leave. These transitions are based on the roomState that is available from the reactive store (`useHMSStore(selectHMSRoomState)`). |
+| [PreviewScreen](src/Prebuilt/components/Preview/PreviewScreen.tsx) | Contains the Preview implementation. Contains the Video tile, video, audio toggles and Virtual background and settings along with the name input.|
+| [ConferenceScreen](src/Prebuilt/components/ConferenceScreen.tsx) | This contains the screen once you finish Preview and enter the meeting. This contains the header and footer and the main content.|
+| [VideoStreamingSection](src/Prebuilt/layouts/VideoStreamingSection.tsx) |This is the component that contains the main video rendering components and a sidebar (Interactive features like Chat and Polls are displayed here)  |
+| [LeaveScreen](src/Prebuilt/components/LeaveScreen.tsx) |This is the screen that is shown when you leave the meeting  |
 
-This contains the screen once you finish Preview and enter the meeting. This contains the header and footer and the main content.
 
-[VideoStreamingSection](src/Prebuilt/layouts/VideoStreamingSection.tsx)
-
-This is the component that contains the main video rendering components and a sidebar(Chat, Polls, and Others are shown here)
-
-[LeaveScreen](src/Prebuilt/components/LeaveScreen.tsx)
-
-This is the screen that is shown when you leave the meeting
-
-#### Customising the styles:
+### Customising the Styles
 
 [Base Config](/src/Theme/base.config.ts) has all the variables that you can use. Any changes you want for the theme can be made here. Most likely no additional changes will be required unless you want to introduce new variables.
 
@@ -84,14 +75,20 @@ When [`HMSThemeProvider`](src/Theme/ThemeProvider.tsx) is used at the top level,
 For components created using the base components like `Box`, `Flex`, `Button` etc, css Prop is available to modify the styles. Within the css prop, you can access the variables from the [base config](/src/Theme/base.config.ts).
 
 
-#### Contributing
+## Contributing
+
+- Make sure whatever new Component/file you create is in `Typescript`.
+
+- Don't forget to add data-testid for actionables like buttons, menus etc.
 
-Make sure whatever new Component/file you create is in `Typescript`.
+- Setup proper tooling ([ESLint](https://eslint.org/) and [Prettier](https://prettier.io/)) in your editor. 
 
-Don't forget to add data-testid for actionables like buttons, menus etc.
+- `yarn lint` will be run before you push the changes, so whenever a push fails, check if there are any lint errors.
 
-Setup proper tooling(eslint and prettier) in your editor. 
+Read this [doc](../../DEVELOPER.MD) for the coding guidelines.
 
-`yarn lint` will be run before you push the changes, so whenever a push fails, check if there are any lint errors.
+## Community & Support
 
-Read this [doc](../../DEVELOPER.MD) for the coding guidelines
+-   [GitHub Issues](https://github.com/100mslive/web-sdks/issues) - Submit any bugs or errors you encounter using the Web SDKs.
+-   [Discord](https://discord.com/invite/kGdmszyzq2) - Hang out with the community members, share your projects or ask questions to get help from the 100ms team.
+-   [Contact](https://www.100ms.live/contact) - Reach out to 100ms team to get pricing information, understand how we can help you go live, or to learn more about the platform.

package/dist/{HLSView-E65JZSU4.js → HLSView-4B5MUDFR.js}

@@ -23,7 +23,7 @@ import {
   styled,
   usePollViewToggle,
   useTheme
-} from "./chunk-DWLYDCFC.js";
+} from "./chunk-KST24BRA.js";
 
 // src/Prebuilt/layouts/HLSView.jsx
 init_define_process_env();
@@ -984,4 +984,4 @@ var HLSView_default = HLSView;
 export {
   HLSView_default as default
 };
-//# sourceMappingURL=HLSView-E65JZSU4.js.map
+//# sourceMappingURL=HLSView-4B5MUDFR.js.map

package/dist/Prebuilt/common/constants.d.ts

@@ -42,7 +42,6 @@ export declare const APP_DATA: {
     disableNotifications: string;
     pollState: string;
     background: string;
-    sheet: string;
 };
 export declare const UI_SETTINGS: {
     isAudioOnly: string;
@@ -59,10 +58,6 @@ export declare const SIDE_PANE_OPTIONS: {
     STREAMING: string;
     POLLS: string;
     VB: string;
-    ROOM_DETAILS: string;
-};
-export declare const SHEET_OPTIONS: {
-    ROOM_DETAILS: string;
 };
 export declare const POLL_STATE: {
     pollInView: string;
@@ -84,9 +79,9 @@ export declare const SUBSCRIBED_NOTIFICATIONS: {
 export declare const CREATE_ROOM_DOC_URL = "https://github.com/100mslive/100ms-web/wiki/Creating-and-joining-a-room";
 export declare const HLS_TIMED_METADATA_DOC_URL = "https://www.100ms.live/docs/javascript/v2/how--to-guides/record-and-live-stream/hls/hls-timed-metadata";
 export declare const REMOTE_STOP_SCREENSHARE_TYPE = "REMOTE_STOP_SCREENSHARE";
-export declare const isChrome: boolean;
-export declare const isFirefox: boolean;
-export declare const isSafari: boolean;
+export declare const isChrome: boolean | undefined;
+export declare const isFirefox: boolean | undefined;
+export declare const isSafari: boolean | undefined;
 export declare const isIOS: boolean;
 export declare const isMacOS: boolean;
 export declare const isAndroid: boolean;
@@ -114,3 +109,4 @@ export declare enum QUESTION_TYPE {
 }
 export declare const ROLE_CHANGE_DECLINED = "role_change_declined";
 export declare const DEFAULT_PORTAL_CONTAINER = ".prebuilt-container";
+export declare const TEST_AUDIO_URL = "https://100ms.live/test-audio.wav";

package/dist/Prebuilt/components/AudioVideoToggle.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+export declare const Options: ({ options, selectedDeviceId, onClick, }: {
+    options?: (MediaDeviceInfo | InputDeviceInfo)[] | undefined;
+    selectedDeviceId?: string | undefined;
+    onClick: (deviceId: string) => Promise<void>;
+}) => React.JSX.Element;
+export declare const AudioVideoToggle: ({ hideOptions }: {
+    hideOptions?: boolean | undefined;
+}) => React.JSX.Element | null;

package/dist/Prebuilt/components/IconButtonWithOptions/IconButtonWithOptions.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+export declare const IconButtonWithOptions: ({ disabled, onDisabledClick, tooltipMessage, icon, children, active, hideOptions, onClick, }: {
+    onClick: () => void;
+    onDisabledClick: () => void;
+    icon: React.ReactNode;
+    children: React.ReactNode;
+    hideOptions?: boolean | undefined;
+    active: boolean;
+    disabled?: boolean | undefined;
+    tooltipMessage?: string | undefined;
+}) => React.JSX.Element;

package/dist/Prebuilt/components/Polls/common/utils.d.ts

@@ -1 +1 @@
-export declare const getFormattedTime: (milliseconds: number | undefined, precise?: boolean) => string;
+export declare const getFormattedTime: (milliseconds: number | undefined) => string;

package/dist/Prebuilt/components/hooks/useAudioOutputTest.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+export declare const useAudioOutputTest: ({ deviceId }: {
+    deviceId: string;
+}) => {
+    playing: boolean;
+    setPlaying: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    audioRef: import("react").MutableRefObject<HTMLAudioElement | null>;
+};

package/dist/Prebuilt/provider/roomLayoutProvider/hooks/useRoomLayoutScreen.d.ts

@@ -16,8 +16,3 @@ export declare function useRoomLayoutConferencingScreen(): {
 export declare function useRoomLayoutLeaveScreen(): {
     isLeaveScreenEnabled: boolean;
 };
-export declare function useRoomLayoutHeader(): {
-    title: string;
-    description: string;
-    details: (string | Date)[];
-};