feat: replace content item dropdowns with sheets (#968)

.gitignore

@@ -46,3 +46,4 @@ streamyfin-4fec1-firebase-adminsdk.json
 .env.local
 *.aab
 /version-backup-*
+bun.lockb

components/BitRateSheet.tsx

@@ -0,0 +1,122 @@
+import { useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Platform, TouchableOpacity, View } from "react-native";
+import { Text } from "./common/Text";
+import { FilterSheet } from "./filters/FilterSheet";
+
+export type Bitrate = {
+  key: string;
+  value: number | undefined;
+};
+
+export const BITRATES: Bitrate[] = [
+  {
+    key: "Max",
+    value: undefined,
+  },
+  {
+    key: "8 Mb/s",
+    value: 8000000,
+    height: 1080,
+  },
+  {
+    key: "4 Mb/s",
+    value: 4000000,
+    height: 1080,
+  },
+  {
+    key: "2 Mb/s",
+    value: 2000000,
+  },
+  {
+    key: "1 Mb/s",
+    value: 1000000,
+  },
+  {
+    key: "500 Kb/s",
+    value: 500000,
+  },
+  {
+    key: "250 Kb/s",
+    value: 250000,
+  },
+].sort(
+  (a, b) =>
+    (b.value || Number.POSITIVE_INFINITY) -
+    (a.value || Number.POSITIVE_INFINITY),
+);
+
+interface Props extends React.ComponentProps<typeof View> {
+  onChange: (value: Bitrate) => void;
+  selected?: Bitrate | null;
+  inverted?: boolean | null;
+}
+
+export const BitrateSheet: React.FC<Props> = ({
+  onChange,
+  selected,
+  inverted,
+  ...props
+}) => {
+  const isTv = Platform.isTV;
+  const { t } = useTranslation();
+  const [open, setOpen] = useState(false);
+
+  const sorted = useMemo(() => {
+    if (inverted)
+      return BITRATES.slice().sort(
+        (a, b) =>
+          (a.value || Number.POSITIVE_INFINITY) -
+          (b.value || Number.POSITIVE_INFINITY),
+      );
+    return BITRATES.slice().sort(
+      (a, b) =>
+        (b.value || Number.POSITIVE_INFINITY) -
+        (a.value || Number.POSITIVE_INFINITY),
+    );
+  }, [inverted]);
+
+  if (isTv) return null;
+
+  return (
+    <View
+      className='flex shrink'
+      style={{
+        minWidth: 60,
+        maxWidth: 200,
+      }}
+    >
+      <View className='flex flex-col' {...props}>
+        <Text className='opacity-50 mb-1 text-xs'>
+          {t("item_card.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'
+          onPress={() => setOpen(true)}
+        >
+          <Text numberOfLines={1}>
+            {BITRATES.find((b) => b.value === selected?.value)?.key}
+          </Text>
+        </TouchableOpacity>
+      </View>
+
+      <FilterSheet
+        open={open}
+        setOpen={setOpen}
+        title={t("item_card.quality")}
+        data={sorted}
+        values={selected ? [selected] : []}
+        multiple={false}
+        searchFilter={(item, query) => {
+          const label = (item as any).key || "";
+          return label.toLowerCase().includes(query.toLowerCase());
+        }}
+        renderItemLabel={(item) => <Text>{(item as any).key || ""}</Text>}
+        set={(vals) => {
+          const chosen = vals[0] as Bitrate | undefined;
+          if (chosen) onChange(chosen);
+        }}
+      />
+    </View>
+  );
+};

components/ItemContent.tsx

@@ -6,10 +6,10 @@ import { Image } from "expo-image";
 import { useNavigation } from "expo-router";
 import { useAtom } from "jotai";
 import React, { useEffect, useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
 import { Platform, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { AudioTrackSelector } from "@/components/AudioTrackSelector";
+import { type Bitrate } from "@/components/BitrateSelector";
-import { type Bitrate, BitrateSelector } from "@/components/BitrateSelector";
 import { ItemImage } from "@/components/common/ItemImage";
 import { DownloadSingleItem } from "@/components/DownloadItem";
 import { OverviewText } from "@/components/OverviewText";
@@ -18,7 +18,6 @@ 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 { CastAndCrew } from "@/components/series/CastAndCrew";
 import { CurrentSeries } from "@/components/series/CurrentSeries";
 import { SeasonEpisodesCarousel } from "@/components/series/SeasonEpisodesCarousel";
@@ -30,11 +29,13 @@ import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
 import { useSettings } from "@/utils/atoms/settings";
 import { getLogoImageUrlById } from "@/utils/jellyfin/image/getLogoImageUrlById";
 import { AddToFavorites } from "./AddToFavorites";
+import { BitrateSheet } from "./BitRateSheet";
 import { ItemHeader } from "./ItemHeader";
 import { ItemTechnicalDetails } from "./ItemTechnicalDetails";
-import { MediaSourceSelector } from "./MediaSourceSelector";
+import { MediaSourceSheet } from "./MediaSourceSheet";
 import { MoreMoviesWithActor } from "./MoreMoviesWithActor";
 import { PlayInRemoteSessionButton } from "./PlayInRemoteSession";
+import { TrackSheet } from "./TrackSheet";
 
 const Chromecast = !Platform.isTV ? require("./Chromecast") : null;
 
@@ -58,6 +59,7 @@ export const ItemContent: React.FC<ItemContentProps> = React.memo(
     const navigation = useNavigation();
     const insets = useSafeAreaInsets();
     const [user] = useAtom(userAtom);
+    const { t } = useTranslation();
 
     useImageColors({ item });
 
@@ -189,7 +191,7 @@ export const ItemContent: React.FC<ItemContentProps> = React.memo(
               <ItemHeader item={item} className='mb-2' />
               {item.Type !== "Program" && !Platform.isTV && !isOffline && (
                 <View className='flex flex-row items-center justify-start w-full h-16'>
-                  <BitrateSelector
+                  <BitrateSheet
                     className='mr-1'
                     onChange={(val) =>
                       setSelectedOptions(
@@ -198,7 +200,7 @@ export const ItemContent: React.FC<ItemContentProps> = React.memo(
                     }
                     selected={selectedOptions.bitrate}
                   />
-                  <MediaSourceSelector
+                  <MediaSourceSheet
                     className='mr-1'
                     item={item}
                     onChange={(val) =>
@@ -212,8 +214,10 @@ export const ItemContent: React.FC<ItemContentProps> = React.memo(
                     }
                     selected={selectedOptions.mediaSource}
                   />
-                  <AudioTrackSelector
+                  <TrackSheet
                     className='mr-1'
+                    streamType='Audio'
+                    title={t("item_card.audio")}
                     source={selectedOptions.mediaSource}
                     onChange={(val) => {
                       setSelectedOptions(
@@ -226,8 +230,10 @@ export const ItemContent: React.FC<ItemContentProps> = React.memo(
                     }}
                     selected={selectedOptions.audioIndex}
                   />
-                  <SubtitleTrackSelector
+                  <TrackSheet
                     source={selectedOptions.mediaSource}
+                    streamType='Subtitle'
+                    title={t("item_card.subtitles")}
                     onChange={(val) =>
                       setSelectedOptions(
                         (prev) =>

components/MediaSourceSheet.tsx

@@ -0,0 +1,75 @@
+import type {
+  BaseItemDto,
+  MediaSourceInfo,
+} from "@jellyfin/sdk/lib/generated-client/models";
+import { useCallback, useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Platform, TouchableOpacity, View } from "react-native";
+import { Text } from "./common/Text";
+import { FilterSheet } from "./filters/FilterSheet";
+
+interface Props extends React.ComponentProps<typeof View> {
+  item: BaseItemDto;
+  onChange: (value: MediaSourceInfo) => void;
+  selected?: MediaSourceInfo | null;
+}
+
+export const MediaSourceSheet: React.FC<Props> = ({
+  item,
+  onChange,
+  selected,
+  ...props
+}) => {
+  const isTv = Platform.isTV;
+  const { t } = useTranslation();
+  const [open, setOpen] = useState(false);
+
+  const getDisplayName = useCallback((source: MediaSourceInfo) => {
+    const videoStream = source.MediaStreams?.find((x) => x.Type === "Video");
+    if (videoStream?.DisplayTitle) return videoStream.DisplayTitle;
+    if (source.Name) return source.Name;
+    return `Source ${source.Id}`;
+  }, []);
+
+  const selectedName = useMemo(() => {
+    if (!selected) return "";
+    return getDisplayName(selected);
+  }, [selected, getDisplayName]);
+
+  if (isTv || (item.MediaStreams && item.MediaStreams.length <= 1)) return null;
+
+  return (
+    <View className='flex shrink' style={{ minWidth: 75 }}>
+      <View className='flex flex-col' {...props}>
+        <Text className='opacity-50 mb-1 text-xs'>{t("item_card.video")}</Text>
+        <TouchableOpacity
+          className='bg-neutral-900 h-10 rounded-xl border-neutral-800 border px-3 py-2 flex flex-row items-center'
+          onPress={() => setOpen(true)}
+        >
+          <Text numberOfLines={1}>{selectedName}</Text>
+        </TouchableOpacity>
+      </View>
+
+      <FilterSheet
+        open={open}
+        setOpen={setOpen}
+        title={t("item_card.video")}
+        data={item.MediaSources || []}
+        values={selected ? [selected] : []}
+        multiple={false}
+        searchFilter={(src, query) =>
+          getDisplayName(src as MediaSourceInfo)
+            .toLowerCase()
+            .includes(query.toLowerCase())
+        }
+        renderItemLabel={(src) => (
+          <Text>{getDisplayName(src as MediaSourceInfo)}</Text>
+        )}
+        set={(vals) => {
+          const chosen = vals[0] as MediaSourceInfo | undefined;
+          if (chosen) onChange(chosen);
+        }}
+      />
+    </View>
+  );
+};

components/TrackSheet.tsx

@@ -0,0 +1,76 @@
+import type { MediaSourceInfo } from "@jellyfin/sdk/lib/generated-client/models";
+import { useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Platform, TouchableOpacity, View } from "react-native";
+import { Text } from "./common/Text";
+import { FilterSheet } from "./filters/FilterSheet";
+
+interface Props extends React.ComponentProps<typeof View> {
+  source?: MediaSourceInfo;
+  onChange: (value: number) => void;
+  selected?: number | undefined;
+  streamType?: string;
+  title: string;
+}
+
+export const TrackSheet: React.FC<Props> = ({
+  source,
+  onChange,
+  selected,
+  streamType,
+  title,
+  ...props
+}) => {
+  const isTv = Platform.isTV;
+  const { t } = useTranslation();
+
+  const streams = useMemo(
+    () => source?.MediaStreams?.filter((x) => x.Type === streamType),
+    [source],
+  );
+
+  const selectedSteam = useMemo(
+    () => streams?.find((x) => x.Index === selected),
+    [streams, selected],
+  );
+  const [open, setOpen] = useState(false);
+
+  if (isTv || (streams && streams.length === 0)) return null;
+
+  return (
+    <View className='flex shrink' style={{ minWidth: 25 }} {...props}>
+      <View className='flex flex-col'>
+        <Text className='opacity-50 mb-1 text-xs'>{title}</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'
+          onPress={() => setOpen(true)}
+        >
+          <Text numberOfLines={1}>
+            {selectedSteam?.DisplayTitle || t("common.select", "Select")}
+          </Text>
+        </TouchableOpacity>
+      </View>
+      <FilterSheet
+        open={open}
+        setOpen={setOpen}
+        title={title}
+        data={streams || []}
+        values={selectedSteam ? [selectedSteam] : []}
+        multiple={false}
+        searchFilter={(item, query) => {
+          const label = (item as any).DisplayTitle || "";
+          return label.toLowerCase().includes(query.toLowerCase());
+        }}
+        renderItemLabel={(item) => (
+          <Text>{(item as any).DisplayTitle || ""}</Text>
+        )}
+        set={(vals) => {
+          const chosen = vals[0] as any;
+          if (chosen && chosen.Index !== null && chosen.Index !== undefined) {
+            onChange(chosen.Index);
+          }
+        }}
+      />
+    </View>
+  );
+};

components/filters/FilterSheet.tsx

@@ -5,6 +5,7 @@ import {
   BottomSheetModal,
   BottomSheetScrollView,
 } from "@gorhom/bottom-sheet";
+import { isEqual } from "lodash";
 import type React from "react";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -27,7 +28,7 @@ interface Props<T> extends ViewProps {
   title: string;
   searchFilter?: (item: T, query: string) => boolean;
   renderItemLabel: (item: T) => React.ReactNode;
-  showSearch?: boolean;
+  disableSearch?: boolean;
   multiple?: boolean;
 }
 
@@ -49,7 +50,7 @@ const LIMIT = 100;
  * @param {string} props.title - The title of the bottom sheet
  * @param {function} props.searchFilter - Function to filter items based on search query
  * @param {function} props.renderItemLabel - Function to render the label for each item
- * @param {boolean} [props.showSearch=true] - Whether to show the search input
+ * @param {boolean} [props.disableSearch=false] - Whether to disable the search input
  *
  * @returns {React.ReactElement} The FilterSheet component
  *
@@ -70,11 +71,11 @@ export const FilterSheet = <T,>({
   title,
   searchFilter,
   renderItemLabel,
-  showSearch = true,
+  disableSearch = false,
   multiple = false,
 }: Props<T>) => {
   const bottomSheetModalRef = useRef<BottomSheetModal>(null);
-  const snapPoints = useMemo(() => ["80%"], []);
+  const snapPoints = useMemo(() => ["85%"], []);
   const { t } = useTranslation();
 
   const [data, setData] = useState<T[]>([]);
@@ -82,6 +83,8 @@ export const FilterSheet = <T,>({
 
   const [search, setSearch] = useState<string>("");
 
+  const [showSearch, setShowSearch] = useState<boolean>(false);
+
   const filteredData = useMemo(() => {
     if (!search) return _data;
     const results = [];
@@ -93,6 +96,13 @@ export const FilterSheet = <T,>({
     return results.slice(0, 100);
   }, [search, _data, searchFilter]);
 
+  useEffect(() => {
+    if (!data || data.length === 0 || disableSearch) return;
+    if (data.length > 15) {
+      setShowSearch(true);
+    }
+  }, [data]);
+
   // Loads data in batches of LIMIT size, starting from offset,
   // to implement efficient "load more" functionality
   useEffect(() => {
@@ -159,7 +169,7 @@ export const FilterSheet = <T,>({
           {showSearch && (
             <Input
               placeholder={t("search.search")}
-              className='my-2'
+              className='my-2 border-neutral-800 border'
               value={search}
               onChangeText={(text) => {
                 setSearch(text);
@@ -196,8 +206,8 @@ export const FilterSheet = <T,>({
                   }}
                   className=' bg-neutral-800 px-4 py-3 flex flex-row items-center justify-between'
                 >
-                  <Text>{renderItemLabel(item)}</Text>
+                  <Text className='flex shrink'>{renderItemLabel(item)}</Text>
-                  {values.some((i) => i === item) ? (
+                  {values.some((i) => isEqual(i, item)) ? (
                     <Ionicons name='radio-button-on' size={24} color='white' />
                   ) : (
                     <Ionicons name='radio-button-off' size={24} color='white' />

components/video-player/controls/dropdown/DropdownView.tsx

@@ -116,30 +116,32 @@ const DropdownView = () => {
             ))}
           </DropdownMenu.SubContent>
         </DropdownMenu.Sub>
-        <DropdownMenu.Sub>
+        {(audioTracks?.length ?? 0) > 0 && (
-          <DropdownMenu.SubTrigger key='audio-trigger'>
+          <DropdownMenu.Sub>
-            Audio
+            <DropdownMenu.SubTrigger key='audio-trigger'>
-          </DropdownMenu.SubTrigger>
+              Audio
-          <DropdownMenu.SubContent
+            </DropdownMenu.SubTrigger>
-            alignOffset={-10}
+            <DropdownMenu.SubContent
-            avoidCollisions={true}
+              alignOffset={-10}
-            collisionPadding={0}
+              avoidCollisions={true}
-            loop={true}
+              collisionPadding={0}
-            sideOffset={10}
+              loop={true}
-          >
+              sideOffset={10}
-            {audioTracks?.map((track, idx: number) => (
+            >
-              <DropdownMenu.CheckboxItem
+              {audioTracks?.map((track, idx: number) => (
-                key={`audio-item-${idx}`}
+                <DropdownMenu.CheckboxItem
-                value={audioIndex === track.index.toString()}
+                  key={`audio-item-${idx}`}
-                onValueChange={() => track.setTrack()}
+                  value={audioIndex === track.index.toString()}
-              >
+                  onValueChange={() => track.setTrack()}
-                <DropdownMenu.ItemTitle key={`audio-item-title-${idx}`}>
+                >
-                  {track.name}
+                  <DropdownMenu.ItemTitle key={`audio-item-title-${idx}`}>
-                </DropdownMenu.ItemTitle>
+                    {track.name}
-              </DropdownMenu.CheckboxItem>
+                  </DropdownMenu.ItemTitle>
-            ))}
+                </DropdownMenu.CheckboxItem>
-          </DropdownMenu.SubContent>
+              ))}
-        </DropdownMenu.Sub>
+            </DropdownMenu.SubContent>
+          </DropdownMenu.Sub>
+        )}
       </DropdownMenu.Content>
     </DropdownMenu.Root>
   );

hooks/useDefaultPlaySettings.ts

@@ -26,7 +26,11 @@ const useDefaultPlaySettings = (
     )?.Index;
 
     // 4. Get default bitrate from settings or fallback to max
-    const bitrate = settings?.defaultBitrate ?? BITRATES[0];
+    let bitrate = settings?.defaultBitrate ?? BITRATES[0];
+    // value undefined seems to get lost in settings. This is just a failsafe
+    if (bitrate.key === BITRATES[0].key) {
+      bitrate = BITRATES[0];
+    }
 
     return {
       defaultAudioIndex: