@live-change/video-call-frontend 0.8.37 → 0.8.38

package/front/src/App.vue

@@ -9,7 +9,7 @@
 
 <script setup>
   import 'primevue/resources/themes/saga-green/theme.css'
-  import "@fortawesome/fontawesome-free/css/all.min.css"
+  import 'boxicons/css/boxicons.min.css'
 
   import { useLocale } from '@live-change/vue3-components'
   const locale = useLocale()

package/front/src/room/PeerVideo.vue

@@ -26,8 +26,8 @@
 
 <script setup>
 
-  import { VolumeIndicator } from "@live-change/peer-connection"
-  import { UserIdentification } from "@live-change/identification-frontend"
+  import { VolumeIndicator } from "@live-change/peer-connection-frontend"
+  import { UserIdentification } from "@live-change/user-frontend"
 
   import { defineProps, defineEmits, toRefs, ref, computed } from 'vue'
 

package/front/src/room/Room.vue

@@ -1,6 +1,7 @@
 <template>
   <LimitedAccess v-slot="{ authorized }" objectType="videoCall_Room" :object="room" :requiredRoles="requiredRoles">
-    <div v-if="!joined" class="surface-card shadow-1 border-round p-3 flex flex-row flex-wrap align-items-center">
+    <div v-if="state === 'welcome'"
+         class="surface-card shadow-1 border-round p-3 flex flex-row flex-wrap align-items-center">
       <div class="w-30rem m-1" style="max-width: 80vw">
         <DeviceSelect v-model="selectedDevices" />
       </div>
@@ -12,6 +13,12 @@
     <template v-else>
       <p>JOINED</p>
     </template>
+<!--    <p>selected devices: {{ selectedDevices }}</p>
+    <p>local media streams:  {{ localMediaStreams }}</p>
+    <p>local tracks:  {{ localTracks }}</p>-->
+    <div class="surface-card shadow-1 border-round mt-3 p-3">
+      <pre>{{ JSON.stringify(peer?.summary, null, "  ") }}</pre>
+    </div>
   </LimitedAccess>
 </template>
 
@@ -19,7 +26,16 @@
   import { LimitedAccess } from "@live-change/access-control-frontend"
   import { DeviceSelect } from '@live-change/peer-connection-frontend'
 
