@live-change/peer-connection-frontend 0.0.3

package/front/src/components/userMedia.js

@@ -0,0 +1,51 @@
+function oldUserMediaFactory() {
+  if(navigator.getUserMedia) return (...args) => navigator.getUserMedia(...args)
+  if(navigator.webkitGetUserMedia) return (...args) => navigator.webkitGetUserMedia(...args)
+  if(navigator.mozGetUserMedia) return (...args) => navigator.mozGetUserMedia(...args)
+}
+
+function userMediaFactory() {
+  if(typeof window == 'undefined') return null
+  if(typeof navigator == 'undefined') return null
+  if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
+    return (constraints) => navigator.mediaDevices.getUserMedia(constraints)
+  }
+  return (constraints) => new Promise((resolve, reject) => {
+    const getUserMedia = oldUserMediaFactory()
+    getUserMedia(constraints, resolve, reject)
+  })
+}
+
+function displayMediaFactory() {
+  if(typeof window == 'undefined') return null
+  if(typeof navigator == 'undefined') return null
+  if(navigator.mediaDevices && navigator.mediaDevices.getDisplayMedia) {
+    return (constraints) => navigator.mediaDevices.getDisplayMedia(constraints)
+  }
+  return null
+}
+
+async function isUserMediaPermitted(constraints = { audio: true, video: true }) {
+  if(!navigator.permissions) return true
+  console.log("QUERING FOR PERMISSIONS", constraints)
+  const { audio, video } = constraints
+  const [microphonePermission, cameraPermission] = (await Promise.all([
+    audio
+        ? navigator.permissions.query({ name: 'microphone' }).catch(err => true)
+        : Promise.resolve(null),
+    video
+        ? navigator.permissions.query({ name: 'camera' }).catch(err => true)
+        : Promise.resolve(null)
+  ]))
+  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
+  return true
+}
+
+const getUserMedia = userMediaFactory()
+const getDisplayMedia = displayMediaFactory()
+
+export { getUserMedia, getDisplayMedia, isUserMediaPermitted }
+

package/front/src/entry-client.js

@@ -0,0 +1,24 @@
+import { createApp } from './main'
+import { clientApi } from '@live-change/vue3-ssr/clientApi.js'
+
+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
+})

package/front/src/entry-server.js

