@live-change/peer-connection-frontend 0.8.34 → 0.8.36

package/front/src/components/Peer.js

@@ -1,14 +1,16 @@
-import { ref, isRef, onUnmounted, getCurrentInstance, unref, reactive, computed } from 'vue'
-import { path, live, actions, api as useApi } from '@live-change/vue3-ssr'
+import { ref, isRef, onUnmounted, getCurrentInstance, unref, reactive, computed, watch } from 'vue'
+import { usePath, live, actions, api as useApi, inboxReader } from '@live-change/vue3-ssr'
 import { createPeerConnection } from "./PeerConnection.js"
 
-const messagesBucketSize = 32
-
 let lastInstanceId = 0
 
-const createPeer = async ({ channelType, channel, instance, localMediaStreams, online, onUnmountedCb }) => {
-  if(!isRef(localMediaStreams)) {
-    localMediaStreams = ref(localMediaStreams ?? [])
+const createPeer = async ({
+  channelType, channel, instance, online, onUnmountedCb, appContext,
+  localTracks
+}) => {
+  if(!appContext) appContext = (typeof window != 'undefined') && getCurrentInstance()?.appContext
+  if(!isRef(localTracks)) {
+    localTracks = ref(localTracks ?? [])
   }
   if(!isRef(online)) {
     online = ref(online ?? false)
@@ -22,306 +24,219 @@ const createPeer = async ({ channelType, channel, instance, localMediaStreams, o
       }
     }
   }
-  if(!instance) instance = window.__WINDOW_ID__ + '.' + (++lastInstanceId)
 
+  if(!instance) instance = window.__WINDOW_ID__ + '.' + (++lastInstanceId)
 
   const api = useApi()
 
-  const peerId = [channelType, channel, 'session_Session', api.client.value.session, instance].join(':')
+  const peerId = [channelType, channel, api.client.value.session, instance].join(':')
 
   console.log("CREATE PEER!")
 
-  const [ peers, peerOnline, turnConfiguration ] = await Promise.all([
-    live(path().peerConnection.peers({ channelType, channel })),
-    live(path().online.session({ group: 'peer', peer: peerId })),
-    live(path().peerConnection.turnConfiguration({ peer: peerId }))
+  const path = usePath()
+  const [
+    peers,
+    peerOnline,
+    turnConfiguration
+  ] = await Promise.all([
+    live(path.peerConnection.peers({ channelType, channel }, appContext)
+      .with(peer => path.peerConnection.peerState({ peer: peer.id }).bind('peerState'))
+    ),
+    live(path.online.session({ group: 'peer', peer: peerId }), appContext),
+    live(path.peerConnection.turnConfiguration({ peer: peerId }), appContext)
   ])
 
   const localPeerState = ref(null)
 
   const finished = ref(false)
-  const lastProcessedMessage = ref('')
   const connections = ref([])
   const waitingConnections = ref([]) // connections that are not initialized, but messages are received
-  const localTracks = ref([])
 
-  const otherPeers = computed(() => peers.value?.filter(peer => peer.id != peerId))
+  const otherPeers = computed(() => peers.value?.filter(peer => peer.id !== peerId))
+  const otherPeersOnline = computed(() => otherPeers.value?.filter(peer => peer.peerState?.online))
   const isConnectionPossible = computed(() => online.value && (!!turnConfiguration.value))
 
   const rtcConfiguration = computed(() => ({
-      iceServers: [ turnConfiguration.value ],
-      iceTransportPolicy: 'all', // 'all' or 'relay',
-      bundlePolicy: 'balanced'
+    iceServers: [ turnConfiguration.value ],
+    iceTransportPolicy: 'all', // 'all' or 'relay',
+    bundlePolicy: 'balanced'
   }))
   const clientIp = computed(() => turnConfiguration.value?.clientIp)
 
   const anyLocalAudioEnabled = computed(() => localTracks.value
-      .some(trackInfo => trackInfo.track.kind == 'audio' && trackInfo.enabled))
+      .some(trackInfo => trackInfo.track.kind === 'audio' && trackInfo.enabled))
   const anyLocalVideoEnabled = computed(() => localTracks.value
-      .some(trackInfo => trackInfo.track.kind == 'video' && trackInfo.enabled))
+      .some(trackInfo => trackInfo.track.kind === 'video' && trackInfo.enabled))
   const anyLocalAudioAvailable = computed(() => localTracks.value
-      .some(trackInfo => trackInfo.track.kind == 'audio'))
+      .some(trackInfo => trackInfo.track.kind === 'audio'))
   const anyLocalVideoAvailable = computed(() => localTracks.value
-      .some(trackInfo => trackInfo.track.kind == 'video'))
+      .some(trackInfo => trackInfo.track.kind === 'video'))
   const computedLocalPeerState = computed(() => ({
+    online: online.value,
     audioState: anyLocalAudioAvailable.value ? (anyLocalAudioEnabled.value ? "enabled" : "muted") : "none",
     videoState: anyLocalVideoAvailable.value ? (anyLocalVideoEnabled.value ? "enabled" : "muted") : "none"
   }))
 
+  function sendPeerStateUpdate(update) {
+    const requestTimeout = 10000
+    api.requestWithSettings({ requestTimeout },
+      ['peerConnection', 'setPeerState'], update)
+      .catch(error => {
+        console.error("SET PEER STATE ERROR", error)
+        if(error === 'timeout' && !finished.value
+          && JSON.stringify({ ...localPeerState.value, ...update }) === JSON.stringify(localPeerState)
+        ) {
+          console.log("RETRYING")
+          sendPeerStateUpdate()
+        }
+      })
+  }
+  function updatePeerState(newState) {
+    const updated = { ...localPeerState.value, ...newState }
+    if(JSON.stringify(updated) !== JSON.stringify(localPeerState.value)) {
+      localPeerState.value = updated
+      const update = { ...updated, peer: peerId, _commandId: api.uid() }
+      sendPeerStateUpdate(update)
+    }
+  }
+  watch(computedLocalPeerState, (newState) => updatePeerState(newState), { immediate: true })
+
+  const messagesReader = inboxReader(
+    (rawPosition, bucketSize) => {
+      const path = ['peerConnection', 'messages', {
+        peer: peerId, gt: rawPosition, limit: bucketSize
+      }]
+      console.log("P", path)
+      return path
+    },
+    (message) => {
+      console.log("GOT MESSAGE!", message)
+      //console.log("HANDLE PEER MESSAGE", message)
+      if(message.from) {
+        let connection = connections.value.find(c => c.to === message.from)
+        if(!connection) connection = waitingConnections.value.find(c => c.to === message.from)
+        if(!connection) {
+          connection = createPeerConnection(peerInternal, message.from)
+          waitingConnections.value.push(connection)
+        }
+        connection.handleMessage(message)
+      } else {
+        throw new Error('messages from server not implemented')
+      }
+    },
+    '',
+    {
+      bucketSize: 32,
+      context: appContext
+    }
+  )
+
+  function sendMessage(message) {
+    console.log("SENDING PEER MESSAGE", message)
+    message.from = peerId
+    message.sent = message.sent || new Date().toISOString()
+    message._commandId = message._commandId || api.uid()
+    const requestTimeout = 10000
+    //console.log("SENDING PEER MESSAGE", message)
+    api.requestWithSettings({ requestTimeout }, ['peerConnection', 'postMessage'], message)
+      .catch(error => {
+        console.log("PEER MESSAGE ERROR", error)
+        if(error === 'timeout' && !finished.value) {
+          console.log("RETRYING")
+          sendMessage(message)
+        }
+      })
+  }
+
+  function updateConnections() {
+    const peers = isConnectionPossible.value ? otherPeersOnline.value : []
+    for(let connectionId = 0; connectionId < connections.value.length; connectionId++) {
+      const connection = connections.value[connectionId]
+      const connectionPeer = peers.find(peer => peer.id === connection.to)
+      if(!connectionPeer) {
+        connection.close()
+        connection.dispose()
+        connections.value.splice(connectionId, 1)
+        connectionId --
+      }
+    }
+    for(const peer of peers) {
+      let peerConnection = connections.value.find(connection => connection.to === peer.id)
+      if(peerConnection) continue;
+      const peerConnectionId = waitingConnections.value.findIndex(connection => connection.to === peer.id)
+      if(peerConnectionId !== -1) { // use waiting connection with cached messages
+        peerConnection = waitingConnections.value[peerConnectionId]
+        waitingConnections.value.splice(peerConnectionId, 1)
+      } else { // create connection
+        peerConnection = createPeerConnection(peerInternal, peer.id)
+      }
+      connections.value.push(peerConnection)
+      peerConnection.connect()
+    }
+  }
+
+  watch(() => isConnectionPossible.value && otherPeersOnline.value, () => {
+    updateConnections()
+  }, { immediate: true })
+
+  onUnmountedCb(() => {
+    finished.value = true
+    messagesReader.dispose()
+    for(const connection of waitingConnections.value) {
+      connection.dispose()
+    }
+    for(const connection of connections.value) {
+      connection.dispose()
+    }
+  })
+
   const summary = computed(() => ({
     peerId, online: online.value, finished: finished.value,
     computedLocalPeerState: computedLocalPeerState.value,
-    lastProcessedMessage: lastProcessedMessage.value,
     peers: peers.value?.length,
-    otherPeers: otherPeers.value?.map(p => p.id),
+    otherPeers: otherPeers.value?.map(p => p.peerState ?? p.id),
     connections: connections.value?.map(connection => connection.summary),
-    tracks: localTracks.value?.map(({ track, stream }) => {
-      const { id, kind, label, muted, enabled } = track
+    waitingConnections: waitingConnections.value?.map(connection => connection.summary),
+    localTracks: localTracks.value?.map(({ track, stream, enabled }) => {
+      const { id, kind, label, muted } = track
       return { id, kind, label, muted, enabled, stream: stream.id }
     }),
     turnConfiguration: turnConfiguration.value && {
       ...turnConfiguration.value,
       expire: new Date((+turnConfiguration.value.username.split(':')[0])*1000).toLocaleString()
     },
-    isConnectionPossible: isConnectionPossible.value
+    isConnectionPossible: isConnectionPossible.value,
+    //rtcConfiguration: rtcConfiguration.value
   }))
 
-  function setOnline(onlineValue) {
-    online.value = onlineValue
+  function setTrackEnabled(track, v) {
+    track.enabled = v
+    track.track.enabled = v
   }
 
-  return {
+  const peerPublic = {
     peerId, online, isConnectionPossible,
     connections, localTracks,
     otherPeers,
     summary,
-    setOnline
+    setTrackEnabled,
   }
 
-  /*
-
-    },
-    watch: {
-      otherPeers(peers) {
-        this.updateConnections()
-      },
-      isConnectionPossible(online) {
-        this.updateConnections()
-      },
-      computedLocalPeerState(newState) {
-        this.updatePeerState(newState)
-      },
-      localMediaStreams(newStreams, oldStreams) {
-        console.log("LOCAL MEDIA STREAMS CHANGE",
-            newStreams.map(stream => ({ id: stream.id, tracks: stream.getTracks().map(tr => tr.kind).join('/') })),
-            oldStreams.map(stream => ({ id: stream.id, tracks: stream.getTracks().map(tr => tr.kind).join('/') })))
+  const peerInternal = {
+    ...peerPublic,
+    rtcConfiguration,
+    clientIp,
+    sendMessage
+  }
 
-        let deletedTracks = []
-        let addedTracks = []
-        for(const oldStream of oldStreams) {
-          if(newStreams.indexOf(oldStream) != -1) continue; // existing stream
-          deletedTracks.push(...(oldStream.getTracks().map( track => ({ track, stream: oldStream }) )))
-          oldStream.removeEventListener('addtrack', this.mediaStreamAddTrackHandler)
-          oldStream.removeEventListener('removetrack', this.mediaStreamRemoveTrackHandler)
-        }
-        for(const newStream of newStreams) {
-          if(oldStreams.indexOf(newStream) != -1) continue; // existing stream
-          addedTracks.push(...(newStream.getTracks().map(track => {
-            const trackInfo = {
-              track, stream: newStream, muted: track.muted, enabled: track.enabled,
-              muteHandler: () => trackInfo.muted = track.muted,
-              unmuteHandler: () => trackInfo.muted = track.muted
-            }
-            return trackInfo
-          })))
-          newStream.addEventListener('addtrack', this.mediaStreamAddTrackHandler)
-          newStream.addEventListener('removetrack', this.mediaStreamRemoveTrackHandler)
-        }
-        for(const deletedTrack of deletedTracks) {
-          const trackIndex = this.localTracks.findIndex(track => track.track == deletedTrack.track)
-          if(trackIndex == -1) return console.error(`removal of non existing track ${deletedTrack.id}`)
-          const trackInfo = this.localTracks[trackIndex]
-          trackInfo.track.removeEventListener('mute', deletedTrack.muteHandler)
-          trackInfo.track.removeEventListener('unmute', deletedTrack.unmuteHandler)
-          this.localTracks.splice(trackIndex, 1)
-        }
-        for(const addedTrack of addedTracks) {
-          addedTrack.track.addEventListener('mute', addedTrack.muteHandler)
-          addedTrack.track.addEventListener('unmute', addedTrack.unmuteHandler)
-          this.localTracks.push(addedTrack)
-        }
-      }
-    },
-    methods: {
-      setTrackEnabled(track, v) {
-        track.enabled = v
-        track.track.enabled = v
-      },
-      updatePeerState(newState) {
-        const updated = { ...this.localPeerState, ...newState }
-        if(JSON.stringify(updated) != JSON.stringify(this.localPeerState)) {
-          this.localPeerState = updated
-          const update = { ...updated, peer: peerId, _commandId: api.guid() }
-          this.sendPeerStateUpdate(update)
-        }
-      },
-      sendPeerStateUpdate(update) {
-        const requestTimeout = 10000
-        dao.requestWithSettings({ requestTimeout },
-          ['peerConnection', 'setPeerState'], update)
-          .catch(error => {
-            console.log("SET PEER STATE ERROR", error)
-            if(error == 'timeout' && !this.finished
-                && JSON.stringify({ ...this.localPeerState, ...update }) === JSON.stringify(this.localPeerState)
-            ) {
-              console.log("RETRYING")
-              this.sendPeerStateUpdate()
-            }
-          })
-      },
-      observeMore() {
-        if(this.messagesObservable) {
-          this.messagesObservable.unobserve(this.messagesObserver)
-          this.messagesObservable = null
-        }
-        const path = ['peerConnection', 'messages', {
-          peer: peerId,
-          gt: this.lastProcessedMessage,
-          limit: messagesBucketSize
-        }]
-        this.messagesObservable = api.observable(path).observable
-        //console.log("MESSAGES OBSERVABLE", path, this.messagesObservable, this.messagesObservable.observable)
-        this.messagesObservable.observe(this.messagesObserver)
-        //this.messagesObservable.observe(this.messagesObserver)
-      },
-      handleMessagesSignal(signal, ...args) {
-        //console.log("HANDLE MESSAGE SIGNAL", signal, args)
-        if(signal == 'error') {
-          const error = args[0]
-          console.error("PEER MESSAGE ERROR", error.stack || error)
-          return
-        }
-        if(signal == 'putByField') {
-          const [field, id, message] = args
-          this.handleMessage(message)
-        } else if(signal == 'set') {
-          const value = args[0]
-          for(const message of value) {
-            this.handleMessage(message)
-          }
-        } else {
-          console.error("SIGNAL NOT HANDLED", signal)
-          /!*for(const message of this.messagesObservable.list) {
-            this.handleMessage(message)
-          }*!/
-        }
-        //console.log("PEER MESSAGES OBSERVABLE", this.messagesObservable)
-        if(this.messagesObservable.list.length >= messagesBucketSize) {
-          this.observeMore()
-        }
-      },
-      handleMessage(message) {
-        if(message.id <= this.lastProcessedMessage) {
-          console.log("IGNORE OLD MESSAGE", message.id)
-          return
-        }
-        this.lastProcessedMessage = message.id
-        //console.log("HANDLE PEER MESSAGE", message)
-        if(message.from) {
-          let connection = this.connections.find(c => c.to == message.from)
-          if(!connection) connection = this.waitingConnections.find(c => c.to == message.from)
-          if(!connection) {
-            connection = createPeerConnection(this, message.from)
-            this.waitingConnections.push(connection)
-          }
-          connection.handleMessage(message)
-        } else {
+  return {
+    ...peerPublic
+  }
 
-        }
-      },
-      sendMessage(message) {
-        message.from = peerId
-        message.sent = message.sent || new Date().toISOString()
-        message._commandId = message._commandId || api.guid()
-        const requestTimeout = 10000
-        //console.log("SENDING PEER MESSAGE", message)
-        dao.requestWithSettings({ requestTimeout }, ['peerConnection', 'postMessage'], message)
-          .catch(error => {
-            console.log("PEER MESSAGE ERROR", error)
-            if(error == 'timeout' && !this.finished) {
-              console.log("RETRYING")
-              this.sendMessage(message)
-            }
-          })
-      },
-      updateConnections() {
-        const peers = this.isConnectionPossible ? this.otherPeers : []
-        for(let connectionId = 0; connectionId < this.connections.length; connectionId++) {
-          const connection = this.connections[connectionId]
-          const connectionPeer = peers.find(peer => peer.id == connection.to)
-          if(!connectionPeer) {
-            connection.close()
-            connection.$destroy()
-            this.connections.splice(connectionId, 1)
-            connectionId --
-          }
-        }
-        for(const peer of peers) {
-          let peerConnection = this.connections.find(connection => connection.to == peer.id)
-          if(peerConnection) continue;
-          const peerConnectionId = this.waitingConnections.findIndex(connection => connection.to == peer.id)
-          if(peerConnectionId != -1) { // use waiting connection with cached messages
-            peerConnection = this.waitingConnections[peerConnectionId]
-            this.waitingConnections.splice(peerConnectionId, 1)
-          } else { // create connection
-            peerConnection = createPeerConnection(this, peer.id)
-          }
-          this.connections.push(peerConnection)
-          peerConnection.connect()
-        }
-      }
-    },
-    created() {
-      this.messagesObserver = (...args) => this.handleMessagesSignal(...args)
-      this.observeMore()
-      this.disconnectHandler = () => this.observeMore() // to avoid redownloading processed messages
-      api.on('disconnect', this.disconnectHandler)
+  /*
 
-      this.mediaStreamAddTrackHandler = (event) => {
-        const track = event.track
-        const trackInfo = {
-          track, stream: newStream, muted: track.muted, enabled: track.enabled,
-          muteHandler: () => trackInfo.muted = track.muted,
-          unmuteHandler: () => trackInfo.muted = track.muted
-        }
-        console.log("MEDIA STREAM ADD TRACK!", trackInfo)
-        trackInfo.track.addEventListener('mute', trackInfo.muteHandler)
-        trackInfo.track.addEventListener('unmute', trackInfo.unmuteHandler)
-        this.localTracks.push(trackInfo)
-      }
-      this.mediaStreamRemoveTrackHandler = (event) => {
-        const trackIndex = this.localTracks.indexOf(event.track)
-        if(trackIndex == -1) return console.error(`removal of non existing track ${event.track.id}`)
-        const trackInfo = this.localTracks[trackIndex]
-        console.log("MEDIA STREAM REMOVE TRACK!", trackInfo)
-        trackInfo.track.removeEventListener('mute', trackInfo.muteHandler)
-        trackInfo.track.removeEventListener('unmute', trackInfo.unmuteHandler)
-        this.localTracks.splice(trackIndex, 1)
-      }
-    },
     beforeDestroy() {
-      this.finished = true
-      if(this.messagesObservable) {
-        this.messagesObservable.unobserve(this.messagesObserver)
-        this.messagesObservable = null
-      }
-      for(const connection of this.waitingConnections) {
-        connection.$destroy()
-      }
-      for(const connection of this.connections) {
-        connection.$destroy()
-      }
-      api.removeListener('disconnect', this.disconnectHandler)
+
     }
   })*/
 }