eb-player 2.3.1 → 2.3.2

package/dist/build/theme-forja.css

@@ -77,7 +77,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,
@@ -238,7 +238,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%;
@@ -276,12 +276,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);
 }
 
 /* ============================================================

package/dist/build/theme-lequipe.css

@@ -304,7 +304,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);
 }
@@ -345,7 +345,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%);
 }
 
 /* ============================================================
@@ -354,7 +354,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 {
@@ -382,12 +382,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);
 }
 
 /* ============================================================
@@ -508,7 +508,7 @@
   border: none;
   background: none;
   cursor: pointer;
-  text-align: left;
+  text-align: start;
 }
 
 [data-theme="lequipe"] .eb-player .eb-settings-category:last-child {
@@ -611,7 +611,7 @@
   border-top: none;
   background: none;
   cursor: pointer;
-  text-align: left;
+  text-align: start;
 }
 
 [data-theme="lequipe"] .eb-player .eb-settings-item:last-child {

package/dist/build/theme-modern.css

@@ -233,7 +233,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);
 }
@@ -266,7 +266,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%);
 }
 
 /* ============================================================
@@ -275,7 +275,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 {
@@ -303,12 +303,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);
 }
 
 /* ============================================================
@@ -496,7 +496,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 */
@@ -506,7 +506,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;
 }
 
 /* ============================================================

package/dist/build/theme-v2.css

@@ -131,7 +131,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 */
@@ -345,7 +345,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);
 }
@@ -386,7 +386,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%);
 }
 
 /* ============================================================
@@ -395,7 +395,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 {
@@ -423,12 +423,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);
 }
 
 /* ============================================================

package/dist/build/types/src/skin/controls/volume-control.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"volume-control.d.ts","sourceRoot":"","sources":["../../../../../../src/skin/controls/volume-control.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AAC9C,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AAGjD;;;;;;;GAOG;AACH,qBAAa,aAAc,SAAQ,aAAa;IAC9C,OAAO,CAAC,SAAS,CAAuB;IACxC,OAAO,CAAC,aAAa,CAA+C;IACpE,OAAO,CAAC,WAAW,CAA+C;IAElE,SAAS,CAAC,SAAS,IAAI,IAAI;IAiB3B,OAAO,CAAC,aAAa;IAKrB,OAAO,CAAC,iBAAiB;IAsBzB,OAAO,CAAC,aAAa;IAMrB,SAAS,CAAC,QAAQ,IAAI,cAAc;CAwBrC"}
+{"version":3,"file":"volume-control.d.ts","sourceRoot":"","sources":["../../../../../../src/skin/controls/volume-control.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AAC9C,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AAGjD;;;;;;;GAOG;AACH,qBAAa,aAAc,SAAQ,aAAa;IAC9C,OAAO,CAAC,SAAS,CAAuB;IACxC,OAAO,CAAC,aAAa,CAA+C;IACpE,OAAO,CAAC,WAAW,CAA+C;IAElE,SAAS,CAAC,SAAS,IAAI,IAAI;IAiB3B,OAAO,CAAC,aAAa;IAOrB,OAAO,CAAC,iBAAiB;IAsBzB,OAAO,CAAC,aAAa;IAMrB,SAAS,CAAC,QAAQ,IAAI,cAAc;CAwBrC"}

package/dist/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/theme-forja.css

@@ -77,7 +77,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,
@@ -238,7 +238,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%;
@@ -276,12 +276,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);
 }
 
 /* ============================================================

package/dist/theme-lequipe.css

@@ -304,7 +304,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);
 }
@@ -345,7 +345,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%);
 }
 
 /* ============================================================
@@ -354,7 +354,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 {
@@ -382,12 +382,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);
 }
 
 /* ============================================================
@@ -508,7 +508,7 @@
   border: none;
   background: none;
   cursor: pointer;
-  text-align: left;
+  text-align: start;
 }
 
 [data-theme="lequipe"] .eb-player .eb-settings-category:last-child {
@@ -611,7 +611,7 @@
   border-top: none;
   background: none;
   cursor: pointer;
-  text-align: left;
+  text-align: start;
 }
 
 [data-theme="lequipe"] .eb-player .eb-settings-item:last-child {