feat(person): add tmdb- and imdb link on person detail page (#2136)

Signed-off-by: Florian Hoech <code@florians-web.de>

src/components/ExternalLinkBlock/index.tsx

@@ -12,8 +12,10 @@ import useSettings from '@app/hooks/useSettings';
 import { MediaType } from '@server/constants/media';
 import { MediaServerType } from '@server/constants/server';
 
+type ExternalLinkType = 'movie' | 'tv' | 'person';
+
 interface ExternalLinkBlockProps {
-  mediaType: 'movie' | 'tv';
+  mediaType: ExternalLinkType;
   tmdbId?: number;
   tvdbId?: number;
   imdbId?: string;
@@ -71,7 +73,7 @@ const ExternalLinkBlock = ({
           <TvdbLogo />
         </a>
       )}
-      {imdbId && (
+      {imdbId && mediaType !== 'person' && (
         <a
           href={`https://www.imdb.com/title/${imdbId}`}
           className="w-8 opacity-50 transition duration-300 hover:opacity-100"
@@ -81,6 +83,16 @@ const ExternalLinkBlock = ({
           <ImdbLogo />
         </a>
       )}
+      {imdbId && mediaType === 'person' && (
+        <a
+          href={`https://www.imdb.com/name/${imdbId}`}
+          className="w-8 opacity-50 transition duration-300 hover:opacity-100"
+          target="_blank"
+          rel="noreferrer"
+        >
+          <ImdbLogo />
+        </a>
+      )}
       {rtUrl && (
         <a
           href={rtUrl}
@@ -91,7 +103,7 @@ const ExternalLinkBlock = ({
           <RTLogo />
         </a>
       )}
-      {tmdbId && (
+      {tmdbId && mediaType !== 'person' && (
         <a
           href={`https://trakt.tv/search/tmdb/${tmdbId}?id_type=${
             mediaType === 'movie' ? 'movie' : 'show'

src/components/PersonDetails/index.tsx

@@ -3,6 +3,7 @@ import CachedImage from '@app/components/Common/CachedImage';
 import ImageFader from '@app/components/Common/ImageFader';
 import LoadingSpinner from '@app/components/Common/LoadingSpinner';
 import PageTitle from '@app/components/Common/PageTitle';
+import ExternalLinkBlock from '@app/components/ExternalLinkBlock';
 import TitleCard from '@app/components/TitleCard';
 import globalMessages from '@app/i18n/globalMessages';
 import ErrorPage from '@app/pages/_error';
@@ -277,6 +278,15 @@ const PersonDetails = () => {
               {mediaTypePicker}
             </div>
           </div>
+          <div className="flex w-full items-center justify-center lg:justify-between">
+            <div className="mb-3 mt-3">
+              <ExternalLinkBlock
+                mediaType="person"
+                tmdbId={data.id}
+                imdbId={data.imdbId}
+              />
+            </div>
+          </div>
           <div className="mb-2 mt-1 space-y-1 text-xs text-white sm:text-sm lg:text-base">
             <div>{personAttributes.join(' | ')}</div>
             {(data.alsoKnownAs ?? []).length > 0 && (