FCE-1678 / improve livestream example#378
Merged
Merged
Conversation
Contributor
There was a problem hiding this comment.
Pull Request Overview
This PR enhances the React livestream example by integrating both broadcasting and viewing flows, along with full Tailwind and UI component support.
- Configures Vite and TypeScript for path aliases and Tailwind CSS integration
- Introduces a shared
cnutility and new UI components (button, select, label, card, input, toaster) - Implements
BroadcasterandLivestreamViewercomponents withVideoPlayerand toast notifications
Reviewed Changes
Copilot reviewed 20 out of 25 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| examples/react-client/livestreaming/vite.config.ts | Added path alias, Tailwind plugin, removed custom port |
| examples/react-client/livestreaming/tsconfig.json | Set baseUrl and paths for @/* alias |
| examples/react-client/livestreaming/src/main.tsx | Imported global CSS and added Toaster |
| examples/react-client/livestreaming/src/lib/utils.ts | Created cn helper combining clsx & twMerge |
| examples/react-client/livestreaming/src/index.css | Defined theme variables and base styles |
| examples/react-client/livestreaming/src/components/ui/toaster.tsx | Added styled toast container |
| examples/react-client/livestreaming/src/components/ui/select.tsx | New Select component wrappers |
| examples/react-client/livestreaming/src/components/ui/label.tsx | New Label wrapper for Radix UI |
| examples/react-client/livestreaming/src/components/ui/input.tsx | Styled input component |
| examples/react-client/livestreaming/src/components/ui/card.tsx | Card layout components |
| examples/react-client/livestreaming/src/components/ui/button.tsx | Button variants via cva |
| examples/react-client/livestreaming/src/components/VideoPlayer.tsx | Video element wrapper with controls |
| examples/react-client/livestreaming/src/components/LivestreamViewer.tsx | Viewer UI and useLivestream integration |
| examples/react-client/livestreaming/src/components/Broadcaster.tsx | Broadcaster UI with device setup and join logic |
| examples/react-client/livestreaming/src/components/App.tsx | Main demo layout with both flows |
| examples/react-client/livestreaming/package.json | Updated name, dependencies for UI and Tailwind |
| examples/react-client/livestreaming/components.json | Shadcn UI config and aliases |
| examples/react-client/livestreaming/README.md | Demo usage instructions |
| examples/react-client/README.md | Updated example list entry |
Comments suppressed due to low confidence (3)
examples/react-client/livestreaming/README.md:37
- The UI no longer prompts for a WHEP URL, but this step still appears in the README. Update the instructions to reflect the hard-coded URL or add an input field to the viewer.
1. Enter the **WHEP URL** (usually your Fishjam server's WHEP endpoint)
examples/react-client/README.md:15
- The link path points to
./livestream-viewerbut the directory was renamed tolivestreaming. Update the path to./livestreamingfor consistency.
- [Livestreaming](./livestream-viewer) - example of broadcasting and viewing a live stream
examples/react-client/livestreaming/vite.config.ts:11
- The
portconfiguration was removed from the dev server settings. If you need to run the example on port 3007 as before, re-addport: 3007underserver.
},
PiotrWodecki
approved these changes
Jun 30, 2025
PiotrWodecki
left a comment
PiotrWodecki
left a comment
Member
There was a problem hiding this comment.
I would add some error handling for the viewer (blocking), LGTM apart from that
Maybe consider linking this example in the docs somewhere
dawidmatyjasik
left a comment
dawidmatyjasik
left a comment
There was a problem hiding this comment.
Good job, just dropped a couple of small suggestions to make it even better! :)
dawidmatyjasik
approved these changes
Jun 30, 2025
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
Improves the livestream example by allowing to stream and view the stream.
Types of changes
not work as expected)