myetv-player 1.1.5 → 1.2.0

package/scss/_controls.scss

@@ -29,6 +29,22 @@
     z-index: 20 !important;
 }
 
+.play-icon svg,
+.pause-icon svg,
+.volume-icon svg,
+.mute-icon svg,
+.playlist-prev-btn .icon svg,
+.playlist-next-btn .icon svg,
+.subtitles-btn .icon svg,
+.fullscreen-icon svg,
+.exit-fullscreen-icon svg,
+.pip-icon svg,
+.pip-exit-icon svg {
+    width: 16px;
+    height: 16px;
+    display: block;
+}
+
 /* MAIN CONTROLS - IMPROVED RESPONSIVE LAYOUT */
 .controls-main {
     display: flex;

package/scss/_responsive.scss

@@ -74,6 +74,14 @@
         gap: 6px;
     }
 
+    .progress-container {
+        margin-bottom: 10px;
+    }
+
+    .controls-main {
+        padding-top: 6px;
+    }
+
     .volume-container {
         /* Reduce volume slider width further instead of hiding */
         flex-shrink: 3;

package/src/controls.js

@@ -229,6 +229,52 @@ clearControlsTimeout() {
     }
 }
 
+// Default controlbar styles injection
+injectDefaultControlbarStyles() {
+    if (document.getElementById('default-controlbar-styles')) {
+        return;
+    }
+
+    const controlBarOpacity = Math.max(0, Math.min(1, this.options.controlBarOpacity));
+    const titleOverlayOpacity = Math.max(0, Math.min(1, this.options.titleOverlayOpacity));
+
+    const style = document.createElement('style');
+    style.id = 'default-controlbar-styles';
+    style.textContent = `
+        .video-wrapper:not(.youtube-active):not(.vimeo-active):not(.facebook-active) .controls {
+            background: linear-gradient(
+                to top,
+                rgba(0, 0, 0, ${controlBarOpacity}) 0%,
+                rgba(0, 0, 0, ${controlBarOpacity * 0.89}) 20%,
+                rgba(0, 0, 0, ${controlBarOpacity * 0.74}) 40%,
+                rgba(0, 0, 0, ${controlBarOpacity * 0.53}) 60%,
+                rgba(0, 0, 0, ${controlBarOpacity * 0.32}) 80%,
+                rgba(0, 0, 0, ${controlBarOpacity * 0.21}) 100%
+            );
+            backdrop-filter: blur(3px);
+            min-height: 60px;
+            padding-bottom: 10px;
+        }
+        
+        .video-wrapper:not(.youtube-active):not(.vimeo-active):not(.facebook-active) .title-overlay {
+            background: linear-gradient(
+                to bottom,
+                rgba(0, 0, 0, ${titleOverlayOpacity}) 0%,
+                rgba(0, 0, 0, ${titleOverlayOpacity * 0.89}) 20%,
+                rgba(0, 0, 0, ${titleOverlayOpacity * 0.74}) 40%,
+                rgba(0, 0, 0, ${titleOverlayOpacity * 0.53}) 60%,
+                rgba(0, 0, 0, ${titleOverlayOpacity * 0.32}) 80%,
+                rgba(0, 0, 0, ${titleOverlayOpacity * 0.21}) 100%
+            );
+            backdrop-filter: blur(3px);
+            min-height: 80px;
+            padding-top: 20px;
+        }
+    `;
+
+    document.head.appendChild(style);
+}
+
 // Debug methods
 enableAutoHideDebug() {
     this.autoHideDebug = true;
@@ -376,20 +422,20 @@ createControls() {
         <div class="progress-buffer"></div>
         <div class="progress-filled"></div>
     </div>
-    <div class="progress-handle progress-handle-${this.options.seekHandleShape}"></div>  <!-- ✅ Fuori da progress-bar -->
+    <div class="progress-handle progress-handle-${this.options.seekHandleShape}"></div>
     ${this.options.showSeekTooltip ? '<div class="seek-tooltip">0:00</div>' : ''}
 </div>
 
             <div class="controls-main">
                 <div class="controls-left">
                     <button class="control-btn play-pause-btn" data-tooltip="play_pause">
-                        <span class="icon play-icon">▶</span>
-                        <span class="icon pause-icon hidden">⏸</span>
+                        <span class="icon play-icon"><svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor"><path d="M8 5v14l11-7z"/></svg></span>
+                        <span class="icon pause-icon hidden"><svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor"><path d="M6 4h4v16H6zm8 0h4v16h-4z"/></svg></span>
                     </button>
 
                     <button class="control-btn mute-btn" data-tooltip="mute_unmute">
-    <span class="icon volume-icon">🔊</span>
-    <span class="icon mute-icon hidden">🔇</span>
+    <span class="icon volume-icon"><svg viewBox="0 0 16 16" width="16" height="16" fill="currentColor"><path d="M11.536 14.01A8.473 8.473 0 0 0 14.026 8a8.473 8.473 0 0 0-2.49-6.01l-.708.707A7.476 7.476 0 0 1 13.025 8c0 2.071-.84 3.946-2.197 5.303z"/><path d="M10.121 12.596A6.48 6.48 0 0 0 12.025 8a6.48 6.48 0 0 0-1.904-4.596l-.707.707A5.483 5.483 0 0 1 11.025 8a5.483 5.483 0 0 1-1.61 3.89z"/><path d="M10.025 8a4.486 4.486 0 0 1-1.318 3.182L8 10.475A3.489 3.489 0 0 0 9.025 8c0-.966-.392-1.841-1.025-2.475l.707-.707A4.486 4.486 0 0 1 10.025 8M7 4a.5.5 0 0 0-.812-.39L3.825 5.5H1.5A.5.5 0 0 0 1 6v4a.5.5 0 0 0 .5.5h2.325l2.363 1.89A.5.5 0 0 0 7 12z"/></svg></span>
+    <span class="icon mute-icon hidden"><svg viewBox="0 0 16 16" width="16" height="16" fill="currentColor"><path d="M6.717 3.55A.5.5 0 0 1 7 4v8a.5.5 0 0 1-.812.39L3.825 10.5H1.5A.5.5 0 0 1 1 10V6a.5.5 0 0 1 .5-.5h2.325l2.363-1.89a.5.5 0 0 1 .529-.06m7.137 2.096a.5.5 0 0 1 0 .708L12.207 8l1.647 1.646a.5.5 0 0 1-.708.708L11.5 8.707l-1.646 1.647a.5.5 0 0 1-.708-.708L10.793 8 9.146 6.354a.5.5 0 1 1 .708-.708L11.5 7.293l1.646-1.647a.5.5 0 0 1 .708 0"/></svg></span>
                     </button>
 
                     <div class="volume-container" data-mobile-slider="${this.options.volumeSlider}">
@@ -404,18 +450,17 @@ createControls() {
                 </div>
 
                 <div class="controls-right">
-                    <button class="control-btn playlist-prev-btn" data-tooltip="prevvideo" style="display: none;">
-                        <span class="icon">⏮</span>
-                    </button>
-
-                    <button class="control-btn playlist-next-btn" data-tooltip="nextvideo" style="display: none;">
-                        <span class="icon">⏭</span>
-                    </button>
+<button class="control-btn playlist-prev-btn" data-tooltip="prevvideo" style="display: none;">
+    <span class="icon"><svg viewBox="0 0 16 16" width="16" height="16" fill="currentColor"><path d="M3.5 12V4l7 4zm8-8v8l-7-4z"/></svg></span>
+</button>
+<button class="control-btn playlist-next-btn" data-tooltip="nextvideo" style="display: none;">
+    <span class="icon"><svg viewBox="0 0 16 16" width="16" height="16" fill="currentColor"><path d="M12.5 4v8l-7-4zm-8 0v8l7-4z"/></svg></span>
+</button>
 
                     ${this.options.showSubtitles ? `
                     <div class="subtitles-control" style="display: none;">
                         <button class="control-btn subtitles-btn" data-tooltip="subtitles">
-                            <span class="icon">CC</span>
+    <span class="icon"><svg viewBox="0 0 16 16" width="16" height="16" fill="currentColor"><path d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2zm2-1a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1z"/><path d="M6.096 4.972c.234 0 .44.05.617.152.177.1.312.235.405.403.093.169.14.36.14.577 0 .216-.047.406-.14.572a1.03 1.03 0 0 1-.405.403 1.2 1.2 0 0 1-.617.152 1.2 1.2 0 0 1-.615-.152 1.03 1.03 0 0 1-.406-.403 1.28 1.28 0 0 1-.14-.572c0-.216.046-.408.14-.577.093-.168.228-.303.406-.403.177-.101.383-.152.615-.152m4.915 0c.234 0 .44.05.617.152.177.1.312.235.405.403.093.169.14.36.14.577 0 .216-.047.406-.14.572a1.03 1.03 0 0 1-.405.403 1.2 1.2 0 0 1-.617.152 1.2 1.2 0 0 1-.615-.152 1.03 1.03 0 0 1-.406-.403 1.28 1.28 0 0 1-.14-.572c0-.216.046-.408.14-.577.093-.168.228-.303.406-.403.177-.101.383-.152.615-.152M6.096 9.972c.234 0 .44.05.617.152.177.1.312.235.405.403.093.169.14.36.14.577 0 .216-.047.406-.14.572a1.03 1.03 0 0 1-.405.403 1.2 1.2 0 0 1-.617.152 1.2 1.2 0 0 1-.615-.152 1.03 1.03 0 0 1-.406-.403 1.28 1.28 0 0 1-.14-.572c0-.216.046-.408.14-.577.093-.168.228-.303.406-.403.177-.101.383-.152.615-.152m4.915 0c.234 0 .44.05.617.152.177.1.312.235.405.403.093.169.14.36.14.577 0 .216-.047.406-.14.572a1.03 1.03 0 0 1-.405.403 1.2 1.2 0 0 1-.617.152 1.2 1.2 0 0 1-.615-.152 1.03 1.03 0 0 1-.406-.403 1.28 1.28 0 0 1-.14-.572c0-.216.046-.408.14-.577.093-.168.228-.303.406-.403.177-.101.383-.152.615-.152"/></svg></span>
                         </button>
                         <div class="subtitles-menu">
                             <div class="subtitles-option active" data-track="off">Off</div>
@@ -456,22 +501,22 @@ createControls() {
 
                     ${this.options.showPictureInPicture && this.isPiPSupported ? `
                     <button class="control-btn pip-btn" data-tooltip="picture_in_picture">
-                        <span class="icon pip-icon">⧉</span>
-                        <span class="icon pip-exit-icon hidden">⧉</span>
+                        <span class="icon pip-icon"><svg viewBox="0 0 16 16" width="16" height="16" fill="currentColor"><path d="M0 3.5A1.5 1.5 0 0 1 1.5 2h13A1.5 1.5 0 0 1 16 3.5v9a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 0 12.5zM1.5 3a.5.5 0 0 0-.5.5v9a.5.5 0 0 0 .5.5h13a.5.5 0 0 0 .5-.5v-9a.5.5 0 0 0-.5-.5z"/><path d="M8 8.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 .5.5v3a.5.5 0 0 1-.5.5h-5a.5.5 0 0 1-.5-.5z"/></svg></span>
+                        <span class="icon pip-exit-icon hidden"><svg viewBox="0 0 16 16" width="16" height="16" fill="currentColor"><path d="M0 3.5A1.5 1.5 0 0 1 1.5 2h13A1.5 1.5 0 0 1 16 3.5v9a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 0 12.5zM1.5 3a.5.5 0 0 0-.5.5v9a.5.5 0 0 0 .5.5h13a.5.5 0 0 0 .5-.5v-9a.5.5 0 0 0-.5-.5z"/></svg></span>
                     </button>
                     ` : ''}
 
                     <div class="settings-control">
                         <button class="control-btn settings-btn" data-tooltip="settings_menu">
-                            <span class="">⚙</span>
+                            <span class="icon"><svg viewBox="0 0 16 16" width="16" height="16" fill="currentColor"><path d="M8 4.754a3.246 3.246 0 1 0 0 6.492 3.246 3.246 0 0 0 0-6.492M5.754 8a2.246 2.246 0 1 1 4.492 0 2.246 2.246 0 0 1-4.492 0"/><path d="M9.796 1.343c-.527-1.79-3.065-1.79-3.592 0l-.094.319a.873.873 0 0 1-1.255.52l-.292-.16c-1.64-.892-3.433.902-2.54 2.541l.159.292a.873.873 0 0 1-.52 1.255l-.319.094c-1.79.527-1.79 3.065 0 3.592l.319.094a.873.873 0 0 1 .52 1.255l-.16.292c-.892 1.64.901 3.434 2.541 2.54l.292-.159a.873.873 0 0 1 1.255.52l.094.319c.527 1.79 3.065 1.79 3.592 0l.094-.319a.873.873 0 0 1 1.255-.52l.292.16c1.64.893 3.434-.902 2.54-2.541l-.159-.292a.873.873 0 0 1 .52-1.255l.319-.094c1.79-.527 1.79-3.065 0-3.592l-.319-.094a.873.873 0 0 1-.52-1.255l.16-.292c.893-1.64-.902-3.433-2.541-2.54l-.292.159a.873.873 0 0 1-1.255-.52z"/></svg></span>
                         </button>
                         <div class="settings-menu"></div>
                     </div>
 
                     ${this.options.showFullscreen ? `
                     <button class="control-btn fullscreen-btn" data-tooltip="fullscreen">
-                        <span class="icon fullscreen-icon">⛶</span>
-                        <span class="icon exit-fullscreen-icon hidden">⛉</span>
+                        <span class="icon fullscreen-icon"><svg viewBox="0 0 16 16" width="16" height="16" fill="currentColor"><path d="M1.5 1a.5.5 0 0 0-.5.5v4a.5.5 0 0 1-1 0v-4A1.5 1.5 0 0 1 1.5 0h4a.5.5 0 0 1 0 1zM10 .5a.5.5 0 0 1 .5-.5h4A1.5 1.5 0 0 1 16 1.5v4a.5.5 0 0 1-1 0v-4a.5.5 0 0 0-.5-.5h-4a.5.5 0 0 1-.5-.5M.5 10a.5.5 0 0 1 .5.5v4a.5.5 0 0 0 .5.5h4a.5.5 0 0 1 0 1h-4A1.5 1.5 0 0 1 0 14.5v-4a.5.5 0 0 1 .5-.5m15 0a.5.5 0 0 1 .5.5v4a1.5 1.5 0 0 1-1.5 1.5h-4a.5.5 0 0 1 0-1h4a.5.5 0 0 0 .5-.5v-4a.5.5 0 0 1 .5-.5"/></svg></span>
+                        <span class="icon exit-fullscreen-icon hidden"><svg viewBox="0 0 16 16" width="16" height="16" fill="currentColor"><path d="M5.5 0a.5.5 0 0 1 .5.5v4A1.5 1.5 0 0 1 4.5 6h-4a.5.5 0 0 1 0-1h4a.5.5 0 0 0 .5-.5v-4a.5.5 0 0 1 .5-.5m5 0a.5.5 0 0 1 .5.5v4a.5.5 0 0 0 .5.5h4a.5.5 0 0 1 0 1h-4A1.5 1.5 0 0 1 10 4.5v-4a.5.5 0 0 1 .5-.5M0 10.5a.5.5 0 0 1 .5-.5h4A1.5 1.5 0 0 1 6 11.5v4a.5.5 0 0 1-1 0v-4a.5.5 0 0 0-.5-.5h-4a.5.5 0 0 1-.5-.5m10 1a1.5 1.5 0 0 1 1.5-1.5h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 0-.5.5v4a.5.5 0 0 1-1 0z"/></svg></span>
                     </button>
                     ` : ''}
                 </div>

package/src/core.js

@@ -29,6 +29,8 @@ constructor(videoElement, options = {}) {
         videoTitle: '',              // Title text to show in overlay
         videoSubtitle: '',           // Subtitle text to show in overlay
         persistentTitle: false,   // If true, title overlay stays visible
+        controlBarOpacity: options.controlBarOpacity !== undefined ? options.controlBarOpacity : 0.95, // Opacity of control bar (0.0 to 1.0)
+        titleOverlayOpacity: options.titleOverlayOpacity !== undefined ? options.titleOverlayOpacity : 0.95, // Opacity of title overlay (0.0 to 1.0)
         debug: false,             // Enable/disable debug logging
         autoplay: false,          // if video should autoplay at start
         defaultQuality: 'auto',   // 'auto', '1080p', '720p', '480p', etc.
@@ -169,7 +171,9 @@ constructor(videoElement, options = {}) {
     };
 
     this.lastTimeUpdate = 0; // For throttling timeupdate events
-
+    // Inject default styles
+    this.injectDefaultControlbarStyles();
+    // Set language if specified
     if (this.options.language && this.isI18nAvailable()) {
         VideoPlayerTranslations.setLanguage(this.options.language);
     }

package/src/events.js

@@ -171,6 +171,13 @@
         this.video.addEventListener('playing', () => {
             this.hideLoading();
             this.closeAllMenus();
+
+            // Update play/pause button when video actually starts playing
+            if (this.playIcon && this.pauseIcon) {
+                this.playIcon.classList.add('hidden');
+                this.pauseIcon.classList.remove('hidden');
+            }
+
             // Trigger playing event - video is now actually playing
             this.triggerEvent('playing', {
                 currentTime: this.getCurrentTime(),
@@ -379,17 +386,91 @@
             this.pipBtn.addEventListener('click', () => this.togglePictureInPicture());
         }
 
-        if (this.subtitlesBtn) {
-            this.subtitlesBtn.addEventListener('click', () => this.toggleSubtitles());
-        }
+    if (this.volumeSlider) {
+        let isDraggingVolume = false;
 
-        if (this.volumeSlider) {
-            this.volumeSlider.addEventListener('input', (e) => {
-                this.updateVolume(e.target.value);
+        // Input event
+        this.volumeSlider.addEventListener('input', (e) => {
+            this.updateVolume(e.target.value);
+            this.updateVolumeSliderVisual();
+            this.initVolumeTooltip();
+        });
+
+        // MOUSE DRAG - Start
+        this.volumeSlider.addEventListener('mousedown', (e) => {
+            isDraggingVolume = true;
+            if (this.volumeTooltip) {
+                this.volumeTooltip.classList.add('visible');
+            }
+        });
+
+        // MOUSE DRAG - Move
+        document.addEventListener('mousemove', (e) => {
+            if (isDraggingVolume && this.volumeSlider) {
+                const rect = this.volumeSlider.getBoundingClientRect();
+                const clickX = e.clientX - rect.left;
+                const percentage = Math.max(0, Math.min(1, clickX / rect.width));
+                const value = Math.round(percentage * 100);
+
+                this.volumeSlider.value = value;
+                this.updateVolume(value);
                 this.updateVolumeSliderVisual();
-                this.initVolumeTooltip();
-            });
-        }
+                if (this.volumeTooltip) {
+                    this.updateVolumeTooltipPosition(value / 100);
+                }
+            }
+        });
+
+        // MOUSE DRAG - End
+        document.addEventListener('mouseup', () => {
+            if (isDraggingVolume) {
+                isDraggingVolume = false;
+                if (this.volumeTooltip) {
+                    setTimeout(() => {
+                        this.volumeTooltip.classList.remove('visible');
+                    }, 300);
+                }
+            }
+        });
+
+        // TOUCH DRAG - Start
+        this.volumeSlider.addEventListener('touchstart', (e) => {
+            isDraggingVolume = true;
+            if (this.volumeTooltip) {
+                this.volumeTooltip.classList.add('visible');
+            }
+        }, { passive: true });
+
+        // TOUCH DRAG - Move
+        this.volumeSlider.addEventListener('touchmove', (e) => {
+            if (isDraggingVolume) {
+                const touch = e.touches[0];
+                const rect = this.volumeSlider.getBoundingClientRect();
+                const touchX = touch.clientX - rect.left;
+                const percentage = Math.max(0, Math.min(1, touchX / rect.width));
+                const value = Math.round(percentage * 100);
+
+                this.volumeSlider.value = value;
+                this.updateVolume(value);
+                this.updateVolumeSliderVisual();
+                if (this.volumeTooltip) {
+                    this.updateVolumeTooltipPosition(value / 100);
+                }
+            }
+        }, { passive: true });
+
+        // TOUCH DRAG - End
+        this.volumeSlider.addEventListener('touchend', () => {
+            if (isDraggingVolume) {
+                isDraggingVolume = false;
+                if (this.volumeTooltip) {
+                    setTimeout(() => {
+                        this.volumeTooltip.classList.remove('visible');
+                    }, 300);
+                }
+            }
+        }, { passive: true });
+    }
 
     if (this.progressContainer) {
         // Mouse events (desktop)