@live-change/peer-connection-frontend 0.8.93 → 0.8.95

package/front/components.d.ts

@@ -14,6 +14,7 @@ declare module 'vue' {
     Dialog: typeof import('primevue/dialog')['default']
     Dropdown: typeof import('primevue/dropdown')['default']
     InputSwitch: typeof import('primevue/inputswitch')['default']
+    MediaSettingsButton: typeof import('./src/components/MediaSettingsButton.vue')['default']
     MicrophoneButton: typeof import('./src/components/MicrophoneButton.vue')['default']
     PermissionsDialog: typeof import('./src/components/PermissionsDialog.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']

package/front/src/components/DeviceSelect.vue

@@ -44,6 +44,11 @@
         </div>
       </div>
 
+      <div v-if="gettingUserMedia"
+           class="absolute top-0 left-0 w-full h-full flex flex-column justify-content-center align-items-center">
+        <ProgressSpinner  />
+      </div>
+
       <div class="absolute top-0 left-0 w-full h-full flex flex-column justify-content-end align-items-center">
         <div class="flex flex-row justify-content-between align-items-center h-5rem w-7rem media-buttons">
           <MicrophoneButton v-model="model" @disabled-audio-click="handleDisabledAudioClick" />
@@ -140,6 +145,8 @@
       </template>
     </PermissionsDialog>
 
+    <pre>{{ model }}</pre>
+<!--    <pre>{{ audioInputs }}</pre>-->
 <!--
 
     <pre>PD: {{ permissionsDialog }}</pre>
@@ -163,6 +170,7 @@
 
   import Button from 'primevue/button'
   import Dropdown from 'primevue/dropdown'
+  import ProgressSpinner from 'primevue/progressspinner'
   import PermissionsDialog from './PermissionsDialog.vue'
   import VolumeIndicator from './VolumeIndicator.vue'
 
@@ -243,9 +251,22 @@
     onMounted(updateDevices)
   }
 
