feat: major refactor of navigation

components/Chromecast.tsx

@@ -1,20 +1,24 @@
-import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
+import { BlurView } from "expo-blur";
 import React, { useEffect } from "react";
 import { View } from "react-native";
-import {
+import GoogleCast, {
   CastButton,
   useCastDevice,
   useDevices,
   useRemoteMediaClient,
 } from "react-native-google-cast";
-import GoogleCast from "react-native-google-cast";
 
 type Props = {
   width?: number;
   height?: number;
+  background?: "blur" | "transparent";
 };
 
-export const Chromecast: React.FC<Props> = ({ width = 48, height = 48 }) => {
+export const Chromecast: React.FC<Props> = ({
+  width = 48,
+  height = 48,
+  background = "transparent",
+}) => {
   const client = useRemoteMediaClient();
   const castDevice = useCastDevice();
   const devices = useDevices();
@@ -31,9 +35,19 @@ export const Chromecast: React.FC<Props> = ({ width = 48, height = 48 }) => {
     })();
   }, [client, devices, castDevice, sessionManager, discoveryManager]);
 
+  if (background === "transparent")
+    return (
+      <View className=" rounded h-10 aspect-square flex items-center justify-center">
+        <CastButton style={{ tintColor: "white", height, width }} />
+      </View>
+    );
+
   return (
-    <View className="rounded h-10 aspect-square flex items-center justify-center">
+    <BlurView
+      intensity={100}
+      className="rounded-full overflow-hidden h-10 aspect-square flex items-center justify-center"
+    >
       <CastButton style={{ tintColor: "white", height, width }} />
-    </View>
+    </BlurView>
   );
 };

components/ParallaxPage.tsx

@@ -33,14 +33,14 @@ export const ParallaxScrollView: React.FC<Props> = ({
           translateY: interpolate(
             scrollOffset.value,
             [-HEADER_HEIGHT, 0, HEADER_HEIGHT],
-            [-HEADER_HEIGHT / 2, 0, HEADER_HEIGHT * 0.75],
+            [-HEADER_HEIGHT / 2, 0, HEADER_HEIGHT * 0.75]
           ),
         },
         {
           scale: interpolate(
             scrollOffset.value,
             [-HEADER_HEIGHT, 0, HEADER_HEIGHT],
-            [2, 1, 1],
+            [2, 1, 1]
           ),
         },
       ],
