myetv-player 1.0.6 → 1.0.10

package/scss/_base.scss

@@ -101,21 +101,6 @@ body {
     opacity: 0;
 }
 
-.video-wrapper:not(.has-controls) .video-watermark.watermark-bottomleft:not(.hide-on-autohide),
-.video-wrapper:not(.has-controls) .video-watermark.watermark-bottomright:not(.hide-on-autohide) {
-    bottom: 15px;
-}
-
-.video-wrapper.has-controls .video-watermark {
-    visibility: visible;
-    opacity: 0.7;
-}
-
-.video-wrapper.has-controls .video-watermark.watermark-bottomleft,
-.video-wrapper.has-controls .video-watermark.watermark-bottomright {
-    bottom: 90px;
-}
-
 .hidden {
     display: none !important;
 }

package/scss/_controls.scss

@@ -1,30 +1,311 @@
-// ===================================
-// CONTROLS
-// ===================================
-
-@use 'mixins' as *;
-@use 'variables' as *;
-
-/* CONTROLS - IMPROVED RESPONSIVE DESIGN */
-.controls {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    background: var(--player-bg-controls);
-    padding: var(--player-controls-padding);
-    opacity: 0;
-    transform: translateY(100%);
-    transition: all var(--player-transition-normal);
-    z-index: 10;
-    min-height: 70px !important;
-    box-sizing: border-box;
-}
-
-.controls.show {
-    opacity: 1;
-    transform: translateY(0);
-    position: absolute !important;
-    bottom: 0 !important;
-    z-index: 20 !important;
-}
+// ===================================
+// CONTROLS
+// ===================================
+
+@use 'mixins' as *;
+@use 'variables' as *;
+
+// ===================================
+// PREVENT TEXT SELECTION DURING DRAG
+// ===================================
+
+// Disable text selection on all controls when dragging
+.controls,
+.progress-container,
+.progress-bar,
+.controls-main,
+.controls-left,
+.controls-right,
+.time-display {
+    user-select: none; // Prevent text selection
+    -webkit-user-select: none; // Safari
+    -moz-user-select: none; // Firefox
+    -ms-user-select: none; // IE/Edge
+}
+
+// ===================================
+// PROGRESS BAR SYSTEM
+// ===================================
+
+.progress-container {
+    position: relative;
+    overflow: visible !important; // Allow handle to extend outside the container
+    padding: 0; // No padding - keeps control bar height normal
+    margin-bottom: 10px; // Space below instead of padding
+    display: flex;
+    align-items: center; // Vertically center the progress bar
+    cursor: pointer;
+}
+
+.progress-bar {
+    position: relative;
+    width: 100%;
+    height: 4px; // Thin progress bar
+    background: rgba(255, 255, 255, 0.3); // Semi-transparent background
+    border-radius: 2px;
+    overflow: visible !important; // Allow handle to be visible
+    cursor: pointer;
+}
+
+// Buffer bar (shows buffered/loaded video)
+.progress-buffer {
+    position: absolute;
+    left: 0;
+    top: 0;
+    height: 100%;
+    background: rgba(255, 255, 255, 0.5);
+    border-radius: 2px;
+    pointer-events: none;
+    z-index: 1; // Below filled bar
+}
+
+// Filled bar (shows watched video progress)
+.progress-filled {
+    position: absolute;
+    left: 0;
+    top: 0;
+    height: 100%;
+    background: var(--player-accent, #ff0000); // Accent color fill
+    border-radius: 2px;
+    pointer-events: none;
+    z-index: 2; // Above buffer, below handle
+}
+
+// ===================================
+// PROGRESS HANDLE - BASE STYLES
+// ===================================
+
+.progress-handle {
+    position: absolute;
+    top: 50%;
+    left: 0%;
+    transform: translate(-50%, -50%); // Center the handle
+    width: 14px;
+    height: 14px;
+    background: var(--player-accent, #ff0000);
+    cursor: grab; // Indicates draggable
+    transition: all 0.2s ease; // Smooth transition for size changes
+    z-index: 10; // Above everything (buffer and filled)
+    pointer-events: auto; // Ensure it's clickable
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); // Subtle shadow for depth
+}
+
+// Grabbing cursor when actively dragging
+.progress-handle:active {
+    cursor: grabbing;
+}
+
+// ===================================
+// SEEK HANDLE SHAPES
+// ===================================
+
+// Circle - classic round handle (default recommended)
+.progress-handle-circle {
+    border-radius: 50%; // Perfect circle
+}
+
+// Square - sharp corners
+.progress-handle-square {
+    border-radius: 3px; // Slightly rounded corners
+}
+
+// Diamond - rotated square
+.progress-handle-diamond {
+    border-radius: 2px;
+    transform: translate(-50%, -50%) rotate(45deg); // 45 degree rotation
+}
+
+// Arrow - pointing upward
+.progress-handle-arrow {
+    background: transparent;
+    width: 0 !important;
+    height: 0 !important;
+    border-left: 7px solid transparent;
+    border-right: 7px solid transparent;
+    border-bottom: 14px solid var(--player-accent, #ff0000); // Triangle pointing up
+    border-radius: 0;
+    box-shadow: none; // No shadow for border-based shapes
+}
+
+// Triangle - simple triangle shape
+.progress-handle-triangle {
+    background: transparent;
+    width: 0 !important;
+    height: 0 !important;
+    border-left: 8px solid transparent;
+    border-right: 8px solid transparent;
+    border-bottom: 14px solid var(--player-accent, #ff0000);
+    border-radius: 0;
+    box-shadow: none;
+}
+
+// Heart - romantic shape using clip-path
+.progress-handle-heart {
+    width: 16px !important;
+    height: 16px !important;
+    clip-path: polygon( 50% 15%, 65% 0%, 80% 0%, 95% 15%, 95% 30%, 50% 85%, 5% 30%, 5% 15%, 20% 0%, 35% 0% );
+}
+
+// Star - five-pointed star using clip-path
+.progress-handle-star {
+    width: 16px !important;
+    height: 16px !important;
+    clip-path: polygon( 50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35% );
+}
+
+// None - completely hidden (no visual indicator)
+.progress-handle-none {
+    opacity: 0 !important;
+    pointer-events: none !important;
+}
+
+// ===================================
+// FORCE HANDLE ALWAYS VISIBLE
+// ===================================
+
+// Override any other rule that hides the handle
+.progress-handle {
+    opacity: 1 !important; // Always visible
+}
+
+.progress-container .progress-handle {
+    opacity: 1 !important; // Always visible with higher specificity
+}
+
+// ===================================
+// MOBILE TOUCH ENHANCEMENTS
+// ===================================
+
+// Media query for tablets and mobile devices (max width 768px)
+@media (max-width: 768px) {
+
+    // Progress bar stays thin (4px)
+    .progress-bar {
+        height: 4px; // Keep thin
+    }
+
+    // Handle with large invisible touch area
+    .progress-handle {
+        touch-action: none; // Critical for mobile drag
+        -webkit-touch-callout: none; // Disable iOS callout
+        // Add large invisible touch area using pseudo-element
+        &::before {
+            content: '';
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            width: 50px; // Large touch target (50x50px)
+            height: 50px;
+            border-radius: 50%;
+            background: transparent; // Invisible but touchable
+            z-index: -1; // Behind the visible handle
+        }
+        // Scale up when touched/active
+        &:active {
+            width: 24px !important; // Grow: 14px -> 24px
+            height: 24px !important;
+            box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4); // Stronger shadow when active
+        }
+    }
+
+    // Adjust shapes when active (touched)
+    .progress-handle-circle:active {
+        border-radius: 50%;
+    }
+
+    .progress-handle-square:active {
+        border-radius: 5px;
+    }
+
+    .progress-handle-diamond:active {
+        border-radius: 4px;
+        transform: translate(-50%, -50%) rotate(45deg);
+    }
+
+    .progress-handle-arrow:active {
+        border-left: 12px solid transparent;
+        border-right: 12px solid transparent;
+        border-bottom: 24px solid var(--player-accent, #ff0000);
+    }
+
+    .progress-handle-triangle:active {
+        border-left: 13px solid transparent;
+        border-right: 13px solid transparent;
+        border-bottom: 24px solid var(--player-accent, #ff0000);
+    }
+
+    .progress-handle-heart:active,
+    .progress-handle-star:active {
+        width: 26px !important;
+        height: 26px !important;
+    }
+}
+
+// Enhanced touch targets for very small screens (phones)
+@media (max-width: 480px) {
+
+    // Progress bar stays thin on phones too
+    .progress-bar {
+        height: 4px; // Keep thin
+    }
+
+    .progress-handle {
+        &::before {
+            width: 60px; // Extra large touch target on phones
+            height: 60px;
+        }
+        // Even bigger when touched on phones
+        &:active {
+            width: 28px !important;
+            height: 28px !important;
+        }
+    }
+
+    .progress-handle-heart:active,
+    .progress-handle-star:active {
+        width: 30px !important;
+        height: 30px !important;
+    }
+}
+
+// ===================================
+// CONTROLS CONTAINER
+// ===================================
+
+/* Main controls container */
+.controls {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background: var(--player-bg-controls);
+    padding: var(--player-controls-padding);
+    opacity: 0; // Hidden by default
+    transform: translateY(100%); // Slide out below
+    transition: all var(--player-transition-normal);
+    z-index: 10;
+    min-height: 70px !important;
+    box-sizing: border-box;
+}
+
+/* Controls visible state */
+.controls.show {
+    opacity: 1; // Fully visible
+    transform: translateY(0); // Slide in
+    position: absolute !important;
+    bottom: 0 !important;
+    z-index: 20 !important; // Above other elements
+}
+
+// ===================================
+// TOUCH EVENT FIXES FOR MOBILE
+// ===================================
+
+// Prevent default touch behavior on progress bar
+.progress-container,
+.progress-bar,
+.progress-handle {
+    touch-action: none; // Disable browser's default touch gestures
+    -webkit-touch-callout: none; // Disable callout on iOS
+}

package/scss/_menus.scss

@@ -4235,4 +4235,55 @@ video::-webkit-media-text-track-display {
 /* Clickable watermark cursor */
 .video-watermark[style*="cursor: pointer"] {
     cursor: pointer !important;
+}
+/* ===================================
+   FIX SUBMENU CLIPPING ON SMALL SCREENS
+   =================================== */
+
+/* Change positioning from bottom-aligned to top-aligned when menu would be clipped */
+/* ONLY affects submenus inside settings menu (small screen mode) */
+@media (max-height: 600px) {
+    .settings-menu .settings-submenu,
+    .settings-option .settings-submenu,
+    .settings-option .quality-submenu,
+    .settings-option .speed-submenu {
+        /* Remove bottom positioning */
+        bottom: auto !important;
+        /* Align to top of parent option */
+        top: 0 !important;
+        /* Reduce max-height on very small screens */
+        max-height: 150px !important;
+    }
+}
+
+/* Even smaller screens - ultra compact */
+@media (max-height: 400px) {
+    .settings-menu .settings-submenu,
+    .settings-option .settings-submenu,
+    .settings-option .quality-submenu,
+    .settings-option .speed-submenu {
+        max-height: 120px !important;
+    }
+}
+
+/* For very small players (width < 400px) - only inside settings menu */
+@media (max-width: 400px) {
+    .settings-menu .settings-submenu,
+    .settings-option .settings-submenu,
+    .settings-option .quality-submenu,
+    .settings-option .speed-submenu {
+        /* Switch to top alignment */
+        bottom: auto !important;
+        top: 0 !important;
+        max-height: 180px !important;
+    }
+}
+
+/* EXCLUDE standalone subtitles menu (the one that appears when player is large) */
+/* Keep original bottom positioning for standalone menus */
+.subtitles-button .subtitles-menu,
+.yt-subtitles-submenu:not(.settings-option *),
+.yt-quality-submenu:not(.settings-option *) {
+    bottom: 0 !important;
+    top: auto !important;
 }