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

package/front/src/components/PermissionsDialog.vue

@@ -0,0 +1,146 @@
+<template>
+  <Dialog header="Permissions" v-model:visible="model.visible" modal>
+    <template #header>
+      <div class="flex flex-row align-items-center">
+        <i class="pi pi-unlock mr-2" />
+        <h3>{{ title }}</h3>
+      </div>
+    </template>
+    <template #default>
+      <slot name="introduction" />
+      <div class="mt-2">
+        <div v-for="permission in Object.entries(model.permissions)" class="flex flex-row align-items-center mb-2">
+          <i :class="permissionIcons[permission[0]]" />
+          <div class="ml-2">{{ permission[0] }}: </div>
+          <div v-if="permission[1] === 'granted'" class="ml-1 font-semibold text-green-400">
+            {{ permission[1] }}
+          </div>
+          <div v-else-if="permission[1] === 'denied'" class="ml-1 font-semibold text-red-400">
+            {{ permission[1] }}
+          </div>
+          <div v-else class="ml-1 font-semibold">{{ permission[1] }}</div>
+        </div>
+      </div>
+    </template>
+    <template #footer>
+      <slot name="buttons" :permissions="model.permissions" />
+    </template>
+<!--
+
+    <div class="permissions-state">
+      <div class="permission-state card" v-for="permissionState in permissionsState">
+        <div class="permission-state-icon">
+          <img :src="permissionIcons[permissionState.name][+(permissionState.state!=='denied')]">
+        </div>
+        <div class="permission-description">
+          <p class="permission-name">{{ i18n.permissions[permissionState.name] }}</p>
+          <p>{{ i18n.state }} <span class="permission-state-name">{{ i18n.states[permissionState.state] }}</span></p>
+        </div>
+      </div>
+    </div>
+    <div class="buttons permissions-buttons">
+      <button v-for="button in buttons" class="button" type="button"
+              :disabled="button.hasOwnProperty('needPermissions')
+              ? (button.needPermissions && !isOk) || (!button.needPermissions && isOk)
+              : false"
+              @click="() => { $emit(button.event); $emit('close') }">
+        <span>{{ button.name }}</span>
+      </button>
+    </div>
+-->
+
+  </Dialog>
+</template>
+
+<script setup>
+  const permissionIcons = {
+    camera: 'pi pi-camera',
+    microphone: 'pi pi-microphone'
+  }
+
+  import { defineProps, defineModel, defineEmits, toRefs, ref, computed, watch } from 'vue'
+  import { useInterval } from '@vueuse/core'
+
+  const props = defineProps({
+    title: {
+      type: String
+    },
+    introduction: {
+      type: String
+    },
+    buttons: {
+      type: Array
+    },
+    requiredPermissions: {
+      type: Array
+    },
+    autoClose: {
+      type: Boolean
+    }
+  })
+  const { title, closeable, introduction, buttons, requiredPermissions, autoClose } = toRefs(props)
+
+  const model = defineModel({
+    required: true,
+    type: Object,
+    properties: {
+      visible: {
+        type: Boolean
+      },
+      permissions: {
+        type: Object
+      }
+    }
+  })
+
+  const emit = defineEmits(['ok'])
+
+  watch(() => JSON.stringify(requiredPermissions.value), async value => {
+    console.log("requiredPermissions", value)
+
+    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"
+      model.value = {
+        ...model.value,
+        permissions: {
+          ...model.value.permissions,
+          [requiredPermission.name]: state
+        }
+      }
+      if(permissionState) {
+        permissionState.onchange = () => {
+          model.value = {
+            ...model.value,
+            permissions: {
+              ...model.value.permissions,
+              [requiredPermission.name]: permissionState.state
+            }
+          }
+        }
+      }
+    }
+  }, { immediate: true })
+
+  //useInterval(updatePermissionsState, 300)
+  const isOk = computed(() => {
+    if(!model.value.permissions) return false
+    return Object.values(model.value.permissions).every(state => state !== 'denied')
+  })
+
+  watch(isOk, ok => {
+    if(ok && autoClose) {
+      model.value = {
+        ...model.value,
+        visible: false
+      }
+      emit('ok', model.value.permissions)
+    }
+  })
+
+</script>
+
+<style scoped>
+
+</style>