@@ -0,0 +1,59 @@
+import { renderToString } from 'vue/server-renderer'
+import { renderMetaToString } from 'vue-meta/ssr'
+
+import { serverApi } from '@live-change/vue3-ssr/serverApi.js'
+
+import { createApp } from './main'
+
+function escapeHtml(unsafe) {
+  return unsafe
+      .replace(/&/g, "&")
+      .replace(/</g, "&lt;")
+      .replace(/>/g, "&gt;")
+      .replace(/"/g, "&quot;")
+      .replace(/'/g, "&#039;");
+}
+
+export async function render({ url, dao, windowId }) {
+  const api = await serverApi(dao, {
+    use: [ ]
+  })
+
+  const { app, router } = createApp(api)
+
+  // set the router to the desired URL before rendering
+  router.push(url)
+  await router.isReady()
+
+  // prefetch data
+  await api.preFetchRoute(router.currentRoute, router)
+
+  // passing SSR context object which will be available via useSSRContext()
+  // @vitejs/plugin-vue injects code into a component's setup() that registers
+  // itself on ctx.modules. After the render, ctx.modules would contain all the
+  // components that have been instantiated during this render call.
+  const ctx = {}
+  const html = await renderToString(app, ctx)
+  await renderMetaToString(app, ctx)
+
+  const data = api.prerenderCache.cacheData()
+  //console.log("PRERENDER CACHE", Array.from(api.prerenderCache.cache.keys()))
+  //console.log("PRERENDER CACHE EXTENDED", Array.from(api.prerenderCache.extendedCache.keys()))
+
+  // the SSR manifest generated by Vite contains module -> chunk/asset mapping
+  // which we can then use to determine what files need to be preloaded for this
+  // request.
+
+  const metaManager = app.config.globalProperties.$metaManager
+  const activeMeta = metaManager.target.context.active
+  //console.log("ACTIVE META", activeMeta)
+  //console.log("TELEPORTS", ctx.teleports)
+  ctx.teleports.head = [
+    ...(activeMeta.title ? [`<title data-vm-ssr="true">${escapeHtml(activeMeta.title)}</title>`] : []),
+    ...((activeMeta.meta || []).map(meta => `<meta ${Object.keys(meta).map(
+        key => `${escapeHtml(key)}="${escapeHtml(meta[key])}"`
+    ).join(' ')}>`))
+  ].join('\n')
+
+  return { html, data, meta: ctx.teleports, modules: ctx.modules }
+}

package/front/src/main.js

@@ -0,0 +1,60 @@
+import { createSSRApp } from 'vue'
+import { createMetaManager } from 'vue-meta'
+
+import { registerComponents } from '@live-change/vue3-components'
+import ReactiveDaoVue from '@live-change/dao-vue3'
+
+import PrimeVue from 'primevue/config'
+import ConfirmationService from 'primevue/confirmationservice'
+import { PrimeVueConfirmSymbol } from 'primevue/useconfirm'
+import { PrimeVueToastSymbol } from 'primevue/usetoast'
+import ToastService from 'primevue/toastservice'
+import StyleClass from 'primevue/styleclass'
+import Ripple from 'primevue/ripple'
+import BadgeDirective from 'primevue/badgedirective'
+
+import App from './App.vue'
+import { createRouter } from './router'
+
+import emailValidator from "@live-change/email-service/clientEmailValidator.js"
+import passwordValidator from "@live-change/password-authentication-service/clientPasswordValidator.js"
+
+// SSR requires a fresh app instance per request, therefore we export a function
+// that creates a fresh app instance. If using Vuex, we'd also be creating a
+// fresh store here.
+export function createApp(api) {
+  api.validators.email = emailValidator
+  api.validators.password = passwordValidator
+
+  const app = createSSRApp(App)
+  app.config.devtools = true
+
+  api.installInstanceProperties(app.config.globalProperties)
+
+  registerComponents(app)
+  app.use(ReactiveDaoVue, { dao: api })
+
+  const router = createRouter(app)
+  app.use(router)
+
+  app.use(PrimeVue, {
+    ripple: true
+  })
+
+  app.use(ConfirmationService)
+  app.provide(PrimeVueConfirmSymbol, app.config.globalProperties.$confirm)
+
+  app.use(ToastService)
+  app.provide(PrimeVueToastSymbol, app.config.globalProperties.$toast)
+
+  app.directive('styleclass', StyleClass)
+  app.directive('ripple', Ripple)
+  app.directive('badge', BadgeDirective)
+
+  const meta = createMetaManager({
+    isSSR: import.meta.env.SSR
+  })
+  app.use(meta)
+
+  return { app, router }
+}

package/front/src/router.js

@@ -0,0 +1,63 @@
+import {
+  createMemoryHistory,
+  createRouter as _createRouter,
+  createWebHistory
+} from 'vue-router'
+
+
+export function routes(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: { },
+      component: () => import("./components/Debugger.vue"),
+      props: {
+        channelType: 'example_Example',
+        channel: 'one'
+      }
+    })
+
+  ]
+}
+
+export async function sitemap(route, api) {
+
+}
+
+import { client as useClient } from '@live-change/vue3-ssr'
+
+export function createRouter(app, config) {
+  //console.log("APP CTX", app._context)
+  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: routes(config)
+  })
+  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:signIn' }
+      }
+    }
+    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:signIn' && from?.matched.find(m => m?.meta.saveForSignIn)) {
+      console.log("SAVE FOR LOGIN", from.fullPath)
+      localStorage.redirectAfterLogin = from.fullPath
+    }
+  })
+  return router
+}
+

package/front/vite.config.js

@@ -0,0 +1,118 @@
+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
+  }
+}
+
+export default defineConfig(async ({ 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-framework\/framework\//,
+          /live-change-framework\/uid\//,
+          /live-change-dao\/dao\//,
+          /live-change-dao\/dao-sockjs\//,
+          /live-change-dao\/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: [
+        'vue-meta',
+        '@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'
+      ]
+    },
+
+    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(/^\/@\//, ''))
+        }
+      },
+    }],
+  }
+})

package/package.json

