Removed, replaced bind:clientWidth and bind:clientHeight (#5741)

packages/text-editor/src/components/StyledTextEditor.svelte

@@ -16,7 +16,7 @@
   import { Markup } from '@hcengineering/core'
   import { IntlString } from '@hcengineering/platform'
   import { EmptyMarkup } from '@hcengineering/text'
-  import { Button, ButtonSize, Scroller } from '@hcengineering/ui'
+  import { Button, type ButtonSize, Scroller } from '@hcengineering/ui'
   import { AnyExtension, mergeAttributes } from '@tiptap/core'
   import { createEventDispatcher } from 'svelte'
   import textEditorPlugin from '../plugin'
@@ -51,8 +51,6 @@
 
   let textEditor: TextEditor | undefined = undefined
 
-  let contentHeight: number
-
   export function submit (): void {
     textEditor?.submit()
   }
@@ -162,13 +160,7 @@
   on:click|preventDefault|stopPropagation={() => (needFocus = true)}
 >
   <div class="textInput">
-    <div
-      bind:clientHeight={contentHeight}
-      class="inputMsg"
-      class:showScroll={contentHeight > 32}
-      class:scrollable={isScrollable}
-      style="--texteditor-maxheight: {varsStyle};"
-    >
+    <div class="inputMsg" class:scrollable={isScrollable} style:--texteditor-maxheight={varsStyle}>
       {#if isScrollable}
         <Scroller>
           <TextEditor
@@ -257,10 +249,6 @@
 
         &.scrollable {
           max-height: var(--texteditor-maxheight);
-
-          &.showScroll {
-            overflow: auto;
-          }
         }
         &:not(.showScroll) {
           overflow-y: hidden;

packages/theme/styles/love.scss

@@ -132,6 +132,14 @@
   }
 }
 
+// Room
+@media only screen and (max-width: 1024px) {
+  .room-container + .bar > .bar__left-panel button span { display: none; }
+}
+@media only screen and (max-width: 700px) {
+  .room-container + .bar > .bar__left-panel { position: initial; }
+}
+
 // RoomPopup
 .room-popup {
   .room-btns {

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

@@ -47,9 +47,6 @@
   const allowShare: boolean = true
   let allowLeave: boolean = false
 
-  let barWidth: number
-  $: noLabel = barWidth < 900
-
   $: allowCam = $currentRoom?.type === RoomType.Video
   $: allowLeave = $myInfo?.room !== ($myOffice?._id ?? love.ids.Reception)
 
@@ -104,7 +101,7 @@
   const micKeys = client.getModel().findAllSync(view.class.Action, { _id: love.action.ToggleMic })?.[0]?.keyBinding
 </script>
 
-<div bind:clientWidth={barWidth} class="bar w-full flex-center flex-gap-2 flex-no-shrink">
+<div class="bar w-full flex-center flex-gap-2 flex-no-shrink">
   {#if room._id !== love.ids.Reception}
     <ModernButton
       icon={roomAccessIcon[room.access]}
@@ -162,7 +159,7 @@
     {#if hasAccountRole(getCurrentAccount(), AccountRole.User)}
       <ModernButton
         icon={view.icon.Copy}
-        tooltip={{ label: !linkCopied ? love.string.CopyGuestLink : view.string.Copied }}
+        tooltip={{ label: !linkCopied ? love.string.CopyGuestLink : view.string.Copied, direction: 'top' }}
         kind={'secondary'}
         size={'large'}
         on:click={copyGuestLink}
@@ -171,8 +168,8 @@
     {#if allowLeave}
       <ModernButton
         icon={love.icon.LeaveRoom}
-        label={noLabel ? undefined : love.string.LeaveRoom}
-        tooltip={{ label: love.string.LeaveRoom }}
+        label={love.string.LeaveRoom}
+        tooltip={{ label: love.string.LeaveRoom, direction: 'top' }}
         kind={'negative'}
         size={'large'}
         on:click={leave}

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

@@ -16,7 +16,7 @@
   import { Person, formatName } from '@hcengineering/contact'
   import { Avatar, personByIdStore } from '@hcengineering/contact-resources'
   import { Ref } from '@hcengineering/core'
-  import { Icon, Loading } from '@hcengineering/ui'
+  import { Icon, Loading, resizeObserver } from '@hcengineering/ui'
   import love from '../plugin'
 
   export let _id: string
@@ -28,6 +28,7 @@
 
   let parent: HTMLDivElement
   let activeTrack: boolean = false
+  let filled: boolean = false
 
   export function appendChild (track: HTMLMediaElement): void {
     const video = parent.querySelector('.video')
@@ -58,8 +59,21 @@
   $: user = $personByIdStore.get(_id as Ref<Person>)
 </script>
 
-<div id={_id} class="parent" class:small bind:clientWidth={parentWidth}>
-  <div class="label" class:filled bind:clientWidth={labelWidth}>
+<div
+  id={_id}
+  class="parent"
+  class:small
+  use:resizeObserver={(element) => {
+    parentWidth = element.clientWidth
+  }}
+>
+  <div
+    class="label"
+    class:filled
+    use:resizeObserver={(element) => {
+      labelWidth = element.clientWidth
+    }}
+  >
     <span class="overflow-label">{formatName(name)}</span>
     {#if connecting}
       <div class="loading">
@@ -70,9 +84,9 @@
       <Icon size="small" icon={love.icon.MicDisabled} />
     </div>
   </div>
-  <div bind:this={parent} class="cover" class:mirror={mirror && activeTrack}>
-    <div class="ava" class:hidden={activeTrack}>
-      <Avatar size={'full'} {name} person={user} />
+  <div bind:this={parent} class="cover" class:active={activeTrack} class:mirror={mirror && activeTrack}>
+    <div class="ava">
+      <Avatar size={'full'} {name} person={user} showStatus={false} />
     </div>
   </div>
 </div>
@@ -102,10 +116,17 @@
     }
 
     .ava {
-      height: 25%;
       overflow: hidden;
-      border-radius: 20%;
+      position: absolute;
+      height: 25%;
       aspect-ratio: 1;
+      border-radius: 20%;
+    }
+    &.active > .ava {
+      display: none;
+    }
+    &:not(.active) {
+      background-color: black;
     }
   }
   .parent {

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

@@ -17,7 +17,7 @@
   import { personByIdStore } from '@hcengineering/contact-resources'
   import { Room as TypeRoom } from '@hcengineering/love'
   import { getMetadata } from '@hcengineering/platform'
-  import { Label, Loading, deviceOptionsStore as deviceInfo } from '@hcengineering/ui'
+  import { Label, Loading, deviceOptionsStore as deviceInfo, resizeObserver } from '@hcengineering/ui'
   import {
     LocalParticipant,
     LocalTrackPublication,
@@ -317,8 +317,10 @@
     </div>
     {#if withVideo}
       <div
-        bind:clientWidth={roomWidth}
-        bind:clientHeight={roomHeight}
+        use:resizeObserver={(element) => {
+          roomWidth = element.clientWidth
+          roomHeight = element.clientHeight
+        }}
         class="videoGrid"
         style={$screenSharing ? '' : gridStyle}
         class:scroll-m-0={$screenSharing}