chore: small fixes

app/(auth)/(tabs)/(home,libraries,search)/livetv/programs.tsx

@@ -1,17 +1,13 @@
-import { Text } from "@/components/common/Text";
 import { ScrollingCollectionList } from "@/components/home/ScrollingCollectionList";
 import { TAB_HEIGHT } from "@/constants/Values";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
 import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
 import { getLiveTvApi } from "@jellyfin/sdk/lib/utils/api";
-import { useQuery } from "@tanstack/react-query";
 import { useAtom } from "jotai";
 import React from "react";
 import {
-  RefreshControl,
   ScrollView,
-  SectionListComponent,
-  View,
+  View
 } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 

app/(auth)/(tabs)/(home,libraries,search)/livetv/recordings.tsx

@@ -4,8 +4,8 @@ import { View } from "react-native";
 
 export default function page() {
   return (
-    <View>
-      <Text>Not implemented</Text>
+    <View className="flex items-center justify-center h-full -mt-12">
+      <Text>Coming soon</Text>
     </View>
   );
 }

components/ContinueWatchingPoster.tsx

@@ -48,9 +48,18 @@ const ContinueWatchingPoster: React.FC<ContinueWatchingPosterProps> = ({
     }
   }, [item]);
 
-  const [progress, setProgress] = useState(
-    item.UserData?.PlayedPercentage || 0
-  );
+  const progress = useMemo(() => {
+    if (item.Type === "Program") {
+      const startDate = new Date(item.StartDate || "");
+      const endDate = new Date(item.EndDate || "");
+      const now = new Date();
+      const total = endDate.getTime() - startDate.getTime();
+      const elapsed = now.getTime() - startDate.getTime();
+      return (elapsed / total) * 100;
+    } else {
+      return item.UserData?.PlayedPercentage || 0;
+    }
+  }, []);
 
   if (!url)
     return (

components/ItemContent.tsx

@@ -248,8 +248,8 @@ export const ItemContent: React.FC<{ item: BaseItemDto }> = React.memo(
         >
           <View className="flex flex-col bg-transparent shrink">
             <View className="flex flex-col px-4 w-full space-y-2 pt-2 mb-2 shrink">
-              <Animated.View style={[{ flex: 1 }]}>
-                <ItemHeader item={item} className="mb-4" />
+              <ItemHeader item={item} className="mb-4" />
+              {item.Type !== "Program" && (
                 <View className="flex flex-row items-center justify-start w-full h-16">
                   <BitrateSelector
                     className="mr-1"
@@ -278,7 +278,7 @@ export const ItemContent: React.FC<{ item: BaseItemDto }> = React.memo(
                     </>
                   )}
                 </View>
-              </Animated.View>
+              )}
 
               <PlayButton item={item} url={playbackUrl} className="grow" />
             </View>
@@ -288,28 +288,31 @@ export const ItemContent: React.FC<{ item: BaseItemDto }> = React.memo(
             )}
 
             <OverviewText text={item.Overview} className="px-4 my-4" />
+            {item.Type !== "Program" && (
+              <>
+                <CastAndCrew item={item} className="mb-4" loading={loading} />
 
-            <CastAndCrew item={item} className="mb-4" loading={loading} />
+                {item.People && item.People.length > 0 && (
+                  <View className="mb-4">
+                    {item.People.slice(0, 3).map((person) => (
+                      <MoreMoviesWithActor
+                        currentItem={item}
+                        key={person.Id}
+                        actorId={person.Id!}
+                        className="mb-4"
+                      />
+                    ))}
+                  </View>
+                )}
 
-            {item.People && item.People.length > 0 && (
-              <View className="mb-4">
-                {item.People.slice(0, 3).map((person) => (
-                  <MoreMoviesWithActor
-                    currentItem={item}
-                    key={person.Id}
-                    actorId={person.Id!}
-                    className="mb-4"
-                  />
-                ))}
-              </View>
+                {item.Type === "Episode" && (
+                  <CurrentSeries item={item} className="mb-4" />
+                )}
+
+                <SimilarItems itemId={item.Id} />
+              </>
             )}
 
-            {item.Type === "Episode" && (
-              <CurrentSeries item={item} className="mb-4" />
-            )}
-
-            <SimilarItems itemId={item.Id} />
-
             <View className="h-16"></View>
           </View>
         </ParallaxScrollView>

components/livetv/HourHeader.tsx

@@ -23,7 +23,7 @@ export const HourHeader = ({ height }: { height: number }) => {
 };
 
 const HourCell = ({ hour }: { hour: Date }) => (
-  <View className="w-[200px] flex items-center justify-center border-r border-gray-300">
+  <View className="w-[200px] flex items-center justify-center bg-neutral-800">
     <Text className="text-xs text-gray-600">
       {hour.toLocaleTimeString([], {
         hour: "2-digit",

components/livetv/LiveTVGuideRow.tsx

@@ -8,10 +8,12 @@ export const LiveTVGuideRow = ({
   channel,
   programs,
   scrollX = 0,
+  isVisible = true,
 }: {
   channel: BaseItemDto;
   programs?: BaseItemDto[] | null;
   scrollX?: number;
+  isVisible?: boolean;
 }) => {
   const positionRefs = useRef<{ [key: string]: number }>({});
   const screenWidth = Dimensions.get("window").width;
@@ -46,6 +48,10 @@ export const LiveTVGuideRow = ({
     return now >= start && now <= end;
   };
 
+  if (!isVisible) {
+    return <View style={{ height: 64 }} />;
+  }
+
   return (
     <View key={channel.ChannelNumber} className="flex flex-row h-16">
       {programsWithPositions?.map((p) => (

package.json

@@ -18,6 +18,7 @@
     "@config-plugins/ffmpeg-kit-react-native": "^8.0.0",
     "@expo/react-native-action-sheet": "^4.1.0",
     "@expo/vector-icons": "^14.0.3",
+    "@futurejj/react-native-visibility-sensor": "^1.3.4",
     "@gorhom/bottom-sheet": "^4",
     "@jellyfin/sdk": "^0.10.0",
     "@kesha-antonov/react-native-background-downloader": "^3.2.1",