Add crop to fit toggle to context menu.

Signed-off-by: Timo K <toger5@hotmail.de>

src/video-grid/VideoTile.tsx

@@ -213,9 +213,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],
@@ -232,6 +239,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}
+        />
       </>
     ) : (
       <>
@@ -242,6 +256,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
@@ -264,6 +285,7 @@ const UserMediaTile = subscribe<UserMediaTileProps, HTMLDivElement>(
         className={classNames(className, {
           [styles.mirror]: mirror,
           [styles.speaking]: showSpeakingIndicator && speaking,
+          [styles.cropVideo]: cropVideo,
         })}
         style={style}
         targetWidth={targetWidth}