uberf-7206: adjustments and resources to support desktop screenshare (#5790)

Signed-off-by: Alexey Zinoviev <alexey.zinoviev@xored.com>

plugins/love-assets/lang/en.json

@@ -57,6 +57,8 @@
     "LeaveRoomConfirmation": "Are you sure you want to leave the room?",
     "ServiceNotConfigured": "Service is not configured",
     "FullscreenMode": "Full-screen mode",
-    "ExitingFullscreenMode": "Exiting fullscreen mode"
+    "ExitingFullscreenMode": "Exiting fullscreen mode",
+    "Select": "Select",
+    "ChooseShare": "Choose what to share"
   }
 }

plugins/love-assets/lang/es.json

@@ -57,6 +57,8 @@
     "LeaveRoomConfirmation": "¿Estás seguro de que quieres salir de la sala?",
     "ServiceNotConfigured": "El servicio no está configurado",
     "FullscreenMode": "Modo de pantalla completa",
-    "ExitingFullscreenMode": "Salir del modo de pantalla completa"
+    "ExitingFullscreenMode": "Salir del modo de pantalla completa",
+    "Select": "Seleccionar",
+    "ChooseShare": "Elija qué compartir"
   }
 }

plugins/love-assets/lang/pt.json

@@ -57,6 +57,8 @@
     "LeaveRoomConfirmation": "Tem certeza de que deseja sair da sala?",
     "ServiceNotConfigured": "O serviço não está configurado",
     "FullscreenMode": "Modo de ecrã inteiro",
-    "ExitingFullscreenMode": "Saindo do modo de tela cheia"
+    "ExitingFullscreenMode": "Saindo do modo de tela cheia",
+    "Select": "Seleccione",
+    "ChooseShare": "Escolha o que partilhar"
   }
 }

plugins/love-assets/lang/ru.json

@@ -57,6 +57,8 @@
     "LeaveRoomConfirmation": "Вы уверены, что хотите покинуть комнату?",
     "ServiceNotConfigured": "Сервис не настроен",
     "FullscreenMode": "Полноэкранный режим",
-    "ExitingFullscreenMode": "Выход из полноэкранного режима"
+    "ExitingFullscreenMode": "Выход из полноэкранного режима",
+    "Select": "Выбрать",
+    "ChooseShare": "Выберите, чем вы хотите поделиться"
   }
 }

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

@@ -0,0 +1,89 @@
+<script lang="ts">
+  import { createEventDispatcher } from 'svelte'
+  import { Card } from '@hcengineering/presentation'
+  import { Button } from '@hcengineering/ui'
+  import { ScreenSource } from '@hcengineering/love'
+
+  import love from '../plugin'
+
+  export let sources: ScreenSource[]
+
+  const dispatch = createEventDispatcher()
+  let selectedSourceId: string | undefined
+</script>
+
+<Card
+  label={love.string.ChooseShare}
+  width="large"
+  okAction={() => {
+    dispatch('update', selectedSourceId)
+  }}
+  okLabel={love.string.Select}
+  canSave={selectedSourceId !== undefined}
+  on:close={() => dispatch('close')}
+>
+  <div class="root">
+    {#each sources as source}
+      <!-- svelte-ignore a11y-missing-attribute -->
+      <Button
+        kind="ghost"
+        justify="left"
+        height="auto"
+        selected={source.id === selectedSourceId}
+        on:click={() => {
+          selectedSourceId = source.id
+        }}
+      >
+        <svelte:fragment slot="content">
+          <div class="item">
+            <div class="title">
+              {#if source.appIconURL != null}
+                <img class="icon" src={source.appIconURL} />
+              {/if}
+              <div class="name">
+                {source.name}
+              </div>
+            </div>
+            <img src={source.thumbnailURL} />
+          </div>
+        </svelte:fragment>
+      </Button>
+    {/each}
+  </div>
+</Card>
+
+<style lang="scss">
+  .root {
+    padding: 0 2rem;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1rem;
+    height: 100%;
+  }
+
+  .item {
+    padding: 1rem;
+    display: flex;
+    flex-direction: column;
+    width: 262px;
+  }
+
+  .title {
+    margin-bottom: 0.5rem;
+    display: flex;
+    gap: 1rem;
+    overflow: hidden;
+  }
+
+  .name {
+    min-width: 0;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  .icon {
+    width: 1rem;
+    height: 1rem;
+  }
+</style>

plugins/love-resources/src/index.ts

@@ -3,14 +3,18 @@ import ControlExt from './components/ControlExt.svelte'
 import Main from './components/Main.svelte'
 import Settings from './components/Settings.svelte'
 import WorkbenchExtension from './components/WorkbenchExtension.svelte'
+import SelectScreenSourcePopup from './components/SelectScreenSourcePopup.svelte'
 import { toggleMic, toggleVideo } from './utils'
 
+export { setCustomCreateScreenTracks } from './utils'
+
 export default async (): Promise<Resources> => ({
   component: {
     Main,
     ControlExt,
     Settings,
-    WorkbenchExtension
+    WorkbenchExtension,
+    SelectScreenSourcePopup
   },
   actionImpl: {
     ToggleMic: toggleMic,

plugins/love-resources/src/plugin.ts

@@ -70,6 +70,8 @@ export default mergeIds(loveId, love, {
     FullscreenMode: '' as IntlString,
     ExitingFullscreenMode: '' as IntlString,
     Invite: '' as IntlString,
-    KnockAction: '' as IntlString
+    KnockAction: '' as IntlString,
+    Select: '' as IntlString,
+    ChooseShare: '' as IntlString
   }
 })

plugins/love-resources/src/utils.ts

@@ -22,6 +22,7 @@ import {
   ConnectionState,
   Room as LKRoom,
   LocalAudioTrack,
+  type LocalTrack,
   LocalVideoTrack,
   RoomEvent,
   Track,
@@ -95,6 +96,10 @@ export const lk: LKRoom = new LKRoom({
   }
 })
 
+export function setCustomCreateScreenTracks (value: () => Promise<Array<LocalTrack<Track.Kind>>>): void {
+  lk.localParticipant.createScreenTracks = value
+}
+
 async function prepare (): Promise<void> {
   const wsURL = getMetadata(love.metadata.WebSocketURL)
   if (wsURL !== undefined) {

plugins/love/src/index.ts

@@ -4,10 +4,11 @@ import { Drive } from '@hcengineering/drive'
 import { NotificationType } from '@hcengineering/notification'
 import { Asset, IntlString, Metadata, Plugin, plugin } from '@hcengineering/platform'
 import { Preference } from '@hcengineering/preference'
+import { AnyComponent } from '@hcengineering/ui/src/types'
 import { Action } from '@hcengineering/view'
 
 export const loveId = 'love' as Plugin
-
+export type { ScreenSource } from './utils'
 export const GRID_WIDTH = 15
 
 export enum RoomAccess {
@@ -146,6 +147,9 @@ const love = plugin(loveId, {
   space: {
     Rooms: '' as Ref<Space>,
     Drive: '' as Ref<Drive>
+  },
+  component: {
+    SelectScreenSourcePopup: '' as AnyComponent
   }
 })
 

plugins/love/src/utils.ts

@@ -173,3 +173,10 @@ export function checkIntersection (rooms: Slot[], width: number, height: number,
   }
   return false
 }
+
+export interface ScreenSource {
+  id: string
+  name: string
+  thumbnailURL: string
+  appIconURL: string
+}