@live-change/video-call-frontend 0.8.39 → 0.8.41

package/.nx/cache/file-map.json

@@ -0,0 +1,235 @@
+{
+  "version": "6.0",
+  "nxVersion": "18.0.6",
+  "deps": {
+    "@codemirror/language": "6.10.1",
+    "@dotenvx/dotenvx": "0.27.0",
+    "@fortawesome/fontawesome-free": "^6.5.2",
+    "@live-change/access-control-frontend": "^0.8.40",
+    "@live-change/access-control-service": "^0.8.40",
+    "@live-change/backup-service": "^0.8.40",
+    "@live-change/blog-frontend": "^0.8.40",
+    "@live-change/blog-service": "^0.8.40",
+    "@live-change/cli": "^0.8.40",
+    "@live-change/content-frontend": "^0.8.40",
+    "@live-change/content-service": "^0.8.40",
+    "@live-change/dao": "^0.8.40",
+    "@live-change/dao-vue3": "^0.8.40",
+    "@live-change/dao-websocket": "^0.8.40",
+    "@live-change/db-client": "^0.8.40",
+    "@live-change/email-service": "^0.8.40",
+    "@live-change/framework": "^0.8.40",
+    "@live-change/frontend-auto-form": "^0.8.40",
+    "@live-change/frontend-base": "^0.8.40",
+    "@live-change/geoip-service": "^0.8.40",
+    "@live-change/image-frontend": "^0.8.40",
+    "@live-change/locale-settings-service": "^0.8.40",
+    "@live-change/password-authentication-service": "^0.8.40",
+    "@live-change/peer-connection-service": "^0.8.40",
+    "@live-change/prosemirror-service": "^0.8.40",
+    "@live-change/secret-code-service": "^0.8.40",
+    "@live-change/secret-link-service": "^0.8.40",
+    "@live-change/session-service": "^0.8.40",
+    "@live-change/task-service": "^0.8.40",
+    "@live-change/upload-frontend": "^0.8.40",
+    "@live-change/url-frontend": "^0.8.40",
+    "@live-change/url-service": "^0.8.40",
+    "@live-change/user-frontend": "^0.8.40",
+    "@live-change/user-identification-service": "^0.8.40",
+    "@live-change/user-service": "^0.8.40",
+    "@live-change/vote-service": "^0.8.40",
+    "@live-change/vue3-components": "^0.8.40",
+    "@live-change/vue3-ssr": "^0.8.40",
+    "@vueuse/core": "^10.11.0",
+    "boxicons": "^2.1.4",
+    "codeceptjs-assert": "^0.0.5",
+    "compression": "^1.7.4",
+    "cross-env": "^7.0.3",
+    "feather-icons": "^4.29.2",
+    "get-port-sync": "1.0.1",
+    "pica": "^9.0.1",
+    "pretty-bytes": "^6.1.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": "^3.4.29",
+    "vue-i18n": "^9.10.1",
+    "vue-router": "^4.3.3",
+    "vue3-scroll-border": "0.1.6",
+    "@live-change/codeceptjs-helper": "^0.8.40",
+    "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"
+  },
+  "pathMappings": {},
+  "nxJsonPlugins": [],
+  "fileMap": {
+    "projectFileMap": {},
+    "nonProjectFiles": [
+      {
+        "file": ".gitignore",
+        "hash": "16528976885761916170"
+      },
+      {
+        "file": "LICENSE",
+        "hash": "10221119794387200971"
+      },
+      {
+        "file": "front/index.html",
+        "hash": "3170363056965810468"
+      },
+      {
+        "file": "front/locales/en.js",
+        "hash": "10652573724821059037"
+      },
+      {
+        "file": "front/locales/en.json",
+        "hash": "7756539891184290419"
+      },
+      {
+        "file": "front/public/favicon.ico",
+        "hash": "11176796980188620760"
+      },
+      {
+        "file": "front/public/images/cameraAccess/en.png",
+        "hash": "3450745769251948963"
+      },
+      {
+        "file": "front/public/images/empty-photo.svg",
+        "hash": "9393138513813369674"
+      },
+      {
+        "file": "front/public/images/empty-user-photo.svg",
+        "hash": "17548039285248668212"
+      },
+      {
+        "file": "front/public/images/logo.svg",
+        "hash": "5934164668360941413"
+      },
+      {
+        "file": "front/public/images/logo128.png",
+        "hash": "4924117807669085214"
+      },
+      {
+        "file": "front/public/video-test/1280x1024.png",
+        "hash": "11823584133987003265"
+      },
+      {
+        "file": "front/public/video-test/1280x720.png",
+        "hash": "15574426061858183013"
+      },
+      {
+        "file": "front/public/video-test/1280x800.png",
+        "hash": "14511549547541683392"
+      },
+      {
+        "file": "front/public/video-test/1280x854.png",
+        "hash": "4797987282838464847"
+      },
+      {
+        "file": "front/public/video-test/1280x960.png",
+        "hash": "10549452614105172851"
+      },
+      {
+        "file": "front/public/video-test/2048x1080.png",
+        "hash": "6151660943780039499"
+      },
+      {
+        "file": "front/src/App.vue",
+        "hash": "6472353844158551308"
+      },
+      {
+        "file": "front/src/config.js",
+        "hash": "4208481022464725661"
+      },
+      {
+        "file": "front/src/entry-client.js",
+        "hash": "1218837904372604167"
+      },
+      {
+        "file": "front/src/entry-server.js",
+        "hash": "406370987563099630"
+      },
+      {
+        "file": "front/src/pages/video-wall-test.vue",
+        "hash": "8927921712980148693"
+      },
+      {
+        "file": "front/src/room/PeerVideo.vue",
+        "hash": "7826013413791984776"
+      },
+      {
+        "file": "front/src/room/Room.vue",
+        "hash": "9885330386595086779"
+      },
+      {
+        "file": "front/src/room/VideoWall.vue",
+        "hash": "12009121673115555256"
+      },
+      {
+        "file": "front/src/room/allocateSpace.js",
+        "hash": "14807348244755613396"
+      },
+      {
+        "file": "front/src/room/videoWallTestData.js",
+        "hash": "1081642442820842935"
+      },
+      {
+        "file": "front/src/router.js",
+        "hash": "14015810002038028326"
+      },
+      {
+        "file": "front/tsconfig.json",
+        "hash": "6166366661637344199"
+      },
+      {
+        "file": "front/tsconfig.node.json",
+        "hash": "4208030242441905014"
+      },
+      {
+        "file": "front/vite.config.ts",
+        "hash": "17481691610523253886"
+      },
+      {
+        "file": "index.js",
+        "hash": "2260432220446614367"
+      },
+      {
+        "file": "package.json",
+        "hash": "9403071523936589822"
+      },
+      {
+        "file": "server/app.config.js",
+        "hash": "1191433411552651640"
+      },
+      {
+        "file": "server/init.js",
+        "hash": "11195994814182901453"
+      },
+      {
+        "file": "server/page.documentType.js",
+        "hash": "4319267302010918354"
+      },
+      {
+        "file": "server/security.config.js",
+        "hash": "6483730663450187822"
+      },
+      {
+        "file": "server/services.list.js",
+        "hash": "1630808974015366632"
+      },
+      {
+        "file": "server/start.js",
+        "hash": "12152681523604331573"
+      }
+    ]
+  }
+}

