WIP: collaboration

Author: taye

docs/package.json

@@ -13,6 +13,9 @@
     "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/video-editor-demo-store.ts

@@ -0,0 +1,55 @@
+import { getCurrentScope, markRaw, onScopeDispose, ref, type Ref } from 'vue'
+import { IndexeddbPersistence } from 'y-indexeddb'
+import { WebrtcProvider } from 'y-webrtc'
+import type * as Y from 'yjs'
+
+import { promiseWithResolvers } from 'shared/utils'
+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()
+
+  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(() => {
+        void idb.destroy()
+        resolve()
+      })
+    })
+
+    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.md

@@ -6,13 +6,18 @@ navbar: false
 
 <script setup lang="ts">
 import { useRouter } from 'vitepress'
+import * as Y from 'yjs'
+
 import { VideoEditorApp } from 'app-video-editor'
 
 const router = useRouter()
+import { useVideoEditorStore } from './video-editor-demo/video-editor-demo-store'
+
+const store = useVideoEditorStore(new Y.Doc())
 </script>
 
 <div >
   <ClientOnly>
-    <VideoEditorApp :onCloseProject="() => router.go('/')" />
+    <VideoEditorApp v-if="store" :store :onCloseProject="() => router.go('/')" />
   </ClientOnly>
 </div>

packages/webgl-video-editor/package.json

