@live-change/video-call-frontend 0.8.37

package/front/src/room/allocateSpace.js

@@ -0,0 +1,133 @@
+function allocateSpace(left, top, width, height, tiles, 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
+    if(!size || !size.width || !size.height) {
+      styles[tile.id] = { display: 'none' }
+      continue
+    }
+    const { width, height } = size
+    allRatioSum += width / height
+    visibleTiles.push({ id: tile.id, width, height })
+  }
+  /// check all options, find best fill
+  console.log("SEARCH FOR BEST FILL FOR AREA", width, height, "FOR TILES", visibleTiles)
+  if(visibleTiles.length === 0) return
+  const aspectRatio = width / height
+  const availableArea = width * height
+  let bestFill = { area: 0 }
+  for(let rows = 1; rows <= tiles.length; rows++) {
+    const breakingPoint = (allRatioSum / rows)
+    let ratioSum = 0
+    let maxRatioSum = 0
+    let row = 0
+    for(const tile of visibleTiles) { // find maximal aspect ratio sum (maximal row width)
+      const canBreak = (row < rows - 1)
+      const ratio = tile.width / tile.height
+      if(ratioSum + ratio * 0.5 > breakingPoint && canBreak) { // break!
+        //console.log("BREAK ROW BEFORE SUM!")
+        row += 1
+        if(ratioSum > maxRatioSum) maxRatioSum = ratioSum
+        ratioSum = 0
+      }
+      ratioSum += ratio
+      //console.log("RATIO SUM", ratioSum, "ROW", row)
+      if(ratioSum > breakingPoint && canBreak) { // break!
+        //console.log("BREAK ROW AFTER SUM!")
+        row += 1
+        if(ratioSum > maxRatioSum) maxRatioSum = ratioSum
+        ratioSum = 0
+      }
+    }
+    if(ratioSum > maxRatioSum) maxRatioSum = ratioSum
+    // compute area and fill:
+    const ratio = maxRatioSum / rows
+    let filledWidth, filledHeight
+    if(ratio > aspectRatio) { // empty bottom and top
+      filledWidth = width
+      filledHeight = filledWidth / ratio
+    } else { // empty left and right
+      filledHeight = height
+      filledWidth = filledHeight * ratio
+    }
+    const filledArea = filledWidth * filledHeight
+    if(filledArea > bestFill.area) {
+      bestFill = { rows, area: filledArea, filledWidth, filledHeight }
+    } else {
+      console.log("ROWS", rows, "RATIO", ratio, "FILL", filledArea / availableArea)
+      console.log("TILES RATIO SUM", maxRatioSum, "ASPECT RATIO", aspectRatio)
+    }
+  }
+  //console.log("BEST FILL", bestFill)
+
+  if(!bestFill.rows) throw new Error("Couldn't find best fill!?!")
+
+  /// we determined rows count, time to place tiles
+  let ratioSum = 0
+  let row = 0
+  let rowTiles = []
+  let leftSum = 0
+  const { rows, filledWidth, filledHeight } = bestFill
+  const leftMargin = (width - filledWidth) / 2
+  const topMargin = (height - filledHeight) / 2
+  const rowHeight = filledHeight / rows
+  const breakingPoint = (allRatioSum / rows)
+
+  //console.log("rowHeight", rowHeight)
+
+  const placeTilesInRow = (rowLeftMargin, rowTiles) => {
+    for(const tile of rowTiles) {
+      const { left, width } = tile
+      //console.log("PLACE TILE", tile)
+      styles[tile.id] = {
+        width: width + 'px',
+        height: rowHeight + 'px',
+        left: (left + leftMargin + rowLeftMargin) + 'px',
+        top: (top + topMargin + rowHeight * row) + 'px'
+      }
+      //console.log("TILE STYLE", tile.id,  styles[tile.id])
+    }
+  }
+
+  for(const tile of visibleTiles) {
+    const canBreak = (row < rows - 1)
+    const ratio = tile.width / tile.height
+    if(ratioSum + ratio * 0.5 > breakingPoint && canBreak) { // break!
+      //console.log("BREAK ROW BEFORE SUM!")
+      const rowLeftMargin = (filledWidth - leftSum) / 2
+      //console.log("ROW LEFT MARGIN", rowLeftMargin)
+      placeTilesInRow(rowLeftMargin, rowTiles)
+      row += 1
+      leftSum = 0
+      ratioSum = 0
+      rowTiles = []
+    }
+    ratioSum += ratio
+    const width = rowHeight * ratio
+    rowTiles.push({ id: tile.id, left: leftSum, width })
+    leftSum += width
+    //console.log("RATIO SUM", ratioSum, "ROW", row)
+    if(ratioSum > breakingPoint && canBreak) { // break!
+      //console.log("BREAK ROW AFTER SUM!")
+      const rowLeftMargin = (filledWidth - leftSum) / 2
+      //console.log("ROW LEFT MARGIN", rowLeftMargin)
+      placeTilesInRow(rowLeftMargin, rowTiles)
+      row += 1
+      leftSum = 0
+      ratioSum = 0
+      rowTiles = []
+    }
+    if(ratioSum >= (allRatioSum / rows) * (row + 1) && row < rows - 1) {
+      // break!
+    }
+  }
+  if(rowTiles.length > 0) {
+    const rowLeftMargin = (filledWidth - leftSum) / 2
+    placeTilesInRow(rowLeftMargin, rowTiles)
+  }
+}
+
+export default allocateSpace

