i18nify views

public/locales/en-GB/translation.json

@@ -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"
+  }
+}

public/locales/en/translation.json

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

src/components/layout/BrandPill.tsx

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

src/i18n.ts

@@ -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

src/index.tsx

@@ -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>
+        <Suspense fallback="">
           <App />
+        </Suspense>
       </HashRouter>
     </ErrorBoundary>
   </React.StrictMode>,

src/providers/list/xemovie/index.ts

@@ -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]
               }})`
             )
           )

src/views/MediaView.tsx

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

src/views/SearchView.tsx

@@ -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>
 

src/views/notfound/NotFoundView.tsx

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