Skip to content
This repository was archived by the owner on Oct 30, 2025. It is now read-only.

Commit f592e3f

Browse files
ravindra-dyteravindra-dyte
authored
Merge pull request #5 from dyte-io/feat/create-your-own-ui-sample
feat(create-your-own-ui): added sample to speed up custom ui development
2 parents 15ce8fc + e617b26 commit f592e3f

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

53 files changed

+1812
-91
lines changed

‎.github/ISSUE_TEMPLATE/new-ui-design-app-clone.md‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
---
2+
name: New UI Design/App Clone
3+
about: Suggest an idea for this Sample App repo
4+
title: ''
5+
labels: ''
6+
assignees: ''
7+
8+
---
9+
10+
**Is your UI request related to an Video/Livestreaming Application? Please describe.**
11+
A clear and concise description of what the UI islike. Ex. I've always wanted to use livestreaming/video calling when [...]
12+
13+
**Describe the solution you'd like**
14+
A clear and concise description of what you want to happen.
15+
16+
**Describe alternatives you've considered**
17+
A clear and concise description of any alternative solutions or features you've considered.
18+
19+
**Additional context**
20+
Add any other context or screenshots about the feature request here.

‎.github/ISSUE_TEMPLATE/ui-update-to-existing-sample.md‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
---
2+
name: UI Update to Existing Sample
3+
about: Suggest an idea for upgrading the current UI/UX of one of the current samples
4+
title: ''
5+
labels: hacktoberfest
6+
assignees: ''
7+
8+
---
9+
10+
**Is your UI update related to a current sample app? Please describe.**
11+
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
12+
13+
**Describe the update/upgrade you'd like**
14+
A clear and concise description of what you want to happen.
15+
16+
**Describe alternatives you've considered**
17+
A clear and concise description of any alternative solutions or features you've considered.
18+
19+
**Additional context**
20+
Add any other context or screenshots about the feature request here.

‎.github/workflows/deploy.yml‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
name: Deploy
2+
3+
on:
4+
push:
5+
branches:
6+
- main
7+
8+
jobs:
9+
deploy:
10+
runs-on: ubuntu-latest
11+
name: Deploy
12+
steps:
13+
- uses: actions/checkout@v4
14+
15+
- run: |
16+
npm install
17+
npm run build
18+
19+
- name: Deploy to Production
20+
uses: cloudflare/wrangler-action@v3
21+
with:
22+
apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
23+
accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
24+
wranglerVersion: "4.19.1"
25+
command: pages deploy ./dist

‎.gitignore‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
1-
node_modules
1+
node_modules/
2+
dist/
23

34
.DS_Store
4-
pnpm-lock.yaml
55
yarn.lock
6+
pnpm-lock.yaml
7+
bun.lockb
8+
package-lock.json

‎README.md‎

