i18nify views

This commit is contained in:
James Hawkins 2022-12-17 08:54:27 +00:00
parent 95f17b507b
commit 03ffea333a
9 changed files with 97 additions and 41 deletions

View File

@ -0,0 +1,41 @@
{
"global": {
"name": "movie-web"
},
"search": {
"loading": "Fetching your favourite shows...",
"providersFailed": "{{fails}}/{{total}} providers failed!",
"allResults": "That's all we have!",
"noResults": "We couldn't find anything!",
"allFailed": "All providers have failed!",
"headingTitle": "Search results",
"headingLink": "Back to home",
"bookmarks": "Bookmarks",
"continueWatching": "Continue Watching",
"tagline": "Because watching legally is boring",
"title": "What do you want to watch?",
"placeholder": "What do you want to watch?"
},
"media": {
"invalidUrl": "Your URL may be invalid",
"arrowText": "Go back"
},
"notFound": {
"backArrow": "Back to home",
"media": {
"title": "Couldn't find that media",
"description": "We couldn't find the media you requested. Either it's been removed or you tampered with the URL"
},
"provider": {
"title": "This provider has been disabled",
"description": "We had issues with the provider or it was too unstable to use, so we had to disable it."
},
"page": {
"title": "Couldn't find that page",
"description": "We looked everywhere: under the bins, in the closet, behind the proxy but ultimately couldn't find the page you are looking for."
}
},
"errorBoundary": {
"text": "The app encountered an error and wasn't able to recover, please report it to the"
}
}

View File

@ -1,5 +0,0 @@
{
"global": {
"name": "movie-web"
}
}

View File

@ -1,16 +1,18 @@
import { Icon, Icons } from "@/components/Icon";
import { useTranslation } from "react-i18next";
export function BrandPill(props: { clickable?: boolean }) {
const { t } = useTranslation();
return (
<div
className={`flex items-center space-x-2 rounded-full bg-bink-100 bg-opacity-50 px-4 py-2 text-bink-600 ${
props.clickable
className={`flex items-center space-x-2 rounded-full bg-bink-100 bg-opacity-50 px-4 py-2 text-bink-600 ${props.clickable
? "transition-[transform,background-color] hover:scale-105 hover:bg-bink-200 hover:text-bink-700 active:scale-95"
: ""
}`}
}`}
>
<Icon className="text-xl" icon={Icons.MOVIE_WEB} />
<span className="font-semibold text-white">movie-web</span>
<span className="font-semibold text-white">{t('global.name')}</span>
</div>
);
}

View File

