Merge pull request #9 from dyte-io/feat/create-your-own-ui

feat(create-your-own-ui-sample): added sample to speed up integration for vanilla js

Author: ravindra-dyte

.github/workflows/deploy.yml

@@ -0,0 +1,25 @@
+name: Deploy
+
+on:
+    push:
+        branches:
+            - main
+
+jobs:
+    deploy:
+        runs-on: ubuntu-latest
+        name: Deploy
+        steps:
+            - uses: actions/checkout@v4
+
+            - run: |
+                # npm install - Not needed
+                npm run build
+
+            - name: Deploy to Production
+              uses: cloudflare/wrangler-action@v3
+              with:
+                  apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
+                  accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
+                  wranglerVersion: "4.19.1"
+                  command: pages deploy ./dist

README.md

@@ -1,8 +1,6 @@
-# Dyte UI Kit - HTML Samples
+# RealtimeKit - HTML Samples
 
-This repository consists of all the different ways in which you can use Dyte's
-UI Kit and other packages to its full extent to get the best live audio/video
-experience.
+This repository consists of all the different ways in which you can use RealtimeKit and other packages to its full extent to get the best live audio/video experience.
 
 ## Samples
 
@@ -11,6 +9,7 @@ Here are the list of available samples at the moment.
 1. [Default Meeting UI](./samples/default-meeting-ui/)
 2. [Using Background Transformer to modify your background](./samples/with-background-transformer/)
 3. [Background Transformer UI sample](./samples/background-transformer-ui/)
+4. [Create Your Own UI](./samples/create-your-own-ui/)
 
 ## Usage
 

package.json

@@ -2,6 +2,7 @@
   "name": "html-samples",
   "scripts": {
     "format": "prettier -w samples",
+    "build": "npm run postbuild",
     "postbuild": "./postbuild.sh",
     "deploy": "wrangler pages deploy ./dist"
   },

samples/background-transformer-ui/README.md

@@ -1,6 +1,6 @@
 # Background Transformer UI sample
 
