test publish

client/app/composables/use-app.ts

@@ -1,4 +1,6 @@
-import { createGlobalState } from '@vueuse/core'
+import { getVersion } from '@tauri-apps/api/app'
+
+import { computedAsync, createGlobalState } from '@vueuse/core'
 import { useClients } from '~/composables/use-clients'
 
 export const useApp = createGlobalState(() => {
@@ -11,6 +13,10 @@ export const useApp = createGlobalState(() => {
 
   const previousInputMuted = ref(inputMuted.value)
 
+  const isTauri = computed(() => '__TAURI_INTERNALS__' in window)
+
+  const version = computedAsync(() => isTauri.value ? getVersion() : 'web', '-')
+
   function muteInput() {
     inputMuted.value = true
   }
@@ -43,13 +49,13 @@ export const useApp = createGlobalState(() => {
 
   watch(inputMuted, async (inputMuted) => {
     if (inputMuted) {
-      await mediasoup.muteMic()
+      await mediasoup.pauseProducer('microphone')
     }
     else {
       if (outputMuted.value) {
         outputMuted.value = false
       }
-      await mediasoup.unmuteMic()
+      await mediasoup.resumeProducer('microphone')
     }
 
     const toastText = inputMuted ? 'Microphone muted' : 'Microphone activated'
@@ -79,5 +85,7 @@ export const useApp = createGlobalState(() => {
     muteOutput,
     unmuteOutput,
     toggleOutput,
+    version,
+    isTauri,
   }
 })

client/app/composables/use-auth.ts

@@ -16,7 +16,7 @@ export const useAuth = createGlobalState(() => {
 
   async function login(username: string, password: string): Promise<void> {
     try {
-      const result = await chadApi('/login', {
+      const result = await chadApi<Me>('/login', {
         method: 'POST',
         body: {
           username,
@@ -33,7 +33,7 @@ export const useAuth = createGlobalState(() => {
 
   async function register(username: string, password: string): Promise<void> {
     try {
-      const result = await chadApi('/register', {
+      const result = await chadApi<Me>('/register', {
         method: 'POST',
         body: {
           username,

client/app/composables/use-mediasoup.ts

@@ -4,6 +4,8 @@ import * as mediasoupClient from 'mediasoup-client'
 import { usePreferences } from '~/composables/use-preferences'
 import { useSignaling } from '~/composables/use-signaling'
 
+type ProducerType = 'microphone' | 'camera' | 'share'
+
 const ICE_SERVERS: RTCIceServer[] = [
   { urls: 'stun:stun.l.google.com:19302' },
   { urls: 'stun:stun.l.google.com:5349' },
@@ -31,7 +33,7 @@ export const useMediasoup = createSharedComposable(() => {
   const recvTransport = shallowRef<mediasoupClient.types.Transport>()
 
   const micProducer = shallowRef<mediasoupClient.types.Producer>()
-  const webcamProducer = shallowRef<mediasoupClient.types.Producer>()
+  const cameraProducer = shallowRef<mediasoupClient.types.Producer>()
   const shareProducer = shallowRef<mediasoupClient.types.Producer>()
 
   const consumers = shallowRef<Map<string, mediasoupClient.types.Consumer>>(new Map())
@@ -145,7 +147,7 @@ export const useMediasoup = createSharedComposable(() => {
     socket.on(
       'newConsumer',
       async (
-        { id, producerId, kind, rtpParameters, peerId: clientId, appData },
+        { id, producerId, kind, rtpParameters, socketId, appData, producerPaused },
         cb,
       ) => {
         if (!recvTransport.value)
@@ -156,13 +158,16 @@ export const useMediasoup = createSharedComposable(() => {
           producerId,
           kind,
           rtpParameters,
-          streamId: `${clientId}-${appData.share ? 'share' : 'mic-webcam'}`,
-          appData: { ...appData, clientId },
+          streamId: `${socketId}-${appData.share ? 'share' : 'mic-webcam'}`,
+          appData: { ...appData, socketId },
         })
 
+        if (producerPaused)
+          consumer.pause()
+
         consumer.on('transportclose', () => {
-          consumers.value.delete(consumer.id)
-          triggerRef(consumers)
+          if (consumers.value.delete(consumer.id))
+            triggerRef(consumers)
         })
 
         consumers.value.set(consumer.id, consumer)
@@ -177,13 +182,8 @@ export const useMediasoup = createSharedComposable(() => {
       async (
         { consumerId },
       ) => {
-        const consumer = consumers.value.get(consumerId)
-
-        if (!consumer)
-          return
-
-        consumers.value.delete(consumer.id)
-        triggerRef(consumers)
+        if (consumers.value.delete(consumerId))
+          triggerRef(consumers)
       },
     )
 
@@ -198,16 +198,40 @@ export const useMediasoup = createSharedComposable(() => {
       recvTransport.value = undefined
 
       micProducer.value = undefined
-      webcamProducer.value = undefined
+      cameraProducer.value = undefined
       shareProducer.value = undefined
 
       consumers.value = new Map()
       producers.value = new Map()
     })
+
+    socket.on('consumerPaused', ({ consumerId }) => {
+      const consumer = consumers.value.get(consumerId)
+
+      if (!consumer)
+        return
+
+      consumer.pause()
+
+      console.log(consumerId)
+
+      triggerRef(consumers)
+    })
+
+    socket.on('consumerResumed', ({ consumerId }) => {
+      const consumer = consumers.value.get(consumerId)
+
+      if (!consumer)
+        return
+
+      consumer.resume()
+
+      triggerRef(consumers)
+    })
   }, { immediate: true, flush: 'sync' })
 
-  function getClientConsumers(clientId: ChadClient['socketId']) {
-    return consumers.value.values().filter(consumer => consumer.appData.clientId === clientId)
+  function getClientConsumers(socketId: ChadClient['socketId']) {
+    return consumers.value.values().filter(consumer => consumer.appData.socketId === socketId)
   }
 
   async function enableMic() {
@@ -274,33 +298,48 @@ export const useMediasoup = createSharedComposable(() => {
     micProducer.value = undefined
   }
 
-  async function muteMic() {
-    if (!signaling.socket.value || !micProducer.value)
+  async function pauseProducer(type: ProducerType) {
+    if (!signaling.socket.value)
+      return
+
+    const producer = getProducerByType(type)
+
+    if (!producer)
+      return
+
+    if (producer.paused)
       return
 
     try {
-      micProducer.value.pause()
+      producer.pause()
 
       await signaling.socket.value.emitWithAck('pauseProducer', {
-        producerId: micProducer.value.id,
+        producerId: producer.id,
       })
     }
     catch {
+      producer.resume()
     }
   }
 
-  async function unmuteMic() {
-    if (!signaling.socket.value || !micProducer.value)
+  async function resumeProducer(type: ProducerType) {
+    if (!signaling.socket.value)
+      return
+
+    const producer = getProducerByType(type)
+
+    if (!producer)
       return
 
     try {
-      micProducer.value.resume()
+      producer.resume()
 
       await signaling.socket.value.emitWithAck('resumeProducer', {
-        producerId: micProducer.value.id,
+        producerId: producer.id,
       })
     }
     catch {
+      producer.pause()
     }
   }
 
@@ -308,6 +347,17 @@ export const useMediasoup = createSharedComposable(() => {
     signaling.connect()
   }
 
+  function getProducerByType(type: ProducerType) {
+    switch (type) {
+      case 'microphone':
+        return micProducer.value
+      case 'camera':
+        return cameraProducer.value
+      case 'share':
+        return shareProducer.value
+    }
+  }
+
   return {
     init,
     consumers,
@@ -317,10 +367,10 @@ export const useMediasoup = createSharedComposable(() => {
     rtpCapabilities,
     device,
     micProducer,
-    webcamProducer,
+    cameraProducer,
     shareProducer,
     getClientConsumers,
-    muteMic,
-    unmuteMic,
+    pauseProducer,
+    resumeProducer,
   }
 })

client/app/composables/use-preferences.ts

@@ -1,11 +1,22 @@
-import { createGlobalState } from '@vueuse/core'
+import { createGlobalState, useDevicesList } from '@vueuse/core'
 
 export const usePreferences = createGlobalState(() => {
-  const audioDevice = shallowRef()
-  const videoDevice = shallowRef()
+  const inputDeviceId = shallowRef<MediaDeviceInfo['deviceId']>()
+  const outputDeviceId = shallowRef<MediaDeviceInfo['deviceId']>()
+
+  const {
+    ensurePermissions,
+    permissionGranted,
+    videoInputs,
+    audioInputs,
+    audioOutputs,
+  } = useDevicesList()
 
   return {
-    audioDevice,
-    videoDevice,
+    inputDeviceId,
+    outputDeviceId,
+    videoInputs,
+    audioInputs,
+    audioOutputs,
   }
 })

client/app/composables/use-signaling.ts

@@ -1,6 +1,7 @@
 import type { Socket } from 'socket.io-client'
 import { createSharedComposable } from '@vueuse/core'
 import { io } from 'socket.io-client'
+import { parseURL } from 'ufo'
 
 export const useSignaling = createSharedComposable(() => {
   const toast = useToast()
@@ -58,16 +59,21 @@ export const useSignaling = createSharedComposable(() => {
   })
 
   function connect() {
-    if (socket.value)
+    if (socket.value || !me.value)
       return
 
-    socket.value = io('https://api.koptilnya.xyz/webrtc', {
-    // socket.value = io('http://localhost:4000/webrtc', {
-      path: '/chad/ws',
+    const { protocol, host, pathname } = parseURL(__API_BASE_URL__)
+
+    const uri = host ? `${protocol}//${host}` : ``
+
+    socket.value = io(`http://localhost:4000/webrtc`, {
+      path: `/chad/ws`,
       transports: ['websocket'],
+      // socket.value = io(`${uri}/webrtc`, {
+      //   path: `${pathname}/ws`,
       withCredentials: true,
       auth: {
-        userId: me.value!.id,
+        userId: me.value.id,
       },
     })
   }

client/app/composables/use-updater.ts

@@ -0,0 +1,27 @@
+import type { Update } from '@tauri-apps/plugin-updater'
+import { check } from '@tauri-apps/plugin-updater'
+import { createGlobalState } from '@vueuse/core'
+
+export const useUpdater = createGlobalState(() => {
+  const lastUpdate = shallowRef<Update>()
+
+  const checking = ref(false)
+
+  async function checkForUpdates() {
+    try {
+      checking.value = true
+
+      lastUpdate.value = (await check()) ?? undefined
+    }
+    finally {
+      checking.value = false
+    }
+
+    return lastUpdate.value
+  }
+
+  return {
+    lastUpdate,
+    checkForUpdates,
+  }
+})