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.

src/components/video-viewer.tsx

@@ -242,8 +242,34 @@ export default function VideoViewer({
 
           {/* 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="flex items-center justify-between">
             <h2 className="text-white text-lg font-semibold">{getVideoTitle()}</h2>
+          </div>
+
+          {/* Controls overlay */}
+          <div className={`absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 via-black/40 to-transparent p-4 transition-opacity duration-300 ${showControls ? 'opacity-100' : 'opacity-0'}`}>
+            {/* Progress bar */}
+            <div className="mb-4">
+              <input
+                type="range"
+                min="0"
+                max={duration || 0}
+                value={currentTime}
+                onChange={handleSeek}
+                className="w-full h-1 bg-gray-600 rounded-lg appearance-none cursor-pointer slider"
+              />
+              <div className="flex justify-between text-white text-sm mt-1">
+                <span>{formatTime(currentTime)}</span>
+                <span>{formatTime(duration)}</span>
+              </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 && (
@@ -272,24 +298,6 @@ export default function VideoViewer({
               </div>
             </div>
 
-          {/* Controls overlay */}
-          <div className={`absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 via-black/40 to-transparent p-4 transition-opacity duration-300 ${showControls ? 'opacity-100' : 'opacity-0'}`}>
-            {/* Progress bar */}
-            <div className="mb-4">
-              <input
-                type="range"
-                min="0"
-                max={duration || 0}
-                value={currentTime}
-                onChange={handleSeek}
-                className="w-full h-1 bg-gray-600 rounded-lg appearance-none cursor-pointer slider"
-              />
-              <div className="flex justify-between text-white text-sm mt-1">
-                <span>{formatTime(currentTime)}</span>
-                <span>{formatTime(duration)}</span>
-              </div>
-            </div>
-
             {/* Control buttons */}
             <div className="flex items-center justify-between">
               <div className="flex items-center gap-4">