streamyfin/components/settings/QuickConnect.tsx

import {
  BottomSheetBackdrop,
  type BottomSheetBackdropProps,
  BottomSheetModal,
  BottomSheetView,
} from "@gorhom/bottom-sheet";
import { getQuickConnectApi } from "@jellyfin/sdk/lib/utils/api";
import { useAtom } from "jotai";
import {
  forwardRef,
  useCallback,
  useImperativeHandle,
  useMemo,
  useRef,
  useState,
} from "react";
import { useTranslation } from "react-i18next";
import { Alert, Platform, View } from "react-native";
import { useHaptic } from "@/hooks/useHaptic";
import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
import { Button } from "../Button";
import { Text } from "../common/Text";
import { PinInput } from "../inputs/PinInput";

export type QuickConnectSheetRef = { present: () => void };

export const QuickConnectSheet = forwardRef<QuickConnectSheetRef>(
  (_props, ref) => {
    const isTv = Platform.isTV;
    const [api] = useAtom(apiAtom);
    const [user] = useAtom(userAtom);
    const [quickConnectCode, setQuickConnectCode] = useState<string>();
    const modalRef = useRef<BottomSheetModal>(null);
    const successHapticFeedback = useHaptic("success");
    const errorHapticFeedback = useHaptic("error");
    const snapPoints = useMemo(
      () => (Platform.OS === "android" ? ["100%"] : ["40%"]),
      [],
    );
    const isAndroid = Platform.OS === "android";
    const { t } = useTranslation();

    useImperativeHandle(
      ref,
      () => ({
        present: () => {
          setQuickConnectCode("");
          modalRef.current?.present();
        },
      }),
      [],
    );

    const renderBackdrop = useCallback(
      (props: BottomSheetBackdropProps) => (
        <BottomSheetBackdrop
          {...props}
          disappearsOnIndex={-1}
          appearsOnIndex={0}
        />
      ),
      [],
    );

    const authorizeQuickConnect = useCallback(async () => {
      if (!quickConnectCode) return;
      try {
        const res = await getQuickConnectApi(api!).authorizeQuickConnect({
          code: quickConnectCode,
          userId: user?.Id,
        });
        if (res.status === 200) {
          successHapticFeedback();
          Alert.alert(
            t("home.settings.quick_connect.success"),
            t("home.settings.quick_connect.quick_connect_autorized"),
          );
          setQuickConnectCode(undefined);
          modalRef.current?.dismiss();
        } else {
          errorHapticFeedback();
          Alert.alert(
            t("home.settings.quick_connect.error"),
            t("home.settings.quick_connect.invalid_code"),
          );
        }
      } catch (_e) {
        errorHapticFeedback();
        Alert.alert(
          t("home.settings.quick_connect.error"),
          t("home.settings.quick_connect.invalid_code"),
        );
      }
    }, [
      api,
      user,
      quickConnectCode,
      t,
      successHapticFeedback,
      errorHapticFeedback,
    ]);

    if (isTv) return null;

    return (
      <BottomSheetModal
        ref={modalRef}
        snapPoints={snapPoints}
        handleIndicatorStyle={{ backgroundColor: "white" }}
        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'>
            <View>
              <Text className='font-bold text-2xl text-neutral-100'>
                {t("home.settings.quick_connect.quick_connect_title")}
              </Text>
            </View>
            <View className='flex flex-col space-y-2'>
              <View className='p-4 border border-neutral-800 rounded-xl bg-neutral-900 w-full space-y-4'>
                <Text className='text-neutral-400 text-center'>
                  {t(
                    "home.settings.quick_connect.enter_the_quick_connect_code",
                  )}
                </Text>
                <PinInput
                  value={quickConnectCode || ""}
                  onChangeText={setQuickConnectCode}
                  style={{ paddingHorizontal: 16 }}
                  autoFocus
                />
              </View>
            </View>
            <Button
              className='mt-auto'
              onPress={authorizeQuickConnect}
              color='purple'
            >
              {t("home.settings.quick_connect.authorize")}
            </Button>
          </View>
        </BottomSheetView>
      </BottomSheetModal>
    );
  },
);

QuickConnectSheet.displayName = "QuickConnectSheet";