Further i18n

public/locales/en-GB/translation.json

@@ -5,8 +5,8 @@
   "search": {
     "loading": "Fetching your favourite shows...",
     "providersFailed": "{{fails}}/{{total}} providers failed!",
-    "allResults": "That's all we have!",
-    "noResults": "We couldn't find anything!",
+    "allResults": "That's all we have!",
+    "noResults": "We couldn't find anything!",
     "allFailed": "All providers have failed!",
     "headingTitle": "Search results",
     "headingLink": "Back to home",
@@ -23,19 +23,24 @@
   "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"
+      "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."
+      "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."
     }
   },
+  "searchBar": {
+    "movie": "Movie",
+    "series": "Series",
+    "Search": "Search"
+  },
   "errorBoundary": {
-    "text": "The app encountered an error and wasn't able to recover, please report it to the"
+    "text": "The app encountered an error and wasn't able to recover, please report it to the"
   }
 }

src/components/SearchBar.tsx

@@ -1,5 +1,6 @@
 import { useState } from "react";
 import { MWMediaType, MWQuery } from "@/providers";
+import { useTranslation } from "react-i18next";
 import { DropdownButton } from "./buttons/DropdownButton";
 import { Icons } from "./Icon";
 import { TextInputControl } from "./text-inputs/TextInputControl";
@@ -13,6 +14,8 @@ export interface SearchBarProps {
 }
 
 export function SearchBarInput(props: SearchBarProps) {
+  const { t } = useTranslation();
+
   const [dropdownOpen, setDropdownOpen] = useState(false);
   function setSearch(value: string) {
     props.onChange(
@@ -52,12 +55,12 @@ export function SearchBarInput(props: SearchBarProps) {
         options={[
           {
             id: MWMediaType.MOVIE,
-            name: "Movie",
+            name: t('searchBar.movie'),
             icon: Icons.FILM,
           },
           {
             id: MWMediaType.SERIES,
-            name: "Series",
+            name: t('searchBar.series'),
             icon: Icons.CLAPPER_BOARD,
           },
           // {
@@ -68,7 +71,7 @@ export function SearchBarInput(props: SearchBarProps) {
         ]}
         onClick={() => setDropdownOpen((old) => !old)}
       >
-        {props.buttonText || "Search"}
+        {props.buttonText || t('searchBar.search')}
       </DropdownButton>
     </div>
   );

src/components/layout/Seasons.tsx

@@ -14,12 +14,15 @@ import {
   MWPortableMedia,
 } from "@/providers";
 import { getSeasonDataFromMedia } from "@/providers/methods/seasons";
+import { useTranslation } from "react-i18next";
 
 export interface SeasonsProps {
   media: MWMedia;
 }
 
 export function LoadingSeasons(props: { error?: boolean }) {
+  const { t } = useTranslation();
+
   return (
     <div>
       <div>
@@ -34,7 +37,7 @@ export function LoadingSeasons(props: { error?: boolean }) {
       ) : (
         <div className="flex items-center space-x-3">
           <IconPatch icon={Icons.WARNING} className="text-red-400" />
-          <p>Failed to load seasons and episodes</p>
+          <p>{t('seasons.failed')}</p>
         </div>
       )}
     </div>
@@ -42,6 +45,8 @@ export function LoadingSeasons(props: { error?: boolean }) {
 }
 
 export function Seasons(props: SeasonsProps) {
+  const { t } = useTranslation();
+
   const [searchSeasons, loading, error, success] = useLoading(
     (portableMedia: MWPortableMedia) => getSeasonDataFromMedia(portableMedia)
   );
@@ -70,7 +75,7 @@ export function Seasons(props: SeasonsProps) {
 
   const mapSeason = (season: MWMediaSeason) => ({
     id: season.id,
-    name: season.title || `Season ${season.sort}`,
+    name: season.title || `${t('seasons.season')} ${season.sort}`,
   });
 
   const options = seasons.seasons.map(mapSeason);