From 72e71eda75fc0429b70693bbb2a71324c8951fd8 Mon Sep 17 00:00:00 2001
From: julianbollig <julian.bollig@tngtech.com>
Date: Sun, 23 Feb 2025 16:59:47 +0200
Subject: [PATCH] feat: add video display in Create.vue and let comfyUi.ts
 process videos ||

Signed-off-by: julianbollig <julian.bollig@tngtech.com>
---
 WebUI/src/assets/js/store/comfyUi.ts | 8 +++++---
 WebUI/src/views/Create.vue           | 4 +++-
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/WebUI/src/assets/js/store/comfyUi.ts b/WebUI/src/assets/js/store/comfyUi.ts
index bd6a91fe..259d5c0a 100644
--- a/WebUI/src/assets/js/store/comfyUi.ts
+++ b/WebUI/src/assets/js/store/comfyUi.ts
@@ -263,9 +263,10 @@ export const useComfyUi = defineStore(
                   msg.data?.output?.images?.find((i: { type: string }) => i.type === 'output')
                 const gifFromOutput: {
                   filename: string
-                  workflow_name: string
+                  workflow: string
                   type: string
                   subfolder: string
+                  format: string
                 } = msg.data?.output?.gifs?.find((i: { type: string }) => i.type === 'output')
                 const currentImage = queuedImages[generateIdx]
                 let newImage: Media
@@ -280,8 +281,9 @@ export const useComfyUi = defineStore(
                   newImage = {
                     ...currentImage,
                     state: 'done',
-                    imageUrl: `${comfyBaseUrl.value}/view?filename=${gifFromOutput.filename}&type=${gifFromOutput.type}&subfolder=${gifFromOutput.subfolder ?? ''}`,
-                    videoUrl: `${comfyBaseUrl.value}/view?filename=${gifFromOutput.workflow_name}&type=${gifFromOutput.type}&subfolder=${gifFromOutput.subfolder ?? ''}`,
+                    imageUrl: `${comfyBaseUrl.value}/view?filename=${gifFromOutput.workflow}&type=${gifFromOutput.type}&subfolder=${gifFromOutput.subfolder ?? ''}`,
+                    videoUrl: `${comfyBaseUrl.value}/view?filename=${gifFromOutput.filename}&type=${gifFromOutput.type}&subfolder=${gifFromOutput.subfolder ?? ''}`,
+                    videoFormat: gifFromOutput.format,
                   }
                 }
                 imageGeneration.updateImage(newImage!)
diff --git a/WebUI/src/views/Create.vue b/WebUI/src/views/Create.vue
index e160f381..5755fe7c 100644
--- a/WebUI/src/views/Create.vue
+++ b/WebUI/src/views/Create.vue
@@ -43,7 +43,9 @@
           >
             <!-- eslint-enable -->
             <img v-if="!isVideo(image)" :src="image.imageUrl" />
-            <video v-else :src="image.videoUrl" :type="image.videoFormat" />
+            <video v-else>
+              <source :src="image.videoUrl" :type="image.videoFormat" />
+            </video>
           </div>
           <div
             v-show="imageGeneration.processing"