feat: display release dates for theatrical, digital, and physical release types (#1492)

* feat: display release dates for theatrical, digital, and physical release types

* fix(ui): use disc icon for physical release

* style: reformat to make new version of Prettier happy

src/components/MovieDetails/index.tsx

@@ -1,8 +1,10 @@
 import {
   ArrowCircleRightIcon,
+  CloudIcon,
   CogIcon,
   FilmIcon,
   PlayIcon,
+  TicketIcon,
 } from '@heroicons/react/outline';
 import {
   CheckCircleIcon,
@@ -12,6 +14,7 @@ import {
   ExternalLinkIcon,
 } from '@heroicons/react/solid';
 import axios from 'axios';
+import { uniqBy } from 'lodash';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
 import React, { useMemo, useState } from 'react';
@@ -49,7 +52,8 @@ import StatusBadge from '../StatusBadge';
 
 const messages = defineMessages({
   originaltitle: 'Original Title',
-  releasedate: 'Release Date',
+  releasedate:
+    '{releaseCount, plural, one {Release Date} other {Release Dates}}',
   revenue: 'Revenue',
   budget: 'Budget',
   watchtrailer: 'Watch Trailer',
@@ -179,20 +183,29 @@ const MovieDetails: React.FC<MovieDetailsProps> = ({ movie }) => {
     : settings.currentSettings.region
     ? settings.currentSettings.region
     : 'US';
+
+  const releases = data.releases.results.find(
+    (r) => r.iso_3166_1 === region
+  )?.release_dates;
+
+  // Release date types:
+  // 1. Premiere
+  // 2. Theatrical (limited)
+  // 3. Theatrical
+  // 4. Digital
+  // 5. Physical
+  // 6. TV
+  const filteredReleases = uniqBy(
+    releases?.filter((r) => r.type > 2 && r.type < 6),
+    'type'
+  );
+
   const movieAttributes: React.ReactNode[] = [];
 
-  if (
-    data.releases.results.length &&
-    (data.releases.results.find((r) => r.iso_3166_1 === region)
-      ?.release_dates[0].certification ||
-      data.releases.results[0].release_dates[0].certification)
-  ) {
+  const certification = releases?.find((r) => r.certification)?.certification;
+  if (certification) {
     movieAttributes.push(
-      <span className="p-0.5 py-0 border rounded-md">
-        {data.releases.results.find((r) => r.iso_3166_1 === region)
-          ?.release_dates[0].certification ||
-          data.releases.results[0].release_dates[0].certification}
-      </span>
+      <span className="p-0.5 py-0 border rounded-md">{certification}</span>
     );
   }
 
@@ -577,17 +590,66 @@ const MovieDetails: React.FC<MovieDetailsProps> = ({ movie }) => {
               <span>{intl.formatMessage(globalMessages.status)}</span>
               <span className="media-fact-value">{data.status}</span>
             </div>
-            {data.releaseDate && (
+            {filteredReleases && filteredReleases.length > 0 ? (
               <div className="media-fact">
-                <span>{intl.formatMessage(messages.releasedate)}</span>
-                <span className="media-fact-value">
-                  {intl.formatDate(data.releaseDate, {
-                    year: 'numeric',
-                    month: 'long',
-                    day: 'numeric',
+                <span>
+                  {intl.formatMessage(messages.releasedate, {
+                    releaseCount: filteredReleases.length,
                   })}
                 </span>
+                <span className="media-fact-value">
+                  {filteredReleases.map((r, i) => (
+                    <span
+                      className="flex items-center justify-end"
+                      key={`release-date-${i}`}
+                    >
+                      {r.type === 3 ? (
+                        // Theatrical
+                        <TicketIcon className="w-4 h-4" />
+                      ) : r.type === 4 ? (
+                        // Digital
+                        <CloudIcon className="w-4 h-4" />
+                      ) : (
+                        // Physical
+                        <svg
+                          className="w-4 h-4"
+                          viewBox="0 0 24 24"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="m12 2c-5.5242 0-10 4.4758-10 10 0 5.5242 4.4758 10 10 10 5.5242 0 10-4.4758 10-10 0-5.5242-4.4758-10-10-10zm0 18.065c-4.4476 0-8.0645-3.6169-8.0645-8.0645 0-4.4476 3.6169-8.0645 8.0645-8.0645 4.4476 0 8.0645 3.6169 8.0645 8.0645 0 4.4476-3.6169 8.0645-8.0645 8.0645zm0-14.516c-3.5565 0-6.4516 2.8952-6.4516 6.4516h1.2903c0-2.8468 2.3145-5.1613 5.1613-5.1613zm0 2.9032c-1.9597 0-3.5484 1.5887-3.5484 3.5484s1.5887 3.5484 3.5484 3.5484 3.5484-1.5887 3.5484-3.5484-1.5887-3.5484-3.5484-3.5484zm0 4.8387c-0.71371 0-1.2903-0.57661-1.2903-1.2903s0.57661-1.2903 1.2903-1.2903 1.2903 0.57661 1.2903 1.2903-0.57661 1.2903-1.2903 1.2903z"
+                            fill="currentColor"
+                          />
+                        </svg>
+                      )}
+                      <span className="ml-1.5">
+                        {intl.formatDate(r.release_date, {
+                          year: 'numeric',
+                          month: 'long',
+                          day: 'numeric',
+                        })}
+                      </span>
+                    </span>
+                  ))}
+                </span>
               </div>
+            ) : (
+              data.releaseDate && (
+                <div className="media-fact">
+                  <span>
+                    {intl.formatMessage(messages.releasedate, {
+                      releaseCount: 1,
+                    })}
+                  </span>
+                  <span className="media-fact-value">
+                    {intl.formatDate(data.releaseDate, {
+                      year: 'numeric',
+                      month: 'long',
+                      day: 'numeric',
+                    })}
+                  </span>
+                </div>
+              )
             )}
             {data.revenue > 0 && (
               <div className="media-fact">

src/components/TvDetails/index.tsx

@@ -177,17 +177,12 @@ const TvDetails: React.FC<TvDetailsProps> = ({ tv }) => {
     : 'US';
   const seriesAttributes: React.ReactNode[] = [];
 
-  if (
-    data.contentRatings.results.length &&
-    data.contentRatings.results.find(
-      (r) => r.iso_3166_1 === region || data.contentRatings.results[0].rating
-    )
-  ) {
+  const contentRating = data.contentRatings.results.find(
+    (r) => r.iso_3166_1 === region
+  )?.rating;
+  if (contentRating) {
     seriesAttributes.push(
-      <span className="p-0.5 py-0 border rounded-md">
-        {data.contentRatings.results.find((r) => r.iso_3166_1 === region)
-          ?.rating || data.contentRatings.results[0].rating}
-      </span>
+      <span className="p-0.5 py-0 border rounded-md">{contentRating}</span>
     );
   }
 

src/i18n/locale/en.json

@@ -80,7 +80,7 @@
   "components.MovieDetails.play4konplex": "Play in 4K on Plex",
   "components.MovieDetails.playonplex": "Play on Plex",
   "components.MovieDetails.recommendations": "Recommendations",
-  "components.MovieDetails.releasedate": "Release Date",
+  "components.MovieDetails.releasedate": "{releaseCount, plural, one {Release Date} other {Release Dates}}",
   "components.MovieDetails.revenue": "Revenue",
   "components.MovieDetails.runtime": "{minutes} minutes",
   "components.MovieDetails.showless": "Show Less",