+
+
{t("media.episodeDisplay", {
season: meta?.season?.number,
episode: meta?.episode?.number,
diff --git a/src/setup/App.tsx b/src/setup/App.tsx
index d532d824..10d9cd14 100644
--- 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 (
+
{/* functional routes */}
diff --git a/src/stores/language/index.ts b/src/stores/language/index.ts
index 052127bc..1bf632ed 100644
--- 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 (
+
+
+
+ );
}
diff --git a/src/stores/language/index.tsx b/src/stores/language/index.tsx
new file mode 100644
index 00000000..ba33d59a
--- /dev/null
+++ 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((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 (
+
+
+
+ );
+}
diff --git a/vite.config.ts b/vite.config.ts
index 9a0018b0..8ebf8198 100644
--- 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",
+ },
};
});