myetv-player 1.2.0 → 1.4.0

package/css/myetv-player.css

@@ -480,6 +480,18 @@ body {
   -moz-osx-font-smoothing: grayscale;
 }
 
+.chapter-name {
+  font-size: 13px;
+  font-weight: 500;
+  color: rgba(255, 255, 255, 0.9);
+  margin-top: 6px;
+  max-width: 400px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  transition: opacity 0.3s;
+}
+
 /* CONTROLS CONTAINER - IMPROVED RESPONSIVE DESIGN */
 .controls {
   position: absolute;
@@ -985,6 +997,125 @@ body {
     transition: height 0.15s ease;
   }
 }
+/* ===================================
+   CHAPTERS IMPROVEMENTS
+   =================================== */
+.chapter-segment {
+  box-sizing: border-box;
+}
+
+.chapter-marker:hover {
+  background: rgba(0, 0, 0, 0.9) !important;
+}
+
+.chapter-tooltip {
+  animation: fadeIn 0.15s ease-in-out;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateX(-50%) translateY(-5px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(-50%) translateY(0);
+  }
+}
+.progress-container:hover .chapter-segment {
+  background: rgba(255, 255, 255, 0.4) !important;
+}
+
+.chapter-tooltip {
+  animation: fadeIn 0.15s ease-in-out;
+}
+.chapter-tooltip .chapter-tooltip-content {
+  display: flex;
+  flex-direction: column;
+}
+.chapter-tooltip .chapter-tooltip-image {
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  border-radius: 3px;
+}
+.chapter-tooltip .chapter-tooltip-title {
+  line-height: 1.3;
+}
+.chapter-tooltip .chapter-tooltip-time {
+  opacity: 0.8;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateX(-50%) translateY(-5px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(-50%) translateY(0);
+  }
+}
+.chapter-tooltip-hover .chapter-tooltip-content {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.chapter-tooltip-hover .chapter-tooltip-image {
+  width: 100%;
+  aspect-ratio: 16/9;
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  border-radius: 3px;
+  max-width: 180px;
+}
+.chapter-tooltip-hover .chapter-tooltip-title {
+  font-size: 13px;
+  font-weight: 600;
+  max-width: 180px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.chapter-tooltip-hover .chapter-tooltip-time {
+  font-size: 12px;
+  font-weight: 400;
+  color: rgba(255, 255, 255, 0.8);
+  max-width: 180px;
+}
+
+@media (max-width: 1200px) {
+  .chapter-tooltip-hover .chapter-tooltip-image {
+    max-width: 150px;
+  }
+  .chapter-tooltip-hover .chapter-tooltip-title,
+  .chapter-tooltip-hover .chapter-tooltip-time {
+    max-width: 150px;
+  }
+}
+@media (max-width: 768px) {
+  .chapter-tooltip-hover .chapter-tooltip-image {
+    max-width: 100px;
+  }
+  .chapter-tooltip-hover .chapter-tooltip-title,
+  .chapter-tooltip-hover .chapter-tooltip-time {
+    max-width: 100px;
+  }
+}
+@media (max-width: 480px) {
+  .chapter-tooltip-hover .chapter-tooltip-image {
+    max-width: 80px;
+  }
+  .chapter-tooltip-hover .chapter-tooltip-title {
+    font-size: 11px;
+    max-width: 80px;
+  }
+  .chapter-tooltip-hover .chapter-tooltip-time {
+    font-size: 10px;
+    max-width: 80px;
+  }
+}
 /* VOLUME CONTROLS - IMPROVED RESPONSIVE */
 .volume-container {
   display: flex;
@@ -1102,12 +1233,21 @@ body {
 }
 
 /* CONTROL MENUS */
-.speed-control,
-.quality-control,
-.subtitles-control {
+/* show quality menu in the controlbar */
+.quality-control {
   position: relative;
 }
 
+/* Hide individual subtitle button - it's now inside settings menu */
+.subtitles-control {
+  display: none !important;
+}
+
+/* Hide individual speed control button - it's now inside settings menu */
+.speed-control {
+  display: none !important;
+}
+
 .speed-menu,
 .quality-menu,
 .subtitles-menu {
@@ -1221,10 +1361,12 @@ body {
   color: var(--player-primary-color);
 }
 
-/* SETTINGS DROPDOWN MENU - FOR SMALL SCREENS */
+/* ========================================
+   SETTINGS DROPDOWN MENU - ALWAYS VISIBLE
+   ======================================== */
 .settings-control {
   position: relative;
-  display: none;
+  display: block !important;
 }
 
 .settings-btn {
@@ -1256,11 +1398,7 @@ body {
   background: var(--player-button-active);
 }
 
-.settings-btn .icon::before {
-  content: "⚙️";
-  font-size: 16px;
-}
-
+/* SETTINGS MENU CONTAINER */
 .settings-menu {
   position: absolute;
   bottom: 100%;
@@ -1277,15 +1415,44 @@ body {
   border: 1px solid rgba(255, 255, 255, 0.1);
   z-index: 100;
   box-shadow: var(--player-shadow-menu);
+  max-height: 200px;
+  overflow-y: auto;
+  overflow-x: hidden;
+  /* Custom scrollbar styling - Firefox */
+  scrollbar-width: thin;
+  scrollbar-color: var(--player-primary-color) rgba(255, 255, 255, 0.05);
 }
 
-/* ⚠️ Settings menu opens ONLY with .active (CLICK) */
+/* Settings menu opens ONLY with .active (CLICK) */
 .settings-menu.active {
   opacity: 1 !important;
   visibility: visible !important;
   pointer-events: all !important;
 }
 
+/* Custom scrollbar styling - Webkit browsers (Chrome, Safari, Edge) */
+.settings-menu::-webkit-scrollbar {
+  width: 8px;
+}
+
+.settings-menu::-webkit-scrollbar-track {
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 10px;
+}
+
+.settings-menu::-webkit-scrollbar-thumb {
+  background: var(--player-primary-color);
+  border-radius: 10px;
+  border: 2px solid transparent;
+  background-clip: content-box;
+}
+
+.settings-menu::-webkit-scrollbar-thumb:hover {
+  background: var(--player-primary-hover, var(--player-primary-color));
+  background-clip: content-box;
+}
+
+/* SETTINGS OPTIONS */
 .settings-option {
   padding: 8px 16px;
   color: var(--player-text-color);
@@ -1321,196 +1488,115 @@ body {
   opacity: 0.8;
 }
 
-/* Submenu styling - HIDDEN BY DEFAULT */
-.settings-submenu,
-.quality-submenu,
-.speed-submenu {
-  position: absolute;
-  bottom: 0;
-  right: 100%;
-  background: var(--player-bg-menu);
-  backdrop-filter: blur(10px);
-  border-radius: 8px;
-  padding: 8px 0;
-  margin-right: 5px;
-  opacity: 0;
-  visibility: hidden;
-  transition: all var(--player-transition-fast);
-  min-width: 150px;
-  max-width: 180px;
-  max-height: 250px;
-  overflow-y: auto;
-  overflow-x: hidden;
-  white-space: nowrap;
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  z-index: 101;
-  box-shadow: var(--player-shadow-menu);
-  pointer-events: none;
+/* ========================================
+   EXPANDABLE WRAPPER - For Speed, Subtitles
+   ======================================== */
+.settings-expandable-wrapper {
+  position: relative;
+  display: block;
 }
 
-/* ⚠️ SOLUTION: Submenus open on HOVER (easier and more intuitive) */
-.settings-option:hover .settings-submenu,
-.settings-option:hover .quality-submenu,
-.settings-option:hover .speed-submenu {
-  opacity: 1 !important;
-  visibility: visible !important;
-  transform: translateX(-2px) !important;
-  pointer-events: all !important;
+.settings-option.expandable-trigger {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  cursor: pointer;
+}
+.settings-option.expandable-trigger .settings-option-label {
+  font-size: 14px;
+}
+.settings-option.expandable-trigger .expand-arrow {
+  font-size: 12px;
+  transition: transform 0.2s ease;
+  margin-left: 8px;
 }
 
-.settings-submenu .settings-suboption,
-.quality-submenu .quality-option,
-.speed-submenu .speed-option {
-  padding: 8px 10px !important;
-  font-size: 12px !important;
-  white-space: nowrap !important;
-  overflow: hidden !important;
-  text-overflow: ellipsis !important;
+.settings-option.expandable-trigger:hover {
+  background: rgba(255, 255, 255, 0.1);
 }
 
+/* EXPANDABLE CONTENT - THE SUBMENU - HIDDEN BY DEFAULT */
+.settings-expandable-content {
+  padding-left: 15px;
+  margin-top: 4px;
+  display: none;
+  background: rgba(0, 0, 0, 0.3);
+  border-left: 3px solid var(--player-primary-color);
+}
+
+.settings-expandable-content.active {
+  display: block;
+}
+
+/* SUBOPTIONS (velocità, tracce sottotitoli) */
 .settings-suboption {
-  padding: 8px 16px;
-  color: var(--player-text-color);
+  padding: 8px 12px;
   cursor: pointer;
-  transition: all var(--player-transition-fast);
+  color: white;
   font-size: 13px;
+  white-space: normal;
+  word-wrap: break-word;
+  opacity: 0.8;
+  transition: opacity 0.2s;
   display: flex;
   align-items: center;
   justify-content: space-between;
 }
 
 .settings-suboption:hover {
+  opacity: 1;
   background: rgba(255, 255, 255, 0.1);
-  color: var(--player-primary-color);
 }
 
 .settings-suboption.active {
+  opacity: 1;
+  font-weight: bold;
   color: var(--player-primary-color);
-  font-weight: 600;
-  background: rgba(255, 255, 255, 0.05);
 }
 
 .settings-suboption.active::after {
   content: "✓";
   font-size: 12px;
-  color: var(--player-primary-color);
 }
 
-/* Visual indicator for options with submenus */
-.settings-option:has(.settings-submenu, .quality-submenu, .speed-submenu)::after {
-  content: "▶";
-  font-size: 10px;
-  color: var(--player-text-secondary);
-  margin-left: 8px;
-}
-
-.settings-option:hover::after {
-  color: var(--player-primary-color);
-}
-
-/* RESPONSIVE - PROGRESSIVE REDUCTION */
+/* ========================================
+   RESPONSIVE ADJUSTMENTS
+   ======================================== */
 @media (max-width: 768px) {
   .settings-menu > .settings-option {
-    font-size: 12px !important;
+    font-size: 13px;
   }
-  .settings-submenu,
-  .quality-submenu,
-  .speed-submenu {
-    max-width: min(140px, 100vw - 180px) !important;
-  }
-  .settings-submenu .settings-suboption,
-  .quality-submenu .quality-option,
-  .speed-submenu .speed-option {
-    padding: 7px 8px !important;
-    font-size: 11px !important;
+  .settings-suboption {
+    font-size: 12px;
+    padding: 7px 10px;
   }
 }
 @media (max-width: 600px) {
   .settings-menu > .settings-option {
-    font-size: 11px !important;
-  }
-  .settings-submenu,
-  .quality-submenu,
-  .speed-submenu {
-    max-width: min(120px, 100vw - 160px) !important;
+    font-size: 12px;
   }
-  .settings-submenu .settings-suboption,
-  .quality-submenu .quality-option,
-  .speed-submenu .speed-option {
-    padding: 6px 7px !important;
-    font-size: 10px !important;
+  .settings-suboption {
+    font-size: 11px;
+    padding: 6px 8px;
   }
 }
 @media (max-width: 450px) {
   .settings-menu > .settings-option {
-    font-size: 10px !important;
-  }
-  .settings-submenu,
-  .quality-submenu,
-  .speed-submenu {
-    max-width: min(100px, 100vw - 140px) !important;
+    font-size: 11px;
   }
-  .settings-submenu .settings-suboption,
-  .quality-submenu .quality-option,
-  .speed-submenu .speed-option {
-    padding: 5px 6px !important;
-    font-size: 9px !important;
+  .settings-suboption {
+    font-size: 10px;
+    padding: 5px 6px;
   }
 }
 @media (max-width: 350px) {
   .settings-control {
     display: block !important;
   }
-  .pip-btn,
-  .speed-control,
-  .subtitles-control {
+  .pip-btn {
     display: none !important;
   }
 }
-.settings-expandable-wrapper {
-  position: relative;
-  display: block;
-}
-
-.settings-option.expandable-trigger {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  cursor: pointer;
-  font-size: 10px !important;
-}
-.settings-option.expandable-trigger .settings-option-label {
-  font-size: 10px !important;
-}
-.settings-option.expandable-trigger .expand-arrow {
-  font-size: 8px;
-  transition: transform 0.2s ease;
-  margin-left: 8px;
-}
-
-.settings-expandable-content {
-  padding-left: 15px;
-  margin-top: 4px;
-}
-.settings-expandable-content .settings-suboption {
-  padding: 6px 12px;
-  cursor: pointer;
-  color: white;
-  font-size: 10px;
-  white-space: normal;
-  word-wrap: break-word;
-  opacity: 0.8;
-  transition: opacity 0.2s;
-}
-.settings-expandable-content .settings-suboption.active {
-  opacity: 1;
-  font-weight: bold;
-}
-.settings-expandable-content .settings-suboption:hover {
-  opacity: 1;
-  background: rgba(255, 255, 255, 0.1);
-}
-
 .audio-player {
   width: 320px;
   height: 80px;
@@ -1766,19 +1852,8 @@ body {
     margin-right: 5px;
   }
 }
-/* SCHERMI MOLTO PICCOLI - ATTIVA MENU SETTINGS DROPDOWN */
+/* MENU SETTINGS DROPDOWN */
 @media (max-width: 350px) {
-  /* Mostra il menu Settings solo su schermi molto piccoli */
-  .settings-control {
-    display: block !important;
-  }
-  /* Nascondi i controlli individuali e spostali nel menu */
-  .pip-btn,
-  .speed-control,
-  .subtitles-control {
-    display: none !important;
-  }
-  /* Riduci ulteriormente gli spazi */
   .controls-left,
   .controls-right {
     gap: 4px;
@@ -1805,9 +1880,9 @@ body {
     margin-right: 3px;
   }
   .volume-slider {
-    width: 30px; /* Volume slider ancora più piccolo */
+    width: 30px;
   }
-  /* Riduci il menu settings per schermi ultra-piccoli */
+  /* screen small */
   .settings-menu {
     min-width: 160px;
     font-size: 12px;
@@ -1854,7 +1929,6 @@ body {
   .volume-slider {
     width: 25px;
   }
-  /* Menu settings ultra-compatto */
   .settings-menu {
     min-width: 140px;
     font-size: 11px;
@@ -1871,7 +1945,7 @@ body {
     font-size: 10px;
   }
 }
-/* OVERFLOW HANDLING - CRITICAL FIX */
+/* OVERFLOW HANDLING */
 @media (max-width: 600px) {
   .controls-main {
     /* Allow horizontal scrolling if absolutely necessary */