package/front/src/components/mediaStreamsTracks.js

@@ -0,0 +1,60 @@
+import { ref, isRef, onUnmounted, getCurrentInstance, unref, reactive, computed, watch } from 'vue'
+
+export function mediaStreamsTracks(mediaStreamsRef) {
+  if(!mediaStreamsRef) throw new Error("mediaStreamsTracks: mediaStreams argument is required")
+  const tracks = ref([])
+
+  function removeLocalTrack(track, stream) {
+    const trackIndex = tracks.value.findIndex(t => t.track === track)
+    if(trackIndex === -1) return console.error(`removal of non existing track ${track.id}`)
+    const trackInfo = tracks.value[trackIndex]
+    trackInfo.track.removeEventListener('mute', track.muteHandler)
+    trackInfo.track.removeEventListener('unmute', track.unmuteHandler)
+    tracks.value.splice(trackIndex, 1)
+  }
+  function addLocalTrack(track, stream) {
+    const trackInfo = reactive({
+      track, stream, 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)
+    tracks.value.push(trackInfo)
+  }
+  function mediaStreamAddTrackHandler(event) {
+    addLocalTrack(event.track, event.target)
+  }
+  function mediaStreamRemoveTrackHandler(event) {
+    removeLocalTrack(event.track, event.target)
+  }
+
+  watch(() => mediaStreamsRef.value, (newStreams = [], oldStreams = []) => {
+    console.log("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('/')
+      }))
+    )
+
+    for(const oldStream of oldStreams) {
+      if(newStreams.indexOf(oldStream) !== -1) continue; // existing stream
+      for(const track of oldStream.getTracks()) removeLocalTrack(track, oldStream)
+      oldStream.removeEventListener('addtrack', mediaStreamAddTrackHandler)
+      oldStream.removeEventListener('removetrack', mediaStreamRemoveTrackHandler)
+    }
+    for(const newStream of newStreams) {
+      if(oldStreams.indexOf(newStream) !== -1) continue; // existing stream
+      for(const track of newStream.getTracks()) addLocalTrack(track, newStream)
+      newStream.addEventListener('addtrack', mediaStreamAddTrackHandler)
+      newStream.addEventListener('removetrack', mediaStreamRemoveTrackHandler)
+    }
+  }, { immediate: true })
+
+  return tracks
+}

package/front/src/components/userMedia.js

@@ -39,8 +39,8 @@ async function isUserMediaPermitted(constraints = { audio: true, video: true })
   ]))
   console.log("MICROPHONE PERMISSION", microphonePermission && microphonePermission.state)
   console.log("CAMERA PERMISSION", cameraPermission && cameraPermission.state)
-  if(microphonePermission && microphonePermission.state == 'denied') return false
-  if(cameraPermission && cameraPermission.state == 'denied') return false
+  if(microphonePermission && microphonePermission.state === 'denied') return false
+  if(cameraPermission && cameraPermission.state === 'denied') return false
   return true
 }
 

package/front/src/entry-client.js

@@ -1,24 +1,6 @@
-import { createApp } from './main'
-import { clientApi } from '@live-change/vue3-ssr/clientApi.js'
+import { clientEntry } from '@live-change/frontend-base/client-entry.js'
+import App from './App.vue'
+import { createRouter } from './router'
 
-import {
-  createSharedElementDirective,
-  SharedElementRouteGuard
-} from 'v-shared-element'
 
-
-window.api = clientApi({
-  use: [  ]
-})
-
-const { app, router } = createApp(api)
-
-app.use(createSharedElementDirective())
-router.beforeEach(SharedElementRouteGuard)
-window.process = window.process || null
-
-// wait until router is ready before mounting to ensure hydration match
-router.isReady().then(() => {
-  const instance = app.mount('#app', true)
-  app._container._vnode = instance.$.vnode
-})
+clientEntry(App, createRouter)

