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

feat: update video viewer layout and enhance video info display 

- Simplified the title overlay in the video viewer by removing unnecessary elements for a cleaner look.
- Introduced a new video info bar that displays the video title and size, improving user accessibility to video details.
- Maintained existing bookmark and rating functionalities while enhancing their layout for better usability.
This commit is contained in:
tigeren 2025-08-29 02:55:10 +00:00
parent 44aedcbee6
commit 6c289e591d
2 changed files with 36 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
media.db
View File

Binary file not shown.

64
src/components/video-viewer.tsx
View File

@ -242,34 +242,7 @@ export default function VideoViewer({
{/* Title overlay */} {/* Title overlay */}
<div className={`absolute top-0 left-0 right-0 bg-gradient-to-b from-black/60 to-transparent p-4 transition-opacity duration-300 ${showControls ? 'opacity-100' : 'opacity-0'}`}> <div className={`absolute top-0 left-0 right-0 bg-gradient-to-b from-black/60 to-transparent p-4 transition-opacity duration-300 ${showControls ? 'opacity-100' : 'opacity-0'}`}>
<div className="flex items-center justify-between"> <h2 className="text-white text-lg font-semibold">{getVideoTitle()}</h2>
<h2 className="text-white text-lg font-semibold">{getVideoTitle()}</h2>
{(showBookmarks || showRatings) && (
<div className="flex items-center gap-4">
{showBookmarks && (
<button
onClick={isBookmarked ? handleUnbookmark : handleBookmark}
className="flex items-center gap-1 text-white hover:text-yellow-400 transition-colors"
>
<Bookmark className={`h-4 w-4 ${isBookmarked ? 'fill-yellow-400 text-yellow-400' : ''}`} />
</button>
)}
{showRatings && (
<div className="flex gap-1">
{[1, 2, 3, 4, 5].map((rating) => (
<button
key={rating}
onClick={() => handleRate(rating)}
className="text-white hover:text-yellow-400 transition-colors"
>
<Star className={`h-4 w-4 ${rating <= Math.round(getAvgRating()) ? 'fill-yellow-400 text-yellow-400' : ''}`} />
</button>
))}
</div>
)}
</div>
)}
</div>
</div> </div>
{/* Controls overlay */} {/* Controls overlay */}
@ -290,6 +263,41 @@ export default function VideoViewer({
</div> </div>
</div> </div>
{/* Video Info Bar (similar to photo viewer) */}
<div className="bg-black/70 backdrop-blur-sm rounded-lg p-4 mb-2">
<div className="flex items-center justify-between">
<div>
<h3 className="text-white font-medium">{getVideoTitle()}</h3>
<p className="text-gray-300 text-sm">{getVideoSize()}</p>
</div>
{(showBookmarks || showRatings) && (
<div className="flex items-center gap-4">
{showBookmarks && (
<button
onClick={isBookmarked ? handleUnbookmark : handleBookmark}
className="flex items-center gap-1 text-white hover:text-yellow-400 transition-colors"
>
<Bookmark className={`h-4 w-4 ${isBookmarked ? 'fill-yellow-400 text-yellow-400' : ''}`} />
</button>
)}
{showRatings && (
<div className="flex gap-1">
{[1, 2, 3, 4, 5].map((rating) => (
<button
key={rating}
onClick={() => handleRate(rating)}
className="text-white hover:text-yellow-400 transition-colors"
>
<Star className={`h-4 w-4 ${rating <= Math.round(getAvgRating()) ? 'fill-yellow-400 text-yellow-400' : ''}`} />
</button>
))}
</div>
)}
</div>
)}
</div>
</div>
{/* Control buttons */} {/* Control buttons */}
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div className="flex items-center gap-4"> <div className="flex items-center gap-4">