Comfy-Org/ComfyUI_frontend
1
0
Fork 0
mirror of https://github.com/Comfy-Org/ComfyUI_frontend.git synced 2026-04-29 02:32:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix VHS advanced preview html video type (#1186)

Browse Source 
* Fix VHS advanced preview html video type

* nit
This commit is contained in:
Chenlei Hu
2024-10-09 15:02:02 -04:00
committed by GitHub
parent 165604bb80
commit c8f50509ed
2 changed files with 20 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/components/sidebar/tabs/queue/ResultVideo.vue
View File

@@ -1,6 +1,6 @@
<template> <template>
<video controls width="100%" height="100%"> <video controls width="100%" height="100%">
<source :src="url" :type="result.htmlVideoType" /> <source :src="url" :type="htmlVideoType" />
{{ $t('videoFailedToLoad') }} {{ $t('videoFailedToLoad') }}
</video> </video>
</template> </template>
@@ -15,10 +15,16 @@ const props = defineProps<{
}>() }>()
const settingStore = useSettingStore() const settingStore = useSettingStore()
const url = computed(() => { const vhsAdvancedPreviews = computed(() =>
if (settingStore.get('VHS.AdvancedPreviews')) { settingStore.get('VHS.AdvancedPreviews')
return props.result.vhsAdvancedPreviewUrl )
}
return props.result.url const url = computed(() =>
}) vhsAdvancedPreviews.value
? props.result.vhsAdvancedPreviewUrl
: props.result.url
)
const htmlVideoType = computed(() =>
vhsAdvancedPreviews.value ? 'video/webm' : props.result.htmlVideoType
)
</script> </script>

8
src/stores/queueStore.ts
View File

@@ -67,6 +67,8 @@ export class ResultItemImpl {
/** /**
* VHS advanced preview URL. `/viewvideo` endpoint is provided by VHS node. * VHS advanced preview URL. `/viewvideo` endpoint is provided by VHS node.
*
* `/viewvideo` always returns a webm file.
*/ */
get vhsAdvancedPreviewUrl(): string { get vhsAdvancedPreviewUrl(): string {
return api.apiURL('/viewvideo?' + this.urlParams) return api.apiURL('/viewvideo?' + this.urlParams)
@@ -108,8 +110,12 @@ export class ResultItemImpl {
return this.filename.endsWith('.gif') return this.filename.endsWith('.gif')
} }
get isWebp(): boolean {
return this.filename.endsWith('.webp')
}
get isImage(): boolean { get isImage(): boolean {
return this.mediaType === 'images' || this.isGif return this.mediaType === 'images' || this.isGif || this.isWebp
} }
get supportsPreview(): boolean { get supportsPreview(): boolean {