package/front/src/room/peerVideoTestData.js

@@ -0,0 +1,48 @@
+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',
+    }
+  ],
+}

package/front/src/router.js

@@ -0,0 +1,75 @@
+import {
+  createMemoryHistory,
+  createRouter as _createRouter,
+  createWebHistory
+} from 'vue-router'
+
+import {
+  installRouterAnalytics
+} from '@live-change/vue3-components'
+
+import { dbAdminRoutes } from "@live-change/db-admin"
+import { peerConnectionRoutes } from "@live-change/peer-connection-frontend"
+import { userRoutes } from '@live-change/user-frontend'
+
+export function videoCallRoutes(config = {}) {
+  const { prefix = '/', route = (r) => r } = config
+  return [
+    route({
+      name: 'video-call:room', path: prefix+ '/room/:room', meta: { },
+      component: () => import("./room/Room.vue"),
+    }),
+
+  ]
+}
+
+export async function sitemap(route, api) {
+
+}
+
+import { client as useClient } from '@live-change/vue3-ssr'
+
+export function createRouter(app, config) {
+  const client = useClient(app._context)
+
+  const router = _createRouter({
+    // use appropriate history implementation for server/client
+    // import.meta.env.SSR is injected by Vite.
+    history: import.meta.env.SSR ? createMemoryHistory() : createWebHistory(),
+    routes: [
+      ...userRoutes({ ...config, prefix: '/user/' }),
+      ...peerConnectionRoutes({ ...config, prefix: '/peer-connection/' }),
+      ...dbAdminRoutes({ prefix: '/_db', route: r => ({ ...r, meta: { ...r.meta, raw: true }}) }),
+      ...videoCallRoutes(config),
+      {
+        name: 'video-call:test-room', path: '/', meta: { },
+        component: () => import("./room/Room.vue"),
+        props: {
+          room: '[test-room]'
+        }
+      }
+    ]
+  })
+  installRouterAnalytics(router)
+  router.beforeEach(async (to, from) => {
+    if(to?.matched.find(m => m?.meta.signedIn)) {
+      if(!client.value.user) {
+        console.log("REDIRECT TO LOGIN BECAUSE PAGE REQUIRES LOGIN!")
+        router.redirectAfterSignIn = to.fullPath
+        return { name: 'user:signInEmail' }
+      }
+    }
+    if(to?.matched.find(m => m?.meta.signedOut)) {
+      if(client.value.user) {
+        console.log("REDIRECT TO USER INDEX BECAUSE PAGE REQUIRES LOGOUT!")
+        return { name: 'user:settings' }
+      }
+    }
+    if(to && to.name === 'user:signInEmail' && from?.matched.find(m => m?.meta.saveForSignIn)) {
+      console.log("SAVE FOR LOGIN", from.fullPath)
+      localStorage.redirectAfterLogin = from.fullPath
+    }
+  })
+  return router
+}
+

package/front/tsconfig.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "preserve",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}
+

package/front/tsconfig.node.json

@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true,
+    "strict": true
+  },
+  "include": ["vite.config.ts"]
+}

package/front/vite.config.ts

