From 6dea1fb3f6add47a297d4dc10ef4ee9f87fec1d9 Mon Sep 17 00:00:00 2001
From: mrjvs <jellevs@gmail.com>
Date: Sat, 16 Dec 2023 16:50:34 +0100
Subject: [PATCH] Fix RTL issues

---
 src/assets/css/index.css                      |  6 +++-
 src/components/player/atoms/ProgressBar.tsx   |  2 +-
 .../atoms/settings/CaptionSettingsView.tsx    |  1 +
 src/pages/parts/player/ScrapingPart.tsx       | 29 ++++++++++---------
 4 files changed, 22 insertions(+), 16 deletions(-)

diff --git a/src/assets/css/index.css b/src/assets/css/index.css
index 809c5cda..08b24f68 100644
--- a/src/assets/css/index.css
+++ b/src/assets/css/index.css
@@ -226,4 +226,8 @@ input[type=range].styled-slider.slider-progress::-ms-fill-lower {
 [dir="rtl"] .transform {
   /* Invert horizontal X offset on transform (Tailwind RTL plugin does the rest) */
   transform: translate(calc(var(--tw-translate-x) * -1), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) !important;
-}
\ No newline at end of file
+}
+[dir="ltr"] .transform {
+  /* default - otherwise it overwrites*/
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) !important;
+}
diff --git a/src/components/player/atoms/ProgressBar.tsx b/src/components/player/atoms/ProgressBar.tsx
index 887e5ed8..56d8c472 100644
--- a/src/components/player/atoms/ProgressBar.tsx
+++ b/src/components/player/atoms/ProgressBar.tsx
@@ -158,7 +158,7 @@ export function ProgressBar() {
 
             {/* Actual progress bar */}
             <div
-              className="absolute top-0 left-0 h-full rounded-full bg-progress-filled flex justify-end items-center"
+              className="absolute top-0 dir-neutral:left-0 h-full rounded-full bg-progress-filled flex justify-end items-center"
               style={{
                 width: `${
                   Math.max(
diff --git a/src/components/player/atoms/settings/CaptionSettingsView.tsx b/src/components/player/atoms/settings/CaptionSettingsView.tsx
index 36f963ed..7bfe9542 100644
--- a/src/components/player/atoms/settings/CaptionSettingsView.tsx
+++ b/src/components/player/atoms/settings/CaptionSettingsView.tsx
@@ -97,6 +97,7 @@ export function CaptionSetting(props: {
             onTouchStart={dragMouseDown}
           >
             <div
+              dir="ltr"
               className={[
                 "relative w-full h-1 bg-video-context-slider bg-opacity-25 rounded-full transition-[height] duration-100 group-hover/progress:h-1.5",
                 dragging ? "!h-1.5" : "",
diff --git a/src/pages/parts/player/ScrapingPart.tsx b/src/pages/parts/player/ScrapingPart.tsx
index de32f711..4053f1de 100644
--- a/src/pages/parts/player/ScrapingPart.tsx
+++ b/src/pages/parts/player/ScrapingPart.tsx
@@ -60,18 +60,18 @@ export function ScrapingPart(props: ScrapingProps) {
     (async () => {
       const output = await startScraping(props.media);
       if (!isMounted()) return;
-      // props.onResult?.(
-      //   resultRef.current.sources,
-      //   resultRef.current.sourceOrder
-      // );
-      // report(
-      //   scrapePartsToProviderMetric(
-      //     props.media,
-      //     resultRef.current.sourceOrder,
-      //     resultRef.current.sources
-      //   )
-      // );
-      // props.onGetStream?.(output);
+      props.onResult?.(
+        resultRef.current.sources,
+        resultRef.current.sourceOrder
+      );
+      report(
+        scrapePartsToProviderMetric(
+          props.media,
+          resultRef.current.sourceOrder,
+          resultRef.current.sources
+        )
+      );
+      props.onGetStream?.(output);
     })();
   }, [startScraping, props, report, isMounted]);
 
@@ -86,12 +86,13 @@ export function ScrapingPart(props: ScrapingProps) {
 
   return (
     <div
-      className="h-full w-full relative dir-neutral:origin-top-left flex dir-neutral:flex-row dir-neutral:items-start dir-neutral:justify-start"
+      className="h-full w-full relative dir-neutral:origin-top-left flex"
       ref={containerRef}
     >
       <div
         className={classNames({
-          "absolute transition-[transform,opacity] opacity-0": true,
+          "absolute transition-[transform,opacity] opacity-0 dir-neutral:left-0":
+            true,
           "!opacity-100": renderedOnce,
         })}
         ref={listRef}