Fix video widget (#6624)

Signed-off-by: Kristina Fefelova <kristin.fefelova@gmail.com>

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

@@ -19,30 +19,36 @@
   import {
     Floor,
     Invite,
+    isOffice,
     JoinRequest,
+    loveId,
     Office,
     ParticipantInfo,
     RequestStatus,
     Room,
-    RoomType,
+    RoomType
-    isOffice,
-    loveId
   } from '@hcengineering/love'
   import { getEmbeddedLabel } from '@hcengineering/platform'
-  import { MessageBox, createQuery, getClient } from '@hcengineering/presentation'
+  import { createQuery, getClient, MessageBox } from '@hcengineering/presentation'
   import {
-    Location,
-    PopupResult,
     closePopup,
     eventToHTMLElement,
+    Location,
     location,
+    PopupResult,
     showPopup,
     tooltip
   } from '@hcengineering/ui'
   import view from '@hcengineering/view'
   import { onDestroy } from 'svelte'
   import workbench from '@hcengineering/workbench'
-  import { closeWidget, openWidget, sidebarStore } from '@hcengineering/workbench-resources'
+  import {
+    closeWidget,
+    minimizeSidebar,
+    openWidget,
+    sidebarStore,
+    SidebarVariant
+  } from '@hcengineering/workbench-resources'
 
   import love from '../plugin'
   import {
@@ -283,8 +289,20 @@
     showPopup(CamSettingPopup, {}, eventToHTMLElement(e))
   }
 
+  $: isVideoWidgetOpened = $sidebarStore.widgetsState.has(love.ids.VideoWidget)
+
+  $: if (
+    isVideoWidgetOpened &&
+    $sidebarStore.widget === undefined &&
+    $location.path[2] !== loveId &&
+    $sidebarStore.widgetsState.get(love.ids.VideoWidget)?.closedByUser !== true
+  ) {
+    sidebarStore.update((s) => ({ ...s, widget: love.ids.VideoWidget, variant: SidebarVariant.EXPANDED }))
+  }
+
   function checkActiveVideo (loc: Location, video: boolean, room: Ref<Room> | undefined): void {
-    const isOpened = $sidebarStore.widgetsState.get(love.ids.VideoWidget)
+    const isOpened = $sidebarStore.widgetsState.has(love.ids.VideoWidget)
+
     if (room === undefined) {
       if (isOpened) {
         closeWidget(love.ids.VideoWidget)
@@ -292,13 +310,22 @@
       return
     }
 
-    if (loc.path[2] !== loveId && video) {
+    if (video) {
-      if (isOpened) return
+      if (!isOpened) {
         const widget = client.getModel().findAllSync(workbench.class.Widget, { _id: love.ids.VideoWidget })[0]
         if (widget === undefined) return
-      openWidget(widget, {
+        openWidget(
+          widget,
+          {
             room
-      })
+          },
+          loc.path[2] !== loveId
+        )
+      }
+
+      if (loc.path[2] === loveId && $sidebarStore.widget === love.ids.VideoWidget) {
+        minimizeSidebar()
+      }
     } else {
       closeWidget(love.ids.VideoWidget)
     }

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

@@ -79,7 +79,7 @@
       </Scroller>
     {/if}
     {#if $floors.length > 1}
-      <div class="flex-row-center flex-reverse flex-no-shrink w-full mt-4">
+      <div class="flex-row-center flex-reverse flex-no-shrink w-full mt-4 mr-2">
         <ModernButton on:click={changeMode} icon={IconLayers} label={love.string.ChangeFloor} />
       </div>
     {/if}
@@ -92,7 +92,6 @@
     flex-direction: column;
     justify-content: space-between;
     height: 100%;
-    padding-right: 0.5rem;
     padding-bottom: 1rem;
   }
 </style>

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

@@ -379,7 +379,7 @@
 
 <style lang="scss">
   .error {
-    font-size: 500;
+    font-weight: 500;
     font-size: 1.5rem;
     align-items: center;
   }

plugins/workbench-resources/src/components/sidebar/Sidebar.svelte

@@ -18,8 +18,8 @@
 
   import workbench from '../../plugin'
   import { sidebarStore, SidebarVariant } from '../../sidebar'
-  import WidgetsBarMini from './SidebarMini.svelte'
+  import SidebarMini from './SidebarMini.svelte'
-  import WidgetsBarExpanded from './SidebarExpanded.svelte'
+  import SidebarExpanded from './SidebarExpanded.svelte'
 
   const client = getClient()
 
@@ -38,9 +38,9 @@
 
 <div class="antiPanel-component antiComponent root size-{size}" id="sidebar">
   {#if $sidebarStore.variant === SidebarVariant.MINI}
-    <WidgetsBarMini {widgets} {preferences} />
+    <SidebarMini {widgets} {preferences} />
   {:else if $sidebarStore.variant === SidebarVariant.EXPANDED}
-    <WidgetsBarExpanded {widgets} {preferences} />
+    <SidebarExpanded {widgets} {preferences} />
   {/if}
 </div>
 
@@ -62,9 +62,9 @@
     }
 
     &.size-medium {
-      width: 25rem !important;
+      width: 20rem !important;
-      min-width: 25rem !important;
+      min-width: 20rem !important;
-      max-width: 25rem !important;
+      max-width: 20rem !important;
     }
   }
 </style>

plugins/workbench-resources/src/components/sidebar/widgets/WidgetsBar.svelte

@@ -19,7 +19,7 @@
 
   import WidgetPresenter from './/WidgetPresenter.svelte'
   import AddWidgetsPopup from './AddWidgetsPopup.svelte'
-  import { openWidget, sidebarStore, SidebarVariant } from '../../../sidebar'
+  import { minimizeSidebar, openWidget, sidebarStore } from '../../../sidebar'
 
   export let widgets: Widget[] = []
   export let preferences: WidgetPreference[] = []
@@ -31,9 +31,9 @@
 
   function handleSelectWidget (widget: Widget): void {
     if (selected === widget._id) {
-      sidebarStore.update((state) => ({ ...state, widget: undefined, variant: SidebarVariant.MINI }))
+      minimizeSidebar(true)
     } else {
-      openWidget(widget)
+      openWidget(widget, $sidebarStore.widgetsState.get(widget._id)?.data, true)
     }
   }
 

plugins/workbench-resources/src/sidebar.ts

@@ -30,6 +30,7 @@ export interface WidgetState {
   data?: Record<string, any>
   tabs: WidgetTab[]
   tab?: string
+  closedByUser?: boolean
 }
 
 export interface SidebarState {
@@ -95,7 +96,7 @@ function setSidebarStateToLocalStorage (state: SidebarState): void {
   )
 }
 
-export function openWidget (widget: Widget, data?: Record<string, any>): void {
+export function openWidget (widget: Widget, data?: Record<string, any>, active = true): void {
   const state = get(sidebarStore)
   const { widgetsState } = state
   const widgetState = widgetsState.get(widget._id)
@@ -106,7 +107,7 @@ export function openWidget (widget: Widget, data?: Record<string, any>): void {
     ...state,
     widgetsState,
     variant: SidebarVariant.EXPANDED,
-    widget: widget._id
+    widget: active ? widget._id : state.widget
   })
 }
 
@@ -114,6 +115,10 @@ export function closeWidget (widget: Ref<Widget>): void {
   const state = get(sidebarStore)
   const { widgetsState } = state
 
+  if (!widgetsState.has(widget) && state.widget !== widget && state.variant === SidebarVariant.MINI) {
+    return
+  }
+
   widgetsState.delete(widget)
 
   if (state.widget === widget) {
@@ -292,3 +297,15 @@ export function isElementFromSidebar (element: HTMLElement): boolean {
 
   return isDescendant(sidebarElement, element)
 }
+
+export function minimizeSidebar (closedByUser = false): void {
+  const state = get(sidebarStore)
+  const { widget, widgetsState } = state
+  const widgetState = widget == null ? undefined : widgetsState.get(widget)
+
+  if (widget !== undefined && widgetState !== undefined && closedByUser) {
+    widgetsState.set(widget, { ...widgetState, closedByUser })
+  }
+
+  sidebarStore.set({ ...state, ...widgetsState, widget: undefined, variant: SidebarVariant.MINI })
+}