Skip to content

Commit 5a2ef3d

Browse files
ravindra-dyteravindra-dyte
committed
feat(screenshare-focused-custom-addons-ui): added screenshare focused UI with custom addon code
1 parent e1761e1 commit 5a2ef3d

38 files changed

+4991
-0
lines changed

‎samples/screenshare-focused-ui-with-custom-addons/.gitignore

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
9+
10+
node_modules
11+
dist-ssr
12+
*.local
13+
14+
# Editor directories and files
15+
.vscode/*
16+
!.vscode/extensions.json
17+
.idea
18+
.DS_Store
19+
*.suo
20+
*.ntvs*
21+
*.njsproj
22+
*.sln
23+
*.sw?

‎samples/screenshare-focused-ui-with-custom-addons/README.md

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
# Screenshare focused UI with custom addons such as Hand raise, Reactions & video middleware
2+
3+
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.
4+
5+
For example, There are a few variants of [Setup Screen component file](./src/components/setup-screen.tsx).
6+
7+
```tsx
8+
export default SetupScreenPreBuilt;
9+
10+
export default CustomSetupScreenWithPrebuiltMediaPreviewModal;
11+
12+
export default CustomSetupScreenWithCustomMediaPreviewModal;
13+
```
14+
15+
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.
16+
17+
## How to run?
18+
19+
1. Run `npm install` in the current [folder](./)
20+
2. Run `npm run dev` to start a server. See the port in the logs of this command. Default is 5173.
21+
3. Open browser with the URL `http://localhost:5173/?authToken=PUT_PARTICIPANT_AUTH_TOKEN_HERE`. Change the port if needed.
22+
23+
To learn more, refer to [the source code](./src/App.tsx)

‎samples/screenshare-focused-ui-with-custom-addons/index.html

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Custom Meeting UI - Dyte UI Kit</title>
7+
</head>
8+
<body>
9+
<div id="root"></div>
10+
<script type="module" src="/src/main.tsx"></script>
11+
</body>
12+
</html>

0 commit comments

Comments
 (0)