New: Added external links to movie index (#4600)

#403

frontend/src/Movie/Index/Overview/MovieIndexOverview.css

@@ -93,3 +93,7 @@ $hoverScale: 1.05;
     display: none;
   }
 }
+
+.externalLinks {
+  margin-right: 0.5em;
+}

frontend/src/Movie/Index/Overview/MovieIndexOverview.js

@@ -14,6 +14,9 @@ import DeleteMovieModal from 'Movie/Delete/DeleteMovieModal';
 import MovieIndexProgressBar from 'Movie/Index/ProgressBar/MovieIndexProgressBar';
 import MovieIndexOverviewInfo from './MovieIndexOverviewInfo';
 import styles from './MovieIndexOverview.css';
+import Icon from 'Components/Icon';
+import Popover from 'Components/Tooltip/Popover';
+import MovieDetailsLinks from 'Movie/Details/MovieDetailsLinks';
 
 const columnPadding = parseInt(dimensions.movieIndexColumnPadding);
 const columnPaddingSmallScreen = parseInt(dimensions.movieIndexColumnPaddingSmallScreen);
@@ -81,6 +84,9 @@ class MovieIndexOverview extends Component {
   render() {
     const {
       id,
+      tmdbId,
+      imdbId,
+      youTubeTrailerId,
       title,
       overview,
       monitored,
@@ -176,6 +182,25 @@ class MovieIndexOverview 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>
+
                 <SpinnerIconButton
                   name={icons.REFRESH}
                   title="Refresh Movie"
@@ -271,7 +296,10 @@ MovieIndexOverview.propTypes = {
   onSearchPress: PropTypes.func.isRequired,
   isMovieEditorActive: PropTypes.bool.isRequired,
   isSelected: PropTypes.bool,
-  onSelectedChange: PropTypes.func.isRequired
+  onSelectedChange: PropTypes.func.isRequired,
+  tmdbId: PropTypes.number.isRequired,
+  imdbId: PropTypes.string,
+  youTubeTrailerId: PropTypes.string
 };
 
 export default MovieIndexOverview;

frontend/src/Movie/Index/Posters/MovieIndexPoster.css

@@ -102,3 +102,7 @@ $hoverScale: 1.05;
     padding: 5px;
   }
 }
+
+.externalLinks {
+  margin-left: 0.5em;
+}

frontend/src/Movie/Index/Posters/MovieIndexPoster.js

@@ -12,6 +12,9 @@ import DeleteMovieModal from 'Movie/Delete/DeleteMovieModal';
 import MovieIndexProgressBar from 'Movie/Index/ProgressBar/MovieIndexProgressBar';
 import MovieIndexPosterInfo from './MovieIndexPosterInfo';
 import styles from './MovieIndexPoster.css';
+import Icon from 'Components/Icon';
+import Popover from 'Components/Tooltip/Popover';
+import MovieDetailsLinks from 'Movie/Details/MovieDetailsLinks';
 
 class MovieIndexPoster extends Component {
 
@@ -77,6 +80,9 @@ class MovieIndexPoster extends Component {
   render() {
     const {
       id,
+      tmdbId,
+      imdbId,
+      youTubeTrailerId,
       title,
       monitored,
       hasFile,
@@ -157,6 +163,25 @@ class MovieIndexPoster extends Component {
               title="Edit movie"
               onPress={this.onEditMoviePress}
             />
+
+            <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>
 
           {
@@ -272,7 +297,10 @@ MovieIndexPoster.propTypes = {
   onSearchPress: PropTypes.func.isRequired,
   isMovieEditorActive: PropTypes.bool.isRequired,
   isSelected: PropTypes.bool,
-  onSelectedChange: PropTypes.func.isRequired
+  onSelectedChange: PropTypes.func.isRequired,
+  tmdbId: PropTypes.number.isRequired,
+  imdbId: PropTypes.string,
+  youTubeTrailerId: PropTypes.string
 };
 
 MovieIndexPoster.defaultProps = {

frontend/src/Movie/Index/Table/MovieIndexRow.css

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

frontend/src/Movie/Index/Table/MovieIndexRow.js

@@ -16,6 +16,9 @@ import MovieStatusCell from './MovieStatusCell';
 import MovieFileStatusConnector from 'Movie/MovieFileStatusConnector';
 import VirtualTableSelectCell from 'Components/Table/Cells/VirtualTableSelectCell';
 import styles from './MovieIndexRow.css';
+import Icon from 'Components/Icon';
+import Popover from 'Components/Tooltip/Popover';
+import MovieDetailsLinks from 'Movie/Details/MovieDetailsLinks';
 
 class MovieIndexRow extends Component {
 
@@ -61,6 +64,9 @@ class MovieIndexRow extends Component {
   render() {
     const {
       id,
+      tmdbId,
+      imdbId,
+      youTubeTrailerId,
       monitored,
       status,
       title,
@@ -141,10 +147,12 @@ class MovieIndexRow extends Component {
                   key={name}
                   className={styles[name]}
                 >
+
                   <MovieTitleLink
                     titleSlug={titleSlug}
                     title={title}
                   />
+
                 </VirtualTableRowCell>
               );
             }
@@ -352,6 +360,25 @@ class MovieIndexRow 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>
+
                   <SpinnerIconButton
                     name={icons.REFRESH}
                     title="Refresh movie"
@@ -430,7 +457,10 @@ MovieIndexRow.propTypes = {
   onSearchPress: PropTypes.func.isRequired,
   isMovieEditorActive: PropTypes.bool.isRequired,
   isSelected: PropTypes.bool,
-  onSelectedChange: PropTypes.func.isRequired
+  onSelectedChange: PropTypes.func.isRequired,
+  tmdbId: PropTypes.number.isRequired,
+  imdbId: PropTypes.string,
+  youTubeTrailerId: PropTypes.string
 };
 
 MovieIndexRow.defaultProps = {