@live-change/peer-connection-frontend 0.8.45 → 0.8.46

package/front/src/components/CameraButton.vue

@@ -0,0 +1,53 @@
+<template>
+  <Button v-if="!model.videoInput?.deviceId"
+          @click="emit('disabledAudioClick')" raised
+          icon="bx bx-camera-off"  severity="secondary" rounded v-ripple />
+  <Button v-else-if="videoInputMuted" @click="videoInputMuted = false" raised
+          icon="bx bx-camera-off" severity="danger" rounded v-ripple />
+  <Button v-else @click="videoInputMuted = true" raised
+          icon="bx bx-camera" severity="success" rounded v-ripple />
+</template>
+
+<script setup>
+  import { defineModel, defineEmits, computed } from 'vue'
+
+  const model = defineModel({
+    required: true,
+    type: Object,
+    properties: {
+      audioInput: {
+        type: Object
+      },
+      audioOutput: {
+        type: Object
+      },
+      videoInput: {
+        type: Object
+      },
+      audioMuted: {
+        type: Boolean
+      },
+      videoMuted: {
+        type: Boolean
+      },
+      userMedia: {
+        type: Object
+      }
+    }
+  })
+
+  const emit = defineEmits(['disabledVideoClick'])
+
+  const videoInputMuted = computed({
+    get: () => model.value?.videoMuted,
+    set: (value) => model.value = {
+      ...model.value,
+      videoMuted: value
+    }
+  })
+
+</script>
+
+<style scoped>
+
+</style>

package/front/src/components/DeviceSelect.vue

@@ -20,23 +20,8 @@
       </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">
-
-          <Button v-if="!selectedConstraints?.audio?.deviceId"
-                  @click="handleDisabledAudioClick" raised
-                  icon="bx bx-microphone-off"  severity="secondary" rounded v-ripple />
-          <Button v-else-if="audioInputMuted" @click="audioInputMuted = false" raised
-                  icon="bx bx-microphone-off" severity="danger" rounded v-ripple />
-          <Button v-else @click="audioInputMuted = true" raised
-                  icon="bx bx-microphone" severity="success" rounded v-ripple />
-
-          <Button v-if="!selectedConstraints?.video?.deviceId"
-                  @click="handleDisabledVideoClick" raised
-                  icon="bx bx-camera-off" severity="secondary" rounded v-ripple />
-          <Button v-else-if="videoInputMuted" @click="videoInputMuted = false" raised
-                  icon="bx bx-camera-off" severity="danger" rounded v-ripple />
-          <Button v-else @click="videoInputMuted = true" raised
-                  icon="bx bx-camera" severity="success" rounded v-ripple />
-
+          <MicrophoneButton v-model="model" @disabled-audio-click="handleDisabledAudioClick" />
+          <CameraButton v-model="model" @disabled-video-click="handleDisabledVideoClick" />
         </div>
       </div>
       <div class="absolute top-0 right-0">
@@ -147,10 +132,12 @@
   import PermissionsDialog from './PermissionsDialog.vue'
   import VolumeIndicator from './VolumeIndicator.vue'
 
-  import { defineProps, defineModel, computed, ref, toRefs, onMounted, watch } from 'vue'
+  import { defineProps, defineModel, computed, ref, toRefs, onMounted, watch, watchEffect } from 'vue'
   import { useInterval, useEventListener } from  "@vueuse/core"
   import { getUserMedia as getUserMediaNative, getDisplayMedia as getDisplayMediaNative, isUserMediaPermitted }
     from "./userMedia.js"
+  import MicrophoneButton from './MicrophoneButton.vue'
+  import CameraButton from './CameraButton.vue'
 
 
   const props = defineProps({
@@ -198,6 +185,8 @@
     }
   })
 
