Qfix office layout (#9703)

* Fix fullscreen Room layout after screen sharing

Signed-off-by: Anton Alexeyev <[email protected]>

* Fix camera preview constraints

Signed-off-by: Anton Alexeyev <[email protected]>

* Fix formatting

Signed-off-by: Anton Alexeyev <[email protected]>

* Use ideal constraints

Signed-off-by: Anton Alexeyev <[email protected]>

---------

Signed-off-by: Anton Alexeyev <[email protected]>

Author: utkaka

plugins/love-resources/src/components/Room.svelte

@@ -21,7 +21,7 @@
 
   import love from '../plugin'
   import { waitForOfficeLoaded, currentRoom, infos, invites, myInfo, myRequests } from '../stores'
-  import { isFullScreen, tryConnect } from '../utils'
+  import { isFullScreen, lk, tryConnect } from '../utils'
   import ControlBar from './ControlBar.svelte'
   import { lkSessionConnected } from '../liveKitClient'
   import ParticipantsListView from './meeting/ParticipantsListView.svelte'
@@ -125,6 +125,7 @@
   }
 
   $: if (((document.fullscreenElement && !$isFullScreen) || $isFullScreen) && roomEl) checkFullscreen()
+  $: updateStyle(lk.numParticipants, withScreenSharing)
 </script>
 
 <div bind:this={roomEl} class="flex-col-center w-full h-full" class:theme-dark={$isFullScreen}>

plugins/love-resources/src/components/meeting/ParticipantView.svelte

@@ -236,7 +236,6 @@
 
 <style lang="scss">
   :global(.video) {
-    overflow: hidden;
     object-fit: cover;
     border-radius: 0.75rem;
     width: 100%;

plugins/media-resources/src/components/MediaPopupCamPreview.svelte

@@ -23,7 +23,10 @@
   let video: HTMLVideoElement | null = null
 
   async function updateStream (device: MediaDeviceInfo): Promise<void> {
-    const constraints = device !== null ? { video: { deviceId: { exact: device.deviceId } } } : { video: true }
+    const constraints =
+      device !== null
+        ? { video: { deviceId: { exact: device.deviceId }, width: { ideal: 1280 }, height: { ideal: 720 } } }
+        : { video: { width: { ideal: 1280 }, height: { ideal: 720 } } }
 
     releaseStream(stream)