mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-04-20 14:30:41 +00:00
348d674455
Backport of #7938 to `cloud/1.36` Automatically created by backport workflow. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-7943-backport-cloud-1-36-fix-Model-upload-UI-improvements-2e46d73d365081fcadd1f71e7fa012d6) by [Unito](https://www.unito.io) Co-authored-by: Alexander Brown <drjkl@comfy.org> Co-authored-by: Amp <amp@ampcode.com> Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
78 lines
1.8 KiB
Vue
78 lines
1.8 KiB
Vue
<template>
|
|
<Dialog
|
|
v-model:visible="isVisible"
|
|
modal
|
|
:closable="false"
|
|
:close-on-escape="false"
|
|
:dismissable-mask="true"
|
|
:pt="{
|
|
root: { class: 'video-help-dialog' },
|
|
header: { class: '!hidden' },
|
|
content: { class: '!p-0' },
|
|
mask: { class: '!bg-black/70' }
|
|
}"
|
|
:style="{ width: '90vw' }"
|
|
>
|
|
<div class="relative">
|
|
<Button
|
|
variant="textonly"
|
|
size="icon"
|
|
class="absolute top-4 right-6 z-10"
|
|
:aria-label="$t('g.close')"
|
|
@click="isVisible = false"
|
|
>
|
|
<i class="pi pi-times text-sm" />
|
|
</Button>
|
|
<video
|
|
autoplay
|
|
muted
|
|
loop
|
|
:aria-label="ariaLabel"
|
|
class="w-full rounded-lg"
|
|
:src="videoUrl"
|
|
>
|
|
{{ $t('g.videoFailedToLoad') }}
|
|
</video>
|
|
</div>
|
|
</Dialog>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { useEventListener } from '@vueuse/core'
|
|
import Dialog from 'primevue/dialog'
|
|
import { onWatcherCleanup, watch } from 'vue'
|
|
|
|
import Button from '@/components/ui/button/Button.vue'
|
|
|
|
const isVisible = defineModel<boolean>({ required: true })
|
|
|
|
const { videoUrl, ariaLabel = 'Help video' } = defineProps<{
|
|
videoUrl: string
|
|
ariaLabel?: string
|
|
}>()
|
|
|
|
const handleEscapeKey = (event: KeyboardEvent) => {
|
|
if (event.key === 'Escape') {
|
|
event.stopImmediatePropagation()
|
|
event.stopPropagation()
|
|
event.preventDefault()
|
|
isVisible.value = false
|
|
}
|
|
}
|
|
|
|
// Add listener with capture phase to intercept before parent dialogs
|
|
// Only active when dialog is visible
|
|
watch(
|
|
isVisible,
|
|
(visible) => {
|
|
if (visible) {
|
|
const stop = useEventListener(document, 'keydown', handleEscapeKey, {
|
|
capture: true
|
|
})
|
|
onWatcherCleanup(stop)
|
|
}
|
|
},
|
|
{ immediate: true }
|
|
)
|
|
</script>
|