myetv-player 1.0.10 → 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

@@ -2433,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;
@@ -4744,6 +4769,50 @@ video::-webkit-media-text-track-display {
   -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%;