chore: refactor

components/Button.tsx

@@ -2,7 +2,7 @@ import React, { PropsWithChildren, ReactNode, useMemo } from "react";
 import { TouchableOpacity, Text, ActivityIndicator, View } from "react-native";
 import * as Haptics from "expo-haptics";
 
-interface ButtonProps {
+interface ButtonProps extends React.ComponentProps<typeof TouchableOpacity> {
   onPress?: () => void;
   className?: string;
   textClassName?: string;
@@ -26,6 +26,7 @@ export const Button: React.FC<PropsWithChildren<ButtonProps>> = ({
   iconLeft,
   children,
   justify = "center",
+  ...props
 }) => {
   const colorClasses = useMemo(() => {
     switch (color) {
@@ -34,7 +35,7 @@ export const Button: React.FC<PropsWithChildren<ButtonProps>> = ({
       case "red":
         return "bg-red-600";
       case "black":
-        return "bg-black border border-neutral-900";
+        return "bg-neutral-900 border border-neutral-800";
     }
   }, [color]);
 
@@ -53,6 +54,7 @@ export const Button: React.FC<PropsWithChildren<ButtonProps>> = ({
         }
       }}
       disabled={disabled || loading}
+      {...props}
     >
       {loading ? (
         <ActivityIndicator color={"white"} size={24} />

components/Chromecast.tsx

@@ -33,7 +33,6 @@ export const Chromecast: React.FC<Props> = ({ item, startTimeTicks }) => {
       await discoveryManager.startDiscovery();
 
       const started = await discoveryManager.isRunning();
-      console.log("started", started);
 
       console.log({
         devices,

components/ContinueWatchingPoster.tsx

@@ -1,11 +1,11 @@
 import { apiAtom } from "@/providers/JellyfinProvider";
-import { getPrimaryImage } from "@/utils/jellyfin";
 import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
 import { Image } from "expo-image";
 import { useAtom } from "jotai";
 import { useMemo, useState } from "react";
 import { View } from "react-native";
 import { WatchedIndicator } from "./WatchedIndicator";
+import { getPrimaryImageUrl } from "@/utils/jellyfin/image/getPrimaryImageUrl";
 
 type ContinueWatchingPosterProps = {
   item: BaseItemDto;
@@ -18,17 +18,17 @@ const ContinueWatchingPoster: React.FC<ContinueWatchingPosterProps> = ({
 
   const url = useMemo(
     () =>
-      getPrimaryImage({
+      getPrimaryImageUrl({
         api,
         item,
         quality: 70,
         width: 300,
       }),
-    [item]
+    [item],
   );
 
   const [progress, setProgress] = useState(
-    item.UserData?.PlayedPercentage || 0
+    item.UserData?.PlayedPercentage || 0,
   );
 
   if (!url)

components/DownloadItem.tsx

@@ -12,7 +12,7 @@ import ProgressCircle from "./ProgressCircle";
 import { Text } from "./common/Text";
 import { useDownloadMedia } from "@/hooks/useDownloadMedia";
 import { useRemuxHlsToMp4 } from "@/hooks/useRemuxHlsToMp4";
-import { getPlaybackInfo } from "@/utils/jellyfin/items/getUserItemData";
+import { getPlaybackInfo } from "@/utils/jellyfin/media/getPlaybackInfo";
 
 type DownloadProps = {
   item: BaseItemDto;

components/MoviePoster.tsx

@@ -1,12 +1,11 @@
 import { apiAtom } from "@/providers/JellyfinProvider";
-import { getPrimaryImage, getPrimaryImageById } from "@/utils/jellyfin";
 import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
-import { useQuery } from "@tanstack/react-query";
 import { Image } from "expo-image";
 import { useAtom } from "jotai";
 import { useMemo, useState } from "react";
 import { View } from "react-native";
 import { WatchedIndicator } from "./WatchedIndicator";
+import { getPrimaryImageUrl } from "@/utils/jellyfin/image/getPrimaryImageUrl";
 
 type MoviePosterProps = {
   item: BaseItemDto;
@@ -21,15 +20,15 @@ const MoviePoster: React.FC<MoviePosterProps> = ({
 
   const url = useMemo(
     () =>
-      getPrimaryImage({
+      getPrimaryImageUrl({
         api,
         item,
       }),
-    [item]
+    [item],
   );
 
   const [progress, setProgress] = useState(
-    item.UserData?.PlayedPercentage || 0
+    item.UserData?.PlayedPercentage || 0,
   );
 
   if (!url)

components/VideoPlayer.tsx

@@ -13,22 +13,16 @@ import React, {
 } from "react";
 import { TouchableOpacity, View } from "react-native";
 import { useCastDevice, useRemoteMediaClient } from "react-native-google-cast";
-import Video, {
-  OnBufferData,
-  OnPlaybackStateChangedData,
-  OnProgressData,
-  OnVideoErrorData,
-  VideoRef,
-} from "react-native-video";
+import Video, { OnProgressData, VideoRef } from "react-native-video";
 import * as DropdownMenu from "zeego/dropdown-menu";
 import { Button } from "./Button";
 import { Text } from "./common/Text";
 import ios12 from "../utils/profiles/ios12";
-import { getUserItemData } from "@/utils/jellyfin/items/getUserItemData";
-import { getStreamUrl } from "@/utils/jellyfin";
 import { reportPlaybackProgress } from "@/utils/jellyfin/playstate/reportPlaybackProgress";
 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";
 
 type VideoPlayerProps = {
   itemId: string;
@@ -169,7 +163,7 @@ export const VideoPlayer: React.FC<VideoPlayerProps> = ({
     () =>
       item?.UserData?.PlaybackPositionTicks
         ? Math.round(item.UserData.PlaybackPositionTicks / 10000)
-        : null,
+        : 0,
     [item],
   );
 

components/downloads/EpisodeCard.tsx

@@ -5,13 +5,14 @@ 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 } from "react";
+import { useRef, useMemo, useState } from "react";
 import Video, { VideoRef } from "react-native-video";
 import * as FileSystem from "expo-file-system";
 
 export const EpisodeCard: React.FC<{ item: BaseItemDto }> = ({ item }) => {
   const { deleteFile } = useFiles();
   const videoRef = useRef<VideoRef | null>(null);
+  const [isPlaying, setIsPlaying] = useState(false);
 
   const openFile = () => {
     videoRef.current?.presentFullscreenPlayer();
@@ -38,7 +39,7 @@ export const EpisodeCard: React.FC<{ item: BaseItemDto }> = ({ item }) => {
         <ContextMenu.Trigger>
           <TouchableOpacity
             onPress={openFile}
-            className="bg-neutral-800 border border-neutral-900 rounded-2xl p-4"
+            className="bg-neutral-900 border border-neutral-800 rounded-2xl p-4"
           >
             <Text className=" font-bold">{item.Name}</Text>
             <Text className=" text-xs opacity-50">
@@ -79,9 +80,17 @@ export const EpisodeCard: React.FC<{ item: BaseItemDto }> = ({ item }) => {
           isNetwork: false,
         }}
         controls
+        onFullscreenPlayerDidDismiss={() => {
+          setIsPlaying(false);
+          videoRef.current?.pause();
+        }}
+        onFullscreenPlayerDidPresent={() => {
+          setIsPlaying(true);
+          videoRef.current?.resume();
+        }}
         ref={videoRef}
         resizeMode="contain"
-        reportBandwidth
+        paused={!isPlaying}
       />
     </>
   );

components/downloads/MovieCard.tsx

@@ -13,12 +13,13 @@ import Video, {
   VideoRef,
 } from "react-native-video";
 import * as FileSystem from "expo-file-system";
-import { useMemo, useRef } from "react";
+import { useMemo, useRef, useState } from "react";
 import * as Haptics from "expo-haptics";
 
 export const MovieCard: React.FC<{ item: BaseItemDto }> = ({ item }) => {
   const { deleteFile } = useFiles();
   const videoRef = useRef<VideoRef | null>(null);
+  const [isPlaying, setIsPlaying] = useState(false);
 
   const openFile = () => {
     videoRef.current?.presentFullscreenPlayer();
@@ -45,7 +46,7 @@ export const MovieCard: React.FC<{ item: BaseItemDto }> = ({ item }) => {
         <ContextMenu.Trigger>
           <TouchableOpacity
             onPress={openFile}
-            className="bg-neutral-800 border border-neutral-900 rounded-2xl p-4"
+            className="bg-neutral-900 border border-neutral-800 rounded-2xl p-4"
           >
             <Text className=" font-bold">{item.Name}</Text>
             <View className="flex flex-row items-center justify-between">
@@ -89,9 +90,17 @@ export const MovieCard: React.FC<{ item: BaseItemDto }> = ({ item }) => {
           isNetwork: false,
         }}
         controls
+        onFullscreenPlayerDidDismiss={() => {
+          setIsPlaying(false);
+          videoRef.current?.pause();
+        }}
+        onFullscreenPlayerDidPresent={() => {
+          setIsPlaying(true);
+          videoRef.current?.resume();
+        }}
         ref={videoRef}
         resizeMode="contain"
-        reportBandwidth
+        paused={!isPlaying}
       />
     </>
   );

components/series/CastAndCrew.tsx

@@ -1,4 +1,3 @@
-import { getPrimaryImage } from "@/utils/jellyfin";
 import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
 import React from "react";
 import { TouchableOpacity, View } from "react-native";
@@ -7,6 +6,7 @@ import { Text } from "../common/Text";
 import Poster from "../Poster";
 import { useAtom } from "jotai";
 import { apiAtom } from "@/providers/JellyfinProvider";
+import { getPrimaryImageUrl } from "@/utils/jellyfin/image/getPrimaryImageUrl";
 
 export const CastAndCrew = ({ item }: { item: BaseItemDto }) => {
   const [api] = useAtom(apiAtom);
@@ -17,7 +17,7 @@ export const CastAndCrew = ({ item }: { item: BaseItemDto }) => {
         data={item.People}
         renderItem={(item, index) => (
           <TouchableOpacity key={item.Id} className="flex flex-col w-32">
-            <Poster item={item} url={getPrimaryImage({ api, item })} />
+            <Poster item={item} url={getPrimaryImageUrl({ api, item })} />
             <Text className="mt-2">{item.Name}</Text>
             <Text className="text-xs opacity-50">{item.Role}</Text>
           </TouchableOpacity>

components/series/CurrentSeries.tsx

@@ -1,5 +1,4 @@
 import { apiAtom } from "@/providers/JellyfinProvider";
-import { getPrimaryImage, getPrimaryImageById } from "@/utils/jellyfin";
 import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
 import { router } from "expo-router";
 import { useAtom } from "jotai";
@@ -8,6 +7,7 @@ import { TouchableOpacity, View } from "react-native";
 import Poster from "../Poster";
 import { HorizontalScroll } from "../common/HorrizontalScroll";
 import { Text } from "../common/Text";
+import { getPrimaryImageUrlById } from "@/utils/jellyfin/image/getPrimaryImageUrlById";
 
 export const CurrentSeries = ({ item }: { item: BaseItemDto }) => {
   const [api] = useAtom(apiAtom);
@@ -25,7 +25,7 @@ export const CurrentSeries = ({ item }: { item: BaseItemDto }) => {
           >
             <Poster
               item={item}
-              url={getPrimaryImageById({ api, id: item.ParentId })}
+              url={getPrimaryImageUrlById({ api, id: item.ParentId })}
             />
             <Text>{item.SeriesName}</Text>
           </TouchableOpacity>