From dd282000407ae9656640f38561a104916d12571a Mon Sep 17 00:00:00 2001
From: TheCatLady <52870424+TheCatLady@users.noreply.github.com>
Date: Tue, 23 Aug 2022 23:26:25 -0700
Subject: [PATCH] fix: watch data not required to show Tautulli button (#2976)

---
 src/components/ManageSlideOver/index.tsx | 252 ++++++++++++-----------
 1 file changed, 131 insertions(+), 121 deletions(-)

diff --git a/src/components/ManageSlideOver/index.tsx b/src/components/ManageSlideOver/index.tsx
index 87b96e3c..806f3ee7 100644
--- a/src/components/ManageSlideOver/index.tsx
+++ b/src/components/ManageSlideOver/index.tsx
@@ -210,77 +210,81 @@ const ManageSlideOver = ({
         {hasPermission(Permission.ADMIN) &&
           (data.mediaInfo?.serviceUrl ||
             data.mediaInfo?.tautulliUrl ||
-            !!watchData?.data?.playCount) && (
+            watchData?.data) && (
             <>
               <h3 className="mb-2 text-xl font-bold">
                 {intl.formatMessage(messages.manageModalMedia)}
               </h3>
               <div className="space-y-2">
-                {!!watchData?.data && (
+                {(watchData?.data || data.mediaInfo?.tautulliUrl) && (
                   <div>
-                    <div
-                      className={`grid grid-cols-1 divide-y divide-gray-700 overflow-hidden border border-gray-700 text-sm text-gray-300 shadow ${
-                        data.mediaInfo?.tautulliUrl
-                          ? 'rounded-t-md'
-                          : 'rounded-md'
-                      }`}
-                    >
-                      <div className="grid grid-cols-3 divide-x divide-gray-700">
-                        <div className="px-4 py-3">
-                          <div className="font-bold">
-                            {intl.formatMessage(messages.pastdays, { days: 7 })}
-                          </div>
-                          <div className="text-white">
-                            {styledPlayCount(watchData.data.playCount7Days)}
+                    {!!watchData?.data && (
+                      <div
+                        className={`grid grid-cols-1 divide-y divide-gray-700 overflow-hidden border-gray-700 text-sm text-gray-300 shadow ${
+                          data.mediaInfo?.tautulliUrl
+                            ? '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="font-bold">
+                              {intl.formatMessage(messages.pastdays, {
+                                days: 7,
+                              })}
+                            </div>
+                            <div className="text-white">
+                              {styledPlayCount(watchData.data.playCount7Days)}
+                            </div>
                           </div>
-                        </div>
-                        <div className="px-4 py-3">
-                          <div className="font-bold">
-                            {intl.formatMessage(messages.pastdays, {
-                              days: 30,
-                            })}
+                          <div className="px-4 py-3">
+                            <div className="font-bold">
+                              {intl.formatMessage(messages.pastdays, {
+                                days: 30,
+                              })}
+                            </div>
+                            <div className="text-white">
+                              {styledPlayCount(watchData.data.playCount30Days)}
+                            </div>
                           </div>
-                          <div className="text-white">
-                            {styledPlayCount(watchData.data.playCount30Days)}
+                          <div className="px-4 py-3">
+                            <div className="font-bold">
+                              {intl.formatMessage(messages.alltime)}
+                            </div>
+                            <div className="text-white">
+                              {styledPlayCount(watchData.data.playCount)}
+                            </div>
                           </div>
                         </div>
-                        <div className="px-4 py-3">
-                          <div className="font-bold">
-                            {intl.formatMessage(messages.alltime)}
-                          </div>
-                          <div className="text-white">
-                            {styledPlayCount(watchData.data.playCount)}
+                        {!!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>
+                        )}
                       </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 && (
                       <a
                         href={data.mediaInfo.tautulliUrl}
@@ -290,7 +294,7 @@ const ManageSlideOver = ({
                         <Button
                           buttonType="ghost"
                           className={`w-full ${
-                            watchData.data.playCount ? 'rounded-t-none' : ''
+                            watchData?.data ? 'rounded-t-none' : ''
                           }`}
                         >
                           <ViewListIcon />
@@ -302,7 +306,7 @@ const ManageSlideOver = ({
                     )}
                   </div>
                 )}
-                {data?.mediaInfo?.serviceUrl && (
+                {data.mediaInfo?.serviceUrl && (
                   <a
                     href={data?.mediaInfo?.serviceUrl}
                     target="_blank"
@@ -325,77 +329,83 @@ const ManageSlideOver = ({
         {hasPermission(Permission.ADMIN) &&
           (data.mediaInfo?.serviceUrl4k ||
             data.mediaInfo?.tautulliUrl4k ||
-            !!watchData?.data4k?.playCount) && (
+            watchData?.data4k) && (
             <div>
               <h3 className="mb-2 text-xl font-bold">
                 {intl.formatMessage(messages.manageModalMedia4k)}
               </h3>
               <div className="space-y-2">
-                {!!watchData?.data4k && (
+                {(watchData?.data4k || data.mediaInfo?.tautulliUrl4k) && (
                   <div>
-                    <div
-                      className={`grid grid-cols-1 divide-y divide-gray-700 overflow-hidden border border-gray-700 text-sm text-gray-300 shadow ${
-                        data.mediaInfo?.tautulliUrl4k
-                          ? 'rounded-t-md'
-                          : 'rounded-md'
-                      }`}
-                    >
-                      <div className="grid grid-cols-3 divide-x divide-gray-700">
-                        <div className="px-4 py-3">
-                          <div className="font-bold">
-                            {intl.formatMessage(messages.pastdays, { days: 7 })}
-                          </div>
-                          <div className="text-white">
-                            {styledPlayCount(watchData.data4k.playCount7Days)}
+                    {watchData?.data4k && (
+                      <div
+                        className={`grid grid-cols-1 divide-y divide-gray-700 overflow-hidden border-gray-700 text-sm text-gray-300 shadow ${
+                          data.mediaInfo?.tautulliUrl4k
+                            ? '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="font-bold">
+                              {intl.formatMessage(messages.pastdays, {
+                                days: 7,
+                              })}
+                            </div>
+                            <div className="text-white">
+                              {styledPlayCount(watchData.data4k.playCount7Days)}
+                            </div>
                           </div>
-                        </div>
-                        <div className="px-4 py-3">
-                          <div className="font-bold">
-                            {intl.formatMessage(messages.pastdays, {
-                              days: 30,
-                            })}
+                          <div className="px-4 py-3">
+                            <div className="font-bold">
+                              {intl.formatMessage(messages.pastdays, {
+                                days: 30,
+                              })}
+                            </div>
+                            <div className="text-white">
+                              {styledPlayCount(
+                                watchData.data4k.playCount30Days
+                              )}
+                            </div>
                           </div>
-                          <div className="text-white">
-                            {styledPlayCount(watchData.data4k.playCount30Days)}
+                          <div className="px-4 py-3">
+                            <div className="font-bold">
+                              {intl.formatMessage(messages.alltime)}
+                            </div>
+                            <div className="text-white">
+                              {styledPlayCount(watchData.data4k.playCount)}
+                            </div>
                           </div>
                         </div>
-                        <div className="px-4 py-3">
-                          <div className="font-bold">
-                            {intl.formatMessage(messages.alltime)}
-                          </div>
-                          <div className="text-white">
-                            {styledPlayCount(watchData.data4k.playCount)}
+                        {!!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>
+                        )}
                       </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 && (
                       <a
                         href={data.mediaInfo.tautulliUrl4k}
@@ -405,7 +415,7 @@ const ManageSlideOver = ({
                         <Button
                           buttonType="ghost"
                           className={`w-full ${
-                            watchData.data4k.playCount ? 'rounded-t-none' : ''
+                            watchData?.data4k ? 'rounded-t-none' : ''
                           }`}
                         >
                           <ViewListIcon />