docs: present video editor full page

Author: taye

docs/.vitepress/theme/bulma-config.scss

@@ -0,0 +1,58 @@
+/* stylelint-disable scss/at-extend-no-missing-placeholder */
+@use 'bulma/sass/utilities' with (
+  $class-prefix: 'bulma-'
+);
+@use 'bulma/sass/utilities/initial-variables' as iv;
+@use 'bulma/sass/base';
+@use 'bulma/sass/elements/button';
+@use 'bulma/sass/elements/block';
+@use 'bulma/sass/elements/content';
+@use 'bulma/sass/elements/progress';
+@use 'bulma/sass/components/dropdown';
+@use 'bulma/sass/components/card';
+@use 'bulma/sass/components/modal';
+@use 'bulma/sass/form/shared';
+@use 'bulma/sass/form/tools';
+@use 'bulma/sass/form/select';
+@use 'bulma/sass/grid/columns';
+@use 'bulma/sass/layout/level';
+@use 'bulma/sass/themes';
+@use 'bulma/sass/helpers/flexbox';
+
+:root {
+  --bulma-body-overflow-y: auto;
+}
+
+.#{iv.$class-prefix}button.overlay {
+  @extend .#{iv.$class-prefix}is-text;
+
+  color: var(--white);
+  background-color: var(--primary-bg-05);
+
+  &:hover {
+    background-color: var(--black-3);
+  }
+
+  &:active {
+    background-color: var(--black-3);
+  }
+}
+
+// https://github.com/jgthms/bulma/issues/4003
+.#{iv.$class-prefix}level.#{iv.$class-prefix}is-mobile > .#{iv.$class-prefix}level-right {
+  flex-direction: row;
+}
+
+dialog {
+  padding: 0;
+  background: transparent;
+  border-style: none;
+}
+
+.#{iv.$class-prefix}modal:open {
+  @extend .#{iv.$class-prefix}is-active;
+}
+
+.#{iv.$class-prefix}modal::backdrop {
+  @extend .#{iv.$class-prefix}modal-background;
+}

docs/.vitepress/theme/custom.css

