Merge pull request #35 from dyte-io/feat/screenshare-focused-ui-with-…

…custom-addons feat(screenshare-focused-custom-addons-ui): added screenshare focused UI with custom addon code
dyte-io · Aug 9, 2024 · ccaa203 · ccaa203
2 parents e1761e1 + 5a2ef3d
commit ccaa203
Show file tree

Hide file tree

Showing 38 changed files with 4,991 additions and 0 deletions.
diff --git a/samples/screenshare-focused-ui-with-custom-addons/.gitignore b/samples/screenshare-focused-ui-with-custom-addons/.gitignore
@@ -0,0 +1,23 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/samples/screenshare-focused-ui-with-custom-addons/README.md b/samples/screenshare-focused-ui-with-custom-addons/README.md
@@ -0,0 +1,23 @@
+# Screenshare focused UI with custom addons such as Hand raise, Reactions & video middleware
+
+Unlike traditional samples where devs are given a fixed UI, this sample let's you pick your own variant from a variety of variants for a component.
+
+For example, There are a few variants of [Setup Screen component file](./src/components/setup-screen.tsx).
+
+```tsx
+export default SetupScreenPreBuilt;
+
+export default CustomSetupScreenWithPrebuiltMediaPreviewModal;
+
+export default CustomSetupScreenWithCustomMediaPreviewModal;
+```
+
+All you have to do, to pick a variant of your choice, is to comment out the undesired variants and only uncomment the one you want. Once you have made up your mind, you can copy paste the code to your application.
+
+## How to run?
+
+1. Run `npm install` in the current [folder](./)
+2. Run `npm run dev` to start a server. See the port in the logs of this command. Default is 5173.
+3. Open browser with the URL `http://localhost:5173/?authToken=PUT_PARTICIPANT_AUTH_TOKEN_HERE`. Change the port if needed.
+
+To learn more, refer to [the source code](./src/App.tsx)
diff --git a/samples/screenshare-focused-ui-with-custom-addons/index.html b/samples/screenshare-focused-ui-with-custom-addons/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Custom Meeting UI - Dyte UI Kit</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>