Enhance video player controls and progress bar

- Fix video controls visibility: show by default instead of hidden
- Improve progress bar interaction with hover effects and scrub thumb
- Add auto-hide behavior with 3-second timeout during playback
- Enhance progress bar styling with better visual feedback
- Fix control show/hide logic for better user experience
- Make progress bar fully clickable for seeking to any position

src/features/media/pornCinema.js

@@ -16,6 +16,7 @@ class PornCinema {
         this.shouldAutoPlay = false;
         this.fallbackMimeTypes = null;
         this.currentVideoSrc = null;
+        this.hideControlsTimeout = null;
         
         // Playlist
         this.playlist = [];
@@ -802,11 +803,24 @@ class PornCinema {
 
     showControls() {
         this.controls.container.classList.add('visible');
+        this.videoContainer.classList.remove('hide-controls', 'auto-hide');
+        
+        // Clear existing timeout
+        if (this.hideControlsTimeout) {
+            clearTimeout(this.hideControlsTimeout);
+        }
+        
+        // Set timeout to auto-hide controls after 3 seconds of no interaction
+        if (this.videoElement && !this.videoElement.paused) {
+            this.hideControlsTimeout = setTimeout(() => {
+                this.videoContainer.classList.add('auto-hide');
+            }, 3000);
+        }
     }
 
     hideControls() {
         if (!this.videoElement.paused) {
-            this.controls.container.classList.remove('visible');
+            this.videoContainer.classList.add('auto-hide');
         }
     }
 

src/styles/porn-cinema.css

@@ -395,14 +395,29 @@ body.cinema-mode {
     left: 0;
     right: 0;
     padding: 20px;
+    transform: translateY(0);
+    opacity: 1;
+    transition: transform 0.3s ease, opacity 0.3s ease;
+}
+
+/* Auto-hide controls when playing and no interaction */
+.video-container.auto-hide .video-controls {
     transform: translateY(100%);
-    transition: transform 0.3s ease;
+    opacity: 0;
 }
 
 .video-container:hover .video-controls,
 .video-controls:hover,
 .video-controls.visible {
     transform: translateY(0);
+    opacity: 1;
+}
+
+/* Hide controls after 3 seconds of no interaction */
+.video-container.hide-controls .video-controls:not(:hover) {
+    transform: translateY(100%);
+    opacity: 0;
+    transition-delay: 3s;
 }
 
 .progress-container {
@@ -416,6 +431,11 @@ body.cinema-mode {
     border-radius: 3px;
     cursor: pointer;
     margin-bottom: 8px;
+    transition: height 0.2s ease;
+}
+
+.progress-bar:hover {
+    height: 8px;
 }
 
 .progress-filled {
@@ -424,20 +444,21 @@ body.cinema-mode {
     border-radius: 3px;
     width: 0%;
     transition: width 0.1s ease;
+    position: relative;
 }
 
 .progress-thumb {
     position: absolute;
     top: -4px;
+    right: -7px;
     width: 14px;
     height: 14px;
     background: #fff;
     border-radius: 50%;
-    transform: translateX(-50%);
-    left: 0%;
     opacity: 0;
     transition: opacity 0.2s ease;
     box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
+    pointer-events: none;
 }
 
 .progress-bar:hover .progress-thumb {