fix(ui): list all movie studios instead of just the first result (#1110)

src/components/MovieDetails/index.tsx

@@ -64,7 +64,7 @@ const messages = defineMessages({
     If this item exists in your Plex library, the media information will be recreated during the next scan.',
   approve: 'Approve',
   decline: 'Decline',
-  studio: 'Studio',
+  studio: '{studioCount, plural, one {Studio} other {Studios}}',
   viewfullcrew: 'View Full Crew',
   view: 'View',
   areyousure: 'Are you sure?',
@@ -667,19 +667,24 @@ const MovieDetails: React.FC<MovieDetailsProps> = ({ movie }) => {
                 </span>
               </div>
             )}
-            {data.productionCompanies[0] && (
+            {data.productionCompanies.length > 0 && (
               <div className="flex px-4 py-2 border-b border-gray-800 last:border-b-0">
                 <span className="text-sm">
-                  {intl.formatMessage(messages.studio)}
+                  {intl.formatMessage(messages.studio, {
+                    studioCount: data.productionCompanies.length,
+                  })}
                 </span>
                 <span className="flex-1 text-sm text-right text-gray-400">
+                  {data.productionCompanies.map((s) => {
+                    return (
                       <Link
-                    href={`/discover/movies/studio/${data.productionCompanies[0].id}`}
+                        href={`/discover/movies/studio/${s.id}`}
+                        key={`studio-${s.id}`}
                       >
-                    <a className="hover:underline">
+                        <a className="block hover:underline">{s.name}</a>
-                      {data.productionCompanies[0].name}
-                    </a>
                       </Link>
+                    );
+                  })}
                 </span>
               </div>
             )}

src/components/TvDetails/index.tsx

@@ -62,7 +62,7 @@ const messages = defineMessages({
   decline: 'Decline',
   showtype: 'Show Type',
   anime: 'Anime',
-  network: 'Network',
+  network: '{networkCount, plural, one {Network} other {Networks}}',
   viewfullcrew: 'View Full Crew',
   areyousure: 'Are you sure?',
   opensonarr: 'Open Series in Sonarr',
@@ -694,7 +694,9 @@ const TvDetails: React.FC<TvDetailsProps> = ({ tv }) => {
             {data.networks.length > 0 && (
               <div className="flex px-4 py-2 border-b border-gray-800 last:border-b-0">
                 <span className="text-sm">
-                  {intl.formatMessage(messages.network)}
+                  {intl.formatMessage(messages.network, {
+                    networkCount: data.networks.length,
+                  })}
                 </span>
                 <span className="flex-1 text-sm text-right text-gray-400">
                   {data.networks

src/i18n/locale/en.json

@@ -85,7 +85,7 @@
   "components.MovieDetails.similar": "Similar Titles",
   "components.MovieDetails.similarsubtext": "Other movies similar to {title}",
   "components.MovieDetails.status": "Status",
-  "components.MovieDetails.studio": "Studio",
+  "components.MovieDetails.studio": "{studioCount, plural, one {Studio} other {Studios}}",
   "components.MovieDetails.unavailable": "Unavailable",
   "components.MovieDetails.userrating": "User Rating",
   "components.MovieDetails.view": "View",
@@ -623,7 +623,7 @@
   "components.TvDetails.manageModalTitle": "Manage Series",
   "components.TvDetails.mark4kavailable": "Mark 4K as Available",
   "components.TvDetails.markavailable": "Mark as Available",
-  "components.TvDetails.network": "Network",
+  "components.TvDetails.network": "{networkCount, plural, one {Network} other {Networks}}",
   "components.TvDetails.nextAirDate": "Next Air Date",
   "components.TvDetails.opensonarr": "Open Series in Sonarr",
   "components.TvDetails.opensonarr4k": "Open Series in 4K Sonarr",