Merge branch 'develop' into chore/normalize-colors

* develop:
  feat: add show description to show detail page (#152) (#153)
  fix: html decode show hosts on home (#147) (#148)

Author: jsit

__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 () => {

package-lock.json

@@ -18,6 +18,7 @@
     "@react-navigation/bottom-tabs": "^7.4.9",
     "@react-navigation/native": "^7.1.18",
     "@react-navigation/native-stack": "^7.3.28",
+    "he": "^1.2.0",
     "react": "19.1.0",
     "react-native": "0.80.1",
     "react-native-gesture-handler": "^2.28.0",
@@ -43,6 +44,7 @@
     "@react-native/metro-config": "0.80.1",
     "@react-native/typescript-config": "0.80.1",
     "@testing-library/react-native": "^13.3.0",
+    "@types/he": "^1.2.3",
     "@types/jest": "^29.5.13",
     "@types/react": "^19.1.0",
     "@types/react-native-vector-icons": "^6.4.18",

package.json

@@ -1,4 +1,5 @@
 import React, { useEffect, useState, useMemo, useCallback } from 'react';
+import he from 'he';
 import { debugError } from '@utils/Debug';
 import {
   View,
@@ -35,6 +36,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 +58,8 @@ export default function HomeScreen() {
     liveStreamUrl: streamUrl,
   });
 
+  const scheduleService = ScheduleService.getInstance();
+
   const isPlaying = playbackState?.state === State.Playing;
 
   const navigation =
@@ -99,7 +103,7 @@ export default function HomeScreen() {
     const unsubscribeMetadata = metadataService.subscribe((data: ShowInfo) => {
       setShowInfo(data);
       setCurrentShow(data.showTitle);
-      setHosts(data.hosts);
+      setHosts(he.decode(data.hosts || ''));
       setShowDescription(data.description);
 
       try {
@@ -240,25 +244,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/Home/index.tsx

@@ -99,25 +99,24 @@ export default function SchedulePage() {
     }
   }, [scheduleService]);
 
-  const handleShowPress = async (show: ScheduleShow) => {
+  const handleShowPress = async (scheduleShow: ScheduleShow) => {
     try {
       // fetch show cache (xml only)
       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/SchedulePage.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();
 
@@ -303,9 +305,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
@@ -470,27 +479,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/app/Schedule/ShowDetailsPage.tsx

@@ -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,