Office pulse presence

models/love/package.json

@@ -56,6 +56,7 @@
     "@hcengineering/time": "^0.7.0",
     "@hcengineering/ui": "^0.7.0",
     "@hcengineering/view": "^0.7.0",
-    "@hcengineering/workbench": "^0.7.0"
+    "@hcengineering/workbench": "^0.7.0",
+    "@hcengineering/card": "^0.7.0"
   }
 }

models/love/src/index.ts

@@ -13,6 +13,7 @@
 // limitations under the License.
 //
 
+import card from '@hcengineering/card'
 import contact, { type Employee, type Person } from '@hcengineering/contact'
 import {
   AccountRole,
@@ -439,6 +440,18 @@ export function createModel (builder: Builder): void {
     }
   })
 
+  createAction(builder, {
+    action: love.actionImpl.StartMeeting,
+    label: love.string.StartMeeting,
+    icon: love.icon.Cam,
+    input: 'focus',
+    category: love.category.Office,
+    target: card.class.Card,
+    context: {
+      mode: ['context']
+    }
+  })
+
   builder.createDoc(activity.class.ActivityExtension, core.space.Model, {
     ofClass: love.class.Room,
     components: { input: { component: chunter.component.ChatMessageInput, props: { collection: 'messages' } } }

models/love/src/plugin.ts

@@ -45,7 +45,8 @@ export default mergeIds(loveId, love, {
     ToggleMic: '' as ViewAction,
     ToggleVideo: '' as ViewAction,
     ShowRoomSettings: '' as ViewAction,
-    CopyGuestLink: '' as ViewAction
+    CopyGuestLink: '' as ViewAction,
+    StartMeeting: '' as ViewAction
   },
   ids: {
     Settings: '' as Ref<Doc>,

plugins/love-resources/package.json

@@ -42,6 +42,7 @@
     "@hcengineering/ai-bot-resources": "^0.7.0",
     "@hcengineering/analytics": "^0.7.5",
     "@hcengineering/calendar": "^0.7.0",
+    "@hcengineering/card": "^0.7.0",
     "@hcengineering/chunter": "^0.7.0",
     "@hcengineering/chunter-resources": "^0.7.0",
     "@hcengineering/contact": "^0.7.0",

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

@@ -20,9 +20,10 @@
 
   import love from '../plugin'
   import { getRoomName } from '../utils'
-  import { infos, myOffice, currentRoom } from '../stores'
+  import { infos, myOffice } from '../stores'
   import { lkSessionConnected } from '../liveKitClient'
-  import { createMeeting, joinMeeting } from '../meetings'
+  import { activeMeeting, createMeeting, joinMeeting } from '../meetings'
+  import { ActiveMeeting } from '../types'
 
   export let object: Room
 
@@ -48,8 +49,9 @@
       await createMeeting(object)
     }
   }
-
-  $: connecting = tryConnecting || ($currentRoom?._id === object._id && !$lkSessionConnected)
+  $: connecting =
+    tryConnecting ||
+    ($activeMeeting?.type === 'room' && $activeMeeting.document.attachedTo === object._id && !$lkSessionConnected)
 
   let connectLabel: IntlString = $infos.some(({ room }) => room === object._id)
     ? love.string.JoinMeeting
@@ -67,7 +69,7 @@
     isConnected: boolean,
     info: ParticipantInfo[],
     myOffice?: Room,
-    currentRoom?: Room
+    currentMeeting?: ActiveMeeting
   ): boolean {
     if (isOffice(object)) {
       // Do not show connect button in own office
@@ -83,8 +85,9 @@
 
     // Show during connecting with spinner
     if (connecting) return true
+    if (currentMeeting?.type !== 'room') return true
     // Do not show connect button if we are already connected to the room
-    if (isConnected && currentRoom?._id === object._id) return false
+    if (isConnected && currentMeeting.document?.attachedTo === object._id) return false
 
     return true
   }
@@ -95,7 +98,7 @@
     <div class="name">
       <EditBox disabled={true} placeholder={love.string.Room} bind:value={roomName} focusIndex={1} />
     </div>
-    {#if showConnectionButton(object, connecting, $lkSessionConnected, $infos, $myOffice, $currentRoom)}
+    {#if showConnectionButton(object, connecting, $lkSessionConnected, $infos, $myOffice, $activeMeeting)}
       <ModernButton label={connectLabel} size="large" kind={'primary'} on:click={connect} loading={connecting} />
     {/if}
   </div>

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

@@ -1,16 +1,13 @@
 <script lang="ts">
-  import { Avatar, getPersonByPersonRefStore } from '@hcengineering/contact-resources'
   import { Button } from '@hcengineering/ui'
   import view from '@hcengineering/view'
   import { createEventDispatcher } from 'svelte'
   import love from '../plugin'
-  import { currentRoom, infos, myInfo, myOffice } from '../stores'
+  import { myInfo, myOffice } from '../stores'
   import { liveKitClient } from '../utils'
   import { lkSessionConnected, ScreenSharingState, screenSharingState } from '../liveKitClient'
   import MeetingHeader from './meeting/MeetingHeader.svelte'
-  import { leaveMeeting } from '../meetings'
-
-  export let limit: number = 4
+  import { activeMeeting, leaveMeeting } from '../meetings'
 
   const dispatch = createEventDispatcher()
 
@@ -34,46 +31,14 @@
   async function stopShare (): Promise<void> {
     await liveKitClient.setScreenShareEnabled(false)
   }
-
-  $: participants = $infos.filter((p) => p.room === $currentRoom?._id)
-  $: personByRefStore = getPersonByPersonRefStore(participants.map((p) => p.person))
 </script>
 
-{#if $lkSessionConnected && $currentRoom != null}
-  {@const overLimit = participants.length > limit}
-
+{#if $lkSessionConnected && $activeMeeting !== undefined}
   <div class="m-1 p-2">
     <div class="flex-col flex-grow flex-gap-0-5">
-      <MeetingHeader room={$currentRoom} />
+      <MeetingHeader meeting={$activeMeeting} />
       <div class="flex-between items-start flex-gap-2 mt-2">
         <!-- Avatars -->
-        {#if overLimit}
-          <div class="hulyCombineAvatars-container">
-            {#each participants.slice(0, limit) as participant, i (participant._id)}
-              <div
-                class="hulyCombineAvatar x-small"
-                data-over={i === limit - 1 && overLimit ? `+${participants.length - limit + 1}` : undefined}
-              >
-                <Avatar
-                  name={$personByRefStore.get(participant.person)?.name ?? participant.name}
-                  size={'x-small'}
-                  person={$personByRefStore.get(participant.person)}
-                />
-              </div>
-            {/each}
-          </div>
-        {:else}
-          <div class="flex-row-center flex-gap-0-5">
-            {#each participants as participant (participant._id)}
-              <Avatar
-                name={$personByRefStore.get(participant.person)?.name ?? participant.name}
-                size={'x-small'}
-                person={$personByRefStore.get(participant.person)}
-              />
-            {/each}
-          </div>
-        {/if}
-
         <div class="flex-row-center flex-gap-3">
           <!-- Leave Button -->
           {#if allowLeave || leaving}

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

@@ -14,32 +14,30 @@
 -->
 <script lang="ts">
   import { Avatar, getPersonByPersonRefStore } from '@hcengineering/contact-resources'
-  import { ParticipantInfo } from '@hcengineering/love'
   import { Scroller } from '@hcengineering/ui'
-  import { formatName } from '@hcengineering/contact'
+  import { formatName, Person } from '@hcengineering/contact'
+  import { Ref } from '@hcengineering/core'
 
-  export let items: (ParticipantInfo & { onclick?: (e: MouseEvent) => void })[]
+  export let items: (Ref<Person> & { onclick?: (e: MouseEvent) => void })[]
 
-  $: personByRefStore = getPersonByPersonRefStore(items.map((p) => p.person))
+  $: personByRefStore = getPersonByPersonRefStore(items)
 </script>
 
 <Scroller padding={'.25rem'} gap={'flex-gap-2'}>
-  {#each items as participant (participant.person)}
+  {#each items as item}
+    {@const person = $personByRefStore.get(item)}
+
     <!-- svelte-ignore a11y-click-events-have-key-events -->
     <!-- svelte-ignore a11y-no-static-element-interactions -->
     <div
       class="flex-row-center flex-no-shrink flex-gap-2"
-      class:cursor-pointer={participant.onclick !== undefined}
-      on:click={(e) => participant.onclick?.(e)}
+      class:cursor-pointer={item.onclick !== undefined}
+      on:click={(e) => item.onclick?.(e)}
     >
       <div class="min-w-6">
-        <Avatar
-          name={$personByRefStore.get(participant.person)?.name ?? participant.name}
-          size={items.length < 10 ? 'small' : 'card'}
-          person={$personByRefStore.get(participant.person)}
-        />
+        <Avatar name={person?.name} size={items.length < 10 ? 'small' : 'card'} {person} />
       </div>
-      {formatName(participant.name)}
+      {formatName(person?.name ?? '')}
     </div>
   {/each}
 </Scroller>

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

@@ -14,20 +14,18 @@
 -->
 <script lang="ts">
   import { ActionContext } from '@hcengineering/presentation'
-  import { Room as TypeRoom } from '@hcengineering/love'
   import { getMetadata } from '@hcengineering/platform'
   import { Label, Loading, deviceOptionsStore as deviceInfo } from '@hcengineering/ui'
   import { onDestroy, onMount } from 'svelte'
 
   import love from '../plugin'
-  import { waitForOfficeLoaded, currentRoom } from '../stores'
+  import { waitForOfficeLoaded } from '../stores'
   import { isFullScreen, lk } from '../utils'
   import ControlBar from './meeting/ControlBar.svelte'
   import ParticipantsListView from './meeting/ParticipantsListView.svelte'
   import ScreenSharingView from './meeting/ScreenSharingView.svelte'
 
   export let canMaximize: boolean = true
-  export let room: TypeRoom
 
   let roomEl: HTMLDivElement
 
@@ -141,16 +139,13 @@
     </div>
     <div class="videoGrid" style={withScreenSharing ? '' : gridStyle} class:scroll-m-0={withScreenSharing}>
       <ParticipantsListView
-        room={room._id}
         on:participantsCount={(evt) => {
           updateStyle(evt.detail, withScreenSharing)
         }}
       />
     </div>
   </div>
-  {#if $currentRoom}
-    <ControlBar room={$currentRoom} fullScreen={$isFullScreen} {onFullScreen} {canMaximize} />
-  {/if}
+  <ControlBar fullScreen={$isFullScreen} {onFullScreen} {canMaximize} />
 </div>
 
 <style lang="scss">

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

@@ -16,12 +16,12 @@
   import { getEmbeddedLabel } from '@hcengineering/platform'
   import { Avatar, getPersonByPersonRefStore } from '@hcengineering/contact-resources'
   import { tooltip, deviceOptionsStore as deviceInfo, checkAdaptiveMatching } from '@hcengineering/ui'
-  import { ParticipantInfo } from '@hcengineering/love'
-  import { formatName } from '@hcengineering/contact'
+  import { formatName, Person } from '@hcengineering/contact'
   import ParticipantsList from './ParticipantsList.svelte'
+  import { Ref } from '@hcengineering/core'
 
   export let label: string
-  export let participants: (ParticipantInfo & { onclick?: (e: MouseEvent) => void })[]
+  export let participants: { person: Ref<Person>, onclick?: (e: MouseEvent) => void }[]
   export let active: boolean = false
   export let limit: number = 4
 
@@ -41,16 +41,13 @@
   >
     <span class="hulyStatusBarButton-label">{label}</span>
     <div class="hulyCombineAvatars-container">
-      {#each participants.slice(0, limit) as participant, i (participant._id)}
+      {#each participants.slice(0, limit) as participant, i (participant)}
+        {@const person = $personByRefStore.get(participant.person)}
         <div
           class="hulyCombineAvatar tiny"
           data-over={i === limit - 1 && overLimit ? `+${participants.length - limit + 1}` : undefined}
         >
-          <Avatar
-            name={$personByRefStore.get(participant.person)?.name ?? participant.name}
-            size={'card'}
-            person={$personByRefStore.get(participant.person)}
-          />
+          <Avatar name={person?.name ?? ''} size={'card'} {person} />
         </div>
       {/each}
     </div>
@@ -61,16 +58,13 @@
   <div class="hulyStatusBarButton" class:active on:click>
     <span class="hulyStatusBarButton-label">{label}</span>
     <div class="hulyStatusBarButton-icons">
-      {#each participants as participant (participant._id)}
+      {#each participants as participant (participant)}
+        {@const person = $personByRefStore.get(participant.person)}
         <div
-          use:tooltip={{ label: getEmbeddedLabel(formatName(participant.name)), direction: 'bottom' }}
+          use:tooltip={{ label: getEmbeddedLabel(formatName(person?.name ?? '')), direction: 'bottom' }}
           on:click={participant.onclick}
         >
-          <Avatar
-            name={$personByRefStore.get(participant.person)?.name ?? participant.name}
-            size={'card'}
-            person={$personByRefStore.get(participant.person)}
-          />
+          <Avatar name={person?.name ?? ''} size={'card'} {person} />
         </div>
       {/each}
     </div>

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

@@ -16,19 +16,18 @@
   import { createEventDispatcher } from 'svelte'
   import presentation from '@hcengineering/presentation'
   import { Modal } from '@hcengineering/ui'
-  import { RoomType } from '@hcengineering/love'
 
-  import { currentRoom } from '../stores'
   import RoomComponent from './Room.svelte'
+  import { activeMeeting } from '../meetings'
 
   const dispatch = createEventDispatcher()
 
-  $: if ($currentRoom === undefined) {
+  $: if ($activeMeeting === undefined) {
     dispatch('close')
   }
 </script>
 
-{#if $currentRoom !== undefined}
+{#if $activeMeeting !== undefined}
   <Modal
     type="type-popup"
     okLabel={presentation.string.Create}
@@ -37,8 +36,8 @@
     on:close={() => dispatch('close')}
   >
     <svelte:fragment slot="title">
-      {$currentRoom.name}
+      {$activeMeeting?.document.title}
     </svelte:fragment>
-    <RoomComponent room={$currentRoom} canMaximize={false} />
+    <RoomComponent canMaximize={false} />
   </Modal>
 {/if}