Skip to content

Commit e1761e1

Browse files
ravindra-dyteravindra-dyte
authored
Merge pull request #32 from dyte-io/feat/WEB-3796-custom-dyte-meeting
feat(build-your-own-ui-sample): added build your own UI sample that showcases end to end customisation at one place
2 parents c40ddee + aaf7c8b commit e1761e1

29 files changed

+4270
-0
lines changed

‎samples/create-your-own-ui/.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/create-your-own-ui/README.md

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
# Create Your Own UI
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/create-your-own-ui/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)