Revert "feat: haptic feedback settings and custom hook"

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -4,9 +4,7 @@ title: "[Bug]: "
 labels:
   - ["❌ bug"]
 projects:
-  - ["fredrikburmester/5"]
-assignees:
-  - fredrikburmester
+  - ["streamyfin/3"]
 
 body:
   - type: textarea
@@ -45,7 +43,7 @@ body:
       label: Version
       description: What version of Streamyfin are you running?
       options:
-        - 0.23.0
+        - 0.24.0
         - 0.22.0
         - 0.21.0
         - older

.github/ISSUE_TEMPLATE/feature_request.md

@@ -4,7 +4,8 @@ about: Suggest an idea for this project
 title: ''
 labels: '✨ enhancement'
 assignees: ''
-
+projects:
+ - streamyfin/3
 ---
 
 **Describe the solution you'd like**

.github/workflows/build-ios.yaml

@@ -0,0 +1,49 @@
+name: Automatic Build and Deploy
+
+on:
+  workflow_dispatch:
+  push:
+    branches:
+      - main
+
+jobs:
+  build:
+    runs-on: macos-15
+    name: Build IOS
+    steps:
+      - uses: actions/checkout@v2
+        name: Check out repository
+      - uses: oven-sh/setup-bun@v2
+        with:
+          bun-version: latest
+      - run: |
+          bun i && bun run submodule-reload
+          npx expo prebuild
+      - uses: sparkfabrik/ios-build-action@v2.3.0
+        with:
+          upload-to-testflight: false
+          increment-build-number: false
+          build-pods: true
+          pods-path: "ios/Podfile"
+          configuration: Release
+          # Change later to app-store if wanted
+          export-method: appstore
+          #export-method: ad-hoc
+          workspace-path: "ios/Streamyfin.xcodeproj/project.xcworkspace/"
+          project-path: "ios/Streamyfin.xcodeproj"
+          scheme: Streamyfin
+          apple-key-id: ${{ secrets.APPLE_KEY_ID }}
+          apple-key-issuer-id: ${{ secrets.APPLE_KEY_ISSUER_ID }}
+          apple-key-content: ${{ secrets.APPLE_KEY_CONTENT }}
+          team-id: ${{ secrets.TEAM_ID }}
+          team-name: ${{ secrets.TEAM_NAME }}
+          #match-password: ${{ secrets.MATCH_PASSWORD }}
+          #match-git-url: ${{ secrets.MATCH_GIT_URL }}
+          #match-git-basic-authorization: ${{ secrets.MATCH_GIT_BASIC_AUTHORIZATION }}
+          #match-build-type: "appstore"
+          #browserstack-upload: true
+          #browserstack-username: ${{ secrets.BROWSERSTACK_USERNAME }}
+          #browserstack-access-key: ${{ secrets.BROWSERSTACK_ACCESS_KEY }}
+          #fastlane-env: stage
+          ios-app-id: com.stetsed.teststreamyfin
+          output-path: build-${{ github.sha }}.ipa

README.md

@@ -13,7 +13,7 @@ Welcome to Streamyfin, a simple and user-friendly Jellyfin client built with Exp
 
 ## 🌟 Features
 
-- 🚀 **Skp intro / credits support**
+- 🚀 **Skip Intro / Credits Support**
 - 🖼️ **Trickplay images**: The new golden standard for chapter previews when seeking.
 - 🔊 **Background audio**: Stream music in the background, even when locking the phone.
 - 📥 **Download media** (Experimental): Save your media locally and watch it offline.

app.json

@@ -2,7 +2,7 @@
   "expo": {
     "name": "Streamyfin",
     "slug": "streamyfin",
-    "version": "0.23.0",
+    "version": "0.24.0",
     "orientation": "default",
     "icon": "./assets/images/icon.png",
     "scheme": "streamyfin",
@@ -36,7 +36,7 @@
     },
     "android": {
       "jsEngine": "hermes",
-      "versionCode": 49,
+      "versionCode": 50,
       "adaptiveIcon": {
         "foregroundImage": "./assets/images/adaptive_icon.png"
       },
@@ -130,7 +130,6 @@
     },
     "updates": {
       "url": "https://u.expo.dev/e79219d1-797f-4fbe-9fa1-cfd360690a68"
-    },
-    "newArchEnabled": false
+    }
   }
 }

app/(auth)/player/direct-player.tsx

@@ -435,7 +435,6 @@ export default function page() {
           position: "relative",
           flexDirection: "column",
           justifyContent: "center",
-          opacity: showControls ? (Platform.OS === "android" ? 0.7 : 0.5) : 1,
         }}
       >
         <VlcPlayerView

app/(auth)/player/transcoding-player.tsx

