настройки демонстрации экрана

client/app/composables/use-app.ts

@@ -1,3 +1,5 @@
+import type { ShareSettings } from '~/components/ShareScreenDialog.vue'
+import { ShareScreenDialog } from '#components'
 import { getVersion } from '@tauri-apps/api/app'
 import { openUrl as tauriOpenUrl } from '@tauri-apps/plugin-opener'
 import { computedAsync, createGlobalState } from '@vueuse/core'
@@ -8,6 +10,7 @@ export const useApp = createGlobalState(() => {
   const mediasoup = useMediasoup()
   const signaling = useSignaling()
   const { emit } = useEventBus()
+  const dialog = useDialog()
 
   const ready = ref(false)
   const isTauri = computed(() => '__TAURI_INTERNALS__' in window)
@@ -125,8 +128,25 @@ export const useApp = createGlobalState(() => {
 
   async function toggleShare() {
     if (!mediasoup.shareProducer.value) {
-      await mediasoup.enableShare()
-      emit('share:enabled')
+      const { close } = dialog.open(ShareScreenDialog, {
+        props: {
+          header: 'Share settings',
+          modal: true,
+          draggable: false,
+          closable: false,
+          dismissableMask: true,
+          style: {
+            width: '440px',
+          },
+        },
+        emits: {
+          onShare: async (settings: ShareSettings) => {
+            await mediasoup.enableShare(settings)
+            emit('share:enabled')
+            close()
+          },
+        },
+      })
     }
     else {
       await mediasoup.disableProducer(mediasoup.shareProducer.value)