eb-player 2.3.1 → 2.4.0

package/dist/build/eb-player.css

@@ -124,7 +124,7 @@
 /* Row 2: live-sync pushed to the right */
 [data-theme="forja"] .eb-player .eb-slot-live-sync {
   order: 1;
-  margin-left: auto;
+  margin-inline-start: auto;
 }
 
 [data-theme="forja"] .eb-player .eb-slot-settings,
@@ -285,7 +285,7 @@
 [data-theme="forja"] .eb-player .eb-seekbar-thumb {
   width: 12px;
   height: 12px;
-  right: -6px;
+  inset-inline-end: -6px;
   background: #FC013B;
   box-shadow: none;
   border-radius: 50%;
@@ -323,12 +323,12 @@
   height: 11px;
   background: #fff;
   box-shadow: none;
-  transform: translate(-50%, -50%) scale(0);
+  transform: translate(var(--eb-volume-thumb-x, -50%), -50%) scale(0);
   transition: transform .15s;
 }
 
 [data-theme="forja"] .eb-player .eb-volume-control:hover .eb-volume-thumb {
-  transform: translate(-50%, -50%) scale(1);
+  transform: translate(var(--eb-volume-thumb-x, -50%), -50%) scale(1);
 }
 
 /* ============================================================
@@ -767,7 +767,7 @@
 [data-theme="lequipe"] .eb-player .eb-seekbar-thumb {
   width: 14px;
   height: 14px;
-  right: -7px;
+  inset-inline-end: -7px;
   background: #fff;
   box-shadow: 0 0 0 3px rgba(214,30,0,.45);
 }
@@ -808,7 +808,7 @@
   background: rgba(0,0,0,.45);
   border-radius: 1px;
   top: 50%;
-  transform: translate(-50%, -50%);
+  transform: translate(var(--eb-chapter-marker-x, -50%), -50%);
 }
 
 /* ============================================================
@@ -817,7 +817,7 @@
 [data-theme="lequipe"] .eb-player .eb-volume-control {
   flex-direction: row;
   gap: 0;
-  margin-right: 0;
+  margin-inline-end: 0;
 }
 
 [data-theme="lequipe"] .eb-player .eb-volume-track {
@@ -845,12 +845,12 @@
   height: 11px;
   background: #fff;
   box-shadow: 0 0 0 2px rgba(255,255,255,.35);
-  transform: translate(-50%, -50%) scale(0);
+  transform: translate(var(--eb-volume-thumb-x, -50%), -50%) scale(0);
   transition: transform .15s;
 }
 
 [data-theme="lequipe"] .eb-player .eb-volume-control:hover .eb-volume-thumb {
-  transform: translate(-50%, -50%) scale(1);
+  transform: translate(var(--eb-volume-thumb-x, -50%), -50%) scale(1);
 }
 
 /* ============================================================
@@ -971,7 +971,7 @@
   border: none;
   background: none;
   cursor: pointer;
-  text-align: left;
+  text-align: start;
 }
 
 [data-theme="lequipe"] .eb-player .eb-settings-category:last-child {
@@ -1074,7 +1074,7 @@
   border-top: none;
   background: none;
   cursor: pointer;
-  text-align: left;
+  text-align: start;
 }
 
 [data-theme="lequipe"] .eb-player .eb-settings-item:last-child {
@@ -1457,7 +1457,7 @@
 [data-theme="modern"] .eb-player .eb-seekbar-thumb {
   width: 14px;
   height: 14px;
-  right: -7px;
+  inset-inline-end: -7px;
   background: #fff;
   box-shadow: 0 0 0 3px rgba(124,58,237,.45);
 }
@@ -1490,7 +1490,7 @@
   background: rgba(0,0,0,.45);
   border-radius: 1px;
   top: 50%;
-  transform: translate(-50%, -50%);
+  transform: translate(var(--eb-chapter-marker-x, -50%), -50%);
 }
 
 /* ============================================================
@@ -1499,7 +1499,7 @@
 [data-theme="modern"] .eb-player .eb-volume-control {
   flex-direction: row;
   gap: 0;
-  margin-right: 0;
+  margin-inline-end: 0;
 }
 
 [data-theme="modern"] .eb-player .eb-volume-track {
@@ -1527,12 +1527,12 @@
   height: 11px;
   background: #fff;
   box-shadow: 0 0 0 2px rgba(255,255,255,.35);
-  transform: translate(-50%, -50%) scale(0);
+  transform: translate(var(--eb-volume-thumb-x, -50%), -50%) scale(0);
   transition: transform .15s;
 }
 
 [data-theme="modern"] .eb-player .eb-volume-control:hover .eb-volume-thumb {
-  transform: translate(-50%, -50%) scale(1);
+  transform: translate(var(--eb-volume-thumb-x, -50%), -50%) scale(1);
 }
 
 /* ============================================================
@@ -1720,7 +1720,7 @@
 /* Time display sits before seekbar visually (after live badge) */
 [data-theme="modern"] .eb-player .eb-slot-time {
   order: -1;
-  margin-left: auto;
+  margin-inline-start: auto;
 }
 
 /* Live sync badge before time */
