feat: more sheets in controls (#969)

2026-01-15 23:59:08 +00:00 · 2025-08-21 17:54:28 +02:00
parent 2d69bd5103
commit aac9270b62
4 changed files with 334 additions and 163 deletions
--- a/components/filters/FilterSheet.tsx
+++ b/components/filters/FilterSheet.tsx
@@ -15,6 +15,7 @@ import {
  View,
  type ViewProps,
 } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { Text } from "@/components/common/Text";
 import { Button } from "../Button";
 import { Input } from "../common/Input";
@@ -77,6 +78,7 @@ export const FilterSheet = <T,>({
  const bottomSheetModalRef = useRef<BottomSheetModal>(null);
  const snapPoints = useMemo(() => ["85%"], []);
  const { t } = useTranslation();
+  const insets = useSafeAreaInsets();

  const [data, setData] = useState<T[]>([]);
  const [offset, setOffset] = useState<number>(0);
@@ -161,7 +163,13 @@ export const FilterSheet = <T,>({
          flex: 1,
        }}
      >
-        <View className='px-4 mt-2 mb-8'>
+        <View
+          className='mt-2 mb-8'
+          style={{
+            paddingLeft: Math.max(16, insets.left),
+            paddingRight: Math.max(16, insets.right),
+          }}
+        >
          <Text className='font-bold text-2xl'>{title}</Text>
          <Text className='mb-2 text-neutral-500'>
            {t("search.x_items", { count: _data?.length })}
--- a/components/video-player/controls/ScaleFactorSelector.tsx
+++ b/components/video-player/controls/ScaleFactorSelector.tsx
@@ -1,10 +1,10 @@
 import { Ionicons } from "@expo/vector-icons";
-import React from "react";
+import React, { useState } from "react";
 import { Platform, TouchableOpacity } from "react-native";
+import { Text } from "@/components/common/Text";
+import { FilterSheet } from "@/components/filters/FilterSheet";
 import { useHaptic } from "@/hooks/useHaptic";

-const DropdownMenu = !Platform.isTV ? require("zeego/dropdown-menu") : null;
-
 export type ScaleFactor =
  | 1.0
  | 1.1
@@ -94,42 +94,56 @@ export const ScaleFactorSelector: React.FC<ScaleFactorSelectorProps> = ({
  disabled = false,
 }) => {
  const lightHapticFeedback = useHaptic("light");
+  const [open, setOpen] = useState(false);

-  // Hide on TV platforms since zeego doesn't support TV
-  if (Platform.isTV || !DropdownMenu) return null;
+  // Hide on TV platforms
+  if (Platform.isTV) return null;

  const handleScaleSelect = (scale: ScaleFactor) => {
    onScaleChange(scale);
    lightHapticFeedback();
  };

+  const currentOption = SCALE_FACTOR_OPTIONS.find(
+    (option) => option.id === currentScale,
+  );
+
  return (
-    <DropdownMenu.Root>
-      <DropdownMenu.Trigger asChild>
-        <TouchableOpacity
-          disabled={disabled}
-          className='aspect-square flex flex-col rounded-xl items-center justify-center p-2'
-          style={{ opacity: disabled ? 0.5 : 1 }}
-        >
-          <Ionicons name='search-outline' size={24} color='white' />
-        </TouchableOpacity>
-      </DropdownMenu.Trigger>
+    <>
+      <TouchableOpacity
+        disabled={disabled}
+        className='aspect-square flex flex-col rounded-xl items-center justify-center p-2'
+        style={{ opacity: disabled ? 0.5 : 1 }}
+        onPress={() => setOpen(true)}
+      >
+        <Ionicons name='search-outline' size={24} color='white' />
+      </TouchableOpacity>

-      <DropdownMenu.Content>
-        <DropdownMenu.Label>Scale Factor</DropdownMenu.Label>
-        <DropdownMenu.Separator />
-
-        {SCALE_FACTOR_OPTIONS.map((option) => (
-          <DropdownMenu.CheckboxItem
-            key={option.id}
-            value={currentScale === option.id ? "on" : "off"}
-            onValueChange={() => handleScaleSelect(option.id)}
-          >
-            <DropdownMenu.ItemTitle>{option.label}</DropdownMenu.ItemTitle>
-            <DropdownMenu.ItemIndicator />
-          </DropdownMenu.CheckboxItem>
-        ))}
-      </DropdownMenu.Content>
-    </DropdownMenu.Root>
+      <FilterSheet
+        open={open}
+        setOpen={setOpen}
+        title='Scale Factor'
+        data={SCALE_FACTOR_OPTIONS}
+        values={currentOption ? [currentOption] : []}
+        multiple={false}
+        searchFilter={(item, query) => {
+          const option = item as ScaleFactorOption;
+          return (
+            option.label.toLowerCase().includes(query.toLowerCase()) ||
+            option.description.toLowerCase().includes(query.toLowerCase())
+          );
+        }}
+        renderItemLabel={(item) => {
+          const option = item as ScaleFactorOption;
+          return <Text>{option.label}</Text>;
+        }}
+        set={(vals) => {
+          const chosen = vals[0] as ScaleFactorOption | undefined;
+          if (chosen) {
+            handleScaleSelect(chosen.id);
+          }
+        }}
+      />
+    </>
  );
 };
--- a/components/video-player/controls/VideoScalingModeSelector.tsx
+++ b/components/video-player/controls/VideoScalingModeSelector.tsx
@@ -1,10 +1,10 @@
 import { Ionicons } from "@expo/vector-icons";
-import React from "react";
+import React, { useState } from "react";
 import { Platform, TouchableOpacity } from "react-native";
+import { Text } from "@/components/common/Text";
+import { FilterSheet } from "@/components/filters/FilterSheet";
 import { useHaptic } from "@/hooks/useHaptic";

-const DropdownMenu = !Platform.isTV ? require("zeego/dropdown-menu") : null;
-
 export type AspectRatio = "default" | "16:9" | "4:3" | "1:1" | "21:9";

 interface AspectRatioSelectorProps {
@@ -53,45 +53,56 @@ export const AspectRatioSelector: React.FC<AspectRatioSelectorProps> = ({
  disabled = false,
 }) => {
  const lightHapticFeedback = useHaptic("light");
+  const [open, setOpen] = useState(false);

-  // Hide on TV platforms since zeego doesn't support TV
-  if (Platform.isTV || !DropdownMenu) return null;
+  // Hide on TV platforms
+  if (Platform.isTV) return null;

  const handleRatioSelect = (ratio: AspectRatio) => {
    onRatioChange(ratio);
    lightHapticFeedback();
  };

+  const currentOption = ASPECT_RATIO_OPTIONS.find(
+    (option) => option.id === currentRatio,
+  );
+
  return (
-    <DropdownMenu.Root>
-      <DropdownMenu.Trigger asChild>
-        <TouchableOpacity
-          disabled={disabled}
-          className='aspect-square flex flex-col rounded-xl items-center justify-center p-2'
-          style={{ opacity: disabled ? 0.5 : 1 }}
-        >
-          <Ionicons name='crop-outline' size={24} color='white' />
-        </TouchableOpacity>
-      </DropdownMenu.Trigger>
+    <>
+      <TouchableOpacity
+        disabled={disabled}
+        className='aspect-square flex flex-col rounded-xl items-center justify-center p-2'
+        style={{ opacity: disabled ? 0.5 : 1 }}
+        onPress={() => setOpen(true)}
+      >
+        <Ionicons name='crop-outline' size={24} color='white' />
+      </TouchableOpacity>

-      <DropdownMenu.Content>
-        <DropdownMenu.Label>Aspect Ratio</DropdownMenu.Label>
-        <DropdownMenu.Separator />
-
-        {ASPECT_RATIO_OPTIONS.map((option) => (
-          <DropdownMenu.CheckboxItem
-            key={option.id}
-            value={currentRatio === option.id ? "on" : "off"}
-            onValueChange={() => handleRatioSelect(option.id)}
-          >
-            <DropdownMenu.ItemTitle>{option.label}</DropdownMenu.ItemTitle>
-            <DropdownMenu.ItemSubtitle>
-              {option.description}
-            </DropdownMenu.ItemSubtitle>
-            <DropdownMenu.ItemIndicator />
-          </DropdownMenu.CheckboxItem>
-        ))}
-      </DropdownMenu.Content>
-    </DropdownMenu.Root>
+      <FilterSheet
+        open={open}
+        setOpen={setOpen}
+        title='Aspect Ratio'
+        data={ASPECT_RATIO_OPTIONS}
+        values={currentOption ? [currentOption] : []}
+        multiple={false}
+        searchFilter={(item, query) => {
+          const option = item as AspectRatioOption;
+          return (
+            option.label.toLowerCase().includes(query.toLowerCase()) ||
+            option.description.toLowerCase().includes(query.toLowerCase())
+          );
+        }}
+        renderItemLabel={(item) => {
+          const option = item as AspectRatioOption;
+          return <Text>{option.label}</Text>;
+        }}
+        set={(vals) => {
+          const chosen = vals[0] as AspectRatioOption | undefined;
+          if (chosen) {
+            handleRatioSelect(chosen.id);
+          }
+        }}
+      />
+    </>
  );
 };
--- a/components/video-player/controls/dropdown/DropdownView.tsx
+++ b/components/video-player/controls/dropdown/DropdownView.tsx
@@ -1,11 +1,16 @@
 import { Ionicons } from "@expo/vector-icons";
-import { useCallback } from "react";
-import { Platform, TouchableOpacity } from "react-native";
-
-const DropdownMenu = !Platform.isTV ? require("zeego/dropdown-menu") : null;
-
+import {
+  BottomSheetBackdrop,
+  type BottomSheetBackdropProps,
+  BottomSheetModal,
+  BottomSheetScrollView,
+} from "@gorhom/bottom-sheet";
 import { useLocalSearchParams, useRouter } from "expo-router";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Platform, StyleSheet, TouchableOpacity, View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { BITRATES } from "@/components/BitrateSelector";
+import { Text } from "@/components/common/Text";
 import { useControlContext } from "../contexts/ControlContext";
 import { useVideoContext } from "../contexts/VideoContext";

@@ -18,6 +23,10 @@ const DropdownView = () => {
    ControlContext?.mediaSource,
  ];
  const router = useRouter();
+  const insets = useSafeAreaInsets();
+  const [open, setOpen] = useState(false);
+  const bottomSheetModalRef = useRef<BottomSheetModal>(null);
+  const snapPoints = useMemo(() => ["75%"], []);

  const { subtitleIndex, audioIndex, bitrateValue, playbackPosition, offline } =
    useLocalSearchParams<{
@@ -48,102 +57,231 @@ const DropdownView = () => {
    [item, mediaSource, subtitleIndex, audioIndex, playbackPosition],
  );

+  const handleSheetChanges = useCallback((index: number) => {
+    if (index === -1) {
+      setOpen(false);
+    }
+  }, []);
+
+  const renderBackdrop = useCallback(
+    (props: BottomSheetBackdropProps) => (
+      <BottomSheetBackdrop
+        {...props}
+        disappearsOnIndex={-1}
+        appearsOnIndex={0}
+      />
+    ),
+    [],
+  );
+
+  const handleOpen = () => {
+    setOpen(true);
+    bottomSheetModalRef.current?.present();
+  };
+
+  const handleClose = () => {
+    setOpen(false);
+    bottomSheetModalRef.current?.dismiss();
+  };
+
+  useEffect(() => {
+    if (open) bottomSheetModalRef.current?.present();
+    else bottomSheetModalRef.current?.dismiss();
+  }, [open]);
+
+  // Hide on TV platforms
+  if (Platform.isTV) return null;
+
  return (
-    <DropdownMenu.Root>
-      <DropdownMenu.Trigger>
-        <TouchableOpacity className='aspect-square flex flex-col rounded-xl items-center justify-center p-2'>
-          <Ionicons name='ellipsis-horizontal' size={24} color={"white"} />
-        </TouchableOpacity>
-      </DropdownMenu.Trigger>
-      <DropdownMenu.Content
-        loop={true}
-        side='bottom'
-        align='start'
-        alignOffset={0}
-        avoidCollisions={true}
-        collisionPadding={8}
-        sideOffset={8}
+    <>
+      <TouchableOpacity
+        className='aspect-square flex flex-col rounded-xl items-center justify-center p-2'
+        onPress={handleOpen}
      >
-        {!isOffline && (
-          <DropdownMenu.Sub>
-            <DropdownMenu.SubTrigger key='qualitytrigger'>
-              Quality
-            </DropdownMenu.SubTrigger>
-            <DropdownMenu.SubContent
-              alignOffset={-10}
-              avoidCollisions={true}
-              collisionPadding={0}
-              loop={true}
-              sideOffset={10}
-            >
-              {BITRATES?.map((bitrate, idx: number) => (
-                <DropdownMenu.CheckboxItem
-                  key={`quality-item-${idx}`}
-                  value={bitrateValue === (bitrate.value?.toString() ?? "")}
-                  onValueChange={() =>
-                    changeBitrate(bitrate.value?.toString() ?? "")
-                  }
-                >
-                  <DropdownMenu.ItemTitle key={`audio-item-title-${idx}`}>
-                    {bitrate.key}
-                  </DropdownMenu.ItemTitle>
-                </DropdownMenu.CheckboxItem>
-              ))}
-            </DropdownMenu.SubContent>
-          </DropdownMenu.Sub>
-        )}
-        <DropdownMenu.Sub>
-          <DropdownMenu.SubTrigger key='subtitle-trigger'>
-            Subtitle
-          </DropdownMenu.SubTrigger>
-          <DropdownMenu.SubContent
-            alignOffset={-10}
-            avoidCollisions={true}
-            collisionPadding={0}
-            loop={true}
-            sideOffset={10}
+        <Ionicons name='ellipsis-horizontal' size={24} color={"white"} />
+      </TouchableOpacity>
+
+      <BottomSheetModal
+        ref={bottomSheetModalRef}
+        index={0}
+        snapPoints={snapPoints}
+        onChange={handleSheetChanges}
+        backdropComponent={renderBackdrop}
+        handleIndicatorStyle={{
+          backgroundColor: "white",
+        }}
+        backgroundStyle={{
+          backgroundColor: "#171717",
+        }}
+      >
+        <BottomSheetScrollView
+          style={{
+            flex: 1,
+          }}
+        >
+          <View
+            className='mt-2 mb-8'
+            style={{
+              paddingLeft: Math.max(16, insets.left),
+              paddingRight: Math.max(16, insets.right),
+            }}
          >
-            {subtitleTracks?.map((sub, idx: number) => (
-              <DropdownMenu.CheckboxItem
-                key={`subtitle-item-${idx}`}
-                value={subtitleIndex === sub.index.toString()}
-                onValueChange={() => sub.setTrack()}
-              >
-                <DropdownMenu.ItemTitle key={`subtitle-item-title-${idx}`}>
-                  {sub.name}
-                </DropdownMenu.ItemTitle>
-              </DropdownMenu.CheckboxItem>
-            ))}
-          </DropdownMenu.SubContent>
-        </DropdownMenu.Sub>
-        {(audioTracks?.length ?? 0) > 0 && (
-          <DropdownMenu.Sub>
-            <DropdownMenu.SubTrigger key='audio-trigger'>
-              Audio
-            </DropdownMenu.SubTrigger>
-            <DropdownMenu.SubContent
-              alignOffset={-10}
-              avoidCollisions={true}
-              collisionPadding={0}
-              loop={true}
-              sideOffset={10}
-            >
-              {audioTracks?.map((track, idx: number) => (
-                <DropdownMenu.CheckboxItem
-                  key={`audio-item-${idx}`}
-                  value={audioIndex === track.index.toString()}
-                  onValueChange={() => track.setTrack()}
+            <Text className='font-bold text-2xl mb-6'>Playback Options</Text>
+
+            {/* Quality Section */}
+            {!isOffline && (
+              <View className='mb-6'>
+                <Text className='font-semibold text-lg mb-3 text-neutral-300'>
+                  Quality
+                </Text>
+                <View
+                  style={{
+                    borderRadius: 20,
+                    overflow: "hidden",
+                  }}
+                  className='flex flex-col rounded-xl overflow-hidden'
                >
-                  <DropdownMenu.ItemTitle key={`audio-item-title-${idx}`}>
-                    {track.name}
-                  </DropdownMenu.ItemTitle>
-                </DropdownMenu.CheckboxItem>
-              ))}
-            </DropdownMenu.SubContent>
-          </DropdownMenu.Sub>
-        )}
-      </DropdownMenu.Content>
-    </DropdownMenu.Root>
+                  {BITRATES?.map((bitrate, idx: number) => (
+                    <View key={`quality-item-${idx}`}>
+                      <TouchableOpacity
+                        onPress={() => {
+                          changeBitrate(bitrate.value?.toString() ?? "");
+                          setTimeout(() => handleClose(), 250);
+                        }}
+                        className='bg-neutral-800 px-4 py-3 flex flex-row items-center justify-between'
+                      >
+                        <Text className='flex shrink'>{bitrate.key}</Text>
+                        {bitrateValue === (bitrate.value?.toString() ?? "") ? (
+                          <Ionicons
+                            name='radio-button-on'
+                            size={24}
+                            color='white'
+                          />
+                        ) : (
+                          <Ionicons
+                            name='radio-button-off'
+                            size={24}
+                            color='white'
+                          />
+                        )}
+                      </TouchableOpacity>
+                      {idx < BITRATES.length - 1 && (
+                        <View
+                          style={{
+                            height: StyleSheet.hairlineWidth,
+                          }}
+                          className='bg-neutral-700'
+                        />
+                      )}
+                    </View>
+                  ))}
+                </View>
+              </View>
+            )}
+
+            {/* Subtitle Section */}
+            <View className='mb-6'>
+              <Text className='font-semibold text-lg mb-3 text-neutral-300'>
+                Subtitles
+              </Text>
+              <View
+                style={{
+                  borderRadius: 20,
+                  overflow: "hidden",
+                }}
+                className='flex flex-col rounded-xl overflow-hidden'
+              >
+                {subtitleTracks?.map((sub, idx: number) => (
+                  <View key={`subtitle-item-${idx}`}>
+                    <TouchableOpacity
+                      onPress={() => {
+                        sub.setTrack();
+                        setTimeout(() => handleClose(), 250);
+                      }}
+                      className='bg-neutral-800 px-4 py-3 flex flex-row items-center justify-between'
+                    >
+                      <Text className='flex shrink'>{sub.name}</Text>
+                      {subtitleIndex === sub.index.toString() ? (
+                        <Ionicons
+                          name='radio-button-on'
+                          size={24}
+                          color='white'
+                        />
+                      ) : (
+                        <Ionicons
+                          name='radio-button-off'
+                          size={24}
+                          color='white'
+                        />
+                      )}
+                    </TouchableOpacity>
+                    {idx < (subtitleTracks?.length ?? 0) - 1 && (
+                      <View
+                        style={{
+                          height: StyleSheet.hairlineWidth,
+                        }}
+                        className='bg-neutral-700'
+                      />
+                    )}
+                  </View>
+                ))}
+              </View>
+            </View>
+
+            {/* Audio Section */}
+            {(audioTracks?.length ?? 0) > 0 && (
+              <View className='mb-6'>
+                <Text className='font-semibold text-lg mb-3 text-neutral-300'>
+                  Audio
+                </Text>
+                <View
+                  style={{
+                    borderRadius: 20,
+                    overflow: "hidden",
+                  }}
+                  className='flex flex-col rounded-xl overflow-hidden'
+                >
+                  {audioTracks?.map((track, idx: number) => (
+                    <View key={`audio-item-${idx}`}>
+                      <TouchableOpacity
+                        onPress={() => {
+                          track.setTrack();
+                          setTimeout(() => handleClose(), 250);
+                        }}
+                        className='bg-neutral-800 px-4 py-3 flex flex-row items-center justify-between'
+                      >
+                        <Text className='flex shrink'>{track.name}</Text>
+                        {audioIndex === track.index.toString() ? (
+                          <Ionicons
+                            name='radio-button-on'
+                            size={24}
+                            color='white'
+                          />
+                        ) : (
+                          <Ionicons
+                            name='radio-button-off'
+                            size={24}
+                            color='white'
+                          />
+                        )}
+                      </TouchableOpacity>
+                      {idx < (audioTracks?.length ?? 0) - 1 && (
+                        <View
+                          style={{
+                            height: StyleSheet.hairlineWidth,
+                          }}
+                          className='bg-neutral-700'
+                        />
+                      )}
+                    </View>
+                  ))}
+                </View>
+              </View>
+            )}
+          </View>
+        </BottomSheetScrollView>
+      </BottomSheetModal>
+    </>
  );
 };