@@ -1,3 +1,5 @@
+@import './bulma-config.scss';
+
 :root {
   --vp-c-brand-1: #1d6be4;
   --vp-c-text-1: #212121;

docs/package.json

@@ -8,6 +8,7 @@
     "@gltf-transform/functions": "catalog:",
     "@vueuse/core": "catalog:",
     "app-video-editor": "workspace:^",
+    "bulma": "^1.0.4",
     "gltf-ar-effects": "workspace:^",
     "media-trimmer": "workspace:^",
     "webgl-effects": "workspace:^",

docs/roadmap.md

@@ -17,7 +17,7 @@ Miru is under active development. Here's what we've done <span class="task-done"
 
   Multi-track editing of video and audio clips with WebGL filters in a simple, mobile-friendly UI.
 
-- ## <span class="task-date">2025-Q3</span> <span class="task-wip" /> Real-time AR effects
+- ## <span class="task-date">2025-Q3</span> <span class="task-done" /> Real-time AR effects
 
   Using MediaPipe and Three.js, create a proof of concept with glTF interactivity and face landmark detection extension implementations and create a collection of sample AR effects.
 
@@ -41,23 +41,23 @@ Miru is under active development. Here's what we've done <span class="task-done"
   - Preserve color profile
   - Increase browser and codec support with LibAVJS-WebCodecs-Polyfill
 
-- ## <span class="task-date">2025-H2</span> <span class="task-todo" /> Explore using Miru in social media apps
+- ## <span class="task-date">2025-H2</span> <span class="task-wip" /> Explore using Miru in social media apps
 
   Our image filters are currently used in Pixelfed. What other apps might benefit from integration with Miru?
   - Are the editors and AR effects also a good fit for chat apps like Delta Chat?
   - Do users of Loops want a built-in video editor in the web client?
   - Is a React Native or NativeScript implementation feasible and worth implementing?
 
-- ## <span class="task-date">2026-H1</span> <span class="task-todo" /> Video editor improvements
+- ## <span class="task-date">2026-Q1</span> <span class="task-todo" /> Video editor improvements
 
-  Improve the desktop UX, widen input file format suport, add asset management, and add new clip types:
+  Improve the desktop UX, widen input file format suport, add asset management, and add new content types:
   - Text
   - Images and stickers
   - Subtitles
 
-- ## <span class="task-date">2026-H2</span> <span class="task-todo" /> Collaborative video editing
+- ## <span class="task-date">2026-Q1</span> <span class="task-todo" /> Collaborative video editing
 
-  Add local-first, real-time collaborative editing to Miru's video editor using CRDTs. Implement project management, invitations, and sharing.
+  Add local-first collaborative editing to Miru's video editor using CRDTs. Implement project management, invitations, to run on an existing a self-hostable platform like Nextcloud or NextGraph.
 
 - ## <span class="task-date">2026-H2</span> <span class="task-todo" /> AI-powered video editing tools
 

docs/video-editor.md

@@ -1,16 +1,18 @@
 ---
-layout: page
+layout: false
 title: Video editor
 navbar: false
-pageClass: demo-page video-editor-demo-page
 ---
 
 <script setup lang="ts">
+import { useRouter } from 'vitepress'
 import { VideoEditorApp } from 'app-video-editor'
+
+const router = useRouter()
 </script>
 
-<div class="demo-container">
+<div >
   <ClientOnly>
-    <VideoEditorApp class="demo-container" />
+    <VideoEditorApp :onCloseProject="() => router.go('/')" />
   </ClientOnly>
 </div>

docs/video-trimmer.md

@@ -11,8 +11,6 @@ import { ref, watchEffect } from 'vue'
 import { trim } from 'media-trimmer'
 import { type LoadInfo, type TrimState } from 'media-trimmer'
 
-const videoEditorContainer = ref<HTMLElement>()
-
 const source = ref('')
 const state = ref<TrimState>()
 
@@ -64,7 +62,7 @@ const onInputFile = (event: Event) => {
 }
 </script>
 
-<div class="demo-container">
+<div class="demo-container video-trimmer-demo">
   <media-trimmer
     class="block w-full p-0.5rem box-border"
     :source="source"
@@ -73,30 +71,35 @@ const onInputFile = (event: Event) => {
     :onLoad="onLoad"
     :onError="onError"
   ></media-trimmer>
-  <progress class="block w-full border-0" :value="progress" max="1" />
-  <div class="flex items-center">
-    <input
-      type="file"
-      accept="video/*"
-      :onInput="onInputFile"
-    />
-    <button
-      type="button"
-      :onClick="exportVideo"
-      :disabled="!state"
-      style="padding: 1rem; border: solid white"
-    >
-      Export
-    </button>
-        <a
-          v-if="resultUrl"
-          :href="resultUrl"
-          target="_blank"
-          :download="`trimmed${inputFile ? '-' + inputFile.name : ''}.mp4`"
-        >
-          Download
-        </a>
 
+  <progress class="bulma-progress w-full border-0" :value="progress" max="1" />
+    <div class="bulma-field bulma-is-grouped">
+      <label :class="['bulma-button', !source && 'bulma-is-primary']">
+      <div class="bulma-icon i-tabler:upload"></div>
+      <span > Choose a file </span>
+      <input type="file" name="video source" accept="video/*" :onInput="onInputFile" hidden />
+      </label>
+      <div class="control">
+      <button
+        v-if="source"
+        :class="['bulma-button', !resultUrl && 'bulma-is-primary']"
+        :onClick="exportVideo"
+      >
+        Export
+      </button>
+      </div>
+    <div class="control">
+      <a
+        class="bulma-button bulma-is-success"
+        v-if="resultUrl"
+        :href="resultUrl"
+        target="_blank"
+        :download="`trimmed${inputFile ? '-' + inputFile.name : ''}.mp4`"
+      >
+          <div class="icon i-tabler:download"></div>
+        Download
+      </a>
+    </div>
   </div>
   <video
     :src="resultUrl"

package.json

@@ -12,8 +12,8 @@
     "check": "vue-tsc -b tsconfig.check.json --incremental",
     "lint:markdown": "markdownlint --ignore-path .gitignore --ignore '**/CHANGELOG.md' '**/*.md'",
     "lint:prettier": "prettier --check '**/*.{ts,js,tsx,jsx,cjs,vue,md,html,yaml,yml,json}'",
-    "lint": "stylelint '**/*.css' && pnpm run lint:markdown && pnpm eslint --quiet && pnpm run lint:prettier",
-    "lint:fix": "stylelint --fix '**/*.css' && pnpm run lint:markdown --fix && pnpm eslint --quiet --fix && pnpm lint:prettier --write",
+    "lint": "stylelint '**/*.{css,scss}' && pnpm run lint:markdown && pnpm eslint --quiet && pnpm run lint:prettier",
+    "lint:fix": "stylelint --fix '**/*.{css,scss}' && pnpm run lint:markdown --fix && pnpm eslint --quiet --fix && pnpm lint:prettier --write",
     "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s",
     "prepare": "husky",
     "docs:dev": "vitepress dev docs",
@@ -107,14 +107,15 @@
     "rollup-plugin-glob-import": "^0.5.0",
     "rollup-plugin-glsl-optimize": "^1.0.4",
     "rollup-plugin-postcss": "^4.0.2",
+    "sass-embedded": "^1.92.0",
     "semver": "^7.7.2",
     "sharp": "^0.34.3",
     "stats.js": "catalog:",
     "stylelint": "^16.23.1",
     "stylelint-config-css-modules": "^4.5.1",
     "stylelint-config-html": "^1.1.0",
     "stylelint-config-recess-order": "^7.2.0",
-    "stylelint-config-standard": "^38.0.0",
+    "stylelint-config-standard-scss": "^16.0.0",
     "stylelint-order": "^7.0.0",
     "stylelint-prettier": "^5.0.3",
     "taze": "^19.4.0",
@@ -129,7 +130,7 @@
     "vite": "6.1.0",
     "vite-bundle-analyzer": "^0.23.0",
     "vite-plugin-remote-assets": "^2.1.0",
-    "vitepress": "2.0.0-alpha.2",
+    "vitepress": "2.0.0-alpha.12",
     "vue-tsc": "^3.0.6"
   },
   "lint-staged": {
@@ -142,7 +143,7 @@
       "markdownlint --fix",
       "prettier --check --write"
     ],
-    "**/*.css": "stylelint --fix",
+    "**/*.{css,scss}": "stylelint --fix",
     "**/*.(yaml|yml|json)": "prettier --check --write"
   },
   "browserslist": [
@@ -154,7 +155,8 @@
       "glsl-tokenizer": "patches/glsl-tokenizer.patch",
       "libavjs-webcodecs-polyfill": "patches/libavjs-webcodecs-polyfill.patch",
       "videocontext": "patches/videocontext.patch",
-      "@mediapipe/tasks-vision": "patches/@mediapipe__tasks-vision.patch"
+      "@mediapipe/tasks-vision": "patches/@mediapipe__tasks-vision.patch",
+      "vitepress": "patches/vitepress.patch"
     },
     "onlyBuiltDependencies": [
       "esbuild",

packages/app-video-editor/src/intro-modal-content.de.md

@@ -0,0 +1,36 @@
+<!-- markdownlint-disable first-line-heading -->
+<div class="bulma-modal-card-body">
+  <slot name="header" title="Videoeditor"></slot>
+  
+  <div class="bulma-content">
+    <p>
+    Hallo, dies ist ein Freie-Software- und Open-Source-Online-Videoeditor. Schau es dir an, und gib uns Feedback auf <a target="_blank"
+        href="https://discord.gg/mmwMvf4Pnv">Discord</a>, <a target="_blank"
+        href="https://codeberg.org/miru-media/miru">Codeberg</a> oder <a target="_blank"
+        href="https://github.com/miru-media/miru">Github</a>.
+    </p>
+    <p>
+      <strong>Vorsicht: Er handelt sich noch um Alpha-Software, daher kann es passieren, dass mit einem Update deine Edits gelöscht werden!</strong>
+    </p>
+    <p>Der Editor ermöglicht dir:</p>
+    <ul>
+      <li>✅ Mehrere Videoclips hinzufügen</li>
+      <li>✅ Audio-Dateien hinzufügen</li>
+      <li>✅ Clips schneiden und trimmen</li>
+      <li>✅ Filtereffekte anwenden</li>
+      <li>✅ Exportieren als MP4 oder Webm</li>
+    </ul>
+    <p>Wir arbeiten noch an:</p>
+    <ul>
+      <li>Overlays von Bildern und Text</li>
+      <li>Größenänderung und Positionierung</li>
+      <li>Asset-Bibliothek</li>
+      <li>Kollaboratives Editieren</li>
+      <li>Übergänge und Crossfade-Effekte</li>
+      <li>Untertitlen</li>
+      <li>Keyframe-Animationen</li>
+    </ul>
+  </div>
+</div>
+
+<slot name="confirm" text="Okay, los gehts!"></slot>

packages/app-video-editor/src/intro-modal-content.en.md

@@ -0,0 +1,36 @@
+<!-- markdownlint-disable first-line-heading -->
+<div class="bulma-modal-card-body">
+  <slot name="header" title="video editor"></slot>
+  
+  <div class="bulma-content">
+    <p>
+      Hi and welcome to our free and open source online video editor.
+      Try it out and send us feedback on <a target="_blank"
+        href="https://discord.gg/mmwMvf4Pnv">Discord</a>, <a target="_blank"
+        href="https://codeberg.org/miru-media/miru">Codeberg</a>, or <a target="_blank"
+        href="https://github.com/miru-media/miru">Github</a>.
+    </p>
+    <p>
+      <strong>It's still alpha software and you might lose some of your work after an update!</strong> That said, the editor lets you:
+    </p>
+    <ul>
+      <li>✅ Add multiple video clips</li>
+      <li>✅ Add audio files</li>
+      <li>✅ Split and trim</li>
+      <li>✅ Add filter effects</li>
+      <li>✅ Export to MP4 or Webm</li>
+    </ul>
+    <p>We're still working on:</p>
+    <ul>
+      <li>Image and text overlays</li>
+      <li>Resizing and positioning on the canvas</li>
+      <li>Asset library</li>
+      <li>Collaborative editing</li>
+      <li>Transitions crossfade effects</li>
+      <li>Subtitles</li>
+      <li>Keyframe animations</li>
+    </ul>
+  </div>
+</div>
+
+<slot name="confirm" text="Okay, let's go!"></slot>