@@ -0,0 +1,73 @@
+{
+  "name": "@live-change/peer-connection-frontend",
+  "version": "0.0.3",
+  "scripts": {
+    "memDev": "lcli memDev --enableSessions --initScript ./init.js",
+    "localDevInit": "rm tmp.db; lcli localDev --enableSessions --initScript ./init.js",
+    "localDev": "lcli localDev --enableSessions",
+    "dev": "lcli dev --enableSessions",
+    "ssrDev": "lcli ssrDev --enableSessions",
+    "serveAllMem": "cross-env NODE_ENV=production lcli ssrServer --withApi --withServices --updateServices --enableSessions --withDb --dbBackend mem --createDb",
+    "serveAll": "cross-env NODE_ENV=production lcli ssrServer --withApi --withServices --updateServices --enableSessions",
+    "serve": "cross-env NODE_ENV=production lcli ssrServer --enableSessions",
+    "apiServer": "lcli apiServer --enableSessions",
+    "devApiServer": "lcli devApiServer --enableSessions",
+    "memApiServer": "lcli memApiServer --enableSessions",
+    "build": "cd front; yarn build:client && yarn build:server",
+    "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"
+  },
+  "dependencies": {
+    "@live-change/framework": "0.6.5",
+    "@live-change/cli": "0.6.5",
+    "@live-change/dao": "0.4.13",
+    "@live-change/dao-vue3": "0.4.13",
+    "@live-change/dao-websocket": "0.4.13",
+    "@live-change/vue3-ssr": "0.2.14",
+    "@live-change/vue3-components": "0.2.12",
+    "@live-change/session-service": "0.2.39",
+    "@live-change/user-service": "0.2.37",
+    "@live-change/password-authentication-service": "0.2.39",
+    "@live-change/secret-link-service": "0.2.39",
+    "@live-change/secret-code-service": "0.2.39",
+    "@live-change/user-frontend": "0.0.3",
+    "@vitejs/plugin-vue": "^2.3.1",
+    "@vitejs/plugin-vue-jsx": "^1.3.10",
+    "@vue/compiler-sfc": "^3.2.33",
+    "@vueuse/core": "^8.3.1",
+    "v-shared-element": "3.1.0",
+    "vue3-scroll-border": "0.1.2",
+    "codeceptjs-assert": "^0.0.5",
+    "compression": "^1.7.4",
+    "cross-env": "^7.0.3",
+    "get-port-sync": "1.0.1",
+    "primeicons": "^5.0.0",
+    "primevue": "^3.15.0",
+    "primeflex": "^3.2.1",
+    "rollup-plugin-node-builtins": "^2.1.2",
+    "serialize-javascript": "^6.0.0",
+    "serve-static": "^1.15.0",
+    "vite": "^2.9.6",
+    "vue": "^3.2.33",
+    "vue-meta": "^3.0.0-alpha.9",
+    "vue-router": "^4.0.14",
+    "vite-plugin-compression": "0.5.1",
+    "vite-plugin-vue-images": "^0.6.1",
+    "rollup-plugin-visualizer": "5.6.0"
+  },
+  "devDependencies": {
+    "@live-change/codeceptjs-helper": "0.6.5",
+    "@wdio/selenium-standalone-service": "^7.19.5",
+    "codeceptjs": "^3.3.1",
+    "playwright": "^1.21.1",
+    "random-profile-generator": "^2.3.0",
+    "txtgen": "^3.0.1",
+    "generate-password": "1.7.0",
+    "webdriverio": "^7.19.5"
+  },
+  "author": "",
+  "license": "ISC",
+  "description": ""
+}

package/server/init.js

@@ -0,0 +1,7 @@
+const App = require('@live-change/framework')
+const app = App.app()
+
+module.exports = async function(services) {
+
+
+}

package/server/services.config.js

@@ -0,0 +1,25 @@
+module.exports = {
+  services: [
+    {
+      name: 'timer',
+      path: '@live-change/timer-service'
+    },
+    {
+      name: 'session',
+      path: '@live-change/session-service',
+      createSessionOnUpdate: true
+    },
+    {
+      name: 'online',
+      path: '@live-change/online-service',
+      createSessionOnUpdate: true
+    },
+    {
+      name: 'peerConnection',
+      path: '@live-change/peer-connection-service',
+      turn: {
+        urls: 'turn:turn1.xaos.ninja:4433;turn:turn2.xaos.ninja:4433'
+      }
+    }
+  ]
+}