Customizing your app

Table of Contents

• Configure UI layout
• Tile Aspect Ratio
• Theme and Color
• Playlist Tracks(Watch Party)

Configure UI layout

Depending on the value of REACT_APP_POLICY_CONFIG in .env, you can customize which roles should be displayed in center stage and which roles should be display in side pane.

The value of REACT_APP_POLICY_CONFIG should be a JSON stringified object of the structure:

type HMSRoleName = string;

/**
 * undefined means none
 * empty array [] for all roles
 */
interface RoleConfig {
  center?: HMSRoleName[];
  sidepane?: HMSRoleName[];
  selfRoleChangeTo?: HMSRoleName[];
  remoteRoleChangeFor?: HMSRoleName[];
}

interface PolicyConfig {
  [role: string]: RoleConfig;
}

Example: REACT_APP_POLICY_CONFIG = "{"trainer":{"center": ["student"],"sidepane":["trainer"]}}"

It is used in the app as:

const envPolicyConfig = JSON.parse(process.env.REACT_APP_POLICY_CONFIG || "{}");

Tile Aspect Ratio

REACT_APP_TILE_SHAPE can be used for this, the format is width-height e.g. 1-1 for square tiles, 4-3 for landscape tiles and 16-9 for wide tiles.

Theme and Color

Env - REACT_APP_THEME

dark - for dark theme light - for light theme

Env - REACT_APP_COLOR

You can give a hex code the color will be used for buttons, border audio level and such.

Playlist Tracks(Watch Party)

This is a way to play any music or any videos from a url for everyone in the room to see/vibe to together. The support is only for file formats which are supported by the native audio and video elements, but it's super cool.

REACT_APP_AUDIO_PLAYLIST - a list of audio tracks which can be played by a person in the room for everyone REACT_APP_VIDEO_PLAYLIST - a list of video tracks which can be played by a person in the room for everyone

That's it for the basics. You could continue to Build and deploy your app or do Further Reading to understand more about 100ms-web.

---

Next Section	Building and Deployment, Further Reading
Previous Section	Creating and Joining the Room