Pop ups in full screen mode

Signed-off-by: Alexander Platov <[email protected]>

Author: SasLord

packages/ui/src/components/ButtonMenu.svelte

@@ -43,6 +43,7 @@
   export let focusIndex = -1
   export let id: string | undefined = undefined
   export let dataId: string | undefined = undefined
+  export let fullScreenPopup: boolean = false
 
   let opened: boolean = false
 
@@ -57,13 +58,20 @@
       }
       opened = true
       closeTooltip()
-      showPopup(ModernPopup, { items, selected: noSelection ? undefined : selected, params }, element, (result) => {
-        if (result) {
-          selected = result
-          dispatch('selected', result)
-        }
-        opened = false
-      })
+      showPopup(
+        ModernPopup,
+        { items, selected: noSelection ? undefined : selected, params },
+        element,
+        (result) => {
+          if (result) {
+            selected = result
+            dispatch('selected', result)
+          }
+          opened = false
+        },
+        () => {},
+        { category: 'popup', overlay: true, fullScreen: fullScreenPopup }
+      )
     }
   }
 

packages/ui/src/components/DropdownLabelsIntl.svelte

@@ -38,6 +38,7 @@
   export let width: string | undefined = undefined
   export let labelDirection: TooltipAlignment | undefined = undefined
   export let shouldUpdateUndefined: boolean = true
+  export let fullScreenPopup: boolean = false
   export let minW0 = true
   export let focusIndex: number = -1
   export let dataId: string | undefined = undefined
@@ -56,13 +57,20 @@
   function openPopup () {
     if (!opened) {
       opened = true
-      showPopup(DropdownLabelsPopupIntl, { items, selected, params }, container, (result) => {
-        if (result) {
-          selected = result
-          dispatch('selected', result)
-        }
-        opened = false
-      })
+      showPopup(
+        DropdownLabelsPopupIntl,
+        { items, selected, params },
+        container,
+        (result) => {
+          if (result) {
+            selected = result
+            dispatch('selected', result)
+          }
+          opened = false
+        },
+        () => {},
+        { category: 'popup', overlay: true, fullScreen: fullScreenPopup }
+      )
     }
   }
 

packages/ui/src/components/Popup.svelte

@@ -19,20 +19,25 @@
   import PopupInstance from './PopupInstance.svelte'
 
   export let contentPanel: HTMLElement | undefined = undefined
+  export let fullScreen: boolean = false
 
   const instances: PopupInstance[] = []
 
   export function fitPopupInstance (): void {
     instances.forEach((p) => p.fitPopupInstance())
   }
 
