Audio Info Navigation and Frontend Complete

assets/icons.tsx

@@ -20,7 +20,10 @@ export type IconType =
   | 'audio_forward'
   | 'audio_back'
   | 'dropdown'
-  | 'expand';
+  | 'expand'
+  | 'share'
+  | 'play_button_small'
+  | 'back_arrow';
 
 const IconSvgs: Record<IconType, React.ReactElement> = {
   inactive_grants_icon: (
@@ -149,9 +152,9 @@ const IconSvgs: Record<IconType, React.ReactElement> = {
   bookmark: (
     <SvgXml
       xml={`
-    <svg width="21" height="27" viewBox="0 0 21 27" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M4.04132 0.661133H16.958C19.1431 0.710541 20.8763 2.51878 20.833 4.70405V23.6657C20.8384 24.7195 20.2273 25.6791 19.2701 26.1199C18.9439 26.2617 18.5924 26.3364 18.2367 26.3395C17.6084 26.3356 17.0045 26.0959 16.5447 25.6678L10.4997 20.1653L4.45465 25.6678C3.70983 26.3324 2.64875 26.5084 1.72924 26.1199C0.772051 25.6791 0.160912 24.7195 0.16632 23.6657V4.70405C0.123045 2.51878 1.85618 0.710541 4.04132 0.661133ZM12.2177 18.254L18.2498 23.7565V4.70446C18.2869 3.94795 17.7135 3.30007 16.9581 3.24487H4.04148C3.28608 3.30007 2.71273 3.94795 2.74981 4.70446V23.6661L8.73023 18.254C9.71734 17.351 11.2306 17.351 12.2177 18.254Z" fill="#231F20"/>
-</svg>
+      <svg width="35" height="32" viewBox="0 0 35 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M10.6071 2.7688H24.3921C26.7241 2.81972 28.5738 4.68319 28.5276 6.9352V26.476C28.5333 27.562 27.8811 28.5509 26.8596 29.0051C26.5115 29.1513 26.1364 29.2283 25.7568 29.2314C25.0863 29.2274 24.4417 28.9804 23.9509 28.5392L17.4996 22.8687L11.0482 28.5392C10.2533 29.2241 9.12087 29.4055 8.13954 29.0051C7.118 28.5509 6.46578 27.562 6.47155 26.476V6.9352C6.42536 4.68319 8.27502 2.81972 10.6071 2.7688ZM19.3327 20.8987L25.7703 26.5692V6.93527C25.8099 6.15566 25.198 5.48799 24.3918 5.43111H10.6068C9.80059 5.48799 9.1887 6.15566 9.22827 6.93527V26.4761L15.6107 20.8987C16.6642 19.968 18.2792 19.968 19.3327 20.8987Z" fill="#CC502F"/>
+      </svg>
     `}
     />
   ),
@@ -177,9 +180,39 @@ const IconSvgs: Record<IconType, React.ReactElement> = {
     <SvgXml
       xml={`
       <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M12.6976 1.58667H16.6655C17.1038 1.58667 17.4591 1.94189 17.4591 2.38008V6.34711C17.4591 6.7853 17.1038 7.14052 16.6655 7.14052C16.2273 7.14052 15.872 6.7853 15.872 6.34711V4.29219L11.6739 8.49725C11.5249 8.64745 11.3221 8.73194 11.1105 8.73194C10.8989 8.73194 10.696 8.64745 10.547 8.49725C10.3968 8.34827 10.3123 8.14548 10.3123 7.93393C10.3123 7.72238 10.3968 7.51959 10.547 7.37061L14.753 3.17348H12.6976C12.2594 3.17348 11.9041 2.81826 11.9041 2.38008C11.9041 1.94189 12.2594 1.58667 12.6976 1.58667ZM8.73373 11.1073C8.73373 10.8958 8.64922 10.693 8.49899 10.544C8.34998 10.3938 8.14715 10.3093 7.93555 10.3093C7.72395 10.3093 7.52111 10.3938 7.37211 10.544L3.17407 14.7491V12.6942C3.17407 12.256 2.81877 11.9008 2.38049 11.9008C1.94221 11.9008 1.58691 12.256 1.58691 12.6942V16.6612C1.58691 17.0994 1.94221 17.4546 2.38049 17.4546H6.34839C6.78667 17.4546 7.14197 17.0994 7.14197 16.6612C7.14197 16.223 6.78667 15.8678 6.34839 15.8678H4.29302L8.49899 11.6707C8.64922 11.5217 8.73373 11.3189 8.73373 11.1073Z" fill="white"/>
-</svg>
-`}
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M12.6976 1.58667H16.6655C17.1038 1.58667 17.4591 1.94189 17.4591 2.38008V6.34711C17.4591 6.7853 17.1038 7.14052 16.6655 7.14052C16.2273 7.14052 15.872 6.7853 15.872 6.34711V4.29219L11.6739 8.49725C11.5249 8.64745 11.3221 8.73194 11.1105 8.73194C10.8989 8.73194 10.696 8.64745 10.547 8.49725C10.3968 8.34827 10.3123 8.14548 10.3123 7.93393C10.3123 7.72238 10.3968 7.51959 10.547 7.37061L14.753 3.17348H12.6976C12.2594 3.17348 11.9041 2.81826 11.9041 2.38008C11.9041 1.94189 12.2594 1.58667 12.6976 1.58667ZM8.73373 11.1073C8.73373 10.8958 8.64922 10.693 8.49899 10.544C8.34998 10.3938 8.14715 10.3093 7.93555 10.3093C7.72395 10.3093 7.52111 10.3938 7.37211 10.544L3.17407 14.7491V12.6942C3.17407 12.256 2.81877 11.9008 2.38049 11.9008C1.94221 11.9008 1.58691 12.256 1.58691 12.6942V16.6612C1.58691 17.0994 1.94221 17.4546 2.38049 17.4546H6.34839C6.78667 17.4546 7.14197 17.0994 7.14197 16.6612C7.14197 16.223 6.78667 15.8678 6.34839 15.8678H4.29302L8.49899 11.6707C8.64922 11.5217 8.73373 11.3189 8.73373 11.1073Z" fill="white"/>
+      </svg>
+      `}
+    />
+  ),
+  share: (
+    <SvgXml
+      xml={`
+      <svg width="31" height="30" viewBox="0 0 31 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M5.95703 15V25C5.95703 25.663 6.22042 26.2989 6.68926 26.7678C7.15811 27.2366 7.79399 27.5 8.45703 27.5H23.457C24.1201 27.5 24.756 27.2366 25.2248 26.7678C25.6936 26.2989 25.957 25.663 25.957 25V15" stroke="#CC502F" stroke-width="2.41667" stroke-linecap="round" stroke-linejoin="round"/>
+        <path d="M20.957 7.5L15.957 2.5L10.957 7.5" stroke="#CC502F" stroke-width="2.41667" stroke-linecap="round" stroke-linejoin="round"/>
+        <path d="M15.957 2.5V18.75" stroke="#CC502F" stroke-width="2.41667" stroke-linecap="round" stroke-linejoin="round"/>
+      </svg>
+      `}
+    />
+  ),
+  play_button_small: (
+    <SvgXml
+      xml={`
+      <svg width="49" height="48" viewBox="0 0 49 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M24.041 44C35.0867 44 44.041 35.0457 44.041 24C44.041 12.9543 35.0867 4 24.041 4C12.9953 4 4.04102 12.9543 4.04102 24C4.04102 35.0457 12.9953 44 24.041 44Z" fill="#CC502F" stroke="#CC502F" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+        <path d="M20.041 16L32.041 24L20.041 32V16Z" fill="white" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+      </svg>
+      `}
+    />
+  ),
+  back_arrow: (
+    <SvgXml
+      xml={`
+      <svg width="38" height="38" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M23.75 28.5L14.25 19L23.75 9.5" stroke="#CC502F" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+      </svg>
+    `}
     />
   ),
 };

src/components/GrantCard.tsx

@@ -6,12 +6,6 @@ import { Grant } from '../types/schema';
 import globalStyles from '../globalStyles';
 
 const styles = StyleSheet.create({
-  // centeredView: {
-  //   flex: 1,
-  //   justifyContent: 'center',
-  //   alignItems: 'center',
-  //   marginTop: 16,
-  // },
   cardContainer: {
     flexDirection: 'column',
     alignItems: 'flex-start',

src/screens/AudioInfoScreen/AudioInfo.tsx

@@ -0,0 +1,58 @@
+import { Text, View, ScrollView, SafeAreaView, Pressable } from 'react-native';
+import globalStyles from '../../globalStyles';
+import Icon from '../../../assets/icons';
+import { SearchStackScreensProps } from '../../types/navigation';
+import styles from './styles';
+
+function AudioInfoScreen({ navigation }: SearchStackScreensProps<'AudioInfo'>) {
+  return (
+    <SafeAreaView>
+      <ScrollView style={styles.container}>
+        <Pressable onPress={() => navigation.goBack()}>
+          <Icon type="back_arrow" />
+        </Pressable>
+        <Text style={[globalStyles.h2, styles.titleText]}>
+          Green Colonization, An Interview With Maja Kristine Jama
+        </Text>
+        <Text style={styles.infoFields}>September 7, 2022, 45 minutes</Text>
+        <View style={styles.iconsContainer}>
+          <View style={styles.iconSubContainer}>
+            <Icon type="share" />
+            <Icon type="bookmark" />
+          </View>
+          <Pressable
+            onPress={() => {
+              navigation.navigate('Play');
+            }}
+          >
+            <Icon type="play_button_small" />
+          </Pressable>
+        </View>
+        <Text style={styles.infoFields}>
+          <Text style={{ fontWeight: 'bold' }}>Theme: </Text>
+          Climate Change & Environment
+        </Text>
+        <Text style={styles.infoFields}>
+          <Text style={{ fontWeight: 'bold' }}>Country: </Text>
+          Sweden, Finland
+        </Text>
+        <Text style={styles.infoFields}>
+          <Text style={{ fontWeight: 'bold' }}>Format: </Text>
+          Interviews
+        </Text>
+        <Text>
+          Lorem Ipsum is simply dummy text of the printing and typesetting
+          industry. Lorem Ipsum has been the standard dummy text ever since the
+          1500s, when an unknown printer took a galley of type and scrambled it
+          to make a type specimen book. It has survived not only five centuries,
+          but also the leap into electronic typesetting, remaining essentially
+          unchanged. It was popularised in the 1960s with the release of
+          Letraset sheets containing Lorem Ipsum passages, and more recently
+          with desktop publishing software like Aldus PageMaker including
+          versions of Lorem Ipsum.
+        </Text>
+      </ScrollView>
+    </SafeAreaView>
+  );
+}
+export default AudioInfoScreen;

src/screens/AudioInfoScreen/styles.tsx

@@ -0,0 +1,29 @@
+import { StyleSheet } from 'react-native';
+import Colors from '../../styles/Colors';
+
+export default StyleSheet.create({
+  container: {
+    backgroundColor: Colors.surfaceWhite,
+    alignContent: 'space-around',
+    paddingHorizontal: 20,
+    height: '100%',
+  },
+  infoFields: {
+    marginVertical: 4,
+  },
+  titleText: {
+    fontSize: 36,
+  },
+  iconsContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    flexWrap: 'wrap',
+    paddingRight: 8,
+  },
+  iconSubContainer: {
+    justifyContent: 'space-evenly',
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+});

src/screens/AudioScreen/Audio.tsx

@@ -2,10 +2,10 @@ import { ScrollView, Text, TextInput, View } from 'react-native';
 import AudioCard from '../../components/AudioCard';
 import '../../i18n/i18n';
 import Colors from '../../styles/Colors';
-import { RootStackScreenProps } from '../../types/navigation';
+import { SearchStackScreensProps } from '../../types/navigation';
 import styles from './styles';
 
-function AudioScreen({ navigation }: RootStackScreenProps<'Audio'>) {
+function AudioScreen({ navigation }: SearchStackScreensProps<'Audio'>) {
   return (
     <View style={styles.view}>
       <TextInput
@@ -38,7 +38,7 @@ function AudioScreen({ navigation }: RootStackScreenProps<'Audio'>) {
         <AudioCard
           name="Green Colonization: An Interview With Maja Kristine Jama"
           author="Shaldon Ferris"
-          onPress={() => navigation.navigate('Play')}
+          onPress={() => navigation.navigate('AudioInfo')}
         />
         <AudioCard
           name="The Threatened Cultures of the Danube Delta"

src/screens/GrantsScreen/Grants.tsx

@@ -1,9 +1,9 @@
 import { ScrollView, Text, View } from 'react-native';
 import { useEffect, useState } from 'react';
 import GrantCard from '../../components/GrantCard';
-import ViewContainer from '../../components/ViewContainer';
-import globalStyles from '../../globalStyles';
 import styles from './styles';
+import globalStyles from '../../globalStyles';
+import ViewContainer from '../../components/ViewContainer';
 import { Grant } from '../../types/schema';
 
 import '../../i18n/i18n';
@@ -33,14 +33,11 @@ function GrantsScreen({ navigation }: GrantsStackScreensProps<'Grants'>) {
       </ViewContainer>
 
       {grants.map(grant => (
-        <View key={grant.grant_id}>
-          <GrantCard
-            grantObj={grant}
-            onPress={() =>
-              navigation.navigate('GrantInfo', { grantObj: grant })
-            }
-          />
-        </View>
+        <GrantCard
+          key={grant.grant_id}
+          grantObj={grant}
+          onPress={() => navigation.navigate('GrantInfo', { grantObj: grant })}
+        />
       ))}
     </ScrollView>
   );

src/stacks/SearchStackNavigator.tsx

@@ -2,6 +2,7 @@ import { createNativeStackNavigator } from '@react-navigation/native-stack';
 
 import AudioScreen from '../screens/AudioScreen/Audio';
 import PlayScreen from '../screens/PlayScreen/Play';
+import AudioInfoScreen from '../screens/AudioInfoScreen/AudioInfo';
 import { SearchStackParamList } from '../types/navigation';
 
 const SearchStack = createNativeStackNavigator<SearchStackParamList>();
@@ -15,6 +16,7 @@ export default function SearchStackNavigator() {
     >
       <SearchStack.Screen name="Audio" component={AudioScreen} />
       <SearchStack.Screen name="Play" component={PlayScreen} />
+      <SearchStack.Screen name="AudioInfo" component={AudioInfoScreen} />
     </SearchStack.Navigator>
   );
 }

src/types/navigation.tsx

@@ -11,6 +11,7 @@ export type RootStackParamList = {
   Audio: undefined;
   Grants: undefined;
   Play: undefined;
+  // AudioInfo: undefined;
   QueriesDemo: undefined;
 };
 
@@ -26,6 +27,7 @@ export type GrantsStackParamList = {
 export type SearchStackParamList = {
   Audio: undefined;
   Play: undefined;
+  AudioInfo: undefined;
 };
 
 export type RootStackScreenProps<T extends keyof RootStackParamList> =