fix: added deep links to issues and status badges (#3065)

src/components/IssueDetails/index.tsx

@@ -7,6 +7,7 @@ import PageTitle from '@app/components/Common/PageTitle';
 import IssueComment from '@app/components/IssueDetails/IssueComment';
 import IssueDescription from '@app/components/IssueDetails/IssueDescription';
 import { issueOptions } from '@app/components/IssueModal/constants';
+import useDeepLinks from '@app/hooks/useDeepLinks';
 import { Permission, useUser } from '@app/hooks/useUser';
 import globalMessages from '@app/i18n/globalMessages';
 import Error from '@app/pages/_error';
@@ -88,6 +89,13 @@ const IssueDetails = () => {
       : null
   );
 
+  const { plexUrl, plexUrl4k } = useDeepLinks({
+    plexUrl: data?.mediaInfo?.plexUrl,
+    plexUrl4k: data?.mediaInfo?.plexUrl4k,
+    iOSPlexUrl: data?.mediaInfo?.iOSPlexUrl,
+    iOSPlexUrl4k: data?.mediaInfo?.iOSPlexUrl4k,
+  });
+
   const CommentSchema = Yup.object().shape({
     message: Yup.string().required(),
   });
@@ -354,7 +362,7 @@ const IssueDetails = () => {
               {issueData?.media.plexUrl && (
                 <Button
                   as="a"
-                  href={issueData?.media.plexUrl}
+                  href={plexUrl}
                   target="_blank"
                   rel="noreferrer"
                   className="w-full"
@@ -387,7 +395,7 @@ const IssueDetails = () => {
               {issueData?.media.plexUrl4k && (
                 <Button
                   as="a"
-                  href={issueData?.media.plexUrl4k}
+                  href={plexUrl4k}
                   target="_blank"
                   rel="noreferrer"
                   className="w-full"
@@ -590,7 +598,7 @@ const IssueDetails = () => {
             {issueData?.media.plexUrl && (
               <Button
                 as="a"
-                href={issueData?.media.plexUrl}
+                href={plexUrl}
                 target="_blank"
                 rel="noreferrer"
                 className="w-full"
@@ -623,7 +631,7 @@ const IssueDetails = () => {
             {issueData?.media.plexUrl4k && (
               <Button
                 as="a"
-                href={issueData?.media.plexUrl4k}
+                href={plexUrl4k}
                 target="_blank"
                 rel="noreferrer"
                 className="w-full"

src/components/MovieDetails/index.tsx

@@ -18,6 +18,7 @@ import PersonCard from '@app/components/PersonCard';
 import RequestButton from '@app/components/RequestButton';
 import Slider from '@app/components/Slider';
 import StatusBadge from '@app/components/StatusBadge';
+import useDeepLinks from '@app/hooks/useDeepLinks';
 import useLocale from '@app/hooks/useLocale';
 import useSettings from '@app/hooks/useSettings';
 import { Permission, useUser } from '@app/hooks/useUser';
@@ -123,29 +124,12 @@ const MovieDetails = ({ movie }: MovieDetailsProps) => {
     setShowManager(router.query.manage == '1' ? true : false);
   }, [router.query.manage]);
 
-  const [plexUrl, setPlexUrl] = useState(data?.mediaInfo?.plexUrl);
+  const { plexUrl, plexUrl4k } = useDeepLinks({
-  const [plexUrl4k, setPlexUrl4k] = useState(data?.mediaInfo?.plexUrl4k);
+    plexUrl: data?.mediaInfo?.plexUrl,
-
+    plexUrl4k: data?.mediaInfo?.plexUrl4k,
-  useEffect(() => {
+    iOSPlexUrl: data?.mediaInfo?.iOSPlexUrl,
-    if (data) {
+    iOSPlexUrl4k: data?.mediaInfo?.iOSPlexUrl4k,
-      if (
+  });
-        /iPad|iPhone|iPod/.test(navigator.userAgent) ||
-        (navigator.userAgent === 'MacIntel' && navigator.maxTouchPoints > 1)
-      ) {
-        setPlexUrl(data.mediaInfo?.iOSPlexUrl);
-        setPlexUrl4k(data.mediaInfo?.iOSPlexUrl4k);
-      } else {
-        setPlexUrl(data.mediaInfo?.plexUrl);
-        setPlexUrl4k(data.mediaInfo?.plexUrl4k);
-      }
-    }
-  }, [
-    data,
-    data?.mediaInfo?.iOSPlexUrl,
-    data?.mediaInfo?.iOSPlexUrl4k,
-    data?.mediaInfo?.plexUrl,
-    data?.mediaInfo?.plexUrl4k,
-  ]);
 
   if (!data && !error) {
     return <LoadingSpinner />;
@@ -324,7 +308,7 @@ const MovieDetails = ({ movie }: MovieDetailsProps) => {
               inProgress={(data.mediaInfo?.downloadStatus ?? []).length > 0}
               tmdbId={data.mediaInfo?.tmdbId}
               mediaType="movie"
-              plexUrl={data.mediaInfo?.plexUrl}
+              plexUrl={plexUrl}
               serviceUrl={data.mediaInfo?.serviceUrl}
             />
             {settings.currentSettings.movie4kEnabled &&
@@ -346,7 +330,7 @@ const MovieDetails = ({ movie }: MovieDetailsProps) => {
                   }
                   tmdbId={data.mediaInfo?.tmdbId}
                   mediaType="movie"
-                  plexUrl={data.mediaInfo?.plexUrl4k}
+                  plexUrl={plexUrl4k}
                   serviceUrl={data.mediaInfo?.serviceUrl4k}
                 />
               )}

src/components/RequestCard/index.tsx

@@ -4,6 +4,7 @@ import CachedImage from '@app/components/Common/CachedImage';
 import Tooltip from '@app/components/Common/Tooltip';
 import RequestModal from '@app/components/RequestModal';
 import StatusBadge from '@app/components/StatusBadge';
+import useDeepLinks from '@app/hooks/useDeepLinks';
 import { Permission, useUser } from '@app/hooks/useUser';
 import globalMessages from '@app/i18n/globalMessages';
 import { withProperties } from '@app/utils/typeHelpers';
@@ -61,6 +62,13 @@ const RequestCardError = ({ requestData }: RequestCardErrorProps) => {
   const { hasPermission } = useUser();
   const intl = useIntl();
 
+  const { plexUrl, plexUrl4k } = useDeepLinks({
+    plexUrl: requestData?.media?.plexUrl,
+    plexUrl4k: requestData?.media?.plexUrl4k,
+    iOSPlexUrl: requestData?.media?.iOSPlexUrl,
+    iOSPlexUrl4k: requestData?.media?.iOSPlexUrl4k,
+  });
+
   const deleteRequest = async () => {
     await axios.delete(`/api/v1/media/${requestData?.media.id}`);
     mutate('/api/v1/media?filter=allavailable&take=20&sort=mediaAdded');
@@ -138,11 +146,7 @@ const RequestCardError = ({ requestData }: RequestCardErrorProps) => {
                         ).length > 0
                       }
                       is4k={requestData.is4k}
-                      plexUrl={
+                      plexUrl={requestData.is4k ? plexUrl4k : plexUrl}
-                        requestData.is4k
-                          ? requestData.media.plexUrl4k
-                          : requestData.media.plexUrl
-                      }
                       serviceUrl={
                         requestData.is4k
                           ? requestData.media.serviceUrl4k
@@ -217,6 +221,13 @@ const RequestCard = ({ request, onTitleData }: RequestCardProps) => {
     fallbackData: request,
   });
 
+  const { plexUrl, plexUrl4k } = useDeepLinks({
+    plexUrl: requestData?.media?.plexUrl,
+    plexUrl4k: requestData?.media?.plexUrl4k,
+    iOSPlexUrl: requestData?.media?.iOSPlexUrl,
+    iOSPlexUrl4k: requestData?.media?.iOSPlexUrl4k,
+  });
+
   const modifyRequest = async (type: 'approve' | 'decline') => {
     const response = await axios.post(`/api/v1/request/${request.id}/${type}`);
 
@@ -396,11 +407,7 @@ const RequestCard = ({ request, onTitleData }: RequestCardProps) => {
                 is4k={requestData.is4k}
                 tmdbId={requestData.media.tmdbId}
                 mediaType={requestData.type}
-                plexUrl={
+                plexUrl={requestData.is4k ? plexUrl4k : plexUrl}
-                  requestData.is4k
-                    ? requestData.media.plexUrl4k
-                    : requestData.media.plexUrl
-                }
                 serviceUrl={
                   requestData.is4k
                     ? requestData.media.serviceUrl4k

src/components/RequestList/RequestItem/index.tsx

@@ -4,6 +4,7 @@ import CachedImage from '@app/components/Common/CachedImage';
 import ConfirmButton from '@app/components/Common/ConfirmButton';
 import RequestModal from '@app/components/RequestModal';
 import StatusBadge from '@app/components/StatusBadge';
+import useDeepLinks from '@app/hooks/useDeepLinks';
 import { Permission, useUser } from '@app/hooks/useUser';
 import globalMessages from '@app/i18n/globalMessages';
 import {
@@ -61,6 +62,13 @@ const RequestItemError = ({
     revalidateList();
   };
 
+  const { plexUrl, plexUrl4k } = useDeepLinks({
+    plexUrl: requestData?.media?.plexUrl,
+    plexUrl4k: requestData?.media?.plexUrl4k,
+    iOSPlexUrl: requestData?.media?.iOSPlexUrl,
+    iOSPlexUrl4k: requestData?.media?.iOSPlexUrl4k,
+  });
+
   return (
     <div className="flex h-64 w-full flex-col justify-center rounded-xl bg-gray-800 py-4 text-gray-400 shadow-md ring-1 ring-red-500 xl:h-28 xl:flex-row">
       <div className="flex w-full flex-col justify-between overflow-hidden sm:flex-row">
@@ -130,11 +138,7 @@ const RequestItemError = ({
                       ).length > 0
                     }
                     is4k={requestData.is4k}
-                    plexUrl={
+                    plexUrl={requestData.is4k ? plexUrl4k : plexUrl}
-                      requestData.is4k
-                        ? requestData.media.plexUrl4k
-                        : requestData.media.plexUrl
-                    }
                     serviceUrl={
                       requestData.is4k
                         ? requestData.media.serviceUrl4k
@@ -316,6 +320,13 @@ const RequestItem = ({ request, revalidateList }: RequestItemProps) => {
     }
   };
 
+  const { plexUrl, plexUrl4k } = useDeepLinks({
+    plexUrl: requestData?.media?.plexUrl,
+    plexUrl4k: requestData?.media?.plexUrl4k,
+    iOSPlexUrl: requestData?.media?.iOSPlexUrl,
+    iOSPlexUrl4k: requestData?.media?.iOSPlexUrl4k,
+  });
+
   if (!title && !error) {
     return (
       <div
@@ -462,11 +473,7 @@ const RequestItem = ({ request, revalidateList }: RequestItemProps) => {
                   is4k={requestData.is4k}
                   tmdbId={requestData.media.tmdbId}
                   mediaType={requestData.type}
-                  plexUrl={
+                  plexUrl={requestData.is4k ? plexUrl4k : plexUrl}
-                    requestData.is4k
-                      ? requestData.media.plexUrl4k
-                      : requestData.media.plexUrl
-                  }
                   serviceUrl={
                     requestData.is4k
                       ? requestData.media.serviceUrl4k

src/components/TvDetails/index.tsx

@@ -22,6 +22,7 @@ import RequestModal from '@app/components/RequestModal';
 import Slider from '@app/components/Slider';
 import StatusBadge from '@app/components/StatusBadge';
 import Season from '@app/components/TvDetails/Season';
+import useDeepLinks from '@app/hooks/useDeepLinks';
 import useLocale from '@app/hooks/useLocale';
 import useSettings from '@app/hooks/useSettings';
 import { Permission, useUser } from '@app/hooks/useUser';
@@ -122,29 +123,12 @@ const TvDetails = ({ tv }: TvDetailsProps) => {
     setShowManager(router.query.manage == '1' ? true : false);
   }, [router.query.manage]);
 
-  const [plexUrl, setPlexUrl] = useState(data?.mediaInfo?.plexUrl);
+  const { plexUrl, plexUrl4k } = useDeepLinks({
-  const [plexUrl4k, setPlexUrl4k] = useState(data?.mediaInfo?.plexUrl4k);
+    plexUrl: data?.mediaInfo?.plexUrl,
-
+    plexUrl4k: data?.mediaInfo?.plexUrl4k,
-  useEffect(() => {
+    iOSPlexUrl: data?.mediaInfo?.iOSPlexUrl,
-    if (data) {
+    iOSPlexUrl4k: data?.mediaInfo?.iOSPlexUrl4k,
-      if (
+  });
-        /iPad|iPhone|iPod/.test(navigator.userAgent) ||
-        (navigator.userAgent === 'MacIntel' && navigator.maxTouchPoints > 1)
-      ) {
-        setPlexUrl(data.mediaInfo?.iOSPlexUrl);
-        setPlexUrl4k(data.mediaInfo?.iOSPlexUrl4k);
-      } else {
-        setPlexUrl(data.mediaInfo?.plexUrl);
-        setPlexUrl4k(data.mediaInfo?.plexUrl4k);
-      }
-    }
-  }, [
-    data,
-    data?.mediaInfo?.iOSPlexUrl,
-    data?.mediaInfo?.iOSPlexUrl4k,
-    data?.mediaInfo?.plexUrl,
-    data?.mediaInfo?.plexUrl4k,
-  ]);
 
   if (!data && !error) {
     return <LoadingSpinner />;
@@ -337,7 +321,7 @@ const TvDetails = ({ tv }: TvDetailsProps) => {
               inProgress={(data.mediaInfo?.downloadStatus ?? []).length > 0}
               tmdbId={data.mediaInfo?.tmdbId}
               mediaType="tv"
-              plexUrl={data.mediaInfo?.plexUrl}
+              plexUrl={plexUrl}
               serviceUrl={data.mediaInfo?.serviceUrl}
             />
             {settings.currentSettings.series4kEnabled &&
@@ -359,7 +343,7 @@ const TvDetails = ({ tv }: TvDetailsProps) => {
                   }
                   tmdbId={data.mediaInfo?.tmdbId}
                   mediaType="tv"
-                  plexUrl={data.mediaInfo?.plexUrl4k}
+                  plexUrl={plexUrl4k}
                   serviceUrl={data.mediaInfo?.serviceUrl4k}
                 />
               )}

src/hooks/useDeepLinks.ts

@@ -0,0 +1,35 @@
+import { useEffect, useState } from 'react';
+
+interface useDeepLinksProps {
+  plexUrl?: string;
+  plexUrl4k?: string;
+  iOSPlexUrl?: string;
+  iOSPlexUrl4k?: string;
+}
+
+const useDeepLinks = ({
+  plexUrl,
+  plexUrl4k,
+  iOSPlexUrl,
+  iOSPlexUrl4k,
+}: useDeepLinksProps) => {
+  const [returnedPlexUrl, setReturnedPlexUrl] = useState(plexUrl);
+  const [returnedPlexUrl4k, setReturnedPlexUrl4k] = useState(plexUrl4k);
+
+  useEffect(() => {
+    if (
+      /iPad|iPhone|iPod/.test(navigator.userAgent) ||
+      (navigator.userAgent === 'MacIntel' && navigator.maxTouchPoints > 1)
+    ) {
+      setReturnedPlexUrl(iOSPlexUrl);
+      setReturnedPlexUrl4k(iOSPlexUrl4k);
+    } else {
+      setReturnedPlexUrl(plexUrl);
+      setReturnedPlexUrl4k(plexUrl4k);
+    }
+  }, [iOSPlexUrl, iOSPlexUrl4k, plexUrl, plexUrl4k]);
+
+  return { plexUrl: returnedPlexUrl, plexUrl4k: returnedPlexUrl4k };
+};
+
+export default useDeepLinks;