[feat] Add video help dialog to Upload Model flow (#7177)

## Summary
Adds an interactive video tutorial dialog to help users find CivitAI
model URLs during the Upload Model wizard.

## Changes
- **New Component**: Created reusable `VideoHelpDialog.vue` component
  - Full-width video player with floating close button
  - Configurable props: `videoUrl`, `loop`, `showControls`
  - Custom ESC key handling to prevent parent dialog from closing
  - Click backdrop to dismiss
  - 70% dark backdrop for better video focus
- **Upload Model Flow**: Integrated video help button in step 1 footer
  - "How do I find this?" button opens tutorial video
  - Video demonstrates finding model URLs on CivitAI
- PostHog tracking attribute maintained (`upload-model-step1-help-link`)

## Review Focus
- ESC key event handling uses capture phase to prevent propagation to
parent dialogs
- Component follows existing patterns from `MediaVideoTop.vue` and
`BaseModalLayout.vue`
- Video player accessibility (ARIA labels, keyboard navigation)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7177-feat-Add-video-help-dialog-to-Upload-Model-flow-2c06d73d36508148963ad9ee60038ea3)
by [Unito](https://www.unito.io)

---------

Co-authored-by: Claude <noreply@anthropic.com>
This commit is contained in:
Luke Mino-Altherr
2025-12-05 18:38:52 -08:00
committed by GitHub
parent 4bf766d451
commit 5db6d1af9a
3 changed files with 98 additions and 11 deletions

View File

@@ -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",