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

src/assets/services/tvdb.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg version="1.1" viewBox="0 0 49.994049 27.764576" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"><metadata><rdf:RDF><cc:Work rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/><dc:title/></cc:Work></rdf:RDF></metadata><g transform="translate(-80.836 -134.28)" stroke-width=".26458"><ellipse cx="104.39" cy="140.67" rx="3.0402" ry="2.5725" fill="#fff"/><path transform="translate(-8.3333e-8)" d="m85.973 162.05c-0.2783-9e-3 -0.76695-0.12188-1.0859-0.25035-0.31894-0.12847-0.75831-0.50788-0.97638-0.84312-0.27168-0.41768-0.81789-4.2912-1.7352-12.306-0.7363-6.4328-1.3387-11.951-1.3387-12.263 0-0.31189 0.36978-0.9125 0.82173-1.3347 0.55888-0.52208 1.0976-0.76762 1.6843-0.76762 0.4744 0 5.7899 0.65473 11.812 1.4549 6.0223 0.80022 11.395 1.5787 11.94 1.73 0.67007 0.18601 1.1196 0.52432 1.3891 1.0455 0.23816 0.46053 0.39842 1.4812 0.39842 2.5375 0 1.6585-0.0587 1.832-0.95642 2.8256-0.52604 0.58226-1.2554 1.7118-1.6209 2.51-0.56065 1.2246-0.6448 1.7259-0.5387 3.2089 0.0692 0.96664 0.33525 2.1733 0.59131 2.6815 0.25605 0.50816 0.9453 1.4214 1.5317 2.0295 1.0049 1.0421 1.0581 1.1768 0.92626 2.3462-0.0925 0.82058-0.35123 1.4496-0.76415 1.8577-0.57063 0.56398-1.5248 0.74328-11.099 2.0855-5.7608 0.80767-10.702 1.461-10.98 1.4517zm5.8777-7.1419c0.64371 9e-3 1.2219-0.14144 1.4082-0.36594 0.17385-0.20948 0.27773-0.71409 0.23083-1.1214-0.07317-0.63544-0.23231-0.76418-1.122-0.90763-0.5702-0.0919-1.1992-0.38942-1.3979-0.66108-0.25954-0.35495-0.34007-1.2022-0.2862-3.011l0.07497-2.517h3.7011l1.7217 4.2333 1.7217 4.2333 1.4787 0.0781c0.97936 0.0517 1.5672-0.0376 1.7409-0.26458 0.14423-0.18847 1.1888-2.5136 2.3212-5.1671 1.1324-2.6534 1.9897-5.0049 1.905-5.2255-0.0964-0.25118-0.49511-0.40113-1.0666-0.40113-0.50198 0-1.0918 0.0687-1.3108 0.15275-0.21893 0.084-1.0155 1.6914-1.7701 3.5719-0.75462 1.8805-1.4697 3.4191-1.589 3.4191-0.1193 0-0.45209-0.62507-0.73953-1.3891-0.28745-0.76398-0.8376-2.2224-1.2226-3.2408s-0.81858-1.971-0.9636-2.1167-1.5382-0.32442-3.0959-0.39718l-2.8323-0.13229-0.13229-1.8521-0.13229-1.8521h-2.6458l-0.13229 1.8365c-0.13098 1.8183-0.14096 1.8388-1.0075 2.062-0.81451 0.20989-0.86954 0.29343-0.79375 1.205 0.07128 0.85741 0.18035 0.99633 0.87518 1.1147l0.79375 0.13524 0.13229 3.2208c0.11196 2.726 0.2174 3.3355 0.68624 3.967 0.30467 0.4104 0.95952 0.88829 1.4552 1.062s1.3927 0.32252 1.9933 0.33073zm12.666-11.891c0.45112 0 0.96309-0.14287 1.1377-0.3175 0.17463-0.17462 0.3175-0.64237 0.3175-1.0394 0-0.39707-0.1871-0.90903-0.41577-1.1377-0.22868-0.22868-0.69642-0.41577-1.0394-0.41577-0.34301 0-0.81075 0.18709-1.0394 0.41577s-0.41577 0.74064-0.41577 1.1377c0 0.39706 0.14287 0.86481 0.3175 1.0394 0.17462 0.17463 0.68659 0.3175 1.1377 0.3175z" fill="#1b7d3d"/><path transform="translate(-8.3333e-8)" d="m114.46 154.52c-3.0274 0.0544-3.7379-0.0118-4.6609-0.43422-0.59897-0.27412-1.3995-0.90545-1.779-1.403-0.37946-0.49751-0.83257-1.5225-1.0069-2.2778-0.24624-1.0668-0.24624-1.6796 0-2.7464 0.17434-0.75526 0.61766-1.7674 0.98516-2.2492 0.3675-0.48183 1.049-1.0738 1.5144-1.3155 0.48523-0.25197 1.8056-0.5058 3.0952-0.59503l2.249-0.15561 0.13229-1.8521 0.1323-1.8521h2.9104v14.817zm-0.92604-2.3736 1.3229-0.0718v-5.8208l-1.6062-0.0775c-1.4422-0.0696-1.6785-5e-3 -2.3151 0.6314-0.38991 0.38991-0.72779 1.0201-0.75085 1.4004-0.023 0.38034-0.0238 0.92965-2e-3 1.2207 0.0222 0.29104 0.10377 0.80075 0.18131 1.1327 0.0775 0.33193 0.52474 0.8405 0.99377 1.1302 0.615 0.37978 1.2217 0.50661 2.1757 0.45481zm9.7151 2.4359c-2.5936 4e-3 -3.5477-0.0819-3.6425-0.32887-0.0706-0.18407-0.0967-3.5476-0.0578-7.4745l0.0706-7.1398h2.9104l0.13229 1.8521 0.13229 1.8521 2.2687 0.15541c1.6342 0.11195 2.5591 0.31887 3.3073 0.73989 0.57124 0.32147 1.3303 1.0254 1.6868 1.5644 0.45872 0.69347 0.67992 1.4556 0.75677 2.6074 0.0597 0.89511-0.0338 2.059-0.20789 2.5864-0.17406 0.52742-0.62874 1.33-1.0104 1.7836-0.38165 0.45358-1.1751 1.0432-1.7632 1.3104-0.86286 0.39194-1.7476 0.48683-4.5833 0.49152zm0.84267-2.3754c0.64994 0 1.4871-0.1161 1.8603-0.25799 0.3732-0.14189 0.92337-0.64791 1.2226-1.1245 0.41645-0.66331 0.5175-1.173 0.43097-2.1738-0.0877-1.0148-0.27505-1.4467-0.83705-1.9301-0.61948-0.53286-0.95861-0.6115-2.3491-0.54474l-1.6251 0.078-0.0763 2.627c-0.042 1.4448-0.0159 2.7843 0.0578 2.9766 0.0835 0.21749 0.5806 0.34956 1.3158 0.34956z" fill="#fff"/></g></svg>

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"
         >

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}

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}