sebastjan/videofolxtv
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Make video player and details centered and larger on the page

Browse Source 
Adjusted layout in BunnyVideoModal to center the video player and its associated text content within a larger maximum width container, and increased text sizes for better readability.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 074b0e4c-6171-43bd-aa98-f9e04623ca14
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/074b0e4c-6171-43bd-aa98-f9e04623ca14/QQTyNAb
This commit is contained in:
sebastjanartic 2025-08-30 16:25:00 +00:00
parent 4ef2883c54
commit 7fa619e261
1 changed files with 8 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
client/src/components/bunny-video-modal.tsx
View File

@ -256,9 +256,9 @@ export default function BunnyVideoModal({ video, isOpen, onClose, onEdit, videos
</div>
{/* Video player area */}
<div className="flex-1 flex flex-col gap-2 min-h-0">
{/* Main video player */}
<div className="w-full">
<div className="flex-1 flex flex-col gap-4 min-h-0">
{/* Main video player - limited width */}
<div className="w-full max-w-4xl mx-auto">
<div className="relative w-full aspect-video bg-black rounded-lg overflow-hidden">
{video.videoUrlIframe ? (
<iframe
@ -300,14 +300,14 @@ export default function BunnyVideoModal({ video, isOpen, onClose, onEdit, videos
</div>
</div>
{/* Video info always below video */}
<div className="w-full mt-0">
<div className="p-3 bg-gray-800 rounded-lg text-white max-h-none overflow-visible">
<h3 className="font-bold text-lg mb-2 whitespace-normal break-words" data-testid="text-video-title">
{/* Video info below video - centered */}
<div className="w-full max-w-4xl mx-auto">
<div className="p-4 bg-gray-800 rounded-lg text-white">
<h3 className="font-bold text-xl mb-3 whitespace-normal break-words" data-testid="text-video-title">
{video.title}
</h3>
<div className="flex flex-wrap gap-4 text-sm text-gray-300 mb-3">
<div className="flex flex-wrap gap-4 text-sm text-gray-300 mb-4">
<span data-testid="text-video-views">{formatViews(video.views)}</span>
<span data-testid="text-video-duration">{formatDuration(video.duration)}</span>
<span data-testid="text-video-date">{formatDate(video.createdAt)}</span>