Lines changed: 32 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,50 @@
1-
# Dyte Angular UI Kit Samples
2-
3-
This repository consists of all the different ways in which you can use Dyte's
4-
Angular UI Kit and other packages to its full extent to get the best live audio/video
5-
experience.
1+
# Cloudflare RealtimeKit Angular UI Kit Samples
2+
3+
## Contents
4+
1. [Introduction](#introduction)
5+
2. [About This Repository](#about-this-repository)
6+
3. [Setting Up the Project](#setting-up-the-project)
7+
- [Prerequisites](#prerequisites)
8+
- [Installation Steps](#installation-steps)
9+
4. [Usage](#usage)
10+
5. [Contributing](#contributing)
11+
6. [License](#license)
12+
13+
## Introduction
14+
Cloudflare RealtimeKit is designed to enable seamless and efficient video interactions in various applications, ranging from virtual meetings to interactive live streaming. The offerings are known for their robust performance, scalability, and ease of integration.
15+
16+
## About This Repository
17+
This repository consists of all the different ways in which you can use Cloudflare RealtimeKit's
18+
Angular UI Kit and other packages to its full extent to get the best live
19+
audio/video experience.
620

721
## Samples
822

923
Here are the list of available samples at the moment.
1024

1125
1. [Default Meeting UI](./samples/default-meeting-ui/)
1226
2. [Using Background Transformer to modify your background](./samples/with-background-transformer/)
27+
3. [Create Your Own UI](./samples/create-your-own-ui/)
1328

1429
## Usage
1530

1631
To use these samples you would need to do the following steps:
1732

1833
First, you'll need to create a meeting and add a participant to that meeting.
1934

20-
You can do so by going to https://docs.dyte.io/api?v=v2 and run the APIs in the
35+
You can do so by going to https://docs.realtime.cloudflare.com/api?v=v2 and run the APIs in the
2136
API runner itself so you can quickly get started.
2237

23-
Make sure you've created your Dyte account at https://dev.dyte.io and have your
38+
Make sure you've created your Cloudflare RealtimeKit account at https://dev.realtime.cloudflare.com and have your
2439
`Organization ID` and `API Key` ready to use from the
25-
[API Keys section](https://dev.dyte.io/apikeys).
40+
[API Keys section](https://dev.realtime.cloudflare.com/apikeys).
2641

2742
1. Go to
28-
[Create Meeting API](https://docs.dyte.io/api/?v=v2#/operations/create_meeting)
43+
[Create Meeting API](https://docs.realtime.cloudflare.com/api/?v=v2#/operations/create_meeting)
2944
and add your credentials and run the API with your request body, note the
3045
`id` you receive in resonse, this is the meeting id.
3146
2. Go to
32-
[Add Participant API](https://docs.dyte.io/api/?v=v2#/operations/add_participant)
47+
[Add Participant API](https://docs.realtime.cloudflare.com/api/?v=v2#/operations/add_participant)
3348
and add a participant to the meeting with the `meetingId` you received in
3449
previous API call.
3550

@@ -46,21 +61,24 @@ Here are steps to try out the samples:
4661
git clone git@github.com:dyte-io/angular-samples.git
4762
```
4863

49-
2. Change directory to the sample you want to try, for example: in `default-meeting-ui`:
64+
2. Change directory to the sample you want to try, for example: in
65+
`default-meeting-ui`:
5066

5167
```sh
5268
cd samples/default-meeting-ui
5369
```
5470

55-
3. Install the packages with your preferred package manager and start a development server and open up the page.
71+
3. Install the packages with your preferred package manager and start a
72+
development server and open up the page.
5673

5774
```sh
5875
npm install
5976
# and to start a dev server
60-
npm start
77+
npm run dev
6178
```
6279

63-
4. Load the dev server in your browser and make sure you pass the `authToken` query in the URL.
80+
4. Load the dev server in your browser and make sure you pass the `authToken`
81+
query in the URL.
6482

6583
```
6684
http://localhost:4200/?authToken=<your-token>

‎index.html‎

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
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>Angular Samples - Cloudflare RealtimeKit</title>
7+
<style>
8+
body {
9+
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
10+
margin: 0;
11+
padding: 0;
12+
background-color: #f0f2f5; /* Light gray background */
13+
color: #333;
14+
display: flex;
15+
justify-content: center;
16+
align-items: flex-start; /* Align to top */
17+
min-height: 100vh;
18+
padding-top: 40px; /* Add some padding at the top */
19+
}
20+
#root {
21+
background-color: #ffffff; /* White card background */
22+
padding: 30px 40px;
23+
border-radius: 8px;
24+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
25+
width: 90%;
26+
max-width: 700px;
27+
}
28+
h1 {
29+
color: #f38020; /* Cloudflare Orange */
30+
text-align: center;
31+
margin-bottom: 30px;
32+
font-size: 28px;
33+
font-weight: 600;
34+
}
35+
ul {
36+
list-style-type: none;
37+
padding: 0;
38+
margin: 0;
39+
}
40+
li {
41+
margin-bottom: 15px;
42+
border-bottom: 1px solid #e0e0e0; /* Light separator line */
43+
padding-bottom: 15px;
44+
}
45+
li:last-child {
46+
border-bottom: none;
47+
margin-bottom: 0;
48+
padding-bottom: 0;
49+
}
50+
a {
51+
text-decoration: none;
52+
color: #0053a0; /* Cloudflare Blue */
53+
font-size: 18px;
54+
font-weight: 500;
55+
display: block; /* Make the whole area clickable */
56+
padding: 8px 0;
57+
transition: color 0.2s ease-in-out, transform 0.2s ease-in-out;
58+
}
59+
a:hover {
60+
color: #f38020; /* Cloudflare Orange on hover */
61+
transform: translateX(5px);
62+
}
63+
/* Responsive adjustments */
64+
@media (max-width: 600px) {
65+
#root {
66+
padding: 20px;
67+
}
68+
h1 {
69+
font-size: 24px;
70+
}
71+
a {
72+
font-size: 16px;
73+
}
74+
}
75+
</style>
76+
</head>
77+
<body>
78+
<div id="root">
79+
<h1>Cloudflare RealtimeKit Angular Samples</h1>
80+
<ul>
81+
<li><a href="/samples/create-your-own-ui/dist">Create Your Own UI</a></li>
82+
<li><a href="/samples/default-meeting-ui/dist">Default Meeting UI</a></li>
83+
<li><a href="/samples/with-video-transformer/dist">With Video Transformer</a></li>
84+
</ul>
85+
</div>
86+
</body>
87+
</html>

‎package.json‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
{
2+
"private": true,
3+
"workspaces": [
4+
"samples/*"
5+
],
6+
"scripts": {
7+
"update-cloudflare-realtime-deps": "./update-cloudflare-realtime-deps.sh",
8+
"build": "npm run build --workspaces --if-present && npm run postbuild",
9+
"postbuild": "./postbuild.sh",
10+
"format": "prettier -w .",
11+
"deploy": "wrangler pages deploy ./dist"
12+
},
13+
"devDependencies": {
14+
"prettier": "^2.8.0",
15+
"wrangler": "^4.19.2"
16+
},
17+
"prettier": {
18+
"singleQuote": true,
19+
"proseWrap": "always"
20+
}
21+
}
22+

‎postbuild.sh‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
#!/bin/bash
2+
3+
# Exit immediately if a command exits with a non-zero status.
4+
set -e
5+
6+
# Define the root directory for output and source samples
7+
OUTPUT_DIR="dist"
8+
SAMPLES_DIR="samples"
9+
10+
echo "Starting postbuild script..."
11+
12+
# Clean and create the main output directory
13+
echo "Preparing output directory: $OUTPUT_DIR"
14+
rm -rf "$OUTPUT_DIR"
15+
mkdir -p "$OUTPUT_DIR"
16+
17+
# Loop through each directory in the samples directory
18+
# Using find to be more robust with names and ensure we only get directories
19+
find "$SAMPLES_DIR" -mindepth 1 -maxdepth 1 -type d | while read sample_dir_path; do
20+
sample_name=$(basename "$sample_dir_path")
21+
source_dist_path="$sample_dir_path/dist"
22+
destination_sample_path="$OUTPUT_DIR/$sample_name"
23+
24+
# Check if the dist subdirectory exists within the sample directory
25+
if [ -d "$source_dist_path" ]; then
26+
echo "Found $source_dist_path for sample: $sample_name"
27+
echo "Moving $source_dist_path to $destination_sample_path"
28+
# Move the samples/sample_name/dist directory to dist/sample_name
29+
cp -r "$source_dist_path" "$destination_sample_path"
30+
else
31+
echo "No dist directory found in $sample_dir_path (for sample $sample_name). Skipping."
32+
fi
33+
done
34+
35+
# Copy and modify the main index.html to the root of the OUTPUT_DIR
36+
ROOT_INDEX_HTML_SOURCE="index.html"
37+
ROOT_INDEX_HTML_DEST="$OUTPUT_DIR/index.html"
38+
39+
if [ -f "$ROOT_INDEX_HTML_SOURCE" ]; then
40+
echo "Copying $ROOT_INDEX_HTML_SOURCE to $ROOT_INDEX_HTML_DEST"
41+
cp "$ROOT_INDEX_HTML_SOURCE" "$ROOT_INDEX_HTML_DEST"
42+
43+
echo "Updating links in $ROOT_INDEX_HTML_DEST"
44+
# Modify links from href="/samples/sample-name/dist" to href="/sample-name/"
45+
# Using a temporary file for sed in-place editing for compatibility (e.g. macOS sed)
46+
sed -i.bak 's|href="/samples/\([^/"]*\)/dist"|href="/\1/"|g' "$ROOT_INDEX_HTML_DEST"
47+
rm -f "${ROOT_INDEX_HTML_DEST}.bak" # Remove backup file created by sed -i
48+
echo "Links updated in $ROOT_INDEX_HTML_DEST"
49+
else
50+
echo "Warning: $ROOT_INDEX_HTML_SOURCE not found in the root directory."
51+
fi
52+
53+
echo "Postbuild script finished successfully."

‎samples/create-your-own-ui/.editorconfig‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
# Editor configuration, see https://editorconfig.org
2+
root = true
3+
4+
[*]
5+
charset = utf-8
6+
indent_style = space
7+
indent_size = 2
8+
insert_final_newline = true
9+
trim_trailing_whitespace = true
10+
11+
[*.ts]
12+
quote_type = single
13+
14+
[*.md]
15+
max_line_length = off
16+
trim_trailing_whitespace = false

‎samples/create-your-own-ui/.gitignore‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
# See http://help.github.com/ignore-files/ for more about ignoring files.
2+
3+
# Compiled output
4+
/dist
5+
/tmp
6+
/out-tsc
7+
/bazel-out
8+
9+
# Node
10+
/node_modules
11+
npm-debug.log
12+
yarn-error.log
13+
14+
# IDEs and editors
15+
.idea/
16+
.project
17+
.classpath
18+
.c9/
19+
*.launch
20+
.settings/
21+
*.sublime-workspace
22+
23+
# Visual Studio Code
24+
.vscode/*
25+
!.vscode/settings.json
26+
!.vscode/tasks.json
27+
!.vscode/launch.json
28+
!.vscode/extensions.json
29+
.history/*
30+
31+
# Miscellaneous
32+
/.angular/cache
33+
.sass-cache/
34+
/connect.lock
35+
/coverage
36+
/libpeerconnection.log
37+
testem.log
38+
/typings
39+
40+
# System files
41+
.DS_Store
42+
Thumbs.db

0 commit comments

Comments
 (0)