@@ -1730,7 +1730,7 @@
 
 /* Move settings + pip to right end of control row */
 [data-theme="modern"] .eb-player .eb-slot-settings {
-  margin-left: auto;
+  margin-inline-start: auto;
 }
 
 /* ============================================================
@@ -1903,7 +1903,7 @@
 
 /* Align row 1 with the seekbar: offset by play-pause width (38px) + gap (8px) */
 [data-theme="v2"] .eb-player .eb-slot-live-sync {
-  margin-left: calc(38px + 8px);
+  margin-inline-start: calc(38px + 8px);
 }
 
 /* Invisible full-width flex break between row 1 and row 2 */
@@ -2117,7 +2117,7 @@
 [data-theme="v2"] .eb-player .eb-seekbar-thumb {
   width: 14px;
   height: 14px;
-  right: -7px;
+  inset-inline-end: -7px;
   background: #fff;
   box-shadow: 0 0 0 3px rgba(61,64,151,.45);
 }
@@ -2158,7 +2158,7 @@
   background: rgba(0,0,0,.45);
   border-radius: 1px;
   top: 50%;
-  transform: translate(-50%, -50%);
+  transform: translate(var(--eb-chapter-marker-x, -50%), -50%);
 }
 
 /* ============================================================
@@ -2167,7 +2167,7 @@
 [data-theme="v2"] .eb-player .eb-volume-control {
   flex-direction: row;
   gap: 0;
-  margin-right: 0;
+  margin-inline-end: 0;
 }
 
 [data-theme="v2"] .eb-player .eb-volume-track {
@@ -2195,12 +2195,12 @@
   height: 11px;
   background: #fff;
   box-shadow: 0 0 0 2px rgba(255,255,255,.35);
-  transform: translate(-50%, -50%) scale(0);
+  transform: translate(var(--eb-volume-thumb-x, -50%), -50%) scale(0);
   transition: transform .15s;
 }
 
 [data-theme="v2"] .eb-player .eb-volume-control:hover .eb-volume-thumb {
-  transform: translate(-50%, -50%) scale(1);
+  transform: translate(var(--eb-volume-thumb-x, -50%), -50%) scale(1);
 }
 
 /* ============================================================
@@ -2581,7 +2581,7 @@
   display: flex;
   align-items: center;
   gap: 4px;
-  margin-left: auto;
+  margin-inline-start: auto;
 }
 
 /* ============================================================
@@ -2718,7 +2718,7 @@
 
 .eb-extension-controls-extra {
   bottom: 0;
-  right: 0;
+  inset-inline-end: 0;
   display: flex;
   align-items: center;
   gap: 4px;
@@ -2757,7 +2757,7 @@
   display: flex;
   align-items: center;
   gap: 4px;
-  margin-right: 8px;
+  margin-inline-end: 8px;
 }
 
 .eb-volume-track {
@@ -2772,7 +2772,7 @@
 .eb-volume-fill {
   position: absolute;
   top: 0;
-  left: 0;
+  inset-inline-start: 0;
   height: 100%;
   background: var(--eb-color-volume, var(--eb-color-primary, #fff));
   border-radius: 2px;
@@ -2786,7 +2786,9 @@
   height: 10px;
   border-radius: 50%;
   background: var(--eb-color-volume, var(--eb-color-primary, #fff));
-  transform: translate(-50%, -50%);
+  /* Centre on the inline-start offset; the sign flips under RTL (see RTL block) */
+  --eb-volume-thumb-x: -50%;
+  transform: translate(var(--eb-volume-thumb-x), -50%);
   pointer-events: none;
 }
 
@@ -2865,7 +2867,7 @@
   color: #fff;
   cursor: pointer;
   font-size: 12px;
