alteropen/streamyfin
1
0
Fork 0
mirror of https://github.com/streamyfin/streamyfin.git synced 2026-06-01 19:48:28 +01:00
Code Issues Actions 8 Packages Projects Releases Wiki Activity

chore(bottom-sheet): Migrate to expo-ui bottom sheet

Browse Source
This commit is contained in:
Alex Kim
2026-05-31 21:49:32 +10:00
parent ea5a999f21
commit 8cf9a8d584
29 changed files with 477 additions and 637 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
components/AccountsSheet.tsx
View File

@@ -1,10 +1,4 @@
import { Ionicons } from "@expo/vector-icons";
import {
BottomSheetBackdrop,
type BottomSheetBackdropProps,
BottomSheetModal,
BottomSheetView,
} from "@gorhom/bottom-sheet";
import type React from "react";
import { useCallback, useEffect, useMemo, useRef } from "react";
import { useTranslation } from "react-i18next";
@@ -12,6 +6,11 @@ import { Alert, Platform, TouchableOpacity, View } from "react-native";
import { Swipeable } from "react-native-gesture-handler";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import { Colors } from "@/constants/Colors";
import {
type BottomSheetMethods,
BottomSheetModal,
BottomSheetView,
} from "@/utils/expoUiBottomSheet";
import {
deleteAccountCredential,
type SavedServer,
@@ -39,7 +38,7 @@ export const AccountsSheet: React.FC<AccountsSheetProps> = ({
}) => {
const { t } = useTranslation();
const insets = useSafeAreaInsets();
const bottomSheetModalRef = useRef<BottomSheetModal>(null);
const bottomSheetModalRef = useRef<BottomSheetMethods>(null);
const isAndroid = Platform.OS === "android";
const snapPoints = useMemo(
@@ -64,17 +63,6 @@ export const AccountsSheet: React.FC<AccountsSheetProps> = ({
[setOpen],
);
const renderBackdrop = useCallback(
(props: BottomSheetBackdropProps) => (
<BottomSheetBackdrop
{...props}
disappearsOnIndex={-1}
appearsOnIndex={0}
/>
),
[],
);
const handleDeleteAccount = async (account: SavedServerAccount) => {
if (!server) return;
@@ -118,15 +106,16 @@ export const AccountsSheet: React.FC<AccountsSheetProps> = ({
);
if (!server) return null;
if (Platform.isTV) return null;
return (
<BottomSheetModal
ref={bottomSheetModalRef}
enablePanDownToClose
snapPoints={snapPoints}
onChange={handleSheetChanges}
handleIndicatorStyle={{ backgroundColor: "white" }}
backgroundStyle={{ backgroundColor: "#171717" }}
backdropComponent={renderBackdrop}
>
<BottomSheetView
style={{

29
components/DownloadItem.tsx
View File

@@ -1,10 +1,4 @@
import Ionicons from "@expo/vector-icons/Ionicons";
import {
BottomSheetBackdrop,
type BottomSheetBackdropProps,
BottomSheetModal,
BottomSheetView,
} from "@gorhom/bottom-sheet";
import type {
BaseItemDto,
MediaSourceInfo,
@@ -23,6 +17,11 @@ import { useDownload } from "@/providers/DownloadProvider";
import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
import { queueAtom } from "@/utils/atoms/queue";
import { useSettings } from "@/utils/atoms/settings";
import {
type BottomSheetMethods,
BottomSheetModal,
BottomSheetView,
} from "@/utils/expoUiBottomSheet";
import { getDefaultPlaySettings } from "@/utils/jellyfin/getDefaultPlaySettings";
import { getDownloadUrl } from "@/utils/jellyfin/media/getDownloadUrl";
import { AudioTrackSelector } from "./AudioTrackSelector";
@@ -90,7 +89,7 @@ export const DownloadItems: React.FC<DownloadProps> = ({
[user],
);
const bottomSheetModalRef = useRef<BottomSheetModal>(null);
const bottomSheetModalRef = useRef<BottomSheetMethods>(null);
const handlePresentModalPress = useCallback(() => {
bottomSheetModalRef.current?.present();
@@ -317,17 +316,6 @@ export const DownloadItems: React.FC<DownloadProps> = ({
}
}, [closeModal, initiateDownload, itemsToDownload, userCanDownload]);
const renderBackdrop = useCallback(
(props: BottomSheetBackdropProps) => (
<BottomSheetBackdrop
{...props}
disappearsOnIndex={-1}
appearsOnIndex={0}
/>
),
[],
);
const renderButtonContent = () => {
// For single item downloads, show progress if item is being processed
// For multi-item downloads (season/series), show progress only if 2+ items are in progress or queued
@@ -375,6 +363,8 @@ export const DownloadItems: React.FC<DownloadProps> = ({
}
};
if (Platform.isTV) return null;
return (
<View {...props}>
<RoundButton size={size} onPress={onButtonPress}>
@@ -390,10 +380,7 @@ export const DownloadItems: React.FC<DownloadProps> = ({
backgroundColor: "#171717",
}}
onChange={handleSheetChanges}
backdropComponent={renderBackdrop}
enablePanDownToClose
enableDismissOnClose
android_keyboardInputMode='adjustResize'
keyboardBehavior='interactive'
keyboardBlurBehavior='restore'
>

26
components/GlobalModal.tsx
View File

@@ -1,10 +1,7 @@
import {
BottomSheetBackdrop,
type BottomSheetBackdropProps,
BottomSheetModal,
} from "@gorhom/bottom-sheet";
import { useCallback, useEffect } from "react";
import { Platform } from "react-native";
import { useGlobalModal } from "@/providers/GlobalModalProvider";
import { BottomSheetModal } from "@/utils/expoUiBottomSheet";
/**
* GlobalModal Component
@@ -12,8 +9,7 @@ import { useGlobalModal } from "@/providers/GlobalModalProvider";
* This component renders a global bottom sheet modal that can be controlled
* from anywhere in the app using the useGlobalModal hook.
*
* Place this component at the root level of your app (in _layout.tsx)
* after BottomSheetModalProvider.
* Place this component at the root level of your app (in _layout.tsx).
*/
export const GlobalModal = () => {
const { hideModal, modalState, modalRef, isVisible } = useGlobalModal();
@@ -33,17 +29,6 @@ export const GlobalModal = () => {
[hideModal],
);
const renderBackdrop = useCallback(
(props: BottomSheetBackdropProps) => (
<BottomSheetBackdrop
{...props}
disappearsOnIndex={-1}
appearsOnIndex={0}
/>
),
[],
);
const defaultOptions = {
enableDynamicSizing: true,
enablePanDownToClose: true,
@@ -58,6 +43,8 @@ export const GlobalModal = () => {
// Merge default options with provided options
const modalOptions = { ...defaultOptions, ...modalState.options };
if (Platform.isTV) return null;
return (
<BottomSheetModal
ref={modalRef}
@@ -65,12 +52,9 @@ export const GlobalModal = () => {
? { snapPoints: modalOptions.snapPoints }
: { enableDynamicSizing: modalOptions.enableDynamicSizing })}
onChange={handleSheetChanges}
backdropComponent={renderBackdrop}
handleIndicatorStyle={modalOptions.handleIndicatorStyle}
backgroundStyle={modalOptions.backgroundStyle}
enablePanDownToClose={modalOptions.enablePanDownToClose}
enableDismissOnClose
stackBehavior='push'
style={{ zIndex: 1000 }}
>
{modalState.content}

28
components/IntroSheet.tsx
View File

@@ -1,10 +1,4 @@
import { Feather, Ionicons } from "@expo/vector-icons";
import {
BottomSheetBackdrop,
type BottomSheetBackdropProps,
BottomSheetModal,
BottomSheetScrollView,
} from "@gorhom/bottom-sheet";
import { Image } from "expo-image";
import { forwardRef, useCallback, useImperativeHandle, useRef } from "react";
import { useTranslation } from "react-i18next";
@@ -13,6 +7,11 @@ import { useSafeAreaInsets } from "react-native-safe-area-context";
import { Button } from "@/components/Button";
import { Text } from "@/components/common/Text";
import useRouter from "@/hooks/useAppRouter";
import {
type BottomSheetMethods,
BottomSheetModal,
BottomSheetScrollView,
} from "@/utils/expoUiBottomSheet";
import { storage } from "@/utils/mmkv";
export interface IntroSheetRef {
@@ -21,7 +20,7 @@ export interface IntroSheetRef {
}
export const IntroSheet = forwardRef<IntroSheetRef>((_, ref) => {
const bottomSheetRef = useRef<BottomSheetModal>(null);
const bottomSheetRef = useRef<BottomSheetMethods>(null);
const { t } = useTranslation();
const insets = useSafeAreaInsets();
const router = useRouter();
@@ -36,17 +35,6 @@ export const IntroSheet = forwardRef<IntroSheetRef>((_, ref) => {
},
}));
const renderBackdrop = useCallback(
(props: BottomSheetBackdropProps) => (
<BottomSheetBackdrop
{...props}
disappearsOnIndex={-1}
appearsOnIndex={0}
/>
),
[],
);
const handleDismiss = useCallback(() => {
bottomSheetRef.current?.dismiss();
}, []);
@@ -56,11 +44,13 @@ export const IntroSheet = forwardRef<IntroSheetRef>((_, ref) => {
router.push("/settings");
}, []);
if (Platform.isTV) return null;
return (
<BottomSheetModal
ref={bottomSheetRef}
enablePanDownToClose
enableDynamicSizing
backdropComponent={renderBackdrop}
backgroundStyle={{ backgroundColor: "#171717" }}
handleIndicatorStyle={{ backgroundColor: "#737373" }}
>

50
components/ItemTechnicalDetails.tsx
View File

@@ -1,10 +1,4 @@
import { Ionicons } from "@expo/vector-icons";
import {
BottomSheetBackdrop,
type BottomSheetBackdropProps,
BottomSheetModal,
BottomSheetScrollView,
} from "@gorhom/bottom-sheet";
import type {
MediaSourceInfo,
MediaStream,
@@ -12,8 +6,13 @@ import type {
import type React from "react";
import { useMemo, useRef } from "react";
import { useTranslation } from "react-i18next";
import { TouchableOpacity, View } from "react-native";
import { Platform, TouchableOpacity, View } from "react-native";
import { formatBitrate } from "@/utils/bitrate";
import {
type BottomSheetMethods,
BottomSheetModal,
BottomSheetScrollView,
} from "@/utils/expoUiBottomSheet";
import { Badge } from "./Badge";
import { Text } from "./common/Text";
@@ -22,9 +21,20 @@ interface Props {
}
export const ItemTechnicalDetails: React.FC<Props> = ({ source }) => {
const bottomSheetModalRef = useRef<BottomSheetModal>(null);
const bottomSheetModalRef = useRef<BottomSheetMethods>(null);
const { t } = useTranslation();
if (Platform.isTV) {
return (
<View className='px-4 mt-2 mb-4'>
<Text className='text-lg font-bold mb-4'>{t("item_card.video")}</Text>
<View className='flex flex-row space-x-2'>
<VideoStreamInfo source={source} />
</View>
</View>
);
}
return (
<View className='px-4 mt-2 mb-4'>
<Text className='text-lg font-bold mb-4'>{t("item_card.video")}</Text>
@@ -36,27 +46,27 @@ export const ItemTechnicalDetails: React.FC<Props> = ({ source }) => {
</TouchableOpacity>
<BottomSheetModal
ref={bottomSheetModalRef}
snapPoints={["80%"]}
enableDynamicSizing
enablePanDownToClose
handleIndicatorStyle={{
backgroundColor: "white",
}}
backgroundStyle={{
backgroundColor: "#171717",
}}
backdropComponent={(props: BottomSheetBackdropProps) => (
<BottomSheetBackdrop
{...props}
disappearsOnIndex={-1}
appearsOnIndex={0}
/>
)}
>
<BottomSheetScrollView>
<View className='flex flex-col space-y-2 p-4 mb-4'>
<View className='flex flex-col space-y-2 p-4'>
<View className='flex-row items-center justify-between mb-2'>
<Text className='text-lg font-bold'>{t("item_card.video")}</Text>
<TouchableOpacity
onPress={() => bottomSheetModalRef.current?.dismiss()}
hitSlop={12}
>
<Ionicons name='close' size={24} color='white' />
</TouchableOpacity>
</View>
<View>
<Text className='text-lg font-bold mb-4'>
{t("item_card.video")}
</Text>
<View className='flex flex-row space-x-2'>
<VideoStreamInfo source={source} />
</View>

30
components/PINEntryModal.tsx
View File

@@ -1,9 +1,3 @@
import {
BottomSheetBackdrop,
type BottomSheetBackdropProps,
BottomSheetModal,
BottomSheetView,
} from "@gorhom/bottom-sheet";
import type React from "react";
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import { useTranslation } from "react-i18next";
@@ -17,6 +11,11 @@ import {
} from "react-native";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import { useHaptic } from "@/hooks/useHaptic";
import {
type BottomSheetMethods,
BottomSheetModal,
BottomSheetView,
} from "@/utils/expoUiBottomSheet";
import { verifyAccountPIN } from "@/utils/secureCredentials";
import { Button } from "./Button";
import { Text } from "./common/Text";
@@ -43,7 +42,7 @@ export const PINEntryModal: React.FC<PINEntryModalProps> = ({
}) => {
const { t } = useTranslation();
const insets = useSafeAreaInsets();
const bottomSheetModalRef = useRef<BottomSheetModal>(null);
const bottomSheetModalRef = useRef<BottomSheetMethods>(null);
const [pinCode, setPinCode] = useState("");
const [error, setError] = useState<string | null>(null);
const [isVerifying, setIsVerifying] = useState(false);
@@ -78,17 +77,6 @@ export const PINEntryModal: React.FC<PINEntryModalProps> = ({
[onClose],
);
const renderBackdrop = useCallback(
(props: BottomSheetBackdropProps) => (
<BottomSheetBackdrop
{...props}
disappearsOnIndex={-1}
appearsOnIndex={0}
/>
),
[],
);
const shake = () => {
Animated.sequence([
Animated.timing(shakeAnimation, {
@@ -159,18 +147,18 @@ export const PINEntryModal: React.FC<PINEntryModalProps> = ({
]);
};
if (Platform.isTV) return null;
return (
<BottomSheetModal
ref={bottomSheetModalRef}
enablePanDownToClose
snapPoints={snapPoints}
onChange={handleSheetChanges}
handleIndicatorStyle={{ backgroundColor: "white" }}
backgroundStyle={{ backgroundColor: "#171717" }}
backdropComponent={renderBackdrop}
keyboardBehavior={isAndroid ? "fillParent" : "interactive"}
keyboardBlurBehavior='restore'
android_keyboardInputMode='adjustResize'
topInset={isAndroid ? 0 : undefined}
>
<BottomSheetView
style={{

32
components/PasswordEntryModal.tsx
View File

@@ -1,16 +1,15 @@
import {
BottomSheetBackdrop,
type BottomSheetBackdropProps,
BottomSheetModal,
BottomSheetTextInput,
BottomSheetView,
} from "@gorhom/bottom-sheet";
import type React from "react";
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import { useTranslation } from "react-i18next";
import { ActivityIndicator, Platform, View } from "react-native";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import { useHaptic } from "@/hooks/useHaptic";
import {
type BottomSheetMethods,
BottomSheetModal,
BottomSheetTextInput,
BottomSheetView,
} from "@/utils/expoUiBottomSheet";
import { Button } from "./Button";
import { Text } from "./common/Text";
@@ -29,7 +28,7 @@ export const PasswordEntryModal: React.FC<PasswordEntryModalProps> = ({
}) => {
const { t } = useTranslation();
const insets = useSafeAreaInsets();
const bottomSheetModalRef = useRef<BottomSheetModal>(null);
const bottomSheetModalRef = useRef<BottomSheetMethods>(null);
const [password, setPassword] = useState("");
const [error, setError] = useState<string | null>(null);
const [isLoading, setIsLoading] = useState(false);
@@ -62,17 +61,6 @@ export const PasswordEntryModal: React.FC<PasswordEntryModalProps> = ({
[onClose],
);
const renderBackdrop = useCallback(
(props: BottomSheetBackdropProps) => (
<BottomSheetBackdrop
{...props}
disappearsOnIndex={-1}
appearsOnIndex={0}
/>
),
[],
);
const handleSubmit = async () => {
if (!password) {
setError(t("password.enter_password"));
@@ -93,18 +81,18 @@ export const PasswordEntryModal: React.FC<PasswordEntryModalProps> = ({
}
};
if (Platform.isTV) return null;
return (
<BottomSheetModal
ref={bottomSheetModalRef}
enablePanDownToClose
snapPoints={snapPoints}
onChange={handleSheetChanges}
handleIndicatorStyle={{ backgroundColor: "white" }}
backgroundStyle={{ backgroundColor: "#171717" }}
backdropComponent={renderBackdrop}
keyboardBehavior={isAndroid ? "fillParent" : "interactive"}
keyboardBlurBehavior='restore'
android_keyboardInputMode='adjustResize'
topInset={isAndroid ? 0 : undefined}
>
<BottomSheetView
style={{

2
components/PlatformDropdown.tsx
View File

@@ -1,5 +1,4 @@
import { Ionicons } from "@expo/vector-icons";
import { BottomSheetScrollView } from "@gorhom/bottom-sheet";
import React, { useEffect, useState } from "react";
import {
type LayoutChangeEvent,
@@ -11,6 +10,7 @@ import {
import { useSafeAreaInsets } from "react-native-safe-area-context";
import { Text } from "@/components/common/Text";
import { useGlobalModal } from "@/providers/GlobalModalProvider";
import { BottomSheetScrollView } from "@/utils/expoUiBottomSheet";
// @expo/ui's SwiftUI native module (ExpoUI) does not exist in tvOS builds.
// A static top-level import evaluates requireNativeModule('ExpoUI') at module

2
components/PlayButton.tsx
View File

@@ -1,6 +1,5 @@
import { useActionSheet } from "@expo/react-native-action-sheet";
import { Feather, Ionicons } from "@expo/vector-icons";
import { BottomSheetView } from "@gorhom/bottom-sheet";
import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
import { useAtom, useAtomValue } from "jotai";
import { useCallback, useEffect } from "react";
@@ -32,6 +31,7 @@ import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
import { useOfflineMode } from "@/providers/OfflineModeProvider";
import { itemThemeColorAtom } from "@/utils/atoms/primaryColor";
import { useSettings } from "@/utils/atoms/settings";
import { BottomSheetView } from "@/utils/expoUiBottomSheet";
import { getParentBackdropImageUrl } from "@/utils/jellyfin/image/getParentBackdropImageUrl";
import { getPrimaryImageUrl } from "@/utils/jellyfin/image/getPrimaryImageUrl";
import { getStreamUrl } from "@/utils/jellyfin/media/getStreamUrl";

30
components/SaveAccountModal.tsx
View File

@@ -1,15 +1,14 @@
import { Ionicons } from "@expo/vector-icons";
import {
BottomSheetBackdrop,
type BottomSheetBackdropProps,
BottomSheetModal,
BottomSheetView,
} from "@gorhom/bottom-sheet";
import type React from "react";
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import { useTranslation } from "react-i18next";
import { Platform, TouchableOpacity, View } from "react-native";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import {
type BottomSheetMethods,
BottomSheetModal,
BottomSheetView,
} from "@/utils/expoUiBottomSheet";
import type { AccountSecurityType } from "@/utils/secureCredentials";
import { Button } from "./Button";
import { Text } from "./common/Text";
@@ -58,7 +57,7 @@ export const SaveAccountModal: React.FC<SaveAccountModalProps> = ({
}) => {
const { t } = useTranslation();
const insets = useSafeAreaInsets();
const bottomSheetModalRef = useRef<BottomSheetModal>(null);
const bottomSheetModalRef = useRef<BottomSheetMethods>(null);
const [selectedType, setSelectedType] = useState<AccountSecurityType>("none");
const [pinCode, setPinCode] = useState("");
const [pinError, setPinError] = useState<string | null>(null);
@@ -93,17 +92,6 @@ export const SaveAccountModal: React.FC<SaveAccountModalProps> = ({
setPinError(null);
};
const renderBackdrop = useCallback(
(props: BottomSheetBackdropProps) => (
<BottomSheetBackdrop
{...props}
disappearsOnIndex={-1}
appearsOnIndex={0}
/>
),
[],
);
const handleOptionSelect = (type: AccountSecurityType) => {
setSelectedType(type);
setPinCode("");
@@ -135,18 +123,18 @@ export const SaveAccountModal: React.FC<SaveAccountModalProps> = ({
return true;
};
if (Platform.isTV) return null;
return (
<BottomSheetModal
ref={bottomSheetModalRef}
enablePanDownToClose
snapPoints={snapPoints}
onChange={handleSheetChanges}
handleIndicatorStyle={{ backgroundColor: "white" }}
backgroundStyle={{ backgroundColor: "#171717" }}
backdropComponent={renderBackdrop}
keyboardBehavior={isAndroid ? "fillParent" : "interactive"}
keyboardBlurBehavior='restore'
android_keyboardInputMode='adjustResize'
topInset={isAndroid ? 0 : undefined}
>
<BottomSheetView
style={{

27
components/filters/FilterSheet.tsx
View File

@@ -1,15 +1,10 @@
import { Ionicons } from "@expo/vector-icons";
import {
BottomSheetBackdrop,
type BottomSheetBackdropProps,
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";
import {
Platform,
StyleSheet,
TouchableOpacity,
View,
@@ -17,6 +12,11 @@ import {
} from "react-native";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import { Text } from "@/components/common/Text";
import {
type BottomSheetMethods,
BottomSheetModal,
BottomSheetScrollView,
} from "@/utils/expoUiBottomSheet";
import { Button } from "../Button";
import { Input } from "../common/Input";
@@ -75,7 +75,7 @@ export const FilterSheet = <T,>({
disableSearch = false,
multiple = false,
}: Props<T>) => {
const bottomSheetModalRef = useRef<BottomSheetModal>(null);
const bottomSheetModalRef = useRef<BottomSheetMethods>(null);
const snapPoints = useMemo(() => ["85%"], []);
const { t } = useTranslation();
const insets = useSafeAreaInsets();
@@ -143,24 +143,15 @@ export const FilterSheet = <T,>({
return data;
}, [search, filteredData, data]);
const renderBackdrop = useCallback(
(props: BottomSheetBackdropProps) => (
<BottomSheetBackdrop
{...props}
disappearsOnIndex={-1}
appearsOnIndex={0}
/>
),
[],
);
if (Platform.isTV) return null;
return (
<BottomSheetModal
ref={bottomSheetModalRef}
enablePanDownToClose
index={0}
snapPoints={snapPoints}
onChange={handleSheetChanges}
backdropComponent={renderBackdrop}
handleIndicatorStyle={{
backgroundColor: "white",
}}

2
components/inputs/PinInput.tsx
View File

@@ -1,4 +1,3 @@
import { BottomSheetTextInput } from "@gorhom/bottom-sheet";
import React, { useCallback, useImperativeHandle, useRef } from "react";
import {
type StyleProp,
@@ -8,6 +7,7 @@ import {
View,
type ViewStyle,
} from "react-native";
import { BottomSheetTextInput } from "@/utils/expoUiBottomSheet";
interface PinInputProps
extends Omit<TextInputProps, "value" | "onChangeText" | "style"> {

29
components/jellyseerr/RequestModal.tsx
View File

@@ -1,23 +1,22 @@
import {
BottomSheetBackdrop,
type BottomSheetBackdropProps,
BottomSheetModal,
BottomSheetView,
} from "@gorhom/bottom-sheet";
import type { BottomSheetModalMethods } from "@gorhom/bottom-sheet/lib/typescript/types";
import { useQuery } from "@tanstack/react-query";
import { forwardRef, useCallback, useMemo, useState } from "react";
import { useTranslation } from "react-i18next";
import { View, type ViewProps } from "react-native";
import { Platform, View, type ViewProps } from "react-native";
import { Button } from "@/components/Button";
import { Text } from "@/components/common/Text";
import { PlatformDropdown } from "@/components/PlatformDropdown";
import { useJellyseerr } from "@/hooks/useJellyseerr";
import {
type BottomSheetMethods,
BottomSheetModal,
BottomSheetView,
} from "@/utils/expoUiBottomSheet";
import type {
QualityProfile,
RootFolder,
Tag,
} from "@/utils/jellyseerr/server/api/servarr/base";
import type { MediaType } from "@/utils/jellyseerr/server/constants/media";
import type { MediaRequestBody } from "@/utils/jellyseerr/server/interfaces/api/requestInterfaces";
import { writeDebugLog } from "@/utils/log";
@@ -34,7 +33,7 @@ interface Props {
}
const RequestModal = forwardRef<
BottomSheetModalMethods,
BottomSheetMethods,
Props & Omit<ViewProps, "id">
>(
(
@@ -283,11 +282,13 @@ const RequestModal = forwardRef<
defaultTags,
]);
if (Platform.isTV) return null;
return (
<BottomSheetModal
ref={ref}
enablePanDownToClose
enableDynamicSizing
enableDismissOnClose
onDismiss={handleDismiss}
handleIndicatorStyle={{
backgroundColor: "white",
@@ -295,14 +296,6 @@ const RequestModal = forwardRef<
backgroundStyle={{
backgroundColor: "#171717",
}}
backdropComponent={(sheetProps: BottomSheetBackdropProps) => (
<BottomSheetBackdrop
{...sheetProps}
disappearsOnIndex={-1}
appearsOnIndex={0}
/>
)}
stackBehavior='push'
>
<BottomSheetView>
<View className='flex flex-col space-y-4 px-4 pb-8 pt-2'>

32
components/music/CreatePlaylistModal.tsx
View File

@@ -1,10 +1,3 @@
import {
BottomSheetBackdrop,
type BottomSheetBackdropProps,
BottomSheetModal,
BottomSheetTextInput,
BottomSheetView,
} from "@gorhom/bottom-sheet";
import React, {
useCallback,
useEffect,
@@ -13,11 +6,17 @@ import React, {
useState,
} from "react";
import { useTranslation } from "react-i18next";
import { ActivityIndicator, Keyboard } from "react-native";
import { ActivityIndicator, Keyboard, Platform } from "react-native";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import { Button } from "@/components/Button";
import { Text } from "@/components/common/Text";
import { useCreatePlaylist } from "@/hooks/usePlaylistMutations";
import {
type BottomSheetMethods,
BottomSheetModal,
BottomSheetTextInput,
BottomSheetView,
} from "@/utils/expoUiBottomSheet";
interface Props {
open: boolean;
@@ -32,7 +31,7 @@ export const CreatePlaylistModal: React.FC<Props> = ({
onPlaylistCreated,
initialTrackId,
}) => {
const bottomSheetModalRef = useRef<BottomSheetModal>(null);
const bottomSheetModalRef = useRef<BottomSheetMethods>(null);
const insets = useSafeAreaInsets();
const { t } = useTranslation();
const createPlaylist = useCreatePlaylist();
@@ -59,17 +58,6 @@ export const CreatePlaylistModal: React.FC<Props> = ({
[setOpen],
);
const renderBackdrop = useCallback(
(props: BottomSheetBackdropProps) => (
<BottomSheetBackdrop
{...props}
disappearsOnIndex={-1}
appearsOnIndex={0}
/>
),
[],
);
const handleCreate = useCallback(async () => {
if (!name.trim()) return;
@@ -86,13 +74,15 @@ export const CreatePlaylistModal: React.FC<Props> = ({
const isValid = name.trim().length > 0;
if (Platform.isTV) return null;
return (
<BottomSheetModal
ref={bottomSheetModalRef}
enablePanDownToClose
index={0}
snapPoints={snapPoints}
onChange={handleSheetChanges}
backdropComponent={renderBackdrop}
handleIndicatorStyle={{
backgroundColor: "white",
}}

35
components/music/PlaylistOptionsSheet.tsx
View File

@@ -1,18 +1,23 @@
import { Ionicons } from "@expo/vector-icons";
import {
BottomSheetBackdrop,
type BottomSheetBackdropProps,
BottomSheetModal,
BottomSheetView,
} from "@gorhom/bottom-sheet";
import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
import React, { useCallback, useEffect, useMemo, useRef } from "react";
import { useTranslation } from "react-i18next";
import { Alert, StyleSheet, TouchableOpacity, View } from "react-native";
import {
Alert,
Platform,
StyleSheet,
TouchableOpacity,
View,
} from "react-native";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import { Text } from "@/components/common/Text";
import useRouter from "@/hooks/useAppRouter";
import { useDeletePlaylist } from "@/hooks/usePlaylistMutations";
import {
type BottomSheetMethods,
BottomSheetModal,
BottomSheetView,
} from "@/utils/expoUiBottomSheet";
interface Props {
open: boolean;
@@ -25,7 +30,7 @@ export const PlaylistOptionsSheet: React.FC<Props> = ({
setOpen,
playlist,
}) => {
const bottomSheetModalRef = useRef<BottomSheetModal>(null);
const bottomSheetModalRef = useRef<BottomSheetMethods>(null);
const router = useRouter();
const insets = useSafeAreaInsets();
const { t } = useTranslation();
@@ -47,17 +52,6 @@ export const PlaylistOptionsSheet: React.FC<Props> = ({
[setOpen],
);
const renderBackdrop = useCallback(
(props: BottomSheetBackdropProps) => (
<BottomSheetBackdrop
{...props}
disappearsOnIndex={-1}
appearsOnIndex={0}
/>
),
[],
);
const handleDeletePlaylist = useCallback(() => {
if (!playlist?.Id) return;
@@ -89,14 +83,15 @@ export const PlaylistOptionsSheet: React.FC<Props> = ({
}, [playlist, deletePlaylist, setOpen, router, t]);
if (!playlist) return null;
if (Platform.isTV) return null;
return (
<BottomSheetModal
ref={bottomSheetModalRef}
enablePanDownToClose
index={0}
snapPoints={snapPoints}
onChange={handleSheetChanges}
backdropComponent={renderBackdrop}
handleIndicatorStyle={{
backgroundColor: "white",
}}

29
components/music/PlaylistPickerSheet.tsx
View File

@@ -1,10 +1,4 @@
import { Ionicons } from "@expo/vector-icons";
import {
BottomSheetBackdrop,
type BottomSheetBackdropProps,
BottomSheetModal,
BottomSheetScrollView,
} from "@gorhom/bottom-sheet";
import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
import { getItemsApi } from "@jellyfin/sdk/lib/utils/api";
import { useQuery } from "@tanstack/react-query";
@@ -20,6 +14,7 @@ import React, {
import { useTranslation } from "react-i18next";
import {
ActivityIndicator,
Platform,
StyleSheet,
TouchableOpacity,
View,
@@ -29,6 +24,11 @@ import { Input } from "@/components/common/Input";
import { Text } from "@/components/common/Text";
import { useAddToPlaylist } from "@/hooks/usePlaylistMutations";
import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
import {
type BottomSheetMethods,
BottomSheetModal,
BottomSheetScrollView,
} from "@/utils/expoUiBottomSheet";
interface Props {
open: boolean;
@@ -43,7 +43,7 @@ export const PlaylistPickerSheet: React.FC<Props> = ({
trackToAdd,
onCreateNew,
}) => {
const bottomSheetModalRef = useRef<BottomSheetModal>(null);
const bottomSheetModalRef = useRef<BottomSheetMethods>(null);
const [api] = useAtom(apiAtom);
const [user] = useAtom(userAtom);
const insets = useSafeAreaInsets();
@@ -101,17 +101,6 @@ export const PlaylistPickerSheet: React.FC<Props> = ({
[setOpen],
);
const renderBackdrop = useCallback(
(props: BottomSheetBackdropProps) => (
<BottomSheetBackdrop
{...props}
disappearsOnIndex={-1}
appearsOnIndex={0}
/>
),
[],
);
const handleSelectPlaylist = useCallback(
async (playlist: BaseItemDto) => {
if (!trackToAdd?.Id || !playlist.Id) return;
@@ -142,13 +131,15 @@ export const PlaylistPickerSheet: React.FC<Props> = ({
[api],
);
if (Platform.isTV) return null;
return (
<BottomSheetModal
ref={bottomSheetModalRef}
enablePanDownToClose
index={0}
snapPoints={snapPoints}
onChange={handleSheetChanges}
backdropComponent={renderBackdrop}
handleIndicatorStyle={{
backgroundColor: "white",
}}

30
components/music/PlaylistSortSheet.tsx
View File

@@ -1,15 +1,14 @@
import { Ionicons } from "@expo/vector-icons";
import {
BottomSheetBackdrop,
type BottomSheetBackdropProps,
BottomSheetModal,
BottomSheetView,
} from "@gorhom/bottom-sheet";
import React, { useCallback, useEffect, useMemo, useRef } from "react";
import { useTranslation } from "react-i18next";
import { StyleSheet, TouchableOpacity, View } from "react-native";
import { Platform, StyleSheet, TouchableOpacity, View } from "react-native";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import { Text } from "@/components/common/Text";
import {
type BottomSheetMethods,
BottomSheetModal,
BottomSheetView,
} from "@/utils/expoUiBottomSheet";
export type PlaylistSortOption = "SortName" | "DateCreated";
@@ -43,7 +42,7 @@ export const PlaylistSortSheet: React.FC<Props> = ({
sortOrder,
onSortChange,
}) => {
const bottomSheetModalRef = useRef<BottomSheetModal>(null);
const bottomSheetModalRef = useRef<BottomSheetMethods>(null);
const insets = useSafeAreaInsets();
const { t } = useTranslation();
@@ -63,17 +62,6 @@ export const PlaylistSortSheet: React.FC<Props> = ({
[setOpen],
);
const renderBackdrop = useCallback(
(props: BottomSheetBackdropProps) => (
<BottomSheetBackdrop
{...props}
disappearsOnIndex={-1}
appearsOnIndex={0}
/>
),
[],
);
const handleSortSelect = useCallback(
(option: PlaylistSortOption) => {
// If selecting same option, toggle order; otherwise use sensible default
@@ -93,13 +81,15 @@ export const PlaylistSortSheet: React.FC<Props> = ({
[sortBy, sortOrder, onSortChange, setOpen],
);
if (Platform.isTV) return null;
return (
<BottomSheetModal
ref={bottomSheetModalRef}
enablePanDownToClose
index={0}
snapPoints={snapPoints}
onChange={handleSheetChanges}
backdropComponent={renderBackdrop}
handleIndicatorStyle={{
backgroundColor: "white",
}}

28
components/music/TrackOptionsSheet.tsx
View File

@@ -1,10 +1,4 @@
import { Ionicons } from "@expo/vector-icons";
import {
BottomSheetBackdrop,
type BottomSheetBackdropProps,
BottomSheetModal,
BottomSheetView,
} from "@gorhom/bottom-sheet";
import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
import { Image } from "expo-image";
import { useAtom } from "jotai";
@@ -18,6 +12,7 @@ import React, {
import { useTranslation } from "react-i18next";
import {
ActivityIndicator,
Platform,
StyleSheet,
TouchableOpacity,
View,
@@ -36,6 +31,11 @@ import {
} from "@/providers/AudioStorage";
import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
import { useMusicPlayer } from "@/providers/MusicPlayerProvider";
import {
type BottomSheetMethods,
BottomSheetModal,
BottomSheetView,
} from "@/utils/expoUiBottomSheet";
import { getAudioStreamUrl } from "@/utils/jellyfin/audio/getAudioStreamUrl";
import { getPrimaryImageUrl } from "@/utils/jellyfin/image/getPrimaryImageUrl";
@@ -56,7 +56,7 @@ export const TrackOptionsSheet: React.FC<Props> = ({
playlistId,
onRemoveFromPlaylist,
}) => {
const bottomSheetModalRef = useRef<BottomSheetModal>(null);
const bottomSheetModalRef = useRef<BottomSheetMethods>(null);
const [api] = useAtom(apiAtom);
const [user] = useAtom(userAtom);
const router = useRouter();
@@ -128,17 +128,6 @@ export const TrackOptionsSheet: React.FC<Props> = ({
[setOpen],
);
const renderBackdrop = useCallback(
(props: BottomSheetBackdropProps) => (
<BottomSheetBackdrop
{...props}
disappearsOnIndex={-1}
appearsOnIndex={0}
/>
),
[],
);
const handlePlayNext = useCallback(() => {
if (track) {
playNext(track);
@@ -227,13 +216,14 @@ export const TrackOptionsSheet: React.FC<Props> = ({
const hasAlbum = !!(track?.AlbumId || track?.ParentId);
if (!track) return null;
if (Platform.isTV) return null;
return (
<BottomSheetModal
ref={bottomSheetModalRef}
enablePanDownToClose
enableDynamicSizing
onChange={handleSheetChanges}
backdropComponent={renderBackdrop}
handleIndicatorStyle={{
backgroundColor: "white",
}}

28
components/settings/LibraryOptionsSheet.tsx
View File

@@ -1,14 +1,9 @@
import { Ionicons } from "@expo/vector-icons";
import {
BottomSheetBackdrop,
type BottomSheetBackdropProps,
BottomSheetModal,
BottomSheetView,
} from "@gorhom/bottom-sheet";
import type React from "react";
import { useCallback, useEffect, useRef } from "react";
import { useTranslation } from "react-i18next";
import {
Platform,
StyleSheet,
TouchableOpacity,
View,
@@ -16,6 +11,11 @@ import {
} from "react-native";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import { Text } from "@/components/common/Text";
import {
type BottomSheetMethods,
BottomSheetModal,
BottomSheetView,
} from "@/utils/expoUiBottomSheet";
interface LibraryOptions {
display: "row" | "list";
@@ -132,7 +132,7 @@ export const LibraryOptionsSheet: React.FC<Props> = ({
updateSettings,
disabled = false,
}) => {
const bottomSheetModalRef = useRef<BottomSheetModal>(null);
const bottomSheetModalRef = useRef<BottomSheetMethods>(null);
const { t } = useTranslation();
const insets = useSafeAreaInsets();
@@ -161,25 +161,14 @@ export const LibraryOptionsSheet: React.FC<Props> = ({
[setOpen],
);
const renderBackdrop = useCallback(
(props: BottomSheetBackdropProps) => (
<BottomSheetBackdrop
{...props}
disappearsOnIndex={-1}
appearsOnIndex={0}
/>
),
[],
);
if (disabled) return null;
if (Platform.isTV) return null;
return (
<BottomSheetModal
ref={bottomSheetModalRef}
enableDynamicSizing
onChange={handleSheetChanges}
backdropComponent={renderBackdrop}
handleIndicatorStyle={{
backgroundColor: "white",
}}
@@ -187,7 +176,6 @@ export const LibraryOptionsSheet: React.FC<Props> = ({
backgroundColor: "#171717",
}}
enablePanDownToClose
enableDismissOnClose
>
<BottomSheetView>
<View

28
components/settings/QuickConnect.tsx
View File

@@ -1,9 +1,3 @@
import {
BottomSheetBackdrop,
type BottomSheetBackdropProps,
BottomSheetModal,
BottomSheetView,
} from "@gorhom/bottom-sheet";
import { getQuickConnectApi } from "@jellyfin/sdk/lib/utils/api";
import { useAtom } from "jotai";
import type React from "react";
@@ -12,6 +6,11 @@ import { useTranslation } from "react-i18next";
import { Alert, Platform, View, type ViewProps } from "react-native";
import { useHaptic } from "@/hooks/useHaptic";
import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
import {
type BottomSheetMethods,
BottomSheetModal,
BottomSheetView,
} from "@/utils/expoUiBottomSheet";
import { Button } from "../Button";
import { Text } from "../common/Text";
import { PinInput } from "../inputs/PinInput";
@@ -25,7 +24,7 @@ export const QuickConnect: React.FC<Props> = ({ ...props }) => {
const [api] = useAtom(apiAtom);
const [user] = useAtom(userAtom);
const [quickConnectCode, setQuickConnectCode] = useState<string>();
const bottomSheetModalRef = useRef<BottomSheetModal>(null);
const bottomSheetModalRef = useRef<BottomSheetMethods>(null);
const successHapticFeedback = useHaptic("success");
const errorHapticFeedback = useHaptic("error");
const snapPoints = useMemo(
@@ -36,17 +35,6 @@ export const QuickConnect: React.FC<Props> = ({ ...props }) => {
const { t } = useTranslation();
const renderBackdrop = useCallback(
(props: BottomSheetBackdropProps) => (
<BottomSheetBackdrop
{...props}
disappearsOnIndex={-1}
appearsOnIndex={0}
/>
),
[],
);
const authorizeQuickConnect = useCallback(async () => {
if (quickConnectCode) {
try {
@@ -97,6 +85,7 @@ export const QuickConnect: React.FC<Props> = ({ ...props }) => {
<BottomSheetModal
ref={bottomSheetModalRef}
enablePanDownToClose
snapPoints={snapPoints}
handleIndicatorStyle={{
backgroundColor: "white",
@@ -104,11 +93,8 @@ export const QuickConnect: React.FC<Props> = ({ ...props }) => {
backgroundStyle={{
backgroundColor: "#171717",
}}
backdropComponent={renderBackdrop}
keyboardBehavior={isAndroid ? "fillParent" : "interactive"}
keyboardBlurBehavior='restore'
android_keyboardInputMode='adjustResize'
topInset={isAndroid ? 0 : undefined}
>
<BottomSheetView>
<View className='flex flex-col space-y-4 px-4 pb-8 pt-2'>

28
components/watchlists/WatchlistSheet.tsx
View File

@@ -1,10 +1,4 @@
import { Ionicons } from "@expo/vector-icons";
import {
BottomSheetBackdrop,
type BottomSheetBackdropProps,
BottomSheetModal,
BottomSheetView,
} from "@gorhom/bottom-sheet";
import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
import React, {
forwardRef,
@@ -16,6 +10,7 @@ import React, {
import { useTranslation } from "react-i18next";
import {
ActivityIndicator,
Platform,
StyleSheet,
TouchableOpacity,
View,
@@ -31,6 +26,11 @@ import {
useItemInWatchlists,
useMyWatchlistsQuery,
} from "@/hooks/useWatchlists";
import {
type BottomSheetMethods,
BottomSheetModal,
BottomSheetView,
} from "@/utils/expoUiBottomSheet";
import type { StreamystatsWatchlist } from "@/utils/streamystats/types";
export interface WatchlistSheetRef {
@@ -263,7 +263,7 @@ const WatchlistSheetContent: React.FC<WatchlistSheetContentProps> = ({
export const WatchlistSheet = forwardRef<WatchlistSheetRef, object>(
(_props, ref) => {
const bottomSheetModalRef = useRef<BottomSheetModal>(null);
const bottomSheetModalRef = useRef<BottomSheetMethods>(null);
const [currentItem, setCurrentItem] = React.useState<BaseItemDto | null>(
null,
);
@@ -283,23 +283,13 @@ export const WatchlistSheet = forwardRef<WatchlistSheetRef, object>(
bottomSheetModalRef.current?.dismiss();
}, []);
const renderBackdrop = useCallback(
(props: BottomSheetBackdropProps) => (
<BottomSheetBackdrop
{...props}
disappearsOnIndex={-1}
appearsOnIndex={0}
/>
),
[],
);
if (Platform.isTV) return null;
return (
<BottomSheetModal
ref={bottomSheetModalRef}
enablePanDownToClose
enableDynamicSizing
maxDynamicContentSize={600}
backdropComponent={renderBackdrop}
handleIndicatorStyle={{
backgroundColor: "white",
}}