fix(ui): Don't display empty dropdown when no trailer available (#804)

src/components/Common/ButtonWithDropdown/index.tsx

@@ -92,8 +92,8 @@ const ButtonWithDropdown: React.FC<ButtonWithDropdownProps> = ({
       >
         {text}
       </button>
-      <span className="relative z-10 block -ml-px">
       {children && (
+        <span className="relative z-10 block -ml-px">
           <button
             type="button"
             className={`relative inline-flex items-center h-full px-2 py-2 text-sm font-medium leading-5 text-white transition duration-150 ease-in-out rounded-r-md focus:z-10 ${styleClasses.dropdownSideButtonClasses}`}
@@ -117,7 +117,6 @@ const ButtonWithDropdown: React.FC<ButtonWithDropdownProps> = ({
               </svg>
             )}
           </button>
-        )}
           <Transition
             show={isOpen}
             enter="transition ease-out duration-100 opacity-0"
@@ -136,6 +135,7 @@ const ButtonWithDropdown: React.FC<ButtonWithDropdownProps> = ({
             </div>
           </Transition>
         </span>
+      )}
     </span>
   );
 };

src/components/MovieDetails/index.tsx

@@ -417,10 +417,17 @@ const MovieDetails: React.FC<MovieDetailsProps> = ({ movie }) => {
                 }
               }}
             >
-              {data.mediaInfo?.plexUrl ||
+              {(
+                trailerUrl
+                  ? data.mediaInfo?.plexUrl ||
                     (data.mediaInfo?.plexUrl4k &&
                       (hasPermission(Permission.REQUEST_4K) ||
-                  hasPermission(Permission.REQUEST_4K_MOVIE))) ? (
+                        hasPermission(Permission.REQUEST_4K_MOVIE)))
+                  : data.mediaInfo?.plexUrl &&
+                    data.mediaInfo?.plexUrl4k &&
+                    (hasPermission(Permission.REQUEST_4K) ||
+                      hasPermission(Permission.REQUEST_4K_MOVIE))
+              ) ? (
                 <>
                   {data.mediaInfo?.plexUrl &&
                     data.mediaInfo?.plexUrl4k &&
@@ -435,8 +442,7 @@ const MovieDetails: React.FC<MovieDetailsProps> = ({ movie }) => {
                         {intl.formatMessage(messages.play4konplex)}
                       </ButtonWithDropdown.Item>
                     )}
-                  {(data.mediaInfo?.plexUrl || data.mediaInfo?.plexUrl4k) &&
-                    trailerUrl && (
+                  {trailerUrl && (
                     <ButtonWithDropdown.Item
                       onClick={() => {
                         window.open(trailerUrl, '_blank');

src/components/TvDetails/index.tsx

@@ -443,15 +443,22 @@ const TvDetails: React.FC<TvDetailsProps> = ({ tv }) => {
                 }
               }}
             >
-              {data.mediaInfo?.plexUrl ||
+              {(
+                trailerUrl
+                  ? data.mediaInfo?.plexUrl ||
                     (data.mediaInfo?.plexUrl4k &&
                       (hasPermission(Permission.REQUEST_4K) ||
-                  hasPermission(Permission.REQUEST_4K_TV))) ? (
+                        hasPermission(Permission.REQUEST_4K_TV)))
+                  : data.mediaInfo?.plexUrl &&
+                    data.mediaInfo?.plexUrl4k &&
+                    (hasPermission(Permission.REQUEST_4K) ||
+                      hasPermission(Permission.REQUEST_4K_TV))
+              ) ? (
                 <>
                   {data.mediaInfo?.plexUrl &&
                   data.mediaInfo?.plexUrl4k &&
                   (hasPermission(Permission.REQUEST_4K) ||
-                      hasPermission(Permission.REQUEST_4K_TV)) && (
+                    hasPermission(Permission.REQUEST_4K_TV)) ? (
                     <ButtonWithDropdown.Item
                       onClick={() => {
                         window.open(data.mediaInfo?.plexUrl4k, '_blank');
@@ -460,9 +467,8 @@ const TvDetails: React.FC<TvDetailsProps> = ({ tv }) => {
                     >
                       {intl.formatMessage(messages.play4konplex)}
                     </ButtonWithDropdown.Item>
-                    )}
-                  {(data.mediaInfo?.plexUrl || data.mediaInfo?.plexUrl4k) &&
-                    trailerUrl && (
+                  ) : null}
+                  {trailerUrl ? (
                     <ButtonWithDropdown.Item
                       onClick={() => {
                         window.open(trailerUrl, '_blank');
@@ -471,7 +477,7 @@ const TvDetails: React.FC<TvDetailsProps> = ({ tv }) => {
                     >
                       {intl.formatMessage(messages.watchtrailer)}
                     </ButtonWithDropdown.Item>
-                    )}
+                  ) : null}
                 </>
               ) : null}
             </ButtonWithDropdown>