feat: airplay and pip support

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -45,7 +45,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

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"
       },

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/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/AirplayButton.tsx

@@ -0,0 +1,455 @@
+import { Text } from "@/components/common/Text";
+import { Loader } from "@/components/Loader";
+import { Controls } from "@/components/video-player/controls/Controls";
+import { useOrientation } from "@/hooks/useOrientation";
+import { useOrientationSettings } from "@/hooks/useOrientationSettings";
+import { useInvalidatePlaybackProgressCache } from "@/hooks/useRevalidatePlaybackProgressCache";
+import { useWebSocket } from "@/hooks/useWebsockets";
+import { TrackInfo } from "@/modules/vlc-player";
+import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
+import { useSettings } from "@/utils/atoms/settings";
+import { getBackdropUrl } from "@/utils/jellyfin/image/getBackdropUrl";
+import { getAuthHeaders } from "@/utils/jellyfin/jellyfin";
+import { getStreamUrl } from "@/utils/jellyfin/media/getStreamUrl";
+import transcoding from "@/utils/profiles/transcoding";
+import { secondsToTicks } from "@/utils/secondsToTicks";
+import { Api } from "@jellyfin/sdk";
+import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
+import {
+  getPlaystateApi,
+  getUserLibraryApi,
+} from "@jellyfin/sdk/lib/utils/api";
+import { useQuery } from "@tanstack/react-query";
+import * as Haptics from "expo-haptics";
+import { useFocusEffect, useLocalSearchParams } from "expo-router";
+import { useAtomValue } from "jotai";
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import { ActivityIndicator, View, ViewProps } from "react-native";
+import { useSharedValue } from "react-native-reanimated";
+import Video, {
+  OnProgressData,
+  SelectedTrack,
+  SelectedTrackType,
+  VideoRef,
+} from "react-native-video";
+import { SubtitleHelper } from "@/utils/SubtitleHelper";
+import {
+  EvilIcons,
+  Feather,
+  FontAwesome,
+  FontAwesome5,
+  FontAwesome6,
+  Ionicons,
+} from "@expo/vector-icons";
+import { RoundButton } from "./RoundButton";
+
+interface Props extends ViewProps {
+  itemId: string;
+  audioIndexStr: string;
+  subtitleIndexStr: string;
+  mediaSourceId: string;
+  bitrateValueStr: string;
+}
+
+export const AirplayButton: React.FC<Props> = ({
+  itemId,
+  audioIndexStr,
+  subtitleIndexStr,
+  mediaSourceId,
+  bitrateValueStr,
+  ...props
+}) => {
+  const api = useAtomValue(apiAtom);
+  const user = useAtomValue(userAtom);
+  const [settings] = useSettings();
+  const videoRef = useRef<VideoRef | null>(null);
+
+  const firstTime = useRef(true);
+  const revalidateProgressCache = useInvalidatePlaybackProgressCache();
+
+  const [isPlaybackStopped, setIsPlaybackStopped] = useState(false);
+  const [showControls, _setShowControls] = useState(true);
+  const [ignoreSafeAreas, setIgnoreSafeAreas] = useState(false);
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [isBuffering, setIsBuffering] = useState(true);
+  const [isVideoLoaded, setIsVideoLoaded] = useState(false);
+
+  const setShowControls = useCallback((show: boolean) => {
+    _setShowControls(show);
+    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+  }, []);
+
+  const progress = useSharedValue(0);
+  const isSeeking = useSharedValue(false);
+  const cacheProgress = useSharedValue(0);
+
+  const audioIndex = audioIndexStr ? parseInt(audioIndexStr, 10) : undefined;
+  const subtitleIndex = subtitleIndexStr
+    ? parseInt(subtitleIndexStr, 10)
+    : undefined;
+  const bitrateValue = bitrateValueStr
+    ? parseInt(bitrateValueStr, 10)
+    : undefined;
+
+  const {
+    data: item,
+    isLoading: isLoadingItem,
+    isError: isErrorItem,
+  } = useQuery({
+    queryKey: ["item", itemId],
+    queryFn: async () => {
+      if (!api) {
+        throw new Error("No api");
+      }
+
+      if (!itemId) {
+        console.warn("No itemId");
+        return null;
+      }
+
+      const res = await getUserLibraryApi(api).getItem({
+        itemId,
+        userId: user?.Id,
+      });
+
+      return res.data;
+    },
+    staleTime: 0,
+  });
+
+  // TODO: NEED TO FIND A WAY TO FROM SWITCHING TO IMAGE BASED TO TEXT BASED SUBTITLES, THERE IS A BUG.
+  // MOST LIKELY LIKELY NEED A MASSIVE REFACTOR.
+  const {
+    data: stream,
+    isLoading: isLoadingStreamUrl,
+    isError: isErrorStreamUrl,
+  } = useQuery({
+    queryKey: ["stream-url", itemId, bitrateValue, mediaSourceId, audioIndex],
+
+    queryFn: async () => {
+      if (!api) {
+        throw new Error("No api");
+      }
+
+      if (!item) {
+        console.warn("No item", itemId, item);
+        return null;
+      }
+
+      const res = await getStreamUrl({
+        api,
+        item,
+        startTimeTicks: item?.UserData?.PlaybackPositionTicks!,
+        userId: user?.Id,
+        audioStreamIndex: audioIndex,
+        maxStreamingBitrate: bitrateValue,
+        mediaSourceId: mediaSourceId,
+        subtitleStreamIndex: subtitleIndex,
+        deviceProfile: transcoding,
+      });
+
+      if (!res) return null;
+
+      const { mediaSource, sessionId, url } = res;
+
+      if (!sessionId || !mediaSource || !url) {
+        console.warn("No sessionId or mediaSource or url", url);
+        return null;
+      }
+
+      return {
+        mediaSource,
+        sessionId,
+        url,
+      };
+    },
+    enabled: !!item,
+    staleTime: 0,
+  });
+
+  const poster = usePoster(item, api);
+  const videoSource = useVideoSource(item, api, poster, stream?.url);
+
+  const togglePlay = useCallback(async () => {
+    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+    if (isPlaying) {
+      videoRef.current?.pause();
+      await getPlaystateApi(api!).onPlaybackProgress({
+        itemId: item?.Id!,
+        audioStreamIndex: audioIndex ? audioIndex : undefined,
+        subtitleStreamIndex: subtitleIndex ? subtitleIndex : undefined,
+        mediaSourceId: mediaSourceId,
+        positionTicks: Math.floor(progress.value),
+        isPaused: true,
+        playMethod: stream?.url.includes("m3u8") ? "Transcode" : "DirectStream",
+        playSessionId: stream?.sessionId,
+      });
+    } else {
+      videoRef.current?.resume();
+      await getPlaystateApi(api!).onPlaybackProgress({
+        itemId: item?.Id!,
+        audioStreamIndex: audioIndex ? audioIndex : undefined,
+        subtitleStreamIndex: subtitleIndex ? subtitleIndex : undefined,
+        mediaSourceId: mediaSourceId,
+        positionTicks: Math.floor(progress.value),
+        isPaused: false,
+        playMethod: stream?.url.includes("m3u8") ? "Transcode" : "DirectStream",
+        playSessionId: stream?.sessionId,
+      });
+    }
+  }, [
+    isPlaying,
+    api,
+    item,
+    videoRef,
+    settings,
+    stream,
+    audioIndex,
+    subtitleIndex,
+    mediaSourceId,
+  ]);
+
+  const play = useCallback(() => {
+    videoRef.current?.resume();
+    reportPlaybackStart();
+  }, [videoRef]);
+
+  const pause = useCallback(() => {
+    videoRef.current?.pause();
+  }, [videoRef]);
+
+  const seek = useCallback(
+    (seconds: number) => {
+      videoRef.current?.seek(seconds);
+    },
+    [videoRef]
+  );
+
+  const reportPlaybackStopped = async () => {
+    if (!item?.Id) return;
+    await getPlaystateApi(api!).onPlaybackStopped({
+      itemId: item.Id,
+      mediaSourceId: mediaSourceId,
+      positionTicks: Math.floor(progress.value),
+      playSessionId: stream?.sessionId,
+    });
+    revalidateProgressCache();
+  };
+
+  const stop = useCallback(() => {
+    reportPlaybackStopped();
+    videoRef.current?.pause();
+    setIsPlaybackStopped(true);
+  }, [videoRef, reportPlaybackStopped]);
+
+  const reportPlaybackStart = async () => {
+    if (!item?.Id) return;
+    await getPlaystateApi(api!).onPlaybackStart({
+      itemId: item.Id,
+      audioStreamIndex: audioIndex ? audioIndex : undefined,
+      subtitleStreamIndex: subtitleIndex ? subtitleIndex : undefined,
+      mediaSourceId: mediaSourceId,
+      playMethod: stream?.url.includes("m3u8") ? "Transcode" : "DirectStream",
+      playSessionId: stream?.sessionId,
+    });
+  };
+
+  const onProgress = useCallback(
+    async (data: OnProgressData) => {
+      if (isSeeking.value === true) return;
+      if (isPlaybackStopped === true) return;
+
+      const ticks = secondsToTicks(data.currentTime);
+
+      progress.value = ticks;
+      cacheProgress.value = secondsToTicks(data.playableDuration);
+
+      // TODO: Use this when streaming with HLS url, but NOT when direct playing
+      // TODO: since playable duration is always 0 then.
+      setIsBuffering(data.playableDuration === 0);
+
+      if (!item?.Id || data.currentTime === 0) {
+        return;
+      }
+
+      await getPlaystateApi(api!).onPlaybackProgress({
+        itemId: item.Id,
+        audioStreamIndex: audioIndex ? audioIndex : undefined,
+        subtitleStreamIndex: subtitleIndex ? subtitleIndex : undefined,
+        mediaSourceId: mediaSourceId,
+        positionTicks: Math.round(ticks),
+        isPaused: !isPlaying,
+        playMethod: stream?.url.includes("m3u8") ? "Transcode" : "DirectStream",
+        playSessionId: stream?.sessionId,
+      });
+    },
+    [
+      item,
+      isPlaying,
+      api,
+      isPlaybackStopped,
+      isSeeking,
+      stream,
+      mediaSourceId,
+      audioIndex,
+      subtitleIndex,
+    ]
+  );
+
+  useOrientation();
+  useOrientationSettings();
+
+  useWebSocket({
+    isPlaying: isPlaying,
+    togglePlay: togglePlay,
+    stopPlayback: stop,
+    offline: false,
+  });
+
+  const [selectedTextTrack, setSelectedTextTrack] = useState<
+    SelectedTrack | undefined
+  >();
+
+  const [embededTextTracks, setEmbededTextTracks] = useState<
+    {
+      index: number;
+      language?: string | undefined;
+      selected?: boolean | undefined;
+      title?: string | undefined;
+      type: any;
+    }[]
+  >([]);
+
+  const [audioTracks, setAudioTracks] = useState<TrackInfo[]>([]);
+  const [selectedAudioTrack, setSelectedAudioTrack] = useState<
+    SelectedTrack | undefined
+  >(undefined);
+
+  useEffect(() => {
+    if (selectedTextTrack === undefined) {
+      const subtitleHelper = new SubtitleHelper(
+        stream?.mediaSource.MediaStreams ?? []
+      );
+      const embeddedTrackIndex = subtitleHelper.getEmbeddedTrackIndex(
+        subtitleIndex!
+      );
+
+      // Most likely the subtitle is burned in.
+      if (embeddedTrackIndex === -1) return;
+
+      setSelectedTextTrack({
+        type: SelectedTrackType.INDEX,
+        value: embeddedTrackIndex,
+      });
+    }
+  }, [embededTextTracks]);
+
+  useFocusEffect(
+    React.useCallback(() => {
+      return async () => {
+        stop();
+      };
+    }, [])
+  );
+
+  const [open, setOpen] = useState(false);
+
+  if (videoSource)
+    return (
+      <View {...props}>
+        <RoundButton
+          onPress={async () => {
+            setOpen(true);
+            setTimeout(() => {
+              videoRef.current?.presentFullscreenPlayer();
+            }, 1000);
+          }}
+          size="large"
+          iconComponent={() => (
+            <Feather name="airplay" size={22} color="white" />
+          )}
+        />
+        {open ? (
+          <>
+            <Video
+              ref={videoRef}
+              style={{
+                width: 0,
+                height: 0,
+              }}
+              source={videoSource}
+              resizeMode={ignoreSafeAreas ? "cover" : "contain"}
+              progressUpdateInterval={500}
+              playWhenInactive={true}
+              allowsExternalPlayback={true}
+              playInBackground={true}
+              pictureInPicture={true}
+              showNotificationControls={true}
+              ignoreSilentSwitch="ignore"
+              controls={true}
+              fullscreen={open}
+            />
+          </>
+        ) : null}
+      </View>
+    );
+  else return <RoundButton icon="close" />;
+};
+
+export function usePoster(
+  item: BaseItemDto | null | undefined,
+  api: Api | null
+): string | undefined {
+  const poster = useMemo(() => {
+    if (!item || !api) return undefined;
+    return item.Type === "Audio"
+      ? `${api.basePath}/Items/${item.AlbumId}/Images/Primary?tag=${item.AlbumPrimaryImageTag}&quality=90&maxHeight=200&maxWidth=200`
+      : getBackdropUrl({
+          api,
+          item: item,
+          quality: 70,
+          width: 200,
+        });
+  }, [item, api]);
+
+  return poster ?? undefined;
+}
+
+export function useVideoSource(
+  item: BaseItemDto | null | undefined,
+  api: Api | null,
+  poster: string | undefined,
+  url?: string | null
+) {
+  const videoSource = useMemo(() => {
+    if (!item || !api || !url) {
+      return null;
+    }
+
+    const startPosition = item?.UserData?.PlaybackPositionTicks
+      ? Math.round(item.UserData.PlaybackPositionTicks / 10000)
+      : 0;
+
+    return {
+      uri: url,
+      isNetwork: true,
+      startPosition,
+      headers: getAuthHeaders(api),
+      metadata: {
+        artist: item?.AlbumArtist ?? undefined,
+        title: item?.Name || "Unknown",
+        description: item?.Overview ?? undefined,
+        imageUri: poster,
+        subtitle: item?.Album ?? undefined,
+      },
+    };
+  }, [item, api, poster, url]);
+
+  return videoSource;
+}

