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

Position video details below the video player for all screen sizes

Browse Source 
Adjusted layout in `bunny-video-modal.tsx` to ensure video title, views, duration, and description are consistently displayed below the video player by removing conditional rendering based on screen size and adjusting flex properties.

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:23:39 +00:00
parent c7d3b4fc09
commit 4ef2883c54
1 changed files with 5 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -256,9 +256,9 @@ export default function BunnyVideoModal({ video, isOpen, onClose, onEdit, videos
</div> </div>
{/* Video player area */} {/* Video player area */}
<div className="flex-1 flex flex-col lg:flex-row gap-2 min-h-0"> <div className="flex-1 flex flex-col gap-2 min-h-0">
{/* Main video player */} {/* Main video player */}
<div className="flex-1 flex flex-col"> <div className="w-full">
<div className="relative w-full aspect-video bg-black rounded-lg overflow-hidden"> <div className="relative w-full aspect-video bg-black rounded-lg overflow-hidden">
{video.videoUrlIframe ? ( {video.videoUrlIframe ? (
<iframe <iframe
@ -298,33 +298,10 @@ export default function BunnyVideoModal({ video, isOpen, onClose, onEdit, videos
</> </>
)} )}
</div> </div>
{/* Video info directly under video on mobile, sidebar on desktop */}
<div className="block lg:hidden 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.title}
</h3>
<div className="flex flex-wrap gap-4 text-sm text-gray-300 mb-3">
<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>
</div>
{video.description && (
<div className="text-sm text-gray-300">
<p className="leading-relaxed whitespace-pre-wrap break-words" data-testid="text-video-description">
{video.description}
</p>
</div>
)}
</div>
</div>
</div> </div>
{/* Video info sidebar - desktop only */} {/* Video info always below video */}
<div className="hidden lg:block lg:w-80 lg:min-w-80 space-y-0 overflow-y-auto lg:ml-4"> <div className="w-full mt-0">
<div className="p-3 bg-gray-800 rounded-lg text-white max-h-none overflow-visible"> <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"> <h3 className="font-bold text-lg mb-2 whitespace-normal break-words" data-testid="text-video-title">
{video.title} {video.title}