WIP: collaboration

Author: taye

docs/.vitepress/theme/index.ts

@@ -1,38 +1,17 @@
 import 'virtual:uno.css'
 import './custom.css'
 
+import { setupApp } from 'app-video-editor'
 import type { Theme } from 'vitepress'
 import DefaultTheme from 'vitepress/theme'
-import { createI18n } from 'vue-i18n-lite'
-
-import { win } from 'shared/utils'
-import de from 'webgl-video-editor/locales/de.json'
-import en from 'webgl-video-editor/locales/en.json'
 
 import Layout from './Layout.vue'
 
 const theme: Theme = {
   extends: DefaultTheme,
   Layout,
   enhanceApp({ app }) {
-    app.use(
-      createI18n({
-        locale: (win as Partial<typeof win>).navigator?.language.replace(/-.*/, ''),
-        fallbackLocale: 'en',
-        messages: {
-          en: {
-            ...en,
-            restore_failed: `Couldn't restore video editor content.`,
-            load_demo_video: 'Load demo video',
-          },
-          de: {
-            ...de,
-            restore_failed: `Der Inhalt des Videoeditors konnte nicht wiederhergestellt werden.`,
-            load_demo_video: 'Beispielfilm laden',
-          },
-        },
-      }),
-    )
+    app.use(setupApp)
   },
 }
 export default theme

docs/package.json

@@ -6,11 +6,15 @@
     "@gltf-transform/core": "catalog:",
     "@gltf-transform/extensions": "catalog:",
     "@gltf-transform/functions": "catalog:",
-    "@vueuse/core": "^13.4.0",
-    "gltf-ar-effects": "workspace:",
+    "@vueuse/core": "catalog:",
+    "app-video-editor": "workspace:^",
+    "gltf-ar-effects": "workspace:^",
     "media-trimmer": "workspace:^",
     "webgl-effects": "workspace:^",
     "webgl-media-editor": "workspace:^",
-    "webgl-video-editor": "workspace:^"
+    "webgl-video-editor": "workspace:^",
+    "y-indexeddb": "catalog:",
+    "y-webrtc": "catalog:",
+    "yjs": "catalog:"
   }
 }

docs/video-editor-demo/demo-movie.ts

@@ -0,0 +1,63 @@
+import { getCurrentScope, markRaw, onScopeDispose, ref, type Ref } from 'vue'
+import { IndexeddbPersistence } from 'y-indexeddb'
+import { WebrtcProvider } from 'y-webrtc'
+import * as Y from 'yjs'
+
+import { promiseWithResolvers } from 'shared/utils'
+import { INITIAL_DOC_UPDATE_BASE64 } from 'webgl-video-editor/store/constants.js'
+import { VideoEditorYjsStore } from 'webgl-video-editor/store/yjs.js'
+
+const DOC_NAME = 'video-editor-demo-doc'
+
+export const useVideoEditorStore = (ydoc: Y.Doc): Ref<VideoEditorYjsStore | undefined> => {
+  const store = ref<VideoEditorYjsStore>()
+  if (import.meta.env.SSR) return store
+
+  const scope = getCurrentScope()
+
+  ydoc.transact(() => {
+    Y.applyUpdate(
+      ydoc,
+      Uint8Array.from(atob(INITIAL_DOC_UPDATE_BASE64), (c) => c.charCodeAt(0)),
+    )
+  }, {})
+
+  const idbPromise = promiseWithResolvers()
+
+  void navigator.locks.request(DOC_NAME, async () => {
+    if (!scope?.active) return
+
+    const { promise, resolve } = promiseWithResolvers()
+
+    const idb = new IndexeddbPersistence(DOC_NAME, ydoc)
+    await idb.whenSynced
+    idbPromise.resolve()
+
+    scope.run(() => {
+      onScopeDispose(() => {
+        resolve()
+        void idb.destroy()
+      })
+    })
+
+    await promise
+  })
+
+  const webrtc = new WebrtcProvider(DOC_NAME, ydoc)
+
+  void Promise.race([
+    idbPromise.promise,
+    new Promise<unknown>((resolve) => {
+      ydoc.once('sync', resolve)
+      webrtc.once('peers', () => ydoc.once('update', resolve))
+    }),
+  ]).then(() => {
+    store.value = markRaw(new VideoEditorYjsStore(ydoc))
+  })
+
+  onScopeDispose(() => {
+    webrtc.destroy()
+  })
+
+  return store
+}