-  $: instances.length = $popups.filter((p) => p.dock !== true).length
+  const checkFS = (popup: any): boolean => {
+    return (fullScreen && popup.options.fullScreen === true) || (!fullScreen && popup.options.fullScreen !== true)
+  }
+
+  $: instances.length = $popups.filter((p) => p.dock !== true && checkFS(p)).length
 </script>
 
 {#if $popups.length > 0}
   <slot name="popup-header" />
 {/if}
-{#each $popups.filter((p) => p.dock !== true) as popup, i (popup.id)}
+{#each $popups.filter((p) => p.dock !== true && checkFS(p)) as popup, i (popup.id)}
   <PopupInstance
     bind:this={instances[i]}
     is={popup.is}

packages/ui/src/popups.ts

@@ -28,6 +28,7 @@ export interface CompAndProps {
   options: {
     category: string
     overlay: boolean
+    fullScreen?: boolean
     fixed?: boolean
     refId?: string
   }
@@ -90,6 +91,7 @@ export function showPopup (
   options: {
     category: string
     overlay: boolean
+    fullScreen?: boolean
     fixed?: boolean
     refId?: string
     id?: string

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

@@ -25,7 +25,7 @@
     IconMoreV,
     IconUpOutline,
     ModernButton,
-    PopupInstance,
+    Popup,
     SplitButton,
     eventToHTMLElement,
     showPopup,
@@ -76,7 +76,6 @@
   let allowCam: boolean = false
   const allowShare: boolean = true
   let allowLeave: boolean = false
-  let popup: CompAndProps | undefined = undefined
   let noLabel: boolean = false
 
   $: allowCam = $currentRoom?.type === RoomType.Video
@@ -100,50 +99,32 @@
     await leaveRoom($myInfo, $myOffice)
   }
 
-  function getPopup (component: AnySvelteComponent, e: MouseEvent, props: any = {}): CompAndProps {
-    return {
-      id: 'fsPopup',
-      is: component,
+  function showPopupIfFullScreen (component: AnySvelteComponent, props: any = {}, e: MouseEvent): void {
+    showPopup(
+      component,
       props,
-      element: eventToHTMLElement(e),
-      options: { category: 'popup', overlay: true },
-      close: () => {
-        popup = undefined
-      }
-    }
+      eventToHTMLElement(e),
+      () => {},
+      () => {},
+      { category: 'popup', overlay: true, fullScreen }
+    )
   }
 
   function micSettings (e: MouseEvent): void {
-    if (fullScreen) {
-      popup = getPopup(MicSettingPopup, e)
-    } else {
-      showPopup(MicSettingPopup, {}, eventToHTMLElement(e))
-    }
+    showPopupIfFullScreen(MicSettingPopup, {}, e)
   }
 
   function camSettings (e: MouseEvent): void {
-    if (fullScreen) {
-      popup = getPopup(CamSettingPopup, e)
-    } else {
-      showPopup(CamSettingPopup, {}, eventToHTMLElement(e))
-    }
+    showPopupIfFullScreen(CamSettingPopup, {}, e)
   }
 
   function shareSettings (e: MouseEvent): void {
-    if (fullScreen) {
-      popup = getPopup(ShareSettingPopup, e)
-    } else {
-      showPopup(ShareSettingPopup, {}, eventToHTMLElement(e))
-    }
+    showPopupIfFullScreen(ShareSettingPopup, {}, e)
   }
 
   function setAccess (e: MouseEvent): void {
     if (isOffice(room) && room.person !== me) return
-    if (fullScreen) {
-      popup = getPopup(RoomAccessPopup, e, { room })
-    } else {
-      showPopup(RoomAccessPopup, { room }, eventToHTMLElement(e))
-    }
+    showPopupIfFullScreen(RoomAccessPopup, { room }, e)
   }
 
   const me = getCurrentEmployee()
@@ -174,7 +155,7 @@
 
   async function handleAction (action: Action): Promise<void> {
     const fn = await getResource(action.action)
-    await fn(room)
+    await fn(room, undefined, { fullScreen })
   }
   $: withVideo = $screenSharing || room.type === RoomType.Video
 
@@ -321,6 +302,7 @@
         kind="secondary"
         size="large"
         noSelection
+        fullScreenPopup={fullScreen}
         on:selected={handleMenuOption}
       />
     {/if}
@@ -337,20 +319,8 @@
   </svelte:fragment>
 
   <svelte:fragment slot="extra">
-    {#if popup && fullScreen}
-      <PopupInstance
-        is={popup.is}
-        props={popup.props}
-        element={popup.element}
-        onClose={popup.onClose}
-        onUpdate={popup.onUpdate}
-        zIndex={1}
-        top={true}
-        close={popup.close}
-        overlay={popup.options.overlay}
-        contentPanel={undefined}
-        {popup}
-      />
+    {#if fullScreen}
+      <Popup fullScreen />
     {/if}
   </svelte:fragment>
 </ControlBarContainer>

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

@@ -25,6 +25,7 @@
 
   export let room: Room
   export let kind: 'dropdown' | 'icon' = 'dropdown'
+  export let fullScreenPopup: boolean = false
 
   const client = getClient()
 
@@ -48,12 +49,19 @@
   }
 
   function showLanguagesPopup (): void {
-    showPopup(DropdownLabelsPopupIntl, { items, selected: selectedItem }, container, async (result) => {
-      if (result != null && result !== '') {
-        selectedItem = result
-        await handleSelection(result)
-      }
-    })
+    showPopup(
+      DropdownLabelsPopupIntl,
+      { items, selected: selectedItem },
+      container,
+      async (result) => {
+        if (result != null && result !== '') {
+          selectedItem = result
+          await handleSelection(result)
+        }
+      },
+      () => {},
+      { category: 'popup', overlay: true, fullScreen: fullScreenPopup }
+    )
   }
 </script>
 
@@ -66,6 +74,7 @@
     iconProps={{ lang: selectedItem }}
     bind:selected={selectedItem}
     label={view.string.AddSavedView}
+    {fullScreenPopup}
     on:selected={(e) => handleSelection(e.detail)}
   />
 {:else}

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

@@ -23,6 +23,7 @@
   import love from '../plugin'
 
   export let room: Room
+  export let fullScreenPopup: boolean = false
 
   const dispatch = createEventDispatcher()
 
@@ -65,7 +66,7 @@
     </div>
     <div class="component">
       {#if selectedGroup.id === 'transcription'}
-        <RoomTranscriptionSettings {room} />
+        <RoomTranscriptionSettings {room} {fullScreenPopup} />
       {/if}
     </div>
   </div>

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

@@ -20,6 +20,7 @@
   import RoomLanguageSelector from './RoomLanguageSelector.svelte'
 
   export let room: Room
+  export let fullScreenPopup: boolean = false
 
   const client = getClient()
 
@@ -37,7 +38,7 @@
     <div class="antiGrid-row__header">
       <Label label={ui.string.Language} />
     </div>
-    <RoomLanguageSelector {room} />
+    <RoomLanguageSelector {room} {fullScreenPopup} />
   </div>
   <div class="antiGrid-row">
     <div class="antiGrid-row__header">

plugins/love-resources/src/utils.ts

@@ -1194,10 +1194,18 @@ export async function updateSessionLanguage (room: Room): Promise<void> {
   }
 }
 
-export async function showRoomSettings (room?: Room): Promise<void> {
+export async function showRoomSettings (room?: Room, evt?: Event, params?: Record<string, any>): Promise<any> {
   if (room === undefined) return
 
-  showPopup(RoomSettingsPopup, { room }, 'top')
+  const fullScreen: boolean = params?.fullScreen
+  showPopup(
+    RoomSettingsPopup,
+    { room, fullScreenPopup: fullScreen },
+    'top',
+    () => {},
+    () => {},
+    { category: 'popup', overlay: true, fullScreen }
+  )
 }
 
 export async function copyGuestLink (room?: Room): Promise<void> {