-This sample showcases how you can modify your background while in a Dyte video
+This sample showcases how you can modify your background while in a RealtimeKit video
 call with the
 [`@cloudflare/realtimekit-virtual-background`](https://www.npmjs.com/package/@cloudflare/realtimekit-virtual-background)
 package.

samples/create-your-own-ui/README.md

@@ -0,0 +1,150 @@
+# Create Your Own UI Sample
+
+This sample demonstrates how to create a custom meeting UI using Cloudflare RealtimeKit with vanilla HTML, CSS, and JavaScript. It showcases custom components for setup screen, in-meeting experience, control bar, sidebar, and media preview functionality.
+
+## Features
+
+- **Custom Setup Screen**: Participant preview with media settings
+- **Media Preview Modal**: Audio and video device selection with preview
+- **Custom Control Bar**: Meeting controls with custom sidebar toggle
+- **Custom Sidebar**: Standard tabs (chat, participants, polls, plugins) plus custom "warnings" tab
+- **Custom Meeting Header**: Logo, indicators, meeting title, and controls
+- **Responsive Design**: Built with Tailwind CSS for modern UI
+- **State Management**: Uses simple reactive state implementation
+- **No Build Steps**: Pure HTML/CSS/JS implementation
+
+## Getting Started
+
+### Prerequisites
+
+- A valid Cloudflare RealtimeKit auth token
+- A local web server (like `serve` or `live-server`)
+
+### Installation
+
+1. Clone or download this repository
+2. Navigate to the `html-samples` directory
+3. Install dependencies (optional, for development server):
+   ```bash
+   npm install
+   ```
+
+### Running the Sample
+
+1. Start a local server:
+   ```bash
+   npx serve samples/create-your-own-ui
+   ```
+
+2. Open your browser and navigate to:
+   ```
+   http://localhost:3000/?authToken=<your-auth-token>
+   ```
+
+   Replace `<your-auth-token>` with your actual Cloudflare RealtimeKit auth token.
+
+## Project Structure
+
+```
+create-your-own-ui/
+├── index.html                 # Main HTML file
+├── store.js                   # Simple reactive state management
+├── utils.js                   # Utility functions
+├── types.js                   # Type definitions
+├── components/                # Component files
+│   ├── setup-screen.js/css    # Custom setup screen
+│   ├── custom-rtk-meeting.js/css # Main meeting wrapper
+│   ├── in-meeting.js/css      # In-meeting layout
+│   ├── meeting-header.js/css  # Meeting header
+│   ├── meeting-control-bar.js/css # Control bar
+│   ├── meeting-sidebar.js/css # Custom sidebar
+│   ├── media-preview-modal.js/css # Media preview
+│   ├── audio-preview.js/css   # Audio device preview
+│   └── video-preview.js/css   # Video device preview
+└── README.md                  # This file
+```
+
+## Key Components
+
+### Setup Screen
+- Participant tile with avatar and name tag
+- Audio visualizer
+- Mic/camera toggles
+- Media preview modal access
+- Name editing (if permitted)
+- Join button
+
+### Media Preview Modal
+- Tabbed interface for audio/video settings
+- Device selection dropdowns
+- Audio visualizer for microphone
+- Video preview tile
+- Speaker test functionality
+
+### Control Bar
+- Left: Fullscreen, settings, screen share
+- Center: Mic, camera, stage, leave, more menu
+- Right: Chat, polls, participants, plugins, custom sidebar toggle
+
+### Custom Sidebar
+- Standard RTK tabs: chat, participants, polls, plugins
+- Custom "warnings" tab with example content
+- Responsive design
+
+## Customization
+
+### Adding New Components
+1. Create `.js` and `.css` files in the `components/` directory
+2. Add script and link tags to `index.html`
+3. Implement the component using the module pattern
+4. Ensure proper cleanup in the component's cleanup function
+
+### State Management
+- Use `window.StatesStore.statesStore` for RTK states
+- Use `window.StatesStore.customStatesStore` for custom states
+- Subscribe to state changes using `window.StatesStore.subscribe()`
+
+### Styling
+- Uses Tailwind CSS via CDN
+- Component-specific styles in individual CSS files
+- Dark theme with consistent color scheme
+
+## Dependencies
+
+- **Cloudflare RealtimeKit**: Core meeting functionality
+- **Cloudflare RealtimeKit UI**: Pre-built UI components
+- **Simple Reactive State**: Custom reactive state implementation
+- **Tailwind CSS**: Utility-first CSS framework
+
+All dependencies are loaded via CDN, no build process required.
+
+## Browser Support
+
+This sample works in modern browsers that support:
+- ES6 modules
+- Custom elements
+- WebRTC
+- Modern CSS features
+
+## Troubleshooting
+
+### Common Issues
+
+1. **Auth Token Error**: Ensure you're passing a valid `authToken` in the URL
+2. **Components Not Loading**: Check browser console for script loading errors
+3. **State Not Updating**: Verify reactive state subscriptions are properly set up
+4. **Media Devices**: Ensure browser permissions for camera/microphone access
+
+### Debug Mode
+
+The meeting object is exposed on `window.meeting` for debugging purposes. Open browser dev tools and inspect the meeting object to troubleshoot issues.
+
+### State Subscription Issues
+
+If components aren't updating when states change, ensure you're subscribing to the store object, not the nested states:
+- ✅ `window.StatesStore.subscribe(statesStore, callback)`
+- ❌ `window.StatesStore.subscribe(statesStore.states, callback)`
+
+## License
+
+This sample is provided as-is for demonstration purposes.

samples/create-your-own-ui/components/audio-preview.css

@@ -0,0 +1,27 @@
+/* Audio Preview Component Styles */
+
+#audio-device-select,
+#speaker-device-select {
+  border: 1px solid #333;
+  border-radius: 4px;
+}
+
+#audio-device-select:focus,
+#speaker-device-select:focus {
+  outline: none;
+  border-color: #2160FD;
+}
+
+#test-speaker-btn {
+  background-color: #1F1F1F !important;
+  border: 1px solid #333;
+}
+
+#test-speaker-btn:hover {
+  background-color: #333 !important;
+}
+
+#audio-visualizer {
+  margin-top: 8px;
+  height: 40px;
+}