diff --git a/public/locales/en-GB/app.json b/public/locales/en-GB/app.json index 9dca0a19..0acb3006 100644 --- a/public/locales/en-GB/app.json +++ b/public/locales/en-GB/app.json @@ -143,6 +143,7 @@ "unmute_microphone_button_label": "Unmute microphone", "version": "Version: {{version}}", "video_tile": { + "change_fit_contain": "Crop to fit", "exit_full_screen": "Exit full screen", "full_screen": "Full screen", "mute_for_me": "Mute for me", diff --git a/src/state/TileViewModel.ts b/src/state/TileViewModel.ts index 791d28a3..b059c42c 100644 --- a/src/state/TileViewModel.ts +++ b/src/state/TileViewModel.ts @@ -167,6 +167,12 @@ export class UserMediaTileViewModel extends BaseTileViewModel { */ public readonly videoEnabled: StateObservable; + 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); } diff --git a/src/video-grid/VideoTile.module.css b/src/video-grid/VideoTile.module.css index 9e30c6e1..b4da6e5e 100644 --- a/src/video-grid/VideoTile.module.css +++ b/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