+  globalThis.deviceSelectModel = model
+
   const devices = ref([])
   async function updateDevices() {
     console.log("UPDATE DEVICES")
@@ -213,22 +202,6 @@
   const audioOutputs = computed(() => devices.value.filter(device => device.kind === 'audiooutput'))
   const videoInputs = computed(() => devices.value.filter(device => device.kind === 'videoinput'))
 
-  const audioInputMuted = computed({
-    get: () => model.value?.audioMuted,
-    set: (value) => model.value = {
-      ...model.value,
-      audioMuted: value
-    }
-  })
-
-  const videoInputMuted = computed({
-    get: () => model.value?.videoMuted,
-    set: (value) => model.value = {
-      ...model.value,
-      videoMuted: value
-    }
-  })
-
   watch(audioInputs, (value) => {
     model.value = {
       ...model.value,
@@ -318,13 +291,13 @@
     }
   })
 
-  watch(() => [userMedia.value, audioInputMuted.value, videoInputMuted.value],
-    ([stream, audioMuted, videoMuted]) => {
-      if(stream) {
-        console.log("STREAM", stream, audioMuted, videoMuted)
-        stream.getAudioTracks().forEach(track => track.enabled = !audioMuted)
-        stream.getVideoTracks().forEach(track => track.enabled = !videoMuted)
-      }}, { immediate: true })
+  watchEffect(() => {
+    if(userMedia.value) {
+      console.log("STREAM", userMedia.value, model.value.audioMuted, model.value.videoMuted)
+      userMedia.value.getAudioTracks().forEach(track => track.enabled = !model.value.audioMuted)
+      userMedia.value.getVideoTracks().forEach(track => track.enabled = !model.value.videoMuted)
+    }
+  }, { immediate: true })
 
 
   const permissionsDialog = ref({ })

package/front/src/components/MicrophoneButton.vue

@@ -0,0 +1,53 @@
+<template>
+  <Button v-if="!model.audioInput?.deviceId"
+          @click="emit('disabledAudioClick')" raised
+          icon="bx bx-microphone-off"  severity="secondary" rounded v-ripple />
+  <Button v-else-if="audioInputMuted" @click="audioInputMuted = false" raised
+          icon="bx bx-microphone-off" severity="danger" rounded v-ripple />
+  <Button v-else @click="audioInputMuted = true" raised
+          icon="bx bx-microphone" severity="success" rounded v-ripple />
+</template>
+
+<script setup>
+  import { defineModel, defineEmits, computed } from 'vue'
+
+  const model = defineModel({
+    required: true,
+    type: Object,
+    properties: {
+      audioInput: {
+        type: Object
+      },
+      audioOutput: {
+        type: Object
+      },
+      videoInput: {
+        type: Object
+      },
+      audioMuted: {
+        type: Boolean
+      },
+      videoMuted: {
+        type: Boolean
+      },
+      userMedia: {
+        type: Object
+      }
+    }
+  })
+
+  const emit = defineEmits(['disabledAudioClick'])
+
+  const audioInputMuted = computed({
+    get: () => model.value?.audioMuted,
+    set: (value) => model.value = {
+      ...model.value,
+      audioMuted: value
+    }
+  })
+
+</script>
+
+<style scoped>
+
+</style>

package/front/src/components/Peer.js

@@ -220,6 +220,7 @@ const createPeer = async ({
     otherPeers,
     summary,
     setTrackEnabled,
+    localPeerState: computedLocalPeerState
   }
 
   const peerInternal = {

package/index.js

@@ -2,8 +2,10 @@ import Debugger from './front/src/components/Debugger.vue'
 import DeviceSelect from './front/src/components/DeviceSelect.vue'
 import PermissionsDialog from './front/src/components/PermissionsDialog.vue'
 import VolumeIndicator from './front/src/components/VolumeIndicator.vue'
+import CameraButton from './front/src/components/CameraButton.vue'
+import MicrophoneButton from './front/src/components/MicrophoneButton.vue'
 
-export { Debugger, DeviceSelect, PermissionsDialog, VolumeIndicator }
+export { Debugger, DeviceSelect, PermissionsDialog, VolumeIndicator, CameraButton, MicrophoneButton }
 
 import { createPeer } from './front/src/components/Peer.js'
 import { createPeerConnection } from './front/src/components/PeerConnection.js'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@live-change/peer-connection-frontend",
-  "version": "0.8.45",
+  "version": "0.8.46",
   "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.45",
-    "@live-change/dao": "^0.8.45",
-    "@live-change/dao-vue3": "^0.8.45",
-    "@live-change/dao-websocket": "^0.8.45",
-    "@live-change/framework": "^0.8.45",
-    "@live-change/password-authentication-service": "^0.8.45",
-    "@live-change/secret-code-service": "^0.8.45",
-    "@live-change/secret-link-service": "^0.8.45",
-    "@live-change/session-service": "^0.8.45",
-    "@live-change/user-frontend": "^0.8.45",
-    "@live-change/user-service": "^0.8.45",
-    "@live-change/vue3-components": "^0.8.45",
-    "@live-change/vue3-ssr": "^0.8.45",
+    "@live-change/cli": "^0.8.46",
+    "@live-change/dao": "^0.8.46",
+    "@live-change/dao-vue3": "^0.8.46",
+    "@live-change/dao-websocket": "^0.8.46",
+    "@live-change/framework": "^0.8.46",
+    "@live-change/password-authentication-service": "^0.8.46",
+    "@live-change/secret-code-service": "^0.8.46",
+    "@live-change/secret-link-service": "^0.8.46",
+    "@live-change/session-service": "^0.8.46",
+    "@live-change/user-frontend": "^0.8.46",
+    "@live-change/user-service": "^0.8.46",
+    "@live-change/vue3-components": "^0.8.46",
+    "@live-change/vue3-ssr": "^0.8.46",
     "@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.45",
+    "@live-change/codeceptjs-helper": "^0.8.46",
     "codeceptjs": "^3.5.12",
     "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": "0a8c79edc8dbaeb2857fb798833050bc0ae4776b"
+  "gitHead": "a86f309b65b5d5c37d31ddb6b8ef0f53d1f6abaa"
 }