[wip] feat(screensharing): use setDisplayMediaRequestHandler

Signed-off-by: Grigorii K. Shartsev <[email protected]>

Author: ShGKme

src/preload.js

@@ -165,6 +165,9 @@ const TALK_DESKTOP = {
 	 * @return {Promise<void>}
 	 */
 	showUpgrade: () => ipcRenderer.invoke('upgrade:show'),
+
+	onPromptDesktopCaptureSource: (callback) => ipcRenderer.on('talk:onPromptDesktopCaptureSource', (_event, sources) => callback(sources)),
+	desktopCaptureSourceSelected: (source) => ipcRenderer.send('talk:desktopCaptureSourceSelected', source),
 }
 
 // Set global window.TALK_DESKTOP

src/talk/renderer/AppGetDesktopMediaSource.vue

@@ -8,6 +8,13 @@ import { ref } from 'vue'
 
 import DesktopMediaSourceDialog from './components/DesktopMediaSourceDialog.vue'
 
+const props = defineProps({
+	sources: {
+		type: Array,
+		required: true,
+	},
+})
+
 const showDialog = ref(false)
 
 let promiseWithResolvers = null
@@ -36,5 +43,8 @@ defineExpose({ promptDesktopMediaSource })
 </script>
 
 <template>
-	<DesktopMediaSourceDialog v-if="showDialog" @submit="handlePrompt($event)" @cancel="handlePrompt('')" />
+	<DesktopMediaSourceDialog v-if="showDialog"
+		:sources="sources"
+		@submit="handlePrompt($event)"
+		@cancel="handlePrompt('')" />
 </template>

src/talk/renderer/components/DesktopMediaSourceDialog.vue

@@ -16,6 +16,13 @@ import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
 import { translate as t } from '@nextcloud/l10n'
 import DesktopMediaSourcePreview from './DesktopMediaSourcePreview.vue'
 
+const props = defineProps({
+	sources: {
+		type: Array,
+		required: true,
+	},
+})
+
 const emit = defineEmits(['submit', 'cancel'])
 
 const RE_REQUEST_SOURCES_TIMEOUT = 1000
@@ -47,10 +54,10 @@ const dialogButtons = computed(() => [
 ])
 
 const requestDesktopCapturerSources = async () => {
-	sources.value = await window.TALK_DESKTOP.getDesktopCapturerSources()
+	// props.sources = await window.TALK_DESKTOP.getDesktopCapturerSources()
 
 	// There is no source. Probably the user hasn't granted the permission.
-	if (!sources.value) {
+	if (!props.sources) {
 		emit('cancel')
 	}
 

src/talk/renderer/getDesktopMediaSource.js

@@ -13,12 +13,14 @@ let appGetDesktopMediaSourceInstance
 /**
  * Prompt user to select a desktop media source to share and return the selected sourceId or an empty string if canceled
  *
+ * @param sources
  * @return {Promise<{ sourceId: string }>} sourceId of the selected mediaSource or an empty string if canceled
  */
-export async function getDesktopMediaSource() {
+export async function getDesktopMediaSource(sources) {
 	if (!appGetDesktopMediaSourceInstance) {
 		const container = document.body.appendChild(document.createElement('div'))
-		appGetDesktopMediaSourceInstance = new Vue(AppGetDesktopMediaSource).$mount(container)
+		const AppGetDesktopMediaSourceCreator = Vue.extend(AppGetDesktopMediaSource)
+		appGetDesktopMediaSourceInstance = new AppGetDesktopMediaSourceCreator({ propsData: { sources } }).$mount(container)
 	}
 
 	return appGetDesktopMediaSourceInstance.promptDesktopMediaSource()

src/talk/renderer/talk.main.js

@@ -39,3 +39,9 @@ registerTalkDesktopSettingsSection()
 await import('./notifications/notifications.store.js')
 
 subscribeBroadcast('talk:conversation:open', ({ token, directCall }) => openConversation(token, { directCall }))
+
+window.TALK_DESKTOP.onPromptDesktopCaptureSource(async (sources) => {
+	const { sourceId } = await getDesktopMediaSource(sources)
+	console.log('Selected sourceId:', sourceId)
+	window.TALK_DESKTOP.desktopCaptureSourceSelected(sourceId)
+})