fix: watch data not required to show Tautulli button (#2976)

pull/2977/head
TheCatLady 2 years ago committed by GitHub
parent 22360f3b87
commit dd28200040
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -210,77 +210,81 @@ const ManageSlideOver = ({
{hasPermission(Permission.ADMIN) && {hasPermission(Permission.ADMIN) &&
(data.mediaInfo?.serviceUrl || (data.mediaInfo?.serviceUrl ||
data.mediaInfo?.tautulliUrl || data.mediaInfo?.tautulliUrl ||
!!watchData?.data?.playCount) && ( watchData?.data) && (
<> <>
<h3 className="mb-2 text-xl font-bold"> <h3 className="mb-2 text-xl font-bold">
{intl.formatMessage(messages.manageModalMedia)} {intl.formatMessage(messages.manageModalMedia)}
</h3> </h3>
<div className="space-y-2"> <div className="space-y-2">
{!!watchData?.data && ( {(watchData?.data || data.mediaInfo?.tautulliUrl) && (
<div> <div>
<div {!!watchData?.data && (
className={`grid grid-cols-1 divide-y divide-gray-700 overflow-hidden border border-gray-700 text-sm text-gray-300 shadow ${ <div
data.mediaInfo?.tautulliUrl className={`grid grid-cols-1 divide-y divide-gray-700 overflow-hidden border-gray-700 text-sm text-gray-300 shadow ${
? 'rounded-t-md' data.mediaInfo?.tautulliUrl
: 'rounded-md' ? 'rounded-t-md border-x border-t'
}`} : 'rounded-md border'
> }`}
<div className="grid grid-cols-3 divide-x divide-gray-700"> >
<div className="px-4 py-3"> <div className="grid grid-cols-3 divide-x divide-gray-700">
<div className="font-bold"> <div className="px-4 py-3">
{intl.formatMessage(messages.pastdays, { days: 7 })} <div className="font-bold">
</div> {intl.formatMessage(messages.pastdays, {
<div className="text-white"> days: 7,
{styledPlayCount(watchData.data.playCount7Days)} })}
</div>
<div className="text-white">
{styledPlayCount(watchData.data.playCount7Days)}
</div>
</div> </div>
</div> <div className="px-4 py-3">
<div className="px-4 py-3"> <div className="font-bold">
<div className="font-bold"> {intl.formatMessage(messages.pastdays, {
{intl.formatMessage(messages.pastdays, { days: 30,
days: 30, })}
})} </div>
<div className="text-white">
{styledPlayCount(watchData.data.playCount30Days)}
</div>
</div> </div>
<div className="text-white"> <div className="px-4 py-3">
{styledPlayCount(watchData.data.playCount30Days)} <div className="font-bold">
{intl.formatMessage(messages.alltime)}
</div>
<div className="text-white">
{styledPlayCount(watchData.data.playCount)}
</div>
</div> </div>
</div> </div>
<div className="px-4 py-3"> {!!watchData.data.users.length && (
<div className="font-bold"> <div className="flex flex-row space-x-2 px-4 pt-3 pb-2">
{intl.formatMessage(messages.alltime)} <span className="shrink-0 font-bold leading-8">
</div> {intl.formatMessage(messages.playedby)}
<div className="text-white"> </span>
{styledPlayCount(watchData.data.playCount)} <span className="flex flex-row flex-wrap">
{watchData.data.users.map((user) => (
<Link
href={
currentUser?.id === user.id
? '/profile'
: `/users/${user.id}`
}
key={`watch-user-${user.id}`}
>
<a className="z-0 mb-1 -mr-2 shrink-0 hover:z-50">
<img
src={user.avatar}
alt={user.displayName}
className="h-8 w-8 scale-100 transform-gpu rounded-full object-cover ring-1 ring-gray-500 transition duration-300 hover:scale-105"
/>
</a>
</Link>
))}
</span>
</div> </div>
</div> )}
</div> </div>
{!!watchData.data.users.length && ( )}
<div className="flex flex-row space-x-2 px-4 pt-3 pb-2">
<span className="shrink-0 font-bold leading-8">
{intl.formatMessage(messages.playedby)}
</span>
<span className="flex flex-row flex-wrap">
{watchData.data.users.map((user) => (
<Link
href={
currentUser?.id === user.id
? '/profile'
: `/users/${user.id}`
}
key={`watch-user-${user.id}`}
>
<a className="z-0 mb-1 -mr-2 shrink-0 hover:z-50">
<img
src={user.avatar}
alt={user.displayName}
className="h-8 w-8 scale-100 transform-gpu rounded-full object-cover ring-1 ring-gray-500 transition duration-300 hover:scale-105"
/>
</a>
</Link>
))}
</span>
</div>
)}
</div>
{data.mediaInfo?.tautulliUrl && ( {data.mediaInfo?.tautulliUrl && (
<a <a
href={data.mediaInfo.tautulliUrl} href={data.mediaInfo.tautulliUrl}
@ -290,7 +294,7 @@ const ManageSlideOver = ({
<Button <Button
buttonType="ghost" buttonType="ghost"
className={`w-full ${ className={`w-full ${
watchData.data.playCount ? 'rounded-t-none' : '' watchData?.data ? 'rounded-t-none' : ''
}`} }`}
> >
<ViewListIcon /> <ViewListIcon />
@ -302,7 +306,7 @@ const ManageSlideOver = ({
)} )}
</div> </div>
)} )}
{data?.mediaInfo?.serviceUrl && ( {data.mediaInfo?.serviceUrl && (
<a <a
href={data?.mediaInfo?.serviceUrl} href={data?.mediaInfo?.serviceUrl}
target="_blank" target="_blank"
@ -325,77 +329,83 @@ const ManageSlideOver = ({
{hasPermission(Permission.ADMIN) && {hasPermission(Permission.ADMIN) &&
(data.mediaInfo?.serviceUrl4k || (data.mediaInfo?.serviceUrl4k ||
data.mediaInfo?.tautulliUrl4k || data.mediaInfo?.tautulliUrl4k ||
!!watchData?.data4k?.playCount) && ( watchData?.data4k) && (
<div> <div>
<h3 className="mb-2 text-xl font-bold"> <h3 className="mb-2 text-xl font-bold">
{intl.formatMessage(messages.manageModalMedia4k)} {intl.formatMessage(messages.manageModalMedia4k)}
</h3> </h3>
<div className="space-y-2"> <div className="space-y-2">
{!!watchData?.data4k && ( {(watchData?.data4k || data.mediaInfo?.tautulliUrl4k) && (
<div> <div>
<div {watchData?.data4k && (
className={`grid grid-cols-1 divide-y divide-gray-700 overflow-hidden border border-gray-700 text-sm text-gray-300 shadow ${ <div
data.mediaInfo?.tautulliUrl4k className={`grid grid-cols-1 divide-y divide-gray-700 overflow-hidden border-gray-700 text-sm text-gray-300 shadow ${
? 'rounded-t-md' data.mediaInfo?.tautulliUrl4k
: 'rounded-md' ? 'rounded-t-md border-x border-t'
}`} : 'rounded-md border'
> }`}
<div className="grid grid-cols-3 divide-x divide-gray-700"> >
<div className="px-4 py-3"> <div className="grid grid-cols-3 divide-x divide-gray-700">
<div className="font-bold"> <div className="px-4 py-3">
{intl.formatMessage(messages.pastdays, { days: 7 })} <div className="font-bold">
</div> {intl.formatMessage(messages.pastdays, {
<div className="text-white"> days: 7,
{styledPlayCount(watchData.data4k.playCount7Days)} })}
</div>
<div className="text-white">
{styledPlayCount(watchData.data4k.playCount7Days)}
</div>
</div> </div>
</div> <div className="px-4 py-3">
<div className="px-4 py-3"> <div className="font-bold">
<div className="font-bold"> {intl.formatMessage(messages.pastdays, {
{intl.formatMessage(messages.pastdays, { days: 30,
days: 30, })}
})} </div>
<div className="text-white">
{styledPlayCount(
watchData.data4k.playCount30Days
)}
</div>
</div> </div>
<div className="text-white"> <div className="px-4 py-3">
{styledPlayCount(watchData.data4k.playCount30Days)} <div className="font-bold">
{intl.formatMessage(messages.alltime)}
</div>
<div className="text-white">
{styledPlayCount(watchData.data4k.playCount)}
</div>
</div> </div>
</div> </div>
<div className="px-4 py-3"> {!!watchData.data4k.users.length && (
<div className="font-bold"> <div className="flex flex-row space-x-2 px-4 pt-3 pb-2">
{intl.formatMessage(messages.alltime)} <span className="shrink-0 font-bold leading-8">
</div> {intl.formatMessage(messages.playedby)}
<div className="text-white"> </span>
{styledPlayCount(watchData.data4k.playCount)} <span className="flex flex-row flex-wrap">
{watchData.data4k.users.map((user) => (
<Link
href={
currentUser?.id === user.id
? '/profile'
: `/users/${user.id}`
}
key={`watch-user-${user.id}`}
>
<a className="z-0 mb-1 -mr-2 shrink-0 hover:z-50">
<img
src={user.avatar}
alt={user.displayName}
className="h-8 w-8 scale-100 transform-gpu rounded-full object-cover ring-1 ring-gray-500 transition duration-300 hover:scale-105"
/>
</a>
</Link>
))}
</span>
</div> </div>
</div> )}
</div> </div>
{!!watchData.data4k.users.length && ( )}
<div className="flex flex-row space-x-2 px-4 pt-3 pb-2">
<span className="shrink-0 font-bold leading-8">
{intl.formatMessage(messages.playedby)}
</span>
<span className="flex flex-row flex-wrap">
{watchData.data4k.users.map((user) => (
<Link
href={
currentUser?.id === user.id
? '/profile'
: `/users/${user.id}`
}
key={`watch-user-${user.id}`}
>
<a className="z-0 mb-1 -mr-2 shrink-0 hover:z-50">
<img
src={user.avatar}
alt={user.displayName}
className="h-8 w-8 scale-100 transform-gpu rounded-full object-cover ring-1 ring-gray-500 transition duration-300 hover:scale-105"
/>
</a>
</Link>
))}
</span>
</div>
)}
</div>
{data.mediaInfo?.tautulliUrl4k && ( {data.mediaInfo?.tautulliUrl4k && (
<a <a
href={data.mediaInfo.tautulliUrl4k} href={data.mediaInfo.tautulliUrl4k}
@ -405,7 +415,7 @@ const ManageSlideOver = ({
<Button <Button
buttonType="ghost" buttonType="ghost"
className={`w-full ${ className={`w-full ${
watchData.data4k.playCount ? 'rounded-t-none' : '' watchData?.data4k ? 'rounded-t-none' : ''
}`} }`}
> >
<ViewListIcon /> <ViewListIcon />

Loading…
Cancel
Save