@@ -387,7 +387,6 @@ const Player = () => {
           position: "relative",
           flexDirection: "column",
           justifyContent: "center",
-          opacity: showControls ? 0.5 : 1,
         }}
       >
         {videoSource ? (

app/(auth)/trailer/page.tsx

@@ -0,0 +1,45 @@
+import { useGlobalSearchParams } from "expo-router";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { Alert, Dimensions, View } from "react-native";
+import YoutubePlayer, { PLAYER_STATES } from "react-native-youtube-iframe";
+
+export default function page() {
+  const searchParams = useGlobalSearchParams();
+
+  const { url } = searchParams as { url: string };
+
+  const videoId = useMemo(() => {
+    return url.split("v=")[1];
+  }, [url]);
+
+  const [playing, setPlaying] = useState(false);
+
+  const onStateChange = useCallback((state: PLAYER_STATES) => {
+    if (state === "ended") {
+      setPlaying(false);
+      Alert.alert("video has finished playing!");
+    }
+  }, []);
+
+  const togglePlaying = useCallback(() => {
+    setPlaying((prev) => !prev);
+  }, []);
+
+  useEffect(() => {
+    togglePlaying();
+  }, []);
+
+  const screenWidth = Dimensions.get("screen").width;
+
+  return (
+    <View className="flex flex-col bg-black items-center justify-center h-full">
+      <YoutubePlayer
+        height={300}
+        play={playing}
+        videoId={videoId}
+        onChangeState={onStateChange}
+        width={screenWidth}
+      />
+    </View>
+  );
+}

app/_layout.tsx

@@ -319,7 +319,7 @@ function Layout() {
                       <BottomSheetModalProvider>
                         <SystemBars style="light" hidden={false} />
                         <ThemeProvider value={DarkTheme}>
-                          <Stack>
+                          <Stack initialRouteName="/home">
                             <Stack.Screen
                               name="(auth)/(tabs)"
                               options={{
@@ -336,6 +336,14 @@ function Layout() {
                                 header: () => null,
                               }}
                             />
+                            <Stack.Screen
+                              name="(auth)/trailer/page"
+                              options={{
+                                headerShown: false,
+                                presentation: "modal",
+                                title: "",
+                              }}
+                            />
                             <Stack.Screen
                               name="login"
                               options={{

app/login.tsx

@@ -189,133 +189,129 @@ const Login: React.FC = () => {
     }
   };
 
-  if (api?.basePath) {
-    return (
-      <SafeAreaView style={{ flex: 1 }}>
-        <KeyboardAvoidingView
-          behavior={Platform.OS === "ios" ? "padding" : "height"}
-          style={{ flex: 1, height: "100%" }}
-        >
-          <View className="flex flex-col h-full relative items-center justify-center">
-            <View className="px-4 -mt-20 w-full">
-              <View className="flex flex-col space-y-2">
-                <Text className="text-2xl font-bold -mb-2">
-                  Log in
-                  <>
-                    {serverName ? (
-                      <>
-                        {" to "}
-                        <Text className="text-purple-600">{serverName}</Text>
-                      </>
-                    ) : null}
-                  </>
-                </Text>
-                <Text className="text-xs text-neutral-400">{api.basePath}</Text>
-                <Input
-                  placeholder="Username"
-                  onChangeText={(text) =>
-                    setCredentials({ ...credentials, username: text })
-                  }
-                  value={credentials.username}
-                  autoFocus
-                  secureTextEntry={false}
-                  keyboardType="default"
-                  returnKeyType="done"
-                  autoCapitalize="none"
-                  textContentType="username"
-                  clearButtonMode="while-editing"
-                  maxLength={500}
-                />
-
-                <Input
-                  className="mb-2"
-                  placeholder="Password"
-                  onChangeText={(text) =>
-                    setCredentials({ ...credentials, password: text })
-                  }
-                  value={credentials.password}
-                  secureTextEntry
-                  keyboardType="default"
-                  returnKeyType="done"
-                  autoCapitalize="none"
-                  textContentType="password"
-                  clearButtonMode="while-editing"
-                  maxLength={500}
-                />
-              </View>
-
-              <Text className="text-red-600 mb-2">{error}</Text>
-            </View>
-
-            <View className="absolute bottom-0 left-0 w-full px-4 mb-2">
-              <Button
-                color="black"
-                onPress={handleQuickConnect}
-                className="w-full mb-2"
-              >
-                Use Quick Connect
-              </Button>
-              <Button onPress={handleLogin} loading={loading}>
-                Log in
-              </Button>
-            </View>
-          </View>
-        </KeyboardAvoidingView>
-      </SafeAreaView>
-    );
-  }
-
   return (
-    <SafeAreaView style={{ flex: 1 }}>
+    <SafeAreaView style={{ flex: 1, paddingBottom: 16 }}>
       <KeyboardAvoidingView
         behavior={Platform.OS === "ios" ? "padding" : "height"}
-        style={{ flex: 1, height: "100%" }}
       >
-        <View className="flex flex-col h-full relative items-center justify-center w-full">
-          <View className="flex flex-col gap-y-2 px-4 w-full -mt-36">
-            <Image
-              style={{
-                width: 100,
-                height: 100,
-                marginLeft: -23,
-                marginBottom: -20,
-              }}
-              source={require("@/assets/images/StreamyFinFinal.png")}
-            />
-            <Text className="text-3xl font-bold">Streamyfin</Text>
-            <Text className="text-neutral-500">
-              Enter the URL to your Jellyfin server
-            </Text>
-            <Input
-              placeholder="Server URL"
-              onChangeText={setServerURL}
-              value={serverURL}
-              keyboardType="url"
-              returnKeyType="done"
-              autoCapitalize="none"
-              textContentType="URL"
-              maxLength={500}
-            />
-            <Text className="text-xs text-neutral-500 ml-4">
-              Make sure to include http or https
-            </Text>
-            <PreviousServersList
-              onServerSelect={(s) => {
-                handleConnect(s.address);
-              }}
-            />
-          </View>
-          <View className="mb-2 absolute bottom-0 left-0 w-full px-4">
-            <Button
-              loading={loadingServerCheck}
-              disabled={loadingServerCheck}
-              onPress={async () => await handleConnect(serverURL)}
-              className="w-full grow"
-            >
-              Connect
-            </Button>
-          </View>
-        </View>
+        {api?.basePath ? (
+          <>
+            <View className="flex flex-col h-full relative items-center justify-center">
+              <View className="px-4 -mt-20 w-full">
+                <View className="flex flex-col space-y-2">
+                  <Text className="text-2xl font-bold -mb-2">
+                    Log in
+                    <>
+                      {serverName ? (
+                        <>
+                          {" to "}
+                          <Text className="text-purple-600">{serverName}</Text>
+                        </>
+                      ) : null}
+                    </>
+                  </Text>
+                  <Text className="text-xs text-neutral-400">
+                    {api.basePath}
+                  </Text>
+                  <Input
+                    placeholder="Username"
+                    onChangeText={(text) =>
+                      setCredentials({ ...credentials, username: text })
+                    }
+                    value={credentials.username}
+                    autoFocus
+                    secureTextEntry={false}
+                    keyboardType="default"
+                    returnKeyType="done"
+                    autoCapitalize="none"
+                    textContentType="username"
+                    clearButtonMode="while-editing"
+                    maxLength={500}
+                  />
+
+                  <Input
+                    className="mb-2"
+                    placeholder="Password"
+                    onChangeText={(text) =>
+                      setCredentials({ ...credentials, password: text })
+                    }
+                    value={credentials.password}
+                    secureTextEntry
+                    keyboardType="default"
+                    returnKeyType="done"
+                    autoCapitalize="none"
+                    textContentType="password"
+                    clearButtonMode="while-editing"
+                    maxLength={500}
+                  />
+                </View>
+
+                <Text className="text-red-600 mb-2">{error}</Text>
+              </View>
+
+              <View className="absolute bottom-0 left-0 w-full px-4 mb-2">
+                <Button
+                  color="black"
+                  onPress={handleQuickConnect}
+                  className="w-full mb-2"
+                >
+                  Use Quick Connect
+                </Button>
+                <Button onPress={handleLogin} loading={loading}>
+                  Log in
+                </Button>
+              </View>
+            </View>
+          </>
+        ) : (
+          <>
+            <View className="flex flex-col h-full relative items-center justify-center w-full">
+              <View className="flex flex-col gap-y-2 px-4 w-full -mt-36">
+                <Image
+                  style={{
+                    width: 100,
+                    height: 100,
+                    marginLeft: -23,
+                    marginBottom: -20,
+                  }}
+                  source={require("@/assets/images/StreamyFinFinal.png")}
+                />
+                <Text className="text-3xl font-bold">Streamyfin</Text>
+                <Text className="text-neutral-500">
+                  Enter the URL to your Jellyfin server
+                </Text>
+                <Input
+                  placeholder="Server URL"
+                  onChangeText={setServerURL}
+                  value={serverURL}
+                  keyboardType="url"
+                  returnKeyType="done"
+                  autoCapitalize="none"
+                  textContentType="URL"
+                  maxLength={500}
+                />
+                <Text className="text-xs text-neutral-500 ml-4">
+                  Make sure to include http or https
+                </Text>
+                <PreviousServersList
+                  onServerSelect={(s) => {
+                    handleConnect(s.address);
+                  }}
+                />
+              </View>
+              <View className="mb-2 absolute bottom-0 left-0 w-full px-4">
+                <Button
+                  loading={loadingServerCheck}
+                  disabled={loadingServerCheck}
+                  onPress={async () => await handleConnect(serverURL)}
+                  className="w-full grow"
+                >
+                  Connect
+                </Button>
+              </View>
+            </View>
+          </>
+        )}
       </KeyboardAvoidingView>
     </SafeAreaView>
   );

components/__tests__/ThemedText-test.tsx

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import renderer from 'react-test-renderer';
+
+import { ThemedText } from '../ThemedText';
+
+it(`renders correctly`, () => {
+  const tree = renderer.create(<ThemedText>Snapshot test!</ThemedText>).toJSON();
+
+  expect(tree).toMatchSnapshot();
+});

components/__tests__/__snapshots__/ThemedText-test.tsx.snap

@@ -0,0 +1,24 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<Text
+  style={
+    [
+      {
+        "color": "#11181C",
+      },
+      {
+        "fontSize": 16,
+        "lineHeight": 24,
+      },
+      undefined,
+      undefined,
+      undefined,
+      undefined,
+      undefined,
+    ]
+  }
+>
+  Snapshot test!
+</Text>
+`;

components/common/JellyseerrItemRouter.tsx

@@ -1,12 +1,11 @@
-import { useJellyseerr } from "@/hooks/useJellyseerr";
-import {
-  hasPermission,
-  Permission,
-} from "@/utils/jellyseerr/server/lib/permissions";
-import { MovieResult, TvResult } from "@/utils/jellyseerr/server/models/Search";
-import { useRouter, useSegments } from "expo-router";
-import React, { PropsWithChildren, useCallback, useMemo } from "react";
-import { TouchableOpacity, TouchableOpacityProps } from "react-native";
+import {useRouter, useSegments} from "expo-router";
+import React, {PropsWithChildren, useCallback, useMemo} from "react";
+import {TouchableOpacity, TouchableOpacityProps} from "react-native";
+import * as ContextMenu from "zeego/context-menu";
+import {MovieResult, TvResult} from "@/utils/jellyseerr/server/models/Search";
+import {useJellyseerr} from "@/hooks/useJellyseerr";
+import {hasPermission, Permission} from "@/utils/jellyseerr/server/lib/permissions";
+import {MediaType} from "@/utils/jellyseerr/server/constants/media";
 
 interface Props extends TouchableOpacityProps {
   result: MovieResult | TvResult;
@@ -27,49 +26,78 @@ export const TouchableJellyseerrRouter: React.FC<PropsWithChildren<Props>> = ({
 }) => {
   const router = useRouter();
   const segments = useSegments();
-  const { jellyseerrApi, jellyseerrUser, requestMedia } = useJellyseerr();
+  const {jellyseerrApi, jellyseerrUser, requestMedia} = useJellyseerr()
 
   const from = segments[2];
 
   const autoApprove = useMemo(() => {
-    return (
-      jellyseerrUser &&
-      hasPermission(Permission.AUTO_APPROVE, jellyseerrUser.permissions, {
-        type: "or",
-      })
-    );
-  }, [jellyseerrApi, jellyseerrUser]);
+    return jellyseerrUser && hasPermission(
+      Permission.AUTO_APPROVE,
+      jellyseerrUser.permissions,
+      {type: 'or'}
+    )
+  }, [jellyseerrApi, jellyseerrUser])
 
-  const request = useCallback(
-    () =>
+  const request = useCallback(() =>
       requestMedia(mediaTitle, {
         mediaId: result.id,
-        mediaType: result.mediaType,
-      }),
+        mediaType: result.mediaType
+      }
+    ),
     [jellyseerrApi, result]
-  );
+  )
 
   if (from === "(home)" || from === "(search)" || from === "(libraries)")
     return (
       <>
-        <TouchableOpacity
-          onPress={() => {
-            router.push({
-              pathname: `/(auth)/(tabs)/${from}/jellyseerr/page`,
-              params: {
-                ...result,
-                mediaTitle,
-                releaseYear,
-                // @ts-expect-error
-                canRequest,
-                posterSrc,
-              },
-            });
-          }}
-          {...props}
-        >
-          {children}
-        </TouchableOpacity>
+        <ContextMenu.Root>
+          <ContextMenu.Trigger>
+            <TouchableOpacity
+              onPress={() => {
+                // @ts-ignore
+                router.push({pathname: `/(auth)/(tabs)/${from}/jellyseerr/page`, params: {...result, mediaTitle, releaseYear, canRequest, posterSrc}});
+              }}
+              {...props}
+            >
+              {children}
+            </TouchableOpacity>
+          </ContextMenu.Trigger>
+          <ContextMenu.Content
+            avoidCollisions
+            alignOffset={0}
+            collisionPadding={0}
+            loop={false}
+            key={"content"}
+          >
+            <ContextMenu.Label key="label-1">Actions</ContextMenu.Label>
+            {canRequest && result.mediaType === MediaType.MOVIE && (
+                <ContextMenu.Item
+                  key="item-1"
+                  onSelect={() => {
+                    if (autoApprove) {
+                      request()
+                    }
+                  }}
+                  shouldDismissMenuOnSelect
+                >
+                  <ContextMenu.ItemTitle key="item-1-title">Request</ContextMenu.ItemTitle>
+                  <ContextMenu.ItemIcon
+                    ios={{
+                      name: "arrow.down.to.line",
+                      pointSize: 18,
+                      weight: "semibold",
+                      scale: "medium",
+                      hierarchicalColor: {
+                        dark: "purple",
+                        light: "purple",
+                      },
+                    }}
+                    androidIconName="download"
+                  />
+                </ContextMenu.Item>
+              )}
+          </ContextMenu.Content>
+        </ContextMenu.Root>
       </>
     );
 };

components/common/TouchableItemRouter.tsx

@@ -6,6 +6,7 @@ import {
 import { useRouter, useSegments } from "expo-router";
 import { PropsWithChildren } from "react";
 import { TouchableOpacity, TouchableOpacityProps } from "react-native";
+import * as ContextMenu from "zeego/context-menu";
 
 interface Props extends TouchableOpacityProps {
   item: BaseItemDto;
@@ -15,6 +16,8 @@ export const itemRouter = (
   item: BaseItemDto | BaseItemPerson,
   from: string
 ) => {
+  console.log(item.Type, item?.CollectionType);
+
   if ("CollectionType" in item && item.CollectionType === "livetv") {
     return `/(auth)/(tabs)/${from}/livetv`;
   }
@@ -77,15 +80,78 @@ export const TouchableItemRouter: React.FC<PropsWithChildren<Props>> = ({
     from === "(favorites)"
   )
     return (
-      <TouchableOpacity
-        onPress={() => {
-          const url = itemRouter(item, from);
-          // @ts-ignore
-          router.push(url);
-        }}
-        {...props}
-      >
-        {children}
-      </TouchableOpacity>
+      <ContextMenu.Root>
+        <ContextMenu.Trigger>
+          <TouchableOpacity
+            onPress={() => {
+              const url = itemRouter(item, from);
+              // @ts-ignore
+              router.push(url);
+            }}
+            {...props}
+          >
+            {children}
+          </TouchableOpacity>
+        </ContextMenu.Trigger>
+        <ContextMenu.Content
+          avoidCollisions
+          alignOffset={0}
+          collisionPadding={0}
+          loop={false}
+          key={"content"}
+        >
+          <ContextMenu.Label key="label-1">Actions</ContextMenu.Label>
+          <ContextMenu.Item
+            key="item-1"
+            onSelect={() => {
+              markAsPlayedStatus(true);
+            }}
+            shouldDismissMenuOnSelect
+          >
+            <ContextMenu.ItemTitle key="item-1-title">
+              Mark as watched
+            </ContextMenu.ItemTitle>
+            <ContextMenu.ItemIcon
+              ios={{
+                name: "checkmark.circle", // Changed to "checkmark.circle" which represents "watched"
+                pointSize: 18,
+                weight: "semibold",
+                scale: "medium",
+                hierarchicalColor: {
+                  dark: "green", // Changed to green for "watched"
+                  light: "green",
+                },
+              }}
+              androidIconName="checkmark-circle"
+            ></ContextMenu.ItemIcon>
+          </ContextMenu.Item>
+          <ContextMenu.Item
+            key="item-2"
+            onSelect={() => {
+              markAsPlayedStatus(false);
+            }}
+            shouldDismissMenuOnSelect
+            destructive
+          >
+            <ContextMenu.ItemTitle key="item-2-title">
+              Mark as not watched
+            </ContextMenu.ItemTitle>
+            <ContextMenu.ItemIcon
+              ios={{
+                name: "eye.slash", // Changed to "eye.slash" which represents "not watched"
+                pointSize: 18, // Adjusted for better visibility
+                weight: "semibold",
+                scale: "medium",
+                hierarchicalColor: {
+                  dark: "red", // Changed to red for "not watched"
+                  light: "red",
+                },
+                // Removed paletteColors as it's not necessary in this case
+              }}
+              androidIconName="eye-slash"
+            ></ContextMenu.ItemIcon>
+          </ContextMenu.Item>
+        </ContextMenu.Content>
+      </ContextMenu.Root>
     );
 };

components/settings/Jellyseerr.tsx

@@ -1,17 +1,16 @@
 import { JellyseerrApi, useJellyseerr } from "@/hooks/useJellyseerr";
-import { View } from "react-native";
-import { Text } from "../common/Text";
-import { useCallback, useRef, useState } from "react";
-import { Input } from "../common/Input";
-import { ListItem } from "../list/ListItem";
-import { Loader } from "../Loader";
+import { userAtom } from "@/providers/JellyfinProvider";
 import { useSettings } from "@/utils/atoms/settings";
-import { Button } from "../Button";
-import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
-import { useAtom } from "jotai";
-import { toast } from "sonner-native";
 import { useMutation } from "@tanstack/react-query";
+import { useAtom } from "jotai";
+import { useState } from "react";
+import { View } from "react-native";
+import { toast } from "sonner-native";
+import { Button } from "../Button";
+import { Input } from "../common/Input";
+import { Text } from "../common/Text";
 import { ListGroup } from "../list/ListGroup";
+import { ListItem } from "../list/ListItem";
 
 export const JellyseerrSettings = () => {
   const {

components/settings/QuickConnect.tsx

@@ -1,59 +1,113 @@
-import { Alert, View, ViewProps } from "react-native";
-import { Text } from "../common/Text";
-import { ListItem } from "../list/ListItem";
-import { Button } from "../Button";
-import { apiAtom, useJellyfin, userAtom } from "@/providers/JellyfinProvider";
-import { useAtom } from "jotai";
-import Constants from "expo-constants";
-import Application from "expo-application";
-import { ListGroup } from "../list/ListGroup";
+import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
+import {
+  BottomSheetBackdrop,
+  BottomSheetBackdropProps,
+  BottomSheetModal,
+  BottomSheetTextInput,
+  BottomSheetView,
+} from "@gorhom/bottom-sheet";
 import { getQuickConnectApi } from "@jellyfin/sdk/lib/utils/api";
 import * as Haptics from "expo-haptics";
+import { useAtom } from "jotai";
+import React, { useCallback, useRef, useState } from "react";
+import { Alert, View, ViewProps } from "react-native";
+import { Button } from "../Button";
+import { Text } from "../common/Text";
+import { ListGroup } from "../list/ListGroup";
+import { ListItem } from "../list/ListItem";
 
 interface Props extends ViewProps {}
 
 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 openQuickConnectAuthCodeInput = () => {
-    Alert.prompt(
-      "Quick connect",
-      "Enter the quick connect code",
-      async (text) => {
-        if (text) {
-          try {
-            const res = await getQuickConnectApi(api!).authorizeQuickConnect({
-              code: text,
-              userId: user?.Id,
-            });
-            if (res.status === 200) {
-              Haptics.notificationAsync(
-                Haptics.NotificationFeedbackType.Success
-              );
-              Alert.alert("Success", "Quick connect authorized");
-            } else {
-              Haptics.notificationAsync(Haptics.NotificationFeedbackType.Error);
-              Alert.alert("Error", "Invalid code");
-            }
-          } catch (e) {
-            Haptics.notificationAsync(Haptics.NotificationFeedbackType.Error);
-            Alert.alert("Error", "Invalid code");
-          }
+  const renderBackdrop = useCallback(
+    (props: BottomSheetBackdropProps) => (
+      <BottomSheetBackdrop
+        {...props}
+        disappearsOnIndex={-1}
+        appearsOnIndex={0}
+      />
+    ),
+    []
+  );
+
+  const authorizeQuickConnect = useCallback(async () => {
+    if (quickConnectCode) {
+      try {
+        const res = await getQuickConnectApi(api!).authorizeQuickConnect({
+          code: quickConnectCode,
+          userId: user?.Id,
+        });
+        if (res.status === 200) {
+          Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success);
+          Alert.alert("Success", "Quick connect authorized");
+          setQuickConnectCode(undefined);
+          bottomSheetModalRef?.current?.close();
+        } else {
+          Haptics.notificationAsync(Haptics.NotificationFeedbackType.Error);
+          Alert.alert("Error", "Invalid code");
         }
+      } catch (e) {
+        Haptics.notificationAsync(Haptics.NotificationFeedbackType.Error);
+        Alert.alert("Error", "Invalid code");
       }
-    );
-  };
+    }
+  }, [api, user, quickConnectCode]);
 
   return (
     <View {...props}>
       <ListGroup title={"Quick Connect"}>
         <ListItem
-          onPress={openQuickConnectAuthCodeInput}
+          onPress={() => bottomSheetModalRef?.current?.present()}
           title="Authorize Quick Connect"
           textColor="blue"
-        ></ListItem>
+        />
       </ListGroup>
+
+      <BottomSheetModal
+        ref={bottomSheetModalRef}
+        enableDynamicSizing
+        handleIndicatorStyle={{
+          backgroundColor: "white",
+        }}
+        backgroundStyle={{
+          backgroundColor: "#171717",
+        }}
+        backdropComponent={renderBackdrop}
+      >
+        <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">
+                Quick Connect
+              </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">
+                <BottomSheetTextInput
+                  style={{ color: "white" }}
+                  clearButtonMode="always"
+                  placeholder="Enter the quick connect code..."
+                  placeholderTextColor="#9CA3AF"
+                  value={quickConnectCode}
+                  onChangeText={setQuickConnectCode}
+                />
+              </View>
+            </View>
+            <Button
+              className="mt-auto"
+              onPress={authorizeQuickConnect}
+              color="purple"
+            >
+              Authorize
+            </Button>
+          </View>
+        </BottomSheetView>
+      </BottomSheetModal>
     </View>
   );
 };

components/video-player/controls/Controls.tsx

@@ -497,33 +497,6 @@ export const Controls: React.FC<Props> = ({
         />
       ) : (
         <>
-          <VideoProvider
-            getAudioTracks={getAudioTracks}
-            getSubtitleTracks={getSubtitleTracks}
-            setAudioTrack={setAudioTrack}
-            setSubtitleTrack={setSubtitleTrack}
-            setSubtitleURL={setSubtitleURL}
-          >
-            <View
-              style={[
-                {
-                  position: "absolute",
-                  top: settings?.safeAreaInControlsEnabled ? insets.top : 0,
-                  left: settings?.safeAreaInControlsEnabled ? insets.left : 0,
-                  opacity: showControls ? 1 : 0,
-                  zIndex: 1000,
-                },
-              ]}
-              className={`flex flex-row items-center space-x-2 z-10 p-4 `}
-            >
-              {!mediaSource?.TranscodingUrl ? (
-                <DropdownViewDirect showControls={showControls} />
-              ) : (
-                <DropdownViewTranscoding showControls={showControls} />
-              )}
-            </View>
-          </VideoProvider>
-
           <Pressable
             onPressIn={() => {
               toggleControls();
@@ -532,6 +505,8 @@ export const Controls: React.FC<Props> = ({
               position: "absolute",
               width: Dimensions.get("window").width,
               height: Dimensions.get("window").height,
+              backgroundColor: "black",
+              opacity: showControls ? 0.5 : 0,
             }}
           ></Pressable>
 
@@ -541,61 +516,82 @@ export const Controls: React.FC<Props> = ({
                 position: "absolute",
                 top: settings?.safeAreaInControlsEnabled ? insets.top : 0,
                 right: settings?.safeAreaInControlsEnabled ? insets.right : 0,
+                width: settings?.safeAreaInControlsEnabled
+                  ? Dimensions.get("window").width - insets.left - insets.right
+                  : Dimensions.get("window").width,
                 opacity: showControls ? 1 : 0,
               },
             ]}
             pointerEvents={showControls ? "auto" : "none"}
-            className={`flex flex-row items-center space-x-2 z-10 p-4 `}
+            className={`flex flex-row w-full p-4 `}
           >
-            {item?.Type === "Episode" && !offline && (
+            <View className="mr-auto">
+              <VideoProvider
+                getAudioTracks={getAudioTracks}
+                getSubtitleTracks={getSubtitleTracks}
+                setAudioTrack={setAudioTrack}
+                setSubtitleTrack={setSubtitleTrack}
+                setSubtitleURL={setSubtitleURL}
+              >
+                {!mediaSource?.TranscodingUrl ? (
+                  <DropdownViewDirect showControls={showControls} />
+                ) : (
+                  <DropdownViewTranscoding showControls={showControls} />
+                )}
+              </VideoProvider>
+            </View>
+
+            <View className="flex flex-row items-center space-x-2 ">
+              {item?.Type === "Episode" && !offline && (
+                <TouchableOpacity
+                  onPress={() => {
+                    switchOnEpisodeMode();
+                  }}
+                  className="aspect-square flex flex-col bg-neutral-800/90 rounded-xl items-center justify-center p-2"
+                >
+                  <Ionicons name="list" size={24} color="white" />
+                </TouchableOpacity>
+              )}
+              {previousItem && !offline && (
+                <TouchableOpacity
+                  onPress={goToPreviousItem}
+                  className="aspect-square flex flex-col bg-neutral-800/90 rounded-xl items-center justify-center p-2"
+                >
+                  <Ionicons name="play-skip-back" size={24} color="white" />
+                </TouchableOpacity>
+              )}
+
+              {nextItem && !offline && (
+                <TouchableOpacity
+                  onPress={goToNextItem}
+                  className="aspect-square flex flex-col bg-neutral-800/90 rounded-xl items-center justify-center p-2"
+                >
+                  <Ionicons name="play-skip-forward" size={24} color="white" />
+                </TouchableOpacity>
+              )}
+
+              {mediaSource?.TranscodingUrl && (
+                <TouchableOpacity
+                  onPress={toggleIgnoreSafeAreas}
+                  className="aspect-square flex flex-col bg-neutral-800/90 rounded-xl items-center justify-center p-2"
+                >
+                  <Ionicons
+                    name={ignoreSafeAreas ? "contract-outline" : "expand"}
+                    size={24}
+                    color="white"
+                  />
+                </TouchableOpacity>
+              )}
               <TouchableOpacity
-                onPress={() => {
-                  switchOnEpisodeMode();
+                onPress={async () => {
+                  Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+                  router.back();
                 }}
                 className="aspect-square flex flex-col bg-neutral-800/90 rounded-xl items-center justify-center p-2"
               >
-                <Ionicons name="list" size={24} color="white" />
+                <Ionicons name="close" size={24} color="white" />
               </TouchableOpacity>
-            )}
-            {previousItem && !offline && (
-              <TouchableOpacity
-                onPress={goToPreviousItem}
-                className="aspect-square flex flex-col bg-neutral-800/90 rounded-xl items-center justify-center p-2"
-              >
-                <Ionicons name="play-skip-back" size={24} color="white" />
-              </TouchableOpacity>
-            )}
-
-            {nextItem && !offline && (
-              <TouchableOpacity
-                onPress={goToNextItem}
-                className="aspect-square flex flex-col bg-neutral-800/90 rounded-xl items-center justify-center p-2"
-              >
-                <Ionicons name="play-skip-forward" size={24} color="white" />
-              </TouchableOpacity>
-            )}
-
-            {mediaSource?.TranscodingUrl && (
-              <TouchableOpacity
-                onPress={toggleIgnoreSafeAreas}
-                className="aspect-square flex flex-col bg-neutral-800/90 rounded-xl items-center justify-center p-2"
-              >
-                <Ionicons
-                  name={ignoreSafeAreas ? "contract-outline" : "expand"}
-                  size={24}
-                  color="white"
-                />
-              </TouchableOpacity>
-            )}
-            <TouchableOpacity
-              onPress={async () => {
-                Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
-                router.back();
-              }}
-              className="aspect-square flex flex-col bg-neutral-800/90 rounded-xl items-center justify-center p-2"
-            >
-              <Ionicons name="close" size={24} color="white" />
-            </TouchableOpacity>
+            </View>
           </View>
 
           <View

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

@@ -118,14 +118,7 @@ const DropdownView: React.FC<DropdownViewProps> = ({ showControls }) => {
   );
 
   return (
-    <View
-      style={{
-        position: "absolute",
-        zIndex: 1000,
-        opacity: showControls ? 1 : 0,
-      }}
-      className="p-4"
-    >
+    <View>
       <DropdownMenu.Root>
         <DropdownMenu.Trigger>
           <TouchableOpacity className="aspect-square flex flex-col bg-neutral-800/90 rounded-xl items-center justify-center p-2">

eas.json

@@ -22,13 +22,13 @@
       }
     },
     "production": {
-      "channel": "0.23.0",
+      "channel": "0.24.0",
       "android": {
         "image": "latest"
       }
     },
     "production-apk": {
-      "channel": "0.23.0",
+      "channel": "0.24.0",
       "android": {
         "buildType": "apk",
         "image": "latest"

hooks/useDefaultPlaySettings.ts

@@ -6,7 +6,7 @@ import {
 } from "@jellyfin/sdk/lib/generated-client";
 import { useMemo } from "react";
 
-// Used only for intial play settings.
+// Used only for initial play settings.
 const useDefaultPlaySettings = (
   item: BaseItemDto,
   settings: Settings | null

package.json

@@ -4,100 +4,102 @@
   "version": "1.0.0",
   "scripts": {
     "submodule-reload": "git submodule update --init --remote --recursive",
-    "clean": "echo y | expo prebuild --clean",
     "start": "bun run submodule-reload && expo start",
     "reset-project": "node ./scripts/reset-project.js",
     "android": "bun run submodule-reload && expo run:android",
     "ios": "bun run submodule-reload && expo run:ios",
     "web": "bun run submodule-reload && expo start --web",
+    "test": "jest --watchAll",
     "lint": "expo lint",
     "postinstall": "patch-package"
   },
+  "jest": {
+    "preset": "jest-expo"
+  },
   "dependencies": {
-    "@bottom-tabs/react-navigation": "0.8.0",
-    "react-native-bottom-tabs": "0.8.0",
-    "@react-navigation/material-top-tabs": "^7.1.0",
-    "@react-navigation/native": "^7.0.14",
+    "@bottom-tabs/react-navigation": "^0.7.1",
     "@config-plugins/ffmpeg-kit-react-native": "^8.0.0",
     "@expo/react-native-action-sheet": "^4.1.0",
     "@expo/vector-icons": "^14.0.4",
     "@futurejj/react-native-visibility-sensor": "^1.3.5",
-    "@gorhom/bottom-sheet": "^5.0.6",
+    "@gorhom/bottom-sheet": "^4.6.4",
     "@jellyfin/sdk": "^0.11.0",
-    "@kesha-antonov/react-native-background-downloader": "3.2.6",
+    "@kesha-antonov/react-native-background-downloader": "3.1.2",
     "@react-native-async-storage/async-storage": "1.23.1",
-    "@react-native-community/netinfo": "11.4.1",
+    "@react-native-community/netinfo": "11.3.1",
     "@react-native-menu/menu": "^1.1.6",
-    "@shopify/flash-list": "1.7.1",
+    "@react-navigation/material-top-tabs": "^6.6.14",
+    "@react-navigation/native": "^6.1.18",
+    "@shopify/flash-list": "1.6.4",
     "@tanstack/react-query": "^5.59.20",
     "@types/lodash": "^4.17.13",
     "@types/react-native-vector-icons": "^6.4.18",
     "@types/uuid": "^10.0.0",
     "add": "^2.0.6",
     "axios": "^1.7.7",
-    "expo": "^52.0.0",
-    "expo-asset": "~11.0.2",
-    "expo-background-fetch": "~13.0.4",
-    "expo-blur": "~14.0.3",
-    "expo-brightness": "~13.0.3",
-    "expo-build-properties": "~0.13.2",
-    "expo-constants": "~17.0.4",
-    "expo-dev-client": "~5.0.10",
-    "expo-device": "~7.0.2",
-    "expo-font": "~13.0.3",
-    "expo-haptics": "~14.0.1",
-    "expo-image": "~2.0.4",
-    "expo-keep-awake": "~14.0.2",
-    "expo-linear-gradient": "~14.0.2",
-    "expo-linking": "~7.0.4",
-    "expo-network": "~7.0.5",
-    "expo-notifications": "~0.29.12",
-    "expo-router": "~4.0.17",
-    "expo-screen-orientation": "~8.0.4",
-    "expo-sensors": "~14.0.2",
-    "expo-splash-screen": "~0.29.21",
-    "expo-status-bar": "~2.0.1",
-    "expo-system-ui": "~4.0.7",
-    "expo-task-manager": "~12.0.4",
-    "expo-updates": "~0.26.13",
-    "expo-web-browser": "~14.0.2",
+    "expo": "~51.0.39",
+    "expo-asset": "~10.0.10",
+    "expo-background-fetch": "~12.0.1",
+    "expo-blur": "~13.0.2",
+    "expo-brightness": "~12.0.1",
+    "expo-build-properties": "~0.12.5",
+    "expo-constants": "~16.0.2",
+    "expo-dev-client": "~4.0.29",
+    "expo-device": "~6.0.2",
+    "expo-font": "~12.0.10",
+    "expo-haptics": "~13.0.1",
+    "expo-image": "~1.13.0",
+    "expo-keep-awake": "~13.0.2",
+    "expo-linear-gradient": "~13.0.2",
+    "expo-linking": "~6.3.1",
+    "expo-network": "~6.0.1",
+    "expo-notifications": "~0.28.19",
+    "expo-router": "~3.5.24",
+    "expo-screen-orientation": "~7.0.5",
+    "expo-sensors": "~13.0.9",
+    "expo-splash-screen": "~0.27.7",
+    "expo-status-bar": "~1.12.1",
+    "expo-system-ui": "^3.0.7",
+    "expo-task-manager": "~11.8.2",
+    "expo-updates": "~0.25.27",
+    "expo-web-browser": "~13.0.3",
     "ffmpeg-kit-react-native": "^6.0.2",
     "install": "^0.13.0",
     "jotai": "^2.10.1",
     "lodash": "^4.17.21",
     "nativewind": "^2.0.11",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
-    "react-native": "0.76.6",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "react-native": "0.74.5",
     "react-native-awesome-slider": "^2.5.6",
+    "react-native-bottom-tabs": "0.7.1",
     "react-native-circular-progress": "^1.4.1",
     "react-native-compressor": "^1.9.0",
-    "react-native-country-flag": "^2.0.2",
     "react-native-device-info": "^14.0.1",
     "react-native-edge-to-edge": "^1.1.3",
-    "react-native-gesture-handler": "~2.20.2",
+    "react-native-gesture-handler": "~2.16.1",
     "react-native-get-random-values": "^1.11.0",
     "react-native-google-cast": "^4.8.3",
     "react-native-image-colors": "^2.4.0",
     "react-native-ios-context-menu": "^2.5.2",
-    "react-native-ios-utilities": "4.5.3",
+    "react-native-ios-utilities": "^4.5.1",
     "react-native-mmkv": "^2.12.2",
-    "react-native-pager-view": "6.5.1",
+    "react-native-pager-view": "6.3.0",
     "react-native-progress": "^5.0.1",
-    "react-native-reanimated": "~3.16.1",
+    "react-native-reanimated": "~3.10.1",
     "react-native-reanimated-carousel": "4.0.0-canary.22",
-    "react-native-safe-area-context": "4.12.0",
-    "react-native-screens": "~4.4.0",
-    "react-native-svg": "15.8.0",
+    "react-native-safe-area-context": "4.10.5",
+    "react-native-screens": "3.31.1",
+    "react-native-svg": "15.2.0",
     "react-native-tab-view": "^3.5.2",
-    "react-native-udp": "^4.1.7",
     "react-native-uitextview": "^1.4.0",
     "react-native-url-polyfill": "^2.0.0",
     "react-native-uuid": "^2.0.2",
     "react-native-video": "^6.7.0",
     "react-native-volume-manager": "^1.10.0",
     "react-native-web": "~0.19.13",
-    "react-native-webview": "13.12.5",
+    "react-native-webview": "13.8.6",
+    "react-native-youtube-iframe": "^2.3.0",
     "sonner-native": "^0.14.2",
     "tailwindcss": "3.3.2",
     "use-debounce": "^10.0.4",
@@ -108,8 +110,10 @@
   "devDependencies": {
     "@babel/core": "^7.26.0",
     "@types/jest": "^29.5.14",
-    "@types/react": "~18.3.12",
+    "@types/react": "~18.2.79",
     "@types/react-test-renderer": "^18.0.7",
+    "jest": "^29.2.1",
+    "jest-expo": "~51.0.4",
     "patch-package": "^8.0.0",
     "postinstall-postinstall": "^2.1.0",
     "react-test-renderer": "18.2.0",

providers/JellyfinProvider.tsx

@@ -55,7 +55,7 @@ export const JellyfinProvider: React.FC<{ children: ReactNode }> = ({
       setJellyfin(
         () =>
           new Jellyfin({
-            clientInfo: { name: "Streamyfin", version: "0.23.0" },
+            clientInfo: { name: "Streamyfin", version: "0.24.0" },
             deviceInfo: {
               name: deviceName,
               id,
@@ -92,7 +92,7 @@ export const JellyfinProvider: React.FC<{ children: ReactNode }> = ({
     return {
       authorization: `MediaBrowser Client="Streamyfin", Device=${
         Platform.OS === "android" ? "Android" : "iOS"
-      }, DeviceId="${deviceId}", Version="0.23.0"`,
+      }, DeviceId="${deviceId}", Version="0.24.0"`,
     };
   }, [deviceId]);