feat(show): air day and time added to details panel

Author: rectifyer

projects/client/i18n/meta/en.json

@@ -2441,6 +2441,21 @@
         "android"
       ]
     },
+    "text_airs_day_time": {
+      "default": "{day}s at {time}",
+      "description": "Formatted text showing the recurring day and time a show airs.",
+      "exclude": [
+        "android"
+      ],
+      "variables": {
+        "day": {
+          "type": "string"
+        },
+        "time": {
+          "type": "string"
+        }
+      }
+    },
     "header_aired": {
       "default": "Aired",
       "description": "Header for the section that shows when a show has aired.",

projects/client/src/lib/components/media/tags/TagIntlProvider.ts

@@ -26,7 +26,7 @@ export const TagIntlProvider: TagIntl = {
     delta ? toHumanNumber(Math.abs(delta), languageTag()) : '—',
   postCredits: (count) =>
     `${m.header_post_credits()} · ${toHumanNumber(count, languageTag())}`,
-  toDay: (date) => toHumanDay(date, getLocale()),
+  toDay: (date) => toHumanDay({ date, locale: getLocale() }),
   watchedLabel: () => m.tag_text_watched(),
   toRemainingDuration: (duration) =>
     m.tag_text_remaining_duration({

projects/client/src/lib/features/calendar/_internal/CalendarItems.svelte

@@ -33,7 +33,7 @@
       {#if day.items.length > 0}
         <div id={dateKey(day.date)} class="calendar-day-anchor">
           <GridList
-            title={toHumanDay(day.date, getLocale())}
+            title={toHumanDay({ date: day.date, locale: getLocale() })}
             items={day.items}
             id={dateKey(day.date)}
             {item}

projects/client/src/lib/features/calendar/_internal/Day.svelte

@@ -29,7 +29,7 @@
 <button
   class="trakt-calendar-day-button"
   aria-label={m.button_label_go_to_calendar_day({
-    day: toHumanDay(day.date, getLocale()),
+    day: toHumanDay({ date: day.date, locale: getLocale() }),
   })}
   class:has-items={itemCount > 0}
   class:is-active={isActiveDate}

projects/client/src/lib/requests/_internal/mapToShowEntry.ts

@@ -74,6 +74,13 @@ export function mapToShowEntry(
     totalRuntime,
     rating: mapToTraktRating(show.rating),
     network: show.network,
+    airs: show.airs?.day && show.airs.time && show.airs.timezone
+      ? {
+        day: show.airs.day,
+        time: show.airs.time,
+        timezone: show.airs.timezone,
+      }
+      : undefined,
     homepage: prependHttps(show.homepage),
     socialMedia: mapToSocialMedia(show),
   };

projects/client/src/lib/requests/models/ShowEntry.ts

@@ -2,9 +2,17 @@ import { z } from 'zod';
 import { EpisodeCountSchema } from './EpisodeCount.ts';
 import { MediaEntrySchema } from './MediaEntry.ts';
 
+export const ShowAirsSchema = z.object({
+  day: z.string(),
+  time: z.string(),
+  timezone: z.string(),
+});
+export type ShowAirs = z.infer<typeof ShowAirsSchema>;
+
 export const ShowEntrySchema = MediaEntrySchema.merge(EpisodeCountSchema)
   .extend({
     network: z.string().nullish(),
     totalRuntime: z.number(),
+    airs: ShowAirsSchema.nullish(),
   });
 export type ShowEntry = z.infer<typeof ShowEntrySchema>;

projects/client/src/lib/sections/components/DateWithAnniversary.svelte

@@ -7,6 +7,6 @@
 </script>
 
 <p class="no-wrap ellipsis">
-  {toHumanDay(date, getLocale(), "short")}
+  {toHumanDay({ date, locale: getLocale(), format: "short" })}
   ({getYearsDifference(date, referenceDate)})
 </p>

projects/client/src/lib/sections/lists/user/_internal/formatSortValue.ts

@@ -81,7 +81,11 @@ export function formatSortValue(item: SortInput, sortBy?: SortBy) {
 
   switch (sortBy) {
     case 'added':
-      return toHumanDay(getAddedAt(item), getLocale(), 'short');
+      return toHumanDay({
+        date: getAddedAt(item),
+        locale: getLocale(),
+        format: 'short',
+      });
     case 'runtime': {
       const runtime = getRuntimeMinutes(item);
       return toHumanDuration({ minutes: runtime }, languageTag());
@@ -90,7 +94,7 @@ export function formatSortValue(item: SortInput, sortBy?: SortBy) {
       const airDate = getAirDate(item);
       return isMaxDate(airDate)
         ? m.tag_text_tba()
-        : toHumanDay(airDate, getLocale(), 'short');
+        : toHumanDay({ date: airDate, locale: getLocale(), format: 'short' });
     }
     case 'percentage': {
       const rating = getRating(item);

projects/client/src/lib/sections/stats/_internal/utils/getDateRangeLabel.ts

@@ -4,7 +4,7 @@ import type { DateRange } from '../models/DateRange.ts';
 
 export function getDateRangeLabel(range: DateRange) {
   const locale = getLocale();
-  return `${toHumanDay(range.start, locale, 'short')} - ${
-    toHumanDay(range.end, locale, 'short')
+  return `${toHumanDay({ date: range.start, locale, format: 'short' })} - ${
+    toHumanDay({ date: range.end, locale, format: 'short' })
   }`;
 }

projects/client/src/lib/sections/summary/components/comments/_internal/CommentHeader.svelte

@@ -30,7 +30,7 @@
 </script>
 
 <div class="trakt-comment-header">
-  <TextCardHeader subTitle={toHumanDay(comment.createdAt, getLocale())}>
+  <TextCardHeader subTitle={toHumanDay({ date: comment.createdAt, locale: getLocale() })}>
     {#snippet icon()}
       <UserAvatar user={comment.user} size="small" />
     {/snippet}