Feat/mobile app

.gitignore

@@ -1,7 +1,7 @@
 target
 *.db
 .idea
-podcasts
+/podcasts
 static/*
 .env
 *.iml

mobile/.gitignore

@@ -0,0 +1,41 @@
+# Learn more https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files
+
+# dependencies
+node_modules/
+
+# Expo
+.expo/
+dist/
+web-build/
+expo-env.d.ts
+
+# Native
+*.orig.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+
+# Metro
+.metro-health-check*
+
+# debug
+npm-debug.*
+yarn-debug.*
+yarn-error.*
+
+# macOS
+.DS_Store
+*.pem
+
+# local env files
+.env*.local
+
+# typescript
+*.tsbuildinfo
+
+app-example
+.expo
+.idea
+android

mobile/README.md

@@ -0,0 +1,50 @@
+# Welcome to your Expo app 👋
+
+This is an [Expo](https://expo.dev) project created with [`create-expo-app`](https://www.npmjs.com/package/create-expo-app).
+
+## Get started
+
+1. Install dependencies
+
+   ```bash
+   npm install
+   ```
+
+2. Start the app
+
+   ```bash
+    npx expo start
+   ```
+
+In the output, you'll find options to open the app in a
+
+- [development build](https://docs.expo.dev/develop/development-builds/introduction/)
+- [Android emulator](https://docs.expo.dev/workflow/android-studio-emulator/)
+- [iOS simulator](https://docs.expo.dev/workflow/ios-simulator/)
+- [Expo Go](https://expo.dev/go), a limited sandbox for trying out app development with Expo
+
+You can start developing by editing the files inside the **app** directory. This project uses [file-based routing](https://docs.expo.dev/router/introduction).
+
+## Get a fresh project
+
+When you're ready, run:
+
+```bash
+npm run reset-project
+```
+
+This command will move the starter code to the **app-example** directory and create a blank **app** directory where you can start developing.
+
+## Learn more
+
+To learn more about developing your project with Expo, look at the following resources:
+
+- [Expo documentation](https://docs.expo.dev/): Learn fundamentals, or go into advanced topics with our [guides](https://docs.expo.dev/guides).
+- [Learn Expo tutorial](https://docs.expo.dev/tutorial/introduction/): Follow a step-by-step tutorial where you'll create a project that runs on Android, iOS, and the web.
+
+## Join the community
+
+Join our community of developers creating universal apps.
+
+- [Expo on GitHub](https://github.com/expo/expo): View our open source platform and contribute.
+- [Discord community](https://chat.expo.dev): Chat with Expo users and ask questions.

mobile/app.json

@@ -0,0 +1,52 @@
+{
+  "expo": {
+    "name": "podfetch-mobile",
+    "slug": "podfetch-mobile",
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/images/icon.png",
+    "scheme": "myapp",
+    "userInterfaceStyle": "automatic",
+    "newArchEnabled": true,
+    "ios": {
+      "supportsTablet": true
+    },
+    "android": {
+      "adaptiveIcon": {
+        "foregroundImage": "./assets/images/adaptive-icon.png",
+        "backgroundColor": "#ffffff"
+      },
+      "permissions": [
+        "android.permission.RECORD_AUDIO",
+        "android.permission.MODIFY_AUDIO_SETTINGS",
+        "android.permission.RECORD_AUDIO",
+        "android.permission.MODIFY_AUDIO_SETTINGS"
+      ],
+      "package": "com.samtv1998.podfetchmobile"
+    },
+    "web": {
+      "bundler": "metro",
+      "output": "static",
+      "favicon": "./assets/images/favicon.png"
+    },
+    "plugins": [
+      "expo-router",
+      [
+        "expo-splash-screen",
+        {
+          "image": "./assets/images/splash-icon.png",
+          "imageWidth": 200,
+          "resizeMode": "contain",
+          "backgroundColor": "#ffffff"
+        }
+      ],
+      "expo-localization",
+      "expo-audio",
+      "expo-sqlite"
+    ],
+    "experiments": {
+      "typedRoutes": true,
+      "tsconfigPaths": true
+    }
+  }
+}

mobile/app/(tabs)/_layout.tsx

@@ -0,0 +1,50 @@
+import { Tabs, TabList, TabTrigger, TabSlot } from 'expo-router/ui';
+import {Text, useColorScheme, View} from "react-native";
+import {useTranslation} from "react-i18next";
+import {styles} from "@/styles/styles";
+import {IconSymbol} from "@/components/ui/IconSymbol";
+import {ThemedText} from "@/components/ThemedText";
+import {usePathname} from "expo-router";
+import {AudioPlayer} from "@/components/AudioPlayer";
+
+
+export default function TabLayout() {
+    const colorScheme = useColorScheme();
+    const {t} = useTranslation()
+    const pathname = usePathname();
+
+
+    return (
+      <Tabs>
+          <TabSlot />
+          <AudioPlayer/>
+          <TabList style={{
+              backgroundColor: styles.darkColor,
+              width: '90%',
+              marginLeft: 'auto',
+              marginRight: 'auto',
+              bottom: '3%',
+              paddingBottom: 10,
+              paddingTop: 10,
+              paddingLeft: 20,
+              paddingRight: 20,
+              borderStyle: undefined,
+              borderBottomLeftRadius: 10,
+              borderBottomRightRadius: 10,
+          }}>
+              <TabTrigger name="home" href="/(tabs)" style={{flexDirection: 'column', display: 'flex'}}>
+                  <IconSymbol size={20} name={"house.fill"} color={ pathname == "/"? styles.accentColor: 'white'} style={{alignSelf: 'center',}} />
+                  <ThemedText style={{color: pathname == "/"? styles.accentColor: 'white', fontSize: 15, marginTop: 'auto',  marginLeft: 'auto', marginBottom: 'auto'}}>{t('home')}</ThemedText>
+              </TabTrigger>
+              <TabTrigger name="search" href="/(tabs)/search"  style={{flexDirection: 'column', display: 'flex'}}>
+                  <IconSymbol size={20} name={"magnifyingglass.circle"} color={ pathname == "/search"? styles.accentColor: 'white'}  style={{alignSelf: 'center'}} />
+                  <ThemedText style={{color: pathname == "/search"? styles.accentColor: 'white', fontSize: 15, marginTop: 'auto',  marginLeft: 'auto', marginBottom: 'auto'}}>{t('search')}</ThemedText>
+              </TabTrigger>
+              <TabTrigger name="library" href="/(tabs)/library"  style={{flexDirection: 'column', display: 'flex'}}>
+                  <IconSymbol size={20} name={"bookmark.fill"} color={ pathname == "/library"? styles.accentColor: 'white'}  style={{alignSelf: 'center'}} />
+                  <ThemedText style={{color: pathname == "/library"? styles.accentColor: 'white', fontSize: 15, marginTop: 'auto',  marginLeft: 'auto', marginBottom: 'auto'}}>{t('library')}</ThemedText>
+              </TabTrigger>
+          </TabList>
+      </Tabs>
+  );
+}

mobile/app/(tabs)/index.tsx

@@ -0,0 +1,74 @@
+import {ThemedView} from '@/components/ThemedView';
+import {SafeAreaView} from "react-native-safe-area-context";
+import {styles} from "@/styles/styles";
+import Heading1 from "@/components/text/Heading1";
+import {$api} from "@/client";
+import {useTranslation} from "react-i18next";
+import {ScrollView, View} from "react-native";
+import Heading2 from "@/components/text/Heading2";
+import {LoadingSkeleton} from "@/components/ui/LoadingSkeleton";
+import {PodcastCard} from "@/components/PodcastCard";
+import {PodcastEpisodeCard} from "@/components/PodcastEpisodeCard";
+
+const HomeScreen = () => {
+    const {data, isLoading} = $api.useQuery('get', '/api/v1/podcasts')
+    const lastWatchedData = $api.useQuery('get', '/api/v1/podcasts/episode/lastwatched')
+    const {t} = useTranslation()
+
+    return (
+        <SafeAreaView>
+            <ThemedView style={{
+                backgroundColor: styles.lightDarkColor,
+                paddingTop: 20,
+                paddingLeft: 10,
+                paddingRight: 10
+            }}>
+                <Heading1>{t('home')}</Heading1>
+
+                <Heading2>{t('last-listened')}</Heading2>
+                <ScrollView horizontal={true} style={{paddingBottom: 20, display: 'flex', gap: 10}}
+                            overScrollMode="never">
+                    {lastWatchedData.isLoading &&
+                        <>
+                            <LoadingSkeleton/>
+                            <LoadingSkeleton/>
+                            <LoadingSkeleton/>
+                            <LoadingSkeleton/>
+                            <LoadingSkeleton/>
+                            <LoadingSkeleton/>
+                        </>
+                    }
+                    <View style={{display: 'flex', gap: 10, flexDirection: 'row'}}>
+                        {
+                            lastWatchedData.data && lastWatchedData.data.map(d => {
+                                return <PodcastEpisodeCard podcastEpisode={d} key={d.id}/>
+                            })
+                        }
+                    </View>
+                </ScrollView>
+
+
+                <Heading2 more onMore={() => {
+                }}>{t('your-podcasts')}</Heading2>
+                <ScrollView horizontal={true} style={{paddingBottom: 20, display: 'flex', gap: 10}}
+                            overScrollMode="never">
+                    {isLoading && <><LoadingSkeleton/>
+                        <LoadingSkeleton/>
+                        <LoadingSkeleton/>
+                        <LoadingSkeleton/>
+                        <LoadingSkeleton/>
+                        <LoadingSkeleton/></>}
+                    <View style={{display: 'flex', gap: 10, flexDirection: 'row'}}>
+                        {
+                            data && data.map(d => {
+                                return <PodcastCard podcast={d} key={d.id}/>
+                            })
+                        }
+                    </View>
+                </ScrollView>
+            </ThemedView>
+        </SafeAreaView>
+    );
+}
+
+export default HomeScreen;

mobile/app/(tabs)/library.tsx

@@ -0,0 +1,30 @@
+import {Image, StyleSheet, View} from "react-native";
+
+
+const styles = StyleSheet.create({
+    titleContainer: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 8,
+    },
+    stepContainer: {
+        gap: 8,
+        marginBottom: 8,
+    },
+    reactLogo: {
+        height: 178,
+        width: 290,
+        bottom: 0,
+        left: 0,
+        position: 'absolute',
+    },
+});
+
+
+const Library = ()=> {
+    return <View>
+
+    </View>
+}
+
+export default Library

mobile/app/(tabs)/search.tsx

@@ -0,0 +1,12 @@
+import { StyleSheet } from 'react-native';
+
+import { ThemedText } from '@/components/ThemedText';
+import { ThemedView } from '@/components/ThemedView';
+
+export default function TabTwoScreen() {
+  return (
+    <ThemedView>
+        <ThemedText>Search</ThemedText>
+    </ThemedView>
+  );
+}

mobile/app/+not-found.tsx

@@ -0,0 +1,32 @@
+import { Link, Stack } from 'expo-router';
+import { StyleSheet } from 'react-native';
+
+import { ThemedText } from '@/components/ThemedText';
+import { ThemedView } from '@/components/ThemedView';
+
+export default function NotFoundScreen() {
+  return (
+    <>
+      <Stack.Screen options={{ title: 'Oops!' }} />
+      <ThemedView style={styles.container}>
+        <ThemedText type="title">This screen doesn't exist.</ThemedText>
+        <Link href="/" style={styles.link}>
+          <ThemedText type="link">Go to home screen!</ThemedText>
+        </Link>
+      </ThemedView>
+    </>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: 20,
+  },
+  link: {
+    marginTop: 15,
+    paddingVertical: 15,
+  },
+});