package/front/src/entry-server.js

@@ -1,6 +1,7 @@
-import { serverEntry } from '@live-change/frontend-base/server-entry.js'
+import { serverEntry, sitemapEntry } from '@live-change/frontend-base/server-entry.js'
 import App from './App.vue'
-import { createRouter } from './router'
+import { createRouter, sitemap as routerSitemap } from './router'
 
-const render = serverEntry(App, createRouter, {})
-export { render }
+const render = serverEntry(App, createRouter)
+const sitemap = sitemapEntry(App, createRouter, routerSitemap)
+export { render, sitemap }

package/front/src/router.js

@@ -4,22 +4,17 @@ import {
   createWebHistory
 } from 'vue-router'
 
+import { dbAdminRoutes } from "@live-change/db-admin"
 
-export function routes(config = {}) {
+export function peerConnectionRoutes(config = {}) {
   const { prefix = '/', route = (r) => r } = config
   return [
+
     route({
-      name: 'debugger', path: prefix + '/debugger/:channelType/:channel', meta: { },
-      component: () => import("./components/Debugger.vue")
-    }),
-    route({
-      name: 'testDebugger', path: prefix + '', meta: { },
+      name: 'peer-connection:debugger', path: prefix + '/debugger/:channelType/:channel', meta: { },
       component: () => import("./components/Debugger.vue"),
-      props: {
-        channelType: 'example_Example',
-        channel: 'one'
-      }
-    })
+      props: true
+    }),
 
   ]
 }
