Merge branch 'livekit' into renovate/livekit-client-2.x

src/matrix-utils.ts

@@ -188,16 +188,8 @@ export async function initClient(
     await client.store.startup();
   }
 
-  if (client.initCrypto) {
-    await client.initCrypto();
-  }
-
-  await client.startClient({
-    // dirty hack to reduce chance of gappy syncs
-    // should be fixed by spotting gaps and backpaginating
-    initialSyncLimit: 50,
-  });
-
+  await client.initCrypto();
+  await client.startClient();
   await waitForSync(client);
 
   return client;

src/room/RoomAuthView.tsx

@@ -41,6 +41,8 @@ export const RoomAuthView: FC = () => {
     // @ts-ignore
     (e) => {
       e.preventDefault();
+      setLoading(true);
+
       const data = new FormData(e.target);
       const dataForDisplayName = data.get("displayName");
       const displayName =

src/state/TileViewModel.ts

@@ -167,6 +167,12 @@ export class UserMediaTileViewModel extends BaseTileViewModel {
    */
   public readonly videoEnabled: StateObservable<boolean>;
 
+  private readonly _cropVideo = new BehaviorSubject(true);
+  /**
+   * Whether the tile video should be contained inside the tile or be cropped to fit.
+   */
+  public readonly cropVideo = state(this._cropVideo);
+
   public constructor(
     id: string,
     member: RoomMember | undefined,
@@ -205,6 +211,10 @@ export class UserMediaTileViewModel extends BaseTileViewModel {
     this._locallyMuted.next(!this._locallyMuted.value);
   }
 
+  public toggleFitContain(): void {
+    this._cropVideo.next(!this._cropVideo.value);
+  }
+
   public setLocalVolume(value: number): void {
     this._localVolume.next(value);
   }

src/video-grid/VideoTile.module.css

@@ -73,7 +73,7 @@ borders don't support gradients */
 .videoTile video {
   inline-size: 100%;
   block-size: 100%;
-  object-fit: cover;
+  object-fit: contain;
   background-color: var(--cpd-color-bg-subtle-primary);
   /* This transform is a no-op, but it forces Firefox to use a different
   rendering path, one that actually clips the corners of <video> elements into
@@ -89,6 +89,10 @@ borders don't support gradients */
   object-fit: contain;
 }
 
+.videoTile.cropVideo video {
+  object-fit: cover;
+}
+
 .videoTile.videoMuted video {
   display: none;
 }

src/video-grid/VideoTile.tsx

@@ -206,9 +206,16 @@ const UserMediaTile = subscribe<UserMediaTileProps, HTMLDivElement>(
     const mirror = useStateObservable(vm.mirror);
     const speaking = useStateObservable(vm.speaking);
     const locallyMuted = useStateObservable(vm.locallyMuted);
+    const cropVideo = useStateObservable(vm.cropVideo);
     const localVolume = useStateObservable(vm.localVolume);
     const onChangeMute = useCallback(() => vm.toggleLocallyMuted(), [vm]);
+    const onChangeFitContain = useCallback(() => vm.toggleFitContain(), [vm]);
     const onSelectMute = useCallback((e: Event) => e.preventDefault(), []);
+    const onSelectFitContain = useCallback(
+      (e: Event) => e.preventDefault(),
+      [],
+    );
+
     const onChangeLocalVolume = useCallback(
       (v: number) => vm.setLocalVolume(v),
       [vm],
@@ -225,6 +232,13 @@ const UserMediaTile = subscribe<UserMediaTileProps, HTMLDivElement>(
           label={t("common.profile")}
           onSelect={onOpenProfile}
         />
+        <ToggleMenuItem
+          Icon={ExpandIcon}
+          label={t("video_tile.change_fit_contain")}
+          checked={cropVideo}
+          onChange={onChangeFitContain}
+          onSelect={onSelectFitContain}
+        />
       </>
     ) : (
       <>
@@ -235,6 +249,13 @@ const UserMediaTile = subscribe<UserMediaTileProps, HTMLDivElement>(
           onChange={onChangeMute}
           onSelect={onSelectMute}
         />
+        <ToggleMenuItem
+          Icon={ExpandIcon}
+          label={t("video_tile.change_fit_contain")}
+          checked={cropVideo}
+          onChange={onChangeFitContain}
+          onSelect={onSelectFitContain}
+        />
         {/* TODO: Figure out how to make this slider keyboard accessible */}
         <MenuItem as="div" Icon={VolumeIcon} label={null} onSelect={null}>
           <Slider
@@ -257,6 +278,7 @@ const UserMediaTile = subscribe<UserMediaTileProps, HTMLDivElement>(
         className={classNames(className, {
           [styles.mirror]: mirror,
           [styles.speaking]: showSpeakingIndicator && speaking,
+          [styles.cropVideo]: cropVideo,
         })}
         style={style}
         targetWidth={targetWidth}