package/.nx/cache/project-graph.json

@@ -0,0 +1,6 @@
+{
+  "nodes": {},
+  "externalNodes": {},
+  "dependencies": {},
+  "version": "6.0"
+}

package/front/src/pages/video-wall-test.vue

@@ -0,0 +1,31 @@
+<route>
+{
+  meta: {
+    raw: true
+  }
+}
+</route>
+
+<template>
+
+<!--  <pre>{{ testData }}</pre>-->
+  <VideoWall
+    :mainVideos="testData.mainVideos"
+    :topVideos="testData.topVideos"
+    :otherVideos="testData.otherVideos"
+    :myVideos="testData.myVideos"
+    class="absolute surface-900 w-full h-full"
+  />
+
+</template>
+
+<script setup>
+  import testData from "../room/videoWallTestData.js"
+  import VideoWall from '../room/VideoWall.vue'
+
+
+</script>
+
+<style scoped>
+
+</style>

package/front/src/room/PeerVideo.vue

@@ -1,29 +1,77 @@
 <template>
-  <div @click="ev => $emit('click', ev)">
-    <div v-if="peerState.videoMuted || !stream">
-      <UserIdentification :ownerType="ownerType" :owner="owner" />
+  <div @click="ev => $emit('click', ev)"
+       class="absolute surface-900 text-gray-200 border-1 border-white-alpha-30 peer-video">
 
