From 139341b0434b41e7c31af36baacd8d65566a6a0c Mon Sep 17 00:00:00 2001
From: TheCatLady <52870424+TheCatLady@users.noreply.github.com>
Date: Sat, 20 Feb 2021 08:59:44 -0500
Subject: [PATCH] feat(ui): Add support for requesting collections in 4K (#968)

---
 src/components/CollectionDetails/index.tsx    | 224 ++++++++++++++----
 src/components/MovieDetails/index.tsx         |  42 ++--
 .../RequestList/RequestItem/index.tsx         |   6 +-
 src/components/TitleCard/index.tsx            |  63 ++---
 src/components/TvDetails/index.tsx            |  37 ++-
 src/i18n/locale/en.json                       |   3 +
 6 files changed, 251 insertions(+), 124 deletions(-)

diff --git a/src/components/CollectionDetails/index.tsx b/src/components/CollectionDetails/index.tsx
index c958b9e0..5148a309 100644
--- a/src/components/CollectionDetails/index.tsx
+++ b/src/components/CollectionDetails/index.tsx
@@ -8,16 +8,17 @@ import { MediaStatus } from '../../../server/constants/media';
 import type { MediaRequest } from '../../../server/entity/MediaRequest';
 import type { Collection } from '../../../server/models/Collection';
 import { LanguageContext } from '../../context/LanguageContext';
-import globalMessages from '../../i18n/globalMessages';
 import Error from '../../pages/_error';
-import Badge from '../Common/Badge';
-import Button from '../Common/Button';
+import StatusBadge from '../StatusBadge';
+import ButtonWithDropdown from '../Common/ButtonWithDropdown';
 import LoadingSpinner from '../Common/LoadingSpinner';
 import Modal from '../Common/Modal';
 import Slider from '../Slider';
 import TitleCard from '../TitleCard';
 import Transition from '../Transition';
 import PageTitle from '../Common/PageTitle';
+import { useUser, Permission } from '../../hooks/useUser';
+import useSettings from '../../hooks/useSettings';
 
 const messages = defineMessages({
   overviewunavailable: 'Overview unavailable.',
@@ -29,6 +30,10 @@ const messages = defineMessages({
   requestcollection: 'Request Collection',
   requestswillbecreated:
     'The following titles will have requests created for them:',
+  request4k: 'Request 4K',
+  requestcollection4k: 'Request Collection in 4K',
+  requestswillbecreated4k:
+    'The following titles will have 4K requests created for them:',
   requestSuccess: '<strong>{title}</strong> successfully requested!',
 });
 
@@ -41,10 +46,14 @@ const CollectionDetails: React.FC<CollectionDetailsProps> = ({
 }) => {
   const intl = useIntl();
   const router = useRouter();
+  const settings = useSettings();
   const { addToast } = useToasts();
   const { locale } = useContext(LanguageContext);
+  const { hasPermission } = useUser();
   const [requestModal, setRequestModal] = useState(false);
   const [isRequesting, setRequesting] = useState(false);
+  const [is4k, setIs4k] = useState(false);
+
   const { data, error, revalidate } = useSWR<Collection>(
     `/api/v1/collection/${router.query.collectionId}?language=${locale}`,
     {
@@ -61,8 +70,45 @@ const CollectionDetails: React.FC<CollectionDetailsProps> = ({
     return <Error statusCode={404} />;
   }
 
+  let collectionStatus = MediaStatus.UNKNOWN;
+  let collectionStatus4k = MediaStatus.UNKNOWN;
+
+  if (
+    data.parts.every(
+      (part) =>
+        part.mediaInfo && part.mediaInfo.status === MediaStatus.AVAILABLE
+    )
+  ) {
+    collectionStatus = MediaStatus.AVAILABLE;
+  } else if (
+    data.parts.some(
+      (part) =>
+        part.mediaInfo && part.mediaInfo.status === MediaStatus.AVAILABLE
+    )
+  ) {
+    collectionStatus = MediaStatus.PARTIALLY_AVAILABLE;
+  }
+
+  if (
+    data.parts.every(
+      (part) =>
+        part.mediaInfo && part.mediaInfo.status4k === MediaStatus.AVAILABLE
+    )
+  ) {
+    collectionStatus4k = MediaStatus.AVAILABLE;
+  } else if (
+    data.parts.some(
+      (part) =>
+        part.mediaInfo && part.mediaInfo.status4k === MediaStatus.AVAILABLE
+    )
+  ) {
+    collectionStatus4k = MediaStatus.PARTIALLY_AVAILABLE;
+  }
+
   const requestableParts = data.parts.filter(
-    (part) => !part.mediaInfo || part.mediaInfo.status === MediaStatus.UNKNOWN
+    (part) =>
+      !part.mediaInfo ||
+      part.mediaInfo[is4k ? 'status4k' : 'status'] === MediaStatus.UNKNOWN
   );
 
   const requestBundle = async () => {
@@ -73,6 +119,7 @@ const CollectionDetails: React.FC<CollectionDetailsProps> = ({
           await axios.post<MediaRequest>('/api/v1/request', {
             mediaId: part.id,
             mediaType: 'movie',
+            is4k,
           });
         })
       );
@@ -123,12 +170,14 @@ const CollectionDetails: React.FC<CollectionDetailsProps> = ({
           okText={
             isRequesting
               ? intl.formatMessage(messages.requesting)
-              : intl.formatMessage(messages.request)
+              : intl.formatMessage(is4k ? messages.request4k : messages.request)
           }
           okDisabled={isRequesting}
           okButtonType="primary"
           onCancel={() => setRequestModal(false)}
-          title={intl.formatMessage(messages.requestcollection)}
+          title={intl.formatMessage(
+            is4k ? messages.requestcollection4k : messages.requestcollection
+          )}
           iconSvg={
             <svg
               className="w-6 h-6"
@@ -146,13 +195,20 @@ const CollectionDetails: React.FC<CollectionDetailsProps> = ({
             </svg>
           }
         >
-          <p>{intl.formatMessage(messages.requestswillbecreated)}</p>
+          <p>
+            {intl.formatMessage(
+              is4k
+                ? messages.requestswillbecreated4k
+                : messages.requestswillbecreated
+            )}
+          </p>
           <ul className="py-4 pl-8 list-disc">
             {data.parts
               .filter(
                 (part) =>
                   !part.mediaInfo ||
-                  part.mediaInfo?.status === MediaStatus.UNKNOWN
+                  part.mediaInfo[is4k ? 'status4k' : 'status'] ===
+                    MediaStatus.UNKNOWN
               )
               .map((part) => (
                 <li key={`request-part-${part.id}`}>{part.title}</li>
@@ -160,64 +216,128 @@ const CollectionDetails: React.FC<CollectionDetailsProps> = ({
           </ul>
         </Modal>
       </Transition>
-      <div className="flex flex-col items-center pt-4 md:flex-row md:items-end">
-        <div className="flex-shrink-0 md:mr-4">
+      <div className="flex flex-col items-center pt-4 lg:flex-row lg:items-end">
+        <div className="lg:mr-4">
           <img
             src={`//image.tmdb.org/t/p/w600_and_h900_bestv2${data.posterPath}`}
             alt=""
-            className="w-32 rounded shadow md:rounded-lg md:shadow-2xl md:w-52"
+            className="w-32 rounded shadow md:rounded-lg md:shadow-2xl md:w-44 lg:w-52"
           />
         </div>
-        <div className="flex flex-col mt-4 text-center text-white md:mr-4 md:mt-0 md:text-left">
-          <div className="mb-2">
-            {data.parts.every(
-              (part) => part.mediaInfo?.status === MediaStatus.AVAILABLE
-            ) && (
-              <Badge badgeType="success">
-                {intl.formatMessage(globalMessages.available)}
-              </Badge>
-            )}
-            {!data.parts.every(
-              (part) => part.mediaInfo?.status === MediaStatus.AVAILABLE
-            ) &&
-              data.parts.some(
-                (part) => part.mediaInfo?.status === MediaStatus.AVAILABLE
+        <div className="flex flex-col flex-1 mt-4 text-center text-white lg:mr-4 lg:mt-0 lg:text-left">
+          <div className="mb-2 space-x-2">
+            <span className="ml-2 lg:ml-0">
+              <StatusBadge
+                status={collectionStatus}
+                inProgress={data.parts.some(
+                  (part) => (part.mediaInfo?.downloadStatus ?? []).length > 0
+                )}
+              />
+            </span>
+            {settings.currentSettings.movie4kEnabled &&
+              hasPermission(
+                [Permission.REQUEST_4K, Permission.REQUEST_4K_MOVIE],
+                {
+                  type: 'or',
+                }
               ) && (
-                <Badge badgeType="success">
-                  {intl.formatMessage(globalMessages.partiallyavailable)}
-                </Badge>
+                <span>
+                  <StatusBadge
+                    status={collectionStatus4k}
+                    is4k
+                    inProgress={data.parts.some(
+                      (part) =>
+                        (part.mediaInfo?.downloadStatus4k ?? []).length > 0
+                    )}
+                  />
+                </span>
               )}
           </div>
           <h1 className="text-2xl md:text-4xl">{data.name}</h1>
-          <span className="mt-1 text-xs md:text-base md:mt-0">
+          <span className="mt-1 text-xs lg:text-base lg:mt-0">
             {intl.formatMessage(messages.numberofmovies, {
               count: data.parts.length,
             })}
           </span>
         </div>
-        <div className="flex justify-end flex-1 mt-4 md:mt-0">
-          {data.parts.some(
-            (part) =>
-              !part.mediaInfo || part.mediaInfo?.status === MediaStatus.UNKNOWN
-          ) && (
-            <Button buttonType="primary" onClick={() => setRequestModal(true)}>
-              <svg
-                className="w-4 mr-1"
-                fill="none"
-                stroke="currentColor"
-                viewBox="0 0 24 24"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth={2}
-                  d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
-                />
-              </svg>
-              {intl.formatMessage(messages.requestcollection)}
-            </Button>
-          )}
+        <div className="relative z-10 flex flex-wrap justify-center flex-shrink-0 mt-4 sm:justify-end sm:flex-nowrap lg:mt-0">
+          {hasPermission(Permission.REQUEST) &&
+            (collectionStatus !== MediaStatus.AVAILABLE ||
+              (settings.currentSettings.movie4kEnabled &&
+                hasPermission(
+                  [Permission.REQUEST_4K, Permission.REQUEST_4K_MOVIE],
+                  { type: 'or' }
+                ) &&
+                collectionStatus4k !== MediaStatus.AVAILABLE)) && (
+              <div className="mb-3 sm:mb-0">
+                <ButtonWithDropdown
+                  buttonType="primary"
+                  onClick={() => {
+                    setRequestModal(true);
+                    setIs4k(collectionStatus === MediaStatus.AVAILABLE);
+                  }}
+                  text={
+                    <>
+                      <svg
+                        className="w-4 mr-1"
+                        fill="none"
+                        stroke="currentColor"
+                        viewBox="0 0 24 24"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                          strokeWidth={2}
+                          d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
+                        />
+                      </svg>
+                      <span>
+                        {intl.formatMessage(
+                          collectionStatus === MediaStatus.AVAILABLE
+                            ? messages.requestcollection4k
+                            : messages.requestcollection
+                        )}
+                      </span>
+                    </>
+                  }
+                >
+                  {settings.currentSettings.movie4kEnabled &&
+                    hasPermission(
+                      [Permission.REQUEST_4K, Permission.REQUEST_4K_MOVIE],
+                      { type: 'or' }
+                    ) &&
+                    collectionStatus !== MediaStatus.AVAILABLE &&
+                    collectionStatus4k !== MediaStatus.AVAILABLE && (
+                      <ButtonWithDropdown.Item
+                        buttonType="primary"
+                        onClick={() => {
+                          setRequestModal(true);
+                          setIs4k(true);
+                        }}
+                      >
+                        <svg
+                          className="w-4 mr-1"
+                          fill="none"
+                          stroke="currentColor"
+                          viewBox="0 0 24 24"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                            strokeWidth={2}
+                            d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
+                          />
+                        </svg>
+                        <span>
+                          {intl.formatMessage(messages.requestcollection4k)}
+                        </span>
+                      </ButtonWithDropdown.Item>
+                    )}
+                </ButtonWithDropdown>
+              </div>
+            )}
         </div>
       </div>
       <div className="flex flex-col pt-8 pb-4 text-white md:flex-row">
diff --git a/src/components/MovieDetails/index.tsx b/src/components/MovieDetails/index.tsx
index 0f35c6c4..58b74801 100644
--- a/src/components/MovieDetails/index.tsx
+++ b/src/components/MovieDetails/index.tsx
@@ -378,31 +378,31 @@ const MovieDetails: React.FC<MovieDetailsProps> = ({ movie }) => {
         </div>
         <div className="flex flex-col flex-1 mt-4 text-center text-white lg:mr-4 lg:mt-0 lg:text-left">
           <div className="mb-2 space-x-2">
-            {data.mediaInfo && data.mediaInfo.status !== MediaStatus.UNKNOWN && (
-              <span className="ml-2 lg:ml-0">
-                <StatusBadge
-                  status={data.mediaInfo?.status}
-                  inProgress={(data.mediaInfo.downloadStatus ?? []).length > 0}
-                  plexUrl={data.mediaInfo?.plexUrl}
-                  plexUrl4k={data.mediaInfo?.plexUrl4k}
-                />
-              </span>
-            )}
-            <span>
+            <span className="ml-2 lg:ml-0">
               <StatusBadge
-                status={data.mediaInfo?.status4k}
-                is4k
-                inProgress={(data.mediaInfo?.downloadStatus4k ?? []).length > 0}
+                status={data.mediaInfo?.status}
+                inProgress={(data.mediaInfo?.downloadStatus ?? []).length > 0}
                 plexUrl={data.mediaInfo?.plexUrl}
-                plexUrl4k={
-                  data.mediaInfo?.plexUrl4k &&
-                  (hasPermission(Permission.REQUEST_4K) ||
-                    hasPermission(Permission.REQUEST_4K_MOVIE))
-                    ? data.mediaInfo.plexUrl4k
-                    : undefined
-                }
               />
             </span>
+            {settings.currentSettings.movie4kEnabled &&
+              hasPermission(
+                [Permission.REQUEST_4K, Permission.REQUEST_4K_MOVIE],
+                {
+                  type: 'or',
+                }
+              ) && (
+                <span>
+                  <StatusBadge
+                    status={data.mediaInfo?.status4k}
+                    is4k
+                    inProgress={
+                      (data.mediaInfo?.downloadStatus4k ?? []).length > 0
+                    }
+                    plexUrl4k={data.mediaInfo?.plexUrl4k}
+                  />
+                </span>
+              )}
           </div>
           <h1 className="text-2xl lg:text-4xl">
             {data.title}{' '}
diff --git a/src/components/RequestList/RequestItem/index.tsx b/src/components/RequestList/RequestItem/index.tsx
index 28cdf2b6..59cdea66 100644
--- a/src/components/RequestList/RequestItem/index.tsx
+++ b/src/components/RequestList/RequestItem/index.tsx
@@ -190,7 +190,8 @@ const RequestItem: React.FC<RequestItemProps> = ({
         </div>
       </Table.TD>
       <Table.TD>
-        {requestData.media.status === MediaStatus.UNKNOWN ||
+        {requestData.media[requestData.is4k ? 'status4k' : 'status'] ===
+          MediaStatus.UNKNOWN ||
         requestData.status === MediaRequestStatus.DECLINED ? (
           <Badge badgeType="danger">
             {requestData.status === MediaRequestStatus.DECLINED
@@ -247,7 +248,8 @@ const RequestItem: React.FC<RequestItemProps> = ({
         </div>
       </Table.TD>
       <Table.TD alignText="right">
-        {requestData.media.status === MediaStatus.UNKNOWN &&
+        {requestData.media[requestData.is4k ? 'status4k' : 'status'] ===
+          MediaStatus.UNKNOWN &&
           requestData.status !== MediaRequestStatus.DECLINED &&
           hasPermission(Permission.MANAGE_REQUESTS) && (
             <Button
diff --git a/src/components/TitleCard/index.tsx b/src/components/TitleCard/index.tsx
index 17f1fa18..edf13600 100644
--- a/src/components/TitleCard/index.tsx
+++ b/src/components/TitleCard/index.tsx
@@ -10,6 +10,7 @@ import { defineMessages, useIntl } from 'react-intl';
 import { useIsTouch } from '../../hooks/useIsTouch';
 import globalMessages from '../../i18n/globalMessages';
 import Spinner from '../../assets/spinner.svg';
+import { useUser, Permission } from '../../hooks/useUser';
 
 const messages = defineMessages({
   movie: 'Movie',
@@ -42,6 +43,7 @@ const TitleCard: React.FC<TitleCardProps> = ({
 }) => {
   const isTouch = useIsTouch();
   const intl = useIntl();
+  const { hasPermission } = useUser();
   const [isUpdating, setIsUpdating] = useState(false);
   const [currentStatus, setCurrentStatus] = useState(status);
   const [showDetail, setShowDetail] = useState(false);
@@ -204,7 +206,8 @@ const TitleCard: React.FC<TitleCardProps> = ({
                   <div className="flex items-end w-full h-full">
                     <div
                       className={`px-2 text-white ${
-                        currentStatus && currentStatus !== MediaStatus.UNKNOWN
+                        !hasPermission(Permission.REQUEST) ||
+                        (currentStatus && currentStatus !== MediaStatus.UNKNOWN)
                           ? 'pb-2'
                           : 'pb-11'
                       }`}
@@ -218,8 +221,9 @@ const TitleCard: React.FC<TitleCardProps> = ({
                         className="text-xs whitespace-normal"
                         style={{
                           WebkitLineClamp:
-                            currentStatus &&
-                            currentStatus !== MediaStatus.UNKNOWN
+                            !hasPermission(Permission.REQUEST) ||
+                            (currentStatus &&
+                              currentStatus !== MediaStatus.UNKNOWN)
                               ? 5
                               : 3,
                           display: '-webkit-box',
@@ -235,33 +239,34 @@ const TitleCard: React.FC<TitleCardProps> = ({
               </Link>
 
               <div className="absolute bottom-0 left-0 right-0 flex justify-between px-2 py-2">
-                {(!currentStatus || currentStatus === MediaStatus.UNKNOWN) && (
-                  <button
-                    onClick={(e) => {
-                      e.preventDefault();
-                      setShowRequestModal(true);
-                    }}
-                    className="flex items-center justify-center w-full text-white transition duration-150 ease-in-out bg-indigo-600 rounded-md h-7 hover:bg-indigo-500 focus:border-indigo-700 focus:ring-indigo active:bg-indigo-700"
-                  >
-                    <svg
-                      className="w-4 mr-1"
-                      fill="none"
-                      stroke="currentColor"
-                      viewBox="0 0 24 24"
-                      xmlns="http://www.w3.org/2000/svg"
+                {hasPermission(Permission.REQUEST) &&
+                  (!currentStatus || currentStatus === MediaStatus.UNKNOWN) && (
+                    <button
+                      onClick={(e) => {
+                        e.preventDefault();
+                        setShowRequestModal(true);
+                      }}
+                      className="flex items-center justify-center w-full text-white transition duration-150 ease-in-out bg-indigo-600 rounded-md h-7 hover:bg-indigo-500 focus:border-indigo-700 focus:ring-indigo active:bg-indigo-700"
                     >
-                      <path
-                        strokeLinecap="round"
-                        strokeLinejoin="round"
-                        strokeWidth={2}
-                        d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
-                      />
-                    </svg>
-                    <span className="text-xs">
-                      {intl.formatMessage(globalMessages.request)}
-                    </span>
-                  </button>
-                )}
+                      <svg
+                        className="w-4 mr-1"
+                        fill="none"
+                        stroke="currentColor"
+                        viewBox="0 0 24 24"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                          strokeWidth={2}
+                          d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
+                        />
+                      </svg>
+                      <span className="text-xs">
+                        {intl.formatMessage(globalMessages.request)}
+                      </span>
+                    </button>
+                  )}
               </div>
             </div>
           </Transition>
diff --git a/src/components/TvDetails/index.tsx b/src/components/TvDetails/index.tsx
index 658a6863..dfbbc8b0 100644
--- a/src/components/TvDetails/index.tsx
+++ b/src/components/TvDetails/index.tsx
@@ -400,31 +400,28 @@ const TvDetails: React.FC<TvDetailsProps> = ({ tv }) => {
         </div>
         <div className="flex flex-col flex-1 mt-4 text-center text-white lg:mr-4 lg:mt-0 lg:text-left">
           <div className="mb-2 space-x-2">
-            {data.mediaInfo && data.mediaInfo.status !== MediaStatus.UNKNOWN && (
-              <span className="ml-2 lg:ml-0">
-                <StatusBadge
-                  status={data.mediaInfo?.status}
-                  inProgress={(data.mediaInfo.downloadStatus ?? []).length > 0}
-                  plexUrl={data.mediaInfo?.plexUrl}
-                  plexUrl4k={data.mediaInfo?.plexUrl4k}
-                />
-              </span>
-            )}
-            <span>
+            <span className="ml-2 lg:ml-0">
               <StatusBadge
-                status={data.mediaInfo?.status4k}
-                is4k
+                status={data.mediaInfo?.status}
                 inProgress={(data.mediaInfo?.downloadStatus ?? []).length > 0}
                 plexUrl={data.mediaInfo?.plexUrl}
-                plexUrl4k={
-                  data.mediaInfo?.plexUrl4k &&
-                  (hasPermission(Permission.REQUEST_4K) ||
-                    hasPermission(Permission.REQUEST_4K_TV))
-                    ? data.mediaInfo.plexUrl4k
-                    : undefined
-                }
               />
             </span>
+            {settings.currentSettings.series4kEnabled &&
+              hasPermission([Permission.REQUEST_4K, Permission.REQUEST_4K_TV], {
+                type: 'or',
+              }) && (
+                <span>
+                  <StatusBadge
+                    status={data.mediaInfo?.status4k}
+                    is4k
+                    inProgress={
+                      (data.mediaInfo?.downloadStatus ?? []).length > 0
+                    }
+                    plexUrl4k={data.mediaInfo?.plexUrl4k}
+                  />
+                </span>
+              )}
           </div>
           <h1 className="text-2xl lg:text-4xl">
             {data.name}{' '}
diff --git a/src/i18n/locale/en.json b/src/i18n/locale/en.json
index 257365da..1dffab24 100644
--- a/src/i18n/locale/en.json
+++ b/src/i18n/locale/en.json
@@ -6,10 +6,13 @@
   "components.CollectionDetails.overview": "Overview",
   "components.CollectionDetails.overviewunavailable": "Overview unavailable.",
   "components.CollectionDetails.request": "Request",
+  "components.CollectionDetails.request4k": "Request 4K",
   "components.CollectionDetails.requestSuccess": "<strong>{title}</strong> successfully requested!",
   "components.CollectionDetails.requestcollection": "Request Collection",
+  "components.CollectionDetails.requestcollection4k": "Request Collection in 4K",
   "components.CollectionDetails.requesting": "Requesting…",
   "components.CollectionDetails.requestswillbecreated": "The following titles will have requests created for them:",
+  "components.CollectionDetails.requestswillbecreated4k": "The following titles will have 4K requests created for them:",
   "components.Common.ListView.noresults": "No results.",
   "components.Discover.discover": "Discover",
   "components.Discover.discovermovies": "Popular Movies",