Add an imdb button component

src/public/js/components/buttons/imdb.js

@@ -0,0 +1,15 @@
+import React from "react"
+
+export default function ImdbLink(props) {
+  const link = `http://www.imdb.com/title/${props.imdbId}`;
+  let className = "btn btn-warning";
+  if (props.size) {
+    className += " btn-" + props.size;
+  }
+  return (
+    <a type="button" className={className} href={link}>
+      <i className="fa fa-external-link"></i> IMDB
+    </a>
+  );
+}
+

src/public/js/components/movies/list.js

@@ -8,6 +8,7 @@ import { addMovieToWishlist, deleteMovie, deleteMovieFromWishlist,
 
 import DownloadButton from "../buttons/download"
 import SubtitlesButton from "../buttons/subtitles"
+import ImdbButton from "../buttons/imdb"
 import TorrentsButton from "./torrents"
 import ActionsButton from "./actions"
 import ListPosters from "../list/posters"
@@ -29,7 +30,6 @@ const mapDispatchToProps = (dipatch) =>
     refreshSubtitles, updateFilter }, dipatch)
 
 function MovieButtons(props) {
-  const imdbLink = `http://www.imdb.com/title/${props.movie.get("imdb_id")}`;
   const hasMovie = (props.movie.get("polochon_url") !== "");
   return (
     <div className="list-details-buttons btn-toolbar">
@@ -66,9 +66,7 @@ function MovieButtons(props) {
       type="movie"
     />
 
-      <a type="button" className="btn btn-warning btn-sm" href={imdbLink}>
+    <ImdbButton imdbId={props.movie.get("imdb_id")} size="sm"/>
-        <i className="fa fa-external-link"></i> IMDB
-      </a>
   </div>
   );
 }

src/public/js/components/shows/details.js

@@ -8,6 +8,7 @@ import { addShowToWishlist, deleteShowFromWishlist, getEpisodeDetails, updateSho
 import Loader from "../loader/loader"
 import DownloadButton from "../buttons/download"
 import SubtitlesButton from "../buttons/subtitles"
+import ImdbButton from "../buttons/imdb"
 
 
 import { OverlayTrigger, Tooltip } from "react-bootstrap"
@@ -76,7 +77,6 @@ function HeaderThumbnail(props){
 }
 
 function HeaderDetails(props){
-  const imdbLink = `http://www.imdb.com/title/${props.data.get("imdb_id")}`;
   return (
     <div className="col-xs-12 col-sm-10">
       <dl className="dl-horizontal">
@@ -86,9 +86,7 @@ function HeaderDetails(props){
         <dd className="plot">{props.data.get("plot")}</dd>
         <dt>IMDB</dt>
         <dd>
-          <a type="button" className="btn btn-warning btn-xs" href={imdbLink}>
+          <ImdbButton imdbId={props.data.get("imdb_id")} size="xs"/>
-            <i className="fa fa-external-link"></i> Open in IMDB
-          </a>
         </dd>
         <dt>Year</dt>
         <dd>{props.data.get("year")}</dd>

src/public/js/components/shows/listButtons.js

@@ -4,9 +4,9 @@ import { Link } from "react-router"
 import { DropdownButton } from "react-bootstrap"
 
 import { WishlistButton, RefreshButton } from "../buttons/actions"
+import ImdbButton from "../buttons/imdb"
 
 export default function ShowButtons(props) {
-  const imdbLink = `http://www.imdb.com/title/${props.show.get("imdb_id")}`;
   return (
     <div className="list-details-buttons btn-toolbar">
       <ActionsButton
@@ -15,9 +15,7 @@ export default function ShowButtons(props) {
         deleteFromWishlist={props.deleteFromWishlist}
         getDetails={props.getDetails}
       />
-      <a type="button" className="btn btn-warning btn-sm" href={imdbLink}>
+      <ImdbButton imdbId={props.show.get("imdb_id")} size="sm"/>
-        <i className="fa fa-external-link"></i> IMDB
-      </a>
       <Link type="button" className="btn btn-primary btn-sm" to={"/shows/details/" + props.show.get("imdb_id")}>
         <i className="fa fa-external-link"></i> Details
       </Link>