Merge pull request #540 from movie-web/rtl

Right-to-left support for translations
2024-12-30 16:17:41 +01:00 · 2023-12-16 17:29:19 +00:00 · 2023-12-16 17:29:19 +00:00 · 1ef2cf5b0e
commit 1ef2cf5b0e
parent 7537b8c198 8e6e4d63ef
21 changed files with 198 additions and 96 deletions
--- a/.github/workflows/deploying.yml
+++ b/.github/workflows/deploying.yml
@ -109,7 +109,6 @@ jobs:
        prerelease: false

    - name: Upload release (PWA)
-      id: upload-release-asset
      uses: actions/upload-release-asset@v1
      env:
        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
@ -120,7 +119,6 @@ jobs:
        asset_content_type: application/zip

    - name: Upload Release (Normal)
-      id: upload-release-asset
      uses: actions/upload-release-asset@v1
      env:
        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
--- a/index.html
+++ b/index.html
@ -1,13 +1,12 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" dir="ltr">
+
 <head>
  <meta charset="utf-8" />
  <link rel="icon" href="/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover, maximum-scale=1.0, user-scalable=no" />
-    <meta
-      name="description"
-      content="The place for your favourite movies & shows"
-    />
+  <meta name="viewport"
+    content="width=device-width, initial-scale=1, viewport-fit=cover, maximum-scale=1.0, user-scalable=no" />
+  <meta name="description" content="The place for your favourite movies & shows" />

  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
@ -18,10 +17,7 @@

  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&display=swap"
-      rel="stylesheet"
-    />
+  <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&display=swap" rel="stylesheet" />

  <script src="/config.js"></script>
  <script src="https://cdn.jsdelivr.net/gh/movie-web/6C6F6C7A@8b821f445b83d51ef1b8f42c99b7346f6b47dce5/out.js"></script>
@ -56,9 +52,11 @@
      </script>
  {{/if}}
 </head>
+
 <body>
  <noscript>You need to enable JavaScript to run this app.</noscript>
  <div id="root"></div>
  <script type="module" src="/src/index.tsx"></script>
 </body>
+
 </html>
--- a/package.json
+++ b/package.json
@ -46,6 +46,7 @@
    "immer": "^10.0.2",
    "iso-639-1": "^3.1.0",
    "lodash.isequal": "^4.5.0",
+    "nanoid": "^5.0.4",
    "node-forge": "^1.3.1",
    "ofetch": "^1.0.0",
    "react": "^17.0.2",
@ -98,6 +99,8 @@
    "handlebars": "^4.7.7",
    "jsdom": "^21.1.0",
    "postcss": "^8.4.20",
+    "postcss-rtl": "^2.0.0",
+    "postcss-rtlcss": "^4.0.9",
    "prettier": "^2.5.1",
    "prettier-plugin-tailwindcss": "^0.1.7",
    "tailwind-scrollbar": "^2.0.1",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -71,6 +71,9 @@ dependencies:
  lodash.isequal:
    specifier: ^4.5.0
    version: 4.5.0
+  nanoid:
+    specifier: ^5.0.4
+    version: 5.0.4
  node-forge:
    specifier: ^1.3.1
    version: 1.3.1
@ -223,6 +226,12 @@ devDependencies:
  postcss:
    specifier: '>=8.4.31'
    version: 8.4.31
+  postcss-rtl:
+    specifier: ^2.0.0
+    version: 2.0.0(postcss@8.4.31)
+  postcss-rtlcss:
+    specifier: ^4.0.9
+    version: 4.0.9(postcss@8.4.31)
  prettier:
    specifier: ^2.5.1
    version: 2.8.8
@ -4747,6 +4756,12 @@ packages:
    engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
    hasBin: true

+  /nanoid@5.0.4:
+    resolution: {integrity: sha512-vAjmBf13gsmhXSgBrtIclinISzFFy22WwCYoyilZlsrRXNIHSwgFQ1bEdjRwMT3aoadeIF6HMuDRlOxzfXV8ig==}
+    engines: {node: ^18 || >=20}
+    hasBin: true
+    dev: false
+
  /natural-compare-lite@1.4.0:
    resolution: {integrity: sha512-Tj+HTDSJJKaZnfiuw+iaF9skdPpTo2GtEly5JHnWV/hfv2Qj/9RKsGISQtLh2ox3l5EAGw487hnBee0sIJ6v2g==}
    dev: true
