wip

app/(auth)/(tabs)/(home,libraries,search)/items/page.tsx

@@ -1,13 +1,17 @@
+import { CurrentlyPlayingBar } from "@/components/CurrentlyPlayingBar";
 import { ItemContent } from "@/components/ItemContent";
-import { useLocalSearchParams } from "expo-router";
-import React, { useMemo } from "react";
+import { Stack, useLocalSearchParams } from "expo-router";
+import React from "react";
 
 const Page: React.FC = () => {
   const { id } = useLocalSearchParams() as { id: string };
 
-  const memoizedContent = useMemo(() => <ItemContent id={id} />, [id]);
-
-  return memoizedContent;
+  return (
+    <>
+      <Stack.Screen options={{ autoHideHomeIndicator: true }} />
+      <ItemContent id={id} />
+    </>
+  );
 };
 
-export default React.memo(Page);
+export default Page;

app/_layout.tsx

@@ -107,7 +107,12 @@ function Layout() {
                 <PlaybackProvider>
                   <StatusBar style="light" backgroundColor="#000" />
                   <ThemeProvider value={DarkTheme}>
-                    <Stack initialRouteName="/home">
+                    <Stack
+                      initialRouteName="/home"
+                      screenOptions={{
+                        autoHideHomeIndicator: true,
+                      }}
+                    >
                       <Stack.Screen
                         name="(auth)/(tabs)"
                         options={{

components/CurrentlyPlayingBar.tsx

@@ -3,16 +3,19 @@ import { usePlayback } from "@/providers/PlaybackProvider";
 import { getBackdropUrl } from "@/utils/jellyfin/image/getBackdropUrl";
 import { getAuthHeaders } from "@/utils/jellyfin/jellyfin";
 import { writeToLog } from "@/utils/log";
-import { runtimeTicksToMinutes, runtimeTicksToSeconds } from "@/utils/time";
+import { runtimeTicksToSeconds } from "@/utils/time";
 import { Ionicons } from "@expo/vector-icons";
-import { BlurView } from "expo-blur";
+import { Api } from "@jellyfin/sdk";
+import { getItemsApi } from "@jellyfin/sdk/lib/utils/api";
+import { useQuery } from "@tanstack/react-query";
+import { Image } from "expo-image";
 import { useRouter, useSegments } from "expo-router";
 import { useAtom } from "jotai";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import {
-  ActivityIndicator,
   Alert,
   Dimensions,
+  Platform,
   Pressable,
   TouchableOpacity,
   View,
@@ -22,19 +25,15 @@ import "react-native-gesture-handler";
 import Animated, {
   SharedValue,
   useAnimatedStyle,
-  useDerivedValue,
   useSharedValue,
   withTiming,
 } from "react-native-reanimated";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import Video from "react-native-video";
 import { Text } from "./common/Text";
-import { Loader } from "./Loader";
-import { Image } from "expo-image";
-import { Api } from "@jellyfin/sdk";
-import { useQuery } from "@tanstack/react-query";
-import { getItemsApi } from "@jellyfin/sdk/lib/utils/api";
 import { itemRouter } from "./common/TouchableItemRouter";
+import { Loader } from "./Loader";
+import * as NavigationBar from "expo-navigation-bar";
 
 export const CurrentlyPlayingBar: React.FC = () => {
   const {
@@ -344,6 +343,19 @@ export const CurrentlyPlayingBar: React.FC = () => {
     return !!nextItem;
   }, [nextItem]);
 
+  useEffect(() => {
+    if (Platform.OS === "android") {
+      if (currentlyPlaying) NavigationBar.setVisibilityAsync("hidden");
+      else NavigationBar.setVisibilityAsync("visible");
+    }
+
+    return () => {
+      if (Platform.OS === "android") {
+        NavigationBar.setVisibilityAsync("visible");
+      }
+    };
+  }, [currentlyPlaying]);
+
   if (!api || !currentlyPlaying) return null;
 
   return (
@@ -619,8 +631,8 @@ export const CurrentlyPlayingBar: React.FC = () => {
                   }
                   const { x, y, url } = trickPlayUrl;
 
-                  const tileWidth = 200;
-                  const tileHeight = 200 / trickplayInfo.aspectRatio!;
+                  const tileWidth = 150;
+                  const tileHeight = 150 / trickplayInfo.aspectRatio!;
                   return (
                     <View
                       style={{
@@ -633,9 +645,9 @@ export const CurrentlyPlayingBar: React.FC = () => {
                     >
                       <Image
                         style={{
-                          width: 200 * trickplayInfo?.data.TileWidth!,
+                          width: 150 * trickplayInfo?.data.TileWidth!,
                           height:
-                            (200 / trickplayInfo.aspectRatio!) *
+                            (150 / trickplayInfo.aspectRatio!) *
                             trickplayInfo?.data.TileHeight!,
                           transform: [
                             { translateX: -x * tileWidth },

components/ItemContent.tsx

@@ -26,7 +26,7 @@ import { MediaSourceInfo } from "@jellyfin/sdk/lib/generated-client/models";
 import { getMediaInfoApi } from "@jellyfin/sdk/lib/utils/api";
 import { useQuery } from "@tanstack/react-query";
 import { Image } from "expo-image";
-import { useNavigation } from "expo-router";
+import { Stack, useNavigation } from "expo-router";
 import * as ScreenOrientation from "expo-screen-orientation";
 import { useAtom } from "jotai";
 import React, { useEffect, useMemo, useRef, useState } from "react";

providers/PlaybackProvider.tsx

@@ -217,13 +217,15 @@ export const PlaybackProvider: React.FC<{ children: ReactNode }> = ({
   );
 
   const stopPlayback = useCallback(async () => {
+    const id = currentlyPlaying?.item?.Id;
+    setCurrentlyPlayingState(null);
+
     await reportPlaybackStopped({
       api,
-      itemId: currentlyPlaying?.item?.Id,
+      itemId: id,
       sessionId: session?.PlaySessionId,
       positionTicks: progressTicks ? progressTicks : 0,
     });
-    setCurrentlyPlayingState(null);
   }, [currentlyPlaying?.item.Id, session?.PlaySessionId, progressTicks, api]);
 
   const setIsPlaying = useCallback(