chore: version

app.json

@@ -2,7 +2,7 @@
   "expo": {
     "name": "Streamyfin",
     "slug": "streamyfin",
-    "version": "0.10.0",
+    "version": "0.10.1",
     "orientation": "default",
     "icon": "./assets/images/icon.png",
     "scheme": "streamyfin",
@@ -33,7 +33,7 @@
     },
     "android": {
       "jsEngine": "hermes",
-      "versionCode": 29,
+      "versionCode": 30,
       "adaptiveIcon": {
         "foregroundImage": "./assets/images/icon.png"
       },

app/(auth)/(tabs)/(home)/downloads.tsx

@@ -13,6 +13,7 @@ import { FFmpegKit } from "ffmpeg-kit-react-native";
 import { useAtom } from "jotai";
 import { useMemo } from "react";
 import { ScrollView, TouchableOpacity, View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 
 const downloads: React.FC = () => {
   const [process, setProcess] = useAtom(runningProcesses);
@@ -53,6 +54,8 @@ const downloads: React.FC = () => {
     return formatNumber(timeLeft / 10000);
   }, [process]);
 
+  const insets = useSafeAreaInsets();
+
   if (isLoading) {
     return (
       <View className="h-full flex flex-col items-center justify-center -mt-6">
@@ -63,7 +66,14 @@ const downloads: React.FC = () => {
 
   return (
     <ScrollView>
-      <View className="px-4 py-4">
+      <View
+        className="px-4 py-4"
+        style={{
+          paddingLeft: insets.left,
+          paddingRight: insets.right,
+          paddingBottom: 100,
+        }}
+      >
         <View className="mb-4 flex flex-col space-y-4">
           <View>
             <Text className="text-2xl font-bold mb-2">Queue</Text>

app/(auth)/(tabs)/(home)/index.tsx

@@ -18,7 +18,8 @@ import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { useRouter } from "expo-router";
 import { useAtom } from "jotai";
 import { useCallback, useEffect, useMemo, useState } from "react";
-import { RefreshControl, ScrollView, View } from "react-native";
+import { RefreshControl, SafeAreaView, ScrollView, View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 
 type BaseSection = {
   title: string;
@@ -270,6 +271,8 @@ export default function index() {
   //   );
   // }
 
+  const insets = useSafeAreaInsets();
+
   if (e1 || e2)
     return (
       <View className="flex flex-col items-center justify-center h-full -mt-6">
@@ -286,6 +289,7 @@ export default function index() {
         <Loader />
       </View>
     );
+
   return (
     <ScrollView
       nestedScrollEnabled
@@ -294,7 +298,13 @@ export default function index() {
         <RefreshControl refreshing={loading} onRefresh={refetch} />
       }
     >
-      <View className="flex flex-col pt-4 pb-24 gap-y-4">
+      <View
+        style={{
+          paddingLeft: insets.left,
+          paddingRight: insets.right,
+        }}
+        className="flex flex-col pt-4 pb-24 gap-y-4"
+      >
         <LargeMovieCarousel />
 
         {sections.map((section, index) => {

app/(auth)/(tabs)/(home)/settings.tsx

@@ -9,6 +9,7 @@ import { useQuery } from "@tanstack/react-query";
 import * as Haptics from "expo-haptics";
 import { useAtom } from "jotai";
 import { ScrollView, View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 
 export default function settings() {
   const { logout } = useJellyfin();
@@ -23,9 +24,18 @@ export default function settings() {
     refetchInterval: 1000,
   });
 
+  const insets = useSafeAreaInsets();
+
   return (
     <ScrollView>
-      <View className="p-4 flex flex-col gap-y-4 pb-12">
+      <View
+        className="p-4 flex flex-col gap-y-4 pb-12"
+        style={{
+          paddingLeft: insets.left,
+          paddingRight: insets.right,
+          paddingBottom: 100,
+        }}
+      >
         <Text className="font-bold text-2xl">Information</Text>
 
         <View className="flex flex-col rounded-xl mb-4 overflow-hidden border-neutral-800 divide-y-2 divide-solid divide-neutral-800 ">

app/(auth)/(tabs)/(home,libraries,search)/albums/[albumId].tsx

@@ -1,7 +1,9 @@
 import { Chromecast } from "@/components/Chromecast";
+import { ItemImage } from "@/components/common/ItemImage";
 import { Text } from "@/components/common/Text";
 import { TouchableItemRouter } from "@/components/common/TouchableItemRouter";
 import { SongsList } from "@/components/music/SongsList";
+import { ParallaxScrollView } from "@/components/ParallaxPage";
 import ArtistPoster from "@/components/posters/ArtistPoster";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
 import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
@@ -11,6 +13,7 @@ import { router, useLocalSearchParams, useNavigation } from "expo-router";
 import { useAtom } from "jotai";
 import { useEffect, useState } from "react";
 import { ScrollView, TouchableOpacity, View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 
 export default function page() {
   const searchParams = useLocalSearchParams();
@@ -88,30 +91,31 @@ export default function page() {
     enabled: !!api && !!user?.Id,
   });
 
+  const insets = useSafeAreaInsets();
+
   if (!album) return null;
 
   return (
-    <ScrollView>
-      <View className="px-4 pb-24">
-        <View className="flex flex-row space-x-4 items-start mb-4">
-          <View className="w-24">
-            <ArtistPoster item={album} />
-          </View>
-          <View className="flex flex-col shrink">
-            <Text className="font-bold text-3xl">{album?.Name}</Text>
-            <Text className="">{album?.ProductionYear}</Text>
-
-            <View className="flex flex-row space-x-2 mt-1">
-              {album.AlbumArtists?.map((a) => (
-                <TouchableItemRouter key={a.Id} item={album}>
-                  <Text className="font-bold text-purple-600">
-                    {album?.AlbumArtist}
-                  </Text>
-                </TouchableItemRouter>
-              ))}
-            </View>
-          </View>
-        </View>
+    <ParallaxScrollView
+      headerHeight={400}
+      headerImage={
+        <ItemImage
+          variant={"Primary"}
+          item={album}
+          style={{
+            width: "100%",
+            height: "100%",
+          }}
+        />
+      }
+    >
+      <View className="px-4 mb-8">
+        <Text className="font-bold text-2xl mb-2">{album?.Name}</Text>
+        <Text className="text-neutral-500">
+          {songs?.TotalRecordCount} songs
+        </Text>
+      </View>
+      <View className="px-4">
         <SongsList
           albumId={albumId}
           songs={songs?.Items}
@@ -119,6 +123,6 @@ export default function page() {
           artistId={artistId}
         />
       </View>
-    </ScrollView>
+    </ParallaxScrollView>
   );
 }

app/(auth)/(tabs)/(home,libraries,search)/artists/[artistId].tsx

@@ -8,6 +8,10 @@ import { router, useLocalSearchParams, useNavigation } from "expo-router";
 import { useAtom } from "jotai";
 import { useEffect, useState } from "react";
 import { FlatList, ScrollView, TouchableOpacity, View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { ItemImage } from "@/components/common/ItemImage";
+import { ParallaxScrollView } from "@/components/ParallaxPage";
+import { TouchableItemRouter } from "@/components/common/TouchableItemRouter";
 
 export default function page() {
   const searchParams = useLocalSearchParams();
@@ -82,50 +86,45 @@ export default function page() {
     enabled: !!api && !!user?.Id,
   });
 
-  useEffect(() => {
-    navigation.setOptions({
-      title: albums?.Items?.[0]?.AlbumArtist || "",
-    });
-  }, [albums]);
+  const insets = useSafeAreaInsets();
 
   if (!artist || !albums) return null;
 
   return (
-    <FlatList
-      contentContainerStyle={{
-        padding: 16,
-        paddingBottom: 140,
-      }}
-      ListHeaderComponent={
-        <View className="mb-2">
-          <View className="w-32 mb-4">
-            <ArtistPoster item={artist} />
-          </View>
-          <Text className="font-bold text-2xl mb-4">Albums</Text>
-        </View>
-      }
-      nestedScrollEnabled
-      data={albums.Items}
-      numColumns={3}
-      columnWrapperStyle={{
-        justifyContent: "space-between",
-      }}
-      renderItem={({ item, index }) => (
-        <TouchableOpacity
-          style={{ width: "30%" }}
-          key={index}
-          onPress={() => {
-            router.push(`/albums/${item.Id}`);
+    <ParallaxScrollView
+      headerHeight={400}
+      headerImage={
+        <ItemImage
+          variant={"Primary"}
+          item={artist}
+          style={{
+            width: "100%",
+            height: "100%",
           }}
-        >
-          <View className="flex flex-col gap-y-2">
-            <ArtistPoster item={item} />
-            <Text>{item.Name}</Text>
-            <Text className="opacity-50 text-xs">{item.ProductionYear}</Text>
-          </View>
-        </TouchableOpacity>
-      )}
-      keyExtractor={(item) => item.Id || ""}
-    />
+        />
+      }
+    >
+      <View className="px-4 mb-8">
+        <Text className="font-bold text-2xl mb-2">{artist?.Name}</Text>
+        <Text className="text-neutral-500">
+          {albums.TotalRecordCount} albums
+        </Text>
+      </View>
+      <View className="flex flex-row flex-wrap justify-between px-4">
+        {albums.Items.map((item, idx) => (
+          <TouchableItemRouter
+            item={item}
+            style={{ width: "30%", marginBottom: 20 }}
+            key={idx}
+          >
+            <View className="flex flex-col gap-y-2">
+              <ArtistPoster item={item} />
+              <Text numberOfLines={2}>{item.Name}</Text>
+              <Text className="opacity-50 text-xs">{item.ProductionYear}</Text>
+            </View>
+          </TouchableItemRouter>
+        ))}
+      </View>
+    </ParallaxScrollView>
   );
 }

app/(auth)/(tabs)/(home,libraries,search)/songs/[songId].tsx

@@ -1,271 +0,0 @@
-import { AudioTrackSelector } from "@/components/AudioTrackSelector";
-import { Bitrate, BitrateSelector } from "@/components/BitrateSelector";
-import { Chromecast } from "@/components/Chromecast";
-import { Text } from "@/components/common/Text";
-import { DownloadItem } from "@/components/DownloadItem";
-import { Loader } from "@/components/Loader";
-import { MoviesTitleHeader } from "@/components/movies/MoviesTitleHeader";
-import { ParallaxScrollView } from "@/components/ParallaxPage";
-import { PlayButton } from "@/components/PlayButton";
-import { NextEpisodeButton } from "@/components/series/NextEpisodeButton";
-import { SimilarItems } from "@/components/SimilarItems";
-import { SubtitleTrackSelector } from "@/components/SubtitleTrackSelector";
-import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
-import { usePlayback } from "@/providers/PlaybackProvider";
-import { getBackdropUrl } from "@/utils/jellyfin/image/getBackdropUrl";
-import { getLogoImageUrlById } from "@/utils/jellyfin/image/getLogoImageUrlById";
-import { getStreamUrl } from "@/utils/jellyfin/media/getStreamUrl";
-import { getUserItemData } from "@/utils/jellyfin/user-library/getUserItemData";
-import { chromecastProfile } from "@/utils/profiles/chromecast";
-import ios from "@/utils/profiles/ios";
-import { getMediaInfoApi } from "@jellyfin/sdk/lib/utils/api";
-import { useQuery } from "@tanstack/react-query";
-import { Image } from "expo-image";
-import { useLocalSearchParams, useNavigation } from "expo-router";
-import { useAtom } from "jotai";
-import { useCallback, useEffect, useMemo, useState } from "react";
-import { ScrollView, View } from "react-native";
-import CastContext, {
-  PlayServicesState,
-  useCastDevice,
-  useRemoteMediaClient,
-} from "react-native-google-cast";
-
-const page: React.FC = () => {
-  const local = useLocalSearchParams();
-  const { songId: id } = local as { songId: string };
-
-  const [api] = useAtom(apiAtom);
-  const [user] = useAtom(userAtom);
-
-  const { setCurrentlyPlayingState } = usePlayback();
-
-  const castDevice = useCastDevice();
-  const navigation = useNavigation();
-
-  useEffect(() => {
-    navigation.setOptions({
-      headerRight: () => (
-        <View className="">
-          <Chromecast />
-        </View>
-      ),
-    });
-  });
-
-  const chromecastReady = useMemo(() => !!castDevice?.deviceId, [castDevice]);
-  const [selectedAudioStream, setSelectedAudioStream] = useState<number>(-1);
-  const [selectedSubtitleStream, setSelectedSubtitleStream] =
-    useState<number>(0);
-  const [maxBitrate, setMaxBitrate] = useState<Bitrate>({
-    key: "Max",
-    value: undefined,
-  });
-
-  const { data: item, isLoading: l1 } = useQuery({
-    queryKey: ["item", id],
-    queryFn: async () =>
-      await getUserItemData({
-        api,
-        userId: user?.Id,
-        itemId: id,
-      }),
-    enabled: !!id && !!api,
-    staleTime: 60 * 1000,
-  });
-
-  const backdropUrl = useMemo(
-    () =>
-      getBackdropUrl({
-        api,
-        item,
-        quality: 90,
-        width: 1000,
-      }),
-    [item]
-  );
-
-  const logoUrl = useMemo(
-    () => (item?.Type === "Movie" ? getLogoImageUrlById({ api, item }) : null),
-    [item]
-  );
-
-  const { data: sessionData } = useQuery({
-    queryKey: ["sessionData", item?.Id],
-    queryFn: async () => {
-      if (!api || !user?.Id || !item?.Id) return null;
-      const playbackData = await getMediaInfoApi(api!).getPlaybackInfo({
-        itemId: item?.Id,
-        userId: user?.Id,
-      });
-
-      return playbackData.data;
-    },
-    enabled: !!item?.Id && !!api && !!user?.Id,
-    staleTime: 0,
-  });
-
-  const { data: playbackUrl } = useQuery({
-    queryKey: [
-      "playbackUrl",
-      item?.Id,
-      maxBitrate,
-      castDevice,
-      selectedAudioStream,
-      selectedSubtitleStream,
-    ],
-    queryFn: async () => {
-      if (!api || !user?.Id || !sessionData) return null;
-
-      const url = await getStreamUrl({
-        api,
-        userId: user.Id,
-        item,
-        startTimeTicks: item?.UserData?.PlaybackPositionTicks || 0,
-        maxStreamingBitrate: maxBitrate.value,
-        sessionData,
-        deviceProfile: castDevice?.deviceId ? chromecastProfile : ios,
-        audioStreamIndex: selectedAudioStream,
-        subtitleStreamIndex: selectedSubtitleStream,
-      });
-
-      console.log("Transcode URL: ", url);
-
-      return url;
-    },
-    enabled: !!sessionData,
-    staleTime: 0,
-  });
-
-  const client = useRemoteMediaClient();
-
-  const onPressPlay = useCallback(
-    async (type: "device" | "cast" = "device") => {
-      if (!playbackUrl || !item) return;
-
-      if (type === "cast" && client) {
-        await CastContext.getPlayServicesState().then((state) => {
-          if (state && state !== PlayServicesState.SUCCESS)
-            CastContext.showPlayServicesErrorDialog(state);
-          else {
-            client.loadMedia({
-              mediaInfo: {
-                contentUrl: playbackUrl,
-                contentType: "video/mp4",
-                metadata: {
-                  type: item.Type === "Episode" ? "tvShow" : "movie",
-                  title: item.Name || "",
-                  subtitle: item.Overview || "",
-                },
-              },
-              startTime: 0,
-            });
-          }
-        });
-      } else {
-        setCurrentlyPlayingState({
-          item,
-          url: playbackUrl,
-        });
-      }
-    },
-    [playbackUrl, item]
-  );
-
-  if (l1)
-    return (
-      <View className="justify-center items-center h-full">
-        <Loader />
-      </View>
-    );
-
-  if (!item?.Id || !backdropUrl) return null;
-
-  return (
-    <ParallaxScrollView
-      headerImage={
-        <Image
-          source={{
-            uri: backdropUrl,
-          }}
-          style={{
-            width: "100%",
-            height: "100%",
-          }}
-        />
-      }
-      logo={
-        <>
-          {logoUrl ? (
-            <Image
-              source={{
-                uri: logoUrl,
-              }}
-              style={{
-                height: 130,
-                width: "100%",
-                resizeMode: "contain",
-              }}
-            />
-          ) : null}
-        </>
-      }
-    >
-      <View className="flex flex-col px-4 pt-4">
-        <View className="flex flex-col">
-          <MoviesTitleHeader item={item} />
-          <Text className="text-center opacity-50">{item?.ProductionYear}</Text>
-        </View>
-
-        <View className="flex flex-row justify-between items-center w-full my-4">
-          {playbackUrl ? (
-            <DownloadItem item={item} />
-          ) : (
-            <View className="h-12 aspect-square flex items-center justify-center"></View>
-          )}
-        </View>
-      </View>
-      <View className="flex flex-col p-4 w-full">
-        <View className="flex flex-row items-center space-x-2 w-full">
-          <BitrateSelector
-            onChange={(val) => setMaxBitrate(val)}
-            selected={maxBitrate}
-          />
-          <AudioTrackSelector
-            item={item}
-            onChange={setSelectedAudioStream}
-            selected={selectedAudioStream}
-          />
-          <SubtitleTrackSelector
-            item={item}
-            onChange={setSelectedSubtitleStream}
-            selected={selectedSubtitleStream}
-          />
-        </View>
-        <View className="flex flex-row items-center justify-between w-full">
-          <NextEpisodeButton item={item} type="previous" className="mr-2" />
-          <PlayButton item={item} className="grow" />
-          <NextEpisodeButton item={item} className="ml-2" />
-        </View>
-      </View>
-      <ScrollView horizontal className="flex px-4 mb-4">
-        <View className="flex flex-row space-x-2 ">
-          <View className="flex flex-col">
-            <Text className="text-sm opacity-70">Audio</Text>
-          </View>
-          <View className="flex flex-col">
-            <Text className="text-sm opacity-70">
-              {item.MediaStreams?.find((i) => i.Type === "Audio")?.DisplayTitle}
-            </Text>
-          </View>
-        </View>
-      </ScrollView>
-
-      <SimilarItems itemId={item.Id} />
-
-      <View className="h-12"></View>
-    </ParallaxScrollView>
-  );
-};
-
-export default page;

app/(auth)/(tabs)/(libraries)/[libraryId].tsx

@@ -9,7 +9,12 @@ import React, {
   useMemo,
   useState,
 } from "react";
-import { FlatList, RefreshControl, View } from "react-native";
+import {
+  FlatList,
+  RefreshControl,
+  useWindowDimensions,
+  View,
+} from "react-native";
 
 import { Text } from "@/components/common/Text";
 import { TouchableItemRouter } from "@/components/common/TouchableItemRouter";
@@ -39,6 +44,7 @@ import {
 } from "@jellyfin/sdk/lib/utils/api";
 import { FlashList } from "@shopify/flash-list";
 import { Loader } from "@/components/Loader";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 
 const MemoizedTouchableItemRouter = React.memo(TouchableItemRouter);
 
@@ -49,6 +55,7 @@ const Page = () => {
   const [api] = useAtom(apiAtom);
   const [user] = useAtom(userAtom);
   const navigation = useNavigation();
+  const { width: screenWidth } = useWindowDimensions();
 
   const [selectedGenres, setSelectedGenres] = useAtom(genreFilterAtom);
   const [selectedYears, setSelectedYears] = useAtom(yearFilterAtom);
@@ -60,6 +67,14 @@ const Page = () => {
     ScreenOrientation.Orientation.PORTRAIT_UP
   );
 
+  const getNumberOfColumns = useCallback(() => {
+    if (orientation === ScreenOrientation.Orientation.PORTRAIT_UP) return 3;
+    if (screenWidth < 600) return 5;
+    if (screenWidth < 960) return 6;
+    if (screenWidth < 1280) return 7;
+    return 6;
+  }, [screenWidth]);
+
   useLayoutEffect(() => {
     setSortBy([
       {
@@ -193,18 +208,19 @@ const Page = () => {
         key={item.Id}
         style={{
           width: "100%",
-          marginBottom:
-            orientation === ScreenOrientation.Orientation.PORTRAIT_UP ? 4 : 16,
+          marginBottom: 4,
         }}
         item={item}
       >
         <View
           style={{
             alignSelf:
-              index % 3 === 0
-                ? "flex-end"
-                : (index + 1) % 3 === 0
-                ? "flex-start"
+              orientation === ScreenOrientation.Orientation.PORTRAIT_UP
+                ? index % 3 === 0
+                  ? "flex-end"
+                  : (index + 1) % 3 === 0
+                  ? "flex-start"
+                  : "center"
                 : "center",
             width: "89%",
           }}
@@ -375,6 +391,8 @@ const Page = () => {
     ]
   );
 
+  const insets = useSafeAreaInsets();
+
   if (isLoading || isLibraryLoading)
     return (
       <View className="w-full h-full flex items-center justify-center">
@@ -401,9 +419,7 @@ const Page = () => {
       renderItem={renderItem}
       keyExtractor={keyExtractor}
       estimatedItemSize={244}
-      numColumns={
-        orientation === ScreenOrientation.Orientation.PORTRAIT_UP ? 3 : 5
-      }
+      numColumns={getNumberOfColumns()}
       onEndReached={() => {
         if (hasNextPage) {
           fetchNextPage();
@@ -411,7 +427,11 @@ const Page = () => {
       }}
       onEndReachedThreshold={1}
       ListHeaderComponent={ListHeaderComponent}
-      contentContainerStyle={{ paddingBottom: 24 }}
+      contentContainerStyle={{
+        paddingBottom: 24,
+        paddingLeft: insets.left,
+        paddingRight: insets.right,
+      }}
       ItemSeparatorComponent={() => (
         <View
           style={{

app/(auth)/(tabs)/(libraries)/index.tsx

@@ -13,6 +13,7 @@ import { useNavigation } from "expo-router";
 import { useAtom } from "jotai";
 import { useEffect } from "react";
 import { StyleSheet, View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 
 export default function index() {
   const [api] = useAtom(apiAtom);
@@ -54,6 +55,8 @@ export default function index() {
     }
   }, [data]);
 
+  const insets = useSafeAreaInsets();
+
   if (isLoading)
     return (
       <View className="justify-center items-center h-full">
@@ -76,6 +79,8 @@ export default function index() {
         paddingTop: 17,
         paddingHorizontal: settings?.libraryOptions?.display === "row" ? 0 : 17,
         paddingBottom: 150,
+        paddingLeft: insets.left,
+        paddingRight: insets.right,
       }}
       data={data}
       renderItem={({ item }) => <LibraryItemCard library={item} />}

app/(auth)/(tabs)/(search)/index.tsx

@@ -28,6 +28,7 @@ import React, {
   useState,
 } from "react";
 import { Platform, ScrollView, TouchableOpacity, View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { useDebounce } from "use-debounce";
 
 const exampleSearches = [
@@ -41,6 +42,7 @@ const exampleSearches = [
 
 export default function search() {
   const params = useLocalSearchParams();
+  const insets = useSafeAreaInsets();
 
   const { q, prev } = params as { q: string; prev: Href<string> };
 
@@ -220,6 +222,10 @@ export default function search() {
       <ScrollView
         keyboardDismissMode="on-drag"
         contentInsetAdjustmentBehavior="automatic"
+        contentContainerStyle={{
+          paddingLeft: insets.left,
+          paddingRight: insets.right,
+        }}
       >
         <View className="flex flex-col pt-4 pb-32">
           {Platform.OS === "android" && (

components/CurrentlyPlayingBar.tsx

@@ -17,7 +17,6 @@ import Animated, {
 import Video from "react-native-video";
 import { Text } from "./common/Text";
 import { Loader } from "./Loader";
-import { debounce } from "lodash";
 
 export const CurrentlyPlayingBar: React.FC = () => {
   const segments = useSegments();
@@ -25,7 +24,6 @@ export const CurrentlyPlayingBar: React.FC = () => {
     currentlyPlaying,
     pauseVideo,
     playVideo,
-    setCurrentlyPlayingState,
     stopPlayback,
     setVolume,
     setIsPlaying,
@@ -36,7 +34,6 @@ export const CurrentlyPlayingBar: React.FC = () => {
   } = usePlayback();
 
   const [api] = useAtom(apiAtom);
-  const [user] = useAtom(userAtom);
 
   const aBottom = useSharedValue(0);
   const aPadding = useSharedValue(0);
@@ -66,6 +63,8 @@ export const CurrentlyPlayingBar: React.FC = () => {
     };
   });
 
+  const from = useMemo(() => segments[2], [segments]);
+
   useEffect(() => {
     if (segments.find((s) => s.includes("tabs"))) {
       // Tab screen - i.e. home
@@ -94,19 +93,20 @@ export const CurrentlyPlayingBar: React.FC = () => {
     [currentlyPlaying?.item]
   );
 
-  const backdropUrl = useMemo(
-    () =>
-      getBackdropUrl({
+  const poster = useMemo(() => {
+    if (currentlyPlaying?.item.Type === "Audio")
+      return `${api?.basePath}/Items/${currentlyPlaying.item.AlbumId}/Images/Primary?tag=${currentlyPlaying.item.AlbumPrimaryImageTag}&quality=90&maxHeight=200&maxWidth=200`;
+    else
+      return getBackdropUrl({
         api,
         item: currentlyPlaying?.item,
         quality: 70,
         width: 200,
-      }),
-    [currentlyPlaying?.item, api]
-  );
+      });
+  }, [currentlyPlaying?.item.Id, api]);
 
   const videoSource = useMemo(() => {
-    if (!api || !currentlyPlaying || !backdropUrl) return null;
+    if (!api || !currentlyPlaying || !poster) return null;
     return {
       uri: currentlyPlaying.url,
       isNetwork: true,
@@ -120,13 +120,13 @@ export const CurrentlyPlayingBar: React.FC = () => {
         description: currentlyPlaying.item?.Overview
           ? currentlyPlaying.item?.Overview
           : undefined,
-        imageUri: backdropUrl,
+        imageUri: poster,
         subtitle: currentlyPlaying.item?.Album
           ? currentlyPlaying.item?.Album
           : undefined,
       },
     };
-  }, [currentlyPlaying, startPosition, api, backdropUrl]);
+  }, [currentlyPlaying, startPosition, api, poster]);
 
   if (!api || !currentlyPlaying) return null;
 
@@ -174,8 +174,8 @@ export const CurrentlyPlayingBar: React.FC = () => {
                   controls={false}
                   pictureInPicture={true}
                   poster={
-                    backdropUrl && currentlyPlaying.item?.Type === "Audio"
-                      ? backdropUrl
+                    poster && currentlyPlaying.item?.Type === "Audio"
+                      ? poster
                       : undefined
                   }
                   debug={{
@@ -228,10 +228,17 @@ export const CurrentlyPlayingBar: React.FC = () => {
             <View className="shrink text-xs">
               <TouchableOpacity
                 onPress={() => {
-                  if (currentlyPlaying.item?.Type === "Audio")
-                    router.push(`/albums/${currentlyPlaying.item?.AlbumId}`);
-                  else
-                    router.push(`/items/page?id=${currentlyPlaying.item?.Id}`);
+                  if (currentlyPlaying.item?.Type === "Audio") {
+                    router.push(
+                      // @ts-ignore
+                      `/(auth)/(tabs)/${from}/albums/${currentlyPlaying.item.AlbumId}`
+                    );
+                  } else {
+                    router.push(
+                      // @ts-ignore
+                      `/(auth)/(tabs)/${from}/items/page?id=${currentlyPlaying.item?.Id}`
+                    );
+                  }
                 }}
               >
                 <Text>{currentlyPlaying.item?.Name}</Text>
@@ -240,7 +247,8 @@ export const CurrentlyPlayingBar: React.FC = () => {
                 <TouchableOpacity
                   onPress={() => {
                     router.push(
-                      `/(auth)/series/${currentlyPlaying.item.SeriesId}`
+                      // @ts-ignore
+                      `/(auth)/(tabs)/${from}/series/${currentlyPlaying.item.SeriesId}`
                     );
                   }}
                   className="text-xs opacity-50"

components/ItemContent.tsx

@@ -40,6 +40,8 @@ import Animated, {
 } from "react-native-reanimated";
 import { Loader } from "./Loader";
 import { set } from "lodash";
+import * as ScreenOrientation from "expo-screen-orientation";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 
 export const ItemContent: React.FC<{ id: string }> = React.memo(({ id }) => {
   const [api] = useAtom(apiAtom);
@@ -62,6 +64,26 @@ export const ItemContent: React.FC<{ id: string }> = React.memo(({ id }) => {
   const [loadingImage, setLoadingImage] = useState(true);
   const [loadingLogo, setLoadingLogo] = useState(true);
 
+  const [orientation, setOrientation] = useState(
+    ScreenOrientation.Orientation.PORTRAIT_UP
+  );
+
+  useEffect(() => {
+    const subscription = ScreenOrientation.addOrientationChangeListener(
+      (event) => {
+        setOrientation(event.orientationInfo.orientation);
+      }
+    );
+
+    ScreenOrientation.getOrientationAsync().then((initialOrientation) => {
+      setOrientation(initialOrientation);
+    });
+
+    return () => {
+      ScreenOrientation.removeOrientationChangeListener(subscription);
+    };
+  }, []);
+
   const animatedStyle = useAnimatedStyle(() => {
     return {
       opacity: opacity.value,
@@ -138,6 +160,10 @@ export const ItemContent: React.FC<{ id: string }> = React.memo(({ id }) => {
   }, [item]);
 
   useEffect(() => {
+    if (orientation !== ScreenOrientation.Orientation.PORTRAIT_UP) {
+      headerHeightRef.current = 230;
+      return;
+    }
     if (item?.Type === "Episode") headerHeightRef.current = 400;
     else if (item?.Type === "Movie") headerHeightRef.current = 500;
   }, [item]);
@@ -169,7 +195,8 @@ export const ItemContent: React.FC<{ id: string }> = React.memo(({ id }) => {
       settings,
     ],
     queryFn: async () => {
-      if (!api || !user?.Id || !sessionData) return null;
+      if (!api || !user?.Id || !sessionData || !selectedMediaSource?.Id)
+        return null;
 
       let deviceProfile: any = ios;
 
@@ -193,7 +220,7 @@ export const ItemContent: React.FC<{ id: string }> = React.memo(({ id }) => {
         subtitleStreamIndex: selectedSubtitleStream,
         forceDirectPlay: settings?.forceDirectPlay,
         height: maxBitrate.height,
-        mediaSourceId: selectedMediaSource?.Id,
+        mediaSourceId: selectedMediaSource.Id,
       });
 
       console.info("Stream URL:", url);
@@ -212,8 +239,16 @@ export const ItemContent: React.FC<{ id: string }> = React.memo(({ id }) => {
     );
   }, [isLoading, isFetching, loadingImage, loadingLogo, logoUrl]);
 
+  const insets = useSafeAreaInsets();
+
   return (
-    <View className="flex-1 relative">
+    <View
+      className="flex-1 relative"
+      style={{
+        paddingLeft: insets.left,
+        paddingRight: insets.right,
+      }}
+    >
       {loading && (
         <View className="absolute top-0 left-0 right-0 bottom-0 w-full h-full flex flex-col justify-center items-center z-50">
           <Loader />

components/music/SongsListItem.tsx

@@ -71,7 +71,10 @@ export const SongsListItem: React.FC<Props> = ({
   };
 
   const play = async (type: "device" | "cast") => {
-    if (!user?.Id || !api || !item.Id) return;
+    if (!user?.Id || !api || !item.Id) {
+      console.warn("No user, api or item", user, api, item.Id);
+      return;
+    }
 
     const response = await getMediaInfoApi(api!).getPlaybackInfo({
       itemId: item?.Id,
@@ -87,9 +90,13 @@ export const SongsListItem: React.FC<Props> = ({
       startTimeTicks: item?.UserData?.PlaybackPositionTicks || 0,
       sessionData,
       deviceProfile: castDevice?.deviceId ? chromecastProfile : ios,
+      mediaSourceId: item.Id,
     });
 
-    if (!url || !item) return;
+    if (!url || !item) {
+      console.warn("No url or item", url, item.Id);
+      return;
+    }
 
     if (type === "cast" && client) {
       await CastContext.getPlayServicesState().then((state) => {
@@ -111,6 +118,7 @@ export const SongsListItem: React.FC<Props> = ({
         }
       });
     } else {
+      console.log("Playing on device", url, item.Id);
       setCurrentlyPlayingState({
         item,
         url,

components/stacks/NestedTabPageStack.tsx

@@ -17,7 +17,6 @@ const routes = [
   "artists/[artistId]",
   "collections/[collectionId]",
   "items/page",
-  "songs/[songId]",
   "series/[id]",
 ];
 

eas.json

@@ -21,13 +21,13 @@
       }
     },
     "production": {
-      "channel": "0.10.0",
+      "channel": "0.10.1",
       "android": {
         "image": "latest"
       }
     },
     "production-apk": {
-      "channel": "0.10.0",
+      "channel": "0.10.1",
       "android": {
         "buildType": "apk",
         "image": "latest"

providers/JellyfinProvider.tsx

@@ -62,7 +62,7 @@ export const JellyfinProvider: React.FC<{ children: ReactNode }> = ({
       setJellyfin(
         () =>
           new Jellyfin({
-            clientInfo: { name: "Streamyfin", version: "0.10.0" },
+            clientInfo: { name: "Streamyfin", version: "0.10.1" },
             deviceInfo: { name: Platform.OS === "ios" ? "iOS" : "Android", id },
           })
       );
@@ -80,7 +80,7 @@ export const JellyfinProvider: React.FC<{ children: ReactNode }> = ({
     return {
       authorization: `MediaBrowser Client="Streamyfin", Device=${
         Platform.OS === "android" ? "Android" : "iOS"
-      }, DeviceId="${deviceId}", Version="0.10.0"`,
+      }, DeviceId="${deviceId}", Version="0.10.1"`,
     };
   }, [deviceId]);
 

utils/jellyfin/media/getStreamUrl.ts

@@ -31,7 +31,7 @@ export const getStreamUrl = async ({
   subtitleStreamIndex?: number;
   forceDirectPlay?: boolean;
   height?: number;
-  mediaSourceId?: string | null;
+  mediaSourceId: string | null;
 }) => {
   if (!api || !userId || !item?.Id || !mediaSourceId) {
     return null;