Fix/vue nodes video (#5870)

## Summary

Fix the video preview widget and associated dropdown to load and select
videos.

Fixes:
-
https://www.notion.so/comfy-org/Video-thumbnails-not-being-used-in-asset-explorer-dialog-27e6d73d365080ec8a3ee7c7ec413657?source=copy_link
-
https://www.notion.so/comfy-org/Image-Video-upload-dialog-doesnt-set-mime-type-27e6d73d365080c5bffdf08842855ba0?source=copy_link
-
https://www.notion.so/comfy-org/Video-Previews-are-not-displayed-2756d73d365080b2bfb9e0004e9d784d?source=copy_link
-
https://www.notion.so/comfy-org/Cannot-load-video-in-Load-Video-node-2756d73d365080009c21d3a67add96c4?source=copy_link

## Screenshots (if applicable)


https://github.com/user-attachments/assets/b71dbecb-c9a7-4feb-83a3-c3e044a9c93c

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-5870-Fix-vue-nodes-video-27e6d73d36508182b44bef8e90ef4018)
by [Unito](https://www.unito.io)

---------

Co-authored-by: JakeSchroeder <jake@axiom.co>
Co-authored-by: github-actions <github-actions@github.com>
Co-authored-by: Jake Schroeder <jake.schroeder@isophex.com>
Co-authored-by: Rizumu Ayaka <rizumu@ayaka.moe>

src/renderer/extensions/vueNodes/widgets/components/WidgetSelectDropdown.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, ref, watch } from 'vue'
+import { computed, provide, ref, watch } from 'vue'
 
 import { useWidgetValue } from '@/composables/graph/useWidgetValue'
 import { useTransformCompatOverlayProps } from '@/composables/useTransformCompatOverlayProps'
@@ -16,10 +16,11 @@ import {
 } from '@/utils/widgetPropFilter'
 
 import FormDropdown from './form/dropdown/FormDropdown.vue'
-import type {
-  DropdownItem,
-  FilterOption,
-  SelectedKey
+import {
+  AssetKindKey,
+  type DropdownItem,
+  type FilterOption,
+  type SelectedKey
 } from './form/dropdown/types'
 import WidgetLayoutField from './layout/WidgetLayoutField.vue'
 
@@ -31,6 +32,11 @@ const props = defineProps<{
   uploadFolder?: ResultItemType
 }>()
 
+provide(
+  AssetKindKey,
+  computed(() => props.assetKind)
+)
+
 const emit = defineEmits<{
   'update:modelValue': [value: string | number | undefined]
 }>()
@@ -69,7 +75,7 @@ const inputItems = computed<DropdownItem[]>(() => {
 
   return values.map((value: string, index: number) => ({
     id: `input-${index}`,
-    imageSrc: getMediaUrl(value, 'input'),
+    mediaSrc: getMediaUrl(value, 'input'),
     name: value,
     metadata: ''
   }))
@@ -99,7 +105,7 @@ const outputItems = computed<DropdownItem[]>(() => {
 
   return Array.from(outputs).map((output, index) => ({
     id: `output-${index}`,
-    imageSrc: getMediaUrl(output.replace(' [output]', ''), 'output'),
+    mediaSrc: getMediaUrl(output.replace(' [output]', ''), 'output'),
     name: output,
     metadata: ''
   }))
@@ -145,6 +151,21 @@ const mediaPlaceholder = computed(() => {
 
 const uploadable = computed(() => props.allowUpload === true)
 
+const acceptTypes = computed(() => {
+  // Be permissive with accept types because backend uses libraries
+  // that can handle a wide range of formats
+  switch (props.assetKind) {
+    case 'image':
+      return 'image/*'
+    case 'video':
+      return 'video/*'
+    case 'audio':
+      return 'audio/*'
+    default:
+      return undefined // model or unknown
+  }
+})
+
 watch(
   localValue,
   (currentValue) => {
@@ -269,6 +290,7 @@ function getMediaUrl(
       :placeholder="mediaPlaceholder"
       :multiple="false"
       :uploadable="uploadable"
+      :accept="acceptTypes"
       :filter-options="filterOptions"
       v-bind="combinedProps"
       class="w-full"