mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-03-11 08:00:21 +00:00
fix: disable inspect for non-previewable assets (#8989)
## Summary Prevent text/other assets from opening a blank fullscreen viewer by restricting inspect/zoom to previewable media kinds. ## Changes - Add `isPreviewableMediaType` helper in shared `formatUtil`. - Gate inspect/zoom actions in `AssetsSidebarTab`, `MediaAssetCard`, and `MediaAssetContextMenu` using an allowlist (`image`, `video`, `audio`, `3D`). - Build gallery items from previewable assets only. - Add unit tests for `isPreviewableMediaType`. ## Why `ResultGallery` only renders image/video/audio; text/other assets could previously enter fullscreen with no renderable content. ## Review Focus - Verify text/other assets no longer show Inspect and do not open fullscreen. - Verify image/video/audio behavior is unchanged. - Verify 3D still opens the 3D viewer dialog. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-8989-fix-disable-inspect-for-non-previewable-assets-30c6d73d36508103a9b9da4fe50236ea) by [Unito](https://www.unito.io) --------- Co-authored-by: Johnpaul Chiwetelu <49923152+Myestery@users.noreply.github.com> Co-authored-by: GitHub Action <action@github.com>
This commit is contained in:
@@ -59,6 +59,7 @@
|
||||
>
|
||||
<IconGroup background-class="bg-white">
|
||||
<Button
|
||||
v-if="canInspect"
|
||||
variant="overlay-white"
|
||||
size="icon"
|
||||
:aria-label="$t('mediaAsset.actions.zoom')"
|
||||
@@ -141,7 +142,8 @@ import {
|
||||
formatDuration,
|
||||
formatSize,
|
||||
getFilenameDetails,
|
||||
getMediaTypeFromFilename
|
||||
getMediaTypeFromFilename,
|
||||
isPreviewableMediaType
|
||||
} from '@/utils/formatUtil'
|
||||
import { cn } from '@/utils/tailwindUtil'
|
||||
|
||||
@@ -217,6 +219,8 @@ const previewKind = computed((): PreviewKind => {
|
||||
return getMediaTypeFromFilename(asset?.name || '')
|
||||
})
|
||||
|
||||
const canInspect = computed(() => isPreviewableMediaType(fileKind.value))
|
||||
|
||||
// Get filename without extension
|
||||
const fileName = computed(() => {
|
||||
return getFilenameDetails(asset?.name || '').filename
|
||||
@@ -278,7 +282,7 @@ const showActionsOverlay = computed(() => {
|
||||
})
|
||||
|
||||
const handleZoomClick = () => {
|
||||
if (asset) {
|
||||
if (asset && canInspect.value) {
|
||||
emit('zoom', asset)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -39,6 +39,7 @@ import { useI18n } from 'vue-i18n'
|
||||
import Button from '@/components/ui/button/Button.vue'
|
||||
import { isCloud } from '@/platform/distribution/types'
|
||||
import { supportsWorkflowMetadata } from '@/platform/workflow/utils/workflowExtractionUtil'
|
||||
import { isPreviewableMediaType } from '@/utils/formatUtil'
|
||||
import { detectNodeTypeFromFilename } from '@/utils/loaderNodeUtil'
|
||||
import { cn } from '@/utils/tailwindUtil'
|
||||
|
||||
@@ -206,8 +207,8 @@ const contextMenuItems = computed<MenuItem[]>(() => {
|
||||
|
||||
// Individual mode: Show all menu options
|
||||
|
||||
// Inspect (if not 3D)
|
||||
if (fileKind !== '3D') {
|
||||
// Inspect
|
||||
if (isPreviewableMediaType(fileKind)) {
|
||||
items.push({
|
||||
label: t('mediaAsset.actions.inspect'),
|
||||
icon: 'icon-[lucide--zoom-in]',
|
||||
|
||||
Reference in New Issue
Block a user