myetv-player 1.0.6 → 1.0.8

package/dist/myetv-player.js

@@ -448,6 +448,8 @@ constructor(videoElement, options = {}) {
         dashLibUrl: 'https://cdn.dashjs.org/latest/dash.all.min.js', // Dash.js library URL
         hlsLibUrl: 'https://cdn.jsdelivr.net/npm/hls.js@latest', // HLS.js library URL
         adaptiveQualityControl: true, // Show quality control for adaptive streams
+        //seek shape
+        seekHandleShape: 'circle', // Available shape: none, circle, square, diamond, arrow, triangle, heart, star
         // AUDIO PLAYER
         audiofile: false,
         audiowave: false,
@@ -2091,6 +2093,51 @@ loadScript(src) {
     });
 }
 
+/**
+ * Set seek handle shape dynamically
+ * @param {string} shape - Shape type: none, circle, square, diamond, arrow, triangle, heart, star
+ * @returns {Object} this
+ */
+setSeekHandleShape(shape) {
+    const validShapes = ['none', 'circle', 'square', 'diamond', 'arrow', 'triangle', 'heart', 'star'];
+
+    if (!validShapes.includes(shape)) {
+        if (this.options.debug) console.warn('Invalid seek handle shape:', shape);
+        return this;
+    }
+
+    this.options.seekHandleShape = shape;
+
+    // Update handle class
+    if (this.progressHandle) {
+        // Remove all shape classes
+        validShapes.forEach(s => {
+            this.progressHandle.classList.remove(`progress-handle-${s}`);
+        });
+        // Add new shape class
+        this.progressHandle.classList.add(`progress-handle-${shape}`);
+    }
+
+    if (this.options.debug) console.log('Seek handle shape changed to:', shape);
+    return this;
+}
+
+/**
+ * Get current seek handle shape
+ * @returns {string} Current shape
+ */
+getSeekHandleShape() {
+    return this.options.seekHandleShape;
+}
+
+/**
+ * Get available seek handle shapes
+ * @returns {Array} Array of available shapes
+ */
+getAvailableSeekHandleShapes() {
+    return ['none', 'circle', 'square', 'diamond', 'arrow', 'triangle', 'heart', 'star'];
+}
+
 dispose() {
     if (this.qualityMonitorInterval) {
         clearInterval(this.qualityMonitorInterval);
@@ -2851,7 +2898,7 @@ createControls() {
                 <div class="progress-bar">
                     <div class="progress-buffer"></div>
                     <div class="progress-filled"></div>
-                    <div class="progress-handle"></div>
+                    <div class="progress-handle progress-handle-${this.options.seekHandleShape}"></div>
                 </div>
                 ${this.options.showSeekTooltip ? '<div class="seek-tooltip">0:00</div>' : ''}
             </div>

package/dist/myetv-player.min.js

@@ -435,6 +435,8 @@ constructor(videoElement, options = {}) {
         hlsLibUrl: 'https://cdn.jsdelivr.net/npm/hls.js@latest',
         adaptiveQualityControl: true,
        
+        seekHandleShape: 'circle',
+       
         audiofile: false,
         audiowave: false,
        
@@ -2038,6 +2040,41 @@ loadScript(src) {
     });
 }
 
+
+setSeekHandleShape(shape) {
+    const validShapes = ['none', 'circle', 'square', 'diamond', 'arrow', 'triangle', 'heart', 'star'];
+
+    if (!validShapes.includes(shape)) {
+        if (this.options.debug) console.warn('Invalid seek handle shape:', shape);
+        return this;
+    }
+
+    this.options.seekHandleShape = shape;
+
+   
+    if (this.progressHandle) {
+       
+        validShapes.forEach(s => {
+            this.progressHandle.classList.remove(`progress-handle-${s}`);
+        });
+       
+        this.progressHandle.classList.add(`progress-handle-${shape}`);
+    }
+
+    if (this.options.debug) console.log('Seek handle shape changed to:', shape);
+    return this;
+}
+
+
+getSeekHandleShape() {
+    return this.options.seekHandleShape;
+}
+
+
+getAvailableSeekHandleShapes() {
+    return ['none', 'circle', 'square', 'diamond', 'arrow', 'triangle', 'heart', 'star'];
+}
+
 dispose() {
     if (this.qualityMonitorInterval) {
         clearInterval(this.qualityMonitorInterval);
@@ -2772,7 +2809,7 @@ createControls() {
                 <div class="progress-bar">
                     <div class="progress-buffer"></div>
                     <div class="progress-filled"></div>
-                    <div class="progress-handle"></div>
+                    <div class="progress-handle progress-handle-${this.options.seekHandleShape}"></div>
                 </div>
                 ${this.options.showSeekTooltip ? '<div class="seek-tooltip">0:00</div>' : ''}
             </div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "myetv-player",
-  "version": "1.0.6",
+  "version": "1.0.8",
   "description": "MYETV Video Player - Modular JavaScript and SCSS Build System",
   "main": "dist/myetv-player.js",
   "scripts": {
@@ -30,3 +30,4 @@
 
 
 
+

package/scss/_controls.scss

@@ -1,30 +1,184 @@
-// ===================================
-// 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 *;
+
+// ===================================
+// 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: opacity 0.2s ease;
+    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
+}
+
+// ===================================
+// 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
+}

package/src/controls.js

@@ -354,7 +354,7 @@ createControls() {
                 <div class="progress-bar">
                     <div class="progress-buffer"></div>
                     <div class="progress-filled"></div>
-                    <div class="progress-handle"></div>
+                    <div class="progress-handle progress-handle-${this.options.seekHandleShape}"></div>
                 </div>
                 ${this.options.showSeekTooltip ? '<div class="seek-tooltip">0:00</div>' : ''}
             </div>

package/src/core.js

@@ -52,6 +52,8 @@ constructor(videoElement, options = {}) {
         dashLibUrl: 'https://cdn.dashjs.org/latest/dash.all.min.js', // Dash.js library URL
         hlsLibUrl: 'https://cdn.jsdelivr.net/npm/hls.js@latest', // HLS.js library URL
         adaptiveQualityControl: true, // Show quality control for adaptive streams
+        //seek shape
+        seekHandleShape: 'circle', // Available shape: none, circle, square, diamond, arrow, triangle, heart, star
         // AUDIO PLAYER
         audiofile: false,
         audiowave: false,
@@ -1695,6 +1697,51 @@ loadScript(src) {
     });
 }
 
+/**
+ * Set seek handle shape dynamically
+ * @param {string} shape - Shape type: none, circle, square, diamond, arrow, triangle, heart, star
+ * @returns {Object} this
+ */
+setSeekHandleShape(shape) {
+    const validShapes = ['none', 'circle', 'square', 'diamond', 'arrow', 'triangle', 'heart', 'star'];
+
+    if (!validShapes.includes(shape)) {
+        if (this.options.debug) console.warn('Invalid seek handle shape:', shape);
+        return this;
+    }
+
+    this.options.seekHandleShape = shape;
+
+    // Update handle class
+    if (this.progressHandle) {
+        // Remove all shape classes
+        validShapes.forEach(s => {
+            this.progressHandle.classList.remove(`progress-handle-${s}`);
+        });
+        // Add new shape class
+        this.progressHandle.classList.add(`progress-handle-${shape}`);
+    }
+
+    if (this.options.debug) console.log('Seek handle shape changed to:', shape);
+    return this;
+}
+
+/**
+ * Get current seek handle shape
+ * @returns {string} Current shape
+ */
+getSeekHandleShape() {
+    return this.options.seekHandleShape;
+}
+
+/**
+ * Get available seek handle shapes
+ * @returns {Array} Array of available shapes
+ */
+getAvailableSeekHandleShapes() {
+    return ['none', 'circle', 'square', 'diamond', 'arrow', 'triangle', 'heart', 'star'];
+}
+
 dispose() {
     if (this.qualityMonitorInterval) {
         clearInterval(this.qualityMonitorInterval);