@ -5070,6 +5085,26 @@ packages:
      postcss-selector-parser: 6.0.13
    dev: true

+  /postcss-rtl@2.0.0(postcss@8.4.31):
+    resolution: {integrity: sha512-vFu78CvaGY9BafWRHNgDm6OjUxzRCWWCrp+KtnyXdgwibLwb/j5ls8Z/ubvOsk9B/Q2NLwSPrXRARKMaa9RBmA==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      postcss: '>=8.4.31'
+    dependencies:
+      postcss: 8.4.31
+      rtlcss: 4.0.0
+    dev: true
+
+  /postcss-rtlcss@4.0.9(postcss@8.4.31):
+    resolution: {integrity: sha512-dCNKEf+FgTv+EA3XI8ysg2RnpS5s3/iZmU+9qpCNFxHU/BhK+4hz7jyCsCAfo0CLnDrMPtaQENhwb+EGm1wh7Q==}
+    engines: {node: '>=18.0.0'}
+    peerDependencies:
+      postcss: '>=8.4.31'
+    dependencies:
+      postcss: 8.4.31
+      rtlcss: 4.1.1
+    dev: true
+
  /postcss-selector-parser@6.0.13:
    resolution: {integrity: sha512-EaV1Gl4mUEV4ddhDnv/xtj7sxwrwxdetHdWUGnT4VJQf+4d05v6lHYZr8N573k5Z0BViss7BDhfWtKS3+sfAqQ==}
    engines: {node: '>=4'}
@ -5480,6 +5515,28 @@ packages:
      '@babel/runtime': 7.22.11
    dev: false

+  /rtlcss@4.0.0:
+    resolution: {integrity: sha512-j6oypPP+mgFwDXL1JkLCtm6U/DQntMUqlv5SOhpgHhdIE+PmBcjrtAHIpXfbIup47kD5Sgja9JDsDF1NNOsBwQ==}
+    engines: {node: '>=12.0.0'}
+    hasBin: true
+    dependencies:
+      escalade: 3.1.1
+      picocolors: 1.0.0
+      postcss: 8.4.31
+      strip-json-comments: 3.1.1
+    dev: true
+
+  /rtlcss@4.1.1:
+    resolution: {integrity: sha512-/oVHgBtnPNcggP2aVXQjSy6N1mMAfHg4GSag0QtZBlD5bdDgAHwr4pydqJGd+SUCu9260+Pjqbjwtvu7EMH1KQ==}
+    engines: {node: '>=12.0.0'}
+    hasBin: true
+    dependencies:
+      escalade: 3.1.1
+      picocolors: 1.0.0
+      postcss: 8.4.31
+      strip-json-comments: 3.1.1
+    dev: true
+
  /run-parallel@1.2.0:
    resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==}
    dependencies:
--- a/src/assets/css/index.css
+++ b/src/assets/css/index.css
@ -222,3 +222,12 @@ 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;
+}
+[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;
+}
--- a/src/assets/languages.ts
+++ b/src/assets/languages.ts
@ -25,3 +25,6 @@ export const locales = {
  pirate,
  minion,
 };
+export type Locales = keyof typeof locales;
+
+export const rtlLocales: Locales[] = [];
--- a/src/backend/helpers/report.ts
+++ b/src/backend/helpers/report.ts
@ -1,4 +1,5 @@
 import { ScrapeMedia } from "@movie-web/providers";
+import { nanoid } from "nanoid";
 import { ofetch } from "ofetch";
 import { useCallback } from "react";

@ -8,6 +9,7 @@ import { PlayerMeta } from "@/stores/player/slices/source";
 // for anybody who cares - these are anonymous metrics.
 // They are just used for figuring out if providers are broken or not
 const metricsEndpoint = "https://backend.movie-web.app/metrics/providers";
+const batchId = () => nanoid(32);

 export type ProviderMetric = {
  tmdbId: string;
@ -34,6 +36,7 @@ export async function reportProviders(items: ProviderMetric[]): Promise<void> {
    method: "POST",
    body: {
      items,
+      batchId: batchId(),
    },
  });
 }
