diff --git a/app/(auth)/(tabs)/(home)/_layout.tsx b/app/(auth)/(tabs)/(home)/_layout.tsx index 98ee5c0d..6a1d95ca 100644 --- a/app/(auth)/(tabs)/(home)/_layout.tsx +++ b/app/(auth)/(tabs)/(home)/_layout.tsx @@ -83,6 +83,14 @@ export default function IndexLayout() { title: "", }} /> + {Object.entries(nestedTabPageScreenOptions).map(([name, options]) => ( ))} diff --git a/app/(auth)/(tabs)/(home)/index.tsx b/app/(auth)/(tabs)/(home)/index.tsx index 4c585949..95cfd856 100644 --- a/app/(auth)/(tabs)/(home)/index.tsx +++ b/app/(auth)/(tabs)/(home)/index.tsx @@ -23,7 +23,7 @@ import { getUserViewsApi, } from "@jellyfin/sdk/lib/utils/api"; import NetInfo from "@react-native-community/netinfo"; -import { QueryFunction, useQuery, useQueryClient } from "@tanstack/react-query"; +import { QueryFunction, useQuery } from "@tanstack/react-query"; import { useNavigation, useRouter } from "expo-router"; import { useAtomValue } from "jotai"; import { useCallback, useEffect, useMemo, useState } from "react"; diff --git a/app/(auth)/(tabs)/(home)/intro/page.tsx b/app/(auth)/(tabs)/(home)/intro/page.tsx new file mode 100644 index 00000000..9dbf5dc3 --- /dev/null +++ b/app/(auth)/(tabs)/(home)/intro/page.tsx @@ -0,0 +1,110 @@ +import { Button } from "@/components/Button"; +import { Text } from "@/components/common/Text"; +import { storage } from "@/utils/mmkv"; +import { Feather, Ionicons } from "@expo/vector-icons"; +import { Image } from "expo-image"; +import { useFocusEffect, useRouter } from "expo-router"; +import { useCallback } from "react"; +import { TouchableOpacity, View } from "react-native"; + +export default function page() { + const router = useRouter(); + + useFocusEffect( + useCallback(() => { + storage.set("hasShownIntro", true); + }, []) + ); + + return ( + + + + Welcome to Streamyfin + + + A free and open source client for Jellyfin. + + + + + Features + + Streamyfin has a bunch of features and integrates with a + wide array of software which you can find in the settings menu, these + include: + + + + + Jellyseerr + + Connect to your Jellyseerr instance and request movies directly in + the app. + + + + + + + + + Downloads + + Download movies and tv-shows to view offline. Use either the + default method or install the optimize server to download files in + the background. + + + + + + + + + Chromecast + + Cast movies and tv-shows to your Chromecast devices. + + + + + + + { + router.back(); + router.push("/settings"); + }} + className="mt-4" + > + Go to settings + + + ); +} diff --git a/app/(auth)/(tabs)/(home)/settings.tsx b/app/(auth)/(tabs)/(home)/settings.tsx index 559611a8..576ed3fa 100644 --- a/app/(auth)/(tabs)/(home)/settings.tsx +++ b/app/(auth)/(tabs)/(home)/settings.tsx @@ -18,6 +18,7 @@ import { useNavigation, useRouter } from "expo-router"; import { useEffect } from "react"; import { ScrollView, TouchableOpacity, View } from "react-native"; import { useSafeAreaInsets } from "react-native-safe-area-context"; +import { storage } from "@/utils/mmkv"; export default function settings() { const router = useRouter(); @@ -67,6 +68,15 @@ export default function settings() { + + { + router.push("/intro/page"); + }} + title={"Show intro"} + /> + + { + const hasShownIntro = storage.getBoolean("hasShownIntro"); + if (hasShownIntro === false && !hasNavigated.current) { + const timer = setTimeout(() => { + hasNavigated.current = true; + router.push("/intro/page"); + storage.set("hasShownIntro", true); + }, 1000); + + return () => { + clearTimeout(timer); + }; + } + }, []) + ); + return ( <>