Customize Your App
Overview
This sample app allows UI customization like updating logo, tile aspect ratio, theme, etc. To make these customizations, you can use various environment variables in the env file.
Change logo
You can use REACT_APP_LOGO
variable to change your logo in the sample app to customize the UI as per your brand.
Example:
REACT_APP_LOGO='https://example.com/public/logo.svg'
Change tile aspect ratio
You can use the REACT_APP_TILE_SHAPE
variable to customize the aspect ratio of video tiles; the format is width-height
.
Examples:
REACT_APP_TILE_SHAPE='1-1'
: for square tilesREACT_APP_TILE_SHAPE='4-3'
: for landscape tilesREACT_APP_TILE_SHAPE='16-9'
: for wide tilesREACT_APP_TILE_SHAPE='9-16'
: for mobile view
Change theme
- Use the
REACT_APP_THEME
variable to switch the theme between dark and light mode- Examples:
REACT_APP_THEME='dark'
: for dark themeREACT_APP_THEME='light'
: for light theme
- Examples:
Change font
You can use REACT_APP_FONT
variable to update the font used in the app. The font must be imported in your styling for it to work.
Example:
REACT_APP_FONT='Roboto'
Playlist tracks (watch party)
-
You can play music or videos from a URL for everyone in the room to watch together. The support is only for file formats that are supported by the native audio and video elements, but it's super cool.
-
You can configure the list of audio/video tracks that can be played by a person in the room for everyone as follows:
-
Example: Audio playlist
REACT_APP_AUDIO_PLAYLIST=[ { "name": "Audio1", "id": "audio1", "metadata": { "description": "Artist1" }, "url": "https://d2qi07yyjujoxr.cloudfront.net/webapp/playlist/audio1.mp3", "type": "audio" }, { <details of next audio file> } ]
-
Example: Video playlist
REACT_APP_VIDEO_PLAYLIST=[ { "name": "Video2", "id": "video2", "url": "https://d2qi07yyjujoxr.cloudfront.net/webapp/playlist/video2.mp4", "type": "video" }, { <details of next video file> } ]
-