myetv-player 1.0.8 → 1.1.0

package/README.md

@@ -15,7 +15,7 @@ A modern and complete HTML5 + JavaScript + css video player with custom controls
 - [Api Events](#api-events)
 - [Keyboard Controls](#keyboard-controls)
 - [CSS Customization](#css-customization)
-- [Browser Compatibility](#browser-compatibility)
+- [Multi-Language i18n](#internationalization-i18n)
 - [Plugins Feature](#plugins-feature)
 - [Chapters Feature](#chapters-feature)
 - [Playlist Feature](#playlist-feature)
@@ -113,6 +113,7 @@ const player = new MYETVvideoplayer('my-video', {
 | `defaultQuality` | string | `'auto'` | Default video quality |
 | `showTitleOverlay` | boolean | `false` | Show video title overlay |
 | `videoTitle` | string | `''` | Title to show in overlay |
+| `videoSubtitle` | string | `''` | Sub-Title to show in overlay |
 | `persistentTitle` | boolean | `false` | Keep title always visible |
 | `language` | string | `en` | Interface language code |
 | `brandLogoEnabled` | boolean | `false` | Show/hide the brand logo in the controlbar |
@@ -185,7 +186,7 @@ player.getSelectedQuality();      // Selected quality
 player.getCurrentPlayingQuality(); // Actual playing quality
 player.enableAutoQuality();       // Enable automatic selection
 ```
-### Subtitle Controls
+### Subtitles Controls
 ```
 // Subtitles
 player.toggleSubtitles();         // Toggle subtitles
@@ -746,6 +747,79 @@ Minimal DOM manipulation thanks to CSS-based theming
 
 Hardware-accelerated transitions for smooth playback
 
+## Internationalization (i18n)
+
+The MYETV player includes a comprehensive internationalization system that allows the user interface to be displayed in multiple languages. The system automatically translates all controls, buttons, tooltips, and player messages into the selected language.
+
+### Automatic Language Detection
+
+If no language is specified in the initialization options, the player **automatically detects the language from the user's browser** using `navigator.language`. The system extracts the language code (e.g., `en` from `en-US`) and if a translation is available, applies it automatically. Otherwise, it defaults to English.
+
+### Available Languages
+
+The player currently supports the following languages:
+
+| Code | Language | Native Name |
+|------|----------|-------------|
+| `it` | Italian | Italiano |
+| `en` | English | English |
+| `es` | Spanish | Español |
+| `fr` | French | Français |
+| `de` | German | Deutsch |
+| `pt` | Portuguese | Português |
+| `zh` | Chinese | 中文 |
+| `ja` | Japanese | 日本語 |
+| `ru` | Russian | Русский |
+| `ar` | Arabic | العربية |
+
+### Setting Language at Initialization
+
+To specify a language during player initialization, use the `language` option:
+```
+const player = new VideoPlayer('myVideo', {
+language: 'en', // Set to English
+// other options...
+});
+```
+### Changing Language Dynamically
+
+You can change the player language at any time using the `setLanguage()` method:
+```
+// Change language to Spanish
+player.setLanguage('es');
+
+// Change language to French
+player.setLanguage('fr');
+```
+The method returns `true` if the language was successfully changed, `false` if the specified language is not available.
+
+### Getting Language Information
+
+The player provides several methods to retrieve language information:
+
+#### Get current language:
+```
+const currentLang = player.getCurrentLanguage();
+console.log(currentLang); // e.g., 'en'
+```
+#### Get list of supported languages:
+```
+const languages = player.getSupportedLanguages();
+console.log(languages); // ['it', 'en', 'es', 'fr', 'de', 'pt', 'zh', 'ja', 'ru', 'ar']
+```
+### Translated Elements
+
+The i18n system automatically translates the following interface elements:
+
+- Control buttons (play/pause, mute, fullscreen, etc.)
+- Settings menus
+- Video quality options
+- Subtitle controls
+- Playback speed controls
+- Playlist controls
+- Tooltips and help messages
+- Brand logo
+
 ## Plugins feature
 The player supports custom plugins to extend its functionality. Every plugins must have its own documentation to clearly known how to use it. Plugins are modular so you can add or remove any plugins whenever you want. This is just an example based on two plugins.
 

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;
@@ -2515,6 +2433,31 @@ video::-webkit-media-text-track-display {
   -moz-osx-font-smoothing: grayscale;
 }
 
+.subtitle-text {
+  color: var(--player-text-color);
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 1.3;
+  margin: 5px 0 0 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
+  opacity: 0.9;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+@media (max-width: 768px) {
+  .subtitle-text {
+    font-size: 12px;
+  }
+}
+@media (max-width: 480px) {
+  .subtitle-text {
+    font-size: 11px;
+  }
+}
 /* CONTROLS - IMPROVED RESPONSIVE DESIGN */
 .controls {
   position: absolute;
@@ -4591,6 +4534,19 @@ video::-webkit-media-text-track-display {
   cursor: pointer !important;
 }
 
+.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;
@@ -4642,7 +4598,7 @@ video::-webkit-media-text-track-display {
   height: 14px;
   background: var(--player-accent, #ff0000);
   cursor: grab;
-  transition: opacity 0.2s ease;
+  transition: all 0.2s ease;
   z-index: 10;
   pointer-events: auto;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
@@ -4712,6 +4668,75 @@ video::-webkit-media-text-track-display {
   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;
@@ -4737,6 +4762,57 @@ video::-webkit-media-text-track-display {
   z-index: 20 !important;
 }
 
+.progress-container,
+.progress-bar,
+.progress-handle {
+  touch-action: none;
+  -webkit-touch-callout: none;
+}
+
+/* Badge for video in encoding (duration Infinity/NaN) */
+.encoding-badge {
+  display: inline-block;
+  background: rgba(128, 128, 128, 0.8);
+  color: white;
+  padding: 2px 8px;
+  border-radius: 4px;
+  font-size: 11px;
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  white-space: nowrap;
+  backdrop-filter: blur(4px);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  animation: encoding-pulse 2s ease-in-out infinite;
+}
+
+/* Class for the container when shows the badge */
+.time-display .encoding-state {
+  display: flex;
+  align-items: center;
+}
+
+/* animation for the badge */
+@keyframes encoding-pulse {
+  0%, 100% {
+    opacity: 0.8;
+  }
+  50% {
+    opacity: 1;
+  }
+}
+@media (max-width: 480px) {
+  .encoding-badge {
+    font-size: 9px;
+    padding: 1px 6px;
+  }
+}
+@media (max-width: 350px) {
+  .encoding-badge {
+    font-size: 8px;
+    padding: 1px 4px;
+  }
+}
 /* PROGRESS BAR */
 .progress-container {
   width: 100%;
@@ -12517,6 +12593,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;
@@ -12557,6 +12681,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) {
@@ -13780,128 +14018,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;
-}