Conversation
There was a problem hiding this comment.
Pull request overview
This PR refactors the video-player example app to properly demonstrate livestreaming functionality by splitting viewer and streamer capabilities into separate components and adding a UI for switching between modes.
Key Changes:
- Split monolithic
FishjamPlayercomponent into separateFishjamPlayerViewerandFishjamPlayerStreamercomponents - Added interactive UI with room name input and mode selection (stream vs view)
- Added required iOS and Android permissions for camera and microphone access
Reviewed changes
Copilot reviewed 5 out of 5 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| FishjamPlayerViewer.tsx | New component implementing viewer-only functionality for watching livestreams |
| FishjamPlayerStreamer.tsx | New component implementing streamer functionality for broadcasting livestreams |
| FishjamPlayer.tsx | Original component removed and functionality split into viewer/streamer components |
| app.json | Added camera/microphone permissions for iOS and Android platforms |
| App.tsx | Updated with new UI for room selection and toggling between streamer/viewer modes |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| export default FishjamPlayerViewer; | ||
|
|
||
| const styles = StyleSheet.create({ | ||
| playerContentContainer: { | ||
| flex: 1, | ||
| justifyContent: 'center', | ||
| alignItems: 'center', | ||
| } | ||
| }); |
There was a problem hiding this comment.
The styles constant is defined after the component export. Move the StyleSheet definition before the component export statement (line 55) to follow conventional component organization patterns where constants are defined before exports.
| export default FishjamPlayerViewer; | |
| const styles = StyleSheet.create({ | |
| playerContentContainer: { | |
| flex: 1, | |
| justifyContent: 'center', | |
| alignItems: 'center', | |
| } | |
| }); | |
| const styles = StyleSheet.create({ | |
| playerContentContainer: { | |
| flex: 1, | |
| justifyContent: 'center', | |
| alignItems: 'center', | |
| } | |
| }); | |
| export default FishjamPlayerViewer; |
| const { streamerToken } = await getSandboxLivestream(roomName, false); | ||
| await connect(streamerToken); | ||
| } catch (err) { | ||
| console.log(err); |
There was a problem hiding this comment.
Error logging uses console.log instead of console.error. Change to console.error(err) to properly categorize error output, matching the pattern used in FishjamPlayerViewer.tsx line 29.
| console.log(err); | |
| console.error(err); |
examples/video-player/app.json
Outdated
| "NSAllowsArbitraryLoads": true | ||
| }, | ||
| "NSCameraUsageDescription": "We need to access your camera for video calls.", | ||
| "NSMicrophoneUsageDescription": "We need to access your microphone so you can talk during calls.", |
There was a problem hiding this comment.
Removed trailing comma that would cause JSON parsing error in infoPlist configuration.
| "NSMicrophoneUsageDescription": "We need to access your microphone so you can talk during calls.", | |
| "NSMicrophoneUsageDescription": "We need to access your microphone so you can talk during calls." |
2 participants
Description
Improve video-player example app so that it actually allows to stream and view streams.
Motivation and Context
The video-player example was not working. Now it shows how to use livestreaming functionality.
Documentation impact
Types of changes
not work as expected)