@@ -37,7 +32,18 @@ export function createRouter(app, config) {
     // use appropriate history implementation for server/client
     // import.meta.env.SSR is injected by Vite.
     history: import.meta.env.SSR ? createMemoryHistory() : createWebHistory(),
-    routes: routes(config)
+    routes: [
+      ...dbAdminRoutes({ prefix: '/_db', route: r => ({ ...r, meta: { ...r.meta, raw: true }}) }),
+      ...peerConnectionRoutes(config),
+      {
+        name: 'peer-connection:test-debugger', path: '/', meta: { },
+        component: () => import("./components/Debugger.vue"),
+        props: {
+          channelType: 'example_Example',
+          channel: 'one'
+        }
+      }
+    ]
   })
   router.beforeEach(async (to, from) => {
     if(to?.matched.find(m => m?.meta.signedIn)) {

package/front/vite.config.js

@@ -1,117 +1,18 @@
-const path = require('path')
-const vuePlugin = require('@vitejs/plugin-vue')
 import { defineConfig } from 'vite'
-import findFreePorts from "find-free-ports"
-import { visualizer } from 'rollup-plugin-visualizer'
-import viteImages from 'vite-plugin-vue-images'
-import viteCompression from 'vite-plugin-compression'
 
-const ssrTransformCustomDir = () => {
-  return {
-    props: [],
-    needRuntime: true
-  }
-}
+import baseViteConfig from '@live-change/frontend-base/vite-config.js'
 
 export default defineConfig(async ({ command, mode }) => {
+  const baseConfig = (await baseViteConfig({ command, mode }))
   return {
-    define: {
-      ENV_BASE_HREF: JSON.stringify(process.env.BASE_HREF || 'http://localhost:8001')
-    },
-    server: {
-      hmr: {
-        port: (await findFreePorts())[0]
-      }
-    },
-    plugins: [
-      vuePlugin({
-        template: {
-          compilerOptions: {
-            //   whitespace: "preserve",
-            directiveTransforms: {
-              'ripple': ssrTransformCustomDir,
-              'styleclass': ssrTransformCustomDir,
-              'badge': ssrTransformCustomDir,
-              'shared-element': ssrTransformCustomDir
-            }
-          }
-        },
-      }),
-      viteImages({ extensions: ['jpg', 'jpeg', 'png', 'svg', 'webp'] }),
-      viteCompression({ algorithm: 'brotliCompress', ext: '.br' }),
-      viteCompression({ algorithm: 'gzip', ext: '.gz' }),
-      viteCompression({ algorithm: 'deflate', ext: '.zz' }),
-      visualizer({
-        filename: '../stats.html'
-      }),
-    ],
-    build: {
-      minify: false,
-      commonjsOptions: {
-        transformMixedEsModules: true,
-        include: [
-          /node_modules/,
-          /live-change-stack\/framework\//,
-          /live-change-stack\/uid\//,
-          /live-change-stack\/dao\//,
-          /live-change-stack\/dao-sockjs\//,
-          /live-change-stack\/dao-websocket\//,
-        ]
-      }
-    },
-    ssr: {
-      external: [
-        '@live-change/dao',
-        '@live-change/vue-api',
-        '@live-change/vue-api-session',
-        '@live-change/uid',
-        '@live-change/framework',
-        '@live-change/framework/lib/utils/validators.js',
-        'debug',
-        'vite'
-      ],
-      noExternal: [
-        '@live-change/vue3-components',
-        '@live-change/dao-vue3',
-        '@live-change/vue3-ssr',
-        'vue3-scroll-border'
-      ]
-    },
-    optimizeDeps: {
-      include: [
-        '@live-change/vue-api',
-        '@live-change/vue-api-session',
-        '@live-change/dao',
-        '@live-change/dao-sockjs',
-        '@live-change/dao-websocket',
-        '@live-change/uid',
-        '@live-change/framework',
-        '@live-change/framework/lib/utils/validators.js',
-        'debug'
-      ]
-    },
+    ...baseConfig,
 
     resolve: {
       alias: [
-        { find: 'debug', replacement: 'debug/src/browser.js' },
-        { find: 'universal-websocket-client', replacement: 'universal-websocket-client/browser.js' },
-        { find: 'sockjs-client', replacement: 'sockjs-client/dist/sockjs.min.js' },
-        { find: '@', replacement: path.resolve(__dirname, './src') },
-        { find: '#user', replacement: path.resolve(__dirname, '.') }
-      ],
-    },
-    resolvers: [{
-      fileToRequest(filePath) {
-        console.log('@@@', filePath);
-        if (filePath.startsWith(srcPath)) {
-          return `/@/${path.relative(srcPath, filePath)}`
-        }
-      },
-      requestToFile(publicPath) {
-        if (publicPath.startsWith('/@/')) {
-          return path.join(srcPath, publicPath.replace(/^\/@\//, ''))
-        }
-      },
-    }],
+        ...baseConfig.resolve.alias,
+        /*        { find: 'vue', replacement: 'vue/dist/vue.esm-bundler.js' },
+                { find: 'vue/server-renderer', replacement: 'vue/server-renderer' },*/
+      ]
+    }
   }
 })

package/index.js

@@ -0,0 +1,14 @@
+import Debugger from './front/src/components/Debugger.vue'
+import DeviceSelect from './front/src/components/DeviceSelect.vue'
+import PermissionsDialog from './front/src/components/PermissionsDialog.vue'
+
+export { Debugger, DeviceSelect, PermissionsDialog }
+
+import { createPeer } from './front/src/components/Peer.js'
+import { createPeerConnection } from './front/src/components/PeerConnection.js'
+import { getUserMedia, getDisplayMedia, isUserMediaPermitted } from './front/src/components/userMedia.js'
+
+export { createPeer, createPeerConnection, getUserMedia, getDisplayMedia, isUserMediaPermitted }
+
+import { peerConnectionRoutes } from './front/src/router.js'
+export { peerConnectionRoutes }

package/package-deps.json

@@ -0,0 +1,41 @@
+{
+  "dependencies": {
+    "@live-change/cli": "0.8.34",
+    "@live-change/dao": "0.8.34",
+    "@live-change/dao-vue3": "0.8.34",
+    "@live-change/dao-websocket": "0.8.34",
+    "@live-change/framework": "0.8.34",
+    "@live-change/password-authentication-service": "0.8.34",
+    "@live-change/secret-code-service": "0.8.34",
+    "@live-change/secret-link-service": "0.8.34",
+    "@live-change/session-service": "0.8.34",
+    "@live-change/user-frontend": "0.8.34",
+    "@live-change/user-service": "0.8.34",
+    "@live-change/vue3-components": "0.8.34",
+    "@live-change/vue3-ssr": "0.8.34",
+    "@vueuse/core": "^10.11.0",
+    "codeceptjs-assert": "^0.0.5",
+    "compression": "^1.7.4",
+    "cross-env": "^7.0.3",
+    "get-port-sync": "1.0.1",
+    "primeflex": "^3.3.1",
+    "primeicons": "^7.0.0",
+    "primevue": "^3.52.0",
+    "rollup-plugin-node-builtins": "^2.1.2",
+    "rollup-plugin-visualizer": "5.12.0",
+    "serialize-javascript": "^6.0.2",
+    "serve-static": "^1.15.0",
+    "v-shared-element": "3.1.1",
+    "vue-router": "^4.3.3",
+    "vue3-scroll-border": "0.1.6"
+  },
+  "devDependencies": {
+    "@live-change/codeceptjs-helper": "0.8.34",
+    "codeceptjs": "^3.5.12",
+    "generate-password": "1.7.1",
+    "playwright": "^1.41.2",
+    "random-profile-generator": "^2.3.0",
+    "txtgen": "^3.0.6",
+    "webdriverio": "^8.31.1"
+  }
+}

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@live-change/peer-connection-frontend",
-  "version": "0.8.34",
+  "version": "0.8.36",
   "scripts": {
-    "memDev": "node server/start.js memDev --enableSessions --initScript ./init.js",
-    "localDevInit": "rm tmp.db; lcli localDev --enableSessions --initScript ./init.js",
-    "localDev": "node server/start.js localDev --enableSessions --dbAccess",
+    "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",
+    "localDev": "dotenvx run -- node server/start.js localDev --enableSessions --dbAccess",
     "dev": "node server/start.js dev --enableSessions",
     "ssrDev": "node server/start.js ssrDev --enableSessions",
     "serveAllMem": "cross-env NODE_ENV=production lcli ssrServer --withApi --withServices --updateServices --enableSessions --withDb --dbBackend mem --createDb",
@@ -17,23 +17,24 @@
     "build:client": "cd front; vite build --ssrManifest --outDir dist/client",
     "build:server": "cd front; vite build --ssr src/entry-server.js --outDir dist/server",
     "generate": "vite build --ssrManifest --outDir dist/static && yarn build:server && node prerender",
-    "debug": "node --inspect-brk server"
+    "debug": "node --inspect-brk server",
+    "describe": "node server/start.js describe"
   },
   "type": "module",
   "dependencies": {
-    "@live-change/cli": "^0.8.34",
-    "@live-change/dao": "^0.8.34",
-    "@live-change/dao-vue3": "^0.8.34",
-    "@live-change/dao-websocket": "^0.8.34",
-    "@live-change/framework": "^0.8.34",
-    "@live-change/password-authentication-service": "^0.8.34",
-    "@live-change/secret-code-service": "^0.8.34",
-    "@live-change/secret-link-service": "^0.8.34",
-    "@live-change/session-service": "^0.8.34",
-    "@live-change/user-frontend": "^0.8.34",
-    "@live-change/user-service": "^0.8.34",
-    "@live-change/vue3-components": "^0.8.34",
-    "@live-change/vue3-ssr": "^0.8.34",
+    "@live-change/cli": "^0.8.36",
+    "@live-change/dao": "^0.8.36",
+    "@live-change/dao-vue3": "^0.8.36",
+    "@live-change/dao-websocket": "^0.8.36",
+    "@live-change/framework": "^0.8.36",
+    "@live-change/password-authentication-service": "^0.8.36",
+    "@live-change/secret-code-service": "^0.8.36",
+    "@live-change/secret-link-service": "^0.8.36",
+    "@live-change/session-service": "^0.8.36",
+    "@live-change/user-frontend": "^0.8.36",
+    "@live-change/user-service": "^0.8.36",
+    "@live-change/vue3-components": "^0.8.36",
+    "@live-change/vue3-ssr": "^0.8.36",
     "@vueuse/core": "^10.11.0",
     "codeceptjs-assert": "^0.0.5",
     "compression": "^1.7.4",
@@ -51,7 +52,7 @@
     "vue3-scroll-border": "0.1.6"
   },
   "devDependencies": {
-    "@live-change/codeceptjs-helper": "^0.8.34",
+    "@live-change/codeceptjs-helper": "^0.8.36",
     "codeceptjs": "^3.5.12",
     "generate-password": "1.7.1",
     "playwright": "^1.41.2",
@@ -62,5 +63,5 @@
   "author": "Michał Łaszczewski <michal@laszczewski.pl>",
   "license": "BSD-3-Clause",
   "description": "",
-  "gitHead": "40e61928bf43b35352c76fc135f36a2d8bd76c4a"
+  "gitHead": "24694d1687f0ab2d6eb7edd95e5274428cfd44eb"
 }

package/server/app.config.js

@@ -0,0 +1,114 @@
+import App from "@live-change/framework"
+const app = App.app()
+
+const contactTypes = ['email', 'phone']
+const remoteAccountTypes = ['google']
+
+import securityConfig from './security.config.js'
+
+app.config = {
+  services: [
+    {
+      name: 'timer',
+      path: '@live-change/timer-service'
+    },
+    {
+      name: 'session',
+      path: '@live-change/session-service',
+      createSessionOnUpdate: true
+    },
+    {
+      name: 'user',
+      path: '@live-change/user-service',
+      remoteAccountTypes
+    },
+    {
+      name: 'email',
+      path: '@live-change/email-service'
+    },
+    {
+      name: 'phone',
+      path: '@live-change/phone-service'
+    },
+    {
+      name: 'secretLink',
+      path: '@live-change/secret-link-service'
+    },
+    {
+      name: 'secretCode',
+      path: '@live-change/secret-code-service'
+    },
+    {
+      name: 'messageAuthentication',
+      path: '@live-change/message-authentication-service',
+      contactTypes,
+      signUp: true,
+      signIn: true,
+      connect: true
+    },
+    {
+      name: 'passwordAuthentication',
+      path: '@live-change/password-authentication-service',
+      contactTypes,
+      signInWithoutPassword: true
+    },
+    {
+      name: 'googleAuthentication',
+      path: '@live-change/google-authentication-service',
+    },
+    {
+      name: 'security',
+      path: '@live-change/security-service',
+      ...securityConfig
+    },
+    {
+      name: 'userIdentification',
+      path: '@live-change/user-identification-service'
+    },
+    {
+      name: 'identicon',
+      path: '@live-change/identicon-service'
+    },
+    {
+      name: 'localeSettings'
+    },
+    {
+      name: 'notification',
+      path: '@live-change/notification-service',
+      contactTypes,
+      notificationTypes: ['example_TestNotification']
+    },
+    {
+      name: 'upload',
+      path: '@live-change/upload-service'
+    },
+    {
+      name: 'image',
+      path: '@live-change/image-service'
+    },
+    {
+      name: 'session',
+      path: '@live-change/session-service',
+      createSessionOnUpdate: true
+    },
+    {
+      name: 'online',
+      path: '@live-change/online-service',
+      createSessionOnUpdate: true
+    },
+    {
+      name: 'accessControl',
+      path: '@live-change/access-control-service',
+      createSessionOnUpdate: true,
+      contactTypes,
+    },
+    {
+      name: 'peerConnection',
+      path: '@live-change/peer-connection-service',
+      turn: {
+        urls: 'turn:turn.chaosu.pl:4433'
+      }
+    }
+  ]
+}
+export default app.config