feat: add trending to discover page

overseerr-api.yml

@@ -1531,6 +1531,48 @@ paths:
                     type: array
                     items:
                       $ref: '#/components/schemas/TvResult'
+  /discover/trending:
+    get:
+      summary: Trending TV and Movies
+      description: Returns a list of movie/tv shows in JSON format
+      tags:
+        - search
+      parameters:
+        - in: query
+          name: page
+          schema:
+            type: number
+            example: 1
+            default: 1
+        - in: query
+          name: language
+          schema:
+            type: string
+            example: en
+      responses:
+        '200':
+          description: Results
+          content:
+            application/json:
+              schema:
+                type: object
+                properties:
+                  page:
+                    type: number
+                    example: 1
+                  totalPages:
+                    type: number
+                    example: 20
+                  totalResults:
+                    type: number
+                    example: 200
+                  results:
+                    type: array
+                    items:
+                      anyOf:
+                        - $ref: '#/components/schemas/MovieResult'
+                        - $ref: '#/components/schemas/TvResult'
+                        - $ref: '#/components/schemas/PersonResult'
   /request:
     get:
       summary: Get all requests

server/api/themoviedb.ts

@@ -556,15 +556,19 @@ class TheMovieDb {
   public getAllTrending = async ({
     page = 1,
     timeWindow = 'day',
-  }: { page?: number; timeWindow?: 'day' | 'week' } = {}): Promise<
-    TmdbSearchMultiResponse
-  > => {
+    language = 'en-US',
+  }: {
+    page?: number;
+    timeWindow?: 'day' | 'week';
+    language?: string;
+  } = {}): Promise<TmdbSearchMultiResponse> => {
     try {
       const response = await this.axios.get<TmdbSearchMultiResponse>(
         `/trending/all/${timeWindow}`,
         {
           params: {
             page,
+            language,
           },
         }
       );

server/routes/discover.ts

@@ -1,8 +1,24 @@
 import { Router } from 'express';
-import TheMovieDb from '../api/themoviedb';
-import { mapMovieResult, mapTvResult } from '../models/Search';
+import TheMovieDb, {
+  TmdbMovieResult,
+  TmdbTvResult,
+  TmdbPersonResult,
+} from '../api/themoviedb';
+import { mapMovieResult, mapTvResult, mapPersonResult } from '../models/Search';
 import Media from '../entity/Media';
 
+const isMovie = (
+  movie: TmdbMovieResult | TmdbTvResult | TmdbPersonResult
+): movie is TmdbMovieResult => {
+  return (movie as TmdbMovieResult).title !== undefined;
+};
+
+const isPerson = (
+  person: TmdbMovieResult | TmdbTvResult | TmdbPersonResult
+): person is TmdbPersonResult => {
+  return (person as TmdbPersonResult).known_for !== undefined;
+};
+
 const discoverRoutes = Router();
 
 discoverRoutes.get('/movies', async (req, res) => {
@@ -80,4 +96,36 @@ discoverRoutes.get('/tv', async (req, res) => {
   });
 });
 
+discoverRoutes.get('/trending', async (req, res) => {
+  const tmdb = new TheMovieDb();
+
+  const data = await tmdb.getAllTrending({
+    page: Number(req.query.page),
+    language: req.query.language as string,
+  });
+
+  const media = await Media.getRelatedMedia(
+    data.results.map((result) => result.id)
+  );
+
+  return res.status(200).json({
+    page: data.page,
+    totalPages: data.total_pages,
+    totalResults: data.total_results,
+    results: data.results.map((result) =>
+      isMovie(result)
+        ? mapMovieResult(
+            result,
+            media.find((req) => req.tmdbId === result.id)
+          )
+        : isPerson(result)
+        ? mapPersonResult(result)
+        : mapTvResult(
+            result,
+            media.find((req) => req.tmdbId === result.id)
+          )
+    ),
+  });
+});
+
 export default discoverRoutes;

src/components/Discover/index.tsx

@@ -1,7 +1,12 @@
 import React, { useContext } from 'react';
 import useSWR from 'swr';
-import type { MovieResult, TvResult } from '../../../server/models/Search';
+import type {
+  MovieResult,
+  TvResult,
+  PersonResult,
+} from '../../../server/models/Search';
 import TitleCard from '../TitleCard';
+import PersonCard from '../PersonCard';
 import { MediaRequest } from '../../../server/entity/MediaRequest';
 import RequestCard from '../TitleCard/RequestCard';
 import Slider from '../Slider';
@@ -18,6 +23,7 @@ const messages = defineMessages({
   recentlyAdded: 'Recently Added',
   nopending: 'No Pending Requests',
   upcoming: 'Upcoming Movies',
+  trending: 'Trending',
 });
 
 interface MovieDiscoverResult {
@@ -34,6 +40,13 @@ interface TvDiscoverResult {
   results: TvResult[];
 }
 
+interface MixedResult {
+  page: number;
+  totalResults: number;
+  totalPages: number;
+  results: (TvResult | MovieResult | PersonResult)[];
+}
+
 const Discover: React.FC = () => {
   const intl = useIntl();
   const { locale } = useContext(LanguageContext);
@@ -48,6 +61,10 @@ const Discover: React.FC = () => {
     MovieDiscoverResult
   >(`/api/v1/discover/movies/upcoming?language=${locale}`);
 
+  const { data: trendingData, error: trendingError } = useSWR<MixedResult>(
+    `/api/v1/discover/trending?language=${locale}`
+  );
+
   const { data: media, error: mediaError } = useSWR<MediaResultsResponse>(
     '/api/v1/media?filter=available&take=20&sort=modified'
   );
@@ -84,7 +101,7 @@ const Discover: React.FC = () => {
         </div>
       </div>
       <Slider
-        sliderKey="requests"
+        sliderKey="media"
         isLoading={!media && !mediaError}
         isEmpty={!!media && !mediaError && media.results.length === 0}
         items={media?.results?.map((item) => (
@@ -159,7 +176,7 @@ const Discover: React.FC = () => {
         </div>
       </div>
       <Slider
-        sliderKey="movies"
+        sliderKey="upcoming"
         isLoading={!movieUpcomingData && !movieUpcomingError}
         isEmpty={false}
         items={movieUpcomingData?.results.map((title) => (
@@ -176,6 +193,70 @@ const Discover: React.FC = () => {
           />
         ))}
       />
+      <div className="md:flex md:items-center md:justify-between mb-4 mt-6">
+        <div className="flex-1 min-w-0">
+          <Link href="/discover/trending">
+            <a className="inline-flex text-xl leading-7 text-cool-gray-300 hover:text-white sm:text-2xl sm:leading-9 sm:truncate items-center">
+              <span>
+                <FormattedMessage {...messages.trending} />
+              </span>
+              <svg
+                className="w-6 h-6 ml-2"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M13 9l3 3m0 0l-3 3m3-3H8m13 0a9 9 0 11-18 0 9 9 0 0118 0z"
+                />
+              </svg>
+            </a>
+          </Link>
+        </div>
+      </div>
+      <Slider
+        sliderKey="trending"
+        isLoading={!trendingData && !trendingError}
+        isEmpty={false}
+        items={trendingData?.results.map((title) => {
+          switch (title.mediaType) {
+            case 'movie':
+              return (
+                <TitleCard
+                  id={title.id}
+                  image={title.posterPath}
+                  status={title.mediaInfo?.status}
+                  summary={title.overview}
+                  title={title.title}
+                  userScore={title.voteAverage}
+                  year={title.releaseDate}
+                  mediaType={title.mediaType}
+                />
+              );
+            case 'tv':
+              return (
+                <TitleCard
+                  id={title.id}
+                  image={title.posterPath}
+                  status={title.mediaInfo?.status}
+                  summary={title.overview}
+                  title={title.name}
+                  userScore={title.voteAverage}
+                  year={title.firstAirDate}
+                  mediaType={title.mediaType}
+                />
+              );
+            case 'person':
+              return (
+                <PersonCard name={title.name} profilePath={title.profilePath} />
+              );
+          }
+        })}
+      />
       <div className="md:flex md:items-center md:justify-between mb-4 mt-6">
         <div className="flex-1 min-w-0">
           <Link href="/discover/movies">