fix: compensate for timezone by using offset

Co-authored-by: Ryan Cohen <ryan@sct.dev>

cypress/e2e/settings/discover-customization.cy.ts

@@ -96,7 +96,7 @@ describe('Discover Customization', () => {
       .should('be.disabled');
 
     cy.get('#data').clear();
-    cy.get('#data').type('time travel{enter}', { delay: 100 });
+    cy.get('#data').type('christmas{enter}', { delay: 100 });
 
     // Confirming we have some results
     cy.contains('.slider-header', sliderTitle)

next.config.js

@@ -19,5 +19,6 @@ module.exports = {
   },
   experimental: {
     scrollRestoration: true,
+    largePageDataBytes: 256000,
   },
 };

src/components/AirDateBadge/index.tsx

@@ -15,7 +15,9 @@ const AirDateBadge = ({ airDate }: AirDateBadgeProps) => {
   const intl = useIntl();
   const dAirDate = new Date(airDate);
   const nowDate = new Date();
-  const alreadyAired = dAirDate.getTime() < nowDate.getTime();
+  const dAirDateOffset =
+    dAirDate.getTime() - dAirDate.getTimezoneOffset() * -60000;
+  const alreadyAired = dAirDateOffset < nowDate.getTime();
 
   const compareWeek = new Date(
     alreadyAired ? Date.now() - WEEK : Date.now() + WEEK
@@ -24,12 +26,16 @@ const AirDateBadge = ({ airDate }: AirDateBadgeProps) => {
   let showRelative = false;
 
   if (
-    (alreadyAired && dAirDate.getTime() > compareWeek.getTime()) ||
-    (!alreadyAired && dAirDate.getTime() < compareWeek.getTime())
+    (alreadyAired && dAirDateOffset > compareWeek.getTime()) ||
+    (!alreadyAired && dAirDateOffset < compareWeek.getTime())
   ) {
     showRelative = true;
   }
 
+  const relativeTime = (dAirDateOffset - Date.now()) / 1000;
+
+  const within24Hours = Math.floor(Math.abs(relativeTime / (60 * 60))) <= 24;
+
   return (
     <div className="flex items-center space-x-2">
       <Badge badgeType="light">
@@ -45,9 +51,15 @@ const AirDateBadge = ({ airDate }: AirDateBadgeProps) => {
           {intl.formatMessage(
             alreadyAired ? messages.airedrelative : messages.airsrelative,
             {
-              relativeTime: (
+              relativeTime: within24Hours ? (
+                alreadyAired ? (
+                  'today'
+                ) : (
+                  'tomorrow'
+                )
+              ) : (
                 <FormattedRelativeTime
-                  value={(dAirDate.getTime() - Date.now()) / 1000}
+                  value={relativeTime}
                   numeric="auto"
                   updateIntervalInSeconds={1}
                 />

src/components/ManageSlideOver/index.tsx

@@ -1,6 +1,7 @@
 import Button from '@app/components/Common/Button';
 import ConfirmButton from '@app/components/Common/ConfirmButton';
 import SlideOver from '@app/components/Common/SlideOver';
+import Tooltip from '@app/components/Common/Tooltip';
 import DownloadBlock from '@app/components/DownloadBlock';
 import IssueBlock from '@app/components/IssueBlock';
 import RequestBlock from '@app/components/RequestBlock';
@@ -144,20 +145,24 @@ const ManageSlideOver = ({
             <div className="overflow-hidden rounded-md border border-gray-700 shadow">
               <ul>
                 {data.mediaInfo?.downloadStatus?.map((status, index) => (
-                  <li
+                  <Tooltip
                     key={`dl-status-${status.externalId}-${index}`}
-                    className="border-b border-gray-700 last:border-b-0"
+                    content={status.title}
                   >
-                    <DownloadBlock downloadItem={status} />
-                  </li>
+                    <li className="border-b border-gray-700 last:border-b-0">
+                      <DownloadBlock downloadItem={status} />
+                    </li>
+                  </Tooltip>
                 ))}
                 {data.mediaInfo?.downloadStatus4k?.map((status, index) => (
-                  <li
+                  <Tooltip
                     key={`dl-status-${status.externalId}-${index}`}
-                    className="border-b border-gray-700 last:border-b-0"
+                    content={status.title}
                   >
-                    <DownloadBlock downloadItem={status} is4k />
-                  </li>
+                    <li className="border-b border-gray-700 last:border-b-0">
+                      <DownloadBlock downloadItem={status} is4k />
+                    </li>
+                  </Tooltip>
                 ))}
               </ul>
             </div>