myetv-player 1.0.8 → 1.1.0

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

@@ -5,6 +5,24 @@
 @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
 // ===================================
@@ -66,7 +84,7 @@
     height: 14px;
     background: var(--player-accent, #ff0000);
     cursor: grab; // Indicates draggable
-    transition: opacity 0.2s ease;
+    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
@@ -154,6 +172,103 @@
     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
 // ===================================
@@ -181,4 +296,69 @@
     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
+}
+
+// ===================================
+// ENCODING BADGE - Video in encoding
+// ===================================
+
+/* Badge for video in encoding (duration Infinity/NaN) */
+.encoding-badge {
+    display: inline-block;
+    background: rgba(128, 128, 128, 0.8); // Grigio semi-trasparente
+    color: white;
+    padding: 2px 8px;
+    border-radius: 4px;
+    font-size: 11px;
+    font-weight: 500;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    white-space: nowrap;
+    backdrop-filter: blur(4px);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    animation: encoding-pulse 2s ease-in-out infinite;
+}
+
+/* Class for the container when shows the badge */
+.time-display .encoding-state {
+    display: flex;
+    align-items: center;
+}
+
+/* animation for the badge */
+@keyframes encoding-pulse {
+    0%, 100% {
+        opacity: 0.8;
+    }
+
+    50% {
+        opacity: 1;
+    }
+}
+
+// Responsive for badge encoding
+@media (max-width: 480px) {
+    .encoding-badge {
+        font-size: 9px;
+        padding: 1px 6px;
+    }
+}
+
+@media (max-width: 350px) {
+    .encoding-badge {
+        font-size: 8px;
+        padding: 1px 4px;
+    }
+}

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;
 }