From cb1f10574cb3fcf5c3d934272a42cd9f7be2414c Mon Sep 17 00:00:00 2001
From: Yuki Donath <dotstart@pm.me>
Date: Mon, 20 Apr 2026 22:18:38 +0200
Subject: [PATCH 1/2] Added support for video uploads.

---
 web/src/components/BufferViewer.vue | 23 ++++++++++++++++++++---
 web/src/components/FileDrop.vue     |  2 +-
 2 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/web/src/components/BufferViewer.vue b/web/src/components/BufferViewer.vue
index eea56ad..d32fdbe 100644
--- a/web/src/components/BufferViewer.vue
+++ b/web/src/components/BufferViewer.vue
@@ -29,6 +29,7 @@ const canvas = useTemplateRef<HTMLCanvasElement>("canvas");
 const fileType = ref("");
 const text = ref<string | null>(null);
 const image = ref<Blob | null>(null);
+const video = ref<string | null>(null);
 const size_multiplier = ref<number>(1);
 
 function draw_blob(): Promise<void> {
@@ -56,8 +57,6 @@ function draw_blob(): Promise<void> {
       const rect = container.value?.getBoundingClientRect();
       const container_multiplier = !!rect ? Math.min(1, rect.width / img.width) : 1;
 
-      console.log(rect, img.width, container_multiplier);
-
       c.width = img.width * size_multiplier.value * container_multiplier;
       c.height = img.height * size_multiplier.value * container_multiplier;
 
@@ -95,7 +94,17 @@ async function resize_canvas() {
     return;
   }
 
-  image.value = new Blob([buffer], {type: typeGuess.mime});
+  console.log(typeGuess);
+
+  fileType.value = typeGuess.mime;
+  const blob = new Blob([buffer], {type: typeGuess.mime});
+  if (typeGuess.mime.startsWith("video/")) {
+    video.value = URL.createObjectURL(blob);
+    text.value = "";
+    return
+  }
+
+  image.value = blob;
   await draw_blob();
 
   text.value = "";
@@ -108,11 +117,19 @@ section {
   align-items: center;
   justify-content: center;
 }
+
+video {
+  width: 100%;
+  height: auto;
+}
 </style>
 
 <template>
   <section ref="container">
     <textarea readonly v-if="!!text" v-model="text" rows="30"></textarea>
+    <video controls v-if="!!video">
+      <source :src="video" :type="fileType"/>
+    </video>
     <div class="overflow-auto">
       <canvas
         ref="canvas"
diff --git a/web/src/components/FileDrop.vue b/web/src/components/FileDrop.vue
index ae34581..1904633 100644
--- a/web/src/components/FileDrop.vue
+++ b/web/src/components/FileDrop.vue
@@ -18,7 +18,7 @@
 <script setup lang="ts">
 import {ref, useTemplateRef} from "vue";
 
-const ACCEPTABLE_TYPES = ["text/plain", "image/png", "image/jpeg"];
+const ACCEPTABLE_TYPES = ["text/plain", "image/png", "image/jpeg", "video/mp4", "video/mpeg", "video/webm"];
 
 const emit = defineEmits<{
   change: [file: File | null]

From 2eaf81c1f776f4b9c4f98ee2080e26f469e30593 Mon Sep 17 00:00:00 2001
From: Yuki Donath <dotstart@pm.me>
Date: Mon, 20 Apr 2026 22:22:46 +0200
Subject: [PATCH 2/2] Removed a leftover debug statement.

---
 web/src/components/BufferViewer.vue | 2 --
 1 file changed, 2 deletions(-)

diff --git a/web/src/components/BufferViewer.vue b/web/src/components/BufferViewer.vue
index d32fdbe..6c8f25d 100644
--- a/web/src/components/BufferViewer.vue
+++ b/web/src/components/BufferViewer.vue
@@ -94,8 +94,6 @@ async function resize_canvas() {
     return;
   }
 
-  console.log(typeGuess);
-
   fileType.value = typeGuess.mime;
   const blob = new Blob([buffer], {type: typeGuess.mime});
   if (typeGuess.mime.startsWith("video/")) {