Share video with audio (#7768)

Signed-off-by: Denis Bykhov <[email protected]>
hcengineering · Jan 22, 2025 · 86da890 · 86da890
1 parent d132d6a
commit 86da890
Show file tree

Hide file tree

Showing 15 changed files with 146 additions and 64 deletions.
diff --git a/plugins/love-assets/lang/cs.json b/plugins/love-assets/lang/cs.json
@@ -81,6 +81,8 @@
     "Finished": "Dokončeno",
     "StartWithRecording": "Začít s nahráváním",
     "Language": "Jazyk",
-    "Kick": "Vyhodit"
+    "Kick": "Vyhodit",
+    "WithAudio": "S audio",
+    "ShareWithAudioTooltip": "Sdílet s audio, musíte znovu sdílet pro aplikování změn"
   }
 }
diff --git a/plugins/love-assets/lang/de.json b/plugins/love-assets/lang/de.json
@@ -79,6 +79,8 @@
     "Active": "Aktiv",
     "Finished": "Beendet",
     "StartWithRecording": "Mit Aufnahme starten",
-    "Language": "Sprache"
+    "Language": "Sprache",
+    "WithAudio": "Mit Audio",
+    "ShareWithAudioTooltip": "Mit Audio teilen, Sie müssen erneut teilen, um die Änderungen zu übernehmen"
   }
 }
diff --git a/plugins/love-assets/lang/en.json b/plugins/love-assets/lang/en.json
@@ -81,6 +81,8 @@
     "Finished": "Finished",
     "StartWithRecording": "Start with recording",
     "Language": "Language",
-    "Kick": "Kick"
+    "Kick": "Kick",
+    "WithAudio": "With audio",
+    "ShareWithAudioTooltip": "Share with audio, you should reshare for apply changes"
   }
 }
diff --git a/plugins/love-assets/lang/es.json b/plugins/love-assets/lang/es.json
@@ -81,6 +81,8 @@
     "Finished": "Terminado",
     "StartWithRecording": "Iniciar con grabación",
     "Language": "Idioma",
-    "Kick": "Expulsar"
+    "Kick": "Expulsar",
+    "WithAudio": "Con audio",
+    "ShareWithAudioTooltip": "Compartir con audio, debes compartir de nuevo para aplicar los cambios"
   }
 }
diff --git a/plugins/love-assets/lang/fr.json b/plugins/love-assets/lang/fr.json
@@ -81,6 +81,8 @@
     "Finished": "Terminé",
     "StartWithRecording": "Démarrer avec l'enregistrement",
     "Language": "Langue",
-    "Kick": "Expulser"
+    "Kick": "Expulser",
+    "WithAudio": "Avec audio",
+    "ShareWithAudioTooltip": "Partager avec audio, vous devez partager à nouveau pour appliquer les modifications"
   }
 }
diff --git a/plugins/love-assets/lang/it.json b/plugins/love-assets/lang/it.json
@@ -81,6 +81,8 @@
     "Finished": "Finito",
     "StartWithRecording": "Inizia con la registrazione",
     "Language": "Lingua",
-    "Kick": "Espellere"
+    "Kick": "Espellere",
+    "WithAudio": "Con audio",
+    "ShareWithAudioTooltip": "Condividi con audio, devi condividere nuovamente per applicare le modifiche"
   }
 }
diff --git a/plugins/love-assets/lang/pt.json b/plugins/love-assets/lang/pt.json
@@ -81,6 +81,8 @@
     "Finished": "Finalizado",
     "StartWithRecording": "Começar com gravação",
     "Language": "Idioma",
-    "Kick": "Expulsar"
+    "Kick": "Expulsar",
+    "WithAudio": "Com áudio",
+    "ShareWithAudioTooltip": "Compartilhar com áudio, você deve compartilhar novamente para aplicar as alterações"
   }
 }
diff --git a/plugins/love-assets/lang/ru.json b/plugins/love-assets/lang/ru.json
@@ -81,6 +81,8 @@
     "Finished": "Завершено",
     "StartWithRecording": "Начинать с записью",
     "Language": "Язык",
