Updated series image source (#381)

* Updated series image source * Fix conflict
themeetinghouse · May 31, 2023 · d33ecf6 · d33ecf6
1 parent a685bbe
commit d33ecf6
Show file tree

Hide file tree

Showing 10 changed files with 602 additions and 883 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -46,7 +46,7 @@
     "axios": "^0.21.1",
     "expo": "^47.0.0",
     "expo-application": "~5.0.1",
-    "expo-av": "~13.0.2",
+    "expo-av": "~13.0.3",
     "expo-calendar": "~11.0.1",
     "expo-clipboard": "~4.0.1",
     "expo-constants": "~14.0.2",
@@ -68,7 +68,7 @@
     "nanoid": "^3.1.12",
     "react": "18.1.0",
     "react-dom": "18.1.0",
-    "react-native": "0.70.5",
+    "react-native": "0.70.8",
     "react-native-expo-cached-image": "^1.3.1",
     "react-native-gesture-handler": "~2.8.0",
     "react-native-keyboard-aware-scroll-view": "^0.9.2",

diff --git a/src/components/home/RecentTeaching.tsx b/src/components/home/RecentTeaching.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import {
   Image,
   StyleSheet,
@@ -12,6 +12,7 @@ import moment from 'moment';
 import { useNavigation } from '@react-navigation/native';
 import { StackNavigationProp } from '@react-navigation/stack';
 import { TouchableHighlight } from 'react-native-gesture-handler';
+import SeriesService from '../../services/SeriesService';
 import { Theme, Style } from '../../Theme.style';
 import IconButton from '../buttons/IconButton';
 import { GetNotesQuery } from '../../services/API';
@@ -77,15 +78,27 @@ interface Props {
 export default function RecentTeaching({ note, teaching }: Props): JSX.Element {
   const navigation = useNavigation<StackNavigationProp<MainStackParamList>>();
   const [fullDescription, setFullDescription] = useState(false);
-
+  const [seriesImageUri, setSeriesImageUri] = useState('');
+  useEffect(() => {
+    (async () => {
+      try {
+        const seriesID = teaching?.series?.id ?? note?.seriesId ?? '';
+        console.log({ seriesID });
+        if (!seriesID) return;
+        const loadSeries = await SeriesService.loadSeriesById(seriesID);
+        console.log({ loadSeriesForRecentTeaching: loadSeries });
+        if (loadSeries) {
+          setSeriesImageUri(loadSeries.bannerImage?.src ?? '');
+        }
+      } catch (error) {
+        console.error({ error });
+      }
+    })();
+  }, [note?.seriesId, teaching?.series?.id]);
   if (
     teaching &&
     moment(teaching.publishedDate).isSameOrAfter(moment(note?.id))
   ) {
-    const seriesImageUri = `https://themeetinghouse.com/static/photos/series/adult-sunday-${teaching?.series?.title?.replace(
-      '?',
-      ''
-    )}.jpg`;
     const teachingImage =
       teaching?.Youtube?.snippet?.thumbnails?.standard ??
       teaching?.Youtube?.snippet?.thumbnails?.high ??
@@ -201,10 +214,6 @@ export default function RecentTeaching({ note, teaching }: Props): JSX.Element {
     );
   }
   if (note) {
-    const seriesImageUri = `https://themeetinghouse.com/static/photos/series/adult-sunday-${note?.seriesId.replace(
-      '?',
-      ''
-    )}.jpg`;
     const openNotes = () => {
       navigation.navigate('NotesScreen', { date: note.id });
     };

diff --git a/src/components/teaching/SeriesItem.tsx b/src/components/teaching/SeriesItem.tsx
@@ -1,14 +1,17 @@
 import React from 'react';
 import { StyleSheet, TouchableOpacity, Dimensions, Text } from 'react-native';
 import { StackNavigationProp } from '@react-navigation/stack';
+import { useNavigation } from '@react-navigation/native';
+import { SeriesDataWithHeroImage } from 'src/services/SeriesService';
 import { Theme } from '../../Theme.style';
 import { TeachingStackParamList } from '../../navigation/MainTabNavigator';
 import useDebounce from '../../../src/hooks/useDebounce';
 import CachedImage from '../CachedImage';
+import { Series } from '../../services/API';
 
 const { width } = Dimensions.get('screen');
 
-const style = StyleSheet.create({
+export const SeriesStyle = StyleSheet.create({
   container: {
     marginTop: 6,
     padding: 15,
@@ -34,46 +37,46 @@ const style = StyleSheet.create({
   },
 });
 interface Params {
-  navigation: StackNavigationProp<TeachingStackParamList, 'AllSeriesScreen'>;
-  seriesData: any;
+  series: Series | SeriesDataWithHeroImage;
   year?: string;
   customPlaylist?: boolean;
 }
 export default function SeriesItem({
-  navigation,
-  seriesData,
+  series,
   year,
   customPlaylist,
 }: Params): JSX.Element {
   const { debounce } = useDebounce();
+  const navigation =
+    useNavigation<StackNavigationProp<TeachingStackParamList>>();
   return (
     <TouchableOpacity
       accessibilityRole="button"
-      accessibilityLabel={`Navigate to ${seriesData.title} series screen ${seriesData.videos.items.length} episodes`}
+      accessibilityLabel={`Navigate to ${series.title} series screen ${series.videos?.items.length} episodes`}
       onPress={() =>
         debounce(() =>
           navigation.push('SeriesLandingScreen', {
-            item: seriesData,
-            seriesId: seriesData.id,
+            item: series,
+            seriesId: series.id,
             customPlaylist,
           })
         )
       }
-      style={style.seriesItem}
+      style={SeriesStyle.seriesItem}
     >
       <CachedImage
-        cacheKey={encodeURI(seriesData.image)}
-        style={style.seriesThumbnail}
-        url={encodeURI(seriesData.image)}
+        cacheKey={encodeURI(series.bannerImage?.src ?? '')}
+        style={SeriesStyle.seriesThumbnail}
+        url={encodeURI(series.bannerImage?.src ?? '')}
         fallbackUrl="https://www.themeetinghouse.com/static/photos/series/series-fallback-app.jpg"
       />
       {year && !customPlaylist ? (
-        <Text style={style.seriesDetail}>
-          {year} &bull; {seriesData.videos.items.length} episodes
+        <Text style={SeriesStyle.seriesDetail}>
+          {year} &bull; {series.videos?.items.length} episodes
         </Text>
       ) : (
-        <Text style={style.seriesDetail}>
-          {seriesData.videos.items.length} episodes
+        <Text style={SeriesStyle.seriesDetail}>
+          {series.videos?.items.length} episodes
         </Text>
       )}
     </TouchableOpacity>

diff --git a/src/graphql/queries.ts b/src/graphql/queries.ts
@@ -358,6 +358,14 @@ export const getSeries = `
     getSeries(id: $id) {
       id
       seriesType
+      bannerImage {
+        src
+        alt
+      }
+      babyHeroImage { 
+        src
+        alt
+      }
       title
       description
       image

diff --git a/src/screens/teaching/AllSeriesScreen.tsx b/src/screens/teaching/AllSeriesScreen.tsx
@@ -1,4 +1,9 @@
-import React, { useState, useEffect, useLayoutEffect } from 'react';
+import React, {
+  useState,
+  useEffect,
+  useLayoutEffect,
+  useCallback,
+} from 'react';
 import moment from 'moment';
 import {
   StyleSheet,
@@ -13,6 +18,7 @@ import {
 import { StackNavigationProp } from '@react-navigation/stack';
 import { TouchableHighlight } from 'react-native-gesture-handler';
 import { RouteProp } from '@react-navigation/native';
+import { Series } from '../../services/API';
 import { Theme, Style, HeaderStyle } from '../../Theme.style';
 import SearchBar from '../../components/SearchBar';
 import SeriesService from '../../services/SeriesService';
@@ -93,7 +99,7 @@ export default function AllSeriesScreen({
   const [showCount, setShowCount] = useState(20);
   const [allSeries, setAllSeries] = useState<{
     loading: boolean;
-    items: any[];
+    items: Series[];
     nextToken: string | undefined;
   }>({
     loading: true,
@@ -120,7 +126,7 @@ export default function AllSeriesScreen({
           allSeries.nextToken
         );
         setAllSeries({
-          items: response.items ?? [],
+          items: (response.items as Series[]) ?? [],
           loading: false,
           nextToken: response.nextToken ?? undefined,
         });
@@ -155,7 +161,7 @@ export default function AllSeriesScreen({
       }
     };
     const loadPopularSeries = async () => {
-      const data: any = await SeriesService.fetchPopularSeries();
+      const data = await SeriesService.fetchPopularSeries();
       setAllSeries({ items: data, loading: false, nextToken: undefined });
     };
 
@@ -169,13 +175,13 @@ export default function AllSeriesScreen({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [route?.params?.customPlaylists]);
 
-  const getSeriesDate = (series: any) => {
+  const getSeriesDate = (series: Series) => {
     return moment(series.startDate || moment()).format('YYYY');
   };
   const series = allSeries.items
-    .filter((s: any) =>
+    .filter((s) =>
       searchText
-        ? s.title.toLowerCase().includes(searchText.toLowerCase())
+        ? s.title?.toLowerCase().includes(searchText.toLowerCase())
         : true
     )
     .filter((a) => {
@@ -184,38 +190,33 @@ export default function AllSeriesScreen({
     .filter((a) => {
       return selectedYear === 'All' || getSeriesDate(a) === selectedYear;
     });
-
-  useLayoutEffect(() => {
-    const headerRight = () => {
-      return <View style={{ flex: 1 }} />;
-    };
-    const headerLeft = () => {
-      return (
-        <TouchableOpacity
-          onPress={() => navigation.goBack()}
+  const renderHeader = useCallback(() => {
+    return (
+      <TouchableOpacity
+        onPress={() => navigation.goBack()}
+        style={{
+          display: 'flex',
+          flexDirection: 'row',
+          alignItems: 'center',
+        }}
+      >
+        <Image
+          source={Theme.icons.white.back}
+          style={{ width: 24, height: 24 }}
+        />
+        <Text
           style={{
-            display: 'flex',
-            flexDirection: 'row',
-            alignItems: 'center',
+            color: 'white',
+            fontSize: 16,
+            transform: [{ translateX: -4 }],
           }}
         >
-          <Image
-            accessibilityLabel="Go back"
-            source={Theme.icons.white.back}
-            style={{ width: 24, height: 24 }}
-          />
-          <Text
-            style={{
-              color: 'white',
-              fontSize: 16,
-              transform: [{ translateX: -8 }],
-            }}
-          >
-            Teaching
-          </Text>
-        </TouchableOpacity>
-      );
-    };
+          Teaching
+        </Text>
+      </TouchableOpacity>
+    );
+  }, [navigation]);
+  useLayoutEffect(() => {
     navigation.setOptions({
       headerShown: true,
       title: route?.params?.customPlaylists
@@ -231,12 +232,11 @@ export default function AllSeriesScreen({
         shadowOpacity: 0,
         elevation: 0,
       },
-      headerLeft: headerLeft(),
       headerLeftContainerStyle: { left: 16 },
-      headerRight: headerRight(),
+      headerLeft: renderHeader,
     });
-  }, [navigation, route]);
-
+  }, [navigation, route, renderHeader]);
+  console.log('AllSeriesScreen -> series');
   return (
     <ScrollView style={style.content}>
       {!route?.params?.popularSeries ? (
@@ -295,25 +295,23 @@ export default function AllSeriesScreen({
             <ActivityIndicator />
           </View>
         )}
-        {series.map((s: any, key: any) => {
+        {series.map((serie, key) => {
           if (key < showCount) {
             if (route?.params?.customPlaylists) {
               return (
                 <SeriesItem
-                  key={s.id}
+                  key={serie.id}
                   customPlaylist
-                  navigation={navigation}
-                  seriesData={s}
-                  year={getSeriesDate(s)}
+                  series={serie}
+                  year={getSeriesDate(serie)}
                 />
               );
             }
             return (
               <SeriesItem
-                key={s.id}
-                navigation={navigation}
-                seriesData={s}
-                year={getSeriesDate(s)}
+                key={serie.id}
+                series={serie}
+                year={getSeriesDate(serie)}
               />
             );
           }

diff --git a/src/screens/teaching/SeriesLandingScreen.tsx b/src/screens/teaching/SeriesLandingScreen.tsx
@@ -293,10 +293,7 @@ export default function SeriesLandingScreen({
           graphqlOperation(getSeries, { id: seriesId ?? series.id })
         )) as GraphQLResult<GetSeriesQuery>;
         if (!json?.data?.getSeries) return;
-        const seriesWithImage = await SeriesService.updateSeriesImage(
-          json?.data?.getSeries
-        );
-        setSeries(seriesWithImage);
+        setSeries(json?.data?.getSeries);
         setVideos(json.data?.getSeries?.videos?.items);
       } else {
         const json = (await API.graphql(
@@ -319,15 +316,17 @@ export default function SeriesLandingScreen({
       setContentFills(true);
     }
   }
-  const getTeachingImage = (teaching: any) => {
+  const getTeachingImage = (teaching: Video) => {
     const thumbnails = teaching?.Youtube?.snippet?.thumbnails;
     return (
       thumbnails?.standard?.url ??
       thumbnails?.maxres?.url ??
-      thumbnails?.high?.url
+      thumbnails?.high?.url ??
+      ''
     );
   };
-  const seriesIMG = isTablet ? series?.heroImage : series?.image640px;
+  console.log({ series });
+  const seriesIMG = series?.bannerImage?.src;
   return (
     <>
       <Animated.ScrollView
@@ -413,7 +412,7 @@ export default function SeriesLandingScreen({
                       return (
                         <TeachingListItem
                           key={seriesSermon?.id}
-                          teaching={seriesSermon as any}
+                          teaching={seriesSermon as Video}
                           handlePress={() =>
                             debounce(() =>
                               navigation.push(
@@ -466,7 +465,7 @@ export default function SeriesLandingScreen({
                 >
                   <Image
                     style={style.highlightsThumbnail}
-                    source={{ uri: getTeachingImage(item) }}
+                    source={{ uri: getTeachingImage(item as Video) }}
                   />
                 </TouchableOpacity>
               )}