mirror of
https://github.com/sussy-code/smov.git
synced 2024-12-20 14:37:43 +01:00
Merge pull request #540 from movie-web/rtl
Right-to-left support for translations
This commit is contained in:
William Oldham
GitHub
commit
1ef2cf5b0e
21 changed files with 198 additions and 96 deletions
2
.github/workflows/deploying.yml
vendored
2
.github/workflows/deploying.yml
vendored
|
|
@ -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 }}
|
||||
|
|
|
|||
80
index.html
80
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>
|
||||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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:
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -25,3 +25,6 @@ export const locales = {
|
|||
pirate,
|
||||
minion,
|
||||
};
|
||||
export type Locales = keyof typeof locales;
|
||||
|
||||
export const rtlLocales: Locales[] = [];
|
||||
|
|
|
|||
|
|
@ -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(),
|
||||
},
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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)}
|
||||
/>
|
||||
);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
])}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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(
|
||||
|
|
|
|||
|
|
@ -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" : "",
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
@ -74,4 +74,4 @@
|
|||
100% {
|
||||
transform: rotate(180deg) translateZ(0px) translateY(400px) scaleX(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
@ -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] &");
|
||||
}),
|
||||
],
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
},
|
||||
};
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in a new issue