pimhwang
/
movie-web
mirror of https://github.com/movie-web/movie-web.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

RTL text 

Co-authored-by: mrjvs <mistrjvs@gmail.com>
pull/540/head
Jip Fr 2 years ago
parent
762c4b0be7
commit
4813d9dbfe
9 changed files with 183 additions and 72 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 80
      index.html
  2. 2
      package.json
  3. 48
      pnpm-lock.yaml
  4. 3
      src/assets/languages.ts
  5. 4
      src/components/player/atoms/EpisodeTitle.tsx
  6. 4
      src/setup/App.tsx
  7. 11
      src/stores/language/index.ts
  8. 43
      src/stores/language/index.tsx
  9. 60
      vite.config.ts

80
index.html
Unescape View File

@ -1,45 +1,41 @@
<!DOCTYPE html> <!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"
/>
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" /> <head>
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" /> <meta charset="utf-8" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" /> <link rel="icon" href="/favicon.ico" />
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#120f1d" /> <meta name="viewport"
<meta name="msapplication-TileColor" content="#120f1d" /> content="width=device-width, initial-scale=1, viewport-fit=cover, maximum-scale=1.0, user-scalable=no" />
<meta name="theme-color" content="#120f1d" /> <meta name="description" content="The place for your favourite movies & shows" />
<link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&display=swap" <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#120f1d" />
rel="stylesheet" <meta name="msapplication-TileColor" content="#120f1d" />
/> <meta name="theme-color" content="#120f1d" />
<script src="/config.js"></script> <link rel="preconnect" href="https://fonts.googleapis.com" />
<script src="https://cdn.jsdelivr.net/gh/movie-web/6C6F6C7A@8b821f445b83d51ef1b8f42c99b7346f6b47dce5/out.js"></script> <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 --> <script src="/config.js"></script>
<meta name="darkreader-lock" /> <script src="https://cdn.jsdelivr.net/gh/movie-web/6C6F6C7A@8b821f445b83d51ef1b8f42c99b7346f6b47dce5/out.js"></script>
<!-- disabling referrer can fix some provider problems --> <!-- prevent darkreader extension from messing with our already dark site -->
<meta name="referrer" content="no-referrer" /> <meta name="darkreader-lock" />
<title>movie-web</title> <!-- disabling referrer can fix some provider problems -->
<meta name="referrer" content="no-referrer" />
{{#if opensearchEnabled }} <title>movie-web</title>
<!-- OpenSearch -->
<link rel="search" type="application/opensearchdescription+xml" title="movie-web" href="/opensearch.xml">
<!-- Google Sitelinks --> {{#if opensearchEnabled }}
<script type="application/ld+json"> <!-- 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", "@context": "https://schema.org",
"@type": "WebSite", "@type": "WebSite",
@ -54,11 +50,13 @@
} }
} }
</script> </script>
{{/if}} {{/if}}
</head> </head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript> <body>
<div id="root"></div> <noscript>You need to enable JavaScript to run this app.</noscript>
<script type="module" src="/src/index.tsx"></script> <div id="root"></div>
</body> <script type="module" src="/src/index.tsx"></script>
</html> </body>
</html>

2
package.json
Unescape View File

@ -98,6 +98,8 @@
"handlebars": "^4.7.7", "handlebars": "^4.7.7",
"jsdom": "^21.1.0", "jsdom": "^21.1.0",
"postcss": "^8.4.20", "postcss": "^8.4.20",
"postcss-rtl": "^2.0.0",
"postcss-rtlcss": "^4.0.9",
"prettier": "^2.5.1", "prettier": "^2.5.1",
"prettier-plugin-tailwindcss": "^0.1.7", "prettier-plugin-tailwindcss": "^0.1.7",
"tailwind-scrollbar": "^2.0.1", "tailwind-scrollbar": "^2.0.1",

48
pnpm-lock.yaml
Unescape View File

