From b7cf6f49d005e99cb17e503a5aeaec059148577c Mon Sep 17 00:00:00 2001
From: Qstick <qstick@gmail.com>
Date: Fri, 3 Jul 2020 22:04:58 -0400
Subject: [PATCH] Fixed: Move Links, Add Tags to Movie Detail

Fixes #4545
---
 frontend/src/Movie/Details/MovieDetails.css |  7 +-
 frontend/src/Movie/Details/MovieDetails.js  | 86 ++++++++++++---------
 2 files changed, 52 insertions(+), 41 deletions(-)

diff --git a/frontend/src/Movie/Details/MovieDetails.css b/frontend/src/Movie/Details/MovieDetails.css
index 260bcfb69..f6665805b 100644
--- a/frontend/src/Movie/Details/MovieDetails.css
+++ b/frontend/src/Movie/Details/MovieDetails.css
@@ -116,6 +116,9 @@
   font-size: 20px;
 }
 
+.links,
+.tags,
+.rating,
 .year,
 .runtime {
   margin-right: 15px;
@@ -145,9 +148,7 @@
 .qualityProfileName,
 .statusName,
 .studio,
-.collection,
-.links,
-.tags {
+.collection {
   font-weight: 300;
   font-size: 17px;
 }
diff --git a/frontend/src/Movie/Details/MovieDetails.js b/frontend/src/Movie/Details/MovieDetails.js
index a8bbc1d8d..39a4b6c3e 100644
--- a/frontend/src/Movie/Details/MovieDetails.js
+++ b/frontend/src/Movie/Details/MovieDetails.js
@@ -39,7 +39,7 @@ import MovieAlternateTitles from './MovieAlternateTitles';
 import MovieDetailsLinks from './MovieDetailsLinks';
 import InteractiveSearchTable from 'InteractiveSearch/InteractiveSearchTable';
 import InteractiveSearchFilterMenuConnector from 'InteractiveSearch/InteractiveSearchFilterMenuConnector';
-// import MovieTagsConnector from './MovieTagsConnector';
+import MovieTagsConnector from './MovieTagsConnector';
 import styles from './MovieDetails.css';
 
 const defaultFontSize = parseInt(fonts.defaultFontSize);
@@ -175,7 +175,7 @@ class MovieDetails extends Component {
       inCinemas,
       images,
       alternateTitles,
-      // tags,
+      tags,
       isSaving,
       isRefreshing,
       isSearching,
@@ -290,23 +290,6 @@ class MovieDetails extends Component {
                     <div className={styles.title}>
                       {title}
                     </div>
-
-                    {
-                      !!alternateTitles.length &&
-                        <div className={styles.alternateTitlesIconContainer}>
-                          <Popover
-                            anchor={
-                              <Icon
-                                name={icons.ALTERNATE_TITLES}
-                                size={20}
-                              />
-                            }
-                            title="Alternate Titles"
-                            body={<MovieAlternateTitles alternateTitles={alternateTitles} />}
-                            position={tooltipPositions.BOTTOM}
-                          />
-                        </div>
-                    }
                   </div>
 
                   <div className={styles.movieNavigationButtons}>
@@ -353,10 +336,53 @@ class MovieDetails extends Component {
 
                     {
                       !!ratings &&
-                        <HeartRating
-                          rating={ratings.value}
-                          iconSize={20}
+                        <span className={styles.rating}>
+                          <HeartRating
+                            rating={ratings.value}
+                            iconSize={20}
+                          />
+                        </span>
+                    }
+
+                    {
+                      <span className={styles.links}>
+                        <Popover
+                          anchor={
+                            <Icon
+                              name={icons.EXTERNAL_LINK}
+                              size={20}
+                            />
+                          }
+                          title="Links"
+                          body={
+                            <MovieDetailsLinks
+                              tmdbId={tmdbId}
+                              imdbId={imdbId}
+                              youTubeTrailerId={youTubeTrailerId}
+                            />
+                          }
+                          position={tooltipPositions.BOTTOM}
                         />
+                      </span>
+                    }
+
+                    {
+                      !!tags.length &&
+                        <span className={styles.tags}>
+                          <Popover
+                            anchor={
+                              <Icon
+                                name={icons.TAGS}
+                                size={20}
+                              />
+                            }
+                            title="Tags"
+                            body={
+                              <MovieTagsConnector movieId={id} />
+                            }
+                            position={tooltipPositions.BOTTOM}
+                          />
+                        </span>
                     }
                   </div>
                 </div>
@@ -448,22 +474,6 @@ class MovieDetails extends Component {
                     />
                   </div>
                 </Measure>
-
-                <InfoLabel
-                  className={styles.detailsInfoLabel}
-                  title="Links"
-                  size={sizes.LARGE}
-                >
-                  <span className={styles.links}>
-                    {
-                      <MovieDetailsLinks
-                        tmdbId={tmdbId}
-                        imdbId={imdbId}
-                        youTubeTrailerId={youTubeTrailerId}
-                      />
-                    }
-                  </span>
-                </InfoLabel>
               </div>
             </div>
           </div>