feat(trending): add filter options

Added new filter options on the trending page to allow users to sort content by mediaType and select
trending-scope.

Author: bogo22

seerr-api.yml

@@ -5844,6 +5844,23 @@ paths:
           schema:
             type: string
             example: en
+        - in: query
+          name: mediaType
+          schema:
+            type: string
+            enum:
+              - all
+              - movie
+              - tv
+            default: all
+        - in: query
+          name: timeWindow
+          schema:
+            type: string
+            enum:
+              - day
+              - week
+            default: day
       responses:
         '200':
           description: Results

server/api/themoviedb/index.ts

@@ -715,16 +715,19 @@ class TheMovieDb extends ExternalAPI implements TvShowProvider {
   public getMovieTrending = async ({
     page = 1,
     timeWindow = 'day',
+    language = this.locale,
   }: {
     page?: number;
     timeWindow?: 'day' | 'week';
+    language?: string;
   } = {}): Promise<TmdbSearchMovieResponse> => {
     try {
       const data = await this.get<TmdbSearchMovieResponse>(
         `/trending/movie/${timeWindow}`,
         {
           params: {
             page,
+            language,
           },
         }
       );
@@ -738,16 +741,19 @@ class TheMovieDb extends ExternalAPI implements TvShowProvider {
   public getTvTrending = async ({
     page = 1,
     timeWindow = 'day',
+    language = this.locale,
   }: {
     page?: number;
     timeWindow?: 'day' | 'week';
+    language?: string;
   } = {}): Promise<TmdbSearchTvResponse> => {
     try {
       const data = await this.get<TmdbSearchTvResponse>(
         `/trending/tv/${timeWindow}`,
         {
           params: {
             page,
+            language,
           },
         }
       );

server/routes/discover.ts

@@ -673,9 +673,72 @@ discoverRoutes.get('/trending', async (req, res, next) => {
   const tmdb = createTmdbWithRegionLanguage(req.user);
 
   try {
+    const mediaType = (req.query.mediaType as 'all' | 'movie' | 'tv') ?? 'all';
+    const timeWindow =
+      (req.query.timeWindow as 'day' | 'week') === 'week' ? 'week' : 'day';
+    const language = (req.query.language as string) ?? req.locale;
+    const page = Number(req.query.page);
+
+    if (mediaType === 'movie') {
+      const data = await tmdb.getMovieTrending({
+        page,
+        language,
+        timeWindow,
+      });
+
+      const media = await Media.getRelatedMedia(
+        req.user,
+        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) =>
+          mapMovieResult(
+            result,
+            media.find(
+              (med) =>
+                med.tmdbId === result.id && med.mediaType === MediaType.MOVIE
+            )
+          )
+        ),
+      });
+    }
+
+    if (mediaType === 'tv') {
+      const data = await tmdb.getTvTrending({
+        page,
+        language,
+        timeWindow,
+      });
+
+      const media = await Media.getRelatedMedia(
+        req.user,
+        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) =>
+          mapTvResult(
+            result,
+            media.find(
+              (med) =>
+                med.tmdbId === result.id && med.mediaType === MediaType.TV
+            )
+          )
+        ),
+      });
+    }
+
     const data = await tmdb.getAllTrending({
-      page: Number(req.query.page),
-      language: (req.query.language as string) ?? req.locale,
+      page,
+      language,
+      timeWindow,
     });
 
     const media = await Media.getRelatedMedia(

src/components/Discover/Trending.tsx

@@ -2,21 +2,32 @@ import Header from '@app/components/Common/Header';
 import ListView from '@app/components/Common/ListView';
 import PageTitle from '@app/components/Common/PageTitle';
 import useDiscover from '@app/hooks/useDiscover';
+import globalMessages from '@app/i18n/globalMessages';
 import Error from '@app/pages/_error';
 import defineMessages from '@app/utils/defineMessages';
+import { CircleStackIcon, FunnelIcon } from '@heroicons/react/24/solid';
 import type {
   MovieResult,
   PersonResult,
   TvResult,
 } from '@server/models/Search';
+import { useState } from 'react';
 import { useIntl } from 'react-intl';
 
 const messages = defineMessages('components.Discover', {
   trending: 'Trending',
+  timeWindowDay: 'Daily',
+  timeWindowWeek: 'Weekly',
 });
 
+type MediaType = 'all' | 'movie' | 'tv';
+
+type TimeWindow = 'day' | 'week';
+
 const Trending = () => {
   const intl = useIntl();
+  const [currentMediaType, setCurrentMediaType] = useState<MediaType>('all');
+  const [currentTimeWindow, setCurrentTimeWindow] = useState<TimeWindow>('day');
   const {
     isLoadingInitialData,
     isEmpty,
@@ -26,7 +37,8 @@ const Trending = () => {
     fetchMore,
     error,
   } = useDiscover<MovieResult | TvResult | PersonResult>(
-    '/api/v1/discover/trending'
+    '/api/v1/discover/trending',
+    { mediaType: currentMediaType, timeWindow: currentTimeWindow }
   );
 
   if (error) {
@@ -36,8 +48,53 @@ const Trending = () => {
   return (
     <>
       <PageTitle title={intl.formatMessage(messages.trending)} />
-      <div className="mt-1 mb-5">
+      <div className="mt-1 mb-5 flex flex-col justify-between lg:flex-row lg:items-end">
         <Header>{intl.formatMessage(messages.trending)}</Header>
+        <div className="mt-2 flex flex-grow flex-col sm:flex-row lg:flex-grow-0">
+          <div className="mb-2 flex flex-grow sm:mb-0 sm:mr-2 lg:flex-grow-0">
+            <span className="inline-flex cursor-default items-center rounded-l-md border border-r-0 border-gray-500 bg-gray-800 px-3 text-sm text-gray-100">
+              <CircleStackIcon className="h-6 w-6" />
+            </span>
+            <select
+              id="mediaType"
+              name="mediaType"
+              onChange={(e) => setCurrentMediaType(e.target.value as MediaType)}
+              value={currentMediaType}
+              className="rounded-r-only"
+            >
+              <option value="all">
+                {intl.formatMessage(globalMessages.all)}
+              </option>
+              <option value="movie">
+                {intl.formatMessage(globalMessages.movies)}
+              </option>
+              <option value="tv">
+                {intl.formatMessage(globalMessages.tvshows)}
+              </option>
+            </select>
+          </div>
+          <div className="mb-2 flex flex-grow sm:mb-0 sm:mr-2 lg:flex-grow-0">
+            <span className="inline-flex cursor-default items-center rounded-l-md border border-r-0 border-gray-500 bg-gray-800 px-3 text-sm text-gray-100">
+              <FunnelIcon className="h-6 w-6" />
+            </span>
+            <select
+              id="timeWindow"
+              name="timeWindow"
+              onChange={(e) =>
+                setCurrentTimeWindow(e.target.value as TimeWindow)
+              }
+              value={currentTimeWindow}
+              className="rounded-r-only"
+            >
+              <option value="day">
+                {intl.formatMessage(messages.timeWindowDay)}
+              </option>
+              <option value="week">
+                {intl.formatMessage(messages.timeWindowWeek)}
+              </option>
+            </select>
+          </div>
+        </div>
       </div>
       <ListView
         items={titles}

src/i18n/locale/en.json

@@ -123,6 +123,8 @@
   "components.Discover.resetwarning": "Reset all sliders to default. This will also delete any custom sliders!",
   "components.Discover.stopediting": "Stop Editing",
   "components.Discover.studios": "Studios",
+  "components.Discover.timeWindowDay": "Daily",
+  "components.Discover.timeWindowWeek": "Weekly",
   "components.Discover.tmdbmoviegenre": "TMDB Movie Genre",
   "components.Discover.tmdbmoviekeyword": "TMDB Movie Keyword",
   "components.Discover.tmdbmoviestreamingservices": "TMDB Movie Streaming Services",