add discover translation keys

src/assets/locales/en.json

@@ -767,5 +767,44 @@
       "textBoldLabel": "Bold text"
     },
     "unsaved": "You have unsaved changes... ฅ^•ﻌ•^ฅ"
+  },
+  "discover": {
+    "tabs": {
+      "movies": "Movies",
+      "tvshows": "TV Shows",
+      "editorpicks": "Editor Picks"
+    },
+    "carousel": {
+      "title": {
+        "movies": "{{category}} Movies",
+        "tvshows": "{{category}} Shows",
+        "inCinemas": "In Cinemas",
+        "popularOn": "Popular {{type}} on {{provider}}",
+        "editorPicks": "Editor Picks"
+      }
+    },
+    "providers": {
+      "netflix": "Netflix",
+      "appleTv": "Apple TV+",
+      "amazonPrime": "Amazon Prime Video",
+      "hulu": "Hulu",
+      "max": "Max",
+      "paramountPlus": "Paramount Plus",
+      "disneyPlus": "Disney Plus",
+      "shudder": "Shudder",
+      "fubuTV": "fubuTV"
+    },
+    "randomMovie": {
+      "button": "Watch Something Random",
+      "cancel": "Cancel Countdown",
+      "countdown": "{{countdown}}s",
+      "nowPlaying": "Now Playing",
+      "in": "in"
+    },
+    "page": {
+      "title": "Discover Movies & TV",
+      "subtitle": "Explore the latest hits and timeless classics."
+    },
+    "scrollToTop": "Back to top"
   }
 }

src/pages/discover/Discover.tsx

@@ -36,10 +36,10 @@ export function Discover() {
             backgroundImage: `linear-gradient(to right, rgba(var(--colors-buttons-purpleHover)), rgba(var(--colors-progress-filled)))`,
           }}
         >
-          {t("global.pages.discover")} Movies & TV
+          {t("discover.page.title")}
         </h1>
         <p className="relative text-lg mt-4 text-gray-400 z-10">
-          Explore the latest hits and timeless classics.
+          {t("discover.page.subtitle")}
         </p>
       </div>
 

src/pages/discover/components/MediaCarousel.tsx

@@ -1,3 +1,5 @@
+import { useTranslation } from "react-i18next";
+
 import { MediaCard } from "@/components/media/MediaCard";
 import { Media } from "@/pages/discover/common";
 
@@ -31,6 +33,7 @@ export function MediaCarousel({
   isMobile,
   carouselRefs,
 }: MediaCarouselProps) {
+  const { t } = useTranslation();
   const categorySlug = category.toLowerCase().replace(/[^a-z0-9]+/g, "-");
   const browser = !!window.chrome;
   let isScrolling = false;
@@ -57,18 +60,30 @@ export function MediaCarousel({
     categoryName: string,
     isTVShowCondition: boolean,
   ): string {
-    switch (categoryName) {
-      case "Now Playing":
-        return "In Cinemas";
-      case categoryName.match(/^Popular (Movies|Shows) on .+/)?.input:
-        return categoryName;
-      default:
-        return categoryName.endsWith("Movie")
-          ? `${categoryName}s`
-          : isTVShowCondition
-            ? `${categoryName} Shows`
-            : `${categoryName} Movies`;
+    const providerMatch = categoryName.match(
+      /^Popular (Movies|Shows) on (.+)$/,
+    );
+    if (providerMatch) {
+      const type = providerMatch[1].toLowerCase();
+      const provider = providerMatch[2];
+      return t("discover.carousel.title.popularOn", {
+        type:
+          type === "movies" ? t("media.types.movie") : t("media.types.show"),
+        provider,
+      });
     }
+
+    if (categoryName === "Now Playing") {
+      return t("discover.carousel.title.inCinemas");
+    }
+
+    if (categoryName === "Editor Picks") {
+      return t("discover.carousel.title.editorPicks");
+    }
+
+    return isTVShowCondition
+      ? t("discover.carousel.title.tvshows", { category: categoryName })
+      : t("discover.carousel.title.movies", { category: categoryName });
   }
 
   const displayCategory = getDisplayCategory(category, isTVShow);

src/pages/discover/components/RandomMovieButton.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import { useTranslation } from "react-i18next";
 
 import { Icon, Icons } from "@/components/Icon";
 
@@ -13,6 +14,8 @@ export function RandomMovieButton({
   onClick,
   randomMovieTitle,
 }: RandomMovieButtonProps) {
+  const { t } = useTranslation();
+
   return (
     <div className="w-full max-w-screen-xl mx-auto px-4">
       <div className="flex items-center justify-center">
@@ -24,7 +27,7 @@ export function RandomMovieButton({
           <span className="flex items-center">
             {countdown !== null && countdown > 0 ? (
               <div className="flex items-center">
-                <span>Cancel Countdown</span>
+                <span>{t("discover.randomMovie.cancel")}</span>
                 <Icon
                   icon={Icons.X}
                   className="text-2xl ml-[4.5px] mb-[-0.7px]"
@@ -32,7 +35,7 @@ export function RandomMovieButton({
               </div>
             ) : (
               <div className="flex items-center">
-                <span>Watch Something Random</span>
+                <span>{t("discover.randomMovie.button")}</span>
                 <img
                   src="/lightbar-images/dice.svg"
                   alt="Dice"
@@ -48,8 +51,10 @@ export function RandomMovieButton({
       {randomMovieTitle && countdown !== null && (
         <div className="mt-4 mb-4 text-center">
           <p>
-            Now Playing <span className="font-bold">{randomMovieTitle}</span> in{" "}
-            {countdown}
+            {t("discover.randomMovie.nowPlaying")}{" "}
+            <span className="font-bold">{randomMovieTitle}</span>{" "}
+            {t("discover.randomMovie.in")}{" "}
+            {t("discover.randomMovie.countdown", { countdown })}
           </p>
         </div>
       )}

src/pages/discover/components/ScrollToTopButton.tsx

@@ -1,8 +1,10 @@
 import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
 
 import { Icon, Icons } from "@/components/Icon";
 
 export function ScrollToTopButton() {
+  const { t } = useTranslation();
   const [isVisible, setIsVisible] = useState(false);
 
   const toggleVisibility = () => {
@@ -46,7 +48,7 @@ export function ScrollToTopButton() {
         }}
       >
         <Icon icon={Icons.CHEVRON_UP} className="text-2xl z-10" />
-        <span className="z-10">Back to top</span>
+        <span className="z-10">{t("discover.scrollToTop")}</span>
       </button>
     </div>
   );

src/pages/discover/discoverContent.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
 
 import { get } from "@/backend/metadata/tmdb";
@@ -120,6 +121,7 @@ export function DiscoverContent() {
   //   tvCategories,
   //   "tv",
   // );
+  const { t } = useTranslation();
 
   // Only load data for the active tab
   const isMoviesTab = selectedCategory === "movies";
@@ -425,11 +427,7 @@ export function DiscoverContent() {
                 }`}
                 onClick={() => handleCategoryChange(category)}
               >
-                {category === "movies"
-                  ? "Movies"
-                  : category === "tvshows"
-                    ? "TV Shows"
-                    : "Editor Picks"}
+                {t(`discover.tabs.${category}`)}
               </button>
             ))}
           </div>