components/ItemContent.tsx

@@ -27,7 +27,7 @@ import { useNavigation } from "expo-router";
 import * as ScreenOrientation from "expo-screen-orientation";
 import { useAtom } from "jotai";
 import React, { useEffect, useMemo, useState } from "react";
-import { View } from "react-native";
+import { Platform, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { Chromecast } from "./Chromecast";
 import { ItemHeader } from "./ItemHeader";
@@ -35,6 +35,7 @@ import { ItemTechnicalDetails } from "./ItemTechnicalDetails";
 import { MediaSourceSelector } from "./MediaSourceSelector";
 import { MoreMoviesWithActor } from "./MoreMoviesWithActor";
 import { AddToFavorites } from "./AddToFavorites";
+import { AirplayButton } from "./AirplayButton";
 
 export type SelectedOptions = {
   bitrate: Bitrate;
@@ -87,6 +88,21 @@ export const ItemContent: React.FC<{ item: BaseItemDto }> = React.memo(
           item && (
             <View className="flex flex-row items-center space-x-2">
               <Chromecast background="blur" width={22} height={22} />
+              {Platform.OS === "ios" && (
+                <AirplayButton
+                  audioIndexStr={selectedOptions?.audioIndex?.toString() ?? "0"}
+                  bitrateValueStr={
+                    selectedOptions?.bitrate?.value?.toString() ?? "250000"
+                  }
+                  itemId={item.Id!}
+                  mediaSourceId={
+                    selectedOptions?.mediaSource?.Id!.toString() ?? "0"
+                  }
+                  subtitleIndexStr={
+                    selectedOptions?.subtitleIndex?.toString() ?? "0"
+                  }
+                />
+              )}
               {item.Type !== "Program" && (
                 <View className="flex flex-row items-center space-x-2">
                   <DownloadSingleItem item={item} size="large" />

components/RoundButton.tsx

@@ -1,6 +1,6 @@
 import { Ionicons } from "@expo/vector-icons";
 import { BlurView } from "expo-blur";
-import { PropsWithChildren } from "react";
+import React, { PropsWithChildren } from "react";
 import {
   Platform,
   TouchableOpacity,
@@ -11,6 +11,7 @@ import * as Haptics from "expo-haptics";
 interface Props extends TouchableOpacityProps {
   onPress?: () => void;
   icon?: keyof typeof Ionicons.glyphMap;
+  iconComponent?: React.ComponentType<any>;
   background?: boolean;
   size?: "default" | "large";
   fillColor?: "primary";
@@ -20,6 +21,7 @@ interface Props extends TouchableOpacityProps {
 export const RoundButton: React.FC<PropsWithChildren<Props>> = ({
   background = true,
   icon,
+  iconComponent: IconComponent,
   onPress,
   children,
   size = "default",
@@ -51,6 +53,9 @@ export const RoundButton: React.FC<PropsWithChildren<Props>> = ({
             color={"white"}
           />
         ) : null}
+        {IconComponent ? (
+          <IconComponent size={size === "large" ? 22 : 18} color="white" />
+        ) : null}
         {children ? children : null}
       </TouchableOpacity>
     );
@@ -69,6 +74,9 @@ export const RoundButton: React.FC<PropsWithChildren<Props>> = ({
             color={"white"}
           />
         ) : null}
+        {IconComponent ? (
+          <IconComponent size={size === "large" ? 22 : 18} color="white" />
+        ) : null}
         {children ? children : null}
       </TouchableOpacity>
     );
@@ -89,6 +97,9 @@ export const RoundButton: React.FC<PropsWithChildren<Props>> = ({
             color={"white"}
           />
         ) : null}
+        {IconComponent ? (
+          <IconComponent size={size === "large" ? 22 : 18} color="white" />
+        ) : null}
         {children ? children : null}
       </TouchableOpacity>
     );
@@ -107,6 +118,9 @@ export const RoundButton: React.FC<PropsWithChildren<Props>> = ({
             color={"white"}
           />
         ) : null}
+        {IconComponent ? (
+          <IconComponent size={size === "large" ? 22 : 18} color="white" />
+        ) : null}
         {children ? children : null}
       </BlurView>
     </TouchableOpacity>

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"

package.json

@@ -76,7 +76,7 @@
     "react-native-circular-progress": "^1.4.1",
     "react-native-compressor": "^1.9.0",
     "react-native-device-info": "^14.0.1",
-    "react-native-edge-to-edge": "^1.1.1",
+    "react-native-edge-to-edge": "^1.1.3",
     "react-native-gesture-handler": "~2.16.1",
     "react-native-get-random-values": "^1.11.0",
     "react-native-google-cast": "^4.8.3",

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]);