feat: add video display in Create.vue and let comfyUi.ts process vide…

…os III Signed-off-by: julianbollig <julian.bollig@tngtech.com>
TNG · Feb 24, 2025 · 452395e · 452395e
1 parent c562d59
commit 452395e
Show file tree

Hide file tree

Showing 3 changed files with 3 additions and 16 deletions.
diff --git a/WebUI/external/workflows/Video.json b/WebUI/external/workflows/Video.json
@@ -272,18 +272,6 @@
         "title": "CLIPLoader (GGUF)"
       }
     },
-    "112": {
-      "inputs": {
-        "images": [
-          "8",
-          0
-        ]
-      },
-      "class_type": "PreviewImage",
-      "_meta": {
-        "title": "Preview Image"
-      }
-    },
     "115": {
       "inputs": {
         "a": 25

diff --git a/WebUI/src/assets/js/store/comfyUi.ts b/WebUI/src/assets/js/store/comfyUi.ts
@@ -283,7 +283,7 @@ export const useComfyUi = defineStore(
                     state: 'done',
                     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,
+                    videoFormat: gifFromOutput.format.replace('video/h264-mp4', 'video/mp4'), // 'video/h264-mp4' is not a valid MIME type
                   }
                 }
                 imageGeneration.updateImage(newImage!)

diff --git a/WebUI/src/views/Create.vue b/WebUI/src/views/Create.vue
@@ -38,12 +38,11 @@
           <!-- eslint-disable vue/require-v-for-key -->
           <div
             v-for="image in imageGeneration.generatedImages"
-            class="p-1 max-w-768px max-h-512px"
             v-show="selectedImageId === image.id"
           >
             <!-- eslint-enable -->
-            <img v-if="!isVideo(image)" :src="image.imageUrl" />
-            <video v-else>
+            <img class="p-1 max-w-768px max-h-512px" v-if="!isVideo(image)" :src="image.imageUrl" />
+            <video class="p-1 max-w-768px max-h-512px" v-else controls>
               <source :src="image.videoUrl" :type="image.videoFormat" />
             </video>
           </div>