feat: Add branded poster fallback for media without poster images

apps/web/src/app/[lang]/[username]/_components/user-items-list.tsx

@@ -7,6 +7,7 @@ import { useEffect } from 'react'
 import { useInView } from 'react-intersection-observer'
 import { v4 } from 'uuid'
 import { getUserItems, useGetUserItemsInfinite } from '@/api/user-items'
+import { PosterFallback } from '@/components/poster-fallback'
 import { useLanguage } from '@/context/language'
 import { useSession } from '@/context/session'
 import { tmdbImage } from '@/utils/tmdb/image'
@@ -70,14 +71,16 @@ export function UserItemsList({ filters }: UserItemsProps) {
           key={id}
           href={`/${language}/${mediaType === 'MOVIE' ? 'movies' : 'tv-series'}/${tmdbId}`}
         >
-          {posterPath && (
+          {posterPath ? (
             <Image
               fill
               className="z-10 object-fill"
               src={tmdbImage(posterPath, 'w500')}
               alt={title}
               sizes="100%"
             />
+          ) : (
+            <PosterFallback title={title} />
           )}
         </Link>
       ))}

apps/web/src/app/[lang]/[username]/stats/_most_watched-series.tsx

@@ -51,12 +51,10 @@ export function MostWatchedSeries() {
               key={id}
             >
               <PosterCard.Root>
-                {posterPath && (
-                  <PosterCard.Image
-                    src={tmdbImage(posterPath, 'w500')}
-                    alt={title}
-                  />
-                )}
+                <PosterCard.Image
+                  src={posterPath ? tmdbImage(posterPath, 'w500') : ''}
+                  alt={title}
+                />
 
                 <p className="text-xs text-muted-foreground text-center lowercase">
                   {episodes} {dictionary.episodes}

apps/web/src/app/[lang]/lists/[id]/_components/list-items/list-item-card.tsx

@@ -5,6 +5,7 @@ import { CSS } from '@dnd-kit/utilities'
 import Image from 'next/image'
 import { Link } from 'next-view-transitions'
 import type { GetListItemsByListId200Item } from '@/api/endpoints.schemas'
+import { PosterFallback } from '@/components/poster-fallback'
 import { useLanguage } from '@/context/language'
 import { cn } from '@/lib/utils'
 import { tmdbImage } from '@/utils/tmdb/image'
@@ -43,14 +44,16 @@ export const ListItemCard = ({
         {...props}
       >
         <div className="relative aspect-poster w-full overflow-hidden rounded-md border bg-background/50 shadow">
-          {posterPath && (
+          {posterPath ? (
             <Image
               fill
               className="z-10 object-fill"
               src={tmdbImage(posterPath, 'w500')}
               alt={title}
               sizes="100%"
             />
+          ) : (
+            <PosterFallback title={title} />
           )}
         </div>
       </div>
@@ -65,14 +68,16 @@ export const ListItemCard = ({
       {...props}
     >
       <div className="relative aspect-poster w-full overflow-hidden rounded-md border bg-background/50 shadow">
-        {posterPath && (
+        {posterPath ? (
           <Image
             fill
             className="z-10 object-fill"
             src={tmdbImage(posterPath, 'w500')}
             alt={title}
             sizes="100%"
           />
+        ) : (
+          <PosterFallback title={title} />
         )}
 
         <div

apps/web/src/app/[lang]/movies/[id]/_components/movie-details.tsx

@@ -5,6 +5,7 @@ import { BreadcrumbJsonLd, MovieJsonLd } from '@/components/structured-data'
 import { tmdb } from '@/services/tmdb'
 import type { Language } from '@/types/languages'
 import { tmdbImage } from '@/utils/tmdb/image'
+import { APP_URL } from '../../../../../../constants'
 import { MovieCollection } from './movie-collection'
 import { MovieInfos } from './movie-infos'
 import { MovieTabs } from './movie-tabs'
@@ -16,6 +17,12 @@ type MovieDetailsProps = {
 
 export const MovieDetails = async ({ id, language }: MovieDetailsProps) => {
   const movie = await tmdb.movies.details(id, language)
+  const backdropUrl = movie.backdrop_path
+    ? tmdbImage(movie.backdrop_path)
+    : undefined
+  const posterUrl = movie.poster_path ? tmdbImage(movie.poster_path) : undefined
+  const structuredDataImage =
+    backdropUrl ?? posterUrl ?? `${APP_URL}/logo-black.png`
 
   return (
     <div className="relative mx-auto max-w-6xl">
@@ -35,12 +42,12 @@ export const MovieDetails = async ({ id, language }: MovieDetailsProps) => {
       <MovieJsonLd
         name={movie.title}
         description={movie.overview}
-        image={tmdbImage(movie.backdrop_path)}
+        image={structuredDataImage}
         datePublished={movie.release_date}
         rating={movie.vote_average}
         url={`https://plotwist.app/${language}/movies/${id}`}
       />
-      <Banner url={tmdbImage(movie.backdrop_path)} />
+      <Banner url={backdropUrl} posterUrl={posterUrl} title={movie.title} />
 
       <section className="mx-auto my-8 max-w-4xl space-y-6">
         <MovieInfos movie={movie} language={language} />

apps/web/src/app/[lang]/onboarding/_components/onboarding-swiper.tsx

@@ -4,6 +4,7 @@ import { useInfiniteQuery } from '@tanstack/react-query'
 import { AnimatePresence, motion, type PanInfo } from 'framer-motion'
 import { Bookmark, Check, Eye, Pointer, X as XIcon } from 'lucide-react'
 import Image from 'next/image'
+import { PosterFallback } from '@/components/poster-fallback'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { tmdb } from '@/services/tmdb'
 import type { Language } from '@/types/languages'
@@ -194,14 +195,16 @@ function ExitCard({
       style={{ zIndex: 20 }}
     >
       <div className="relative h-full w-full overflow-hidden rounded-[32px] border border-border/30 shadow-xl shadow-black/20">
-        {movie.poster_path && (
+        {movie.poster_path ? (
           <Image
             src={tmdbImage(movie.poster_path, 'w500')}
             alt={movie.title}
             fill
             className="object-cover"
             sizes="(max-width: 640px) 70vw, 280px"
           />
+        ) : (
+          <PosterFallback title={movie.title} />
         )}
       </div>
     </motion.div>
@@ -568,14 +571,16 @@ export const OnboardingSwiper = ({ lang }: OnboardingSwiperProps) => {
                   zIndex: 3 - stackIdx,
                 }}
               >
-                {movie.poster_path && (
+                {movie.poster_path ? (
                   <Image
                     src={tmdbImage(movie.poster_path, 'w500')}
                     alt={movie.title}
                     fill
                     className="object-cover"
                     sizes="280px"
                   />
+                ) : (
+                  <PosterFallback title={movie.title} />
                 )}
               </div>
             )

apps/web/src/app/[lang]/people/[id]/_credits-page.tsx

@@ -79,12 +79,10 @@ export function CreditsPage({ roles, credits }: CreditsPageProps) {
                 <TooltipTrigger>
                   <PosterCard.Root>
                     <Link href={href}>
-                      {credit.poster_path && (
-                        <PosterCard.Image
-                          src={tmdbImage(credit.poster_path)}
-                          alt={credit.overview}
-                        />
-                      )}
+                      <PosterCard.Image
+                        src={credit.poster_path ? tmdbImage(credit.poster_path) : ''}
+                        alt={title || credit.overview}
+                      />
                     </Link>
                   </PosterCard.Root>
                 </TooltipTrigger>

apps/web/src/app/[lang]/tv-series/[id]/_components/tv-serie-details.tsx

@@ -5,6 +5,7 @@ import { BreadcrumbJsonLd, TvSeriesJsonLd } from '@/components/structured-data'
 import { tmdb } from '@/services/tmdb'
 import type { Language } from '@/types/languages'
 import { tmdbImage } from '@/utils/tmdb/image'
+import { APP_URL } from '../../../../../../constants'
 import { TvSerieInfos } from './tv-serie-infos'
 import { TvSerieTabs } from './tv-serie-tabs'
 
@@ -15,6 +16,14 @@ type TvSerieDetailsProps = {
 
 export const TvSerieDetails = async ({ id, language }: TvSerieDetailsProps) => {
   const tvSerie = await tmdb.tv.details(id, language)
+  const backdropUrl = tvSerie.backdrop_path
+    ? tmdbImage(tvSerie.backdrop_path)
+    : undefined
+  const posterUrl = tvSerie.poster_path
+    ? tmdbImage(tvSerie.poster_path)
+    : undefined
+  const structuredDataImage =
+    backdropUrl ?? posterUrl ?? `${APP_URL}/logo-black.png`
 
   return (
     <div className="mx-auto max-w-6xl relative">
@@ -34,10 +43,10 @@ export const TvSerieDetails = async ({ id, language }: TvSerieDetailsProps) => {
       <TvSeriesJsonLd
         name={tvSerie.name}
         description={tvSerie.overview}
-        image={tmdbImage(tvSerie.backdrop_path)}
+        image={structuredDataImage}
         url={`https://plotwist.app/${language}/tv-series/${id}`}
       />
-      <Banner url={tmdbImage(tvSerie.backdrop_path)} />
+      <Banner url={backdropUrl} posterUrl={posterUrl} title={tvSerie.name} />
 
       <section className="mx-auto my-8 max-w-4xl space-y-6">
         <TvSerieInfos language={language} tvSerie={tvSerie} />

apps/web/src/components/banner/banner.tsx

@@ -1,27 +1,56 @@
 import type { ComponentProps } from 'react'
 import { cn } from '@/lib/utils'
+import { PosterFallback } from '../poster-fallback'
 
 type BannerProps = {
   url?: string
+  posterUrl?: string
+  title?: string
 } & ComponentProps<'div'>
 
-export const Banner = ({ url, className, ...props }: BannerProps) => {
+export const Banner = ({
+  url,
+  posterUrl,
+  title,
+  className,
+  ...props
+}: BannerProps) => {
+  const backgroundUrl = url || posterUrl
+  const isPosterAsFallback = !url && Boolean(posterUrl)
+
   return (
     <div
       {...props}
       className={cn(
-        'w-full overflow-hidden md:rounded-lg aspect-banner border-b lg:border max-h-[55dvh]',
-        !url && 'border-dashed bg-background',
+        'relative w-full overflow-hidden md:rounded-lg aspect-banner border-b lg:border max-h-[55dvh]',
+        !backgroundUrl && 'border-dashed bg-background',
         className
       )}
     >
-      <div
-        style={{
-          backgroundImage: `url('${url}')`,
-          backgroundSize: 'cover',
-        }}
-        className="h-full w-full"
-      />
+      {backgroundUrl ? (
+        <>
+          <div
+            style={{
+              backgroundImage: `url('${backgroundUrl}')`,
+              backgroundSize: 'cover',
+              backgroundPosition: 'center',
+            }}
+            className={cn(
+              'h-full w-full',
+              isPosterAsFallback && 'scale-110 blur-md brightness-75'
+            )}
+          />
+
+          {isPosterAsFallback && (
+            <div className="absolute inset-0 bg-gradient-to-b from-transparent via-background/10 to-background/40" />
+          )}
+        </>
+      ) : (
+        <PosterFallback
+          title={title}
+          className="relative h-full bg-gradient-to-b from-muted to-background"
+        />
+      )}
     </div>
   )
 }

apps/web/src/components/command-search/command-search-items.tsx

@@ -8,6 +8,7 @@ import { HoverCardPortal } from '@radix-ui/react-hover-card'
 import Image from 'next/image'
 import { Link } from 'next-view-transitions'
 import type { GetUsersSearch200UsersItem } from '@/api/endpoints.schemas'
+import { PosterFallback } from '@/components/poster-fallback'
 import type {
   MovieWithMediaType,
   PersonWithMediaType,
@@ -59,13 +60,15 @@ export const CommandSearchMovie = ({
 
           <ItemHoverCard.Information>
             <ItemHoverCard.Poster>
-              {item.poster_path && (
+              {item.poster_path ? (
                 <Image
                   src={tmdbImage(item.poster_path, 'w500')}
                   alt={item.title}
                   fill
                   style={{ objectFit: 'cover' }}
                 />
+              ) : (
+                <PosterFallback title={item.title} />
               )}
             </ItemHoverCard.Poster>
 
@@ -116,13 +119,15 @@ export const CommandSearchTvSerie = ({
 
           <ItemHoverCard.Information>
             <ItemHoverCard.Poster>
-              {item.poster_path && (
+              {item.poster_path ? (
                 <Image
                   src={tmdbImage(item.poster_path, 'w500')}
                   alt={item.name}
                   fill
                   style={{ objectFit: 'cover' }}
                 />
+              ) : (
+                <PosterFallback title={item.name} />
               )}
             </ItemHoverCard.Poster>
 

apps/web/src/components/full-review/full-review.tsx

@@ -12,6 +12,7 @@ import Image from 'next/image'
 import { Link } from 'next-view-transitions'
 import { useState } from 'react'
 import type { GetDetailedReviews200ReviewsItem } from '@/api/endpoints.schemas'
+import { PosterFallback } from '@/components/poster-fallback'
 import { useLanguage } from '@/context/language'
 import { cn } from '@/lib/utils'
 import { locale } from '@/utils/date/locale'
@@ -58,8 +59,10 @@ export const FullReview = ({ review }: FullReviewProps) => {
       <div className="flex space-x-4">
         <Link href={href} className="w-2/6 md:w-1/6">
           <figure className="relative aspect-[2/3] overflow-hidden rounded-md border bg-muted">
-            {posterPath && (
+            {posterPath ? (
               <Image src={tmdbImage(posterPath)} fill alt={title} />
+            ) : (
+              <PosterFallback title={title} />
             )}
           </figure>
         </Link>

apps/web/src/components/list-command/list-command-movies.tsx

@@ -10,6 +10,7 @@ import { Skeleton } from '@plotwist/ui/components/ui/skeleton'
 import { HoverCardPortal } from '@radix-ui/react-hover-card'
 import { Minus, Plus } from 'lucide-react'
 import Image from 'next/image'
+import { PosterFallback } from '@/components/poster-fallback'
 import { Link } from 'next-view-transitions'
 import { v4 } from 'uuid'
 import { ItemHoverCard } from '@/components/item-hover-card'
@@ -96,13 +97,15 @@ export const ListCommandMovies = ({
 
                   <ItemHoverCard.Information>
                     <ItemHoverCard.Poster>
-                      {movie.poster_path && (
+                      {movie.poster_path ? (
                         <Image
                           src={tmdbImage(movie.poster_path, 'w500')}
                           alt={movie.title}
                           fill
                           style={{ objectFit: 'cover' }}
                         />
+                      ) : (
+                        <PosterFallback title={movie.title} />
                       )}
                     </ItemHoverCard.Poster>
 

apps/web/src/components/list-command/list-command-tv.tsx

@@ -8,6 +8,7 @@ import { Skeleton } from '@plotwist/ui/components/ui/skeleton'
 import { HoverCardPortal } from '@radix-ui/react-hover-card'
 import { Minus, Plus } from 'lucide-react'
 import Image from 'next/image'
+import { PosterFallback } from '@/components/poster-fallback'
 import { Link } from 'next-view-transitions'
 import { v4 } from 'uuid'
 import { ItemHoverCard } from '@/components/item-hover-card'
@@ -94,13 +95,15 @@ export const ListCommandTv = ({
 
                   <ItemHoverCard.Information>
                     <ItemHoverCard.Poster>
-                      {tvSerie.poster_path && (
+                      {tvSerie.poster_path ? (
                         <Image
                           src={tmdbImage(tvSerie.poster_path, 'w500')}
                           alt={tvSerie.name}
                           fill
                           style={{ objectFit: 'cover' }}
                         />
+                      ) : (
+                        <PosterFallback title={tvSerie.name} />
                       )}
                     </ItemHoverCard.Poster>