+    <div v-if="image && (!stream || peerState.videoMuted)"
+         class="absolute w-full h-full bg-no-repeat bg-center" :style="{
+           'background-image': 'url(' + image + ')',
+           'background-size': '90%'
+         }">
     </div>
 
-    <div>
+    <div v-if="(peerState?.videoMuted || !stream) && !image"
+         class="absolute w-full h-full flex flex-column align-items-center justify-content-center identification">
+      <UserIdentification :ownerType="ownerType" :owner="owner" />
+    </div>
+
+    <div v-if="stream">
       <video autoplay playsinline
              :src-object.prop.camel="stream"
              :volume.prop.camel="volume"
+             :muted="audioMuted"
              :ref="videoElement"
-             @resize="handleVideoResize">
+             @resize="handleVideoResize"
+             class="w-full h-full"
+             :style="mirror ? 'transform: scaleX(-1)' : ''">
       </video>
     </div>
 
-    <VolumeIndicator v-if="video.srcObject" :stream="stream"></VolumeIndicator>
+    <VolumeIndicator v-if="stream" :stream="stream"
+                     class="absolute" :style="{ right: 'calc(1% + 0.3rem)', top: 'calc(1% + 0.3rem) ' }" />
 
     <div v-if="peerState">
       <i v-if="peerState.videoMuted"  class='bx bx-camera-off' />
       <i v-if="peerState.audioState" class='bx bx-microphone-off' />
     </div>
 
+    <pre>{{ image }}</pre>
+<!--    <h3>{{ id  }}</h3>-->
+
   </div>
 </template>
 
+<style lang="scss">
+  .peer-video {
+    .identification {
+      & > span > span, a {
+        display: flex !important;
+        flex-direction: column !important;
+        position: absolute;
+        width: 100%;
+        left: 0;
+        top: 0;
+        height: 100%;
+        align-items: center;
+        justify-content: center;
+        height: 100%;
+        width: 100%;
+        img, i {
+          max-height: 70px !important;
+          width: auto !important;
+          height: 50% !important;
+          aspect-ratio: 1/1;
+          border: 1px solid red;
+        }
+        span {
+          color: rgba(255,255,255,0.8);
+          margin-top: 0.4em;
+          font-size: 1.1em
+        }
+      }
+    }
+  }
+</style>
+
 <script setup>
 
   import { VolumeIndicator } from "@live-change/peer-connection-frontend"
@@ -32,9 +80,17 @@
   import { defineProps, defineEmits, toRefs, ref, computed } from 'vue'
 
   const props = defineProps({
+    id: {
+      type: String,
+      required: true
+    },
     stream: {
       type: Object,
-      required: true
+      default: null,
+    },
+    image: {
+      type: String,
+      required: false
     },
     ownerType: {
       type: String,
@@ -50,10 +106,18 @@
     },
     volume: {
       type: Number,
-      defaultValue: 1
-    }
+      default: 1
+    },
+    audioMuted: {
+      type: Boolean,
+      default: false
+    },
+    mirror: {
+      type: Boolean,
+      default: false
+    },
   })
-  const { stream, ownerType, owner, peerState } = toRefs(props)
+  const { id, stream, image, ownerType, owner, peerState, audioMuted, mirror } = toRefs(props)
 
   const emit = defineEmits(['resize'])
 

package/front/src/room/Room.vue

@@ -1,30 +1,43 @@
 <template>
-  <LimitedAccess v-slot="{ authorized }" objectType="videoCall_Room" :object="room" :requiredRoles="requiredRoles">
-    <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" />
+  <LimitedAccess objectType="videoCall_Room" :object="room"
+                 :requiredRoles="requiredRoles"
+                 hidden
+                 class="absolute w-full h-full">
+    <template #default>
+      <div class="absolute w-full h-full flex flex-row align-items-center justify-content-center">
+        <div class="surface-card shadow-1 border-round p-3 flex flex-row flex-wrap align-items-center"
+             :class="{ hidden: state !== 'welcome' }">
+          <div class="w-30rem m-1" style="max-width: 80vw">
+            <DeviceSelect v-model="selectedDevices" />
+          </div>
+          <div class="m-3 text-center">
+            <h3>Select your media devices, and join.</h3>
+            <Button @click="join" icon="pi pi-check" label="Join" />
+          </div>
+        </div>
       </div>