@ -17,8 +17,7 @@ i18n
// init i18next
// for all options read: https://www.i18next.com/overview/configuration-options
.init({
fallbackLng: 'en',
debug: true,
fallbackLng: 'en-GB',
interpolation: {
escapeValue: false, // not needed for react as it escapes by default

View File

@ -1,4 +1,4 @@
import React from "react";
import React, { Suspense } from "react";
import ReactDOM from "react-dom";
import { HashRouter } from "react-router-dom";
import "./index.css";
@ -10,7 +10,9 @@ ReactDOM.render(
<React.StrictMode>
<ErrorBoundary>
<HashRouter>
<App />
<Suspense fallback="">
<App />
</Suspense>
</HashRouter>
</ErrorBoundary>
</React.StrictMode>,

View File

@ -100,8 +100,7 @@ export const xemovieScraper: MWMediaProvider = {
const data = JSON.parse(
JSON.stringify(
eval(
`(${
script.textContent.replace("const data = ", "").split("};")[0]
`(${script.textContent.replace("const data = ", "").split("};")[0]
}})`
)
)

View File

@ -29,6 +29,7 @@ import {
useBookmarkContext,
} from "@/state/bookmark";
import { getWatchedFromPortable, useWatchedContext } from "@/state/watched";
import { useTranslation } from "react-i18next";
import { NotFoundChecks } from "./notfound/NotFoundChecks";
interface StyledMediaViewProps {
@ -105,6 +106,8 @@ function StyledMediaFooter(props: StyledMediaFooterProps) {
}
function LoadingMediaFooter(props: { error?: boolean }) {
const { t } = useTranslation();
return (
<Paper className="mt-5">
<div className="flex">
@ -117,7 +120,7 @@ function LoadingMediaFooter(props: { error?: boolean }) {
{props.error ? (
<div className="flex items-center space-x-3">
<IconPatch icon={Icons.WARNING} className="text-red-400" />
<p>Your url may be invalid</p>
<p>{t('media.invalidUrl')}</p>
</div>
) : (
<LoadingSeasons />
@ -183,6 +186,7 @@ function MediaViewContent(props: { portable: MWPortableMedia }) {
}
export function MediaView() {
const { t } = useTranslation();
const mediaPortable: MWPortableMedia | undefined = usePortableMedia();
const reactHistory = useHistory();
@ -196,7 +200,7 @@ export function MediaView() {
: reactHistory.push("/")
}
direction="left"
linkText="Go back"
linkText={t('media.arrowText')}
/>
</Navigation>
<NotFoundChecks portable={mediaPortable}>

View File

@ -18,9 +18,11 @@ import {
getIfBookmarkedFromPortable,
useBookmarkContext,
} from "@/state/bookmark/context";
import { useTranslation } from "react-i18next";
function SearchLoading() {
return <Loading className="my-24" text="Fetching your favourite shows..." />;
const { t } = useTranslation();
return <Loading className="my-24" text={t('search.loading') || "Fetching your favourite shows..."} />;
}
function SearchSuffix(props: {
@ -28,6 +30,8 @@ function SearchSuffix(props: {
total: number;
resultsSize: number;
}) {
const { t } = useTranslation();
const allFailed: boolean = props.fails === props.total;
const icon: Icons = allFailed ? Icons.WARNING : Icons.EYE_SLASH;
@ -43,13 +47,13 @@ function SearchSuffix(props: {
<div>
{props.fails > 0 ? (
<p className="text-red-400">
{props.fails}/{props.total} providers failed!
{t('search.providersFailed', { fails: props.fails, total: props.total })}
</p>
) : null}
{props.resultsSize > 0 ? (
<p>That&apos;s all we have!</p>
<p>{t('search.allResults')}</p>
) : (
<p>We couldn&apos;t find anything!</p>
<p>{t('search.noResults')}</p>
)}
</div>
) : null}
@ -57,7 +61,7 @@ function SearchSuffix(props: {
{/* Error result */}
{allFailed ? (
<div>
<p>All providers have failed!</p>
<p>{t('search.allFailed')}</p>
</div>
) : null}
</div>
@ -71,6 +75,8 @@ function SearchResultsView({
searchQuery: MWQuery;
clear: () => void;
}) {
const { t } = useTranslation();
const [results, setResults] = useState<MWMassProviderOutput | undefined>();
const [runSearchQuery, loading, error, success] = useLoading(
(query: MWQuery) => SearchProviders(query)
@ -91,9 +97,9 @@ function SearchResultsView({
{/* results */}
{success && results?.results.length ? (
<SectionHeading
title="Search results"
title={t('search.headingTitle') || "Search results"}
icon={Icons.SEARCH}
linkText="Back to home"
linkText={t('search.headingLink') || "Back to home"}
onClick={() => clear()}
>
{results.results.map((v) => (
@ -124,6 +130,8 @@ function SearchResultsView({
}
function ExtraItems() {
const { t } = useTranslation();
const { getFilteredBookmarks } = useBookmarkContext();
const { getFilteredWatched } = useWatchedContext();
@ -138,7 +146,7 @@ function ExtraItems() {
return (
<div className="mb-16 mt-32">
{bookmarks.length > 0 ? (
<SectionHeading title="Bookmarks" icon={Icons.BOOKMARK}>
<SectionHeading title={t('search.bookmarks') || "Bookmarks"} icon={Icons.BOOKMARK}>
{bookmarks.map((v) => (
<WatchedMediaCard
key={[v.mediaId, v.providerId].join("|")}
@ -148,7 +156,7 @@ function ExtraItems() {
</SectionHeading>
) : null}
{watchedItems.length > 0 ? (
<SectionHeading title="Continue Watching" icon={Icons.CLOCK}>
<SectionHeading title={t('search.continueWatching') || "Continue Watching"} icon={Icons.CLOCK}>
{watchedItems.map((v) => (
<WatchedMediaCard
key={[v.mediaId, v.providerId].join("|")}
@ -163,6 +171,8 @@ function ExtraItems() {
}
export function SearchView() {
const { t } = useTranslation();
const [searching, setSearching] = useState<boolean>(false);
const [loading, setLoading] = useState<boolean>(false);
const [search, setSearch, setSearchUnFocus] = useSearchQuery();
@ -195,14 +205,14 @@ export function SearchView() {
{/* input section */}
<div className="mt-44 space-y-16 text-center">
<div className="space-y-4">
<Tagline>Because watching legally is boring</Tagline>
<Title>What movie do you want to watch?</Title>
<Tagline>{t('search.tagline')}</Tagline>
<Title>{t('search.title')}</Title>
</div>
<SearchBarInput
onChange={setSearch}
value={search}
onUnFocus={setSearchUnFocus}
placeholder="What movie do you want to watch?"
placeholder={t('search.placeholder') || "What do you want to watch?"}
/>
</div>

View File

@ -4,6 +4,7 @@ import { Icons } from "@/components/Icon";
import { Navigation } from "@/components/layout/Navigation";
import { ArrowLink } from "@/components/text/ArrowLink";
import { Title } from "@/components/text/Title";
import { useTranslation } from "react-i18next";
function NotFoundWrapper(props: { children?: ReactNode }) {
return (
@ -17,52 +18,55 @@ function NotFoundWrapper(props: { children?: ReactNode }) {
}
export function NotFoundMedia() {
const { t } = useTranslation();
return (
<div className="flex flex-1 flex-col items-center justify-center p-5 text-center">
<IconPatch
icon={Icons.EYE_SLASH}
className="mb-6 text-xl text-bink-600"
/>
<Title>Couldn&apos;t find that media</Title>
<Title>{t('notFound.media.title')}</Title>
<p className="mt-5 mb-12 max-w-sm">
We couldn&apos;t find the media you requested. Either it&apos;s been
removed or you tampered with the URL
{t('notFound.media.description')}
</p>
<ArrowLink to="/" linkText="Back to home" />
<ArrowLink to="/" linkText={t('notFound.backArrow')} />
</div>
);
}
export function NotFoundProvider() {
const { t } = useTranslation();
return (
<div className="flex flex-1 flex-col items-center justify-center p-5 text-center">
<IconPatch
icon={Icons.EYE_SLASH}
className="mb-6 text-xl text-bink-600"
/>
<Title>This provider has been disabled</Title>
<Title>{t('notFound.provider.title')}</Title>
<p className="mt-5 mb-12 max-w-sm">
We had issues with the provider or it was too unstable to use, so we had
to disable it.
{t('notFound.provider.description')}
</p>
<ArrowLink to="/" linkText="Back to home" />
<ArrowLink to="/" linkText={t('notFound.backArrow')} />
</div>
);
}
export function NotFoundPage() {
const { t } = useTranslation();
return (
<NotFoundWrapper>
<IconPatch
icon={Icons.EYE_SLASH}
className="mb-6 text-xl text-bink-600"
/>
<Title>Couldn&apos;t find that page</Title>
<Title>{t('notFound.page.title')}</Title>
<p className="mt-5 mb-12 max-w-sm">
We looked everywhere: under the bins, in the closet, behind the proxy
but ultimately couldn&apos;t find the page you are looking for.
{t('notFound.page.description')}
</p>
<ArrowLink to="/" linkText="Back to home" />
<ArrowLink to="/" linkText={t('notFound.backArrow')} />
</NotFoundWrapper>
);
}