From aa3622d6065a5edd3e5615e39a3d81a75d69828e Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Sat, 23 Aug 2025 03:14:06 -0400
Subject: [PATCH] feat: add video playback UI and thumbnail display
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add video player with controls in MediaDetailsModal
- Display video metadata (duration, codecs, bitrate) in metadata panel
- Show video thumbnails with play icon overlay in MediaGrid
- Support video preview in upload components
- Replace emoji icons with SVG play icon
- Maintain natural video aspect ratio in all views
- Add proper styling for video thumbnails and placeholders

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../components/admin/FilePreviewList.svelte   |  4 +-
 .../components/admin/MediaDetailsModal.svelte | 28 ++++++-
 src/lib/components/admin/MediaGrid.svelte     | 74 ++++++++++++++++++-
 .../admin/MediaMetadataPanel.svelte           | 29 +++++++-
 .../components/admin/MediaUploadModal.svelte  | 17 +++--
 src/routes/admin/media/+page.svelte           | 67 ++++++++++++++++-
 src/routes/admin/media/upload/+page.svelte    | 20 +++--
 7 files changed, 218 insertions(+), 21 deletions(-)

diff --git a/src/lib/components/admin/FilePreviewList.svelte b/src/lib/components/admin/FilePreviewList.svelte
index 2635325..1cc3715 100644
--- a/src/lib/components/admin/FilePreviewList.svelte
+++ b/src/lib/components/admin/FilePreviewList.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { formatFileSize, isImageFile } from '$lib/utils/mediaHelpers'
+	import { formatFileSize, isImageFile, isVideoFile } from '$lib/utils/mediaHelpers'
 	import type { Media } from '@prisma/client'
 
 	interface FilePreview {
@@ -85,6 +85,8 @@
 			<div class="file-preview">
 				{#if isImageFile(preview.type)}
 					<img src={preview.url} alt={preview.name} />
+				{:else if isVideoFile(preview.type)}
+					<div class="file-icon">🎬</div>
 				{:else}
 					<div class="file-icon">📄</div>
 				{/if}
diff --git a/src/lib/components/admin/MediaDetailsModal.svelte b/src/lib/components/admin/MediaDetailsModal.svelte
index 2c8687a..25592a5 100644
--- a/src/lib/components/admin/MediaDetailsModal.svelte
+++ b/src/lib/components/admin/MediaDetailsModal.svelte
@@ -13,7 +13,7 @@
 	import MediaUsageList from './MediaUsageList.svelte'
 	import { authenticatedFetch } from '$lib/admin-auth'
 	import { toast } from '$lib/stores/toast'
-	import { formatFileSize, getFileType } from '$lib/utils/mediaHelpers'
+	import { formatFileSize, getFileType, isVideoFile } from '$lib/utils/mediaHelpers'
 	import type { Media } from '@prisma/client'
 
 	interface Props {
@@ -214,12 +214,19 @@
 		showCloseButton={false}
 	>
 		<div class="media-details-modal">
-			<!-- Left Pane - Image Preview -->
+			<!-- Left Pane - Media Preview -->
 			<div class="image-pane">
 				{#if media.mimeType.startsWith('image/')}
 					<div class="image-container">
 						<SmartImage {media} alt={media.description || media.filename} class="preview-image" />
 					</div>
+				{:else if isVideoFile(media.mimeType)}
+					<div class="video-container">
+						<video controls poster={media.thumbnailUrl || undefined} class="preview-video">
+							<source src={media.url} type={media.mimeType} />
+							Your browser does not support the video tag.
+						</video>
+					</div>
 				{:else}
 					<div class="file-placeholder">
 						<FileIcon size={64} />
@@ -386,6 +393,23 @@
 			}
 		}
 
+		.video-container {
+			max-width: 90%;
+			position: relative;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+
+			.preview-video {
+				width: 100%;
+				height: auto;
+				max-width: 100%;
+				object-fit: contain;
+				background: #000;
+				border-radius: $corner-radius-md;
+			}
+		}
+
 		.file-placeholder {
 			display: flex;
 			flex-direction: column;
diff --git a/src/lib/components/admin/MediaGrid.svelte b/src/lib/components/admin/MediaGrid.svelte
index 74596ab..0af3846 100644
--- a/src/lib/components/admin/MediaGrid.svelte
+++ b/src/lib/components/admin/MediaGrid.svelte
@@ -1,7 +1,8 @@
 <script lang="ts">
 	import SmartImage from '../SmartImage.svelte'
 	import FileIcon from '../icons/FileIcon.svelte'
-	import { isImageFile } from '$lib/utils/mediaHelpers'
+	import PlayIcon from '$icons/play.svg?component'
+	import { isImageFile, isVideoFile } from '$lib/utils/mediaHelpers'
 	import type { Media } from '@prisma/client'
 
 	interface Props {
@@ -86,6 +87,25 @@
 								class="media-image {item.mimeType === 'image/svg+xml' ? 'svg-image' : ''}"
 								containerWidth={150}
 							/>
+						{:else if isVideoFile(item.mimeType)}
+							{#if item.thumbnailUrl}
+								<div class="video-thumbnail-wrapper">
+									<img 
+										src={item.thumbnailUrl} 
+										alt={item.filename}
+										loading={i < 8 ? 'eager' : 'lazy'}
+										class="media-image video-thumbnail"
+									/>
+									<div class="video-overlay">
+										<PlayIcon class="play-icon" />
+									</div>
+								</div>
+							{:else}
+								<div class="media-placeholder video-placeholder">
+									<PlayIcon class="video-icon" />
+									<span class="video-label">Video</span>
+								</div>
+							{/if}
 						{:else}
 							<div class="media-placeholder">
 								<FileIcon size={32} />
@@ -204,6 +224,40 @@
 		}
 	}
 
+	.video-thumbnail-wrapper {
+		width: 100%;
+		height: 100%;
+		position: relative;
+		
+		.video-thumbnail {
+			width: 100%;
+			height: 100%;
+			object-fit: cover;
+		}
+		
+		.video-overlay {
+			position: absolute;
+			top: 50%;
+			left: 50%;
+			transform: translate(-50%, -50%);
+			background: rgba(0, 0, 0, 0.7);
+			border-radius: 50%;
+			width: 40px;
+			height: 40px;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			pointer-events: none;
+			
+			:global(.play-icon) {
+				width: 20px;
+				height: 20px;
+				color: white;
+				margin-left: -2px;
+			}
+		}
+	}
+	
 	.media-placeholder {
 		width: 100%;
 		height: 100%;
@@ -211,6 +265,24 @@
 		align-items: center;
 		justify-content: center;
 		color: $gray-60;
+		
+		&.video-placeholder {
+			flex-direction: column;
+			gap: $unit;
+			
+			:global(.video-icon) {
+				width: 32px;
+				height: 32px;
+				color: $gray-60;
+			}
+			
+			.video-label {
+				font-size: 12px;
+				color: $gray-50;
+				text-transform: uppercase;
+				letter-spacing: 0.5px;
+			}
+		}
 	}
 
 	.hover-overlay {
diff --git a/src/lib/components/admin/MediaMetadataPanel.svelte b/src/lib/components/admin/MediaMetadataPanel.svelte
index 12b44c8..acf563d 100644
--- a/src/lib/components/admin/MediaMetadataPanel.svelte
+++ b/src/lib/components/admin/MediaMetadataPanel.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import Button from './Button.svelte'
-	import { formatFileSize, getFileType } from '$lib/utils/mediaHelpers'
+	import { formatFileSize, getFileType, isVideoFile, formatDuration, formatBitrate } from '$lib/utils/mediaHelpers'
 	import type { Media } from '@prisma/client'
 
 	interface Props {
@@ -36,7 +36,32 @@
 						<span class="value">{media.width} × {media.height}px</span>
 					</div>
 				{/if}
-				{#if media.dominantColor}
+				{#if isVideoFile(media.mimeType)}
+					{#if media.duration}
+						<div class="info-item">
+							<span class="label">Duration</span>
+							<span class="value">{formatDuration(media.duration)}</span>
+						</div>
+					{/if}
+					{#if media.videoCodec}
+						<div class="info-item">
+							<span class="label">Video Codec</span>
+							<span class="value">{media.videoCodec.toUpperCase()}</span>
+						</div>
+					{/if}
+					{#if media.audioCodec}
+						<div class="info-item">
+							<span class="label">Audio Codec</span>
+							<span class="value">{media.audioCodec.toUpperCase()}</span>
+						</div>
+					{/if}
+					{#if media.bitrate}
+						<div class="info-item">
+							<span class="label">Bitrate</span>
+							<span class="value">{formatBitrate(media.bitrate)}</span>
+						</div>
+					{/if}
+				{:else if media.dominantColor}
 					<div class="info-item">
 						<span class="label">Dominant Color</span>
 						<span class="value color-value">
diff --git a/src/lib/components/admin/MediaUploadModal.svelte b/src/lib/components/admin/MediaUploadModal.svelte
index 3b9f0ff..558665d 100644
--- a/src/lib/components/admin/MediaUploadModal.svelte
+++ b/src/lib/components/admin/MediaUploadModal.svelte
@@ -37,17 +37,19 @@
 	}
 
 	function addFiles(newFiles: File[]) {
-		// Filter for image files
-		const imageFiles = newFiles.filter((file) => file.type.startsWith('image/'))
+		// Filter for supported file types (images and videos)
+		const supportedFiles = newFiles.filter(
+			(file) => file.type.startsWith('image/') || file.type.startsWith('video/')
+		)
 
-		if (imageFiles.length !== newFiles.length) {
+		if (supportedFiles.length !== newFiles.length) {
 			uploadErrors = [
 				...uploadErrors,
-				`${newFiles.length - imageFiles.length} non-image files were skipped`
+				`${newFiles.length - supportedFiles.length} unsupported files were skipped`
 			]
 		}
 
-		files = [...files, ...imageFiles]
+		files = [...files, ...supportedFiles]
 	}
 
 	function removeFile(id: string | number) {
@@ -149,7 +151,7 @@
 			<!-- Drop Zone (compact when files are selected) -->
 			<FileUploadZone
 				onFilesAdded={handleFilesAdded}
-				accept={['image/*']}
+				accept={['image/*', 'video/*']}
 				multiple={true}
 				compact={files.length > 0}
 				disabled={isUploading}
@@ -221,6 +223,9 @@
 
 	.modal-inner-content {
 		padding: $unit $unit-3x $unit-3x;
+		display: flex;
+		flex-direction: column;
+		gap: $unit-2x;
 		flex: 1;
 		overflow-y: auto;
 	}
diff --git a/src/routes/admin/media/+page.svelte b/src/routes/admin/media/+page.svelte
index e067f53..bc2e2fa 100644
--- a/src/routes/admin/media/+page.svelte
+++ b/src/routes/admin/media/+page.svelte
@@ -12,7 +12,8 @@
 	import MediaDetailsModal from '$lib/components/admin/MediaDetailsModal.svelte'
 	import MediaUploadModal from '$lib/components/admin/MediaUploadModal.svelte'
 	import AlbumSelectorModal from '$lib/components/admin/AlbumSelectorModal.svelte'
-	import ChevronDown from '$icons/chevron-down.svg'
+	import ChevronDown from '$icons/chevron-down.svg?component'
+	import PlayIcon from '$icons/play.svg?component'
 	import type { Media } from '@prisma/client'
 
 	let media = $state<Media[]>([])
@@ -157,6 +158,10 @@
 		return 'File'
 	}
 
+	function isVideoFile(mimeType: string): boolean {
+		return mimeType.startsWith('video/')
+	}
+
 	function handleMediaClick(item: Media) {
 		selectedMedia = item
 		isDetailsModalOpen = true
@@ -543,6 +548,20 @@
 									src={item.mimeType === 'image/svg+xml' ? item.url : item.thumbnailUrl || item.url}
 									alt={item.description || item.filename}
 								/>
+							{:else if isVideoFile(item.mimeType)}
+								{#if item.thumbnailUrl}
+									<div class="video-thumbnail-wrapper">
+										<img src={item.thumbnailUrl} alt={item.description || item.filename} />
+										<div class="video-overlay">
+											<PlayIcon class="play-icon" />
+										</div>
+									</div>
+								{:else}
+									<div class="file-placeholder video-placeholder">
+										<PlayIcon class="video-icon" />
+										<span class="file-type">Video</span>
+									</div>
+								{/if}
 							{:else}
 								<div class="file-placeholder">
 									<span class="file-type">{getFileType(item.mimeType)}</span>
@@ -746,6 +765,41 @@
 			object-fit: cover;
 		}
 
+		.video-thumbnail-wrapper {
+			width: 100%;
+			height: 150px;
+			position: relative;
+			overflow: hidden;
+
+			img {
+				width: 100%;
+				height: 100%;
+				object-fit: cover;
+			}
+
+			.video-overlay {
+				position: absolute;
+				top: 50%;
+				left: 50%;
+				transform: translate(-50%, -50%);
+				background: rgba(0, 0, 0, 0.7);
+				border-radius: 50%;
+				width: 40px;
+				height: 40px;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				pointer-events: none;
+
+				:global(.play-icon) {
+					width: 20px;
+					height: 20px;
+					color: white;
+					margin-left: -2px;
+				}
+			}
+		}
+
 		.file-placeholder {
 			width: 100%;
 			height: 150px;
@@ -754,6 +808,17 @@
 			justify-content: center;
 			background: $gray-90;
 
+			&.video-placeholder {
+				flex-direction: column;
+				gap: $unit;
+
+				:global(.video-icon) {
+					width: 24px;
+					height: 24px;
+					color: $gray-60;
+				}
+			}
+
 			.file-type {
 				font-size: 0.875rem;
 				color: $gray-40;
diff --git a/src/routes/admin/media/upload/+page.svelte b/src/routes/admin/media/upload/+page.svelte
index 3913ea4..53b7952 100644
--- a/src/routes/admin/media/upload/+page.svelte
+++ b/src/routes/admin/media/upload/+page.svelte
@@ -45,17 +45,19 @@
 	}
 
 	function addFiles(newFiles: File[]) {
-		// Filter for image files
-		const imageFiles = newFiles.filter((file) => file.type.startsWith('image/'))
+		// Filter for supported file types (images and videos)
+		const supportedFiles = newFiles.filter((file) => 
+			file.type.startsWith('image/') || file.type.startsWith('video/')
+		)
 
-		if (imageFiles.length !== newFiles.length) {
+		if (supportedFiles.length !== newFiles.length) {
 			uploadErrors = [
 				...uploadErrors,
-				`${newFiles.length - imageFiles.length} non-image files were skipped`
+				`${newFiles.length - supportedFiles.length} unsupported files were skipped`
 			]
 		}
 
-		files = [...files, ...imageFiles]
+		files = [...files, ...supportedFiles]
 	}
 
 	function removeFile(index: number) {
@@ -197,6 +199,8 @@
 							<div class="file-preview">
 								{#if file.type.startsWith('image/')}
 									<img src={URL.createObjectURL(file)} alt={file.name} />
+								{:else if file.type.startsWith('video/')}
+									<div class="file-icon">🎬</div>
 								{:else}
 									<div class="file-icon">📄</div>
 								{/if}
@@ -317,9 +321,9 @@
 							/>
 						</svg>
 					</div>
-					<h3>Drop images here</h3>
+					<h3>Drop media files here</h3>
 					<p>or click to browse and select files</p>
-					<p class="upload-hint">Supports JPG, PNG, GIF, WebP, and SVG files</p>
+					<p class="upload-hint">Images: JPG, PNG, GIF, WebP, SVG | Videos: WebM, MP4, OGG, MOV, AVI</p>
 				{:else}
 					<div class="compact-content">
 						<svg
@@ -358,7 +362,7 @@
 				bind:this={fileInput}
 				type="file"
 				multiple
-				accept="image/*"
+				accept="image/*,video/*"
 				onchange={handleFileSelect}
 				class="hidden-input"
 			/>