xorbitlab
/
nextav
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 1 Wiki Activity

refactor: enhance inline video player layout and styling 

- Updated the structure of the inline video player component for improved responsiveness and visual consistency.
- Adjusted CSS classes to better manage layout, including flex properties and spacing.
- Enhanced video info display with improved styling for title and path, ensuring better readability.
This commit is contained in:
tigeren 2025-08-26 03:47:53 +00:00
parent 6c58219ea0
commit 6892bfaeae
1 changed files with 12 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/components/inline-video-player.tsx
View File

@ -136,9 +136,9 @@ export default function InlineVideoPlayer({ video, isOpen, onClose, scrollPositi
if (!isOpen) return null;
return (
<div className={`fixed inset-0 z-50 bg-background transition-opacity duration-300 ${isVisible ? 'opacity-100' : 'opacity-0'}`}>
<div className={`fixed inset-0 z-50 bg-background transition-opacity duration-300 flex flex-col ${isVisible ? 'opacity-100' : 'opacity-0'}`}>
{/* Header */}
<div className="sticky top-0 z-10 bg-background border-b border-border">
<div className="flex-shrink-0 bg-background border-b border-border">
<div className="max-w-7xl mx-auto px-6 py-4">
<div className="flex items-center justify-between">
<div className="flex items-center gap-4">
@ -158,7 +158,8 @@ export default function InlineVideoPlayer({ video, isOpen, onClose, scrollPositi
</div>
{/* Video Player */}
<div className="max-w-7xl mx-auto px-6 py-6">
<div className="flex-1 overflow-y-auto">
<div className="max-w-7xl mx-auto px-6 py-6">
<div className="aspect-video bg-black rounded-lg overflow-hidden relative group">
<video
ref={videoRef}
@ -246,11 +247,14 @@ export default function InlineVideoPlayer({ video, isOpen, onClose, scrollPositi
</div>
{/* Video info below player */}
<div className="mt-6 space-y-2">
<h2 className="text-2xl font-bold text-foreground">{video.title}</h2>
<p className="text-muted-foreground font-mono text-sm break-all">
{video.path}
</p>
<div className="mt-6 space-y-3 pb-8">
<h2 className="text-2xl font-bold text-foreground break-words leading-tight">{video.title}</h2>
<div className="bg-muted/50 rounded-lg p-4">
<p className="text-muted-foreground font-mono text-sm break-words leading-relaxed">
{video.path}
</p>
</div>
</div>
</div>
</div>
</div>