@100mslive/roomkit-react 0.2.2 → 0.2.3-alpha.1

package/README.md

@@ -42,3 +42,56 @@ For additional props, refer the [docs](https://www.100ms.live/docs/javascript/v2
 
 
 Prebuilt customisations are available on [100ms dashboard](https://dashboard.100ms.live)
+
+
+#### Understanding the flow:
+
+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)
+
+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(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:
+
+[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.
+
+When [`HMSThemeProvider`](src/Theme/ThemeProvider.tsx) is used at the top level, all the variables will be available for all the children under this component tree.
+
+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
+
+Make sure whatever new Component/file you create is in `Typescript`.
+
+Don't forget to add data-testid for actionables like buttons, menus etc.
+
+Setup proper tooling(eslint and prettier) in your editor. 
+
+`yarn lint` will be run before you push the changes, so whenever a push fails, check if there are any lint errors.
+
+Read this [doc](../../DEVELOPER.MD) for the coding guidelines

package/dist/{HLSView-LVQBZ4PX.js → HLSView-XUM6YSBP.js}

@@ -23,7 +23,7 @@ import {
   styled,
   usePollViewToggle,
   useTheme
-} from "./chunk-AMKCMJY4.js";
+} from "./chunk-USVBISD5.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-LVQBZ4PX.js.map
+//# sourceMappingURL=HLSView-XUM6YSBP.js.map

package/dist/Prebuilt/components/VirtualBackground/VBHandler.d.ts

@@ -9,6 +9,8 @@ export declare class VBPlugin {
     getName: () => string | undefined;
     setBlur: (blurPower: number) => Promise<void>;
     setBackground: (mediaURL: string) => Promise<void>;
+    setPreset: (preset: string) => void;
+    getPreset: () => string;
     removeEffects: () => Promise<void>;
     reset: () => void;
 }