Some RTL fixes

Co-authored-by: mrjvs <mistrjvs@gmail.com>

src/assets/css/index.css

@@ -222,3 +222,8 @@ input[type=range].styled-slider.slider-progress::-ms-fill-lower {
   outline: 2px solid theme('colors.themePreview.primary');
   box-shadow: 0 0 10px theme('colors.themePreview.secondary');
 }
+
+[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;
+}

src/components/Icon.tsx

@@ -1,3 +1,4 @@
+import classNames from "classnames";
 import { memo, useEffect, useRef } from "react";
 
 export enum Icons {
@@ -150,10 +151,18 @@ export const Icon = memo((props: IconProps) => {
     return <ChromeCastButton />;
   }
 
+  const flipClass =
+    props.icon === Icons.ARROW_LEFT ||
+    props.icon === Icons.ARROW_RIGHT ||
+    props.icon === Icons.CHEVRON_LEFT ||
+    props.icon === Icons.CHEVRON_RIGHT
+      ? "rtl:-scale-x-100"
+      : "";
+
   return (
     <span
       dangerouslySetInnerHTML={{ __html: iconList[props.icon] }} // eslint-disable-line react/no-danger
-      className={props.className}
+      className={classNames(props.className, flipClass)}
     />
   );
 });

src/components/overlays/positions/OverlayAnchorPosition.tsx

@@ -64,7 +64,7 @@ export function OverlayAnchorPosition(props: AnchorPositionProps) {
         transform: `translateX(${left}px) translateY(${top}px)`,
       }}
       className={classNames([
-        "pointer-events-auto z-10 inline-block origin-top-left touch-none",
+        "[&>*]:pointer-events-auto z-10 flex dir-neutral:items-start justify-start dir-neutral:origin-top-left touch-none",
         props.className,
       ])}
     >

src/components/player/atoms/ProgressBar.tsx

@@ -119,7 +119,7 @@ export function ProgressBar() {
   }, [setDraggingTime, duration, dragPercentage]);
 
   return (
-    <div className="w-full relative">
+    <div className="w-full relative" dir="ltr">
       <div className="top-0 absolute inset-x-0">
         <div
           className="absolute bottom-0"

src/components/player/internals/Button.tsx

@@ -22,20 +22,14 @@ export const VideoPlayerButton = forwardRef<
       type="button"
       onClick={(e) => props.onClick?.(e.currentTarget as HTMLButtonElement)}
       className={classNames([
-        "tabbable p-2 rounded-full hover:bg-video-buttonBackground hover:bg-opacity-50 transition-transform duration-100 flex items-center",
+        "tabbable p-2 rounded-full hover:bg-video-buttonBackground hover:bg-opacity-50 transition-transform duration-100 flex items-center gap-3",
         props.activeClass ??
           "active:scale-110 active:bg-opacity-75 active:text-white",
         props.className ?? "",
       ])}
     >
       {props.icon && (
-        <Icon
+        <Icon className={props.iconSizeClass || "text-2xl"} icon={props.icon} />
-          className={classNames(
-            props.iconSizeClass || "text-2xl",
-            props.children ? "mr-3" : ""
-          )}
-          icon={props.icon}
-        />
       )}
       {props.children}
     </button>

src/components/utils/Lightbar.css

@@ -6,7 +6,7 @@
   user-select: none;
 }
 
-.lightbar {
+[dir] .lightbar {
   left: 50vw;
   transform: translateX(-50%);
 }
@@ -16,13 +16,14 @@
     width: 150vw;
   }
 
-  .lightbar {
+  [dir] .lightbar {
     left: -25vw;
     transform: initial;
   }
+
 }
 
