Merge branch 'master' into pr/106

2026-04-17 14:31:58 +01:00 · 2024-09-01 17:11:52 +02:00
parent b22ffee707 ffea51ccb0
commit 7fa729f89f
74 changed files with 2739 additions and 1528 deletions
--- a/components/AudioTrackSelector.tsx
+++ b/components/AudioTrackSelector.tsx
@@ -2,27 +2,29 @@ import { TouchableOpacity, View } from "react-native";
 import * as DropdownMenu from "zeego/dropdown-menu";
 import { Text } from "./common/Text";
 import { atom, useAtom } from "jotai";
-import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
+import {
+  BaseItemDto,
+  MediaSourceInfo,
+} from "@jellyfin/sdk/lib/generated-client/models";
 import { useEffect, useMemo } from "react";
 import { MediaStream } from "@jellyfin/sdk/lib/generated-client/models";
 import { tc } from "@/utils/textTools";

 interface Props extends React.ComponentProps<typeof View> {
-  item: BaseItemDto;
+  source: MediaSourceInfo;
  onChange: (value: number) => void;
  selected: number;
 }

 export const AudioTrackSelector: React.FC<Props> = ({
-  item,
+  source,
  onChange,
  selected,
  ...props
 }) => {
  const audioStreams = useMemo(
-    () =>
-      item.MediaSources?.[0].MediaStreams?.filter((x) => x.Type === "Audio"),
-    [item]
+    () => source.MediaStreams?.filter((x) => x.Type === "Audio"),
+    [source]
  );

  const selectedAudioSteam = useMemo(
@@ -31,23 +33,26 @@ export const AudioTrackSelector: React.FC<Props> = ({
  );

  useEffect(() => {
-    const index = item.MediaSources?.[0].DefaultAudioStreamIndex;
+    const index = source.DefaultAudioStreamIndex;
    if (index !== undefined && index !== null) onChange(index);
  }, []);

  return (
-    <View className="flex flex-row items-center justify-between" {...props}>
+    <View
+      className="flex shrink"
+      style={{
+        minWidth: 50,
+      }}
+    >
      <DropdownMenu.Root>
        <DropdownMenu.Trigger>
-          <View className="flex flex-col mb-2">
-            <Text className="opacity-50 mb-1 text-xs">Audio streams</Text>
-            <View className="flex flex-row">
-              <TouchableOpacity className="bg-neutral-900 max-w-32 h-10 rounded-xl border-neutral-900 border px-3 py-2 flex flex-row items-center justify-between">
-                <Text className="">
-                  {tc(selectedAudioSteam?.DisplayTitle, 13)}
-                </Text>
-              </TouchableOpacity>
-            </View>
+          <View className="flex flex-col" {...props}>
+            <Text className="opacity-50 mb-1 text-xs">Audio</Text>
+            <TouchableOpacity className="bg-neutral-900  h-10 rounded-xl border-neutral-800 border px-3 py-2 flex flex-row items-center justify-between">
+              <Text className="" numberOfLines={1}>
+                {selectedAudioSteam?.DisplayTitle}
+              </Text>
+            </TouchableOpacity>
          </View>
        </DropdownMenu.Trigger>
        <DropdownMenu.Content
--- a/components/BitrateSelector.tsx
+++ b/components/BitrateSelector.tsx
@@ -1,6 +1,7 @@
 import { TouchableOpacity, View } from "react-native";
 import * as DropdownMenu from "zeego/dropdown-menu";
 import { Text } from "./common/Text";
+import { useMemo } from "react";

 export type Bitrate = {
  key: string;
@@ -43,41 +44,57 @@ const BITRATES: Bitrate[] = [
 interface Props extends React.ComponentProps<typeof View> {
  onChange: (value: Bitrate) => void;
  selected: Bitrate;
+  inverted?: boolean;
 }

 export const BitrateSelector: React.FC<Props> = ({
  onChange,
  selected,
+  inverted,
  ...props
 }) => {
+  const sorted = useMemo(() => {
+    if (inverted)
+      return BITRATES.sort(
+        (a, b) => (a.value || Infinity) - (b.value || Infinity)
+      );
+    return BITRATES.sort(
+      (a, b) => (b.value || Infinity) - (a.value || Infinity)
+    );
+  }, []);
+
  return (
-    <View className="flex flex-row items-center justify-between" {...props}>
+    <View
+      className="flex shrink"
+      style={{
+        minWidth: 60,
+        maxWidth: 200,
+      }}
+    >
      <DropdownMenu.Root>
        <DropdownMenu.Trigger>
-          <View className="flex flex-col mb-2">
-            <Text className="opacity-50 mb-1 text-xs">Bitrate</Text>
-            <View className="flex flex-row">
-              <TouchableOpacity className="bg-neutral-900 h-10 rounded-xl border-neutral-900 border px-3 py-2 flex flex-row items-center justify-between">
-                <Text>
-                  {BITRATES.find((b) => b.value === selected.value)?.key}
-                </Text>
-              </TouchableOpacity>
-            </View>
+          <View className="flex flex-col" {...props}>
+            <Text className="opacity-50 mb-1 text-xs">Quality</Text>
+            <TouchableOpacity className="bg-neutral-900 h-10 rounded-xl border-neutral-800 border px-3 py-2 flex flex-row items-center justify-between">
+              <Text style={{}} className="" numberOfLines={1}>
+                {BITRATES.find((b) => b.value === selected.value)?.key}
+              </Text>
+            </TouchableOpacity>
          </View>
        </DropdownMenu.Trigger>
        <DropdownMenu.Content
-          loop={true}
+          loop={false}
          side="bottom"
-          align="start"
+          align="center"
          alignOffset={0}
          avoidCollisions={true}
-          collisionPadding={8}
-          sideOffset={8}
+          collisionPadding={0}
+          sideOffset={0}
        >
          <DropdownMenu.Label>Bitrates</DropdownMenu.Label>
-          {BITRATES?.map((b, index: number) => (
+          {sorted.map((b) => (
            <DropdownMenu.Item
-              key={index.toString()}
+              key={b.key}
              onSelect={() => {
                onChange(b);
              }}
--- a/components/Button.tsx
+++ b/components/Button.tsx
@@ -10,7 +10,7 @@ interface ButtonProps extends React.ComponentProps<typeof TouchableOpacity> {
  disabled?: boolean;
  children?: string | ReactNode;
  loading?: boolean;
-  color?: "purple" | "red" | "black";
+  color?: "purple" | "red" | "black" | "transparent";
  iconRight?: ReactNode;
  iconLeft?: ReactNode;
  justify?: "center" | "between";
@@ -37,6 +37,8 @@ export const Button: React.FC<PropsWithChildren<ButtonProps>> = ({
        return "bg-red-600";
      case "black":
        return "bg-neutral-900 border border-neutral-800";
+      case "transparent":
+        return "bg-transparent";
    }
  }, [color]);

--- a/components/Chromecast.tsx
+++ b/components/Chromecast.tsx
@@ -1,6 +1,6 @@
 import { BlurView } from "expo-blur";
 import React, { useEffect } from "react";
-import { View } from "react-native";
+import { Platform, View, ViewProps } from "react-native";
 import GoogleCast, {
  CastButton,
  useCastDevice,
@@ -8,16 +8,17 @@ import GoogleCast, {
  useRemoteMediaClient,
 } from "react-native-google-cast";

-type Props = {
+interface Props extends ViewProps {
  width?: number;
  height?: number;
  background?: "blur" | "transparent";
-};
+}

 export const Chromecast: React.FC<Props> = ({
  width = 48,
  height = 48,
  background = "transparent",
+  ...props
 }) => {
  const client = useRemoteMediaClient();
  const castDevice = useCastDevice();
@@ -37,7 +38,20 @@ export const Chromecast: React.FC<Props> = ({

  if (background === "transparent")
    return (
-      <View className=" rounded h-10 aspect-square flex items-center justify-center">
+      <View
+        className="rounded-full h-10 w-10 flex items-center justify-center b"
+        {...props}
+      >
+        <CastButton style={{ tintColor: "white", height, width }} />
+      </View>
+    );
+
+  if (Platform.OS === "android")
+    return (
+      <View
+        className="rounded-full h-10 w-10 flex items-center justify-center bg-neutral-800/80"
+        {...props}
+      >
        <CastButton style={{ tintColor: "white", height, width }} />
      </View>
    );
@@ -46,6 +60,7 @@ export const Chromecast: React.FC<Props> = ({
    <BlurView
      intensity={100}
      className="rounded-full overflow-hidden h-10 aspect-square flex items-center justify-center"
+      {...props}
    >
      <CastButton style={{ tintColor: "white", height, width }} />
    </BlurView>
--- a/components/ContinueWatchingPoster.tsx
+++ b/components/ContinueWatchingPoster.tsx
@@ -5,29 +5,41 @@ import { useAtom } from "jotai";
 import { useMemo, useState } from "react";
 import { View } from "react-native";
 import { WatchedIndicator } from "./WatchedIndicator";
-import { getPrimaryImageUrl } from "@/utils/jellyfin/image/getPrimaryImageUrl";

 type ContinueWatchingPosterProps = {
  item: BaseItemDto;
  width?: number;
+  useEpisodePoster?: boolean;
 };

 const ContinueWatchingPoster: React.FC<ContinueWatchingPosterProps> = ({
  item,
  width = 176,
+  useEpisodePoster = false,
 }) => {
  const [api] = useAtom(apiAtom);

-  const url = useMemo(
-    () =>
-      getPrimaryImageUrl({
-        api,
-        item,
-        quality: 80,
-        width: 300,
-      }),
-    [item]
-  );
+  /**
+   * Get horrizontal poster for movie and episode, with failover to primary.
+   */
+  const url = useMemo(() => {
+    if (!api) return;
+    if (item.Type === "Episode" && useEpisodePoster) {
+      return `${api?.basePath}/Items/${item.Id}/Images/Primary?fillHeight=389&quality=80`;
+    }
+    if (item.Type === "Episode") {
+      if (item.ParentBackdropItemId && item.ParentThumbImageTag)
+        return `${api?.basePath}/Items/${item.ParentBackdropItemId}/Images/Thumb?fillHeight=389&quality=80&tag=${item.ParentThumbImageTag}`;
+      else
+        return `${api?.basePath}/Items/${item.Id}/Images/Primary?fillHeight=389&quality=80`;
+    }
+    if (item.Type === "Movie") {
+      if (item.ImageTags?.["Thumb"])
+        return `${api?.basePath}/Items/${item.Id}/Images/Thumb?fillHeight=389&quality=80&tag=${item.ImageTags?.["Thumb"]}`;
+      else
+        return `${api?.basePath}/Items/${item.Id}/Images/Primary?fillHeight=389&quality=80`;
+    }
+  }, [item]);

  const [progress, setProgress] = useState(
    item.UserData?.PlayedPercentage || 0
--- a/components/CurrentlyPlayingBar.tsx
+++ b/components/CurrentlyPlayingBar.tsx
@@ -24,8 +24,8 @@ export const CurrentlyPlayingBar: React.FC = () => {
    currentlyPlaying,
    pauseVideo,
    playVideo,
-    setCurrentlyPlayingState,
    stopPlayback,
+    setVolume,
    setIsPlaying,
    isPlaying,
    videoRef,
@@ -34,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);
@@ -64,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
@@ -92,16 +93,40 @@ 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 || !poster) return null;
+    return {
+      uri: currentlyPlaying.url,
+      isNetwork: true,
+      startPosition,
+      headers: getAuthHeaders(api),
+      metadata: {
+        artist: currentlyPlaying.item?.AlbumArtist
+          ? currentlyPlaying.item?.AlbumArtist
+          : undefined,
+        title: currentlyPlaying.item?.Name || "Unknown",
+        description: currentlyPlaying.item?.Overview
+          ? currentlyPlaying.item?.Overview
+          : undefined,
+        imageUri: poster,
+        subtitle: currentlyPlaying.item?.Album
+          ? currentlyPlaying.item?.Album
+          : undefined,
+      },
+    };
+  }, [currentlyPlaying, startPosition, api, poster]);

  if (!api || !currentlyPlaying) return null;

@@ -137,7 +162,7 @@ export const CurrentlyPlayingBar: React.FC = () => {
                }
                `}
            >
-              {currentlyPlaying?.url && (
+              {videoSource && (
                <Video
                  ref={videoRef}
                  allowsExternalPlayback
@@ -149,60 +174,37 @@ export const CurrentlyPlayingBar: React.FC = () => {
                  controls={false}
                  pictureInPicture={true}
                  poster={
-                    backdropUrl && currentlyPlaying.item?.Type === "Audio"
-                      ? backdropUrl
+                    poster && currentlyPlaying.item?.Type === "Audio"
+                      ? poster
                      : undefined
                  }
                  debug={{
                    enable: true,
                    thread: true,
                  }}
-                  paused={!isPlaying}
                  onProgress={(e) => onProgress(e)}
                  subtitleStyle={{
                    fontSize: 16,
                  }}
-                  source={{
-                    uri: currentlyPlaying.url,
-                    isNetwork: true,
-                    startPosition,
-                    headers: getAuthHeaders(api),
-                    metadata: {
-                      artist: currentlyPlaying.item?.AlbumArtist
-                        ? currentlyPlaying.item?.AlbumArtist
-                        : undefined,
-                      title: currentlyPlaying.item?.Name
-                        ? currentlyPlaying.item?.Name
-                        : "Unknown",
-                      description: currentlyPlaying.item?.Overview
-                        ? currentlyPlaying.item?.Overview
-                        : undefined,
-                      imageUri: backdropUrl ? backdropUrl : undefined,
-                      subtitle: currentlyPlaying.item?.Album
-                        ? currentlyPlaying.item?.Album
-                        : undefined,
-                    },
-                  }}
+                  source={videoSource}
                  onRestoreUserInterfaceForPictureInPictureStop={() => {
                    setTimeout(() => {
                      presentFullscreenPlayer();
                    }, 300);
                  }}
-                  onBuffer={(e) =>
-                    e.isBuffering ? console.log("Buffering...") : null
-                  }
                  onFullscreenPlayerDidDismiss={() => {}}
                  onFullscreenPlayerDidPresent={() => {}}
                  onPlaybackStateChanged={(e) => {
-                    if (e.isPlaying) {
-                      setIsPlaying(true);
-                    } else if (e.isSeeking) {
-                      return;
-                    } else {
-                      setIsPlaying(false);
+                    if (e.isPlaying === true) {
+                      playVideo(false);
+                    } else if (e.isPlaying === false) {
+                      pauseVideo(false);
                    }
                  }}
-                  progressUpdateInterval={2000}
+                  onVolumeChange={(e) => {
+                    setVolume(e.volume);
+                  }}
+                  progressUpdateInterval={4000}
                  onError={(e) => {
                    console.log(e);
                    writeToLog(
@@ -226,9 +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/${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>
@@ -237,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"
--- a/components/DownloadItem.tsx
+++ b/components/DownloadItem.tsx
@@ -2,8 +2,17 @@ import { useRemuxHlsToMp4 } from "@/hooks/useRemuxHlsToMp4";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
 import { runningProcesses } from "@/utils/atoms/downloads";
 import { queueActions, queueAtom } from "@/utils/atoms/queue";
-import { getPlaybackInfo } from "@/utils/jellyfin/media/getPlaybackInfo";
+import { useSettings } from "@/utils/atoms/settings";
+import ios from "@/utils/profiles/ios";
+import native from "@/utils/profiles/native";
+import old from "@/utils/profiles/old";
 import Ionicons from "@expo/vector-icons/Ionicons";
+import {
+  BottomSheetBackdrop,
+  BottomSheetBackdropProps,
+  BottomSheetModal,
+  BottomSheetView,
+} from "@gorhom/bottom-sheet";
 import {
  BaseItemDto,
  MediaSourceInfo,
@@ -12,21 +21,18 @@ import AsyncStorage from "@react-native-async-storage/async-storage";
 import { useQuery } from "@tanstack/react-query";
 import { router } from "expo-router";
 import { useAtom } from "jotai";
-import {
-  TouchableOpacity,
-  TouchableOpacityProps,
-  View,
-  ViewProps,
-} from "react-native";
+import { useCallback, useMemo, useRef, useState } from "react";
+import { Alert, TouchableOpacity, View, ViewProps } from "react-native";
+import { AudioTrackSelector } from "./AudioTrackSelector";
+import { Bitrate, BitrateSelector } from "./BitrateSelector";
+import { Button } from "./Button";
+import { Text } from "./common/Text";
 import { Loader } from "./Loader";
+import { MediaSourceSelector } from "./MediaSourceSelector";
 import ProgressCircle from "./ProgressCircle";
-import { DownloadQuality, useSettings } from "@/utils/atoms/settings";
-import { useCallback } from "react";
-import ios from "@/utils/profiles/ios";
-import native from "@/utils/profiles/native";
-import old from "@/utils/profiles/old";
+import { SubtitleTrackSelector } from "./SubtitleTrackSelector";

-interface DownloadProps extends TouchableOpacityProps {
+interface DownloadProps extends ViewProps {
  item: BaseItemDto;
 }

@@ -35,100 +41,135 @@ export const DownloadItem: React.FC<DownloadProps> = ({ item, ...props }) => {
  const [user] = useAtom(userAtom);
  const [process] = useAtom(runningProcesses);
  const [queue, setQueue] = useAtom(queueAtom);
-
  const [settings] = useSettings();
-
  const { startRemuxing } = useRemuxHlsToMp4(item);

-  const initiateDownload = useCallback(
-    async (qualitySetting: DownloadQuality) => {
-      if (!api || !user?.Id || !item.Id) {
-        throw new Error(
-          "DownloadItem ~ initiateDownload: No api or user or item"
-        );
-      }
+  const [selectedMediaSource, setSelectedMediaSource] =
+    useState<MediaSourceInfo | null>(null);
+  const [selectedAudioStream, setSelectedAudioStream] = useState<number>(-1);
+  const [selectedSubtitleStream, setSelectedSubtitleStream] =
+    useState<number>(0);
+  const [maxBitrate, setMaxBitrate] = useState<Bitrate>({
+    key: "Max",
+    value: undefined,
+  });

-      let deviceProfile: any = ios;
+  const userCanDownload = useMemo(() => {
+    return user?.Policy?.EnableContentDownloading;
+  }, [user]);

-      if (settings?.deviceProfile === "Native") {
-        deviceProfile = native;
-      } else if (settings?.deviceProfile === "Old") {
-        deviceProfile = old;
-      }
+  /**
+   * Bottom sheet
+   */
+  const bottomSheetModalRef = useRef<BottomSheetModal>(null);

-      let maxStreamingBitrate: number | undefined = undefined;
+  const handlePresentModalPress = useCallback(() => {
+    bottomSheetModalRef.current?.present();
+  }, []);

-      if (qualitySetting === "high") {
-        maxStreamingBitrate = 8000000;
-      } else if (qualitySetting === "low") {
-        maxStreamingBitrate = 2000000;
-      }
+  const handleSheetChanges = useCallback((index: number) => {
+    console.log("handleSheetChanges", index);
+  }, []);

-      const response = await api.axiosInstance.post(
-        `${api.basePath}/Items/${item.Id}/PlaybackInfo`,
-        {
-          DeviceProfile: deviceProfile,
-          UserId: user.Id,
-          MaxStreamingBitrate: maxStreamingBitrate,
-          StartTimeTicks: 0,
-          EnableTranscoding: maxStreamingBitrate ? true : undefined,
-          AutoOpenLiveStream: true,
-          MediaSourceId: item.Id,
-          AllowVideoStreamCopy: maxStreamingBitrate ? false : true,
-        },
-        {
-          headers: {
-            Authorization: `MediaBrowser DeviceId="${api.deviceInfo.id}", Token="${api.accessToken}"`,
-          },
-        }
+  const closeModal = useCallback(() => {
+    bottomSheetModalRef.current?.dismiss();
+  }, []);
+
+  /**
+   * Start download
+   */
+  const initiateDownload = useCallback(async () => {
+    if (!api || !user?.Id || !item.Id || !selectedMediaSource?.Id) {
+      throw new Error(
+        "DownloadItem ~ initiateDownload: No api or user or item"
      );
+    }

-      let url: string | undefined = undefined;
+    let deviceProfile: any = ios;

-      const mediaSource = response.data.MediaSources?.[0] as MediaSourceInfo;
+    if (settings?.deviceProfile === "Native") {
+      deviceProfile = native;
+    } else if (settings?.deviceProfile === "Old") {
+      deviceProfile = old;
+    }

-      if (!mediaSource) {
-        throw new Error("No media source");
+    const response = await api.axiosInstance.post(
+      `${api.basePath}/Items/${item.Id}/PlaybackInfo`,
+      {
+        DeviceProfile: deviceProfile,
+        UserId: user.Id,
+        MaxStreamingBitrate: maxBitrate.value,
+        StartTimeTicks: 0,
+        EnableTranscoding: maxBitrate.value ? true : undefined,
+        AutoOpenLiveStream: true,
+        AllowVideoStreamCopy: maxBitrate.value ? false : true,
+        MediaSourceId: selectedMediaSource?.Id,
+        AudioStreamIndex: selectedAudioStream,
+        SubtitleStreamIndex: selectedSubtitleStream,
+      },
+      {
+        headers: {
+          Authorization: `MediaBrowser DeviceId="${api.deviceInfo.id}", Token="${api.accessToken}"`,
+        },
      }
+    );

-      if (mediaSource.SupportsDirectPlay) {
-        if (item.MediaType === "Video") {
-          console.log("Using direct stream for video!");
-          url = `${api.basePath}/Videos/${item.Id}/stream.mp4?mediaSourceId=${item.Id}&static=true`;
-        } else if (item.MediaType === "Audio") {
-          console.log("Using direct stream for audio!");
-          const searchParams = new URLSearchParams({
-            UserId: user.Id,
-            DeviceId: api.deviceInfo.id,
-            MaxStreamingBitrate: "140000000",
-            Container:
-              "opus,webm|opus,mp3,aac,m4a|aac,m4b|aac,flac,webma,webm|webma,wav,ogg",
-            TranscodingContainer: "mp4",
-            TranscodingProtocol: "hls",
-            AudioCodec: "aac",
-            api_key: api.accessToken,
-            StartTimeTicks: "0",
-            EnableRedirection: "true",
-            EnableRemoteMedia: "false",
-          });
-          url = `${api.basePath}/Audio/${
-            item.Id
-          }/universal?${searchParams.toString()}`;
-        }
+    let url: string | undefined = undefined;
+
+    const mediaSource: MediaSourceInfo = response.data.MediaSources.find(
+      (source: MediaSourceInfo) => source.Id === selectedMediaSource?.Id
+    );
+
+    if (!mediaSource) {
+      throw new Error("No media source");
+    }
+
+    if (mediaSource.SupportsDirectPlay) {
+      if (item.MediaType === "Video") {
+        console.log("Using direct stream for video!");
+        url = `${api.basePath}/Videos/${item.Id}/stream.mp4?mediaSourceId=${item.Id}&static=true&mediaSourceId=${mediaSource.Id}&deviceId=${api.deviceInfo.id}&api_key=${api.accessToken}`;
+      } else if (item.MediaType === "Audio") {
+        console.log("Using direct stream for audio!");
+        const searchParams = new URLSearchParams({
+          UserId: user.Id,
+          DeviceId: api.deviceInfo.id,
+          MaxStreamingBitrate: "140000000",
+          Container:
+            "opus,webm|opus,mp3,aac,m4a|aac,m4b|aac,flac,webma,webm|webma,wav,ogg",
+          TranscodingContainer: "mp4",
+          TranscodingProtocol: "hls",
+          AudioCodec: "aac",
+          api_key: api.accessToken,
+          StartTimeTicks: "0",
+          EnableRedirection: "true",
+          EnableRemoteMedia: "false",
+        });
+        url = `${api.basePath}/Audio/${
+          item.Id
+        }/universal?${searchParams.toString()}`;
      }
+    } else if (mediaSource.TranscodingUrl) {
+      console.log("Using transcoded stream!");
+      url = `${api.basePath}${mediaSource.TranscodingUrl}`;
+    }

-      if (mediaSource.TranscodingUrl) {
-        console.log("Using transcoded stream!");
-        url = `${api.basePath}${mediaSource.TranscodingUrl}`;
-      } else {
-        throw new Error("No transcoding url");
-      }
+    if (!url) throw new Error("No url");

-      return await startRemuxing(url);
-    },
-    [api, item, startRemuxing, user?.Id]
-  );
+    return await startRemuxing(url);
+  }, [
+    api,
+    item,
+    startRemuxing,
+    user?.Id,
+    selectedMediaSource,
+    selectedAudioStream,
+    selectedSubtitleStream,
+    maxBitrate,
+  ]);

+  /**
+   * Check if item is downloaded
+   */
  const { data: downloaded, isFetching } = useQuery({
    queryKey: ["downloaded", item.Id],
    queryFn: async () => {
@@ -143,23 +184,30 @@ export const DownloadItem: React.FC<DownloadProps> = ({ item, ...props }) => {
    enabled: !!item.Id,
  });

-  if (isFetching) {
-    return (
-      <View className="rounded h-10 aspect-square flex items-center justify-center">
-        <Loader />
-      </View>
-    );
-  }
-
-  if (process && process?.item.Id === item.Id) {
-    return (
-      <TouchableOpacity
-        onPress={() => {
-          router.push("/downloads");
-        }}
+  const renderBackdrop = useCallback(
+    (props: BottomSheetBackdropProps) => (
+      <BottomSheetBackdrop
        {...props}
-      >
-        <View className="rounded h-10 aspect-square flex items-center justify-center">
+        disappearsOnIndex={-1}
+        appearsOnIndex={0}
+      />
+    ),
+    []
+  );
+
+  return (
+    <View
+      className="bg-neutral-800/80 rounded-full h-10 w-10 flex items-center justify-center"
+      {...props}
+    >
+      {isFetching ? (
+        <Loader />
+      ) : process && process?.item.Id === item.Id ? (
+        <TouchableOpacity
+          onPress={() => {
+            router.push("/downloads");
+          }}
+        >
          {process.progress === 0 ? (
            <Loader />
          ) : (
@@ -173,61 +221,97 @@ export const DownloadItem: React.FC<DownloadProps> = ({ item, ...props }) => {
              />
            </View>
          )}
-        </View>
-      </TouchableOpacity>
-    );
-  }
-
-  if (queue.some((i) => i.id === item.Id)) {
-    return (
-      <TouchableOpacity
-        onPress={() => {
-          router.push("/downloads");
-        }}
-        {...props}
-      >
-        <View className="rounded h-10 aspect-square flex items-center justify-center opacity-50">
+        </TouchableOpacity>
+      ) : queue.some((i) => i.id === item.Id) ? (
+        <TouchableOpacity
+          onPress={() => {
+            router.push("/downloads");
+          }}
+        >
          <Ionicons name="hourglass" size={24} color="white" />
-        </View>
-      </TouchableOpacity>
-    );
-  }
-
-  if (downloaded) {
-    return (
-      <TouchableOpacity
-        onPress={() => {
-          router.push("/downloads");
-        }}
-        {...props}
-      >
-        <View className="rounded h-10 aspect-square flex items-center justify-center">
+        </TouchableOpacity>
+      ) : downloaded ? (
+        <TouchableOpacity
+          onPress={() => {
+            router.push("/downloads");
+          }}
+        >
          <Ionicons name="cloud-download" size={26} color="#9333ea" />
-        </View>
-      </TouchableOpacity>
-    );
-  } else {
-    return (
-      <TouchableOpacity
-        onPress={() => {
-          queueActions.enqueue(queue, setQueue, {
-            id: item.Id!,
-            execute: async () => {
-              // await startRemuxing(playbackUrl);
-              if (!settings?.downloadQuality?.value) {
-                throw new Error("No download quality selected");
-              }
-              await initiateDownload(settings?.downloadQuality?.value);
-            },
-            item,
-          });
+        </TouchableOpacity>
+      ) : (
+        <TouchableOpacity onPress={handlePresentModalPress}>
+          <Ionicons name="cloud-download-outline" size={24} color="white" />
+        </TouchableOpacity>
+      )}
+      <BottomSheetModal
+        ref={bottomSheetModalRef}
+        enableDynamicSizing
+        handleIndicatorStyle={{
+          backgroundColor: "white",
        }}
-        {...props}
+        backgroundStyle={{
+          backgroundColor: "#171717",
+        }}
+        onChange={handleSheetChanges}
+        backdropComponent={renderBackdrop}
      >
-        <View className="rounded h-10 aspect-square flex items-center justify-center">
-          <Ionicons name="cloud-download-outline" size={26} color="white" />
-        </View>
-      </TouchableOpacity>
-    );
-  }
+        <BottomSheetView>
+          <View className="flex flex-col space-y-4 px-4 pb-8 pt-2">
+            <Text className="font-bold text-2xl text-neutral-10">
+              Download options
+            </Text>
+            <View className="flex flex-col space-y-2 w-full items-start">
+              <BitrateSelector
+                inverted
+                onChange={(val) => setMaxBitrate(val)}
+                selected={maxBitrate}
+              />
+              <MediaSourceSelector
+                item={item}
+                onChange={setSelectedMediaSource}
+                selected={selectedMediaSource}
+              />
+              {selectedMediaSource && (
+                <View className="flex flex-col space-y-2">
+                  <AudioTrackSelector
+                    source={selectedMediaSource}
+                    onChange={setSelectedAudioStream}
+                    selected={selectedAudioStream}
+                  />
+                  <SubtitleTrackSelector
+                    source={selectedMediaSource}
+                    onChange={setSelectedSubtitleStream}
+                    selected={selectedSubtitleStream}
+                  />
+                </View>
+              )}
+            </View>
+            <Button
+              className="mt-auto"
+              onPress={() => {
+                if (userCanDownload === true) {
+                  closeModal();
+                  queueActions.enqueue(queue, setQueue, {
+                    id: item.Id!,
+                    execute: async () => {
+                      await initiateDownload();
+                    },
+                    item,
+                  });
+                } else {
+                  Alert.alert(
+                    "Disabled",
+                    "This user is not allowed to download files."
+                  );
+                }
+              }}
+              color="purple"
+            >
+              Download
+            </Button>
+          </View>
+        </BottomSheetView>
+      </BottomSheetModal>
+    </View>
+  );
 };
--- a/components/ItemContent.tsx
+++ b/components/ItemContent.tsx
@@ -0,0 +1,364 @@
+import { AudioTrackSelector } from "@/components/AudioTrackSelector";
+import { Bitrate, BitrateSelector } from "@/components/BitrateSelector";
+import { DownloadItem } from "@/components/DownloadItem";
+import { OverviewText } from "@/components/OverviewText";
+import { ParallaxScrollView } from "@/components/ParallaxPage";
+import { PlayButton } from "@/components/PlayButton";
+import { PlayedStatus } from "@/components/PlayedStatus";
+import { SimilarItems } from "@/components/SimilarItems";
+import { SubtitleTrackSelector } from "@/components/SubtitleTrackSelector";
+import { ItemImage } from "@/components/common/ItemImage";
+import { CastAndCrew } from "@/components/series/CastAndCrew";
+import { CurrentSeries } from "@/components/series/CurrentSeries";
+import { SeasonEpisodesCarousel } from "@/components/series/SeasonEpisodesCarousel";
+import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
+import { useSettings } from "@/utils/atoms/settings";
+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 native from "@/utils/profiles/native";
+import old from "@/utils/profiles/old";
+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 { useAtom } from "jotai";
+import React, { useEffect, useMemo, useRef, useState } from "react";
+import { View } from "react-native";
+import { useCastDevice } from "react-native-google-cast";
+import { Chromecast } from "./Chromecast";
+import { ItemHeader } from "./ItemHeader";
+import { MediaSourceSelector } from "./MediaSourceSelector";
+import Animated, {
+  useSharedValue,
+  useAnimatedStyle,
+  withTiming,
+  runOnJS,
+} 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);
+  const [user] = useAtom(userAtom);
+
+  const opacity = useSharedValue(0);
+  const castDevice = useCastDevice();
+  const navigation = useNavigation();
+  const [settings] = useSettings();
+  const [selectedMediaSource, setSelectedMediaSource] =
+    useState<MediaSourceInfo | null>(null);
+  const [selectedAudioStream, setSelectedAudioStream] = useState<number>(-1);
+  const [selectedSubtitleStream, setSelectedSubtitleStream] =
+    useState<number>(0);
+  const [maxBitrate, setMaxBitrate] = useState<Bitrate>({
+    key: "Max",
+    value: undefined,
+  });
+
+  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,
+    };
+  });
+
+  const fadeIn = () => {
+    opacity.value = withTiming(1, { duration: 300 });
+  };
+
+  const fadeOut = (callback: any) => {
+    opacity.value = withTiming(0, { duration: 300 }, (finished) => {
+      if (finished) {
+        runOnJS(callback)();
+      }
+    });
+  };
+
+  const headerHeightRef = useRef(400);
+
+  const {
+    data: item,
+    isLoading,
+    isFetching,
+  } = useQuery({
+    queryKey: ["item", id],
+    queryFn: async () => {
+      const res = await getUserItemData({
+        api,
+        userId: user?.Id,
+        itemId: id,
+      });
+
+      return res;
+    },
+    enabled: !!id && !!api,
+    staleTime: 60 * 1000 * 5,
+  });
+
+  const [localItem, setLocalItem] = useState(item);
+
+  useEffect(() => {
+    if (item) {
+      if (localItem) {
+        // Fade out current item
+        fadeOut(() => {
+          // Update local item after fade out
+          setLocalItem(item);
+          // Then fade in
+          fadeIn();
+        });
+      } else {
+        // If there's no current item, just set and fade in
+        setLocalItem(item);
+        fadeIn();
+      }
+    } else {
+      // If item is null, fade out and clear local item
+      fadeOut(() => setLocalItem(null));
+    }
+  }, [item]);
+
+  useEffect(() => {
+    navigation.setOptions({
+      headerRight: () =>
+        item && (
+          <View className="flex flex-row items-center space-x-2">
+            <Chromecast background="blur" width={22} height={22} />
+            <DownloadItem item={item} />
+            <PlayedStatus item={item} />
+          </View>
+        ),
+    });
+  }, [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;
+    else headerHeightRef.current = 400;
+  }, [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,
+      selectedMediaSource,
+      selectedAudioStream,
+      selectedSubtitleStream,
+      settings,
+    ],
+    queryFn: async () => {
+      if (!api || !user?.Id || !sessionData || !selectedMediaSource?.Id)
+        return null;
+
+      let deviceProfile: any = ios;
+
+      if (castDevice?.deviceId) {
+        deviceProfile = chromecastProfile;
+      } else if (settings?.deviceProfile === "Native") {
+        deviceProfile = native;
+      } else if (settings?.deviceProfile === "Old") {
+        deviceProfile = old;
+      }
+
+      const url = await getStreamUrl({
+        api,
+        userId: user.Id,
+        item,
+        startTimeTicks: item?.UserData?.PlaybackPositionTicks || 0,
+        maxStreamingBitrate: maxBitrate.value,
+        sessionData,
+        deviceProfile,
+        audioStreamIndex: selectedAudioStream,
+        subtitleStreamIndex: selectedSubtitleStream,
+        forceDirectPlay: settings?.forceDirectPlay,
+        height: maxBitrate.height,
+        mediaSourceId: selectedMediaSource.Id,
+      });
+
+      console.info("Stream URL:", url);
+
+      return url;
+    },
+    enabled: !!sessionData && !!api && !!user?.Id && !!item?.Id,
+    staleTime: 0,
+  });
+
+  const logoUrl = useMemo(() => getLogoImageUrlById({ api, item }), [item]);
+
+  const loading = useMemo(() => {
+    return Boolean(
+      isLoading || isFetching || loadingImage || (logoUrl && loadingLogo)
+    );
+  }, [isLoading, isFetching, loadingImage, loadingLogo, logoUrl]);
+
+  const insets = useSafeAreaInsets();
+
+  return (
+    <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 />
+        </View>
+      )}
+      <ParallaxScrollView
+        className={`flex-1 ${loading ? "opacity-0" : "opacity-100"}`}
+        headerHeight={headerHeightRef.current}
+        headerImage={
+          <>
+            <Animated.View style={[animatedStyle, { flex: 1 }]}>
+              {localItem && (
+                <ItemImage
+                  variant={
+                    localItem.Type === "Movie" && logoUrl
+                      ? "Backdrop"
+                      : "Primary"
+                  }
+                  item={localItem}
+                  style={{
+                    width: "100%",
+                    height: "100%",
+                  }}
+                  onLoad={() => setLoadingImage(false)}
+                  onError={() => setLoadingImage(false)}
+                />
+              )}
+            </Animated.View>
+          </>
+        }
+        logo={
+          <>
+            {logoUrl ? (
+              <Image
+                source={{
+                  uri: logoUrl,
+                }}
+                style={{
+                  height: 130,
+                  width: "100%",
+                  resizeMode: "contain",
+                }}
+                onLoad={() => setLoadingLogo(false)}
+                onError={() => setLoadingLogo(false)}
+              />
+            ) : null}
+          </>
+        }
+      >
+        <View className="flex flex-col bg-transparent shrink">
+          <View className="flex flex-col px-4 w-full space-y-2 pt-2 mb-2 shrink">
+            <Animated.View style={[animatedStyle, { flex: 1 }]}>
+              <ItemHeader item={localItem} className="mb-4" />
+              {localItem ? (
+                <View className="flex flex-row items-center justify-start w-full h-16">
+                  <BitrateSelector
+                    className="mr-1"
+                    onChange={(val) => setMaxBitrate(val)}
+                    selected={maxBitrate}
+                  />
+                  <MediaSourceSelector
+                    className="mr-1"
+                    item={localItem}
+                    onChange={setSelectedMediaSource}
+                    selected={selectedMediaSource}
+                  />
+                  {selectedMediaSource && (
+                    <>
+                      <AudioTrackSelector
+                        className="mr-1"
+                        source={selectedMediaSource}
+                        onChange={setSelectedAudioStream}
+                        selected={selectedAudioStream}
+                      />
+                      <SubtitleTrackSelector
+                        source={selectedMediaSource}
+                        onChange={setSelectedSubtitleStream}
+                        selected={selectedSubtitleStream}
+                      />
+                    </>
+                  )}
+                </View>
+              ) : (
+                <View className="h-16">
+                  <View className="bg-neutral-900 h-4 w-2/4 rounded-md mb-1"></View>
+                  <View className="bg-neutral-900 h-10 w-3/4 rounded-lg"></View>
+                </View>
+              )}
+            </Animated.View>
+
+            <PlayButton item={item} url={playbackUrl} className="grow" />
+          </View>
+
+          {item?.Type === "Episode" && (
+            <SeasonEpisodesCarousel item={item} loading={loading} />
+          )}
+
+          <OverviewText text={item?.Overview} className="px-4 mb-4" />
+
+          <CastAndCrew item={item} className="mb-4" loading={loading} />
+
+          {item?.Type === "Episode" && (
+            <CurrentSeries item={item} className="mb-4" />
+          )}
+          <SimilarItems itemId={item?.Id} />
+
+          <View className="h-16"></View>
+        </View>
+      </ParallaxScrollView>
+    </View>
+  );
+});
--- a/components/ItemHeader.tsx
+++ b/components/ItemHeader.tsx
@@ -0,0 +1,38 @@
+import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
+import { View, ViewProps } from "react-native";
+import { MoviesTitleHeader } from "./movies/MoviesTitleHeader";
+import { Ratings } from "./Ratings";
+import { EpisodeTitleHeader } from "./series/EpisodeTitleHeader";
+
+interface Props extends ViewProps {
+  item?: BaseItemDto | null;
+}
+
+export const ItemHeader: React.FC<Props> = ({ item, ...props }) => {
+  if (!item)
+    return (
+      <View
+        className="flex flex-col space-y-1.5 w-full items-start h-24"
+        {...props}
+      >
+        <View className="w-1/3 h-6 bg-neutral-900 rounded" />
+        <View className="w-2/3 h-8 bg-neutral-900 rounded" />
+        <View className="w-2/3 h-4 bg-neutral-900 rounded" />
+        <View className="w-1/4 h-4 bg-neutral-900 rounded" />
+      </View>
+    );
+
+  return (
+    <View
+      style={{
+        minHeight: 96,
+      }}
+      className="flex flex-col"
+      {...props}
+    >
+      <Ratings item={item} className="mb-2" />
+      {item.Type === "Episode" && <EpisodeTitleHeader item={item} />}
+      {item.Type === "Movie" && <MoviesTitleHeader item={item} />}
+    </View>
+  );
+};
--- a/components/MediaSourceSelector.tsx
+++ b/components/MediaSourceSelector.tsx
@@ -0,0 +1,89 @@
+import { tc } from "@/utils/textTools";
+import {
+  BaseItemDto,
+  MediaSourceInfo,
+} from "@jellyfin/sdk/lib/generated-client/models";
+import { useEffect, useMemo } from "react";
+import { TouchableOpacity, View } from "react-native";
+import * as DropdownMenu from "zeego/dropdown-menu";
+import { Text } from "./common/Text";
+
+interface Props extends React.ComponentProps<typeof View> {
+  item: BaseItemDto;
+  onChange: (value: MediaSourceInfo) => void;
+  selected: MediaSourceInfo | null;
+}
+
+export const MediaSourceSelector: React.FC<Props> = ({
+  item,
+  onChange,
+  selected,
+  ...props
+}) => {
+  const mediaSources = useMemo(() => {
+    return item.MediaSources;
+  }, [item]);
+
+  const selectedMediaSource = useMemo(
+    () =>
+      mediaSources
+        ?.find((x) => x.Id === selected?.Id)
+        ?.MediaStreams?.find((x) => x.Type === "Video")?.DisplayTitle || "",
+    [mediaSources, selected]
+  );
+
+  useEffect(() => {
+    if (mediaSources?.length) onChange(mediaSources[0]);
+  }, [mediaSources]);
+
+  const name = (name?: string | null) => {
+    if (name && name.length > 40)
+      return (
+        name.substring(0, 20) + " [...] " + name.substring(name.length - 20)
+      );
+    return name;
+  };
+
+  return (
+    <View
+      className="flex shrink"
+      style={{
+        minWidth: 50,
+      }}
+    >
+      <DropdownMenu.Root>
+        <DropdownMenu.Trigger>
+          <View className="flex flex-col" {...props}>
+            <Text className="opacity-50 mb-1 text-xs">Video</Text>
+            <TouchableOpacity className="bg-neutral-900 h-10 rounded-xl border-neutral-800 border px-3 py-2 flex flex-row items-center ">
+              <Text numberOfLines={1}>{selectedMediaSource}</Text>
+            </TouchableOpacity>
+          </View>
+        </DropdownMenu.Trigger>
+        <DropdownMenu.Content
+          loop={true}
+          side="bottom"
+          align="start"
+          alignOffset={0}
+          avoidCollisions={true}
+          collisionPadding={8}
+          sideOffset={8}
+        >
+          <DropdownMenu.Label>Media sources</DropdownMenu.Label>
+          {mediaSources?.map((source, idx: number) => (
+            <DropdownMenu.Item
+              key={idx.toString()}
+              onSelect={() => {
+                onChange(source);
+              }}
+            >
+              <DropdownMenu.ItemTitle>
+                {name(source.Name)}
+              </DropdownMenu.ItemTitle>
+            </DropdownMenu.Item>
+          ))}
+        </DropdownMenu.Content>
+      </DropdownMenu.Root>
+    </View>
+  );
+};
--- a/components/OverviewText.tsx
+++ b/components/OverviewText.tsx
@@ -10,35 +10,32 @@ interface Props extends ViewProps {

 export const OverviewText: React.FC<Props> = ({
  text,
-  characterLimit = 140,
+  characterLimit = 100,
  ...props
 }) => {
  const [limit, setLimit] = useState(characterLimit);

  if (!text) return null;

-  if (text.length > characterLimit)
-    return (
+  return (
+    <View className="flex flex-col" {...props}>
+      <Text className="text-xl font-bold mb-2">Overview</Text>
      <TouchableOpacity
        onPress={() =>
          setLimit((prev) =>
            prev === characterLimit ? text.length : characterLimit
          )
        }
-        {...props}
      >
-        <View {...props} className="">
+        <View>
          <Text>{tc(text, limit)}</Text>
-          <Text className="text-purple-600 mt-1">
-            {limit === characterLimit ? "Show more" : "Show less"}
-          </Text>
+          {text.length > characterLimit && (
+            <Text className="text-purple-600 mt-1">
+              {limit === characterLimit ? "Show more" : "Show less"}
+            </Text>
+          )}
        </View>
      </TouchableOpacity>
-    );
-
-  return (
-    <View {...props}>
-      <Text>{text}</Text>
    </View>
  );
 };
--- a/components/ParallaxPage.tsx
+++ b/components/ParallaxPage.tsx
@@ -1,27 +1,27 @@
-import { Ionicons } from "@expo/vector-icons";
-import { router } from "expo-router";
-import type { PropsWithChildren, ReactElement } from "react";
-import { TouchableOpacity, View } from "react-native";
+import { LinearGradient } from "expo-linear-gradient";
+import { type PropsWithChildren, type ReactElement } from "react";
+import { View, ViewProps } from "react-native";
 import Animated, {
  interpolate,
  useAnimatedRef,
  useAnimatedStyle,
  useScrollViewOffset,
 } from "react-native-reanimated";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { Chromecast } from "./Chromecast";

-const HEADER_HEIGHT = 400;
-
-type Props = PropsWithChildren<{
+interface Props extends ViewProps {
  headerImage: ReactElement;
  logo?: ReactElement;
-}>;
+  episodePoster?: ReactElement;
+  headerHeight?: number;
+}

-export const ParallaxScrollView: React.FC<Props> = ({
+export const ParallaxScrollView: React.FC<PropsWithChildren<Props>> = ({
  children,
  headerImage,
+  episodePoster,
+  headerHeight = 400,
  logo,
+  ...props
 }: Props) => {
  const scrollRef = useAnimatedRef<Animated.ScrollView>();
  const scrollOffset = useScrollViewOffset(scrollRef);
@@ -32,14 +32,14 @@ export const ParallaxScrollView: React.FC<Props> = ({
        {
          translateY: interpolate(
            scrollOffset.value,
-            [-HEADER_HEIGHT, 0, HEADER_HEIGHT],
-            [-HEADER_HEIGHT / 2, 0, HEADER_HEIGHT * 0.75]
+            [-headerHeight, 0, headerHeight],
+            [-headerHeight / 2, 0, headerHeight * 0.75]
          ),
        },
        {
          scale: interpolate(
            scrollOffset.value,
-            [-HEADER_HEIGHT, 0, HEADER_HEIGHT],
+            [-headerHeight, 0, headerHeight],
            [2, 1, 1]
          ),
        },
@@ -47,10 +47,8 @@ export const ParallaxScrollView: React.FC<Props> = ({
    };
  });

-  const inset = useSafeAreaInsets();
-
  return (
-    <View className="flex-1">
+    <View className="flex-1" {...props}>
      <Animated.ScrollView
        style={{
          position: "relative",
@@ -59,7 +57,13 @@ export const ParallaxScrollView: React.FC<Props> = ({
        scrollEventThrottle={16}
      >
        {logo && (
-          <View className="absolute top-[250px] h-[130px] left-0 w-full z-40 px-4 flex justify-center items-center">
+          <View
+            style={{
+              top: headerHeight - 200,
+              height: 130,
+            }}
+            className="absolute left-0 w-full z-40 px-4 flex justify-center items-center"
+          >
            {logo}
          </View>
        )}
@@ -67,7 +71,7 @@ export const ParallaxScrollView: React.FC<Props> = ({
        <Animated.View
          style={[
            {
-              height: HEADER_HEIGHT,
+              height: headerHeight,
              backgroundColor: "black",
            },
            headerAnimatedStyle,
@@ -75,7 +79,35 @@ export const ParallaxScrollView: React.FC<Props> = ({
        >
          {headerImage}
        </Animated.View>
-        <View className="flex-1 overflow-hidden bg-black pb-24">
+
+        <View
+          style={{
+            top: -50,
+          }}
+          className="relative flex-1  bg-transparent pb-24"
+        >
+          <LinearGradient
+            // Background Linear Gradient
+            colors={["transparent", "rgba(0,0,0,1)"]}
+            style={{
+              position: "absolute",
+              left: 0,
+              right: 0,
+              top: -150,
+              height: 200,
+            }}
+          />
+          <View
+            // Background Linear Gradient
+            style={{
+              position: "absolute",
+              left: 0,
+              right: 0,
+              top: 50,
+              height: "100%",
+              backgroundColor: "black",
+            }}
+          />
          {children}
        </View>
      </Animated.ScrollView>
--- a/components/PlayButton.tsx
+++ b/components/PlayButton.tsx
@@ -1,14 +1,27 @@
 import { usePlayback } from "@/providers/PlaybackProvider";
+import { itemThemeColorAtom } from "@/utils/atoms/primaryColor";
 import { runtimeTicksToMinutes } from "@/utils/time";
 import { useActionSheet } from "@expo/react-native-action-sheet";
 import { Feather, Ionicons } from "@expo/vector-icons";
 import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
-import { View } from "react-native";
+import { useAtom } from "jotai";
+import { useEffect, useMemo } from "react";
+import { TouchableOpacity, View } from "react-native";
 import CastContext, {
  PlayServicesState,
  useRemoteMediaClient,
  useMediaStatus,
 } from "react-native-google-cast";
+import Animated, {
+  Easing,
+  interpolate,
+  interpolateColor,
+  useAnimatedReaction,
+  useAnimatedStyle,
+  useDerivedValue,
+  useSharedValue,
+  withTiming,
+} from "react-native-reanimated";
 import { Button } from "./Button";
 import { isCancel } from "axios";

@@ -17,23 +30,36 @@ interface Props extends React.ComponentProps<typeof Button> {
  url?: string | null;
 }

+const ANIMATION_DURATION = 500;
+const MIN_PLAYBACK_WIDTH = 15;
+
 export const PlayButton: React.FC<Props> = ({ item, url, ...props }) => {
  const { showActionSheetWithOptions } = useActionSheet();
-  const client = useRemoteMediaClient();
  const { setCurrentlyPlayingState } = usePlayback();
  const mediaStatus = useMediaStatus()

+  const client = useRemoteMediaClient();
+
+  const [colorAtom] = useAtom(itemThemeColorAtom);
+
+  const memoizedItem = useMemo(() => item, [item?.Id]); // Memoize the item
+  const memoizedColor = useMemo(() => colorAtom, [colorAtom]); // Memoize the color
+
+  const startWidth = useSharedValue(0);
+  const targetWidth = useSharedValue(0);
+  const endColor = useSharedValue(memoizedColor);
+  const startColor = useSharedValue(memoizedColor);
+  const widthProgress = useSharedValue(0);
+  const colorChangeProgress = useSharedValue(0);
+
  const onPress = async () => {
    if (!url || !item) return;
-
    if (!client) {
      setCurrentlyPlayingState({ item, url });
      return;
    }
-
    const options = ["Chromecast", "Device", "Cancel"];
    const cancelButtonIndex = 2;
-
    showActionSheetWithOptions(
      {
        options,
@@ -87,18 +113,141 @@ export const PlayButton: React.FC<Props> = ({ item, url, ...props }) => {
    );
  };

+  const derivedTargetWidth = useDerivedValue(() => {
+    if (!memoizedItem || !memoizedItem.RunTimeTicks) return 0;
+    const userData = memoizedItem.UserData;
+    if (userData && userData.PlaybackPositionTicks) {
+      return userData.PlaybackPositionTicks > 0
+        ? Math.max(
+            (userData.PlaybackPositionTicks / memoizedItem.RunTimeTicks) * 100,
+            MIN_PLAYBACK_WIDTH
+          )
+        : 0;
+    }
+    return 0;
+  }, [memoizedItem]);
+
+  useAnimatedReaction(
+    () => derivedTargetWidth.value,
+    (newWidth) => {
+      targetWidth.value = newWidth;
+      widthProgress.value = 0;
+      widthProgress.value = withTiming(1, {
+        duration: ANIMATION_DURATION,
+        easing: Easing.bezier(0.7, 0, 0.3, 1.0),
+      });
+    },
+    [item]
+  );
+
+  useAnimatedReaction(
+    () => memoizedColor,
+    (newColor) => {
+      endColor.value = newColor;
+      colorChangeProgress.value = 0;
+      colorChangeProgress.value = withTiming(1, {
+        duration: ANIMATION_DURATION,
+        easing: Easing.bezier(0.9, 0, 0.31, 0.99),
+      });
+    },
+    [memoizedColor]
+  );
+
+  useEffect(() => {
+    const timeout_2 = setTimeout(() => {
+      startColor.value = memoizedColor;
+      startWidth.value = targetWidth.value;
+    }, ANIMATION_DURATION);
+
+    return () => {
+      clearTimeout(timeout_2);
+    };
+  }, [memoizedColor, memoizedItem]);
+
+  /**
+   * ANIMATED STYLES
+   */
+  const animatedAverageStyle = useAnimatedStyle(() => ({
+    backgroundColor: interpolateColor(
+      colorChangeProgress.value,
+      [0, 1],
+      [startColor.value.average, endColor.value.average]
+    ),
+  }));
+
+  const animatedPrimaryStyle = useAnimatedStyle(() => ({
+    backgroundColor: interpolateColor(
+      colorChangeProgress.value,
+      [0, 1],
+      [startColor.value.primary, endColor.value.primary]
+    ),
+  }));
+
+  const animatedWidthStyle = useAnimatedStyle(() => ({
+    width: `${interpolate(
+      widthProgress.value,
+      [0, 1],
+      [startWidth.value, targetWidth.value]
+    )}%`,
+  }));
+
+  const animatedTextStyle = useAnimatedStyle(() => ({
+    color: interpolateColor(
+      colorChangeProgress.value,
+      [0, 1],
+      [startColor.value.text, endColor.value.text]
+    ),
+  }));
+  /**
+   * *********************
+   */
+
  return (
-    <Button
+    <TouchableOpacity
+      accessibilityLabel="Play button"
+      accessibilityHint="Tap to play the media"
      onPress={onPress}
-      iconRight={
-        <View className="flex flex-row items-center space-x-2">
-          <Ionicons name="play-circle" size={24} color="white" />
-          {client && <Feather name="cast" size={22} color="white" />}
-        </View>
-      }
+      className="relative"
      {...props}
    >
-      {runtimeTicksToMinutes(item?.RunTimeTicks)}
-    </Button>
+      <View className="absolute w-full h-full top-0 left-0 rounded-xl z-10 overflow-hidden">
+        <Animated.View
+          style={[
+            animatedPrimaryStyle,
+            animatedWidthStyle,
+            {
+              height: "100%",
+            },
+          ]}
+        />
+      </View>
+
+      <Animated.View
+        style={[animatedAverageStyle]}
+        className="absolute w-full h-full top-0 left-0 rounded-xl"
+      />
+      <View
+        style={{
+          borderWidth: 1,
+          borderColor: colorAtom.primary,
+          borderStyle: "solid",
+        }}
+        className="flex flex-row items-center justify-center bg-transparent rounded-xl z-20 h-12 w-full "
+      >
+        <View className="flex flex-row items-center space-x-2">
+          <Animated.Text style={[animatedTextStyle, { fontWeight: "bold" }]}>
+            {runtimeTicksToMinutes(item?.RunTimeTicks)}
+          </Animated.Text>
+          <Animated.Text style={animatedTextStyle}>
+            <Ionicons name="play-circle" size={24} />
+          </Animated.Text>
+          {client && (
+            <Animated.Text style={animatedTextStyle}>
+              <Feather name="cast" size={22} />
+            </Animated.Text>
+          )}
+        </View>
+      </View>
+    </TouchableOpacity>
  );
 };
--- a/components/PlayedStatus.tsx
+++ b/components/PlayedStatus.tsx
@@ -7,9 +7,13 @@ import { useQueryClient } from "@tanstack/react-query";
 import * as Haptics from "expo-haptics";
 import { useAtom } from "jotai";
 import React from "react";
-import { TouchableOpacity, View } from "react-native";
+import { TouchableOpacity, View, ViewProps } from "react-native";

-export const PlayedStatus: React.FC<{ item: BaseItemDto }> = ({ item }) => {
+interface Props extends ViewProps {
+  item: BaseItemDto;
+}
+
+export const PlayedStatus: React.FC<Props> = ({ item, ...props }) => {
  const [api] = useAtom(apiAtom);
  const [user] = useAtom(userAtom);

@@ -37,7 +41,10 @@ export const PlayedStatus: React.FC<{ item: BaseItemDto }> = ({ item }) => {
  };

  return (
-    <View>
+    <View
+      className=" bg-neutral-800/80 rounded-full h-10 w-10 flex items-center justify-center"
+      {...props}
+    >
      {item.UserData?.Played ? (
        <TouchableOpacity
          onPress={async () => {
@@ -51,7 +58,7 @@ export const PlayedStatus: React.FC<{ item: BaseItemDto }> = ({ item }) => {
          }}
        >
          <View className="rounded h-10 aspect-square flex items-center justify-center">
-            <Ionicons name="checkmark-circle" size={30} color="white" />
+            <Ionicons name="checkmark-circle" size={24} color="white" />
          </View>
        </TouchableOpacity>
      ) : (
@@ -67,7 +74,7 @@ export const PlayedStatus: React.FC<{ item: BaseItemDto }> = ({ item }) => {
          }}
        >
          <View className="rounded h-10 aspect-square flex items-center justify-center">
-            <Ionicons name="checkmark-circle-outline" size={30} color="white" />
+            <Ionicons name="checkmark-circle-outline" size={24} color="white" />
          </View>
        </TouchableOpacity>
      )}
--- a/components/Ratings.tsx
+++ b/components/Ratings.tsx
@@ -5,12 +5,13 @@ import { Ionicons } from "@expo/vector-icons";
 import { Image } from "expo-image";

 interface Props extends ViewProps {
-  item: BaseItemDto;
+  item?: BaseItemDto | null;
 }

-export const Ratings: React.FC<Props> = ({ item }) => {
+export const Ratings: React.FC<Props> = ({ item, ...props }) => {
+  if (!item) return null;
  return (
-    <View className="flex flex-row items-center justify-center mt-2 space-x-2">
+    <View className="flex flex-row items-center mt-2 space-x-2" {...props}>
      {item.OfficialRating && (
        <Badge text={item.OfficialRating} variant="gray" />
      )}
--- a/components/SimilarItems.tsx
+++ b/components/SimilarItems.tsx
@@ -6,23 +6,26 @@ import { useQuery } from "@tanstack/react-query";
 import { router } from "expo-router";
 import { useAtom } from "jotai";
 import { useMemo } from "react";
-import { ScrollView, TouchableOpacity, View } from "react-native";
+import { ScrollView, TouchableOpacity, View, ViewProps } from "react-native";
 import { Text } from "./common/Text";
 import { ItemCardText } from "./ItemCardText";
 import { Loader } from "./Loader";

-type SimilarItemsProps = {
-  itemId: string;
-};
+interface SimilarItemsProps extends ViewProps {
+  itemId?: string | null;
+}

-export const SimilarItems: React.FC<SimilarItemsProps> = ({ itemId }) => {
+export const SimilarItems: React.FC<SimilarItemsProps> = ({
+  itemId,
+  ...props
+}) => {
  const [api] = useAtom(apiAtom);
  const [user] = useAtom(userAtom);

  const { data: similarItems, isLoading } = useQuery<BaseItemDto[]>({
    queryKey: ["similarItems", itemId],
    queryFn: async () => {
-      if (!api || !user?.Id) return [];
+      if (!api || !user?.Id || !itemId) return [];
      const response = await getLibraryApi(api).getSimilarItems({
        itemId,
        userId: user.Id,
@@ -41,8 +44,8 @@ export const SimilarItems: React.FC<SimilarItemsProps> = ({ itemId }) => {
  );

  return (
-    <View>
-      <Text className="px-4 text-2xl font-bold mb-2">Similar items</Text>
+    <View {...props}>
+      <Text className="px-4 text-lg font-bold mb-2">Similar items</Text>
      {isLoading ? (
        <View className="my-12">
          <Loader />
@@ -53,7 +56,7 @@ export const SimilarItems: React.FC<SimilarItemsProps> = ({ itemId }) => {
            {movies.map((item) => (
              <TouchableOpacity
                key={item.Id}
-                onPress={() => router.push(`/items/${item.Id}`)}
+                onPress={() => router.push(`/items/page?id=${item.Id}`)}
                className="flex flex-col w-32"
              >
                <MoviePoster item={item} />
@@ -63,7 +66,9 @@ export const SimilarItems: React.FC<SimilarItemsProps> = ({ itemId }) => {
          </View>
        </ScrollView>
      )}
-      {movies.length === 0 && <Text className="px-4">No similar items</Text>}
+      {movies.length === 0 && (
+        <Text className="px-4 text-neutral-500">No similar items</Text>
+      )}
    </View>
  );
 };
--- a/components/SubtitleTrackSelector.tsx
+++ b/components/SubtitleTrackSelector.tsx
@@ -2,29 +2,29 @@ import { TouchableOpacity, View } from "react-native";
 import * as DropdownMenu from "zeego/dropdown-menu";
 import { Text } from "./common/Text";
 import { atom, useAtom } from "jotai";
-import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
+import {
+  BaseItemDto,
+  MediaSourceInfo,
+} from "@jellyfin/sdk/lib/generated-client/models";
 import { useEffect, useMemo } from "react";
 import { MediaStream } from "@jellyfin/sdk/lib/generated-client/models";
 import { tc } from "@/utils/textTools";

 interface Props extends React.ComponentProps<typeof View> {
-  item: BaseItemDto;
+  source: MediaSourceInfo;
  onChange: (value: number) => void;
  selected: number;
 }

 export const SubtitleTrackSelector: React.FC<Props> = ({
-  item,
+  source,
  onChange,
  selected,
  ...props
 }) => {
  const subtitleStreams = useMemo(
-    () =>
-      item.MediaSources?.[0].MediaStreams?.filter(
-        (x) => x.Type === "Subtitle"
-      ) ?? [],
-    [item]
+    () => source.MediaStreams?.filter((x) => x.Type === "Subtitle") ?? [],
+    [source]
  );

  const selectedSubtitleSteam = useMemo(
@@ -33,7 +33,7 @@ export const SubtitleTrackSelector: React.FC<Props> = ({
  );

  useEffect(() => {
-    const index = item.MediaSources?.[0].DefaultSubtitleStreamIndex;
+    const index = source.DefaultSubtitleStreamIndex;
    if (index !== undefined && index !== null) {
      onChange(index);
    } else {
@@ -44,20 +44,24 @@ export const SubtitleTrackSelector: React.FC<Props> = ({
  if (subtitleStreams.length === 0) return null;

  return (
-    <View className="flex flex-row items-center justify-between" {...props}>
+    <View
+      className="flex col shrink justify-start place-self-start items-start"
+      style={{
+        minWidth: 60,
+        maxWidth: 200,
+      }}
+    >
      <DropdownMenu.Root>
        <DropdownMenu.Trigger>
-          <View className="flex flex-col mb-2">
-            <Text className="opacity-50 mb-1 text-xs">Subtitles</Text>
-            <View className="flex flex-row">
-              <TouchableOpacity className="bg-neutral-900 max-w-32 h-10 rounded-xl border-neutral-900 border px-3 py-2 flex flex-row items-center justify-between">
-                <Text className="">
-                  {selectedSubtitleSteam
-                    ? tc(selectedSubtitleSteam?.DisplayTitle, 13)
-                    : "None"}
-                </Text>
-              </TouchableOpacity>
-            </View>
+          <View className="flex flex-col " {...props}>
+            <Text className="opacity-50 mb-1 text-xs">Subtitle</Text>
+            <TouchableOpacity className="bg-neutral-900  h-10 rounded-xl border-neutral-800 border px-3 py-2 flex flex-row items-center justify-between">
+              <Text className=" ">
+                {selectedSubtitleSteam
+                  ? tc(selectedSubtitleSteam?.DisplayTitle, 7)
+                  : "None"}
+              </Text>
+            </TouchableOpacity>
          </View>
        </DropdownMenu.Trigger>
        <DropdownMenu.Content
@@ -69,7 +73,7 @@ export const SubtitleTrackSelector: React.FC<Props> = ({
          collisionPadding={8}
          sideOffset={8}
        >
-          <DropdownMenu.Label>Subtitles</DropdownMenu.Label>
+          <DropdownMenu.Label>Subtitle tracks</DropdownMenu.Label>
          <DropdownMenu.Item
            key={"-1"}
            onSelect={() => {
--- a/components/common/HeaderBackButton.tsx
+++ b/components/common/HeaderBackButton.tsx
@@ -36,7 +36,7 @@ export const HeaderBackButton: React.FC<Props> = ({
            className="drop-shadow-2xl"
            name="arrow-back"
            size={24}
-            color="#077DF2"
+            color="white"
          />
        </TouchableOpacity>
      </BlurView>
@@ -45,7 +45,7 @@ export const HeaderBackButton: React.FC<Props> = ({
  return (
    <TouchableOpacity
      onPress={() => router.back()}
-      className=" bg-black rounded-full p-2 border border-neutral-900"
+      className=" bg-neutral-800/80 rounded-full p-2"
      {...touchableOpacityProps}
    >
      <Ionicons
--- a/components/common/HorrizontalScroll.tsx
+++ b/components/common/HorrizontalScroll.tsx
@@ -1,16 +1,14 @@
 import { FlashList, FlashListProps } from "@shopify/flash-list";
-import React, { useEffect } from "react";
+import React, { forwardRef, useImperativeHandle, useRef } from "react";
 import { View, ViewStyle } from "react-native";
-import Animated, {
-  useAnimatedStyle,
-  useSharedValue,
-  withTiming,
-} from "react-native-reanimated";
-import { Loader } from "../Loader";
 import { Text } from "./Text";

 type PartialExcept<T, K extends keyof T> = Partial<T> & Pick<T, K>;

+export interface HorizontalScrollRef {
+  scrollToIndex: (index: number, viewOffset: number) => void;
+}
+
 interface HorizontalScrollProps<T>
  extends PartialExcept<
    Omit<FlashListProps<T>, "renderItem">,
@@ -23,61 +21,69 @@ interface HorizontalScrollProps<T>
  loadingContainerStyle?: ViewStyle;
  height?: number;
  loading?: boolean;
+  extraData?: any;
 }

-export function HorizontalScroll<T>({
-  data = [],
-  renderItem,
-  containerStyle,
-  contentContainerStyle,
-  loadingContainerStyle,
-  loading = false,
-  height = 164,
-  ...props
-}: HorizontalScrollProps<T>): React.ReactElement {
-  const animatedOpacity = useSharedValue(0);
-  const animatedStyle1 = useAnimatedStyle(() => {
-    return {
-      opacity: withTiming(animatedOpacity.value, { duration: 250 }),
-    };
-  });
+export const HorizontalScroll = forwardRef<
+  HorizontalScrollRef,
+  HorizontalScrollProps<any>
+>(
+  <T,>(
+    {
+      data = [],
+      renderItem,
+      containerStyle,
+      contentContainerStyle,
+      loadingContainerStyle,
+      loading = false,
+      height = 164,
+      extraData,
+      ...props
+    }: HorizontalScrollProps<T>,
+    ref: React.ForwardedRef<HorizontalScrollRef>
+  ) => {
+    const flashListRef = useRef<FlashList<T>>(null);

-  useEffect(() => {
-    if (data) {
-      animatedOpacity.value = 1;
-    }
-  }, [data]);
+    useImperativeHandle(ref!, () => ({
+      scrollToIndex: (index: number, viewOffset: number) => {
+        flashListRef.current?.scrollToIndex({
+          index,
+          animated: true,
+          viewPosition: 0,
+          viewOffset,
+        });
+      },
+    }));

-  if (data === undefined || data === null || loading) {
-    return (
-      <View
-        style={[
-          {
-            flex: 1,
-            justifyContent: "center",
-            alignItems: "center",
-          },
-          loadingContainerStyle,
-        ]}
-      >
-        <Loader />
+    const renderFlashListItem = ({
+      item,
+      index,
+    }: {
+      item: T;
+      index: number;
+    }) => (
+      <View className="mr-2">
+        <React.Fragment>{renderItem(item, index)}</React.Fragment>
      </View>
    );
-  }

-  const renderFlashListItem = ({ item, index }: { item: T; index: number }) => (
-    <View className="mr-2">
-      <React.Fragment>{renderItem(item, index)}</React.Fragment>
-    </View>
-  );
+    if (!data || loading) {
+      return (
+        <View className="px-4 mb-2">
+          <View className="bg-neutral-950 h-24 w-full rounded-md mb-2"></View>
+          <View className="bg-neutral-950 h-10 w-full rounded-md mb-1"></View>
+        </View>
+      );
+    }

-  return (
-    <Animated.View style={[containerStyle, animatedStyle1]}>
-      <FlashList
+    return (
+      <FlashList<T>
+        ref={flashListRef}
        data={data}
+        extraData={extraData}
        renderItem={renderFlashListItem}
        horizontal
-        estimatedItemSize={100}
+        estimatedItemSize={200}
        showsHorizontalScrollIndicator={false}
        contentContainerStyle={{
          paddingHorizontal: 16,
@@ -90,6 +96,6 @@ export function HorizontalScroll<T>({
        )}
        {...props}
      />
-    </Animated.View>
-  );
-}
+    );
+  }
+);
--- a/components/common/ItemImage.tsx
+++ b/components/common/ItemImage.tsx
@@ -0,0 +1,97 @@
+import { useImageColors } from "@/hooks/useImageColors";
+import { apiAtom } from "@/providers/JellyfinProvider";
+import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
+import { Image, ImageProps, ImageSource } from "expo-image";
+import { useAtom } from "jotai";
+import { useMemo } from "react";
+
+interface Props extends ImageProps {
+  item: BaseItemDto;
+  variant?: "Backdrop" | "Primary" | "Thumb" | "Logo";
+  quality?: number;
+  width?: number;
+}
+
+export const ItemImage: React.FC<Props> = ({
+  item,
+  variant,
+  quality = 90,
+  width = 1000,
+  ...props
+}) => {
+  const [api] = useAtom(apiAtom);
+
+  const source = useMemo(() => {
+    if (!api) return null;
+
+    let tag: string | null | undefined;
+    let blurhash: string | null | undefined;
+    let src: ImageSource | null = null;
+
+    switch (variant) {
+      case "Backdrop":
+        if (item.Type === "Episode") {
+          tag = item.ParentBackdropImageTags?.[0];
+          if (!tag) break;
+          blurhash = item.ImageBlurHashes?.Backdrop?.[tag];
+          src = {
+            uri: `${api.basePath}/Items/${item.ParentBackdropItemId}/Images/Backdrop/0?quality=${quality}&tag=${tag}`,
+            blurhash,
+          };
+          break;
+        }
+
+        tag = item.BackdropImageTags?.[0];
+        if (!tag) break;
+        blurhash = item.ImageBlurHashes?.Backdrop?.[tag];
+        src = {
+          uri: `${api.basePath}/Items/${item.Id}/Images/Backdrop/0?quality=${quality}&tag=${tag}`,
+          blurhash,
+        };
+        break;
+      case "Primary":
+        tag = item.ImageTags?.["Primary"];
+        if (!tag) break;
+        blurhash = item.ImageBlurHashes?.Primary?.[tag];
+
+        src = {
+          uri: `${api.basePath}/Items/${item.Id}/Images/Primary?quality=${quality}&tag=${tag}`,
+          blurhash,
+        };
+        break;
+      case "Thumb":
+        tag = item.ImageTags?.["Thumb"];
+        if (!tag) break;
+        blurhash = item.ImageBlurHashes?.Thumb?.[tag];
+
+        src = {
+          uri: `${api.basePath}/Items/${item.Id}/Images/Backdrop?quality=${quality}&tag=${tag}`,
+          blurhash,
+        };
+        break;
+      default:
+        tag = item.ImageTags?.["Primary"];
+        src = {
+          uri: `${api.basePath}/Items/${item.Id}/Images/Primary?quality=${quality}&tag=${tag}`,
+        };
+        break;
+    }
+
+    return src;
+  }, [item.ImageTags]);
+
+  useImageColors(source?.uri);
+
+  return (
+    <Image
+      transition={300}
+      placeholder={{
+        blurhash: source?.blurhash,
+      }}
+      source={{
+        uri: source?.uri,
+      }}
+      {...props}
+    />
+  );
+};
--- a/components/common/TouchableItemRouter.tsx
+++ b/components/common/TouchableItemRouter.tsx
@@ -22,8 +22,6 @@ export const TouchableItemRouter: React.FC<PropsWithChildren<Props>> = ({
    return (
      <TouchableOpacity
        onPress={() => {
-          console.log("[0]", item.Type);
-
          Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);

          if (item.Type === "Series") {
@@ -72,7 +70,7 @@ export const TouchableItemRouter: React.FC<PropsWithChildren<Props>> = ({
          //   return;
          // }

-          router.push(`/(auth)/(tabs)/${from}/items/${item.Id}`);
+          router.push(`/(auth)/(tabs)/${from}/items/page?id=${item.Id}`);
        }}
        {...props}
      >
--- a/components/downloads/SeriesCard.tsx
+++ b/components/downloads/SeriesCard.tsx
@@ -25,7 +25,7 @@ export const SeriesCard: React.FC<{ items: BaseItemDto[] }> = ({ items }) => {
  return (
    <View>
      <View className="flex flex-row items-center justify-between">
-        <Text className="text-2xl font-bold">{items[0].SeriesName}</Text>
+        <Text className="text-2xl font-bold shrink">{items[0].SeriesName}</Text>
        <View className="bg-purple-600 rounded-full h-6 w-6 flex items-center justify-center">
          <Text className="text-xs font-bold">{items.length}</Text>
        </View>
--- a/components/home/LargeMovieCarousel.tsx
+++ b/components/home/LargeMovieCarousel.tsx
@@ -47,7 +47,7 @@ export const LargeMovieCarousel: React.FC<Props> = ({ ...props }) => {
      return response.data.Items?.[0].Id || null;
    },
    enabled: !!api && !!user?.Id && settings?.usePopularPlugin === true,
-    staleTime: 0,
+    staleTime: 60 * 1000,
  });

  const onPressPagination = (index: number) => {
@@ -75,7 +75,7 @@ export const LargeMovieCarousel: React.FC<Props> = ({ ...props }) => {
      return response.data.Items || [];
    },
    enabled: !!api && !!user?.Id && !!sf_carousel,
-    staleTime: 0,
+    staleTime: 60 * 1000,
  });

  const width = Dimensions.get("screen").width;
--- a/components/home/ScrollingCollectionList.tsx
+++ b/components/home/ScrollingCollectionList.tsx
@@ -6,50 +6,72 @@ import ContinueWatchingPoster from "../ContinueWatchingPoster";
 import { ItemCardText } from "../ItemCardText";
 import { HorizontalScroll } from "../common/HorrizontalScroll";
 import { TouchableItemRouter } from "../common/TouchableItemRouter";
+import {
+  type QueryKey,
+  useQuery,
+  type QueryFunction,
+} from "@tanstack/react-query";
+import SeriesPoster from "../posters/SeriesPoster";
+import { EpisodePoster } from "../posters/EpisodePoster";

 interface Props extends ViewProps {
-  title: string;
-  loading?: boolean;
+  title?: string | null;
  orientation?: "horizontal" | "vertical";
-  data?: BaseItemDto[] | null;
  height?: "small" | "large";
  disabled?: boolean;
+  queryKey: QueryKey;
+  queryFn: QueryFunction<BaseItemDto[]>;
 }

 export const ScrollingCollectionList: React.FC<Props> = ({
  title,
-  data,
  orientation = "vertical",
  height = "small",
-  loading = false,
  disabled = false,
+  queryFn,
+  queryKey,
  ...props
 }) => {
-  if (disabled) return null;
+  const { data, isLoading } = useQuery({
+    queryKey,
+    queryFn,
+    enabled: !disabled,
+    staleTime: 60 * 1000,
+  });
+
+  if (disabled || !title) return null;

  return (
    <View {...props}>
      <Text className="px-4 text-2xl font-bold mb-2 text-neutral-100">
        {title}
      </Text>
-      <HorizontalScroll<BaseItemDto>
+      <HorizontalScroll
        data={data}
        height={orientation === "vertical" ? 247 : 164}
-        loading={loading}
+        loading={isLoading}
        renderItem={(item, index) => (
          <TouchableItemRouter
            key={index}
            item={item}
            className={`flex flex-col
-              ${orientation === "vertical" ? "w-28" : "w-44"}
+              ${orientation === "horizontal" ? "w-44" : "w-28"}
            `}
          >
            <View>
-              {orientation === "vertical" ? (
-                <MoviePoster item={item} />
-              ) : (
+              {item.Type === "Episode" && orientation === "horizontal" && (
                <ContinueWatchingPoster item={item} />
              )}
+              {item.Type === "Episode" && orientation === "vertical" && (
+                <SeriesPoster item={item} />
+              )}
+              {item.Type === "Movie" && orientation === "horizontal" && (
+                <ContinueWatchingPoster item={item} />
+              )}
+              {item.Type === "Movie" && orientation === "vertical" && (
+                <MoviePoster item={item} />
+              )}
+              {item.Type === "Series" && <SeriesPoster item={item} />}
              <ItemCardText item={item} />
            </View>
          </TouchableItemRouter>
--- a/components/library/LibraryItemCard.tsx
+++ b/components/library/LibraryItemCard.tsx
@@ -107,7 +107,7 @@ export const LibraryItemCard: React.FC<Props> = ({ library, ...props }) => {
          });
        })
        .catch((error) => {
-          console.log("Error getting colors", error);
+          console.error("Error getting colors", error);
        });
    }
  }, [url]);
--- a/components/medialists/MediaListSection.tsx
+++ b/components/medialists/MediaListSection.tsx
@@ -12,22 +12,38 @@ import { Text } from "../common/Text";
 import { TouchableItemRouter } from "../common/TouchableItemRouter";
 import { ItemCardText } from "../ItemCardText";
 import MoviePoster from "../posters/MoviePoster";
+import {
+  type QueryKey,
+  type QueryFunction,
+  useQuery,
+} from "@tanstack/react-query";

 interface Props extends ViewProps {
-  collection: BaseItemDto;
+  queryKey: QueryKey;
+  queryFn: QueryFunction<BaseItemDto>;
 }

-export const MediaListSection: React.FC<Props> = ({ collection, ...props }) => {
+export const MediaListSection: React.FC<Props> = ({
+  queryFn,
+  queryKey,
+  ...props
+}) => {
  const [api] = useAtom(apiAtom);
  const [user] = useAtom(userAtom);

+  const { data: collection, isLoading } = useQuery({
+    queryKey,
+    queryFn,
+    staleTime: 60 * 1000,
+  });
+
  const fetchItems = useCallback(
    async ({
      pageParam,
    }: {
      pageParam: number;
    }): Promise<BaseItemDtoQueryResult | null> => {
-      if (!api || !user?.Id) return null;
+      if (!api || !user?.Id || !collection) return null;

      const response = await getItemsApi(api).getItems({
        userId: user.Id,
@@ -38,7 +54,7 @@ export const MediaListSection: React.FC<Props> = ({ collection, ...props }) => {

      return response.data;
    },
-    [api, user?.Id, collection.Id]
+    [api, user?.Id, collection?.Id]
  );

  if (!collection) return null;
--- a/components/movies/MoviesTitleHeader.tsx
+++ b/components/movies/MoviesTitleHeader.tsx
@@ -1,17 +1,16 @@
-import { TouchableOpacity, View, ViewProps } from "react-native";
 import { Text } from "@/components/common/Text";
-import { useRouter } from "expo-router";
 import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
+import { View, ViewProps } from "react-native";

 interface Props extends ViewProps {
  item: BaseItemDto;
 }

 export const MoviesTitleHeader: React.FC<Props> = ({ item, ...props }) => {
-  const router = useRouter();
  return (
-    <View className="flex flex-row items-center self-center px-4" {...props}>
-      <Text className="text-center font-bold text-2xl mr-2">{item?.Name}</Text>
+    <View {...props}>
+      <Text className=" font-bold text-2xl mb-1">{item?.Name}</Text>
+      <Text className=" opacity-50">{item?.ProductionYear}</Text>
    </View>
  );
 };
--- a/components/music/SongsListItem.tsx
+++ b/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,
--- a/components/posters/EpisodePoster.tsx
+++ b/components/posters/EpisodePoster.tsx
@@ -0,0 +1,64 @@
+import { apiAtom } from "@/providers/JellyfinProvider";
+import { getPrimaryImageUrl } from "@/utils/jellyfin/image/getPrimaryImageUrl";
+import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
+import { Image } from "expo-image";
+import { useAtom } from "jotai";
+import { useMemo, useState } from "react";
+import { View } from "react-native";
+import { WatchedIndicator } from "@/components/WatchedIndicator";
+
+type MoviePosterProps = {
+  item: BaseItemDto;
+  showProgress?: boolean;
+};
+
+export const EpisodePoster: React.FC<MoviePosterProps> = ({
+  item,
+  showProgress = false,
+}) => {
+  const [api] = useAtom(apiAtom);
+
+  const url = useMemo(() => {
+    if (item.Type === "Episode") {
+      return `${api?.basePath}/Items/${item.ParentBackdropItemId}/Images/Thumb?fillHeight=389&quality=80&tag=${item.ParentThumbImageTag}`;
+    }
+  }, [item]);
+
+  const [progress, setProgress] = useState(
+    item.UserData?.PlayedPercentage || 0
+  );
+
+  const blurhash = useMemo(() => {
+    const key = item.ImageTags?.["Primary"] as string;
+    return item.ImageBlurHashes?.["Primary"]?.[key];
+  }, [item]);
+
+  return (
+    <View className="relative rounded-lg overflow-hidden border border-neutral-900">
+      <Image
+        placeholder={{
+          blurhash,
+        }}
+        key={item.Id}
+        id={item.Id}
+        source={
+          url
+            ? {
+                uri: url,
+              }
+            : null
+        }
+        cachePolicy={"memory-disk"}
+        contentFit="cover"
+        style={{
+          aspectRatio: "10/15",
+          width: "100%",
+        }}
+      />
+      <WatchedIndicator item={item} />
+      {showProgress && progress > 0 && (
+        <View className="h-1 bg-red-600 w-full"></View>
+      )}
+    </View>
+  );
+};
--- a/components/posters/MoviePoster.tsx
+++ b/components/posters/MoviePoster.tsx
@@ -1,3 +1,4 @@
+import { WatchedIndicator } from "@/components/WatchedIndicator";
 import { apiAtom } from "@/providers/JellyfinProvider";
 import { getPrimaryImageUrl } from "@/utils/jellyfin/image/getPrimaryImageUrl";
 import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
@@ -5,7 +6,6 @@ import { Image } from "expo-image";
 import { useAtom } from "jotai";
 import { useMemo, useState } from "react";
 import { View } from "react-native";
-import { WatchedIndicator } from "@/components/WatchedIndicator";

 type MoviePosterProps = {
  item: BaseItemDto;
@@ -18,15 +18,13 @@ const MoviePoster: React.FC<MoviePosterProps> = ({
 }) => {
  const [api] = useAtom(apiAtom);

-  const url = useMemo(
-    () =>
-      getPrimaryImageUrl({
-        api,
-        item,
-        width: 300,
-      }),
-    [item]
-  );
+  const url = useMemo(() => {
+    return getPrimaryImageUrl({
+      api,
+      item,
+      width: 300,
+    });
+  }, [item]);

  const [progress, setProgress] = useState(
    item.UserData?.PlayedPercentage || 0
@@ -59,6 +57,7 @@ const MoviePoster: React.FC<MoviePosterProps> = ({
          width: "100%",
        }}
      />
+
      <WatchedIndicator item={item} />
      {showProgress && progress > 0 && (
        <View className="h-1 bg-red-600 w-full"></View>
--- a/components/posters/SeriesPoster.tsx
+++ b/components/posters/SeriesPoster.tsx
@@ -15,14 +15,16 @@ type MoviePosterProps = {
 const SeriesPoster: React.FC<MoviePosterProps> = ({ item }) => {
  const [api] = useAtom(apiAtom);

-  const url = useMemo(
-    () =>
-      getPrimaryImageUrl({
-        api,
-        item,
-      }),
-    [item]
-  );
+  const url = useMemo(() => {
+    if (item.Type === "Episode") {
+      return `${api?.basePath}/Items/${item.SeriesId}/Images/Primary?fillHeight=389&quality=80&tag=${item.SeriesPrimaryImageTag}`;
+    }
+    return getPrimaryImageUrl({
+      api,
+      item,
+      width: 300,
+    });
+  }, [item]);

  const blurhash = useMemo(() => {
    const key = item.ImageTags?.["Primary"] as string;
--- a/components/series/CastAndCrew.tsx
+++ b/components/series/CastAndCrew.tsx
@@ -1,30 +1,31 @@
+import { apiAtom } from "@/providers/JellyfinProvider";
+import { getPrimaryImageUrl } from "@/utils/jellyfin/image/getPrimaryImageUrl";
 import {
  BaseItemDto,
  BaseItemPerson,
 } from "@jellyfin/sdk/lib/generated-client/models";
+import { router } from "expo-router";
+import { useAtom } from "jotai";
 import React from "react";
-import { Linking, TouchableOpacity, View } from "react-native";
+import { TouchableOpacity, View, ViewProps } from "react-native";
 import { HorizontalScroll } from "../common/HorrizontalScroll";
 import { Text } from "../common/Text";
 import Poster from "../posters/Poster";
-import { useAtom } from "jotai";
-import { apiAtom } from "@/providers/JellyfinProvider";
-import { getPrimaryImageUrl } from "@/utils/jellyfin/image/getPrimaryImageUrl";
-import { router, usePathname } from "expo-router";
-import { useSettings } from "@/utils/atoms/settings";

-export const CastAndCrew = ({ item }: { item: BaseItemDto }) => {
+interface Props extends ViewProps {
+  item?: BaseItemDto | null;
+  loading?: boolean;
+}
+
+export const CastAndCrew: React.FC<Props> = ({ item, loading, ...props }) => {
  const [api] = useAtom(apiAtom);

-  const [settings] = useSettings();
-
-  const pathname = usePathname();
-
  return (
-    <View>
+    <View {...props} className="flex flex-col">
      <Text className="text-lg font-bold mb-2 px-4">Cast & Crew</Text>
-      <HorizontalScroll<NonNullable<BaseItemPerson>>
-        data={item.People}
+      <HorizontalScroll
+        loading={loading}
+        data={item?.People || []}
        renderItem={(item, index) => (
          <TouchableOpacity
            onPress={() => {
--- a/components/series/CurrentSeries.tsx
+++ b/components/series/CurrentSeries.tsx
@@ -3,19 +3,23 @@ import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
 import { router } from "expo-router";
 import { useAtom } from "jotai";
 import React from "react";
-import { TouchableOpacity, View } from "react-native";
+import { TouchableOpacity, View, ViewProps } from "react-native";
 import Poster from "../posters/Poster";
 import { HorizontalScroll } from "../common/HorrizontalScroll";
 import { Text } from "../common/Text";
 import { getPrimaryImageUrlById } from "@/utils/jellyfin/image/getPrimaryImageUrlById";

-export const CurrentSeries = ({ item }: { item: BaseItemDto }) => {
+interface Props extends ViewProps {
+  item?: BaseItemDto | null;
+}
+
+export const CurrentSeries: React.FC<Props> = ({ item, ...props }) => {
  const [api] = useAtom(apiAtom);

  return (
-    <View>
+    <View {...props}>
      <Text className="text-lg font-bold mb-2 px-4">Series</Text>
-      <HorizontalScroll<BaseItemDto>
+      <HorizontalScroll
        data={[item]}
        renderItem={(item, index) => (
          <TouchableOpacity
--- a/components/series/EpisodeTitleHeader.tsx
+++ b/components/series/EpisodeTitleHeader.tsx
@@ -0,0 +1,34 @@
+import { Text } from "@/components/common/Text";
+import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
+import { useRouter } from "expo-router";
+import { TouchableOpacity, View, ViewProps } from "react-native";
+
+interface Props extends ViewProps {
+  item: BaseItemDto;
+}
+
+export const EpisodeTitleHeader: React.FC<Props> = ({ item, ...props }) => {
+  const router = useRouter();
+
+  return (
+    <View {...props}>
+      <Text className="font-bold text-2xl">{item?.Name}</Text>
+      <View className="flex flex-row items-center mb-1">
+        <TouchableOpacity
+          onPress={() => {
+            router.push(
+              // @ts-ignore
+              `/(auth)/series/${item.SeriesId}?seasonIndex=${item?.ParentIndexNumber}`
+            );
+          }}
+        >
+          <Text className="opacity-50">{item?.SeasonName}</Text>
+        </TouchableOpacity>
+
+        <Text className="opacity-50 mx-2">{"—"}</Text>
+        <Text className="opacity-50">{`Episode ${item.IndexNumber}`}</Text>
+      </View>
+      <Text className="opacity-50">{item?.ProductionYear}</Text>
+    </View>
+  );
+};
--- a/components/series/NextEpisodeButton.tsx
+++ b/components/series/NextEpisodeButton.tsx
@@ -23,40 +23,6 @@ export const NextEpisodeButton: React.FC<Props> = ({
  const [user] = useAtom(userAtom);
  const [api] = useAtom(apiAtom);

-  // const { data: seasons } = useQuery({
-  //   queryKey: ["seasons", item.SeriesId],
-  //   queryFn: async () => {
-  //     if (
-  //       !api ||
-  //       !user?.Id ||
-  //       !item?.Id ||
-  //       !item?.SeriesId ||
-  //       !item?.IndexNumber
-  //     )
-  //       return [];
-
-  //     const response = await getItemsApi(api).getItems({
-  //       parentId: item?.SeriesId,
-  //     });
-
-  //     console.log("seasons ~", type, response.data);
-
-  //     return (response.data.Items as BaseItemDto[]) ?? [];
-  //   },
-  //   enabled: Boolean(api && user?.Id && item?.Id && item.SeasonId),
-  // });
-
-  // const nextSeason = useMemo(() => {
-  //   if (!seasons) return null;
-  //   const currentSeasonIndex = seasons.findIndex(
-  //     (season) => season.Id === item.SeasonId,
-  //   );
-
-  //   if (currentSeasonIndex === seasons.length - 1) return null;
-
-  //   return seasons[currentSeasonIndex + 1];
-  // }, [seasons]);
-
  const { data: nextEpisode } = useQuery({
    queryKey: ["nextEpisode", item.Id, item.ParentId, type],
    queryFn: async () => {
@@ -90,7 +56,7 @@ export const NextEpisodeButton: React.FC<Props> = ({

  return (
    <Button
-      onPress={() => router.push(`/items/${nextEpisode?.Id}`)}
+      onPress={() => router.setParams({ id: nextEpisode?.Id })}
      className={`h-12 aspect-square`}
      disabled={disabled}
      {...props}
--- a/components/series/NextUp.tsx
+++ b/components/series/NextUp.tsx
@@ -34,7 +34,7 @@ export const NextUp: React.FC<{ seriesId: string }> = ({ seriesId }) => {

  if (!items?.length)
    return (
-      <View>
+      <View className="px-4">
        <Text className="text-lg font-bold mb-2">Next up</Text>
        <Text className="opacity-50">No items to display</Text>
      </View>
@@ -43,17 +43,17 @@ export const NextUp: React.FC<{ seriesId: string }> = ({ seriesId }) => {
  return (
    <View>
      <Text className="text-lg font-bold mb-2 px-4">Next up</Text>
-      <HorizontalScroll<BaseItemDto>
+      <HorizontalScroll
        data={items}
        renderItem={(item, index) => (
          <TouchableOpacity
            onPress={() => {
-              router.push(`/(auth)/items/${item.Id}`);
+              router.push(`/(auth)/items/page?id=${item.Id}`);
            }}
            key={item.Id}
            className="flex flex-col w-44"
          >
-            <ContinueWatchingPoster item={item} />
+            <ContinueWatchingPoster item={item} useEpisodePoster />
            <ItemCardText item={item} />
          </TouchableOpacity>
        )}
--- a/components/series/SeasonEpisodesCarousel.tsx
+++ b/components/series/SeasonEpisodesCarousel.tsx
@@ -0,0 +1,143 @@
+import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
+import { getUserItemData } from "@/utils/jellyfin/user-library/getUserItemData";
+import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { router } from "expo-router";
+import { useAtom } from "jotai";
+import { useEffect, useMemo, useRef } from "react";
+import { TouchableOpacity, View, ViewProps } from "react-native";
+import {
+  HorizontalScroll,
+  HorizontalScrollRef,
+} from "../common/HorrizontalScroll";
+import ContinueWatchingPoster from "../ContinueWatchingPoster";
+import { ItemCardText } from "../ItemCardText";
+
+interface Props extends ViewProps {
+  item?: BaseItemDto | null;
+  loading?: boolean;
+}
+
+export const SeasonEpisodesCarousel: React.FC<Props> = ({
+  item,
+  loading,
+  ...props
+}) => {
+  const [api] = useAtom(apiAtom);
+  const [user] = useAtom(userAtom);
+
+  const scrollRef = useRef<HorizontalScrollRef>(null);
+
+  const scrollToIndex = (index: number) => {
+    scrollRef.current?.scrollToIndex(index, 16);
+  };
+
+  const seasonId = useMemo(() => {
+    return item?.SeasonId;
+  }, [item]);
+
+  const {
+    data: episodes,
+    isLoading,
+    isFetching,
+  } = useQuery({
+    queryKey: ["episodes", seasonId],
+    queryFn: async () => {
+      if (!api || !user?.Id) return [];
+      const response = await api.axiosInstance.get(
+        `${api.basePath}/Shows/${item?.Id}/Episodes`,
+        {
+          params: {
+            userId: user?.Id,
+            seasonId,
+            Fields:
+              "ItemCounts,PrimaryImageAspectRatio,CanDelete,MediaSourceCount,Overview",
+          },
+          headers: {
+            Authorization: `MediaBrowser DeviceId="${api.deviceInfo.id}", Token="${api.accessToken}"`,
+          },
+        }
+      );
+
+      return response.data.Items as BaseItemDto[];
+    },
+    enabled: !!api && !!user?.Id && !!seasonId,
+  });
+
+  /**
+   * Prefetch previous and next episode
+   */
+  const queryClient = useQueryClient();
+  useEffect(() => {
+    if (!item?.Id || !item.IndexNumber || !episodes || episodes.length === 0) {
+      return;
+    }
+
+    const previousId = episodes?.find(
+      (ep) => ep.IndexNumber === item.IndexNumber! - 1
+    )?.Id;
+    if (previousId) {
+      queryClient.prefetchQuery({
+        queryKey: ["item", previousId],
+        queryFn: async () =>
+          await getUserItemData({
+            api,
+            userId: user?.Id,
+            itemId: previousId,
+          }),
+        staleTime: 60 * 1000,
+      });
+    }
+
+    const nextId = episodes?.find(
+      (ep) => ep.IndexNumber === item.IndexNumber! + 1
+    )?.Id;
+    if (nextId) {
+      queryClient.prefetchQuery({
+        queryKey: ["item", nextId],
+        queryFn: async () =>
+          await getUserItemData({
+            api,
+            userId: user?.Id,
+            itemId: nextId,
+          }),
+        staleTime: 60 * 1000,
+      });
+    }
+  }, [episodes, api, user?.Id, item]);
+
+  useEffect(() => {
+    if (item?.Type === "Episode" && item.Id) {
+      const index = episodes?.findIndex((ep) => ep.Id === item.Id);
+      if (index !== undefined && index !== -1) {
+        setTimeout(() => {
+          scrollToIndex(index);
+        }, 400);
+      }
+    }
+  }, [episodes, item]);
+
+  return (
+    <HorizontalScroll
+      ref={scrollRef}
+      data={episodes}
+      extraData={item}
+      loading={loading || isLoading || isFetching}
+      renderItem={(_item, idx) => (
+        <TouchableOpacity
+          key={_item.Id}
+          onPress={() => {
+            router.setParams({ id: _item.Id });
+          }}
+          className={`flex flex-col w-44 
+                  ${item?.Id === _item.Id ? "" : "opacity-50"}
+                `}
+        >
+          <ContinueWatchingPoster item={_item} useEpisodePoster />
+          <ItemCardText item={_item} />
+        </TouchableOpacity>
+      )}
+      {...props}
+    />
+  );
+};
--- a/components/series/SeasonPicker.tsx
+++ b/components/series/SeasonPicker.tsx
@@ -1,7 +1,7 @@
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
 import { runtimeTicksToSeconds } from "@/utils/time";
 import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
-import { useQuery } from "@tanstack/react-query";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { useRouter } from "expo-router";
 import { atom, useAtom } from "jotai";
 import { useEffect, useMemo, useState } from "react";
@@ -11,9 +11,14 @@ import ContinueWatchingPoster from "../ContinueWatchingPoster";
 import { DownloadItem } from "../DownloadItem";
 import { Loader } from "../Loader";
 import { Text } from "../common/Text";
+import { getTvShowsApi } from "@jellyfin/sdk/lib/utils/api";
+import { getUserItemData } from "@/utils/jellyfin/user-library/getUserItemData";
+import { Image } from "expo-image";
+import { getLogoImageUrlById } from "@/utils/jellyfin/image/getLogoImageUrlById";

 type Props = {
  item: BaseItemDto;
+  initialSeasonIndex?: number;
 };

 type SeasonIndexState = {
@@ -22,7 +27,7 @@ type SeasonIndexState = {

 export const seasonIndexAtom = atom<SeasonIndexState>({});

-export const SeasonPicker: React.FC<Props> = ({ item }) => {
+export const SeasonPicker: React.FC<Props> = ({ item, initialSeasonIndex }) => {
  const [api] = useAtom(apiAtom);
  const [user] = useAtom(userAtom);
  const [seasonIndexState, setSeasonIndexState] = useAtom(seasonIndexAtom);
@@ -57,15 +62,35 @@ export const SeasonPicker: React.FC<Props> = ({ item }) => {

  useEffect(() => {
    if (seasons && seasons.length > 0 && seasonIndex === undefined) {
-      const firstSeason = seasons[0];
-      if (firstSeason.IndexNumber !== undefined) {
+      let initialIndex: number | undefined;
+
+      if (initialSeasonIndex !== undefined) {
+        // Use the provided initialSeasonIndex if it exists in the seasons
+        const seasonExists = seasons.some(
+          (season: any) => season.IndexNumber === initialSeasonIndex
+        );
+        if (seasonExists) {
+          initialIndex = initialSeasonIndex;
+        }
+      }
+
+      if (initialIndex === undefined) {
+        // Fall back to the previous logic if initialIndex is not set
+        const season1 = seasons.find((season: any) => season.IndexNumber === 1);
+        const season0 = seasons.find((season: any) => season.IndexNumber === 0);
+        const firstSeason = season1 || season0 || seasons[0];
+        initialIndex = firstSeason.IndexNumber;
+      }
+
+      if (initialIndex !== undefined) {
        setSeasonIndexState((prev) => ({
          ...prev,
-          [item.Id ?? ""]: firstSeason.IndexNumber,
+          [item.Id ?? ""]: initialIndex,
        }));
      }
    }
-  }, [seasons, seasonIndex, setSeasonIndexState, item.Id]);
+  }, [seasons, seasonIndex, setSeasonIndexState, item.Id, initialSeasonIndex]);
+
  const selectedSeasonId: string | null = useMemo(
    () =>
      seasons?.find((season: any) => season.IndexNumber === seasonIndex)?.Id,
@@ -75,27 +100,39 @@ export const SeasonPicker: React.FC<Props> = ({ item }) => {
  const { data: episodes, isFetching } = useQuery({
    queryKey: ["episodes", item.Id, selectedSeasonId],
    queryFn: async () => {
-      if (!api || !user?.Id || !item.Id) return [];
-      const response = await api.axiosInstance.get(
-        `${api.basePath}/Shows/${item.Id}/Episodes`,
-        {
-          params: {
-            userId: user?.Id,
-            seasonId: selectedSeasonId,
-            Fields:
-              "ItemCounts,PrimaryImageAspectRatio,CanDelete,MediaSourceCount,Overview",
-          },
-          headers: {
-            Authorization: `MediaBrowser DeviceId="${api.deviceInfo.id}", Token="${api.accessToken}"`,
-          },
-        }
-      );
+      if (!api || !user?.Id || !item.Id || !selectedSeasonId) return [];
+      const res = await getTvShowsApi(api).getEpisodes({
+        seriesId: item.Id,
+        userId: user.Id,
+        seasonId: selectedSeasonId,
+        enableUserData: true,
+        fields: ["MediaSources", "MediaStreams", "Overview"],
+      });

-      return response.data.Items as BaseItemDto[];
+      return res.data.Items;
    },
    enabled: !!api && !!user?.Id && !!item.Id && !!selectedSeasonId,
  });

+  const queryClient = useQueryClient();
+  useEffect(() => {
+    for (let e of episodes || []) {
+      queryClient.prefetchQuery({
+        queryKey: ["item", e.Id],
+        queryFn: async () => {
+          if (!e.Id) return;
+          const res = await getUserItemData({
+            api,
+            userId: user?.Id,
+            itemId: e.Id,
+          });
+          return res;
+        },
+        staleTime: 60 * 5 * 1000,
+      });
+    }
+  }, [episodes]);
+
  // Used for height calculation
  const [nrOfEpisodes, setNrOfEpisodes] = useState(0);
  useEffect(() => {
@@ -143,26 +180,6 @@ export const SeasonPicker: React.FC<Props> = ({ item }) => {
          ))}
        </DropdownMenu.Content>
      </DropdownMenu.Root>
-      {/* Old View. Might have a setting later to manually select view. */}
-      {/* {episodes && (
-        <View className="mt-4">
-          <HorizontalScroll<BaseItemDto>
-            data={episodes}
-            renderItem={(item, index) => (
-              <TouchableOpacity
-                key={item.Id}
-                onPress={() => {
-                  router.push(`/(auth)/items/${item.Id}`);
-                }}
-                className="flex flex-col w-48"
-              >
-                <ContinueWatchingPoster item={item} />
-                <ItemCardText item={item} />
-              </TouchableOpacity>
-            )}
-          />
-        </View>
-      )} */}
      <View className="px-4 flex flex-col my-4">
        {isFetching ? (
          <View
@@ -178,13 +195,17 @@ export const SeasonPicker: React.FC<Props> = ({ item }) => {
            <TouchableOpacity
              key={e.Id}
              onPress={() => {
-                router.push(`/(auth)/items/${e.Id}`);
+                router.push(`/(auth)/items/page?id=${e.Id}`);
              }}
              className="flex flex-col mb-4"
            >
              <View className="flex flex-row items-center mb-2">
                <View className="w-32 aspect-video overflow-hidden mr-2">
-                  <ContinueWatchingPoster item={e} width={128} />
+                  <ContinueWatchingPoster
+                    item={e}
+                    width={128}
+                    useEpisodePoster
+                  />
                </View>
                <View className="shrink">
                  <Text numberOfLines={2} className="">
--- a/components/series/SeriesTitleHeader.tsx
+++ b/components/series/SeriesTitleHeader.tsx
@@ -1,37 +0,0 @@
-import { TouchableOpacity, View, ViewProps } from "react-native";
-import { Text } from "@/components/common/Text";
-import { useRouter } from "expo-router";
-import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
-
-interface Props extends ViewProps {
-  item: BaseItemDto;
-}
-
-export const SeriesTitleHeader: React.FC<Props> = ({ item, ...props }) => {
-  const router = useRouter();
-  return (
-    <>
-      <TouchableOpacity
-        onPress={() => router.push(`/(auth)/series/${item.SeriesId}`)}
-      >
-        <Text className="text-center opacity-50">{item?.SeriesName}</Text>
-      </TouchableOpacity>
-      <View className="flex flex-row items-center self-center px-4">
-        <Text className="text-center font-bold text-2xl mr-2">
-          {item?.Name}
-        </Text>
-      </View>
-      <View>
-        <View className="flex flex-row items-center self-center">
-          <TouchableOpacity onPress={() => {}}>
-            <Text className="text-center opacity-50">{item?.SeasonName}</Text>
-          </TouchableOpacity>
-          <Text className="text-center opacity-50 mx-2">{"—"}</Text>
-          <Text className="text-center opacity-50">
-            {`Episode ${item.IndexNumber}`}
-          </Text>
-        </View>
-      </View>
-    </>
-  );
-};
--- a/components/settings/SettingToggles.tsx
+++ b/components/settings/SettingToggles.tsx
@@ -58,7 +58,7 @@ export const SettingToggles: React.FC = () => {
          onValueChange={(value) => updateSettings({ autoRotate: value })}
        />
      </View>
-      <View
+      {/* <View
        className={`
            flex flex-row items-center space-x-2 justify-between bg-neutral-900 p-4
          `}
@@ -66,7 +66,7 @@ export const SettingToggles: React.FC = () => {
        <View className="flex flex-col shrink">
          <Text className="font-semibold">Download quality</Text>
          <Text className="text-xs opacity-50">
-            Choose the search engine you want to use.
+            Choose the download quality.
          </Text>
        </View>
        <DropdownMenu.Root>
@@ -97,7 +97,7 @@ export const SettingToggles: React.FC = () => {
            ))}
          </DropdownMenu.Content>
        </DropdownMenu.Root>
-      </View>
+      </View> */}
      <View className="flex flex-row items-center justify-between bg-neutral-900 p-4">
        <View className="shrink">
          <Text className="font-semibold">Start videos in fullscreen</Text>
--- a/components/stacks/NestedTabPageStack.tsx
+++ b/components/stacks/NestedTabPageStack.tsx
@@ -8,7 +8,6 @@ const commonScreenOptions = {
  headerTransparent: true,
  headerShadowVisible: false,
  headerLeft: () => <HeaderBackButton />,
-  headerRight: () => <Chromecast background="blur" width={22} height={22} />,
 };

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