fix: handle search results with collections (#3393)

* feat: handle search collection * Update server/utils/typeHelpers.ts Co-authored-by: Danshil Kokil Mungur <danshil.mungur@gmail.com> * fix: modified title card to show collection instead of movies --------- Co-authored-by: Danshil Kokil Mungur <danshil.mungur@gmail.com> Co-authored-by: Brandon <cohbrandon@gmail.com>
1 year ago · 70b1540ae2
parent 7522aa3174
commit 70b1540ae2
7 changed files with 118 additions and 13 deletions
--- a/server/api/themoviedb/interfaces.ts
+++ b/server/api/themoviedb/interfaces.ts
@ -28,6 +28,18 @@ export interface TmdbTvResult extends TmdbMediaResult {
  first_air_date: string;
 }

+export interface TmdbCollectionResult {
+  id: number;
+  media_type: 'collection';
+  title: string;
+  original_title: string;
+  adult: boolean;
+  poster_path?: string;
+  backdrop_path?: string;
+  overview: string;
+  original_language: string;
+}
+
 export interface TmdbPersonResult {
  id: number;
  name: string;
@ -45,7 +57,12 @@ interface TmdbPaginatedResponse {
 }

 export interface TmdbSearchMultiResponse extends TmdbPaginatedResponse {
-  results: (TmdbMovieResult | TmdbTvResult | TmdbPersonResult)[];
+  results: (
+    | TmdbMovieResult
+    | TmdbTvResult
+    | TmdbPersonResult
+    | TmdbCollectionResult
+  )[];
 }

 export interface TmdbSearchMovieResponse extends TmdbPaginatedResponse {
--- a/server/models/Search.ts
+++ b/server/models/Search.ts
@ -1,4 +1,5 @@
 import type {
+  TmdbCollectionResult,
  TmdbMovieDetails,
  TmdbMovieResult,
  TmdbPersonDetails,
@ -9,7 +10,7 @@ import type {
 import { MediaType as MainMediaType } from '@server/constants/media';
 import type Media from '@server/entity/Media';

-export type MediaType = 'tv' | 'movie' | 'person';
+export type MediaType = 'tv' | 'movie' | 'person' | 'collection';

 interface SearchResult {
  id: number;
@ -43,6 +44,18 @@ export interface TvResult extends SearchResult {
  firstAirDate: string;
 }

+export interface CollectionResult {
+  id: number;
+  mediaType: 'collection';
+  title: string;
+  originalTitle: string;
+  adult: boolean;
+  posterPath?: string;
+  backdropPath?: string;
+  overview: string;
+  originalLanguage: string;
+}
+
 export interface PersonResult {
  id: number;
  name: string;
@ -53,7 +66,7 @@ export interface PersonResult {
  knownFor: (MovieResult | TvResult)[];
 }

-export type Results = MovieResult | TvResult | PersonResult;
+export type Results = MovieResult | TvResult | PersonResult | CollectionResult;

 export const mapMovieResult = (
  movieResult: TmdbMovieResult,
@ -99,6 +112,20 @@ export const mapTvResult = (
  mediaInfo: media,
 });

+export const mapCollectionResult = (
+  collectionResult: TmdbCollectionResult
+): CollectionResult => ({
+  id: collectionResult.id,
+  mediaType: collectionResult.media_type || 'collection',
+  adult: collectionResult.adult,
+  originalLanguage: collectionResult.original_language,
+  originalTitle: collectionResult.original_title,
+  title: collectionResult.title,
+  overview: collectionResult.overview,
+  backdropPath: collectionResult.backdrop_path,
+  posterPath: collectionResult.poster_path,
+});
+
 export const mapPersonResult = (
  personResult: TmdbPersonResult
 ): PersonResult => ({
@ -118,7 +145,12 @@ export const mapPersonResult = (
 });

 export const mapSearchResults = (
-  results: (TmdbMovieResult | TmdbTvResult | TmdbPersonResult)[],
+  results: (
+    | TmdbMovieResult
+    | TmdbTvResult
+    | TmdbPersonResult
+    | TmdbCollectionResult
+  )[],
  media?: Media[]
 ): Results[] =>
  results.map((result) => {
@ -139,6 +171,8 @@ export const mapSearchResults = (
              req.tmdbId === result.id && req.mediaType === MainMediaType.TV
          )
        );
+      case 'collection':
+        return mapCollectionResult(result);
      default:
        return mapPersonResult(result);
    }
--- a/server/routes/discover.ts
+++ b/server/routes/discover.ts
@ -14,12 +14,13 @@ import { getSettings } from '@server/lib/settings';
 import logger from '@server/logger';
 import { mapProductionCompany } from '@server/models/Movie';
 import {
+  mapCollectionResult,
  mapMovieResult,
  mapPersonResult,
  mapTvResult,
 } from '@server/models/Search';
 import { mapNetwork } from '@server/models/Tv';
-import { isMovie, isPerson } from '@server/utils/typeHelpers';
+import { isCollection, isMovie, isPerson } from '@server/utils/typeHelpers';
 import { Router } from 'express';
 import { sortBy } from 'lodash';
 import { z } from 'zod';
@ -647,6 +648,8 @@ discoverRoutes.get('/trending', async (req, res, next) => {
            )
          : isPerson(result)
          ? mapPersonResult(result)
+          : isCollection(result)
+          ? mapCollectionResult(result)
          : mapTvResult(
              result,
              media.find(
--- a/server/utils/typeHelpers.ts
+++ b/server/utils/typeHelpers.ts
@ -1,4 +1,5 @@
 import type {
+  TmdbCollectionResult,
  TmdbMovieDetails,
  TmdbMovieResult,
  TmdbPersonDetails,
@ -8,17 +9,35 @@ import type {
 } from '@server/api/themoviedb/interfaces';

 export const isMovie = (
-  movie: TmdbMovieResult | TmdbTvResult | TmdbPersonResult
+  movie:
+    | TmdbMovieResult
+    | TmdbTvResult
+    | TmdbPersonResult
+    | TmdbCollectionResult
 ): movie is TmdbMovieResult => {
  return (movie as TmdbMovieResult).title !== undefined;
 };

 export const isPerson = (
-  person: TmdbMovieResult | TmdbTvResult | TmdbPersonResult
+  person:
+    | TmdbMovieResult
+    | TmdbTvResult
+    | TmdbPersonResult
+    | TmdbCollectionResult
 ): person is TmdbPersonResult => {
  return (person as TmdbPersonResult).known_for !== undefined;
 };

+export const isCollection = (
+  collection:
+    | TmdbMovieResult
+    | TmdbTvResult
+    | TmdbPersonResult
+    | TmdbCollectionResult
+): collection is TmdbCollectionResult => {
+  return (collection as TmdbCollectionResult).media_type === 'collection';
+};
+
 export const isMovieDetails = (
  movie: TmdbMovieDetails | TmdbTvDetails | TmdbPersonDetails
 ): movie is TmdbMovieDetails => {
--- a/src/components/Common/ListView/index.tsx
+++ b/src/components/Common/ListView/index.tsx
@ -5,6 +5,7 @@ import useVerticalScroll from '@app/hooks/useVerticalScroll';
 import globalMessages from '@app/i18n/globalMessages';
 import type { WatchlistItem } from '@server/interfaces/api/discoverInterfaces';
 import type {
+  CollectionResult,
  MovieResult,
  PersonResult,
  TvResult,
@ -12,7 +13,7 @@ import type {
 import { useIntl } from 'react-intl';

 type ListViewProps = {
-  items?: (TvResult | MovieResult | PersonResult)[];
+  items?: (TvResult | MovieResult | PersonResult | CollectionResult)[];
  plexItems?: WatchlistItem[];
  isEmpty?: boolean;
  isLoading?: boolean;
@ -90,6 +91,18 @@ const ListView = ({
                />
              );
              break;
+            case 'collection':
+              titleCard = (
+                <TitleCard
+                  id={title.id}
+                  image={title.posterPath}
+                  summary={title.overview}
+                  title={title.title}
+                  mediaType={title.mediaType}
+                  canExpand
+                />
+              );
+              break;
            case 'person':
              titleCard = (
                <PersonCard
--- a/src/components/TitleCard/index.tsx
+++ b/src/components/TitleCard/index.tsx
@ -23,7 +23,7 @@ interface TitleCardProps {
  summary?: string;
  year?: string;
  title: string;
-  userScore: number;
+  userScore?: number;
  mediaType: MediaType;
  status?: MediaStatus;
  canExpand?: boolean;
@ -73,7 +73,9 @@ const TitleCard = ({
  const showRequestButton = hasPermission(
    [
      Permission.REQUEST,
-      mediaType === 'movie' ? Permission.REQUEST_MOVIE : Permission.REQUEST_TV,
+      mediaType === 'movie' || mediaType === 'collection'
+        ? Permission.REQUEST_MOVIE
+        : Permission.REQUEST_TV,
    ],
    { type: 'or' }
  );
@ -86,7 +88,13 @@ const TitleCard = ({
      <RequestModal
        tmdbId={id}
        show={showRequestModal}
-        type={mediaType === 'movie' ? 'movie' : 'tv'}
+        type={
+          mediaType === 'movie'
+            ? 'movie'
+            : mediaType === 'collection'
+            ? 'collection'
+            : 'tv'
+        }
        onComplete={requestComplete}
        onUpdating={requestUpdating}
        onCancel={closeModal}
@ -130,7 +138,7 @@ const TitleCard = ({
          <div className="absolute left-0 right-0 flex items-center justify-between p-2">
            <div
              className={`pointer-events-none z-40 rounded-full border bg-opacity-80 shadow-md ${
-                mediaType === 'movie'
+                mediaType === 'movie' || mediaType === 'collection'
                  ? 'border-blue-500 bg-blue-600'
                  : 'border-purple-600 bg-purple-600'
              }`}
@ -138,6 +146,8 @@ const TitleCard = ({
              <div className="flex h-4 items-center px-2 py-2 text-center text-xs font-medium uppercase tracking-wider text-white sm:h-5">
                {mediaType === 'movie'
                  ? intl.formatMessage(globalMessages.movie)
+                  : mediaType === 'collection'
+                  ? intl.formatMessage(globalMessages.collection)
                  : intl.formatMessage(globalMessages.tvshow)}
              </div>
            </div>
@ -177,7 +187,15 @@ const TitleCard = ({
            leaveTo="opacity-0"
          >
            <div className="absolute inset-0 overflow-hidden rounded-xl">
-              <Link href={mediaType === 'movie' ? `/movie/${id}` : `/tv/${id}`}>
+              <Link
+                href={
+                  mediaType === 'movie'
+                    ? `/movie/${id}`
+                    : mediaType === 'collection'
+                    ? `/collection/${id}`
+                    : `/tv/${id}`
+                }
+              >
                <a
                  className="absolute inset-0 h-full w-full cursor-pointer overflow-hidden text-left"
                  style={{
--- a/src/i18n/globalMessages.ts
+++ b/src/i18n/globalMessages.ts
@ -16,6 +16,7 @@ const globalMessages = defineMessages({
  approved: 'Approved',
  movie: 'Movie',
  movies: 'Movies',
+  collection: 'Collection',
  tvshow: 'Series',
  tvshows: 'Series',
  cancel: 'Cancel',