-      <div class="m-3 text-center">
-        <h3>Select your media devices, and join.</h3>
-        <Button @click="join" icon="pi pi-check" label="Join" />
-      </div>
-    </div>
-    <template v-else>
-      <p>JOINED</p>
+      <template v-if="state === 'joined'">
+        <VideoWall
+          :main-videos="mainVideos ?? []"
+          :my-videos="myVideos ?? []"
+          class="w-full h-full top-0 absolute surface-900"
+        />
+      </template>
+      <!--    <p>selected devices: {{ selectedDevices }}</p>
+          <p>local media streams:  {{ localMediaStreams }}</p>
+          <p>local tracks:  {{ localTracks }}</p>-->
+<!--      <div class="bg-black-alpha-50 shadow-1 border-round mt-3 p-3 absolute text-white-alpha-90">
+        <pre>{{ JSON.stringify(peer?.summary, null, "  ") }}</pre>
+      </div>-->
     </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>
 
 <script setup>
   import { LimitedAccess } from "@live-change/access-control-frontend"
   import { DeviceSelect } from '@live-change/peer-connection-frontend'
+  import VideoWall from './VideoWall.vue'
 
   import {
     ref, unref, computed, watch, watchEffect, toRefs,
@@ -100,6 +113,36 @@
     await initPeer()
   })
 
+  const myVideos = computed(() => {
+    //return []
+    if(!localMediaStreams.value?.length) return []
+    return localMediaStreams.value.map(stream => ({
+      id: stream.id,
+      stream,
+      mirror: true,
+      audioMuted: true
+    }))
+  })
+
+  const mainVideos = computed(() => {
+    if(!peer.value) return []
+    let output = []
+    for(const connection of unref(peer.value.connections)) {
+      const peerId = connection.to
+      const otherPeer = peer.value.otherPeers.find(peer => peer.id === peerId)
+      for(const remoteTrack of unref(connection.remoteTracks)) {
+        if(output.find(remoteStream => remoteStream.stream === remoteTrack.stream)) continue
+        output.push({
+          id: remoteTrack.stream.id,
+          from: connection.to,
+          stream: remoteTrack.stream,
+          peerState: otherPeer,
+        })
+      }
+    }
+    return output
+  })
+
 
 </script>
 

package/front/src/room/VideoWall.vue

@@ -1,13 +1,28 @@
 <template>
-  <div :ref="wall">
-    <pre style="display: none">{{ JSON.stringify(videoSizes, null, "  ") }}</pre>
+  <div ref="wall">
+<!--    <pre style="display: none">{{ JSON.stringify(videoSizes, null, "  ") }}</pre>-->
     <!--<pre style="display: none">{{ JSON.stringify(allVisibleVideos, null, "  ") }}</pre>
     <pre style="display: none">{{ JSON.stringify(allVideos, null, "  ") }}</pre>-->
-    <VideoDisplayVideo v-for="tile in videoTiles" :style="videoStyles[tile.id]"
-                       :key="tile.id" :video="tile.video" :volume="volume"
-                       @videoResize="ev => handleVideoResize(tile, ev)"
-                       @click="ev => handleVideoClick(tile, ev)">
-    </VideoDisplayVideo>
+<!--    <div class="surface-card p-3">
+      <pre>videoStyles = {{ videoStyles }}</pre>
+      <pre>wall = {{ wall }} {{ wallSize }}</pre>
+      <pre>mainVideos = {{ mainVideos }}</pre>
+      <pre>topVideos = {{ topVideos }}</pre>
+      <pre>bottomVideos = {{ bottomVideos }}</pre>
+      <pre>myVideos = {{ myVideos }}</pre>
+    </div>-->
+    <PeerVideo v-for="tile in videoTiles"
+               :key="tile.id" :stream="tile.video?.stream"
+               :volume="volume" :audio-muted="tile.video?.audioMuted"
+               :id="tile.id" :image="tile.video?.image"
+               :mirror="tile.video?.mirror"
+               :peer-state="tile.video?.peerState"
+               :ownerType="tile.ownerType ?? 'unknown'"
+               :owner="tile.owner ?? 'unknown'"
+               @resize="ev => handleVideoResize(tile, ev)"
+               @click="ev => handleVideoClick(tile, ev)"
+               :style="videoStyles[tile.id]">
+    </PeerVideo>
   </div>
 </template>
 
