CamcelCase for enum values

src/video-grid/VideoGrid.stories.tsx

@@ -41,7 +41,7 @@ export const ParticipantsTest = () => {
         member: new RoomMember("!fake:room.id", `@user${i}:fake.dummy`),
         focused: false,
         presenter: false,
-        connectionState: ConnectionState.CONNECTED,
+        connectionState: ConnectionState.Connected,
       })),
     [participantCount]
   );
@@ -80,7 +80,7 @@ export const ParticipantsTest = () => {
               key={item.id}
               name={`User ${item.id}`}
               disableSpeakingIndicator={items.length < 3}
-              connectionState={ConnectionState.CONNECTED}
+              connectionState={ConnectionState.Connected}
               {...rest}
             />
           )}

src/video-grid/VideoTile.tsx

@@ -73,7 +73,7 @@ export const VideoTile = forwardRef<HTMLDivElement, Props>(
     const { t } = useTranslation();
 
     const toolbarButtons: JSX.Element[] = [];
-    if (connectionState == ConnectionState.CONNECTED && !isLocal) {
+    if (connectionState == ConnectionState.Connected && !isLocal) {
       toolbarButtons.push(
         <AudioButton
           key="localVolume"
@@ -97,15 +97,15 @@ export const VideoTile = forwardRef<HTMLDivElement, Props>(
 
     let caption: string;
     switch (connectionState) {
-      case ConnectionState.ESTABLISHING_CALL:
+      case ConnectionState.EstablishingCall:
         caption = t("{{name}} (Connecting...)", { name });
 
         break;
-      case ConnectionState.WAIT_MEDIA:
+      case ConnectionState.WaitMedia:
         // not strictly true, but probably easier to understand than, "Waiting for media"
         caption = t("{{name}} (Waiting for video...)", { name });
         break;
-      case ConnectionState.CONNECTED:
+      case ConnectionState.Connected:
         caption = name;
         break;
     }