feat: currently playing floating bar

components/BitrateSelector.tsx

@@ -0,0 +1,75 @@
+import { TouchableOpacity, View } from "react-native";
+import * as DropdownMenu from "zeego/dropdown-menu";
+import { Text } from "./common/Text";
+import { atom, useAtom } from "jotai";
+
+export type Bitrate = {
+  key: string;
+  value: number | undefined;
+};
+
+const BITRATES: Bitrate[] = [
+  {
+    key: "Max",
+    value: undefined,
+  },
+  {
+    key: "4 Mb/s",
+    value: 4000000,
+  },
+  {
+    key: "2 Mb/s",
+    value: 2000000,
+  },
+  {
+    key: "500 Kb/s",
+    value: 500000,
+  },
+];
+
+type Props = {
+  onChange: (value: Bitrate) => void;
+  selected: Bitrate;
+};
+
+export const BitrateSelector: React.FC<Props> = ({ onChange, selected }) => {
+  return (
+    <View className="flex flex-row items-center justify-between">
+      <DropdownMenu.Root>
+        <DropdownMenu.Trigger>
+          <View className="flex flex-col mb-2">
+            <Text className="opacity-50 mb-1 text-xs">Bitrate</Text>
+            <View className="flex flex-row">
+              <TouchableOpacity className="bg-neutral-900 rounded-2xl border-neutral-900 border px-3 py-2 flex flex-row items-center justify-between">
+                <Text>
+                  {BITRATES.find((b) => b.value === selected.value)?.key}
+                </Text>
+              </TouchableOpacity>
+            </View>
+          </View>
+        </DropdownMenu.Trigger>
+        <DropdownMenu.Content
+          loop={true}
+          side="bottom"
+          align="start"
+          alignOffset={0}
+          avoidCollisions={true}
+          collisionPadding={8}
+          sideOffset={8}
+        >
+          <DropdownMenu.Label>Bitrates</DropdownMenu.Label>
+          {BITRATES?.map((b, index: number) => (
+            <DropdownMenu.Item
+              key={index.toString()}
+              onSelect={() => {
+                onChange(b);
+              }}
+            >
+              <DropdownMenu.ItemTitle>{b.key}</DropdownMenu.ItemTitle>
+            </DropdownMenu.Item>
+          ))}
+        </DropdownMenu.Content>
+      </DropdownMenu.Root>
+    </View>
+  );
+};

components/CurrentlyPlayingBar.tsx

