refactor(webgl-video-editor): prep for 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/ar-effects-demo/sample-gltf.ts

@@ -13,7 +13,7 @@ export const createSampleGltf = async (url: string, createMask = false) => {
     ? await createMaskEffectWithAsset(io, url)
     : convertExtrasToExtensions(await io.read(url))
 
-  return (await io.writeBinary(doc)).buffer
+  return (await io.writeBinary(doc)).buffer as ArrayBuffer
 }
 
 const createMaskEffectWithAsset = async (io: gltf.WebIO, url: string) => {

docs/package.json

@@ -6,8 +6,9 @@
     "@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:^",

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

@@ -6,40 +6,11 @@ pageClass: demo-page video-editor-demo-page
 ---
 
 <script setup lang="ts">
-import VideoEditorDemo from './video-editor-demo/video-editor-demo.vue'
+import { VideoEditorApp } from 'app-video-editor'
 </script>
 
 <div class="demo-container">
   <ClientOnly>
-    <VideoEditorDemo />
+    <VideoEditorApp 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
@@ -97,6 +98,15 @@ declare module 'ebml-block' {
   export default ebmlBlock
 }
 
+declare module 'libavjs-webcodecs-polyfill' {
+  const { AudioData, AudioEncoder } = window
+  class EncodedAudioChunk_ extends EncodedAudioChunk_ {
+    _libavGetData: () => Uint8Array
+  }
+  const load: (..._args: unknown[]) => Promise<void>
+  export { AudioData, AudioEncoder, EncodedAudioChunk_ as EncodedAudioChunk, load }
+}
+
 declare module 'videocontext' {
   interface EffectDefinition {
     title: string