myetv-player 1.0.10 → 1.1.1

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,11 +113,13 @@ 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 |
 | `brandLogoUrl` | string | `''` | Brand logo url in the controlbar (png, jpg, gif) - image height 44px - image width 120px |
 | `brandLogoLinkUrl` | string | `''` | Optional URL to open in a new page when clicking the brand logo in the controlbar
+| `brandLogoTooltipText` | string | `''` | Optional Custom tooltip of the brand logo (the default is the url of the brand logo, if present)
 | `watermarkUrl` | string | `''` | Optional URL of the image watermark over the video, reccomended dimension: width: 180px, height: 100px
 | `watermarkLink` | string | `''` | Optional URL to open in a new page when clicking the watermark logo in the video
 | `watermarkPosition` | string | `''` | Optional where to show the watermark logo in the video (values are: top-left, top-right, bottom-left, bottom-right)
@@ -185,7 +187,7 @@ player.getSelectedQuality();      // Selected quality
 player.getCurrentPlayingQuality(); // Actual playing quality
 player.enableAutoQuality();       // Enable automatic selection
 ```
-### Subtitle Controls
+### Subtitles Controls
 ```
 // Subtitles
 player.toggleSubtitles();         // Toggle subtitles
@@ -282,8 +284,21 @@ console.log(player.getCurrentResolution()); // Get current resolution
 ```
 ## API Events
 The MYETV Video Player includes a comprehensive custom event system that allows you to monitor all player state changes in real-time.
+### on player ready
+Description: Triggered when the video player is ready
+
+When: Player is ready to receive other events
+```
+player.addEventListener('playerready', (event) => {
+    console.log('Player is ready!', event);
+//now it's secure to call other apis method
+        player.setVolume(0.8);
+        player.play();
+});
+```
 ### on played
 Description: Triggered when the video starts playing
+
 When: User presses play or video starts automatically
 ```
 player.addEventListener('played', (event) => {
@@ -293,24 +308,72 @@ player.addEventListener('played', (event) => {
     });
 });
 ```
+### on playing
+Description: Triggered when the video is playing
+
+When: Video is effectively playing
+```
+player.addEventListener('playing', (event) => {
+    console.log('Video is playing at', event.currentTime);
+});
+```
 ### on paused
 Description: Triggered when the video is pause
+
 When: User presses pause or video stops
 ```
 player.addEventListener('paused', (event) => {
     console.log('Video paused at:', event.currentTime + 's');
 });
 ```
+### on waiting
+Description: Triggered when the video is buffering
+
+When: Video is buffering and is waiting
+```
+player.addEventListener('waiting', (event) => {
+    console.log('Video is buffering...');
+});
+```
+### on seeking
+Description: Triggered when the video is being seeking
+
+When: The user is seeking over the video
+```
+player.addEventListener('seeking', (event) => {
+    console.log('User is seeking to', event.targetTime);
+});
+```
+### on seeked
+Description: Triggered when the video is finished seeked
+
+When: The user have finished seeking and seeked the video
+```
+player.addEventListener('seeked', (event) => {
+    console.log('Seek completed at', event.currentTime);
+});
+```
 ### on ended
 Description: Triggered when the video is ended
+
 When: Video is ended
 ```
 player.addEventListener('ended', (e) => {
     console.log('Video terminato!', e.currentTime, e.duration, e.playlistInfo);
 });
 ```
+### on error
+Description: Triggered when the video have some error
+
+When: Video have some error on load
+```
+player.addEventListener('error', (event) => {
+    console.error('Playback error:', event.message);
+});
+```
 ### on subtitle change
 Description: Triggered when subtitles are enabled/disabled or track changes
+
 When: User toggles subtitles or switches subtitle tracks
 ```
 player.addEventListener('subtitlechange', (event) => {
@@ -323,6 +386,7 @@ player.addEventListener('subtitlechange', (event) => {
 ```
 ### on chapters change
 Description: Triggered when chapters are changes
+
 When: User switches chapters tracks
 ```
 player.on('chapterchange', (data) => {
@@ -331,6 +395,7 @@ player.on('chapterchange', (data) => {
 ```
 ### on pip change
 Description: Triggered when Picture-in-Picture mode changes
+
 When: Video enters or exits PiP mode
 ```
 player.addEventListener('pipchange', (event) => {
@@ -339,6 +404,7 @@ player.addEventListener('pipchange', (event) => {
 ```
 ### on fullscreen change
 Description: Triggered when fullscreen mode changes
+
 When: Player enters or exits fullscreen mode
 ```
 player.addEventListener('fullscreenchange', (event) => {
@@ -347,6 +413,7 @@ player.addEventListener('fullscreenchange', (event) => {
 ```
 ### on speed change
 Description: Triggered when playback speed changes
+
 When: User modifies playback speed (0.5x, 1x, 1.5x, 2x, etc.)
 ```
 player.addEventListener('speedchange', (event) => {
@@ -355,6 +422,7 @@ player.addEventListener('speedchange', (event) => {
 ```
 ### on time update
 Description: Triggered during playback to update progress
+
 When: Every 250ms during playback (throttled for performance)
 ```
 player.addEventListener('timeupdate', (event) => {
@@ -365,6 +433,7 @@ player.addEventListener('timeupdate', (event) => {
 ```
 ### on volumechange
 Description: Triggered when volume or mute state changes
+
 When: User modifies volume or toggles mute
 ```
 player.addEventListener('volumechange', (event) => {
@@ -383,6 +452,7 @@ player.addEventListener('playlistchange', (e) => {
 ```
 ### Main APIs
 getEventData()
+
 Returns all requested state data in a single object:
 ```
 const state = player.getEventData();
@@ -746,6 +816,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%;