--- a/src/components/Icon.tsx
+++ b/src/components/Icon.tsx
@ -1,3 +1,4 @@
+import classNames from "classnames";
 import { memo, useEffect, useRef } from "react";

 export enum Icons {
@ -152,10 +153,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)}
    />
  );
 });
--- a/src/components/overlays/positions/OverlayAnchorPosition.tsx
+++ b/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,
      ])}
    >
--- a/src/components/player/atoms/EpisodeTitle.tsx
+++ b/src/components/player/atoms/EpisodeTitle.tsx
@ -9,8 +9,8 @@ export function EpisodeTitle() {
  if (meta?.type !== "show") return null;

  return (
-    <div>
-      <span className="text-white font-medium mr-3">
+    <div className="flex gap-3">
+      <span className="text-white font-medium">
        {t("media.episodeDisplay", {
          season: meta?.season?.number,
          episode: meta?.episode?.number,
--- a/src/components/player/atoms/ProgressBar.tsx
+++ b/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"
@ -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(
--- 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" : "",
--- a/src/components/player/base/BottomControls.tsx
+++ b/src/components/player/base/BottomControls.tsx
@ -27,7 +27,7 @@ export function BottomControls(props: {
      <div
        onMouseOver={() => setHoveringAnyControls(true)}
        onMouseOut={() => setHoveringAnyControls(false)}
-        className="pointer-events-auto pl-[calc(2rem+env(safe-area-inset-left))] pr-[calc(2rem+env(safe-area-inset-right))] pb-3 mb-[env(safe-area-inset-bottom)] absolute bottom-0 w-full"
+        className="pointer-events-auto z-10 pl-[calc(2rem+env(safe-area-inset-left))] pr-[calc(2rem+env(safe-area-inset-right))] pb-3 mb-[env(safe-area-inset-bottom)] absolute bottom-0 w-full"
      >
        <Transition animation="slide-up" show={props.show}>
          {props.children}
--- a/src/components/player/internals/Button.tsx
+++ b/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
-          className={classNames(
-            props.iconSizeClass || "text-2xl",
-            props.children ? "mr-3" : ""
-          )}
-          icon={props.icon}
-        />
+        <Icon className={props.iconSizeClass || "text-2xl"} icon={props.icon} />
      )}
      {props.children}
    </button>
--- a/src/components/utils/Lightbar.css
+++ b/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;
  }

--- a/src/pages/parts/player/PlayerPart.tsx
+++ b/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 ? (
              <>
@ -130,6 +130,7 @@ export function PlayerPart(props: PlayerPartProps) {
      </Player.BottomControls>

      <Player.VolumeChangedPopout />
+
      <Player.NextEpisodeButton
        controlsShowing={showTargets}
        onChange={props.onMetaChange}
--- a/src/pages/parts/player/ScrapingPart.tsx
+++ b/src/pages/parts/player/ScrapingPart.tsx
@ -85,10 +85,14 @@ 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"
+      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}
--- a/src/setup/App.tsx
+++ b/src/setup/App.tsx
@ -23,7 +23,7 @@ import { RegisterPage } from "@/pages/Register";
 import { SettingsPage } from "@/pages/Settings";
 import { Layout } from "@/setup/Layout";
 import { useHistoryListener } from "@/stores/history";
-import { useLanguageListener } from "@/stores/language";
+import { LanguageProvider } from "@/stores/language";

 function LegacyUrlView({ children }: { children: ReactElement }) {
  const location = useLocation();
@ -61,10 +61,10 @@ function QuickSearch() {
 function App() {
  useHistoryListener();
  useOnlineListener();
-  useLanguageListener();

  return (
    <Layout>
+      <LanguageProvider />
      <Switch>
        {/* functional routes */}
        <Route exact path="/s/:query">
--- a/src/stores/language/index.tsx
+++ b/src/stores/language/index.tsx
@ -1,8 +1,10 @@
 import { useEffect } from "react";
+import { Helmet } from "react-helmet-async";
 import { create } from "zustand";
 import { persist } from "zustand/middleware";
 import { immer } from "zustand/middleware/immer";

+import { rtlLocales } from "@/assets/languages";
 import i18n from "@/setup/i18n";

 export interface LanguageStore {
@ -24,10 +26,18 @@ export const useLanguageStore = create(
  )
 );

-export function useLanguageListener() {
+export function LanguageProvider() {
  const language = useLanguageStore((s) => s.language);

  useEffect(() => {
    i18n.changeLanguage(language);
  }, [language]);
+
+  const isRtl = rtlLocales.includes(language as any);
+
+  return (
+    <Helmet>
+      <html dir={isRtl ? "rtl" : "ltr"} />
+    </Helmet>
+  );
 }
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@ -1,5 +1,6 @@
 import { allThemes, defaultTheme, safeThemeList } from "./themes";
 import type { Config } from "tailwindcss";
+import plugin from "tailwindcss/plugin";

 const themer = require("tailwindcss-themer");

@ -41,6 +42,9 @@ const config: Config = {
        ...allThemes,
      ],
    }),
+    plugin(({ addVariant }) => {
+      addVariant("dir-neutral", "[dir] &");
+    }),
  ],
 };

--- a/vite.config.ts
+++ b/vite.config.ts
@ -7,6 +7,9 @@ import path from "path";
 import { handlebars } from "./plugins/handlebars";
 import { loadEnv } from "vite";

+import tailwind from "tailwindcss";
+import rtl from "postcss-rtlcss";
+
 export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, process.cwd());
  return {
@ -18,8 +21,8 @@ export default defineConfig(({ mode }) => {
            env.VITE_APP_DOMAIN +
            (env.VITE_NORMAL_ROUTER !== "true" ? "/#" : ""),
          domain: env.VITE_APP_DOMAIN,
-          env
-        }
+          env,
+        },
      }),
      react({
        babel: {
@ -31,24 +34,24 @@ export default defineConfig(({ mode }) => {
                modules: false,
                useBuiltIns: "entry",
                corejs: {
-                  version: "3.29"
-                }
-              }
-            ]
-          ]
-        }
+                  version: "3.29",
+                },
+              },
+            ],
+          ],
+        },
      }),
      VitePWA({
        disable: env.VITE_PWA_ENABLED !== "true",
        registerType: "autoUpdate",
        workbox: {
          maximumFileSizeToCacheInBytes: 4000000, // 4mb
-          globIgnores: ["**ping.txt**"]
+          globIgnores: ["**ping.txt**"],
        },
        includeAssets: [
          "favicon.ico",
          "apple-touch-icon.png",
-          "safari-pinned-tab.svg"
+          "safari-pinned-tab.svg",
        ],
        manifest: {
          name: "movie-web",
@ -63,48 +66,53 @@ export default defineConfig(({ mode }) => {
              src: "android-chrome-192x192.png",
              sizes: "192x192",
              type: "image/png",
-              purpose: "any"
+              purpose: "any",
            },
            {
              src: "android-chrome-512x512.png",
              sizes: "512x512",
              type: "image/png",
-              purpose: "any"
+              purpose: "any",
            },
            {
              src: "android-chrome-192x192.png",
              sizes: "192x192",
              type: "image/png",
-              purpose: "maskable"
+              purpose: "maskable",
            },
            {
              src: "android-chrome-512x512.png",
              sizes: "512x512",
              type: "image/png",
-              purpose: "maskable"
-            }
-          ]
-        }
+              purpose: "maskable",
+            },
+          ],
+        },
      }),
      loadVersion(),
      checker({
        overlay: {
-          position: "tr"
+          position: "tr",
        },
        typescript: true, // check typescript build errors in dev server
        eslint: {
          // check lint errors in dev server
          lintCommand: "eslint --ext .tsx,.ts src",
          dev: {
-            logLevel: ["error"]
-          }
-        }
-      })
+            logLevel: ["error"],
+          },
+        },
+      }),
    ],

    build: {
      sourcemap: true,
    },
+    css: {
+      postcss: {
+        plugins: [tailwind(), rtl()],
+      },
+    },

    resolve: {
      alias: {
@ -112,12 +120,12 @@ export default defineConfig(({ mode }) => {
        "@sozialhelden/ietf-language-tags": path.resolve(
          __dirname,
          "./node_modules/@sozialhelden/ietf-language-tags/dist/cjs"
-        )
-      }
+        ),
+      },
    },

    test: {
-      environment: "jsdom"
-    }
+      environment: "jsdom",
+    },
  };
 });