Change the imdb button to a clickable badge

frontend/js/components/buttons/imdb.js

@@ -1,22 +1,18 @@
 import React from "react"
 import PropTypes from "prop-types"
 
-const ImdbLink = (props) => {
+export const ImdbBadge = ({ imdbId }) => {
-  if (!props.imdbId || props.imdbId === "") {
+  if (imdbId === undefined) { return null }
-    return null;
-  }
 
-  return(
+  return (
+    <h5 className="d-inline">
       <a
-      className={`btn btn-warning ${props.xs ? "btn-sm" : ""}`}
+        className="badge badge-pill badge-warning m-1"
-      href={`http://www.imdb.com/title/${props.imdbId}`}>
+        href={`https://www.imdb.com/title/${imdbId}`}>
-      <i className="fa fa-external-link"></i> IMDB
+        IMDb <i className="fa fa-external-link"></i>
       </a>
+    </h5>
   );
-};
+}
-ImdbLink.propTypes = {
+ImdbBadge.propTypes = { imdbId: PropTypes.string };
-  imdbId: PropTypes.string,
+ImdbBadge.defaultProps = { imdbId: undefined };
-  xs: PropTypes.bool,
-};
-
-export default ImdbLink;

frontend/js/components/list/details.js

@@ -4,6 +4,7 @@ import PropTypes from "prop-types"
 
 import { PolochonMetadata } from "../buttons/polochon"
 import { DownloadAndStream } from "../buttons/download"
+import { ImdbBadge } from "../buttons/imdb"
 
 const ListDetails = (props) => {
   if (props.loading) { return null }
@@ -28,6 +29,7 @@ const ListDetails = (props) => {
           votes={props.data.get("votes")}
         />
         <div>
+          <ImdbBadge imdbId={props.data.get("imdb_id")} />
           <DownloadAndStream
             url={props.data.get("polochon_url")}
             name={props.data.get("title")}

frontend/js/components/movies/buttons.js

@@ -3,7 +3,6 @@ import PropTypes from "prop-types"
 import { Map } from "immutable"
 
 import SubtitlesButton from "../buttons/subtitles"
-import ImdbButton from "../buttons/imdb"
 import TorrentsButton from "./torrents"
 import ActionsButton from "./actions"
 
@@ -38,8 +37,6 @@ const MovieButtons = (props)  => (
           type="movie"
         />
     }
-
-    <ImdbButton imdbId={props.movie.get("imdb_id")} size="sm"/>
   </ButtonToolbar>
 );
 MovieButtons.propTypes = {

frontend/js/components/shows/details.js

@@ -9,10 +9,10 @@ import { addShowToWishlist, deleteShowFromWishlist, getEpisodeDetails, fetchShow
 
 import { DownloadAndStream } from "../buttons/download"
 import { PolochonMetadata } from "../buttons/polochon"
+import { ImdbBadge } from "../buttons/imdb"
 
 import Loader from "../loader/loader"
 import SubtitlesButton from "../buttons/subtitles"
-import ImdbButton from "../buttons/imdb"
 import RefreshIndicator from "../buttons/refresh"
 
 import Tooltip from "react-bootstrap/Tooltip"
@@ -91,15 +91,15 @@ const Header = (props) => (
           src={props.data.get("poster_url")}
         />
       </div>
-      <div className="">
+      <div>
         <div className="card-body">
           <h5 className="card-title">{props.data.get("title")}</h5>
           <p className="card-text">{props.data.get("year")}</p>
           <p className="card-text">{props.data.get("rating")}</p>
+          <div className="my-1">
+            <ImdbBadge imdbId={props.data.get("imdb_id")} />
+          </div>
           <p className="card-text plot">{props.data.get("plot")}</p>
-          <p className="card-text">
-            <ImdbButton imdbId={props.data.get("imdb_id")} xs/>
-          </p>
           <TrackHeader
             data={props.data}
             addToWishlist={props.addToWishlist}

frontend/js/components/shows/listButtons.js

@@ -7,7 +7,6 @@ import Dropdown from "react-bootstrap/Dropdown"
 import ButtonToolbar from "react-bootstrap/ButtonToolbar"
 
 import { WishlistButton, RefreshButton } from "../buttons/actions"
-import ImdbButton from "../buttons/imdb"
 
 const ShowButtons = (props)  => (
   <ButtonToolbar>
@@ -17,7 +16,6 @@ const ShowButtons = (props)  => (
       deleteFromWishlist={props.deleteFromWishlist}
       getDetails={props.getDetails}
     />
-    <ImdbButton imdbId={props.show.get("imdb_id")}/>
     <Link className="btn btn-primary" to={"/shows/details/" + props.show.get("imdb_id")}>
       <i className="fa fa-external-link"></i> Details
     </Link>