diff --git a/web/src/components/BufferViewer.vue b/web/src/components/BufferViewer.vue index eea56ad..6c8f25d 100644 --- a/web/src/components/BufferViewer.vue +++ b/web/src/components/BufferViewer.vue @@ -29,6 +29,7 @@ const canvas = useTemplateRef("canvas"); const fileType = ref(""); const text = ref(null); const image = ref(null); +const video = ref(null); const size_multiplier = ref(1); function draw_blob(): Promise { @@ -56,8 +57,6 @@ function draw_blob(): Promise { 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,15 @@ async function resize_canvas() { return; } - image.value = new Blob([buffer], {type: typeGuess.mime}); + 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 +115,19 @@ section { align-items: center; justify-content: center; } + +video { + width: 100%; + height: auto; +}