@@ -81,9 +81,17 @@
     "webm-muxer": "catalog:"
   },
   "peerDependencies": {
-    "vue": "3"
+    "vue": "3",
+    "yjs": "catalog:",
+    "yjs-orderedtree": "catalog:"
   },
   "peerDependenciesMeta": {
+    "yjs": {
+      "optional": true
+    },
+    "yjs-orderedtree": {
+      "optional": true
+    },
     "vue": {
       "optional": true
     }

packages/webgl-video-editor/src/store/constants.ts

@@ -0,0 +1,2 @@
+export const YTREE_YMAP_KEY = 'ytree'
+export const YTREE_ROOT_KEY = 'root'

packages/webgl-video-editor/src/store/yjs.ts

@@ -0,0 +1,290 @@
+import { ref } from 'fine-jsx'
+import * as Y from 'yjs'
+import { YTree } from 'yjs-orderedtree'
+
+import type {
+  NodeCreateEvent,
+  NodeDeleteEvent,
+  NodeMoveEvent,
+  NodeUpdateEvent,
+  Schema,
+  VideoEditor,
+  VideoEditorStore,
+} from 'webgl-video-editor'
+
+import { ASSET_TYPE_PREFIX, ROOT_NDOE_ID } from '../constants.ts'
+
+import { YTREE_ROOT_KEY, YTREE_YMAP_KEY } from './constants.ts'
+import { createInitialMovie } from './utils.ts'
+
+const updateYnode = (ynode: Y.Map<unknown>, updates: Partial<Schema.AnyNodeSchema>): void => {
+  for (const key in updates) {
+    if (Object.hasOwn(updates, key)) {
+      const newValue = updates[key as keyof Schema.AnyNodeSchema]
+      if (JSON.stringify(newValue) !== JSON.stringify(ynode.get(key))) ynode.set(key, newValue)
+    }
+  }
+}
+
+const OBSERVED = new WeakSet<Y.Map<unknown>>()
+
+export class VideoEditorYjsStore implements VideoEditorStore {
+  #movie!: VideoEditor['_editor']['_movie']
+
+  readonly ydoc: Y.Doc
+  #ytree!: YTree
+  #yundo!: Y.UndoManager
+  readonly #ignoreOrigin = Symbol('ignore-undo')
+
+  readonly #canUndo = ref(false)
+  readonly #canRedo = ref(false)
+  get canUndo(): boolean {
+    return this.#canUndo.value
+  }
+  get canRedo(): boolean {
+    return this.#canRedo.value
+  }
+
+  readonly #abort = new AbortController()
+
+  #isApplyingDocUpdate = false
+  get #shouldSkipNodeEvent(): boolean {
+    return this.#yundo.undoing || this.#yundo.redoing || this.#isApplyingDocUpdate
+  }
+
+  constructor(ydoc: Y.Doc) {
+    this.ydoc = ydoc
+    ydoc.on('destroy', this.dispose.bind(this))
+  }
+
+  init(editor: VideoEditor): void {
+    const { _editor } = editor
+
+    const ymap = this.ydoc.getMap(YTREE_YMAP_KEY)
+
+    this.#ytree = new YTree(ymap)
+    const yundo = (this.#yundo = new Y.UndoManager(ymap))
+
+    let isNewMovie = true
+    try {
+      this.#ytree.getNodeValueFromKey(ROOT_NDOE_ID)
+      isNewMovie = false
+    } catch {}
+
+    const movie = (this.#movie = _editor._movie)
+    movie.nodes.map.forEach((node) => this.#onCreate({ nodeId: node.id }))
+
+    this.#ytree.observe(this.#onYtreeChange.bind(this))
+
+    const bindNodeListener = <T extends unknown[]>(
+      listener: (...args: T) => unknown,
+    ): ((...args: T) => void) => {
+      listener = listener.bind(this)
+      return (...args) => {
+        if (!this.#shouldSkipNodeEvent) this.transact(() => listener(...args))
+      }
+    }
+
+    const options: AddEventListenerOptions = { signal: this.#abort.signal }
+    /* eslint-disable @typescript-eslint/unbound-method -- false positive */
+    movie.on('node:create', bindNodeListener(this.#onCreate), options)
+    movie.on('node:move', bindNodeListener(this.#onMove), options)
+    movie.on('node:update', bindNodeListener(this.#onUpdate), options)
+    movie.on('node:delete', bindNodeListener(this.#onDelete), options)
+    /* eslint-enable @typescript-eslint/unbound-method */
+
+    if (isNewMovie) {
+      editor.replaceContent(createInitialMovie(this.generateId.bind(this)))
+      _editor.createInitialAssets()
+    }
+
+    movie.on('root:replace', this.reset.bind(this), options)
+    this.#onYtreeChange()
+
+    const onStackChange = (): void => {
+      const yundo = this.#yundo
+      this.#canUndo.value = yundo.canUndo()
+      this.#canRedo.value = yundo.canRedo()
+    }
+
+    yundo.ignoreRemoteMapChanges = true
+    yundo.on('stack-cleared', onStackChange)
+    yundo.on('stack-item-added', onStackChange)
+    yundo.on('stack-item-popped', onStackChange)
+    yundo.clear()
+  }
+
+  // WIP: shouldn't be needed
+  untracked<T>(fn: () => T): T {
+    return this.ydoc.transact(fn, this.#ignoreOrigin)
+  }
+
+  transact<T>(fn: () => T): T {
+    return this.ydoc.transact(fn)
+  }
+
+  undo(): void {
+    this.#yundo.undo()
+  }
+  redo(): void {
+    this.#yundo.redo()
+  }
+
+  readonly #onYnodeChange = (event: Y.YMapEvent<unknown>): void => {
+    this.#isApplyingDocUpdate = true
+
+    try {
+      this.ydoc.transact(() => {
+        const ynode = event.target
+        const id = ynode.get('id') as string
+        const node = this.#movie.nodes.get(id) as Record<string, any>
+
+        event.changes.keys.forEach((change, key) => {
+          const newValue = change.action === 'delete' ? undefined : ynode.get(key)
+          node[key] = newValue
+        })
+      })
+    } finally {
+      this.#isApplyingDocUpdate = false
+    }
+  }
+
+  #ensureObserved(ynode: Y.Map<unknown>): void {
+    if (!OBSERVED.has(ynode)) {
+      ynode.observe(this.#onYnodeChange)
+      OBSERVED.add(ynode)
+    }
+  }
+
+  #onYtreeChange(): void {
+    this.#isApplyingDocUpdate = true
+    try {
+      this.ydoc.transact(() => this.#onYtreeChange_(YTREE_ROOT_KEY))
+    } finally {
+      this.#isApplyingDocUpdate = false
+    }
+  }
+
+  #onYtreeChange_(parentKey: string): void {
+    const ytree = this.#ytree
+    const childIds: string[] = ytree.sortChildrenByOrder(ytree.getNodeChildrenFromKey(parentKey), parentKey)
+    const childIdSet = new Set<string>(childIds)
+
+    const getOrCreateFromYTree = (ynode: Y.Map<unknown>) =>
+      this.#movie.nodes.map.get(ynode.get('id') as string) ??
+      this.#movie.createNode(ynode.toJSON() as Schema.AnyNodeSchema)
+
+    if (parentKey === YTREE_ROOT_KEY) {
+      childIds.forEach((nodeId) => {
+        const ynode: Y.Map<unknown> = ytree.getNodeValueFromKey(nodeId)
+        if ((ynode.get('type') as string).startsWith(ASSET_TYPE_PREFIX)) getOrCreateFromYTree(ynode)
+      })
+    } else {
+      this.#movie.nodes.get(parentKey).children?.forEach((child) => {
+        if (!childIdSet.has(child.id)) child.remove()
+      })
+    }
+
+    childIds.forEach((nodeId, index) => {
+      const ynode = ytree.getNodeValueFromKey(nodeId)
+      const node = getOrCreateFromYTree(ynode)
+
+      this.#ensureObserved(ynode)
+
+      if (
+        (node.parent?.id ?? YTREE_ROOT_KEY) !== parentKey ||
+        (parentKey !== YTREE_ROOT_KEY && node.index !== index)
+      )
+        node.position(parentKey === YTREE_ROOT_KEY ? undefined : { parentId: parentKey, index })
+
+      this.#onYtreeChange_(nodeId)
+    })
+  }
+
+  #onCreate(event: Pick<NodeCreateEvent, 'nodeId'>): void {
+    const { nodeId } = event
+    const node = this.#movie.nodes.get(nodeId)
+    const ytree = this.#ytree
+    let ynode: Y.Map<unknown>
+
+    try {
+      ynode = ytree.getNodeValueFromKey(nodeId)
+    } catch {
+      ynode = new Y.Map(Object.entries(node.toObject()))
+      ytree.createNode(YTREE_ROOT_KEY, nodeId, ynode)
+      ytree.recomputeParentsAndChildren()
+    }
+
+    this.#ensureObserved(ynode)
+  }
+
+  #onMove(event: NodeMoveEvent): void {
+    const { nodeId } = event
+    const node = this.#movie.nodes.get(nodeId)
+    const parentNode = node.parent
+    const ytree = this.#ytree
+
+    const parentKey = parentNode?.id ?? YTREE_ROOT_KEY
+    if (ytree.getNodeParentFromKey(nodeId) !== parentKey) ytree.moveChildToParent(nodeId, parentKey)
+
+    if (parentNode) {
+      const ytreeSiblingIds = new Set<string>(ytree.getNodeChildrenFromKey(parentKey))
+
+      ytree.recomputeParentsAndChildren()
+      const nextId = node.next?.id
+      const prevId = node.prev?.id
+
+      if (nextId && ytreeSiblingIds.has(nextId)) ytree.setNodeBefore(nodeId, nextId)
+      else if (prevId && ytreeSiblingIds.has(prevId)) ytree.setNodeAfter(nodeId, prevId)
+    }
+  }
+
+  #onUpdate(event: NodeUpdateEvent): void {
+    const { from, nodeId } = event
+    const node = this.#movie.nodes.get(nodeId)
+    const udpates: Record<string, unknown> = {}
+
+    for (const key in from) {
+      if (Object.hasOwn(from, key)) {
+        udpates[key] = node[key as keyof typeof node]
+      }
+    }
+
+    updateYnode(this.#ytree.getNodeValueFromKey(nodeId), udpates)
+  }
+
+  #onDelete(event: NodeDeleteEvent): void {
+    if (this.#shouldSkipNodeEvent) return
+
+    const { nodeId } = event
+
+    this.#ytree.deleteNodeAndDescendants(nodeId)
+  }
+
+  reset(): void {
+    this.#yundo.clear()
+  }
+
+  dispose(): void {
+    this.#abort.abort()
+  }
+
+  generateId(): string {
+    return this.#ytree.generateNodeKey()
+  }
+
+  serializeYdoc(): Schema.SerializedMovie {
+    const ytree = this.#ytree
+
+    const serialize = (nodeId: string): Schema.AnyNodeSerializedSchema => {
+      const ynode: Y.Map<unknown> = ytree.getNodeValueFromKey(nodeId)
+      const childIds: string[] = ytree.getNodeChildrenFromKey(nodeId)
+
+      return { ...ynode.toJSON(), children: childIds.map(serialize) } as any
+    }
+
+    const movie = serialize(ytree.getNodeValueFromKey(ROOT_NDOE_ID)) as Schema.SerializedMovie
+
+    return movie
+  }
+}