docs/video-editor-demo/video-editor-demo-store.ts

@@ -6,40 +6,16 @@ pageClass: demo-page video-editor-demo-page
 ---
 
 <script setup lang="ts">
-import VideoEditorDemo from './video-editor-demo/video-editor-demo.vue'
+import * as Y from 'yjs'
+
+import { VideoEditorApp } from 'app-video-editor'
+import { useVideoEditorStore } from './video-editor-demo/video-editor-demo-store'
+
+const store = useVideoEditorStore(new Y.Doc())
 </script>
 
 <div class="demo-container">
   <ClientOnly>
-    <VideoEditorDemo />
+    <VideoEditorApp v-if="store" :store class="demo-container" />
   </ClientOnly>
 </div>
-
-<style scoped>
-.video-editor {
-  height: 100%
-}
-
-.demo-video-button {
-  position: absolute;
-  left: 1rem;
-  display: flex;
-  gap: 0.675rem;
-  align-items: center;
-  justify-content: center;
-  min-width: var(--clip-height);
-  height: var(--clip-height);
-  padding: 0.675rem 0.875rem;
-  color: var(--white-3);
-  cursor: pointer;
-  background-color: rgb(255 255 255 / 3%);
-  border: dashed;
-  border-color: rgb(255 255 255 / 12%);
-  border-radius: 0.625rem;
-  translate: var(--track-width);
-
-  font-size: 14px;
-  font-weight: 500;
-  line-height: 17px;
-}
-</style>

docs/video-editor.md

@@ -2,6 +2,7 @@
 /// <reference types="vite/client" />
 /// <reference types="vitest/client" />
 /// <reference types="vitest/config" />
+/// <reference types="webxdc-types/global" />
 /// <reference types="./auto-imports" />
 
 // remote assets

env.d.ts

@@ -26,15 +26,17 @@
   "author": "Taye Adeyemi",
   "license": "AGPL-3.0-only",
   "dependencies": {
+    "@unocss/reset": "^66.4.2",
     "compare-palettes": "workspace:^",
     "filesize": "^10.1.6",
     "gltf-ar-effects": "workspace:^",
     "reactive-effects": "workspace:^",
     "shared": "workspace:^",
     "uid": "catalog:",
     "vitest": "^3.2.4",
-    "vue": "^3.5.17",
-    "vue-i18n-lite": "^1.0.2"
+    "vue": "catalog:",
+    "vue-i18n-lite": "catalog:",
+    "webgl-video-editor": "workspace:^"
   },
   "devDependencies": {
     "@esbuild-plugins/node-globals-polyfill": "^0.2.3",
@@ -119,7 +121,7 @@
     "terser": "^5.43.1",
     "throttle-debounce": "catalog:",
     "tsx": "^4.20.3",
-    "typescript": "^5.8.3",
+    "typescript": "^5.9.2",
     "typescript-eslint": "^8.35.0",
     "unocss": "^66.3.2",
     "unplugin-auto-import": "^19.3.0",
@@ -128,7 +130,10 @@
     "vite-bundle-analyzer": "^0.23.0",
     "vite-plugin-remote-assets": "^2.0.0",
     "vitepress": "2.0.0-alpha.2",
-    "vue-tsc": "^2.2.10"
+    "vue-tsc": "^2.2.10",
+    "webxdc-types": "^1.0.1",
+    "yjs": "catalog:",
+    "yjs-orderedtree": "catalog:"
   },
   "lint-staged": {
     "**/*.((ts|js|cjs)?(x)|vue)": [