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

pull/3075/head
Brandon Cohen 2 years ago committed by GitHub
parent 1dfa9431a9
commit bfe56c3470
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

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

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

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

@ -4,6 +4,7 @@ import CachedImage from '@app/components/Common/CachedImage';
import ConfirmButton from '@app/components/Common/ConfirmButton'; import ConfirmButton from '@app/components/Common/ConfirmButton';
import RequestModal from '@app/components/RequestModal'; import RequestModal from '@app/components/RequestModal';
import StatusBadge from '@app/components/StatusBadge'; import StatusBadge from '@app/components/StatusBadge';
import useDeepLinks from '@app/hooks/useDeepLinks';
import { Permission, useUser } from '@app/hooks/useUser'; import { Permission, useUser } from '@app/hooks/useUser';
import globalMessages from '@app/i18n/globalMessages'; import globalMessages from '@app/i18n/globalMessages';
import { import {
@ -61,6 +62,13 @@ const RequestItemError = ({
revalidateList(); revalidateList();
}; };
const { plexUrl, plexUrl4k } = useDeepLinks({
plexUrl: requestData?.media?.plexUrl,
plexUrl4k: requestData?.media?.plexUrl4k,
iOSPlexUrl: requestData?.media?.iOSPlexUrl,
iOSPlexUrl4k: requestData?.media?.iOSPlexUrl4k,
});
return ( 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 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"> <div className="flex w-full flex-col justify-between overflow-hidden sm:flex-row">
@ -130,11 +138,7 @@ const RequestItemError = ({
).length > 0 ).length > 0
} }
is4k={requestData.is4k} is4k={requestData.is4k}
plexUrl={ plexUrl={requestData.is4k ? plexUrl4k : plexUrl}
requestData.is4k
? requestData.media.plexUrl4k
: requestData.media.plexUrl
}
serviceUrl={ serviceUrl={
requestData.is4k requestData.is4k
? requestData.media.serviceUrl4k ? 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) { if (!title && !error) {
return ( return (
<div <div
@ -462,11 +473,7 @@ const RequestItem = ({ request, revalidateList }: RequestItemProps) => {
is4k={requestData.is4k} is4k={requestData.is4k}
tmdbId={requestData.media.tmdbId} tmdbId={requestData.media.tmdbId}
mediaType={requestData.type} mediaType={requestData.type}
plexUrl={ plexUrl={requestData.is4k ? plexUrl4k : plexUrl}
requestData.is4k
? requestData.media.plexUrl4k
: requestData.media.plexUrl
}
serviceUrl={ serviceUrl={
requestData.is4k requestData.is4k
? requestData.media.serviceUrl4k ? requestData.media.serviceUrl4k

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

@ -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;
Loading…
Cancel
Save