@@ -0,0 +1,53 @@
+import { defineConfig } from 'vite'
+import Pages from 'vite-plugin-pages'
+
+import { fileURLToPath } from 'url'
+import { dirname, join } from 'path'
+import { accessSync, readFileSync } from 'fs'
+const currentModuleDir = dirname(fileURLToPath(import.meta.url))
+const packageJsonPath = dirname(fileURLToPath(import.meta.url))
+  .split('/').map((part, i, arr) =>
+    join(arr.slice(0, arr.length - i).join('/'), 'package.json')
+  ).find(p => { try { accessSync(p); return true } catch(e) { return false }})
+const packageJson = packageJsonPath ? JSON.parse(readFileSync(packageJsonPath, 'utf-8')) : {}
+const name = packageJson.name ?? "Example"
+const version = packageJson.version ?? process.env.VERSION ?? 'unknown'
+const homepage = process.env.BASE_HREF ?? packageJson.homepage
+const domain = (homepage && homepage.match(/https\:\/\/([^\/]+)/)?.[1]) || 'example.com'
+
+// @ts-ignore
+import baseViteConfig from '@live-change/frontend-base/vite-config.js'
+
+export default defineConfig(async ({ command, mode }) => {
+  const baseConfig = (await baseViteConfig({ command, mode }))
+  return {
+    ...baseConfig,
+
+    define: {
+      ...baseConfig.define,
+      ENV_VERSION: JSON.stringify(version),
+      ENV_BRAND_NAME: JSON.stringify(name[0].toUpperCase() + name.slice(1)),
+      ENV_BRAND_DOMAIN: JSON.stringify(domain),
+    },
+
+    plugins: [
+      ...baseConfig.plugins,
+      Pages({
+        dirs: [
+          // basic
+          { dir: 'src/pages', baseRoute: '' },
+          // blog
+          // { dir: 'src/blog', baseRoute: 'blog' },
+        ],
+        extensions: ['vue', 'md'],
+      }),
+    ],
+
+    resolve: {
+      ...baseConfig.resolve,
+      alias: [
+        ...baseConfig.resolve.alias,
+      ]
+    }
+  }
+})

package/index.js

@@ -0,0 +1,2 @@
+
+export { }

package/package.json

@@ -0,0 +1,108 @@
+{
+  "name": "@live-change/video-call-frontend",
+  "version": "0.8.37",
+  "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",
+    "localDev": "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 node server/start.js ssrServer --withApi --withServices --updateServices --enableSessions --withDb --dbBackend mem --createDb",
+    "serveAll": "cross-env NODE_ENV=production node server/start.js ssrServer --withApi --withServices --updateServices --enableSessions",
+    "serve": "cross-env NODE_ENV=production node server/start.js ssrServer --enableSessions",
+    "memDev:spa": "node server/start.js memDev --enableSessions --initScript ./init.js --dbAccess --spa",
+    "localDevInit:spa": "rm tmp.db; node server/start.js localDev --enableSessions --initScript ./init.js --spa",
+    "localDev:spa": "node server/start.js localDev --enableSessions --spa",
+    "dev:spa": "node server/start.js dev --enableSessions --spa",
+    "ssrDev:spa": "node server/start.js ssrDev --enableSessions --spa",
+    "serveAllMem:spa": "cross-env NODE_ENV=production node server/start.js server --withApi --withServices --updateServices --enableSessions --withDb --dbBackend mem --createDb --spa",
+    "serveAll:spa": "cross-env NODE_ENV=production node server/start.js server --withApi --withServices --updateServices --enableSessions --spa",
+    "serve:spa": "cross-env NODE_ENV=production node server/start.js server --enableSessions --spa",
+    "apiServer": "node server/start.js apiServer --enableSessions",
+    "devApiServer": "node server/start.js devApiServer --enableSessions",
+    "memApiServer": "node server/start.js memApiServer --enableSessions",
+    "build": "cd front; yarn build:client && yarn build:server",
+    "build:client": "cd front; dotenvx run -f ../.env -- vite build --ssrManifest --outDir dist/client",
+    "build:server": "cd front; dotenvx run -f ../.env -- vite build --ssr src/entry-server.js --outDir dist/server",
+    "build:spa": "cd front; dotenvx run -f ../.env -- vite build --outDir dist/spa",
+    "generate": "vite build --ssrManifest --outDir dist/static && yarn build:server && node prerender",
+    "debug": "node --inspect-brk server",
+    "describe": "node server/start.js describe",
+    "changes": "node server/start.js changes"
+  },
+  "type": "module",
+  "dependencies": {
+    "@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",
+    "@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"
+  },
+  "devDependencies": {
+    "@live-change/codeceptjs-helper": "^0.8.37",
+    "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"
+  },
+  "author": "Michał Łaszczewski <michal@laszczewski.pl>",
+  "license": "ISC",
+  "description": "",
+  "gitHead": "8b97a83258a3eccd08534d0376015781c4eefdec"
+}

package/server/app.config.js

@@ -0,0 +1,118 @@
+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'
+      }
+    },
+    {
+      name: 'videoCall',
+      path: '@live-change/video-call-service'
+    }
+  ]
+}
+export default app.config

package/server/init.js

@@ -0,0 +1,23 @@
+import App from '@live-change/framework'
+const app = App.app()
+
+export default async function(services) {
+
+  const { Room } = services.videoCall.models
+
+  await Room.create({
+    id: '[test-room]',
+    name: 'Test Room',
+    description: 'This is a test room',
+  })
+
+  const { PublicAccess, Access, AccessRequest, AccessInvitation } = services.accessControl.models
+
+  await PublicAccess.create({
+    id: App.encodeIdentifier(['videoCall_Room', '[test-room]']),
+    objectType: 'Room', object: '[test-room]',
+    userRoles: ['speaker'],
+    sessionRoles: ['speaker']
+  })
+
+}