feat(frontend): add TheTVDB external link (#800)

sct · Feb 1, 2021 · 72cffd7 · 72cffd7
1 parent 6c437c5
commit 72cffd7
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 8 deletions.
diff --git a/src/assets/services/tvdb.svg b/src/assets/services/tvdb.svg
diff --git a/src/components/ExternalLinkBlock/index.tsx b/src/components/ExternalLinkBlock/index.tsx
@@ -1,30 +1,34 @@
 import React from 'react';
 import TmdbLogo from '../../assets/services/tmdb.svg';
+import TvdbLogo from '../../assets/services/tvdb.svg';
 import ImdbLogo from '../../assets/services/imdb.svg';
 import RTLogo from '../../assets/services/rt.svg';
 import PlexLogo from '../../assets/services/plex.svg';
+import { MediaType } from '../../../server/constants/media';
 
 interface ExternalLinkBlockProps {
   mediaType: 'movie' | 'tv';
-  imdbId?: string;
   tmdbId?: number;
+  tvdbId?: number;
+  imdbId?: string;
   rtUrl?: string;
   plexUrl?: string;
 }
 
 const ExternalLinkBlock: React.FC<ExternalLinkBlockProps> = ({
-  imdbId,
+  mediaType,
   tmdbId,
+  tvdbId,
+  imdbId,
   rtUrl,
-  mediaType,
   plexUrl,
 }) => {
   return (
-    <div className="flex justify-end items-center">
+    <div className="flex items-center justify-end">
       {plexUrl && (
         <a
           href={plexUrl}
-          className="w-8 mx-2 opacity-50 hover:opacity-100 transition duration-300"
+          className="w-8 mx-2 transition duration-300 opacity-50 hover:opacity-100"
           target="_blank"
           rel="noreferrer"
         >
@@ -34,17 +38,27 @@ const ExternalLinkBlock: React.FC<ExternalLinkBlockProps> = ({
       {tmdbId && (
         <a
           href={`https://www.themoviedb.org/${mediaType}/${tmdbId}`}
-          className="w-8 mx-2 opacity-50 hover:opacity-100 transition duration-300"
+          className="w-8 mx-2 transition duration-300 opacity-50 hover:opacity-100"
           target="_blank"
           rel="noreferrer"
         >
           <TmdbLogo />
         </a>
       )}
+      {tvdbId && mediaType === MediaType.TV && (
+        <a
+          href={`http://www.thetvdb.com/?tab=series&id=${tvdbId}`}
+          className="w-8 mx-2 transition duration-300 opacity-50 hover:opacity-100"
+          target="_blank"
+          rel="noreferrer"
+        >
+          <TvdbLogo />
+        </a>
+      )}
       {imdbId && (
         <a
           href={`https://www.imdb.com/title/${imdbId}`}
-          className="w-8 mx-2 opacity-50 hover:opacity-100 transition duration-300"
+          className="w-8 mx-2 transition duration-300 opacity-50 hover:opacity-100"
           target="_blank"
           rel="noreferrer"
         >
@@ -54,7 +68,7 @@ const ExternalLinkBlock: React.FC<ExternalLinkBlockProps> = ({
       {rtUrl && (
         <a
           href={`${rtUrl}`}
-          className="w-14 mx-2 opacity-50 hover:opacity-100 transition duration-300"
+          className="mx-2 transition duration-300 opacity-50 w-14 hover:opacity-100"
           target="_blank"
           rel="noreferrer"
         >

diff --git a/src/components/MovieDetails/index.tsx b/src/components/MovieDetails/index.tsx
@@ -671,6 +671,7 @@ const MovieDetails: React.FC<MovieDetailsProps> = ({ movie }) => {
             <ExternalLinkBlock
               mediaType="movie"
               tmdbId={data.id}
+              tvdbId={data.externalIds.tvdbId}
               imdbId={data.externalIds.imdbId}
               rtUrl={ratingData?.url}
               plexUrl={data.mediaInfo?.plexUrl ?? data.mediaInfo?.plexUrl4k}

diff --git a/src/components/TvDetails/index.tsx b/src/components/TvDetails/index.tsx
@@ -682,6 +682,7 @@ const TvDetails: React.FC<TvDetailsProps> = ({ tv }) => {
             <ExternalLinkBlock
               mediaType="tv"
               tmdbId={data.id}
+              tvdbId={data.externalIds.tvdbId}
               imdbId={data.externalIds.imdbId}
               rtUrl={ratingData?.url}
               plexUrl={data.mediaInfo?.plexUrl ?? data.mediaInfo?.plexUrl4k}