@@ -0,0 +1,288 @@
+import {
+  ActivityIndicator,
+  Platform,
+  TouchableOpacity,
+  View,
+} from "react-native";
+import { Text } from "./common/Text";
+import { Ionicons } from "@expo/vector-icons";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import Video, { OnProgressData, VideoRef } from "react-native-video";
+import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
+import { atom, useAtom } from "jotai";
+import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { useCastDevice, useRemoteMediaClient } from "react-native-google-cast";
+import { getUserItemData } from "@/utils/jellyfin/user-library/getUserItemData";
+import { getMediaInfoApi } from "@jellyfin/sdk/lib/utils/api";
+import { getStreamUrl } from "@/utils/jellyfin/media/getStreamUrl";
+import { chromecastProfile } from "@/utils/profiles/chromecast";
+import ios12 from "@/utils/profiles/ios12";
+import { reportPlaybackProgress } from "@/utils/jellyfin/playstate/reportPlaybackProgress";
+import { reportPlaybackStopped } from "@/utils/jellyfin/playstate/reportPlaybackStopped";
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from "react-native-reanimated";
+import { useRouter, useSegments } from "expo-router";
+import { BlurView } from "expo-blur";
+
+export const currentlyPlayingItemAtom = atom<{
+  item: BaseItemDto;
+  playbackUrl: string;
+} | null>(null);
+
+export const CurrentlyPlayingBar: React.FC = () => {
+  const insets = useSafeAreaInsets();
+  const [api] = useAtom(apiAtom);
+  const [user] = useAtom(userAtom);
+  const [cp, setCp] = useAtom(currentlyPlayingItemAtom);
+
+  const castDevice = useCastDevice();
+  const client = useRemoteMediaClient();
+  const queryClient = useQueryClient();
+  const segments = useSegments();
+
+  const videoRef = useRef<VideoRef | null>(null);
+  const [paused, setPaused] = useState(true);
+  const [progress, setProgress] = useState(0);
+
+  const aBottom = useSharedValue(0);
+  const aPadding = useSharedValue(0);
+  const aHeight = useSharedValue(100);
+  const router = useRouter();
+  const animatedOuterStyle = useAnimatedStyle(() => {
+    return {
+      bottom: withTiming(aBottom.value, { duration: 500 }),
+      height: withTiming(aHeight.value, { duration: 500 }),
+      padding: withTiming(aPadding.value, { duration: 500 }),
+    };
+  });
+
+  const aPaddingBottom = useSharedValue(30);
+  const aPaddingInner = useSharedValue(12);
+  const aBorderRadiusBottom = useSharedValue(12);
+  const animatedInnerStyle = useAnimatedStyle(() => {
+    return {
+      padding: withTiming(aPaddingInner.value, { duration: 500 }),
+      paddingBottom: withTiming(aPaddingBottom.value, { duration: 500 }),
+      borderBottomLeftRadius: withTiming(aBorderRadiusBottom.value, {
+        duration: 500,
+      }),
+      borderBottomRightRadius: withTiming(aBorderRadiusBottom.value, {
+        duration: 500,
+      }),
+    };
+  });
+
+  useEffect(() => {
+    if (segments.find((s) => s.includes("tabs"))) {
+      // Tab screen - i.e. home
+      aBottom.value = Platform.OS === "ios" ? 78 : 50;
+      aHeight.value = 80;
+      aPadding.value = 8;
+      aPaddingBottom.value = 8;
+      aPaddingInner.value = 8;
+    } else {
+      // Inside a normal screen
+      aBottom.value = Platform.OS === "ios" ? 0 : 0;
+      aHeight.value = Platform.OS === "ios" ? 110 : 80;
+      aPadding.value = Platform.OS === "ios" ? 0 : 8;
+      aPaddingInner.value = Platform.OS === "ios" ? 12 : 8;
+      aPaddingBottom.value = Platform.OS === "ios" ? 40 : 12;
+    }
+  }, [segments]);
+
+  const { data: item } = useQuery({
+    queryKey: ["item", cp?.item.Id],
+    queryFn: async () =>
+      await getUserItemData({
+        api,
+        userId: user?.Id,
+        itemId: cp?.item.Id,
+      }),
+    enabled: !!cp?.item.Id && !!api,
+    staleTime: 60,
+  });
+
+  const { data: sessionData } = useQuery({
+    queryKey: ["sessionData", cp?.item.Id],
+    queryFn: async () => {
+      if (!cp?.item.Id) return null;
+      const playbackData = await getMediaInfoApi(api!).getPlaybackInfo({
+        itemId: cp?.item.Id,
+        userId: user?.Id,
+      });
+      return playbackData.data;
+    },
+    enabled: !!cp?.item.Id && !!api && !!user?.Id,
+    staleTime: 0,
+  });
+
+  const onProgress = useCallback(
+    ({ currentTime }: OnProgressData) => {
+      if (!currentTime || !sessionData?.PlaySessionId || paused) return;
+      const newProgress = currentTime * 10000000;
+      setProgress(newProgress);
+      reportPlaybackProgress({
+        api,
+        itemId: cp?.item.Id,
+        positionTicks: newProgress,
+        sessionId: sessionData.PlaySessionId,
+      });
+    },
+    [sessionData?.PlaySessionId, item, api, paused],
+  );
+
+  const play = () => {
+    if (videoRef.current) {
+      videoRef.current.resume();
+      setPaused(false);
+    }
+  };
+
+  const pause = useCallback(() => {
+    videoRef.current?.pause();
+    setPaused(true);
+
+    if (progress > 0)
+      reportPlaybackStopped({
+        api,
+        itemId: item?.Id,
+        positionTicks: progress,
+        sessionId: sessionData?.PlaySessionId,
+      });
+
+    queryClient.invalidateQueries({
+      queryKey: ["nextUp", item?.SeriesId],
+      refetchType: "all",
+    });
+    queryClient.invalidateQueries({
+      queryKey: ["episodes"],
+      refetchType: "all",
+    });
+  }, [api, item, progress, sessionData, queryClient]);
+
+  const startPosition = useMemo(
+    () =>
+      item?.UserData?.PlaybackPositionTicks
+        ? Math.round(item.UserData.PlaybackPositionTicks / 10000)
+        : 0,
+    [item],
+  );
+
+  useEffect(() => {
+    if (cp?.playbackUrl) {
+      play();
+    }
+  }, [cp?.playbackUrl]);
+
+  if (!cp) return null;
+
+  return (
+    <Animated.View
+      style={[animatedOuterStyle]}
+      className="absolute left-0 w-screen"
+    >
+      <BlurView
+        intensity={Platform.OS === "android" ? 60 : 100}
+        experimentalBlurMethod={Platform.OS === "android" ? "none" : undefined}
+        className={`h-full w-full rounded-xl overflow-hidden ${Platform.OS === "android" && "bg-black"}`}
+      >
+        <Animated.View
+          style={[
+            { padding: 8, borderTopLeftRadius: 12, borderTopEndRadius: 12 },
+            animatedInnerStyle,
+          ]}
+          className="h-full w-full  flex flex-row items-center justify-between overflow-hidden"
+        >
+          <View className="flex flex-row items-center space-x-4 shrink">
+            <TouchableOpacity
+              onPress={() => {
+                videoRef.current?.presentFullscreenPlayer();
+              }}
+              className="aspect-video h-full bg-neutral-800 rounded-md overflow-hidden"
+            >
+              {cp.playbackUrl && (
+                <Video
+                  style={{ width: "100%", height: "100%" }}
+                  source={{
+                    uri: cp.playbackUrl,
+                    isNetwork: true,
+                    startPosition,
+                  }}
+                  controls={false}
+                  ref={videoRef}
+                  onBuffer={(e) =>
+                    e.isBuffering ? console.log("Buffering...") : null
+                  }
+                  onProgress={(e) => onProgress(e)}
+                  paused={paused}
+                  onFullscreenPlayerDidDismiss={() => {
+                    play();
+                  }}
+                  ignoreSilentSwitch="ignore"
+                  renderLoader={
+                    <View className="flex flex-col items-center justify-center h-full">
+                      <ActivityIndicator size={"small"} color={"white"} />
+                    </View>
+                  }
+                />
+              )}
+            </TouchableOpacity>
+            <View className="shrink text-xs">
+              <TouchableOpacity
+                onPress={() => {
+                  router.push(`/(auth)/items/${item?.Id}/page`);
+                }}
+              >
+                <Text>{item?.Name}</Text>
+              </TouchableOpacity>
+              {item?.SeriesName ? (
+                <TouchableOpacity
+                  onPress={() => {
+                    router.push(`/(auth)/series/${item.SeriesId}/page`);
+                  }}
+                  className="text-xs opacity-50"
+                >
+                  <Text>{item.SeriesName}</Text>
+                </TouchableOpacity>
+              ) : (
+                <View>
+                  <Text className="text-xs opacity-50">
+                    {item?.ProductionYear}
+                  </Text>
+                </View>
+              )}
+            </View>
+          </View>
+          <View className="flex flex-row items-center space-x-2">
+            <TouchableOpacity
+              onPress={() => {
+                if (paused) play();
+                else pause();
+              }}
+              className="aspect-square rounded flex flex-col items-center justify-center p-2"
+            >
+              {paused ? (
+                <Ionicons name="play" size={24} color="white" />
+              ) : (
+                <Ionicons name="pause" size={24} color="white" />
+              )}
+            </TouchableOpacity>
+            <TouchableOpacity
+              onPress={() => {
+                setCp(null);
+              }}
+              className="aspect-square rounded flex flex-col items-center justify-center p-2"
+            >
+              <Ionicons name="close" size={24} color="white" />
+            </TouchableOpacity>
+          </View>
+        </Animated.View>
+      </BlurView>
+    </Animated.View>
+  );
+};

