RTL text

Co-authored-by: mrjvs <mistrjvs@gmail.com>
2023-12-16 15:27:42 +01:00 · 2023-12-16 15:27:42 +01:00 · 4813d9dbfe
parent 762c4b0be7
commit 4813d9dbfe
9 changed files with 183 additions and 72 deletions
--- a/index.html
+++ b/index.html
@ -1,45 +1,41 @@
 <!DOCTYPE html>
-<html lang="en">
-  <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"
-    />
+<html lang="en" dir="ltr">

-    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
-    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
-    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
-    <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#120f1d" />
-    <meta name="msapplication-TileColor" content="#120f1d" />
-    <meta name="theme-color" content="#120f1d" />
+<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" />

-    <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 rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
+  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
+  <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
+  <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#120f1d" />
+  <meta name="msapplication-TileColor" content="#120f1d" />
+  <meta name="theme-color" content="#120f1d" />

-    <script src="/config.js"></script>
-    <script src="https://cdn.jsdelivr.net/gh/movie-web/6C6F6C7A@8b821f445b83d51ef1b8f42c99b7346f6b47dce5/out.js"></script>
+  <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" />

-    <!-- prevent darkreader extension from messing with our already dark site -->
-    <meta name="darkreader-lock" />
+  <script src="/config.js"></script>
+  <script src="https://cdn.jsdelivr.net/gh/movie-web/6C6F6C7A@8b821f445b83d51ef1b8f42c99b7346f6b47dce5/out.js"></script>

-    <!-- disabling referrer can fix some provider problems -->
-    <meta name="referrer" content="no-referrer" />
+  <!-- prevent darkreader extension from messing with our already dark site -->
+  <meta name="darkreader-lock" />

-    <title>movie-web</title>
+  <!-- disabling referrer can fix some provider problems -->
+  <meta name="referrer" content="no-referrer" />

-    {{#if opensearchEnabled }}
-      <!-- OpenSearch -->
-      <link rel="search" type="application/opensearchdescription+xml" title="movie-web" href="/opensearch.xml">
+  <title>movie-web</title>

-      <!-- Google Sitelinks -->
-      <script type="application/ld+json">
+  {{#if opensearchEnabled }}
+  <!-- OpenSearch -->
+  <link rel="search" type="application/opensearchdescription+xml" title="movie-web" href="/opensearch.xml">
+
+  <!-- Google Sitelinks -->
+  <script type="application/ld+json">
        {
          "@context": "https://schema.org",
          "@type": "WebSite",
@ -54,11 +50,13 @@
          }
        }
      </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>
+  {{/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
@ -98,6 +98,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
@ -223,6 +223,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
@ -5070,6 +5076,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 +5506,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/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[] = ["nl"];
--- 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/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.ts
+++ b/src/stores/language/index.ts
@ -4,6 +4,7 @@ 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;
@ -24,10 +25,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);
+
+  return (
+    <Helmet>
+      <html dir={isRtl ? "rtl" : "ltr"} />
+    </Helmet>
+  );
 }
--- a/src/stores/language/index.tsx
+++ b/src/stores/language/index.tsx
@ -0,0 +1,43 @@
+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 {
+  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 as any);
+
+  return (
+    <Helmet>
+      <html dir={isRtl ? "rtl" : "ltr"} />
+    </Helmet>
+  );
+}
--- 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",
+    },
  };
 });