eb-player 2.3.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.3.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)