@ -223,6 +223,12 @@ devDependencies:
postcss: postcss:
specifier: '>=8.4.31' specifier: '>=8.4.31'
version: 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: prettier:
specifier: ^2.5.1 specifier: ^2.5.1
version: 2.8.8 version: 2.8.8
@ -5070,6 +5076,26 @@ packages:
postcss-selector-parser: 6.0.13 postcss-selector-parser: 6.0.13
dev: true 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: /postcss-selector-parser@6.0.13:
resolution: {integrity: sha512-EaV1Gl4mUEV4ddhDnv/xtj7sxwrwxdetHdWUGnT4VJQf+4d05v6lHYZr8N573k5Z0BViss7BDhfWtKS3+sfAqQ==} resolution: {integrity: sha512-EaV1Gl4mUEV4ddhDnv/xtj7sxwrwxdetHdWUGnT4VJQf+4d05v6lHYZr8N573k5Z0BViss7BDhfWtKS3+sfAqQ==}
engines: {node: '>=4'} engines: {node: '>=4'}
@ -5480,6 +5506,28 @@ packages:
'@babel/runtime': 7.22.11 '@babel/runtime': 7.22.11
dev: false 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: /run-parallel@1.2.0:
resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==} resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==}
dependencies: dependencies:

3
src/assets/languages.ts
Unescape View File

@ -25,3 +25,6 @@ export const locales = {
pirate, pirate,
minion, minion,
}; };
export type Locales = keyof typeof locales;
export const rtlLocales: Locales[] = ["nl"];

4
src/components/player/atoms/EpisodeTitle.tsx
Unescape View File

@ -9,8 +9,8 @@ export function EpisodeTitle() {
if (meta?.type !== "show") return null; if (meta?.type !== "show") return null;
return ( return (
<div> <div className="flex gap-3">
<span className="text-white font-medium mr-3"> <span className="text-white font-medium">
{t("media.episodeDisplay", { {t("media.episodeDisplay", {
season: meta?.season?.number, season: meta?.season?.number,
episode: meta?.episode?.number, episode: meta?.episode?.number,

4
src/setup/App.tsx
Unescape View File

@ -23,7 +23,7 @@ import { RegisterPage } from "@/pages/Register";
import { SettingsPage } from "@/pages/Settings"; import { SettingsPage } from "@/pages/Settings";
import { Layout } from "@/setup/Layout"; import { Layout } from "@/setup/Layout";
import { useHistoryListener } from "@/stores/history"; import { useHistoryListener } from "@/stores/history";
import { useLanguageListener } from "@/stores/language"; import { LanguageProvider } from "@/stores/language";
function LegacyUrlView({ children }: { children: ReactElement }) { function LegacyUrlView({ children }: { children: ReactElement }) {
const location = useLocation(); const location = useLocation();
@ -61,10 +61,10 @@ function QuickSearch() {
function App() { function App() {
useHistoryListener(); useHistoryListener();
useOnlineListener(); useOnlineListener();
useLanguageListener();
return ( return (
<Layout> <Layout>
<LanguageProvider />
<Switch> <Switch>
{/* functional routes */} {/* functional routes */}
<Route exact path="/s/:query"> <Route exact path="/s/:query">

11
src/stores/language/index.ts
Unescape View File

@ -4,6 +4,7 @@ import { persist } from "zustand/middleware";
import { immer } from "zustand/middleware/immer"; import { immer } from "zustand/middleware/immer";
import i18n from "@/setup/i18n"; import i18n from "@/setup/i18n";
import { rtlLocales } from "@/assets/languages";
export interface LanguageStore { export interface LanguageStore {
language: string; language: string;
@ -24,10 +25,18 @@ export const useLanguageStore = create(
) )
); );
export function useLanguageListener() { export function LanguageProvider() {
const language = useLanguageStore((s) => s.language); const language = useLanguageStore((s) => s.language);
useEffect(() => { useEffect(() => {
i18n.changeLanguage(language); i18n.changeLanguage(language);
}, [language]); }, [language]);
const isRtl = rtlLocales.includes(language);
return (
<Helmet>
<html dir={isRtl ? "rtl" : "ltr"} />
</Helmet>
);
} }

43
src/stores/language/index.tsx
Unescape View File

@ -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>
);
}

60
vite.config.ts
Unescape View File

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

Write Preview
Loading…
Cancel
Save