@@ -58,30 +58,6 @@ export const ParallaxScrollView: React.FC<Props> = ({
         ref={scrollRef}
         scrollEventThrottle={16}
       >
-        <TouchableOpacity
-          onPress={() => router.back()}
-          className="absolute left-4 z-50 bg-black rounded-full p-2 border border-neutral-900"
-          style={{
-            top: inset.top + 17,
-          }}
-        >
-          <Ionicons
-            className="drop-shadow-2xl"
-            name="arrow-back"
-            size={24}
-            color="#077DF2"
-          />
-        </TouchableOpacity>
-
-        <View
-          className="absolute right-4 z-50 bg-black rounded-full p-0.5"
-          style={{
-            top: inset.top + 17,
-          }}
-        >
-          <Chromecast width={22} height={22} />
-        </View>
-
         {logo && (
           <View className="absolute top-[250px] h-[130px] left-0 w-full z-40 px-4 flex justify-center items-center">
             {logo}

components/common/HeaderBackButton.tsx

@@ -0,0 +1,59 @@
+import {
+  TouchableOpacity,
+  TouchableOpacityProps,
+  View,
+  ViewProps,
+} from "react-native";
+import { Text } from "@/components/common/Text";
+import { useRouter } from "expo-router";
+import { Ionicons } from "@expo/vector-icons";
+import { BlurView, BlurViewProps } from "expo-blur";
+
+interface Props extends BlurViewProps {
+  background?: "blur" | "transparent";
+  touchableOpacityProps?: TouchableOpacityProps;
+}
+
+export const HeaderBackButton: React.FC<Props> = ({
+  background = "transparent",
+  touchableOpacityProps,
+  ...props
+}) => {
+  const router = useRouter();
+
+  if (background === "transparent")
+    return (
+      <BlurView
+        {...props}
+        intensity={100}
+        className="overflow-hidden rounded-full p-2"
+      >
+        <TouchableOpacity
+          onPress={() => router.back()}
+          {...touchableOpacityProps}
+        >
+          <Ionicons
+            className="drop-shadow-2xl"
+            name="arrow-back"
+            size={24}
+            color="#077DF2"
+          />
+        </TouchableOpacity>
+      </BlurView>
+    );
+
+  return (
+    <TouchableOpacity
+      onPress={() => router.back()}
+      className=" bg-black rounded-full p-2 border border-neutral-900"
+      {...touchableOpacityProps}
+    >
+      <Ionicons
+        className="drop-shadow-2xl"
+        name="arrow-back"
+        size={24}
+        color="#077DF2"
+      />
+    </TouchableOpacity>
+  );
+};

components/common/TouchableItemRouter.tsx

@@ -1,14 +1,8 @@
-import {
-  TouchableOpacity,
-  TouchableOpacityProps,
-  View,
-  ViewProps,
-} from "react-native";
-import { Text } from "@/components/common/Text";
 import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
-import { PropsWithChildren } from "react";
-import { useRouter } from "expo-router";
 import * as Haptics from "expo-haptics";
+import { useRouter, useSegments } from "expo-router";
+import { PropsWithChildren } from "react";
+import { Alert, TouchableOpacity, TouchableOpacityProps } from "react-native";
 
 interface Props extends TouchableOpacityProps {
   item: BaseItemDto;
@@ -20,46 +14,69 @@ export const TouchableItemRouter: React.FC<PropsWithChildren<Props>> = ({
   ...props
 }) => {
   const router = useRouter();
-  return (
-    <TouchableOpacity
-      onPress={() => {
-        Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+  const segments = useSegments();
 
-        if (item.Type === "Series") {
-          router.push(`/series/${item.Id}`);
-          return;
-        }
-        if (item.Type === "Episode") {
-          router.push(`/items/${item.Id}`);
-          return;
-        }
-        if (item.Type === "MusicAlbum") {
-          router.push(`/albums/${item.Id}`);
-          return;
-        }
-        if (item.Type === "Audio") {
-          router.push(`/albums/${item.AlbumId}`);
-          return;
-        }
-        if (item.Type === "MusicArtist") {
-          router.push(`/artists/${item.Id}/page`);
-          return;
-        }
-        if (item.Type === "Person") {
-          router.push(`/actors/${item.Id}`);
-          return;
-        }
+  const from = segments[2];
 
-        if (item.Type === "BoxSet") {
-          router.push(`/collections/${item.Id}`);
-          return;
-        }
+  if (from === "(home)" || from === "(search)" || from === "(libraries)")
+    return (
+      <TouchableOpacity
+        onPress={() => {
+          console.log("[0]", item.Type);
 
-        router.push(`/items/${item.Id}`);
-      }}
-      {...props}
-    >
-      {children}
-    </TouchableOpacity>
-  );
+          Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+
+          if (item.Type === "Series") {
+            router.push(`/(auth)/(tabs)/${from}/series/${item.Id}`);
+            return;
+          }
+
+          if (item.Type === "MusicAlbum") {
+            router.push(`/(auth)/(tabs)/${from}/albums/${item.Id}`);
+            return;
+          }
+
+          if (item.Type === "Audio") {
+            router.push(`/(auth)/(tabs)/${from}/albums/${item.AlbumId}`);
+            return;
+          }
+
+          if (item.Type === "MusicArtist") {
+            router.push(`/(auth)/(tabs)/${from}/artists/${item.Id}`);
+            return;
+          }
+
+          if (item.Type === "Person") {
+            router.push(`/(auth)/(tabs)/${from}/actors/${item.Id}`);
+            return;
+          }
+
+          if (item.Type === "BoxSet") {
+            router.push(`/(auth)/(tabs)/${from}/collections/${item.Id}`);
+            return;
+          }
+
+          if (item.Type === "UserView") {
+            Alert.alert("Not implemented");
+            return;
+          }
+
+          if (item.Type === "CollectionFolder") {
+            router.push(`/(auth)/(tabs)/(libraries)/${item.Id}`);
+            return;
+          }
+
+          // Same as default
+          // if (item.Type === "Episode") {
+          //   router.push(`/items/${item.Id}`);
+          //   return;
+          // }
+
+          router.push(`/(auth)/(tabs)/${from}/items/${item.Id}`);
+        }}
+        {...props}
+      >
+        {children}
+      </TouchableOpacity>
+    );
 };

components/filters/_SortButton.tsx

@@ -1,93 +0,0 @@
-import * as DropdownMenu from "zeego/dropdown-menu";
-import { Text } from "@/components/common/Text";
-import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
-import { Ionicons } from "@expo/vector-icons";
-import { useQuery } from "@tanstack/react-query";
-import { useAtom } from "jotai";
-import { TouchableOpacity, View, ViewProps } from "react-native";
-import {
-  sortByAtom,
-  sortOptions,
-  sortOrderAtom,
-  sortOrderOptions,
-} from "@/utils/atoms/filters";
-
-interface Props extends ViewProps {
-  title: string;
-}
-
-export const SortButton: React.FC<Props> = ({ title, ...props }) => {
-  const [api] = useAtom(apiAtom);
-  const [user] = useAtom(userAtom);
-
-  const [sortBy, setSortBy] = useAtom(sortByAtom);
-  const [sortOrder, setSortOrder] = useAtom(sortOrderAtom);
-
-  return (
-    <DropdownMenu.Root>
-      <DropdownMenu.Trigger>
-        <TouchableOpacity>
-          <View
-            className={`
-            px-3 py-2 rounded-full flex flex-row items-center space-x-2 bg-neutral-900
-            `}
-            {...props}
-          >
-            <Text>Sort by</Text>
-            <Ionicons
-              name="filter"
-              size={16}
-              color="white"
-              style={{ opacity: 0.5 }}
-            />
-          </View>
-        </TouchableOpacity>
-      </DropdownMenu.Trigger>
-      <DropdownMenu.Content
-        loop={true}
-        side="bottom"
-        align="start"
-        alignOffset={0}
-        avoidCollisions={true}
-        collisionPadding={8}
-        sideOffset={8}
-      >
-        {sortOptions?.map((g) => (
-          <DropdownMenu.CheckboxItem
-            value={sortBy.key === g.key ? "on" : "off"}
-            onValueChange={(next, previous) => {
-              if (next === "on") {
-                setSortBy(g);
-              } else {
-                setSortBy(sortOptions[0]);
-              }
-            }}
-            key={g.key}
-            textValue={g.value}
-          >
-            <DropdownMenu.ItemIndicator />
-          </DropdownMenu.CheckboxItem>
-        ))}
-        <DropdownMenu.Separator />
-        <DropdownMenu.Group>
-          {sortOrderOptions.map((g) => (
-            <DropdownMenu.CheckboxItem
-              value={sortOrder.key === g.key ? "on" : "off"}
-              onValueChange={(next, previous) => {
-                if (next === "on") {
-                  setSortOrder(g);
-                } else {
-                  setSortOrder(sortOrderOptions[0]);
-                }
-              }}
-              key={g.key}
-              textValue={g.value}
-            >
-              <DropdownMenu.ItemIndicator />
-            </DropdownMenu.CheckboxItem>
-          ))}
-        </DropdownMenu.Group>
-      </DropdownMenu.Content>
-    </DropdownMenu.Root>
-  );
-};

components/series/NextEpisodeButton.tsx

@@ -90,7 +90,7 @@ export const NextEpisodeButton: React.FC<Props> = ({
 
   return (
     <Button
-      onPress={() => router.replace(`/items/${nextEpisode?.Id}`)}
+      onPress={() => router.push(`/items/${nextEpisode?.Id}`)}
       className={`h-12 aspect-square`}
       disabled={disabled}
       {...props}

components/stacks/NestedTabPageStack.tsx

@@ -0,0 +1,26 @@
+import { Stack } from "expo-router";
+import { Chromecast } from "../Chromecast";
+import { HeaderBackButton } from "../common/HeaderBackButton";
+
+const commonScreenOptions = {
+  title: "",
+  headerShown: true,
+  headerTransparent: true,
+  headerShadowVisible: false,
+  headerLeft: () => <HeaderBackButton />,
+  headerRight: () => <Chromecast background="blur" width={22} height={22} />,
+};
+
+const routes = [
+  "actors/[actorId]",
+  "albums/[albumId]",
+  "artists/index",
+  "artists/[artistId]",
+  "collections/[collectionId]",
+  "items/[id]",
+  "songs/[songId]",
+  "series/[id]",
+];
+
+export const nestedTabPageScreenOptions: { [key: string]: any } =
+  Object.fromEntries(routes.map((route) => [route, commonScreenOptions]));