Fix RTL issues

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;
-}
+}
+[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;
+}

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(

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" : "",

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}