-    "Kick": "Выгнать"
+    "Kick": "Выгнать",
+    "WithAudio": "С аудио",
+    "ShareWithAudioTooltip": "Поделиться с аудио, вам нужно поделиться снова, чтобы применить изменения"
   }
 }
diff --git a/plugins/love-assets/lang/zh.json b/plugins/love-assets/lang/zh.json
@@ -81,6 +81,8 @@
     "Finished": "已完成",
     "StartWithRecording": "开始录制",
     "Language": "语言",
-    "Kick": "踢出"
+    "Kick": "踢出",
+    "WithAudio": "带音频",
+    "ShareWithAudioTooltip": "共享音频，您应重新共享以应用更改"
   }
 }
diff --git a/plugins/love-resources/src/components/ControlBar.svelte b/plugins/love-resources/src/components/ControlBar.svelte
@@ -19,49 +19,51 @@
   import { getResource } from '@hcengineering/platform'
   import { getClient } from '@hcengineering/presentation'
   import {
+    ButtonMenu,
+    DropdownIntlItem,
+    IconMaximize,
+    IconMoreV,
     IconUpOutline,
     ModernButton,
     PopupInstance,
     SplitButton,
     eventToHTMLElement,
     showPopup,
     type AnySvelteComponent,
-    type CompAndProps,
-    IconMoreV,
-    ButtonMenu,
-    DropdownIntlItem,
-    IconMaximize
+    type CompAndProps
   } from '@hcengineering/ui'
   import view, { Action } from '@hcengineering/view'
   import { getActions } from '@hcengineering/view-resources'
 
   import love from '../plugin'
   import { currentRoom, myInfo, myOffice } from '../stores'
   import {
-    isTranscriptionAllowed,
     isCameraEnabled,
     isConnected,
     isFullScreen,
     isMicEnabled,
     isRecording,
-    isTranscription,
     isRecordingAvailable,
+    isShareWithSound,
     isSharingEnabled,
+    isTranscription,
+    isTranscriptionAllowed,
     leaveRoom,
     record,
     screenSharing,
     setCam,
     setMic,
     setShare,
-    stopTranscription,
-    startTranscription
+    startTranscription,
+    stopTranscription
   } from '../utils'
   import CamSettingPopup from './CamSettingPopup.svelte'
+  import ControlBarContainer from './ControlBarContainer.svelte'
   import MicSettingPopup from './MicSettingPopup.svelte'
   import RoomAccessPopup from './RoomAccessPopup.svelte'
   import RoomLanguageSelector from './RoomLanguageSelector.svelte'
-  import ControlBarContainer from './ControlBarContainer.svelte'
   import RoomModal from './RoomModal.svelte'
+  import ShareSettingPopup from './ShareSettingPopup.svelte'
 
   export let room: Room
   export let canMaximize: boolean = true
@@ -86,7 +88,9 @@
   }
 
   async function changeShare (): Promise<void> {
-    await setShare(!$isSharingEnabled)
+    const newValue = !$isSharingEnabled
+    const audio = newValue && $isShareWithSound
+    await setShare(newValue, audio)
   }
 
   async function leave (): Promise<void> {
@@ -122,6 +126,14 @@
     }
   }
 
