New: Added external links to Discovery (#4598)

#2691

frontend/src/DiscoverMovie/Overview/AddListMovieOverview.js

@@ -12,6 +12,8 @@ import Link from 'Components/Link/Link';
 import AddNewDiscoverMovieModal from 'DiscoverMovie/AddNewDiscoverMovieModal';
 import ExcludeMovieModal from 'DiscoverMovie/Exclusion/ExcludeMovieModal';
 import styles from './AddListMovieOverview.css';
+import Popover from 'Components/Tooltip/Popover';
+import MovieDetailsLinks from 'Movie/Details/MovieDetailsLinks';
 
 const columnPadding = parseInt(dimensions.movieIndexColumnPadding);
 const columnPaddingSmallScreen = parseInt(dimensions.movieIndexColumnPaddingSmallScreen);
@@ -76,6 +78,8 @@ class AddListMovieOverview extends Component {
   render() {
     const {
       tmdbId,
+      imdbId,
+      youTubeTrailerId,
       title,
       titleSlug,
       folder,
@@ -138,6 +142,7 @@ class AddListMovieOverview extends Component {
                 {...linkProps}
               >
                 {title}({year})
+
                 {
                   isExcluded &&
                     <Icon
@@ -150,6 +155,25 @@ class AddListMovieOverview extends Component {
               </Link>
 
               <div className={styles.actions}>
+                <span className={styles.externalLinks}>
+                  <Popover
+                    anchor={
+                      <Icon
+                        name={icons.EXTERNAL_LINK}
+                        size={12}
+                      />
+                    }
+                    title="Links"
+                    body={
+                      <MovieDetailsLinks
+                        tmdbId={tmdbId}
+                        imdbId={imdbId}
+                        youTubeTrailerId={youTubeTrailerId}
+                      />
+                    }
+                  />
+                </span>
+
                 <IconButton
                   name={icons.REMOVE}
                   title={isExcluded ? 'Movie already Excluded' : 'Exclude Movie'}
@@ -194,6 +218,8 @@ class AddListMovieOverview extends Component {
 
 AddListMovieOverview.propTypes = {
   tmdbId: PropTypes.number.isRequired,
+  imdbId: PropTypes.string,
+  youTubeTrailerId: PropTypes.string,
   title: PropTypes.string.isRequired,
   folder: PropTypes.string.isRequired,
   year: PropTypes.number.isRequired,

frontend/src/DiscoverMovie/Overview/AddListMovieOverviews.css

@@ -9,3 +9,7 @@
     }
   }
 }
+
+.externalLinks {
+  margin-right: 0.5em;
+}

frontend/src/DiscoverMovie/Posters/AddListMoviePoster.css

@@ -27,6 +27,11 @@ $hoverScale: 1.05;
   background-color: $defaultColor;
 }
 
+.externalLinks {
+  margin-right: 0.5em;
+  margin-left: 0.5em;
+}
+
 .overlayTitle {
   position: absolute;
   top: 0;

frontend/src/DiscoverMovie/Posters/AddListMoviePoster.js

@@ -9,6 +9,9 @@ import MoviePoster from 'Movie/MoviePoster';
 import AddNewDiscoverMovieModal from 'DiscoverMovie/AddNewDiscoverMovieModal';
 import ExcludeMovieModal from 'DiscoverMovie/Exclusion/ExcludeMovieModal';
 import styles from './AddListMoviePoster.css';
+import Icon from 'Components/Icon';
+import Popover from 'Components/Tooltip/Popover';
+import MovieDetailsLinks from 'Movie/Details/MovieDetailsLinks';
 
 class AddListMoviePoster extends Component {
 
@@ -71,6 +74,8 @@ class AddListMoviePoster extends Component {
   render() {
     const {
       tmdbId,
+      imdbId,
+      youTubeTrailerId,
       title,
       year,
       overview,
@@ -120,6 +125,24 @@ class AddListMoviePoster extends Component {
               onPress={this.onExcludeMoviePress}
               isDisabled={isExcluded}
             />
+            <span className={styles.externalLinks}>
+              <Popover
+                anchor={
+                  <Icon
+                    name={icons.EXTERNAL_LINK}
+                    size={12}
+                  />
+                }
+                title="Links"
+                body={
+                  <MovieDetailsLinks
+                    tmdbId={tmdbId}
+                    imdbId={imdbId}
+                    youTubeTrailerId={youTubeTrailerId}
+                  />
+                }
+              />
+            </span>
           </Label>
 
           {
@@ -187,6 +210,8 @@ class AddListMoviePoster extends Component {
 
 AddListMoviePoster.propTypes = {
   tmdbId: PropTypes.number.isRequired,
+  imdbId: PropTypes.string,
+  youTubeTrailerId: PropTypes.string,
   title: PropTypes.string.isRequired,
   year: PropTypes.number.isRequired,
   overview: PropTypes.string.isRequired,

frontend/src/DiscoverMovie/Table/AddListMovieRow.css

@@ -63,3 +63,7 @@
 
   margin-top: 0;
 }
+
+.externalLinks {
+  margin-right: 0.5em;
+}

frontend/src/DiscoverMovie/Table/AddListMovieRow.js

@@ -11,6 +11,9 @@ import AddNewDiscoverMovieModal from 'DiscoverMovie/AddNewDiscoverMovieModal';
 import ExcludeMovieModal from 'DiscoverMovie/Exclusion/ExcludeMovieModal';
 import VirtualTableSelectCell from 'Components/Table/Cells/VirtualTableSelectCell';
 import styles from './AddListMovieRow.css';
+import Icon from 'Components/Icon';
+import Popover from 'Components/Tooltip/Popover';
+import MovieDetailsLinks from 'Movie/Details/MovieDetailsLinks';
 
 class AddListMovieRow extends Component {
 
@@ -52,6 +55,8 @@ class AddListMovieRow extends Component {
     const {
       status,
       tmdbId,
+      imdbId,
+      youTubeTrailerId,
       title,
       titleSlug,
       studio,
@@ -205,6 +210,25 @@ class AddListMovieRow extends Component {
                   key={name}
                   className={styles[name]}
                 >
+                  <span className={styles.externalLinks}>
+                    <Popover
+                      anchor={
+                        <Icon
+                          name={icons.EXTERNAL_LINK}
+                          size={12}
+                        />
+                      }
+                      title="Links"
+                      body={
+                        <MovieDetailsLinks
+                          tmdbId={tmdbId}
+                          imdbId={imdbId}
+                          youTubeTrailerId={youTubeTrailerId}
+                        />
+                      }
+                    />
+                  </span>
+
                   <IconButton
                     name={icons.REMOVE}
                     title={isExcluded ? 'Movie already Excluded' : 'Exclude Movie'}
@@ -244,6 +268,8 @@ class AddListMovieRow extends Component {
 
 AddListMovieRow.propTypes = {
   tmdbId: PropTypes.number.isRequired,
+  imdbId: PropTypes.string,
+  youTubeTrailerId: PropTypes.string,
   status: PropTypes.string.isRequired,
   title: PropTypes.string.isRequired,
   year: PropTypes.number.isRequired,

frontend/src/Movie/Details/MovieDetailsLinks.js

@@ -23,7 +23,7 @@ function MovieDetailsLinks(props) {
           kind={kinds.INFO}
           size={sizes.LARGE}
         >
-          The Movie DB
+          TMDb
         </Label>
       </Link>
 
@@ -51,7 +51,7 @@ function MovieDetailsLinks(props) {
               kind={kinds.INFO}
               size={sizes.LARGE}
             >
-              IMDB
+              IMDb
             </Label>
           </Link>
       }