Add video card insert feature + MkDocs video hydration + fixes

- New video card block for GrapesJS landing pages, email templates,
  MkDocs export, and documentation editor Insert dropdown
- Shared HTML generators in admin/src/utils/videoCardHtml.ts
- MkDocs video-player.js hydrates .video-card-block elements:
  thumbnail fix via MEDIA_API_URL, click-to-play inline, Gallery link
- Media API CORS: auto-add MkDocs + docs subdomain origins
- env_config_hook.py: smart Docker hostname detection, ADMIN_PORT
  resolution, pass env vars to MkDocs container
- Gallery URL uses /gallery?expanded=ID format
- VideoPickerModal: fix double /api prefix and Docker hostname thumbs
- Seed: default-video-card PageBlock
- Remove V1 legacy code (influence/, map/)

Bunker Admin
This commit is contained in:
2026-02-17 15:42:32 -07:00
parent 58dc1942ec
commit 99a6abab06
1511 changed files with 14551 additions and 1625410 deletions

View File

@@ -102,14 +102,20 @@
/* Responsive video containers */
@media (max-width: 768px) {
.video-block,
.advanced-video-container {
.advanced-video-container,
.video-card-block {
margin: 1.5rem auto;
}
.video-block video,
.advanced-video-container video {
.advanced-video-container video,
.video-card-player video {
border-radius: 4px;
}
.video-card-block {
max-width: 100%;
}
}
/* Video placeholder (shown during GrapesJS export before hydration) */
@@ -138,9 +144,45 @@
margin: 0;
}
/* Video card block (YouTube-style preview card) */
.video-card-block {
margin: 2rem auto;
max-width: 480px;
cursor: pointer;
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.video-card-block:hover {
transform: translateY(-2px);
}
.video-card-block a {
text-decoration: none !important;
color: inherit !important;
}
/* Video card gallery button */
.video-card-gallery-btn:active {
transform: scale(0.96);
}
/* Video card inline player (after clicking thumbnail) */
.video-card-player video {
width: 100%;
display: block;
background: #000;
}
.video-card-player video:focus {
outline: 2px solid var(--md-primary-fg-color);
outline-offset: 2px;
}
/* Ensure videos respect content width in Material theme */
.md-content .video-block,
.md-content .advanced-video-container {
.md-content .advanced-video-container,
.md-content .video-card-block {
max-width: 100%;
}