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 tiles
• REACT_APP_TILE_SHAPE='4-3': for landscape tiles
• REACT_APP_TILE_SHAPE='16-9': for wide tiles
• REACT_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 theme
    • REACT_APP_THEME='light': for light theme

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>
        }
    ]