-  text-align: left;
+  text-align: start;
 }
 
 .eb-settings-back {
@@ -2912,7 +2914,7 @@
 .eb-seekbar-buffered {
   position: absolute;
   top: 0;
-  left: 0;
+  inset-inline-start: 0;
   height: 100%;
   background: rgba(255, 255, 255, 0.4);
   border-radius: 2px;
@@ -2922,7 +2924,7 @@
 .eb-seekbar-progress {
   position: absolute;
   top: 0;
-  left: 0;
+  inset-inline-start: 0;
   height: 100%;
   background: var(--eb-color-progress, var(--eb-color-primary, #e53935));
   border-radius: 2px;
@@ -2931,7 +2933,7 @@
 
 .eb-seekbar-thumb {
   position: absolute;
-  right: -6px;
+  inset-inline-end: -6px;
   top: 50%;
   width: 12px;
   height: 12px;
@@ -2991,7 +2993,9 @@
   width: 3px;
   height: 100%;
   background: rgba(255, 255, 255, 0.6);
-  transform: translateX(-50%);
+  /* Centre on the inline-start offset; the sign flips under RTL (see RTL block) */
+  --eb-chapter-marker-x: -50%;
+  transform: translateX(var(--eb-chapter-marker-x));
   pointer-events: none;
 }
 
@@ -3001,7 +3005,7 @@
 
 .eb-chapter-skip {
   position: absolute;
-  right: 0;
+  inset-inline-end: 0;
   bottom: calc(100% + 4px);
   background: rgba(0, 0, 0, 0.7);
   color: #fff;
@@ -3020,7 +3024,7 @@
   position: absolute;
   top: 0;
   height: 100%;
-  border-right: 1px solid rgba(255, 255, 255, 0.3);
+  border-inline-end: 1px solid rgba(255, 255, 255, 0.3);
   pointer-events: none;
 }
 
@@ -3332,33 +3336,19 @@
 
 /* ============================================================
    RTL support
+   dir="rtl" on .eb-player mirrors the whole UI natively: flex rows lay out
+   right-to-left and the logical properties above (margin-inline-*,
+   inset-inline-*, text-align: start) flip with it. Do not add row-reverse
+   here — it cancels the native mirroring. Only elements positioned with a
+   physical inline style (chapter markers use right: N% under RTL) need an
+   explicit override.
    ============================================================ */
-[dir="rtl"] .eb-bottom-bar__controls-row {
-  flex-direction: row-reverse;
-}
-
-[dir="rtl"] .eb-top-bar {
-  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%);
+  --eb-chapter-marker-x: 50%;
 }
 
-[dir="rtl"] .eb-epg-segment {
-  border-right: none;
-  border-left: 1px solid rgba(255, 255, 255, 0.3);
+[dir="rtl"] .eb-volume-thumb {
+  --eb-volume-thumb-x: 50%;
 }
 
 /* ============================================================

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.1";
+    var __EB_PLAYER_VERSION__ = "2.4.0";
 
     /**
      * Finite State Machine for player playback state transitions.
@@ -459,6 +459,7 @@
         hasPlaylistPicker: false,
         disableCustomAbr: true,
         lang: undefined,
+        rtl: undefined,
         // EPG
         epgContentId: undefined,
         epgPolling: null,
@@ -1250,7 +1251,9 @@
         }
         eventToVolume(clientX) {
             const rawValue = (clientX - this.trackRect.left) / this.trackRect.width;
-            return Math.min(1, Math.max(0, rawValue));
+            // The track fills from the inline-start edge, which is the right edge under RTL.
+            const value = this.state.isRtl ? 1 - rawValue : rawValue;
+            return Math.min(1, Math.max(0, value));
         }
         handlePointerDown(event) {
             const track = event.currentTarget;
@@ -1294,7 +1297,7 @@
           @pointerdown="${(event) => this.handlePointerDown(event)}"
         >
           <div class="eb-volume-fill" style="width: ${fillPercent}"></div>
-          <div class="eb-volume-thumb" style="left: ${fillPercent}"></div>
+          <div class="eb-volume-thumb" style="inset-inline-start: ${fillPercent}"></div>
         </div>
       </div>
     `;
@@ -4667,7 +4670,9 @@
                 container.style.setProperty('--eb-color-volume', skinColors.volumeBar);
             }
             // Set config-derived state flags
-            this.state.isRtl = this.config.lang === 'ar';
+            // `rtl` decouples direction from language. Undefined (the default) falls back
+            // to deriving it from `lang`, preserving pre-2.4.0 behaviour exactly.
+            this.state.isRtl = this.config.rtl ?? (this.config.lang === 'ar');
             this.state.isRadio = this.config.radio === true;
             // Step 3: Create SkinRoot. This runs on EVERY mount, including noUi —
             // SkinRoot is the only creator of the <video> element, and its own