[feat] Add video help dialog to Upload Model flow

src/locales/en/main.json

@@ -2113,6 +2113,8 @@
     "uploadingModel": "Importing model...",
     "uploadSuccess": "Model imported successfully!",
     "uploadFailed": "Import failed",
+    "uploadModelHelpVideo": "Upload Model Help Video",
+    "uploadModelHowDoIFindThis": "How do I find this?",
     "modelAssociatedWithLink": "The model associated with the link you provided:",
     "modelTypeSelectorLabel": "What type of model is this?",
     "modelTypeSelectorPlaceholder": "Select model type",

src/platform/assets/components/UploadModelFooter.vue

@@ -1,18 +1,18 @@
 <template>
   <div class="flex justify-end gap-2 w-full">
-    <span
+    <IconTextButton
       v-if="currentStep === 1"
-      class="text-muted-foreground mr-auto underline flex items-center gap-2"
+      :label="$t('assetBrowser.uploadModelHowDoIFindThis')"
+      type="transparent"
+      size="md"
+      class="mr-auto underline text-muted-foreground"
+      data-attr="upload-model-step1-help-link"
+      @click="showVideoHelp = true"
     >
-      <i class="icon-[lucide--circle-question-mark]" />
-      <a
-        href="#"
-        target="_blank"
-        class="text-muted-foreground"
-        data-attr="upload-model-step1-help-link"
-        >{{ $t('How do I find this?') }}</a
-      >
-    </span>
+      <template #icon>
+        <i class="icon-[lucide--circle-question-mark]" />
+      </template>
+    </IconTextButton>
     <TextButton
       v-if="currentStep === 1"
       :label="$t('g.cancel')"
@@ -73,12 +73,22 @@
       data-attr="upload-model-step3-finish-button"
       @click="emit('close')"
     />
+    <VideoHelpDialog
+      v-model="showVideoHelp"
+      video-url="https://media.comfy.org/compressed_768/civitai_howto.webm"
+      :aria-label="$t('assetBrowser.uploadModelHelpVideo')"
+    />
   </div>
 </template>
 
 <script setup lang="ts">
+import { ref } from 'vue'
+
 import IconTextButton from '@/components/button/IconTextButton.vue'
 import TextButton from '@/components/button/TextButton.vue'
+import VideoHelpDialog from '@/platform/assets/components/VideoHelpDialog.vue'
+
+const showVideoHelp = ref(false)
 
 defineProps<{
   currentStep: number

src/platform/assets/components/VideoHelpDialog.vue

@@ -0,0 +1,75 @@
+<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', maxWidth: '800px' }"
+  >
+    <div class="relative">
+      <IconButton
+        class="absolute top-4 right-6 z-10"
+        :aria-label="$t('g.close')"
+        @click="isVisible = false"
+      >
+        <i class="pi pi-times text-sm" />
+      </IconButton>
+      <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 IconButton from '@/components/button/IconButton.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>