Rename TMDB_API_KEY to TMDB_API_READ_ACCESS_TOKEN and add optional base URL overrides

Renames the env var for clarity since it holds a read access token, not an API
key. Adds optional TMDB_API_BASE_URL and TMDB_IMAGE_BASE_URL env vars for
advanced users. Centralizes image URL construction into a shared tmdbImageUrl()
helper, replacing hardcoded URLs across all components.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

app/(pages)/dashboard/page.tsx

@@ -13,6 +13,7 @@ import { useCallback, useEffect, useState } from "react";
 import { DashboardSkeleton } from "@/components/skeletons";
 import { StatsSummary } from "@/components/stats-summary";
 import { TitleCard } from "@/components/title-card";
+import { tmdbImageUrl } from "@/lib/tmdb/image";
 import { useSession } from "@/lib/auth/client";
 
 interface ContinueWatchingItem {
@@ -270,11 +271,9 @@ function FeedSection({
 }
 
 function ContinueWatchingCard({ item }: { item: ContinueWatchingItem }) {
-  const stillUrl = item.nextEpisode?.stillPath
-    ? `https://image.tmdb.org/t/p/w500${item.nextEpisode.stillPath}`
-    : item.title.backdropPath
-      ? `https://image.tmdb.org/t/p/w500${item.title.backdropPath}`
-      : null;
+  const stillUrl =
+    tmdbImageUrl(item.nextEpisode?.stillPath ?? null, "w500") ??
+    tmdbImageUrl(item.title.backdropPath ?? null, "w500");
   const progress =
     item.totalEpisodes > 0
       ? (item.watchedEpisodes / item.totalEpisodes) * 100

app/(pages)/setup/page.tsx

@@ -57,23 +57,23 @@ const steps = [
   {
     number: "3",
     title: "Add it to your environment",
-    description: "Set the TMDB_API_KEY environment variable and restart Sofa.",
+    description: "Set the TMDB_API_READ_ACCESS_TOKEN environment variable and restart Sofa.",
   },
 ];
 
 const envSnippets = [
   {
     label: ".env file",
-    code: "TMDB_API_KEY=your_api_read_access_token_here",
+    code: "TMDB_API_READ_ACCESS_TOKEN=your_api_read_access_token_here",
   },
   {
     label: "Docker Compose",
     code: `environment:
-  - TMDB_API_KEY=your_api_read_access_token_here`,
+  - TMDB_API_READ_ACCESS_TOKEN=your_api_read_access_token_here`,
   },
   {
     label: "Docker run",
-    code: "docker run -e TMDB_API_KEY=your_token ...",
+    code: "docker run -e TMDB_API_READ_ACCESS_TOKEN=your_token ...",
   },
 ];
 

app/(pages)/titles/[id]/page.tsx

@@ -13,6 +13,7 @@ import { useParams, useRouter } from "next/navigation";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { toast } from "sonner";
 import { TitleDetailSkeleton } from "@/components/skeletons";
+import { tmdbImageUrl } from "@/lib/tmdb/image";
 import { StarRating } from "@/components/star-rating";
 import { StatusButton } from "@/components/status-button";
 import { TitleCard } from "@/components/title-card";
@@ -355,12 +356,8 @@ export default function TitleDetailPage() {
     );
   }
 
-  const posterUrl = title.posterPath
-    ? `https://image.tmdb.org/t/p/w500${title.posterPath}`
-    : null;
-  const backdropUrl = title.backdropPath
-    ? `https://image.tmdb.org/t/p/w1280${title.backdropPath}`
-    : null;
+  const posterUrl = tmdbImageUrl(title.posterPath, "w500");
+  const backdropUrl = tmdbImageUrl(title.backdropPath, "w1280");
   const dateStr = title.releaseDate ?? title.firstAirDate;
   const year = dateStr?.slice(0, 4);
 
@@ -696,9 +693,7 @@ export default function TitleDetailPage() {
                           const isWatched = title.episodeWatches?.includes(
                             ep.id,
                           );
-                          const stillUrl = ep.stillPath
-                            ? `https://image.tmdb.org/t/p/w300${ep.stillPath}`
-                            : null;
+                          const stillUrl = tmdbImageUrl(ep.stillPath, "w300");
                           return (
                             <div
                               key={ep.id}
@@ -818,7 +813,7 @@ function ProviderBadge({
   name: string;
   logoPath: string | null;
 }) {
-  const logoUrl = logoPath ? `https://image.tmdb.org/t/p/w92${logoPath}` : null;
+  const logoUrl = tmdbImageUrl(logoPath, "w92");
 
   return (
     <div className="group relative">

app/page.tsx

@@ -6,6 +6,7 @@ import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { useEffect } from "react";
 import { useSession } from "@/lib/auth/client";
+import { tmdbImageUrl } from "@/lib/tmdb/image";
 
 /** Check whether the server has TMDB configured. */
 async function fetchSetupStatus(): Promise<boolean> {
@@ -103,7 +104,7 @@ export default function Home() {
             >
               <div className="overflow-hidden rounded-xl shadow-lg">
                 <Image
-                  src={`https://image.tmdb.org/t/p/w300${path}`}
+                  src={tmdbImageUrl(path, "w300")!}
                   alt=""
                   width={300}
                   height={450}