feat: add show description to show detail page (#152)

__tests__/SchedulePage.test.tsx

@@ -27,6 +27,7 @@ describe('SchedulePage', () => {
     expect(screen.getByText('Archives')).toBeTruthy();
     expect(screen.getByText('88.1 FM')).toBeTruthy();
     expect(screen.getByText(/archived episode/)).toBeTruthy();
+    expect(screen.getByText('post music for post people.')).toBeTruthy();
   });
 
   test('navigates to ArchivedShowView when tapping an archive in ShowDetails', async () => {

src/app/Home/index.tsx

@@ -35,6 +35,7 @@ import { COLORS, CORE_COLORS } from '@utils/Colors';
 import { formatArchiveDate } from '@utils/DateTime';
 
 import HomeNowPlaying from './HomeNowPlaying';
+import { ScheduleService } from '@services/ScheduleService';
 
 const streamUrl = 'https://wmbr.org:8002/hi';
 
@@ -56,6 +57,8 @@ export default function HomeScreen() {
     liveStreamUrl: streamUrl,
   });
 
+  const scheduleService = ScheduleService.getInstance();
+
   const isPlaying = playbackState?.state === State.Playing;
 
   const navigation =
@@ -231,25 +234,32 @@ export default function HomeScreen() {
     await TrackPlayer.seekTo(newPosition);
   }, [progress.position, progress.duration]);
 
-  const handleOpenShowDetails = useCallback(() => {
+  const handleOpenShowDetails = useCallback(async () => {
     const show = archiveState.currentShow;
     if (!show) return;
 
+    const scheduleShow = await scheduleService.getShowById(show.id);
+
     // Navigate to Schedule tab with complete stack state
     navigation.navigate('Schedule' as WmbrRouteName, {
       // Specify the complete stack path
       state: {
         routes: [
           { name: 'ScheduleMain' },
-          { name: 'ShowDetails', params: { show } },
+          { name: 'ShowDetails', params: { show, scheduleShow } },
           {
             name: 'ArchivedShowView',
             params: { show, archive: archiveState.currentArchive },
           },
         ],
       },
     });
-  }, [archiveState.currentShow, archiveState.currentArchive, navigation]);
+  }, [
+    archiveState.currentShow,
+    archiveState.currentArchive,
+    scheduleService,
+    navigation,
+  ]);
 
   if (showSplash) return <SplashScreen onAnimationEnd={handleSplashEnd} />;
 

src/app/Schedule/SchedulePage.tsx

@@ -79,7 +79,7 @@ export default function SchedulePage({ currentShow }: SchedulePageProps) {
     }
   }, [scheduleService]);
 
-  const handleShowPress = async (show: ScheduleShow) => {
+  const handleShowPress = async (scheduleShow: ScheduleShow) => {
     try {
       // Fetch archives for this show from the recently played service
       const recentlyPlayedService = RecentlyPlayedService.getInstance();
@@ -88,19 +88,18 @@ export default function SchedulePage({ currentShow }: SchedulePageProps) {
       await recentlyPlayedService.fetchShowsCacheOnly();
 
       // find the show from the cache
-      const showWithArchiveData = recentlyPlayedService.getShowByName(
-        show.name,
-      );
+      const show = recentlyPlayedService.getShowByName(scheduleShow.name);
 
-      if (showWithArchiveData && showWithArchiveData.archives.length > 0) {
+      if (show && show.archives.length > 0) {
         navigation.navigate('ShowDetails' as WmbrRouteName, {
-          show: showWithArchiveData,
+          show,
+          scheduleShow,
         });
       } else {
         // If no archives found, show info message
         Alert.alert(
-          show.name,
-          `No archived episodes found for "${show.name}". This show may not have been archived yet or may use a different name in the archive system.`,
+          scheduleShow.name,
+          `No archived episodes found for "${scheduleShow.name}". This show may not have been archived yet or may use a different name in the archive system.`,
           [{ text: 'OK' }],
         );
       }

src/app/Schedule/ShowDetailsPage.tsx

@@ -54,13 +54,15 @@ import {
   generateDarkGradientColors,
   generateGradientColors,
 } from '@utils/GradientColors';
+import { ScheduleShow } from '@customTypes/Schedule';
 
 const { width } = Dimensions.get('window');
 const CIRCLE_DIAMETER = 16;
 
 // Route params for ShowDetailsPage
 export type ShowDetailsPageRouteParams = {
   show: Show;
+  scheduleShow?: ScheduleShow;
 };
 
 export default function ShowDetailsPage() {
@@ -69,7 +71,7 @@ export default function ShowDetailsPage() {
 
   const route =
     useRoute<RouteProp<Record<string, ShowDetailsPageRouteParams>, string>>();
-  const show: Show = route.params!.show;
+  const { show, scheduleShow } = route.params;
 
   const headerHeight = useHeaderHeight();
 
@@ -306,9 +308,16 @@ export default function ShowDetailsPage() {
             {/* Show Info */}
             <View style={styles.infoSection}>
               <Text style={styles.showTitle}>{show.name}</Text>
-              <Text style={styles.showSchedule}>{formatShowTime(show)}</Text>
-              {show.hosts && (
-                <Text style={styles.showHosts}>Hosted by {show.hosts}</Text>
+              <View>
+                <Text style={styles.showSchedule}>{formatShowTime(show)}</Text>
+                {show.hosts && (
+                  <Text style={styles.showHosts}>Hosted by {show.hosts}</Text>
+                )}
+              </View>
+              {scheduleShow?.description && (
+                <Text style={styles.showDescription}>
+                  {scheduleShow.description}
+                </Text>
               )}
               <Text style={styles.archiveCount}>
                 {archives.length} archived episode
@@ -473,27 +482,29 @@ const styles = StyleSheet.create({
   infoSection: {
     paddingHorizontal: 20,
     paddingBottom: 30,
+    flexDirection: 'column',
+    rowGap: 8,
   },
   showTitle: {
     color: COLORS.TEXT.PRIMARY,
     fontSize: 32,
     fontWeight: 'bold',
-    marginBottom: 8,
   },
   showSchedule: {
-    color: COLORS.TEXT.SECONDARY,
-    fontSize: 16,
-    marginBottom: 4,
+    color: COLORS.TEXT.TERTIARY,
+    fontSize: 14,
   },
   showHosts: {
-    color: COLORS.TEXT.SECONDARY,
+    color: COLORS.TEXT.TERTIARY,
+    fontSize: 14,
+  },
+  showDescription: {
+    color: COLORS.TEXT.PRIMARY,
     fontSize: 16,
-    marginBottom: 8,
   },
   archiveCount: {
-    color: COLORS.TEXT.SECONDARY,
+    color: COLORS.TEXT.TERTIARY,
     fontSize: 14,
-    fontWeight: '500',
   },
   archivesSection: {
     paddingHorizontal: 20,

src/services/ScheduleService.ts

@@ -192,6 +192,19 @@ export class ScheduleService {
     return weeksSince % 2 === 0;
   }
 
+  async getShowById(showId: string): Promise<ScheduleShow | undefined> {
+    try {
+      const scheduleData = await this.fetchSchedule();
+
+      const matchingShow = scheduleData.shows.find(show => show.id === showId);
+
+      return matchingShow;
+    } catch (error) {
+      debugError('Error getting show by ID:', error);
+      return;
+    }
+  }
+
   // Helper method to find the previous show based on current time
   async findPreviousShow(
     currentShowName: string,