-  const audioInputs = computed(() => devices.value.filter(device => device.kind === 'audioinput'))
-  const audioOutputs = computed(() => devices.value.filter(device => device.kind === 'audiooutput'))
-  const videoInputs = computed(() => devices.value.filter(device => device.kind === 'videoinput'))
+  function fixLabel(device, index) {
+    const { deviceId, groupId, kind, label } = device
+    if(!label.trim()) return {
+      deviceId, groupId, kind,
+      label: ({
+        audioinput: "Audio Input",
+        audiooutput: "Audio Output",
+        videoinput: "Video Input"
+      }[kind]) + ` ${index + 1}`
+    }
+    return device
+  }
+
+  const audioInputs = computed(() => devices.value.filter(device => device.kind === 'audioinput').map(fixLabel))
+  const audioOutputs = computed(() => devices.value.filter(device => device.kind === 'audiooutput').map(fixLabel))
+  const videoInputs = computed(() => devices.value.filter(device => device.kind === 'videoinput').map(fixLabel))
 
   watch(audioInputs, (value) => {
     if(value.length === 0) return
@@ -298,6 +319,13 @@
       ...model.value,
       media
     }
+    setTimeout(() => { /// firefox needs this timeout
+      model.value = {
+        ...model.value,
+        media
+      }
+      console.log("MEDIA STREAM CHANGED", model.value.media, media)
+    }, 1)
   }
 
 /*  onMounted(() => {
@@ -332,11 +360,18 @@
     }
   }, { immediate: true })
 
-  let gettingUserMedia = false
+  const gettingUserMedia = ref(false)
   async function updateUserMedia(retry = false) {
     console.log("USER MEDIA UPDATE WHEN MODEL IS", model.value)
-    if(gettingUserMedia) return
-    gettingUserMedia = true
+    if(gettingUserMedia.value) return
+    if(!retry && model.value.mediaError) {
+      console.log("CLEAR MEDIA ERROR")
+      model.value = {
+        ...model.value,
+        mediaError: null
+      }
+    }
+    gettingUserMedia.value = true
     try {
       const constraints = selectedConstraints.value
       const videoAllowed = videoInputRequest.value !== 'none' && constraints.video
@@ -349,6 +384,10 @@
       try {
         console.log("GET USER MEDIA")
         const mediaStream = await getUserMediaNative(constraints)
+        if(JSON.stringify(selectedConstraints.value) !== JSON.stringify(constraints)) {
+          console.log("SELECTED CONSTRAINTS CHANGED WHILE GETTING USER MEDIA")
+          return
+        }
         /*      if(userMedia.value && retry) {
           console.log("CLOSE USER MEDIA")
           userMedia.value.getTracks().forEach(track => track.stop())
@@ -408,7 +447,7 @@
         }
       }
     } finally {
-      gettingUserMedia = false
+      gettingUserMedia.value = false
     }
   }
 
@@ -459,6 +498,15 @@
   const permissionsCallbacks = ref({})
 
   async function showPermissionsDialog() {
+    try {
+      await Promise.all([
+        navigator.permissions.query({ name: 'camera' }),
+        navigator.permissions.query({ name: 'microphone' })
+      ])
+    } catch(error) {
+      /// TODO: some other dialog for firefox...
+      return
+    }
     return new Promise((resolve, reject) => {
       permissionsCallbacks.value = {
         audioOnly: () => {
@@ -498,6 +546,7 @@
 
   function handleEmptyPreviewClick() {
     if(model.value.media) return
+    if(!permissionsDialog.value?.permissions) return
     const { camera, microphone } = permissionsDialog.value.permissions
     if(camera === 'denied' || microphone === 'denied') {
       // open permissions dialog
@@ -507,6 +556,7 @@
 
   function handleDisabledAudioClick() {
     limitedMedia.value = null
+    if(!permissionsDialog.value?.permissions) return
     const { camera, microphone } = permissionsDialog.value.permissions
     if(camera === 'denied' || microphone === 'denied') {
       // open permissions dialog
@@ -516,6 +566,7 @@
   function handleDisabledVideoClick() {
     console.log("DISABLED VIDEO CLICK")
     limitedMedia.value = null
+    if(!permissionsDialog.value?.permissions) return
     const { camera, microphone } = permissionsDialog.value.permissions
     if(camera === 'denied' || microphone === 'denied') {
       // open permissions dialog
@@ -545,7 +596,7 @@
   function updateAudioInput(value) {
     model.value = {
       ...model.value,
-      audioInput: value
+      audioInput: value,
     }
   }
   function updateAudioOutput(value) {

package/front/src/components/PermissionsDialog.vue

@@ -105,8 +105,13 @@
 
     for(const requiredPermission of JSON.parse(value)) {
       console.log("check permission", requiredPermission)
-      const permissionState = await navigator.permissions.query(requiredPermission)
-      const state = permissionState ? permissionState.state : "unknown"
+      let state, permissionState
+      try {
+        permissionState = await navigator.permissions.query(requiredPermission)
+        state = permissionState ? permissionState.state : "unknown"
+      } catch {
+        state = 'not_supported'
+      }
       model.value = {
         ...model.value,
         permissions: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@live-change/peer-connection-frontend",
-  "version": "0.8.93",
+  "version": "0.8.95",
   "scripts": {
     "memDev": "dotenvx run -- node server/start.js memDev --enableSessions --initScript ./init.js --dbAccess",
     "localDevInit": "rm tmp.db; dotenvx run -- node server/start.js localDev --enableSessions --initScript ./init.js",
@@ -22,19 +22,19 @@
   },
   "type": "module",
   "dependencies": {
-    "@live-change/cli": "^0.8.93",
-    "@live-change/dao": "^0.8.93",
-    "@live-change/dao-vue3": "^0.8.93",
-    "@live-change/dao-websocket": "^0.8.93",
-    "@live-change/framework": "^0.8.93",
-    "@live-change/password-authentication-service": "^0.8.93",
-    "@live-change/secret-code-service": "^0.8.93",
-    "@live-change/secret-link-service": "^0.8.93",
-    "@live-change/session-service": "^0.8.93",
-    "@live-change/user-frontend": "^0.8.93",
-    "@live-change/user-service": "^0.8.93",
-    "@live-change/vue3-components": "^0.8.93",
-    "@live-change/vue3-ssr": "^0.8.93",
+    "@live-change/cli": "^0.8.95",
+    "@live-change/dao": "^0.8.95",
+    "@live-change/dao-vue3": "^0.8.95",
+    "@live-change/dao-websocket": "^0.8.95",
+    "@live-change/framework": "^0.8.95",
+    "@live-change/password-authentication-service": "^0.8.95",
+    "@live-change/secret-code-service": "^0.8.95",
+    "@live-change/secret-link-service": "^0.8.95",
+    "@live-change/session-service": "^0.8.95",
+    "@live-change/user-frontend": "^0.8.95",
+    "@live-change/user-service": "^0.8.95",
+    "@live-change/vue3-components": "^0.8.95",
+    "@live-change/vue3-ssr": "^0.8.95",
     "@vueuse/core": "^10.11.0",
     "boxicons": "^2.1.4",
     "codeceptjs-assert": "^0.0.5",
@@ -54,7 +54,7 @@
     "vue3-scroll-border": "0.1.6"
   },
   "devDependencies": {
-    "@live-change/codeceptjs-helper": "^0.8.93",
+    "@live-change/codeceptjs-helper": "^0.8.95",
     "codeceptjs": "^3.6.5",
     "generate-password": "1.7.1",
     "playwright": "^1.41.2",
@@ -65,5 +65,5 @@
   "author": "Michał Łaszczewski <michal@laszczewski.pl>",
   "license": "BSD-3-Clause",
   "description": "",
-  "gitHead": "c5c699c6f29b735dd1597ddf572a8b956b338329"
+  "gitHead": "852e9817a89ffe5f2b6dc13c658d7a1bfd4f8fa6"
 }