+  function shareSettings (e: MouseEvent): void {
+    if (fullScreen) {
+      popup = getPopup(ShareSettingPopup, e)
+    } else {
+      showPopup(ShareSettingPopup, {}, eventToHTMLElement(e))
+    }
+  }
+
   function setAccess (e: MouseEvent): void {
     if (isOffice(room) && room.person !== me) return
     if (fullScreen) {
@@ -208,13 +220,15 @@
         />
       {/if}
       {#if allowShare}
-        <ModernButton
+        <SplitButton
+          size={'large'}
           icon={$isSharingEnabled ? love.icon.SharingEnabled : love.icon.SharingDisabled}
-          tooltip={{ label: $isSharingEnabled ? love.string.StopShare : love.string.Share }}
+          showTooltip={{ label: $isSharingEnabled ? love.string.StopShare : love.string.Share }}
           disabled={($screenSharing && !$isSharingEnabled) || !$isConnected}
-          kind={'secondary'}
-          size={'large'}
-          on:click={changeShare}
+          action={changeShare}
+          secondIcon={IconUpOutline}
+          secondAction={shareSettings}
+          separate
         />
       {/if}
       {#if hasAccountRole(getCurrentAccount(), AccountRole.User) && $isRecordingAvailable}

diff --git a/plugins/love-resources/src/components/RoomPopup.svelte b/plugins/love-resources/src/components/RoomPopup.svelte
@@ -14,43 +14,45 @@
 -->
 <script lang="ts">
   import { Person, PersonAccount } from '@hcengineering/contact'
-  import { personByIdStore, UserInfo } from '@hcengineering/contact-resources'
-  import { IdMap, getCurrentAccount, Ref, Class, Doc } from '@hcengineering/core'
-  import {
-    ModernButton,
-    SplitButton,
-    IconArrowLeft,
-    IconUpOutline,
-    Label,
-    eventToHTMLElement,
-    Location,
-    location,
-    navigate,
-    showPopup,
-    Scroller,
-    panelstore
-  } from '@hcengineering/ui'
+  import { UserInfo, personByIdStore } from '@hcengineering/contact-resources'
+  import { Class, Doc, IdMap, Ref, getCurrentAccount } from '@hcengineering/core'
   import {
+    MeetingMinutes,
     ParticipantInfo,
     Room,
     RoomType,
     isOffice,
     loveId,
     roomAccessIcon,
-    roomAccessLabel,
-    MeetingMinutes
+    roomAccessLabel
   } from '@hcengineering/love'
-  import { createEventDispatcher } from 'svelte'
-  import { getObjectLinkFragment } from '@hcengineering/view-resources'
   import { getClient } from '@hcengineering/presentation'
+  import {
+    IconArrowLeft,
+    IconUpOutline,
+    Label,
+    Location,
+    ModernButton,
+    Scroller,
+    SplitButton,
+    eventToHTMLElement,
+    location,
+    navigate,
+    panelstore,
+    showPopup
+  } from '@hcengineering/ui'
+  import view from '@hcengineering/view'
+  import { getObjectLinkFragment } from '@hcengineering/view-resources'
+  import { createEventDispatcher } from 'svelte'
   import love from '../plugin'
-  import { currentRoom, infos, invites, myInfo, myOffice, myRequests, currentMeetingMinutes, rooms } from '../stores'
+  import { currentMeetingMinutes, currentRoom, infos, invites, myInfo, myOffice, myRequests, rooms } from '../stores'
   import {
     endMeeting,
     getRoomName,
     isCameraEnabled,
     isConnected,
     isMicEnabled,
+    isShareWithSound,
     isSharingEnabled,
     leaveRoom,
     screenSharing,
@@ -62,7 +64,7 @@
   import CamSettingPopup from './CamSettingPopup.svelte'
   import MicSettingPopup from './MicSettingPopup.svelte'
   import RoomAccessPopup from './RoomAccessPopup.svelte'
-  import view from '@hcengineering/view'
+  import ShareSettingPopup from './ShareSettingPopup.svelte'
 
   export let room: Room
 
@@ -99,7 +101,9 @@
   }
 
   async function changeShare (): Promise<void> {
-    await setShare(!$isSharingEnabled)
+    const newValue = !$isSharingEnabled
+    const audio = newValue && $isShareWithSound
+    await setShare(newValue, audio)
   }
 
   async function leave (): Promise<void> {
@@ -114,6 +118,10 @@
     dispatch('close')
   }
 
+  function shareSettings (e: MouseEvent): void {
+    showPopup(ShareSettingPopup, {}, eventToHTMLElement(e))
+  }
+
   async function connect (): Promise<void> {
     await tryConnect($personByIdStore, $myInfo, room, info, $myRequests, $invites)
     dispatch('close')
@@ -207,14 +215,15 @@
         />
       {/if}
       {#if allowShare}
-        <ModernButton
+        <SplitButton
+          size={'large'}
           icon={$isSharingEnabled ? love.icon.SharingEnabled : love.icon.SharingDisabled}
-          label={$isSharingEnabled ? love.string.StopShare : love.string.Share}
-          tooltip={{ label: $isSharingEnabled ? love.string.StopShare : love.string.Share }}
+          showTooltip={{ label: $isSharingEnabled ? love.string.StopShare : love.string.Share }}
           disabled={($screenSharing && !$isSharingEnabled) || !$isConnected}
-          kind={'secondary'}
-          size={'large'}
-          on:click={changeShare}
+          action={changeShare}
+          secondIcon={IconUpOutline}
+          secondAction={shareSettings}
+          separate
         />
       {/if}
       <ModernButton

diff --git a/plugins/love-resources/src/components/ShareSettingPopup.svelte b/plugins/love-resources/src/components/ShareSettingPopup.svelte
@@ -0,0 +1,30 @@
+<script lang="ts">
+  import { Label, Toggle } from '@hcengineering/ui'
+  import love from '../plugin'
+  import { setShare, isShareWithSound, isSharingEnabled } from '../utils'
+</script>
+
+<div class="antiPopup p-4 grid">
+  <Label label={love.string.WithAudio} />
+  {$isShareWithSound}
+  <Toggle
+    showTooltip={{ label: love.string.ShareWithAudioTooltip }}
+    on={$isShareWithSound}
+    on:change={(e) => {
+      $isShareWithSound = e.detail
+      if ($isSharingEnabled) {
+        setShare($isSharingEnabled, e.detail)
+      }
+    }}
+  />
+</div>
+
+<style lang="scss">
+  .grid {
+    display: grid;
+    grid-template-columns: 1fr auto;
+    row-gap: 1rem;
+    column-gap: 1rem;
+    align-items: center;
+  }
+</style>
diff --git a/plugins/love-resources/src/components/VideoPopup.svelte b/plugins/love-resources/src/components/VideoPopup.svelte
@@ -13,9 +13,14 @@
 // limitations under the License.
 -->
 <script lang="ts">
+  import aiBot from '@hcengineering/ai-bot'
+  import { Person, PersonAccount } from '@hcengineering/contact'
+  import { personIdByAccountId } from '@hcengineering/contact-resources'
+  import { Ref } from '@hcengineering/core'
+  import { RoomType, Room as TypeRoom } from '@hcengineering/love'
+  import { MessageBox } from '@hcengineering/presentation'
   import { ActionIcon, Scroller, showPopup } from '@hcengineering/ui'
   import view from '@hcengineering/view'
-  import { RoomType, Room as TypeRoom } from '@hcengineering/love'
   import {
     LocalParticipant,
     LocalTrackPublication,
@@ -28,11 +33,6 @@
     TrackPublication
   } from 'livekit-client'
   import { createEventDispatcher, onDestroy, onMount, tick } from 'svelte'
-  import { Ref } from '@hcengineering/core'
-  import { MessageBox } from '@hcengineering/presentation'
-  import { Person, PersonAccount } from '@hcengineering/contact'
-  import aiBot from '@hcengineering/ai-bot'
-  import { personIdByAccountId } from '@hcengineering/contact-resources'
 
   import love from '../plugin'
   import { currentRoom, infos, myInfo, myOffice } from '../stores'
@@ -41,6 +41,7 @@
     isCameraEnabled,
     isConnected,
     isMicEnabled,
+    isShareWithSound,
     isSharingEnabled,
     leaveRoom,
     lk,
@@ -289,7 +290,9 @@
 
   async function changeShare (): Promise<void> {
     if (!$isConnected) return
-    await setShare(!$isSharingEnabled)
+    const newValue = !$isSharingEnabled
+    const audio = newValue && $isShareWithSound
+    await setShare(newValue, audio)
   }
 
   $: dispatchFit($isSharingEnabled)