-  import { defineProps, toRefs, ref, computed } from 'vue'
+  import {
+    ref, unref, computed, watch, watchEffect, toRefs,
+    onMounted, onUnmounted, defineProps, getCurrentInstance
+  } from 'vue'
+  import { path, live, actions, api as useApi } from '@live-change/vue3-ssr'
+  const api = useApi()
+
+  const appContext = (typeof window != 'undefined') && getCurrentInstance()?.appContext
+
+  import { createPeer, mediaStreamsTracks } from "@live-change/peer-connection-frontend"
 
   const props = defineProps({
     room: {
@@ -31,17 +47,59 @@
   const { room } = toRefs(props)
   const requiredRoles = ['listener', 'speaker']
 
-  const joined = ref(false)
+  const state = ref('welcome')
 
   const selectedDevices = ref({ })
+  const displayMedia = ref()
 
   const canJoin = computed(() => !!selectedDevices.value.userMedia)
 
   function join() {
     console.log('Joining room', room.value, selectedDevices.value)
-    joined.value = true
+    state.value = 'joining'
+    state.value = 'joined'
+  }
+
+  const localMediaStreams = computed(() =>
+    ( selectedDevices.value?.media ? [selectedDevices.value.media] : [])
+      .concat(displayMedia.value ? [displayMedia.value] : [])
+  )
+  const localTracks = mediaStreamsTracks(localMediaStreams)
+  watch(() => ([selectedDevices.value.audioMuted, selectedDevices.value.media]), ([muted, media]) => {
+    if(!media) return
+    for(const track of media.getAudioTracks()) for(const localTrack of localTracks.value)
+      if(localTrack.track === track) localTrack.enabled = !muted
+  }, { immediate: true })
+  watch(() => ([selectedDevices.value.videoMuted, selectedDevices.value.media]), ([muted, media]) => {
+    if(!media) return
+    for(const track of media.getVideoTracks()) for(const localTrack of localTracks.value)
+      if(localTrack.track === track) localTrack.enabled = !muted
+  }, { immediate: true })
+
+  const peer = ref()
+
+  watchEffect(() => {
+    if(!peer.value) return
+    peer.value.online = state.value === 'joined'
+  }, { immediate: true })
+
+  let createPeerPromise = null
+  async function initPeer() {
+    if(createPeerPromise) return createPeerPromise
+    createPeerPromise = createPeer({
+      channelType: 'videoCall_Room',
+      channel: room.value,
+      onUnmountedCb: onUnmounted, appContext,
+      localTracks,
+    })
+    peer.value = await createPeerPromise
+    createPeerPromise = null
   }
 
+  onMounted(async () => {
+    await initPeer()
+  })
+
 
 </script>
 

package/index.js

@@ -1,2 +1,10 @@
+import PeerVideo from './front/src/room/PeerVideo.vue'
+import Room from './front/src/room/Room.vue'
+import VideoWall from './front/src/room/VideoWall.vue'
+
+export { PeerVideo, Room, VideoWall }
+
+import { videoCallRoutes } from './front/src/router.js'
+export { videoCallRoutes }
 
 export { }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@live-change/video-call-frontend",
-  "version": "0.8.37",
+  "version": "0.8.38",
   "scripts": {
     "memDev": "node server/start.js memDev --enableSessions --initScript ./init.js --dbAccess",
     "localDevInit": "rm tmp.db; node server/start.js localDev --enableSessions --initScript ./init.js",
@@ -35,41 +35,41 @@
     "@codemirror/language": "6.10.1",
     "@dotenvx/dotenvx": "0.27.0",
     "@fortawesome/fontawesome-free": "^6.5.2",
-    "@live-change/access-control-frontend": "^0.8.37",
-    "@live-change/access-control-service": "^0.8.37",
-    "@live-change/backup-service": "^0.8.37",
-    "@live-change/blog-frontend": "^0.8.37",
-    "@live-change/blog-service": "^0.8.37",
-    "@live-change/cli": "^0.8.37",
-    "@live-change/content-frontend": "^0.8.37",
-    "@live-change/content-service": "^0.8.37",
-    "@live-change/dao": "^0.8.37",
-    "@live-change/dao-vue3": "^0.8.37",
-    "@live-change/dao-websocket": "^0.8.37",
-    "@live-change/db-client": "^0.8.37",
-    "@live-change/email-service": "^0.8.37",
-    "@live-change/framework": "^0.8.37",
-    "@live-change/frontend-auto-form": "^0.8.37",
-    "@live-change/frontend-base": "^0.8.37",
-    "@live-change/geoip-service": "^0.8.37",
-    "@live-change/image-frontend": "^0.8.37",
-    "@live-change/locale-settings-service": "^0.8.37",
-    "@live-change/password-authentication-service": "^0.8.37",
-    "@live-change/peer-connection-service": "^0.8.37",
-    "@live-change/prosemirror-service": "^0.8.37",
-    "@live-change/secret-code-service": "^0.8.37",
-    "@live-change/secret-link-service": "^0.8.37",
-    "@live-change/session-service": "^0.8.37",
-    "@live-change/task-service": "^0.8.37",
-    "@live-change/upload-frontend": "^0.8.37",
-    "@live-change/url-frontend": "^0.8.37",
-    "@live-change/url-service": "^0.8.37",
-    "@live-change/user-frontend": "^0.8.37",
-    "@live-change/user-identification-service": "^0.8.37",
-    "@live-change/user-service": "^0.8.37",
-    "@live-change/vote-service": "^0.8.37",
-    "@live-change/vue3-components": "^0.8.37",
-    "@live-change/vue3-ssr": "^0.8.37",
+    "@live-change/access-control-frontend": "^0.8.38",
+    "@live-change/access-control-service": "^0.8.38",
+    "@live-change/backup-service": "^0.8.38",
+    "@live-change/blog-frontend": "^0.8.38",
+    "@live-change/blog-service": "^0.8.38",
+    "@live-change/cli": "^0.8.38",
+    "@live-change/content-frontend": "^0.8.38",
+    "@live-change/content-service": "^0.8.38",
+    "@live-change/dao": "^0.8.38",
+    "@live-change/dao-vue3": "^0.8.38",
+    "@live-change/dao-websocket": "^0.8.38",
+    "@live-change/db-client": "^0.8.38",
+    "@live-change/email-service": "^0.8.38",
+    "@live-change/framework": "^0.8.38",
+    "@live-change/frontend-auto-form": "^0.8.38",
+    "@live-change/frontend-base": "^0.8.38",
+    "@live-change/geoip-service": "^0.8.38",
+    "@live-change/image-frontend": "^0.8.38",
+    "@live-change/locale-settings-service": "^0.8.38",
+    "@live-change/password-authentication-service": "^0.8.38",
+    "@live-change/peer-connection-service": "^0.8.38",
+    "@live-change/prosemirror-service": "^0.8.38",
+    "@live-change/secret-code-service": "^0.8.38",
+    "@live-change/secret-link-service": "^0.8.38",
+    "@live-change/session-service": "^0.8.38",
+    "@live-change/task-service": "^0.8.38",
+    "@live-change/upload-frontend": "^0.8.38",
+    "@live-change/url-frontend": "^0.8.38",
+    "@live-change/url-service": "^0.8.38",
+    "@live-change/user-frontend": "^0.8.38",
+    "@live-change/user-identification-service": "^0.8.38",
+    "@live-change/user-service": "^0.8.38",
+    "@live-change/vote-service": "^0.8.38",
+    "@live-change/vue3-components": "^0.8.38",
+    "@live-change/vue3-ssr": "^0.8.38",
     "@vueuse/core": "^10.11.0",
     "boxicons": "^2.1.4",
     "codeceptjs-assert": "^0.0.5",
@@ -93,7 +93,7 @@
     "vue3-scroll-border": "0.1.6"
   },
   "devDependencies": {
-    "@live-change/codeceptjs-helper": "^0.8.37",
+    "@live-change/codeceptjs-helper": "^0.8.38",
     "codeceptjs": "^3.5.12",
     "generate-password": "1.7.1",
     "playwright": "^1.41.2",
@@ -104,5 +104,5 @@
   "author": "Michał Łaszczewski <michal@laszczewski.pl>",
   "license": "ISC",
   "description": "",
-  "gitHead": "8b97a83258a3eccd08534d0376015781c4eefdec"
+  "gitHead": "69b15b8d593c02482e1f36590089a176d72bb4cd"
 }

package/server/app.config.js

@@ -1,3 +1,6 @@
+import dotenv from 'dotenv'
+dotenv.config()
+
 import App from "@live-change/framework"
 const app = App.app()
 

package/server/services.list.js

@@ -38,7 +38,8 @@ export {
   googleAuthentication,
   localeSettings,
   online,
-  accessControl
+  accessControl,
+  peerConnection,
 }
 
 import videoCall from "@live-change/video-call-service"