myetv-player 1.0.6 → 1.0.8

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

@@ -4591,7 +4591,128 @@ video::-webkit-media-text-track-display {
   cursor: pointer !important;
 }
 
-/* CONTROLS - IMPROVED RESPONSIVE DESIGN */
+.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: opacity 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;
+}
+
+/* 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);