components/DownloadItem.tsx

@@ -16,12 +16,12 @@ import { getPlaybackInfo } from "@/utils/jellyfin/media/getPlaybackInfo";
 
 type DownloadProps = {
   item: BaseItemDto;
-  playbackURL: string;
+  playbackUrl: string;
 };
 
 export const DownloadItem: React.FC<DownloadProps> = ({
   item,
-  playbackURL,
+  playbackUrl,
 }) => {
   const [api] = useAtom(apiAtom);
   const [user] = useAtom(userAtom);
@@ -30,7 +30,7 @@ export const DownloadItem: React.FC<DownloadProps> = ({
   const { downloadMedia, isDownloading, error, cancelDownload } =
     useDownloadMedia(api, user?.Id);
 
-  const { startRemuxing, cancelRemuxing } = useRemuxHlsToMp4(playbackURL, item);
+  const { startRemuxing, cancelRemuxing } = useRemuxHlsToMp4(playbackUrl, item);
 
   const { data: playbackInfo, isLoading } = useQuery({
     queryKey: ["playbackInfo", item.Id],

components/PlayButton.tsx

@@ -0,0 +1,34 @@
+import { useState } from "react";
+import { Button } from "./Button";
+import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
+import { currentlyPlayingItemAtom } from "./CurrentlyPlayingBar";
+import { useAtom } from "jotai";
+import { Feather, Ionicons } from "@expo/vector-icons";
+import { runtimeTicksToMinutes } from "@/utils/time";
+
+type Props = {
+  item: BaseItemDto;
+  onPress: () => void;
+  chromecastReady: boolean;
+};
+
+export const PlayButton: React.FC<Props> = ({
+  item,
+  onPress,
+  chromecastReady,
+}) => {
+  return (
+    <Button
+      onPress={onPress}
+      iconRight={
+        chromecastReady ? (
+          <Feather name="cast" size={20} color="white" />
+        ) : (
+          <Ionicons name="play-circle" size={24} color="white" />
+        )
+      }
+    >
+      {runtimeTicksToMinutes(item?.RunTimeTicks)}
+    </Button>
+  );
+};

components/VideoPlayer.tsx

@@ -23,31 +23,13 @@ import { chromecastProfile } from "@/utils/profiles/chromecast";
 import { reportPlaybackStopped } from "@/utils/jellyfin/playstate/reportPlaybackStopped";
 import { getUserItemData } from "@/utils/jellyfin/user-library/getUserItemData";
 import { getStreamUrl } from "@/utils/jellyfin/media/getStreamUrl";
+import { currentlyPlayingItemAtom } from "./CurrentlyPlayingBar";
 
 type VideoPlayerProps = {
   itemId: string;
   onChangePlaybackURL: (url: string | null) => void;
 };
 
-const BITRATES = [
-  {
-    key: "Max",
-    value: undefined,
-  },
-  {
-    key: "4 Mb/s",
-    value: 4000000,
-  },
-  {
-    key: "2 Mb/s",
-    value: 2000000,
-  },
-  {
-    key: "500 Kb/s",
-    value: 500000,
-  },
-];
-
 export const VideoPlayer: React.FC<VideoPlayerProps> = ({
   itemId,
   onChangePlaybackURL,
@@ -194,6 +176,8 @@ export const VideoPlayer: React.FC<VideoPlayerProps> = ({
     });
   }, [item, client, playbackURL]);
 
+  const [cp, setCp] = useAtom(currentlyPlayingItemAtom);
+
   useEffect(() => {
     videoRef.current?.pause();
   }, []);
@@ -263,14 +247,15 @@ export const VideoPlayer: React.FC<VideoPlayerProps> = ({
         <Button
           disabled={!enableVideo}
           onPress={() => {
-            if (chromecastReady) {
-              cast();
-            } else {
-              setTimeout(() => {
-                if (!videoRef.current) return;
-                videoRef.current.presentFullscreenPlayer();
-              }, 1000);
-            }
+            // if (chromecastReady) {
+            //   cast();
+            // } else {
+            //   setTimeout(() => {
+            //     if (!videoRef.current) return;
+            //     videoRef.current.presentFullscreenPlayer();
+            //   }, 1000);
+            // }
+            if (item) setCp(item);
           }}
           iconRight={
             chromecastReady ? (

components/common/Input.tsx

@@ -1,11 +1,17 @@
-import React from "react";
+import React, { useEffect } from "react";
 import { TextInputProps, TextProps } from "react-native";
 import { TextInput } from "react-native";
 export function Input(props: TextInputProps) {
   const { style, ...otherProps } = props;
+  const inputRef = React.useRef<TextInput>(null);
+
+  useEffect(() => {
+    inputRef.current?.focus();
+  }, []);
 
   return (
     <TextInput
+      ref={inputRef}
       className="p-4 border border-neutral-800 rounded-xl bg-neutral-900"
       allowFontScaling={false}
       style={[{ color: "white" }, style]}

components/downloads/EpisodeCard.tsx

@@ -1,25 +1,23 @@
 import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
-import { router } from "expo-router";
 import { TouchableOpacity } from "react-native";
 import * as ContextMenu from "zeego/context-menu";
 import { Text } from "../common/Text";
 import { useFiles } from "@/hooks/useFiles";
 import * as Haptics from "expo-haptics";
-import { useRef, useMemo, useState } from "react";
-import Video, { VideoRef } from "react-native-video";
+import { useCallback } from "react";
 import * as FileSystem from "expo-file-system";
+import { useAtom } from "jotai";
+import { currentlyPlayingItemAtom } from "../CurrentlyPlayingBar";
 
 export const EpisodeCard: React.FC<{ item: BaseItemDto }> = ({ item }) => {
   const { deleteFile } = useFiles();
-  const videoRef = useRef<VideoRef | null>(null);
-  const [isPlaying, setIsPlaying] = useState(false);
+  const [_, setCp] = useAtom(currentlyPlayingItemAtom);
 
-  const openFile = () => {
-    videoRef.current?.presentFullscreenPlayer();
-  };
-
-  const fileUrl = useMemo(() => {
-    return `${FileSystem.documentDirectory}/${item.Id}.mp4`;
+  const openFile = useCallback(() => {
+    setCp({
+      item,
+      playbackUrl: `${FileSystem.documentDirectory}/${item.Id}.mp4`,
+    });
   }, [item]);
 
   const options = [
@@ -72,26 +70,6 @@ export const EpisodeCard: React.FC<{ item: BaseItemDto }> = ({ item }) => {
           ))}
         </ContextMenu.Content>
       </ContextMenu.Root>
-
-      <Video
-        style={{ width: 0, height: 0 }}
-        source={{
-          uri: fileUrl,
-          isNetwork: false,
-        }}
-        controls
-        onFullscreenPlayerDidDismiss={() => {
-          setIsPlaying(false);
-          videoRef.current?.pause();
-        }}
-        onFullscreenPlayerDidPresent={() => {
-          setIsPlaying(true);
-          videoRef.current?.resume();
-        }}
-        ref={videoRef}
-        resizeMode="contain"
-        paused={!isPlaying}
-      />
     </>
   );
 };

components/downloads/MovieCard.tsx

@@ -3,30 +3,22 @@ import { Text } from "../common/Text";
 import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
 import { runtimeTicksToMinutes } from "@/utils/time";
 import * as ContextMenu from "zeego/context-menu";
-import { router } from "expo-router";
 import { useFiles } from "@/hooks/useFiles";
-import Video, {
-  OnBufferData,
-  OnPlaybackStateChangedData,
-  OnProgressData,
-  OnVideoErrorData,
-  VideoRef,
-} from "react-native-video";
 import * as FileSystem from "expo-file-system";
-import { useMemo, useRef, useState } from "react";
+import { useCallback } from "react";
 import * as Haptics from "expo-haptics";
+import { useAtom } from "jotai";
+import { currentlyPlayingItemAtom } from "../CurrentlyPlayingBar";
 
 export const MovieCard: React.FC<{ item: BaseItemDto }> = ({ item }) => {
   const { deleteFile } = useFiles();
-  const videoRef = useRef<VideoRef | null>(null);
-  const [isPlaying, setIsPlaying] = useState(false);
+  const [_, setCp] = useAtom(currentlyPlayingItemAtom);
 
-  const openFile = () => {
-    videoRef.current?.presentFullscreenPlayer();
-  };
-
-  const fileUrl = useMemo(() => {
-    return `${FileSystem.documentDirectory}/${item.Id}.mp4`;
+  const openFile = useCallback(() => {
+    setCp({
+      item,
+      playbackUrl: `${FileSystem.documentDirectory}/${item.Id}.mp4`,
+    });
   }, [item]);
 
   const options = [
@@ -82,26 +74,6 @@ export const MovieCard: React.FC<{ item: BaseItemDto }> = ({ item }) => {
           ))}
         </ContextMenu.Content>
       </ContextMenu.Root>
-
-      <Video
-        style={{ width: 0, height: 0 }}
-        source={{
-          uri: fileUrl,
-          isNetwork: false,
-        }}
-        controls
-        onFullscreenPlayerDidDismiss={() => {
-          setIsPlaying(false);
-          videoRef.current?.pause();
-        }}
-        onFullscreenPlayerDidPresent={() => {
-          setIsPlaying(true);
-          videoRef.current?.resume();
-        }}
-        ref={videoRef}
-        resizeMode="contain"
-        paused={!isPlaying}
-      />
     </>
   );
 };