myetv-player 1.0.6 → 1.0.10

package/README.md

@@ -99,6 +99,7 @@ const player = new MYETVvideoplayer('my-video', {
 | `subtitlesEnabled` | boolean | `false` | Enable/Disable subtitles at player ready |
 | `chapters` | string | json | Enable/Disable chapters: chapter can be in json format or string format (see below) |
 | `plugins` | string | json | Add a customized plugin to the player to extend its functionality (see below) |
+| `seekHandleShape` | string | `true` | Edit the shape of the seek controlbar. Shape type: none, circle, square, diamond, arrow, triangle, heart, star |
 | `showSeekTooltip` | boolean | `true` | Show tooltip during seek |
 | `volumeSlider` | string | `show` | Volume slider 'show' or 'hide': with "show" the volume slider is always visible and have the automatic fallback to "hide" under 550px of width; with "hide" the volume slider is visible only at mouse over |
 | `autoplay` | boolean | `false` | Start video automatically |
@@ -250,6 +251,18 @@ player.removeWatermark();
 //hide with the controlbar or always show the watermark logo
 player.setWatermarkAutoHide(false);
 ```
+### Controlbar seek shape
+```
+// Change dynamically
+player.setSeekHandleShape('heart');
+
+// Get the current shape
+console.log(player.getSeekHandleShape()); // "heart"
+
+// Show all available shape
+console.log(player.getAvailableSeekHandleShapes());
+// ["none", "circle", "square", "diamond", "arrow", "triangle", "heart", "star"]
+```
 ### Playlist Controls
 ```
 player.nextVideo();                    // Next Video

package/css/myetv-player.css

@@ -97,21 +97,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;
 }
@@ -2301,73 +2286,6 @@ video::-webkit-media-text-track-display {
   right: 15px;
 }
 
-/* Bottom positions - Increased spacing from controlbar (was 70px, now 90px) */
-.video-watermark.watermark-bottomleft {
-  bottom: 90px; /* Increased spacing */
-  left: 15px;
-}
-
-.video-watermark.watermark-bottomright {
-  bottom: 90px; /* Increased spacing */
-  right: 15px;
-}
-
-/* DYNAMIC POSITIONING: Always visible watermark moves down when controls are hidden */
-/* This applies ONLY to watermarks without hide-on-autohide class (always visible) */
-.video-wrapper:not(.has-controls) .video-watermark.watermark-bottomleft:not(.hide-on-autohide) {
-  bottom: 15px; /* Move to bottom corner when controls hidden */
-}
-
-.video-wrapper:not(.has-controls) .video-watermark.watermark-bottomright:not(.hide-on-autohide) {
-  bottom: 15px; /* Move to bottom corner when controls hidden */
-}
-
-/* When controls are shown, bottom watermark stays above controlbar */
-.video-wrapper.has-controls .video-watermark.watermark-bottomleft,
-.video-wrapper.has-controls .video-watermark.watermark-bottomright {
-  bottom: 90px; /* Stay above controlbar */
-}
-
-/* Responsive adjustments for mobile */
-@media (max-width: 768px) {
-  .video-watermark img {
-    max-width: 100px;
-    max-height: 50px;
-  }
-  .video-watermark.watermark-topleft,
-  .video-watermark.watermark-topright {
-    top: 10px;
-  }
-  .video-watermark.watermark-topleft,
-  .video-watermark.watermark-bottomleft {
-    left: 10px;
-  }
-  .video-watermark.watermark-topright,
-  .video-watermark.watermark-bottomright {
-    right: 10px;
-  }
-  /* Bottom spacing adjusted for mobile */
-  .video-watermark.watermark-bottomleft,
-  .video-watermark.watermark-bottomright {
-    bottom: 75px; /* Above controlbar on mobile */
-  }
-  /* Always visible watermark on mobile - moves down when controls hidden */
-  .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: 10px; /* Move to corner on mobile */
-  }
-}
-/* Extra small screens */
-@media (max-width: 480px) {
-  .video-watermark.watermark-bottomleft,
-  .video-watermark.watermark-bottomright {
-    bottom: 65px;
-  }
-  .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: 8px;
-  }
-}
 /* Clickable watermark cursor */
 .video-watermark[style*="cursor: pointer"] {
   cursor: pointer !important;
@@ -4591,7 +4509,210 @@ video::-webkit-media-text-track-display {
   cursor: pointer !important;
 }
 
-/* CONTROLS - IMPROVED RESPONSIVE DESIGN */
+.controls,
+.progress-container,
+.progress-bar,
+.controls-main,
+.controls-left,
+.controls-right,
+.time-display {
+  user-select: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+}
+
+.progress-container {
+  position: relative;
+  overflow: visible !important;
+  padding: 0;
+  margin-bottom: 10px;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+}
+
+.progress-bar {
+  position: relative;
+  width: 100%;
+  height: 4px;
+  background: rgba(255, 255, 255, 0.3);
+  border-radius: 2px;
+  overflow: visible !important;
+  cursor: pointer;
+}
+
+.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;
+}
+
+.progress-filled {
+  position: absolute;
+  left: 0;
+  top: 0;
+  height: 100%;
+  background: var(--player-accent, #ff0000);
+  border-radius: 2px;
+  pointer-events: none;
+  z-index: 2;
+}
+
+.progress-handle {
+  position: absolute;
+  top: 50%;
+  left: 0%;
+  transform: translate(-50%, -50%);
+  width: 14px;
+  height: 14px;
+  background: var(--player-accent, #ff0000);
+  cursor: grab;
+  transition: all 0.2s ease;
+  z-index: 10;
+  pointer-events: auto;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+}
+
+.progress-handle:active {
+  cursor: grabbing;
+}
+
+.progress-handle-circle {
+  border-radius: 50%;
+}
+
+.progress-handle-square {
+  border-radius: 3px;
+}
+
+.progress-handle-diamond {
+  border-radius: 2px;
+  transform: translate(-50%, -50%) rotate(45deg);
+}
+
+.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);
+  border-radius: 0;
+  box-shadow: none;
+}
+
+.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;
+}
+
+.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%);
+}
+
+.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%);
+}
+
+.progress-handle-none {
+  opacity: 0 !important;
+  pointer-events: none !important;
+}
+
+.progress-handle {
+  opacity: 1 !important;
+}
+
+.progress-container .progress-handle {
+  opacity: 1 !important;
+}
+
+@media (max-width: 768px) {
+  .progress-bar {
+    height: 4px;
+  }
+  .progress-handle {
+    touch-action: none;
+    -webkit-touch-callout: none;
+  }
+  .progress-handle::before {
+    content: "";
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 50px;
+    height: 50px;
+    border-radius: 50%;
+    background: transparent;
+    z-index: -1;
+  }
+  .progress-handle:active {
+    width: 24px !important;
+    height: 24px !important;
+    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4);
+  }
+  .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;
+  }
+}
+@media (max-width: 480px) {
+  .progress-bar {
+    height: 4px;
+  }
+  .progress-handle::before {
+    width: 60px;
+    height: 60px;
+  }
+  .progress-handle:active {
+    width: 28px !important;
+    height: 28px !important;
+  }
+  .progress-handle-heart:active,
+  .progress-handle-star:active {
+    width: 30px !important;
+    height: 30px !important;
+  }
+}
+/* Main controls container */
 .controls {
   position: absolute;
   bottom: 0;
@@ -4607,6 +4728,7 @@ video::-webkit-media-text-track-display {
   box-sizing: border-box;
 }
 
+/* Controls visible state */
 .controls.show {
   opacity: 1;
   transform: translateY(0);
@@ -4615,6 +4737,13 @@ video::-webkit-media-text-track-display {
   z-index: 20 !important;
 }
 
+.progress-container,
+.progress-bar,
+.progress-handle {
+  touch-action: none;
+  -webkit-touch-callout: none;
+}
+
 /* PROGRESS BAR */
 .progress-container {
   width: 100%;
@@ -12395,6 +12524,54 @@ video::-webkit-media-text-track-display {
   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;
+}
+
 .audio-player {
   width: 320px;
   height: 80px;
@@ -12435,6 +12612,120 @@ video::-webkit-media-text-track-display {
   --player-primary-dark: #c62828;
 }
 
+.video-watermark {
+  position: absolute;
+  z-index: 15;
+  pointer-events: auto;
+  opacity: 0.7;
+  transition: opacity 0.3s ease, visibility 0.3s ease, bottom 0.3s ease;
+}
+
+.video-watermark {
+  visibility: visible;
+  opacity: 0.7;
+}
+
+.video-wrapper:not(.has-controls) .video-watermark.hide-on-autohide {
+  visibility: hidden;
+  opacity: 0;
+}
+
+.video-wrapper.has-controls .video-watermark {
+  visibility: visible;
+  opacity: 0.7;
+}
+
+.video-watermark:hover {
+  opacity: 1;
+}
+
+.video-watermark img {
+  display: block;
+  max-width: 150px;
+  max-height: 80px;
+  width: auto;
+  height: auto;
+  object-fit: contain;
+}
+
+/* Top positions */
+.video-watermark.watermark-topleft {
+  top: 15px;
+  left: 15px;
+}
+
+.video-watermark.watermark-topright {
+  top: 15px;
+  right: 15px;
+}
+
+/* Bottom positions - Dynamic with controlbar height + spacing */
+.video-watermark.watermark-bottomleft {
+  bottom: calc(var(--player-controls-height, 70px) + 15px);
+  left: 15px;
+}
+
+.video-watermark.watermark-bottomright {
+  bottom: calc(var(--player-controls-height, 70px) + 15px);
+  right: 15px;
+}
+
+/* When controls hidden, move to corner */
+.video-wrapper:not(.has-controls) .video-watermark.watermark-bottomleft:not(.hide-on-autohide) {
+  bottom: 15px;
+}
+
+.video-wrapper:not(.has-controls) .video-watermark.watermark-bottomright:not(.hide-on-autohide) {
+  bottom: 15px;
+}
+
+/* When controls shown, stay above controlbar */
+.video-wrapper.has-controls .video-watermark.watermark-bottomleft,
+.video-wrapper.has-controls .video-watermark.watermark-bottomright {
+  bottom: calc(var(--player-controls-height, 70px) + 15px);
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+  .video-watermark img {
+    max-width: 100px;
+    max-height: 50px;
+  }
+  .video-watermark.watermark-topleft,
+  .video-watermark.watermark-topright {
+    top: 10px;
+  }
+  .video-watermark.watermark-topleft,
+  .video-watermark.watermark-bottomleft {
+    left: 10px;
+  }
+  .video-watermark.watermark-topright,
+  .video-watermark.watermark-bottomright {
+    right: 10px;
+  }
+  .video-watermark.watermark-bottomleft,
+  .video-watermark.watermark-bottomright {
+    bottom: calc(var(--player-controls-height, 60px) + 10px);
+  }
+  .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: 10px;
+  }
+}
+@media (max-width: 480px) {
+  .video-watermark.watermark-bottomleft,
+  .video-watermark.watermark-bottomright {
+    bottom: calc(var(--player-controls-height, 55px) + 10px);
+  }
+  .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: 8px;
+  }
+}
+.video-watermark[style*="cursor: pointer"] {
+  cursor: pointer !important;
+}
+
 /* RESPONSIVE DESIGN - PROGRESSIVE DEGRADATION CON MENU A TENDINA */
 /* Large tablets and small desktops */
 @media (max-width: 768px) {
@@ -13658,128 +13949,3 @@ video::-webkit-media-text-track-display {
   bottom: 0 !important;
   overflow: visible !important;
 }
-
-/* ===================================
-   WATERMARK OVERLAY
-   =================================== */
-.video-watermark {
-  position: absolute;
-  z-index: 15; /* Above video (10), below controls (100) */
-  pointer-events: auto;
-  opacity: 0.7;
-  transition: opacity 0.3s ease, visibility 0.3s ease, bottom 0.3s ease;
-}
-
-/* Watermark visible by default */
-.video-watermark {
-  visibility: visible;
-  opacity: 0.7;
-}
-
-/* Hide watermark when it has hide-on-autohide class AND controls are hidden */
-.video-wrapper:not(.has-controls) .video-watermark.hide-on-autohide {
-  visibility: hidden;
-  opacity: 0;
-}
-
-/* Show watermark when controls are shown */
-.video-wrapper.has-controls .video-watermark {
-  visibility: visible;
-  opacity: 0.7;
-}
-
-.video-watermark:hover {
-  opacity: 1;
-}
-
-.video-watermark img {
-  display: block;
-  max-width: 150px;
-  max-height: 80px;
-  width: auto;
-  height: auto;
-  object-fit: contain;
-}
-
-/* Watermark positions - Top positions unchanged */
-.video-watermark.watermark-topleft {
-  top: 15px;
-  left: 15px;
-}
-
-.video-watermark.watermark-topright {
-  top: 15px;
-  right: 15px;
-}
-
-/* Bottom positions - Increased spacing from controlbar (was 70px, now 90px) */
-.video-watermark.watermark-bottomleft {
-  bottom: 90px; /* Increased spacing */
-  left: 15px;
-}
-
-.video-watermark.watermark-bottomright {
-  bottom: 90px; /* Increased spacing */
-  right: 15px;
-}
-
-/* DYNAMIC POSITIONING: Always visible watermark moves down when controls are hidden */
-/* This applies ONLY to watermarks without hide-on-autohide class (always visible) */
-.video-wrapper:not(.has-controls) .video-watermark.watermark-bottomleft:not(.hide-on-autohide) {
-  bottom: 15px; /* Move to bottom corner when controls hidden */
-}
-
-.video-wrapper:not(.has-controls) .video-watermark.watermark-bottomright:not(.hide-on-autohide) {
-  bottom: 15px; /* Move to bottom corner when controls hidden */
-}
-
-/* When controls are shown, bottom watermark stays above controlbar */
-.video-wrapper.has-controls .video-watermark.watermark-bottomleft,
-.video-wrapper.has-controls .video-watermark.watermark-bottomright {
-  bottom: 90px; /* Stay above controlbar */
-}
-
-/* Responsive adjustments for mobile */
-@media (max-width: 768px) {
-  .video-watermark img {
-    max-width: 100px;
-    max-height: 50px;
-  }
-  .video-watermark.watermark-topleft,
-  .video-watermark.watermark-topright {
-    top: 10px;
-  }
-  .video-watermark.watermark-topleft,
-  .video-watermark.watermark-bottomleft {
-    left: 10px;
-  }
-  .video-watermark.watermark-topright,
-  .video-watermark.watermark-bottomright {
-    right: 10px;
-  }
-  /* Bottom spacing adjusted for mobile */
-  .video-watermark.watermark-bottomleft,
-  .video-watermark.watermark-bottomright {
-    bottom: 75px; /* Above controlbar on mobile */
-  }
-  /* Always visible watermark on mobile - moves down when controls hidden */
-  .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: 10px; /* Move to corner on mobile */
-  }
-}
-/* Extra small screens */
-@media (max-width: 480px) {
-  .video-watermark.watermark-bottomleft,
-  .video-watermark.watermark-bottomright {
-    bottom: 65px;
-  }
-  .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: 8px;
-  }
-}
-/* Clickable watermark cursor */
-.video-watermark[style*="cursor: pointer"] {
-  cursor: pointer !important;
-}