@@ -27,7 +42,7 @@
       type: Array,
       default: () => [] // testData.otherVideos
     },
-    otherVideos: {
+    bottomVideos: {
       type: Array,
       default: () => [] // testData.otherVideos
     },
@@ -37,22 +52,22 @@
     },
     topBarHeight: {
       type: Number,
-      default: 80
+      default: 100
     },
     bottomBarHeight: {
       type: Number,
-      default: 80
+      default: 120
     },
     volume: {
       type: Number,
       defaultValue: 1
     }
   })
-  const { mainVideos, topVideos, otherVideos, myVideos, topBarHeight, bottomBarHeight, volume } = toRefs(props)
+  const { mainVideos, topVideos, bottomVideos, myVideos, topBarHeight, bottomBarHeight, volume } = toRefs(props)
 
   const emit = defineEmits(['videoClick'])
 
-  const allVideos = computed(() => [].concat(mainVideos.value, topVideos.value, otherVideos.value, myVideos.value))
+  const allVideos = computed(() => [].concat(mainVideos.value, topVideos.value, bottomVideos.value, myVideos.value))
 
   const wall = ref(null)
   const wallSize = useElementSize(wall)
@@ -64,45 +79,63 @@
   watch(allVideos, videos => {
     for(const video of videos) {
       const index = videoTiles.value.findIndex(v => v.id === video.id)
+      const tile = {
+        id: video.id,
+        video,
+        size: { ...(video.size ?? defaultVideoSize) }
+      }
       if(index === -1) {
-        videoTiles.value.push({ id: video.id, video, size: { ...defaultVideoSize } })
+        videoTiles.value.push(tile)
       } else {
-        videoTiles.value.splice(index, 1, { id: video.id, video, size: { ...defaultVideoSize } })
+        videoTiles.value.splice(index, 1, tile)
+      }
+    }
+    for(let i = videoTiles.value.length - 1; i >= 0; i--) {
+      const tile = videoTiles.value[i]
+      const index = videos.findIndex(v => v.id === tile.id)
+      if(index === -1) {
+        videoTiles.value.splice(i, 1)
+        i--;
       }
     }
   }, { immediate: true })
 
   function handleVideoResize(tile, { width, height }) {
+    console.log("handel video resize", arguments)
     tile.size = { width, height }
   }
 
