feat(ui): add 'show more/less...' for studios on movie details page (#1770)

src/components/MovieDetails/index.tsx

@@ -6,6 +6,8 @@ import {
 } from '@heroicons/react/outline';
 import {
   CheckCircleIcon,
+  ChevronDoubleDownIcon,
+  ChevronDoubleUpIcon,
   DocumentRemoveIcon,
   ExternalLinkIcon,
 } from '@heroicons/react/solid';
@@ -73,6 +75,8 @@ const messages = defineMessages({
   play4konplex: 'Play in 4K on Plex',
   markavailable: 'Mark as Available',
   mark4kavailable: 'Mark as Available in 4K',
+  showmore: 'Show More',
+  showless: 'Show Less',
 });
 
 interface MovieDetailsProps {
@@ -86,6 +90,8 @@ const MovieDetails: React.FC<MovieDetailsProps> = ({ movie }) => {
   const intl = useIntl();
   const { locale } = useLocale();
   const [showManager, setShowManager] = useState(false);
+  const minStudios = 3;
+  const [showMoreStudios, setShowMoreStudios] = useState(false);
 
   const { data, error, revalidate } = useSWR<MovieDetailsType>(
     `/api/v1/movie/${router.query.movieId}`,
@@ -111,6 +117,7 @@ const MovieDetails: React.FC<MovieDetailsProps> = ({ movie }) => {
     return <Error statusCode={404} />;
   }
 
+  const showAllStudios = data.productionCompanies.length <= minStudios + 1;
   const mediaLinks: PlayButtonLink[] = [];
 
   if (
@@ -627,16 +634,44 @@ const MovieDetails: React.FC<MovieDetailsProps> = ({ movie }) => {
                   })}
                 </span>
                 <span className="media-fact-value">
-                  {data.productionCompanies.map((s) => {
-                    return (
-                      <Link
-                        href={`/discover/movies/studio/${s.id}`}
-                        key={`studio-${s.id}`}
-                      >
-                        <a className="block">{s.name}</a>
-                      </Link>
-                    );
-                  })}
+                  {data.productionCompanies
+                    .slice(
+                      0,
+                      showAllStudios || showMoreStudios
+                        ? data.productionCompanies.length
+                        : minStudios
+                    )
+                    .map((s) => {
+                      return (
+                        <Link
+                          href={`/discover/movies/studio/${s.id}`}
+                          key={`studio-${s.id}`}
+                        >
+                          <a className="block">{s.name}</a>
+                        </Link>
+                      );
+                    })}
+                  {!showAllStudios && (
+                    <button
+                      type="button"
+                      onClick={() => {
+                        setShowMoreStudios(!showMoreStudios);
+                      }}
+                    >
+                      <span className="flex items-center">
+                        {intl.formatMessage(
+                          !showMoreStudios
+                            ? messages.showmore
+                            : messages.showless
+                        )}
+                        {!showMoreStudios ? (
+                          <ChevronDoubleDownIcon className="w-4 h-4 ml-1" />
+                        ) : (
+                          <ChevronDoubleUpIcon className="w-4 h-4 ml-1" />
+                        )}
+                      </span>
+                    </button>
+                  )}
                 </span>
               </div>
             )}

src/i18n/locale/en.json

@@ -83,6 +83,8 @@
   "components.MovieDetails.releasedate": "Release Date",
   "components.MovieDetails.revenue": "Revenue",
   "components.MovieDetails.runtime": "{minutes} minutes",
+  "components.MovieDetails.showless": "Show Less",
+  "components.MovieDetails.showmore": "Show More",
   "components.MovieDetails.similar": "Similar Titles",
   "components.MovieDetails.studio": "{studioCount, plural, one {Studio} other {Studios}}",
   "components.MovieDetails.viewfullcrew": "View Full Crew",

src/styles/globals.css

@@ -160,7 +160,8 @@ ul.media-crew > li {
 }
 
 a.crew-name,
-.media-fact-value a {
+.media-fact-value a,
+.media-fact-value button {
   @apply font-normal text-gray-400 transition duration-300 hover:underline hover:text-gray-100;
 }
 
@@ -173,11 +174,11 @@ a.crew-name,
 }
 
 .media-fact {
-  @apply flex px-4 py-2 border-b border-gray-700 last:border-b-0;
+  @apply flex justify-between px-4 py-2 border-b border-gray-700 last:border-b-0;
 }
 
 .media-fact-value {
-  @apply flex-1 text-sm font-normal text-right text-gray-400;
+  @apply text-sm font-normal text-right text-gray-400;
 }
 
 .media-ratings {