-.lightbar {
+[dir] .lightbar {
   display: flex;
   justify-content: center;
   align-items: center;
@@ -31,7 +32,7 @@
   animation: boot var(--d) var(--animation) forwards;
 }
 
-.lightbar-visual {
+[dir] .lightbar-visual {
   left: 0;
   --top: theme('colors.background.main');
   --bottom: theme('colors.lightBar.light');
@@ -57,7 +58,6 @@
 
 @keyframes boot {
   from {
-
     opacity: 0.25;
   }
 

src/pages/parts/player/PlayerPart.tsx

@@ -88,7 +88,7 @@ export function PlayerPart(props: PlayerPartProps) {
             </>
           ) : null}
         </div>
-        <div className="hidden lg:flex justify-between">
+        <div className="hidden lg:flex justify-between" dir="ltr">
           <Player.LeftSideControls>
             {status === playerStatus.PLAYING ? (
               <>

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?.(
+      // props.onResult?.(
-        resultRef.current.sources,
+      //   resultRef.current.sources,
-        resultRef.current.sourceOrder
+      //   resultRef.current.sourceOrder
-      );
+      // );
-      report(
+      // report(
-        scrapePartsToProviderMetric(
+      //   scrapePartsToProviderMetric(
-          props.media,
+      //     props.media,
-          resultRef.current.sourceOrder,
+      //     resultRef.current.sourceOrder,
-          resultRef.current.sources
+      //     resultRef.current.sources
-        )
+      //   )
-      );
+      // );
-      props.onGetStream?.(output);
+      // props.onGetStream?.(output);
     })();
   }, [startScraping, props, report, isMounted]);
 
@@ -85,7 +85,10 @@ export function ScrapingPart(props: ScrapingProps) {
     currentProviderIndex = sourceOrder.length - 1;
 
   return (
-    <div className="h-full w-full relative" ref={containerRef}>
+    <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"
+      ref={containerRef}
+    >
       <div
         className={classNames({
           "absolute transition-[transform,opacity] opacity-0": true,

src/stores/language/index.ts

@@ -1,42 +0,0 @@
-import { useEffect } from "react";
-import { create } from "zustand";
-import { persist } from "zustand/middleware";
-import { immer } from "zustand/middleware/immer";
-
-import i18n from "@/setup/i18n";
-import { rtlLocales } from "@/assets/languages";
-
-export interface LanguageStore {
-  language: string;
-  setLanguage(v: string): void;
-}
-
-export const useLanguageStore = create(
-  persist(
-    immer<LanguageStore>((set) => ({
-      language: "en",
-      setLanguage(v) {
-        set((s) => {
-          s.language = v;
-        });
-      },
-    })),
-    { name: "__MW::locale" }
-  )
-);
-
-export function LanguageProvider() {
-  const language = useLanguageStore((s) => s.language);
-
-  useEffect(() => {
-    i18n.changeLanguage(language);
-  }, [language]);
-
-  const isRtl = rtlLocales.includes(language);
-
-  return (
-    <Helmet>
-      <html dir={isRtl ? "rtl" : "ltr"} />
-    </Helmet>
-  );
-}

tailwind.config.ts

@@ -1,5 +1,6 @@
 import { allThemes, defaultTheme, safeThemeList } from "./themes";
-import type { Config } from "tailwindcss"
+import type { Config } from "tailwindcss";
+import plugin from "tailwindcss/plugin";
 
 const themer = require("tailwindcss-themer");
 
@@ -10,18 +11,18 @@ const config: Config = {
     extend: {
       /* fonts */
       fontFamily: {
-        "open-sans": "'Open Sans'"
+        "open-sans": "'Open Sans'",
       },
 
       /* animations */
       keyframes: {
         "loading-pin": {
           "0%, 40%, 100%": { height: "0.5em", "background-color": "#282336" },
-          "20%": { height: "1em", "background-color": "white" }
+          "20%": { height: "1em", "background-color": "white" },
-        }
+        },
       },
-      animation: { "loading-pin": "loading-pin 1.8s ease-in-out infinite" }
+      animation: { "loading-pin": "loading-pin 1.8s ease-in-out infinite" },
-    }
+    },
   },
   plugins: [
     require("tailwind-scrollbar"),
@@ -33,9 +34,13 @@ const config: Config = {
           selectors: [".theme-default"],
           ...defaultTheme,
         },
-        ...allThemes]
+        ...allThemes,
-    })
+      ],
-  ]
+    }),
+    plugin(({ addVariant }) => {
+      addVariant("dir-neutral", "[dir] &");
+    }),
+  ],
 };
 
 export default config;