From ba4c5d08ce847c003209d238af79c6ff6f31b17e Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Sun, 11 Feb 2024 13:58:34 +0000 Subject: [PATCH 01/13] Update dependency posthog-js to v1.105.7 --- yarn.lock | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/yarn.lock b/yarn.lock index 2c289dbf..cabd7f28 100644 --- a/yarn.lock +++ b/yarn.lock @@ -8292,9 +8292,9 @@ postcss@^8.4.35: source-map-js "^1.0.2" posthog-js@^1.29.0: - version "1.105.6" - resolved "https://registry.yarnpkg.com/posthog-js/-/posthog-js-1.105.6.tgz#3544de4389d5c7743fa420178bd127e49c4dc825" - integrity sha512-5ITXsh29XIuNohHLy21nawGnfFZDpyt+yfnWge9sJl5yv0nNuoUmLiDgw1tJafoqGrfd5CUasKyzSI21HxsSeQ== + version "1.105.7" + resolved "https://registry.yarnpkg.com/posthog-js/-/posthog-js-1.105.7.tgz#7d0d505efedc849248ec570783b43dc3db6884d8" + integrity sha512-skpVufQrYllZ4Hi5bdBfe1F9pzeym1rlXUuvKbEYbMhmA+FCz47ZZ0zDX6a72A5hqPW5h7ZBTEJZbwad7jYt1A== dependencies: fflate "^0.4.8" preact "^10.19.3" From bcd8890f0a1b5ccc9e72bc8974f46853eeba795e Mon Sep 17 00:00:00 2001 From: Timo <16718859+toger5@users.noreply.github.com> Date: Mon, 12 Feb 2024 16:49:32 +0100 Subject: [PATCH 02/13] Add crop to fit toggle to context menu. (#2107) Signed-off-by: Timo K --- public/locales/en-GB/app.json | 1 + src/state/TileViewModel.ts | 10 ++++++++++ src/video-grid/VideoTile.module.css | 6 +++++- src/video-grid/VideoTile.tsx | 22 ++++++++++++++++++++++ 4 files changed, 38 insertions(+), 1 deletion(-) 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