eb-player 2.2.0 → 2.3.1

package/dist/build/eb-player.css

@@ -3341,6 +3341,26 @@
   flex-direction: row-reverse;
 }
 
+[dir="rtl"] .eb-seekbar-buffered,
+[dir="rtl"] .eb-seekbar-progress {
+  left: auto;
+  right: 0;
+}
+
+[dir="rtl"] .eb-seekbar-thumb {
+  right: auto;
+  left: -6px;
+}
+
+[dir="rtl"] .eb-chapter-marker {
+  transform: translateX(50%);
+}
+
+[dir="rtl"] .eb-epg-segment {
+  border-right: none;
+  border-left: 1px solid rgba(255, 255, 255, 0.3);
+}
+
 /* ============================================================
    Responsive: ensure container fills parent
    ============================================================ */

package/dist/build/ebplayer.bundle.js

@@ -4,7 +4,7 @@
     (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.EBPlayer = {}));
 })(this, (function (exports) { 'use strict';
 
-    var __EB_PLAYER_VERSION__ = "2.2.0";
+    var __EB_PLAYER_VERSION__ = "2.3.1";
 
     /**
      * Finite State Machine for player playback state transitions.
@@ -1525,7 +1525,7 @@
             return null;
         }
         // ---- EPG helpers ----
-        renderEpgSegments(programs) {
+        renderEpgSegments(programs, isRtl) {
             if (programs.length === 0)
                 return [];
             // Compute the time window from first program start to last program end
@@ -1536,13 +1536,18 @@
                 return [];
             const now = Date.now();
             return programs.map((program) => {
-                const leftPercent = ((program.start - windowStart) / windowDuration) * 100;
+                const startPercent = ((program.start - windowStart) / windowDuration) * 100;
                 const widthPercent = ((program.end - program.start) / windowDuration) * 100;
                 const isCurrent = now >= program.start && now < program.end;
+                // RTL mirrors the timeline: anchor from the track's inline-start edge
+                // (right in RTL) instead of always anchoring from the physical left.
+                const positionStyle = isRtl
+                    ? `right: ${startPercent.toFixed(2)}%; width: ${widthPercent.toFixed(2)}%`
+                    : `left: ${startPercent.toFixed(2)}%; width: ${widthPercent.toFixed(2)}%`;
                 return b `
         <div
           class="eb-epg-segment${isCurrent ? ' eb-epg-current' : ''}"
-          style="left: ${leftPercent.toFixed(2)}%; width: ${widthPercent.toFixed(2)}%"
+          style="${positionStyle}"
           title="${program.title}"
         ></div>
       `;
@@ -1550,7 +1555,7 @@
         }
         // ---- Template ----
         template() {
-            const { currentTime, duration, bufferedEnd, adPlaying, introStreamPlaying, chapters, epgPrograms } = this.state;
+            const { currentTime, duration, bufferedEnd, adPlaying, introStreamPlaying, chapters, epgPrograms, isRtl } = this.state;
             const isSeekbarHidden = !this.config.seekbar;
             const isDisabled = adPlaying || introStreamPlaying;
             // Progress percentage — use dragValue during drag to prevent live-update jitter
@@ -1563,12 +1568,17 @@
             const activeChapter = this.findActiveChapter(chapters);
             const skippableEntry = activeChapter !== null ? this.findSkippableChapter(activeChapter) : null;
             const chapterMarkers = chapters.map((chapter) => {
-                const leftPercent = duration > 0 ? (chapter.startTime / duration) * 100 : 0;
+                const positionPercent = duration > 0 ? (chapter.startTime / duration) * 100 : 0;
                 const isActive = chapter === activeChapter;
+                // RTL mirrors the timeline: anchor from the track's inline-start edge
+                // (right in RTL) instead of always anchoring from the physical left.
+                const positionStyle = isRtl
+                    ? `right: ${positionPercent.toFixed(2)}%`
+                    : `left: ${positionPercent.toFixed(2)}%`;
                 return b `
         <div
           class="eb-chapter-marker${isActive ? ' eb-chapter-active' : ''}"
-          style="left: ${leftPercent.toFixed(2)}%"
+          style="${positionStyle}"
           title="${chapter.title}"
         ></div>
       `;
@@ -1583,7 +1593,7 @@
         `
                 : b ``;
             // EPG segments
-            const epgSegments = this.renderEpgSegments(epgPrograms);
+            const epgSegments = this.renderEpgSegments(epgPrograms, isRtl);
             // Tooltip — for live streams, show wall-clock time at hovered position
             const tooltipTimeText = this.state.isLive && Number.isFinite(duration)
                 ? formatWallClock(Date.now() - (duration - this.tooltipTime) * 1000)
@@ -4388,6 +4398,170 @@
         };
     }
 
+    var subtitlesParserVtt = {exports: {}};
+
+    var hasRequiredSubtitlesParserVtt;
+
+    function requireSubtitlesParserVtt () {
+    	if (hasRequiredSubtitlesParserVtt) return subtitlesParserVtt.exports;
+    	hasRequiredSubtitlesParserVtt = 1;
+    	(function (module, exports) {
+    		var parser = (function () {
+    		  var pItems = {};
+
+    		  /**
+    		   * Converts SubRip subtitles into array of objects
+    		   * [{
+    		   *     id:        `Number of subtitle`
+    		   *     startTime: `Start time of subtitle`
+    		   *     endTime:   `End time of subtitle
+    		   *     text: `Text of subtitle`
+    		   * }]
+    		   *
+    		   * @param  {String}  data SubRip suntitles string
+    		   * @param  {Boolean} ms   Optional: use milliseconds for startTime and endTime
+    		   * @return {Array}
+    		   */
+    		  pItems.fromVtt = function (data, timeFormat, isYoutubeAutoTranscript) {
+    		    var useYoutubeAutoTranscript = isYoutubeAutoTranscript ? true : false;
+    		    data = data.replace(/\r/g, "");
+    		    var regex = /(\d+)?\n?(\d{2}:\d{2}:\d{2}[,.]\d{3}) --> (\d{2}:\d{2}:\d{2}[,.]\d{3}).*\n/g;
+    		    data = data.split(regex);
+    		    data.shift();
+    		    var items = [];
+    		    for (var i = 0; i < data.length; i += 4) {
+    		      var text = data[i + 3];
+    		      if (useYoutubeAutoTranscript) {
+    		        text = text.split("\n");
+    		        text.shift();
+    		        text = text.join("\n");
+    		      }
+    		      if (text.trim().length === 0) continue;
+    		      items.push({
+    		        id: data[i] ? +data[i].trim() : items.length + 1,
+    		        startTime: changeTimeFormat(data[i + 1].trim(), timeFormat),
+    		        endTime: changeTimeFormat(data[i + 2].trim(), timeFormat),
+    		        text: text.trim(),
+    		      });
+    		    }
+    		    return items;
+    		  };
+
+    		  /**
+    		   * Converts Array of objects created by this module to SubRip subtitles
+    		   * @param  {Array}  data
+    		   * @return {String}      SubRip subtitles string
+    		   */
+    		  pItems.toVtt = function (data) {
+    		    if (!data instanceof Array) return "";
+    		    var res = "";
+
+    		    for (var i = 0; i < data.length; i++) {
+    		      var s = data[i];
+
+    		      if (!isNaN(s.startTime) && !isNaN(s.endTime)) {
+    		        s.startTime = msTime(parseInt(s.startTime, 10));
+    		        s.endTime = msTime(parseInt(s.endTime, 10));
+    		      }
+
+    		      res += s.id + "\r\n";
+    		      res += s.startTime + " --> " + s.endTime + "\r\n";
+    		      res += s.text.replace("\n", "\r\n") + "\r\n\r\n";
+    		    }
+
+    		    return res;
+    		  };
+
+    		  var changeTimeFormat = function (time, format) {
+    		    if (format === "ms") {
+    		      return timeMs(time);
+    		    } else if (format === "s") {
+    		      return timeMs(time) / 1000;
+    		    } else {
+    		      return time;
+    		    }
+    		  };
+
+    		  var timeMs = function (val) {
+    		    var regex = /(\d+):(\d{2}):(\d{2})[,.](\d{3})/;
+    		    var parts = regex.exec(val);
+
+    		    if (parts === null) {
+    		      return 0;
+    		    }
+
+    		    for (var i = 1; i < 5; i++) {
+    		      parts[i] = parseInt(parts[i], 10);
+    		      if (isNaN(parts[i])) parts[i] = 0;
+    		    }
+
+    		    // hours + minutes + seconds + ms
+    		    return parts[1] * 3600000 + parts[2] * 60000 + parts[3] * 1000 + parts[4];
+    		  };
+
+    		  var msTime = function (val) {
+    		    var measures = [3600000, 60000, 1000];
+    		    var time = [];
+
+    		    for (var i in measures) {
+    		      var res = ((val / measures[i]) >> 0).toString();
+
+    		      if (res.length < 2) res = "0" + res;
+    		      val %= measures[i];
+    		      time.push(res);
+    		    }
+
+    		    var ms = val.toString();
+    		    if (ms.length < 3) {
+    		      for (i = 0; i <= 3 - ms.length; i++) ms = "0" + ms;
+    		    }
+
+    		    return time.join(":") + "," + ms;
+    		  };
+
+    		  return pItems;
+    		})();
+
+    		// ignore exports for browser
+    		{
+    		  module.exports = parser;
+    		} 
+    	} (subtitlesParserVtt));
+    	return subtitlesParserVtt.exports;
+    }
+
+    var subtitlesParserVttExports = requireSubtitlesParserVtt();
+
+    /**
+     * Parses a WebVTT string into an array of ChapterMark objects.
+     * Returns an empty array if the content is empty or contains no parseable cues.
+     */
+    function parseChapters(vttContent) {
+        if (!vttContent || !vttContent.trim()) {
+            return [];
+        }
+        const cues = subtitlesParserVttExports.fromVtt(vttContent, 's');
+        return cues.map((cue) => ({
+            title: cue.text,
+            startTime: cue.startTime,
+            endTime: cue.endTime
+        }));
+    }
+    /**
+     * Fetches a WebVTT chapters file from a URL and parses it.
+     * Returns an empty array if the fetch or parse fails.
+     */
+    async function fetchChapters(url) {
+        try {
+            const response = await fetch(url);
+            const text = await response.text();
+            return parseChapters(text);
+        }
+        catch {
+            return [];
+        }
+    }
+
     /**
      * PlayerController manages the complete lifecycle of a player instance.
      *
@@ -4588,6 +4762,25 @@
             // CRITICAL: AbortController is one-shot. Create a fresh one for re-mount.
             this.abortController = new AbortController();
         }
+        /**
+         * Populate state.chapters from config.chapters.
+         *
+         * The value is either an inline WebVTT string or an http(s) URL pointing at a
+         * .vtt file. A remote fetch is fire-and-forget and non-critical: fetchChapters
+         * resolves to an empty array on failure, and a result arriving after dispose()
+         * is discarded rather than written into a torn-down state.
+         */
+        loadChapters(source, state, signal) {
+            if (/^https?:\/\//i.test(source.trim())) {
+                void fetchChapters(source).then((chapters) => {
+                    if (!signal.aborted) {
+                        state.chapters = chapters;
+                    }
+                });
+                return;
+            }
+            state.chapters = parseChapters(source);
+        }
         /**
          * Initialize integration managers based on config flags.
          * All integrations are async and non-critical — errors are caught and logged.
@@ -4630,6 +4823,10 @@
                     });
                 }
             }
+            // Chapters: skip when config.chapters is not set
+            if (config.chapters) {
+                this.loadChapters(config.chapters, state, signal);
+            }
             // IntroStreamManager: skip when config.preroll is false (D-02)
             if (config.preroll && this.skinRoot !== null) {
                 const introManager = new IntroStreamManager();