From e084649878a58c296786141d12dd69a69a27ee85 Mon Sep 17 00:00:00 2001
From: Ryan Cohen <ryan@sct.dev>
Date: Wed, 4 Jan 2023 14:19:51 +0900
Subject: [PATCH] feat: add keywords to movie/series detail pages (#3204)

---
 server/api/themoviedb/index.ts        |  2 +-
 server/api/themoviedb/interfaces.ts   |  3 +++
 server/models/Movie.ts                |  6 ++++++
 src/components/Common/Tag/index.tsx   | 16 ++++++++++++++++
 src/components/MovieDetails/index.tsx | 15 +++++++++++++++
 src/components/TvDetails/index.tsx    | 15 +++++++++++++++
 6 files changed, 56 insertions(+), 1 deletion(-)
 create mode 100644 src/components/Common/Tag/index.tsx

diff --git a/server/api/themoviedb/index.ts b/server/api/themoviedb/index.ts
index bcfc06bb..b6421edd 100644
--- a/server/api/themoviedb/index.ts
+++ b/server/api/themoviedb/index.ts
@@ -242,7 +242,7 @@ class TheMovieDb extends ExternalAPI {
           params: {
             language,
             append_to_response:
-              'credits,external_ids,videos,release_dates,watch/providers',
+              'credits,external_ids,videos,keywords,release_dates,watch/providers',
           },
         },
         43200
diff --git a/server/api/themoviedb/interfaces.ts b/server/api/themoviedb/interfaces.ts
index a3515416..9a07d769 100644
--- a/server/api/themoviedb/interfaces.ts
+++ b/server/api/themoviedb/interfaces.ts
@@ -171,6 +171,9 @@ export interface TmdbMovieDetails {
     id: number;
     results?: { [iso_3166_1: string]: TmdbWatchProviders };
   };
+  keywords: {
+    keywords: TmdbKeyword[];
+  };
 }
 
 export interface TmdbVideo {
diff --git a/server/models/Movie.ts b/server/models/Movie.ts
index 3c4686b2..19f812dd 100644
--- a/server/models/Movie.ts
+++ b/server/models/Movie.ts
@@ -9,6 +9,7 @@ import type {
   Crew,
   ExternalIds,
   Genre,
+  Keyword,
   ProductionCompany,
   WatchProviders,
 } from './common';
@@ -83,6 +84,7 @@ export interface MovieDetails {
   externalIds: ExternalIds;
   plexUrl?: string;
   watchProviders?: WatchProviders[];
+  keywords: Keyword[];
 }
 
 export const mapProductionCompany = (
@@ -142,4 +144,8 @@ export const mapMovieDetails = (
   externalIds: mapExternalIds(movie.external_ids),
   mediaInfo: media,
   watchProviders: mapWatchProviders(movie['watch/providers']?.results ?? {}),
+  keywords: movie.keywords.keywords.map((keyword) => ({
+    id: keyword.id,
+    name: keyword.name,
+  })),
 });
diff --git a/src/components/Common/Tag/index.tsx b/src/components/Common/Tag/index.tsx
new file mode 100644
index 00000000..9a24c149
--- /dev/null
+++ b/src/components/Common/Tag/index.tsx
@@ -0,0 +1,16 @@
+import { TagIcon } from '@heroicons/react/24/outline';
+
+type TagProps = {
+  content: string;
+};
+
+const Tag = ({ content }: TagProps) => {
+  return (
+    <div className="inline-flex cursor-pointer items-center rounded-full bg-gray-800 px-2 py-1 text-sm text-gray-200 ring-1 ring-gray-600 transition hover:bg-gray-700">
+      <TagIcon className="mr-1 h-4 w-4" />
+      <span>{content}</span>
+    </div>
+  );
+};
+
+export default Tag;
diff --git a/src/components/MovieDetails/index.tsx b/src/components/MovieDetails/index.tsx
index 787d8156..b91c7a2a 100644
--- a/src/components/MovieDetails/index.tsx
+++ b/src/components/MovieDetails/index.tsx
@@ -9,6 +9,7 @@ import LoadingSpinner from '@app/components/Common/LoadingSpinner';
 import PageTitle from '@app/components/Common/PageTitle';
 import type { PlayButtonLink } from '@app/components/Common/PlayButton';
 import PlayButton from '@app/components/Common/PlayButton';
+import Tag from '@app/components/Common/Tag';
 import Tooltip from '@app/components/Common/Tooltip';
 import ExternalLinkBlock from '@app/components/ExternalLinkBlock';
 import IssueModal from '@app/components/IssueModal';
@@ -453,6 +454,20 @@ const MovieDetails = ({ movie }: MovieDetailsProps) => {
               </div>
             </>
           )}
+          {data.keywords.length > 0 && (
+            <div className="mt-6">
+              {data.keywords.map((keyword) => (
+                <Link
+                  href={`/discover/movies/keyword?keywords=${keyword.id}`}
+                  key={`keyword-id-${keyword.id}`}
+                >
+                  <a className="mb-2 mr-2 inline-flex last:mr-0">
+                    <Tag content={keyword.name} />
+                  </a>
+                </Link>
+              ))}
+            </div>
+          )}
         </div>
         <div className="media-overview-right">
           {data.collection && (
diff --git a/src/components/TvDetails/index.tsx b/src/components/TvDetails/index.tsx
index 8e26be4b..e6b334af 100644
--- a/src/components/TvDetails/index.tsx
+++ b/src/components/TvDetails/index.tsx
@@ -11,6 +11,7 @@ import PageTitle from '@app/components/Common/PageTitle';
 import type { PlayButtonLink } from '@app/components/Common/PlayButton';
 import PlayButton from '@app/components/Common/PlayButton';
 import StatusBadgeMini from '@app/components/Common/StatusBadgeMini';
+import Tag from '@app/components/Common/Tag';
 import Tooltip from '@app/components/Common/Tooltip';
 import ExternalLinkBlock from '@app/components/ExternalLinkBlock';
 import IssueModal from '@app/components/IssueModal';
@@ -482,6 +483,20 @@ const TvDetails = ({ tv }: TvDetailsProps) => {
               </div>
             </>
           )}
+          {data.keywords.length > 0 && (
+            <div className="mt-6">
+              {data.keywords.map((keyword) => (
+                <Link
+                  href={`/discover/movies/keyword?keywords=${keyword.id}`}
+                  key={`keyword-id-${keyword.id}`}
+                >
+                  <a className="mb-2 mr-2 inline-flex last:mr-0">
+                    <Tag content={keyword.name} />
+                  </a>
+                </Link>
+              ))}
+            </div>
+          )}
           <h2 className="py-4">{intl.formatMessage(messages.seasonstitle)}</h2>
           <div className="flex w-full flex-col space-y-2">
             {data.seasons