-  function handleClick(tile, event) {
+  function handleVideoClick(tile, event) {
     emit('videoClick', { event, ...tile })
   }
 
   import allocateSpace from './allocateSpace.js'
 
   const videoStyles = computed(() => {
+    console.log('recomputeVideoStyles', JSON.stringify(mainVideos.value))
     if(typeof window == 'undefined') return {}
-    if(!wallSize?.width || !wallSize?.height) return {}
-    const areaSize = wallSize.value
+    const areaSize = {
+      width: wallSize.width.value,
+      height: wallSize.height.value
+    }
+    if(!areaSize?.width || !areaSize?.height) return {}
 
     let styles = {}
-    const bottomBarVisible = otherVideos.value.length > 0  || myVideos.value.length > 0
+    const bottomBarVisible = bottomVideos.value.length > 0  || myVideos.value.length > 0
     const bottomHeight = bottomBarVisible ? bottomBarHeight.value : 0
 
     let right = 0
     for(const video of myVideos.value) {
-      const size = videoTiles.value.find(v => v.id === video.id)?.size
+      const size = videoTiles.value.find(v => v.id === video.id)?.size ?? video.size
       if(!size || !size.width || !size.height) {
-        styles[myVideo.id] = { display: 'none' }
+        styles[video.id] = { display: 'none' }
         continue
       }
       const { width, height } = size
       const ratio = width/height
-      const newWidth = bottomBarHeight * ratio
-      console.log('NW', newWidth, ratio)
-      styles[myVideo.id] = {
+      const newWidth = bottomHeight * ratio
+      console.log('NW', newWidth, ratio, bottomHeight)
+      styles[video.id] = {
         width: newWidth + 'px',
         height: bottomHeight + 'px',
         bottom: '0',
@@ -112,22 +145,22 @@
     }
 
     const topBarVisible = topVideos.value.length > 0
-    const topHeight = topBarVisible ? topBarHeight : 0
+    const topHeight = topBarVisible ? topBarHeight.value : 0
 
     /// Allocate space for bottom videos
     allocateSpace(0, areaSize.height - bottomHeight,
       areaSize.width - right, bottomHeight,
-      otherVideos, styles)
+      bottomVideos.value, videoTiles.value, styles)
 
     /// Allocate space for top videos
     allocateSpace(0, 0,
       areaSize.width, topHeight,
-      topVideos, styles)
+      topVideos.value, videoTiles.value, styles)
 
     /// Allocate space for main videos
     allocateSpace(0, topHeight,
       areaSize.width, areaSize.height - bottomHeight - topHeight,
-      mainVideos, styles)
+      mainVideos.value, videoTiles.value, styles)
 
     return styles
 

package/front/src/room/allocateSpace.js

@@ -1,11 +1,12 @@
-function allocateSpace(left, top, width, height, tiles, styles) {
+function allocateSpace(left, top, width, height, tiles, sizes, styles) {
   console.log("ALLOCATE SPACE FOR TILES", tiles)
   if(!width || !height) return
   let visibleTiles = []
   let allRatioSum = 0
   for(let tile of tiles) {
-    const size = tile.size
+    const size = (sizes.find(s => s.id === tile.id) ?? tile).size
     if(!size || !size.width || !size.height) {
+      console.error("INVALID TILE SIZE", tile.size, "FOR TILE", tile)
       styles[tile.id] = { display: 'none' }
       continue
     }

package/front/src/room/videoWallTestData.js

@@ -0,0 +1,29 @@
+let lastVideoId = 0
+function testVideos(idPrefix, sizes) {
+  return sizes.map(size => {
+    const id = idPrefix + (++lastVideoId)
+    const [width, height] = size.split('x').map(Number)
+    return {
+      id,
+      size: { width, height },
+      image: `/video-test/${size}.png`,
+    }
+  })
+}
+
+export default {
+  mainVideos: testVideos('mainVideo-', [
+    '1280x960',
+    '2048x1080',
+    '1280x720',
+    '1280x720'
+  ]),
+  topVideos: testVideos('topVideo-', [
+    '1280x960',
+    '1280x720',
+    '2048x1080',
+  ]),
+  myVideos: testVideos('myVideo-', [
+    '2048x1080'
+  ])
+}

package/front/src/router.js

@@ -29,6 +29,9 @@ export async function sitemap(route, api) {
 
 import { client as useClient } from '@live-change/vue3-ssr'
 
+import pagesRoutes from '~pages'
+console.log("PAGES ROUTES", pagesRoutes)
+
 export function createRouter(app, config) {
   const client = useClient(app._context)
 
@@ -41,8 +44,9 @@ export function createRouter(app, config) {
       ...peerConnectionRoutes({ ...config, prefix: '/peer-connection/' }),
       ...dbAdminRoutes({ prefix: '/_db', route: r => ({ ...r, meta: { ...r.meta, raw: true }}) }),
       ...videoCallRoutes(config),
+      ...pagesRoutes,
       {
-        name: 'video-call:test-room', path: '/', meta: { },
+        name: 'video-call:test-room', path: '/', meta: { raw: true },
         component: () => import("./room/Room.vue"),
         props: {
           room: '[test-room]'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@live-change/video-call-frontend",
-  "version": "0.8.39",
+  "version": "0.8.41",
   "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.39",
-    "@live-change/access-control-service": "^0.8.39",
-    "@live-change/backup-service": "^0.8.39",
-    "@live-change/blog-frontend": "^0.8.39",
-    "@live-change/blog-service": "^0.8.39",
-    "@live-change/cli": "^0.8.39",
-    "@live-change/content-frontend": "^0.8.39",
-    "@live-change/content-service": "^0.8.39",
-    "@live-change/dao": "^0.8.39",
-    "@live-change/dao-vue3": "^0.8.39",
-    "@live-change/dao-websocket": "^0.8.39",
-    "@live-change/db-client": "^0.8.39",
-    "@live-change/email-service": "^0.8.39",
-    "@live-change/framework": "^0.8.39",
-    "@live-change/frontend-auto-form": "^0.8.39",
-    "@live-change/frontend-base": "^0.8.39",
-    "@live-change/geoip-service": "^0.8.39",
-    "@live-change/image-frontend": "^0.8.39",
-    "@live-change/locale-settings-service": "^0.8.39",
-    "@live-change/password-authentication-service": "^0.8.39",
-    "@live-change/peer-connection-service": "^0.8.39",
-    "@live-change/prosemirror-service": "^0.8.39",
-    "@live-change/secret-code-service": "^0.8.39",
-    "@live-change/secret-link-service": "^0.8.39",
-    "@live-change/session-service": "^0.8.39",
-    "@live-change/task-service": "^0.8.39",
-    "@live-change/upload-frontend": "^0.8.39",
-    "@live-change/url-frontend": "^0.8.39",
-    "@live-change/url-service": "^0.8.39",
-    "@live-change/user-frontend": "^0.8.39",
-    "@live-change/user-identification-service": "^0.8.39",
-    "@live-change/user-service": "^0.8.39",
-    "@live-change/vote-service": "^0.8.39",
-    "@live-change/vue3-components": "^0.8.39",
-    "@live-change/vue3-ssr": "^0.8.39",
+    "@live-change/access-control-frontend": "^0.8.41",
+    "@live-change/access-control-service": "^0.8.41",
+    "@live-change/backup-service": "^0.8.41",
+    "@live-change/blog-frontend": "^0.8.41",
+    "@live-change/blog-service": "^0.8.41",
+    "@live-change/cli": "^0.8.41",
+    "@live-change/content-frontend": "^0.8.41",
+    "@live-change/content-service": "^0.8.41",
+    "@live-change/dao": "^0.8.41",
+    "@live-change/dao-vue3": "^0.8.41",
+    "@live-change/dao-websocket": "^0.8.41",
+    "@live-change/db-client": "^0.8.41",
+    "@live-change/email-service": "^0.8.41",
+    "@live-change/framework": "^0.8.41",
+    "@live-change/frontend-auto-form": "^0.8.41",
+    "@live-change/frontend-base": "^0.8.41",
+    "@live-change/geoip-service": "^0.8.41",
+    "@live-change/image-frontend": "^0.8.41",
+    "@live-change/locale-settings-service": "^0.8.41",
+    "@live-change/password-authentication-service": "^0.8.41",
+    "@live-change/peer-connection-service": "^0.8.41",
+    "@live-change/prosemirror-service": "^0.8.41",
+    "@live-change/secret-code-service": "^0.8.41",
+    "@live-change/secret-link-service": "^0.8.41",
+    "@live-change/session-service": "^0.8.41",
+    "@live-change/task-service": "^0.8.41",
+    "@live-change/upload-frontend": "^0.8.41",
+    "@live-change/url-frontend": "^0.8.41",
+    "@live-change/url-service": "^0.8.41",
+    "@live-change/user-frontend": "^0.8.41",
+    "@live-change/user-identification-service": "^0.8.41",
+    "@live-change/user-service": "^0.8.41",
+    "@live-change/vote-service": "^0.8.41",
+    "@live-change/vue3-components": "^0.8.41",
+    "@live-change/vue3-ssr": "^0.8.41",
     "@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.39",
+    "@live-change/codeceptjs-helper": "^0.8.41",
     "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": "153d139ad9785b0b2fcbfbf2c35a999a499f2168"
+  "gitHead": "e4f888357087065749a7cdb331a4eefa089b9aef"
 }

package/front/src/room/peerVideoTestData.js

@@ -1,48 +0,0 @@
-export default {
-  mainVideos: [
-    {
-      id: '1',
-      type: 'image',
-      src: '/video-test/1280x960.png',
-    },
-    {
-      id: '2',
-      type: 'image',
-      src: '/video-test/2048x1080.png',
-    },
-    {
-      id: '3',
-      type: 'image',
-      src: '/video-test/1280x720.png',
-    },
-    {
-      id: '3b',
-      type: 'image',
-      src: '/video-test/1280x720.png',
-    }
-  ],
-  otherVideos: [
-    {
-      id: '4',
-      type: 'image',
-      src: '/video-test/1280x960.png',
-    },
-    {
-      id: '5',
-      type: 'image',
-      src: '/video-test/1280x720.png',
-    },
-    {
-      id: '6',
-      type: 'image',
-      src: '/video-test/2048x1080.png',
-    }
-  ],
-  myVideos: [
-    {
-      id: 'me',
-      type: 'image',
-      src: '/video-test/2048x1080.png',
-    }
-  ],
-}