Merge branch 'develop' into sonarqube

components/settings/HomeIndex.tsx

@@ -47,7 +47,6 @@ import {
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { Button } from "@/components/Button";
 import { Text } from "@/components/common/Text";
-import { LargeMovieCarousel } from "@/components/home/LargeMovieCarousel";
 import { ScrollingCollectionList } from "@/components/home/ScrollingCollectionList";
 import { Loader } from "@/components/Loader";
 import { MediaListSection } from "@/components/medialists/MediaListSection";
@@ -58,6 +57,7 @@ import { useDownload } from "@/providers/DownloadProvider";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
 import { useSettings } from "@/utils/atoms/settings";
 import { eventBus } from "@/utils/eventBus";
+import { AppleTVCarousel } from "../AppleTVCarousel";
 
 type ScrollingCollectionListSection = {
   type: "ScrollingCollectionList";
@@ -133,8 +133,11 @@ export const HomeIndex = () => {
   const segments = useSegments() as string[];
   useEffect(() => {
     const unsubscribe = eventBus.on("scrollToTop", () => {
-      if (segments[2] === "(home)")
-        scrollViewRef.current?.scrollTo({ y: -152, animated: true });
+      if ((segments as string[])[2] === "(home)")
+        scrollViewRef.current?.scrollTo({
+          y: Platform.isTV ? -152 : -100,
+          animated: true,
+        });
     });
 
     return () => {
@@ -200,9 +203,9 @@ export const HomeIndex = () => {
             await getUserLibraryApi(api).getLatestMedia({
               userId: user?.Id,
               limit: 20,
-              fields: ["PrimaryImageAspectRatio", "Path"],
+              fields: ["PrimaryImageAspectRatio", "Path", "Genres"],
               imageTypeLimit: 1,
-              enableImageTypes: ["Primary", "Backdrop", "Thumb"],
+              enableImageTypes: ["Primary", "Backdrop", "Thumb", "Logo"],
               includeItemTypes,
               parentId,
             })
@@ -244,8 +247,9 @@ export const HomeIndex = () => {
           (
             await getItemsApi(api).getResumeItems({
               userId: user.Id,
-              enableImageTypes: ["Primary", "Backdrop", "Thumb"],
+              enableImageTypes: ["Primary", "Backdrop", "Thumb", "Logo"],
               includeItemTypes: ["Movie", "Series", "Episode"],
+              fields: ["Genres"],
             })
           ).data.Items || [],
         type: "ScrollingCollectionList",
@@ -258,9 +262,9 @@ export const HomeIndex = () => {
           (
             await getTvShowsApi(api).getNextUp({
               userId: user?.Id,
-              fields: ["MediaSourceCount"],
+              fields: ["MediaSourceCount", "Genres"],
               limit: 20,
-              enableImageTypes: ["Primary", "Backdrop", "Thumb"],
+              enableImageTypes: ["Primary", "Backdrop", "Thumb", "Logo"],
               enableResumable: false,
             })
           ).data.Items || [],
@@ -342,9 +346,9 @@ export const HomeIndex = () => {
           if (section.nextUp) {
             const response = await getTvShowsApi(api).getNextUp({
               userId: user?.Id,
-              fields: ["MediaSourceCount"],
+              fields: ["MediaSourceCount", "Genres"],
               limit: section.nextUp?.limit || 25,
-              enableImageTypes: ["Primary", "Backdrop", "Thumb"],
+              enableImageTypes: ["Primary", "Backdrop", "Thumb", "Logo"],
               enableResumable: section.nextUp?.enableResumable,
               enableRewatching: section.nextUp?.enableRewatching,
             });
@@ -451,44 +455,60 @@ export const HomeIndex = () => {
       scrollToOverflowEnabled={true}
       ref={scrollViewRef}
       nestedScrollEnabled
-      contentInsetAdjustmentBehavior='automatic'
+      contentInsetAdjustmentBehavior='never'
       refreshControl={
-        <RefreshControl refreshing={loading} onRefresh={refetch} />
+        <RefreshControl
+          refreshing={loading}
+          onRefresh={refetch}
+          tintColor='white' // For iOS
+          colors={["white"]} // For Android
+          progressViewOffset={200} // This offsets the refresh indicator to appear over the carousel
+        />
       }
-      contentContainerStyle={{
-        paddingLeft: insets.left,
-        paddingRight: insets.right,
-        paddingBottom: 16,
-      }}
+      style={{ marginTop: Platform.isTV ? 0 : -100 }}
+      contentContainerStyle={{ paddingTop: Platform.isTV ? 0 : 100 }}
     >
-      <View className='flex flex-col space-y-4'>
-        <LargeMovieCarousel />
-
-        {sections.map((section, index) => {
-          if (section.type === "ScrollingCollectionList") {
-            return (
-              <ScrollingCollectionList
-                key={`${section.type}-${section.title || "untitled"}-${index}`}
-                title={section.title}
-                queryKey={section.queryKey}
-                queryFn={section.queryFn}
-                orientation={section.orientation}
-                hideIfEmpty
-              />
-            );
-          }
-          if (section.type === "MediaListSection") {
-            return (
-              <MediaListSection
-                key={`${section.type}-${index}`}
-                queryKey={section.queryKey}
-                queryFn={section.queryFn}
-              />
-            );
-          }
-          return null;
-        })}
+      <AppleTVCarousel
+        initialIndex={0}
+        onItemChange={(index) => {
+          console.log(`Now viewing carousel item ${index}`);
+        }}
+      />
+      <View
+        style={{
+          paddingLeft: insets.left,
+          paddingRight: insets.right,
+          paddingBottom: 16,
+        }}
+      >
+        <View className='flex flex-col space-y-4'>
+          {sections.map((section, index) => {
+            if (section.type === "ScrollingCollectionList") {
+              return (
+                <ScrollingCollectionList
+                  key={index}
+                  title={section.title}
+                  queryKey={section.queryKey}
+                  queryFn={section.queryFn}
+                  orientation={section.orientation}
+                  hideIfEmpty
+                />
+              );
+            }
+            if (section.type === "MediaListSection") {
+              return (
+                <MediaListSection
+                  key={index}
+                  queryKey={section.queryKey}
+                  queryFn={section.queryFn}
+                />
+              );
+            }
+            return null;
+          })}
+        </View>
       </View>
+      <View className='h-24' />
     </ScrollView>
   );
 };

components/settings/LibraryOptionsSheet.tsx

@@ -0,0 +1,254 @@
+import { Ionicons } from "@expo/vector-icons";
+import {
+  BottomSheetBackdrop,
+  type BottomSheetBackdropProps,
+  BottomSheetModal,
+  BottomSheetView,
+} from "@gorhom/bottom-sheet";
+import type React from "react";
+import { useCallback, useEffect, useRef } from "react";
+import { useTranslation } from "react-i18next";
+import {
+  StyleSheet,
+  TouchableOpacity,
+  View,
+  type ViewProps,
+} from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { Text } from "@/components/common/Text";
+
+interface LibraryOptions {
+  display: "row" | "list";
+  imageStyle: "poster" | "cover";
+  showTitles: boolean;
+  showStats: boolean;
+}
+
+interface Props extends ViewProps {
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  settings: LibraryOptions;
+  updateSettings: (options: Partial<LibraryOptions>) => void;
+  disabled?: boolean;
+}
+
+const OptionGroup: React.FC<{ title: string; children: React.ReactNode }> = ({
+  title,
+  children,
+}) => (
+  <View className='mb-6'>
+    <Text className='text-lg font-semibold mb-3 text-neutral-300'>{title}</Text>
+    <View
+      style={{
+        borderRadius: 12,
+        overflow: "hidden",
+      }}
+      className='bg-neutral-800 rounded-xl overflow-hidden'
+    >
+      {children}
+    </View>
+  </View>
+);
+
+const OptionItem: React.FC<{
+  label: string;
+  selected: boolean;
+  onPress: () => void;
+  disabled?: boolean;
+  isLast?: boolean;
+}> = ({ label, selected, onPress, disabled: itemDisabled, isLast }) => (
+  <>
+    <TouchableOpacity
+      onPress={onPress}
+      disabled={itemDisabled}
+      className={`px-4 py-3 flex flex-row items-center justify-between ${
+        itemDisabled ? "opacity-50" : ""
+      }`}
+    >
+      <Text className='flex-1 text-white'>{label}</Text>
+      {selected ? (
+        <Ionicons name='checkmark-circle' size={24} color='#9333ea' />
+      ) : (
+        <Ionicons name='ellipse-outline' size={24} color='#6b7280' />
+      )}
+    </TouchableOpacity>
+    {!isLast && (
+      <View
+        style={{
+          height: StyleSheet.hairlineWidth,
+        }}
+        className='bg-neutral-700 mx-4'
+      />
+    )}
+  </>
+);
+
+const ToggleItem: React.FC<{
+  label: string;
+  value: boolean;
+  onToggle: () => void;
+  disabled?: boolean;
+  isLast?: boolean;
+}> = ({ label, value, onToggle, disabled: itemDisabled, isLast }) => (
+  <>
+    <TouchableOpacity
+      onPress={onToggle}
+      disabled={itemDisabled}
+      className={`px-4 py-3 flex flex-row items-center justify-between ${
+        itemDisabled ? "opacity-50" : ""
+      }`}
+    >
+      <Text className='flex-1 text-white'>{label}</Text>
+      <View
+        className={`w-12 h-7 rounded-full ${value ? "bg-purple-600" : "bg-neutral-600"} flex-row items-center`}
+      >
+        <View
+          className={`w-5 h-5 rounded-full bg-white shadow-md transform transition-transform ${
+            value ? "translate-x-6" : "translate-x-1"
+          }`}
+        />
+      </View>
+    </TouchableOpacity>
+    {!isLast && (
+      <View
+        style={{
+          height: StyleSheet.hairlineWidth,
+        }}
+        className='bg-neutral-700 mx-4'
+      />
+    )}
+  </>
+);
+
+/**
+ * LibraryOptionsSheet Component
+ *
+ * This component creates a bottom sheet modal for managing library display options.
+ */
+export const LibraryOptionsSheet: React.FC<Props> = ({
+  open,
+  setOpen,
+  settings,
+  updateSettings,
+  disabled = false,
+}) => {
+  const bottomSheetModalRef = useRef<BottomSheetModal>(null);
+  const { t } = useTranslation();
+  const insets = useSafeAreaInsets();
+
+  const handlePresentModal = useCallback(() => {
+    bottomSheetModalRef.current?.present();
+  }, []);
+
+  const handleDismissModal = useCallback(() => {
+    bottomSheetModalRef.current?.dismiss();
+  }, []);
+
+  useEffect(() => {
+    if (open) {
+      handlePresentModal();
+    } else {
+      handleDismissModal();
+    }
+  }, [open, handlePresentModal, handleDismissModal]);
+
+  const handleSheetChanges = useCallback(
+    (index: number) => {
+      if (index === -1) {
+        setOpen(false);
+      }
+    },
+    [setOpen],
+  );
+
+  const renderBackdrop = useCallback(
+    (props: BottomSheetBackdropProps) => (
+      <BottomSheetBackdrop
+        {...props}
+        disappearsOnIndex={-1}
+        appearsOnIndex={0}
+      />
+    ),
+    [],
+  );
+
+  if (disabled) return null;
+
+  return (
+    <BottomSheetModal
+      ref={bottomSheetModalRef}
+      enableDynamicSizing
+      onChange={handleSheetChanges}
+      backdropComponent={renderBackdrop}
+      handleIndicatorStyle={{
+        backgroundColor: "white",
+      }}
+      backgroundStyle={{
+        backgroundColor: "#171717",
+      }}
+      enablePanDownToClose
+      enableDismissOnClose
+    >
+      <BottomSheetView>
+        <View
+          className='px-4 pb-8 pt-2'
+          style={{
+            paddingLeft: Math.max(16, insets.left),
+            paddingRight: Math.max(16, insets.right),
+          }}
+        >
+          <Text className='font-bold text-2xl mb-6'>
+            {t("library.options.display")}
+          </Text>
+
+          <OptionGroup title={t("library.options.display")}>
+            <OptionItem
+              label={t("library.options.row")}
+              selected={settings.display === "row"}
+              onPress={() => updateSettings({ display: "row" })}
+            />
+            <OptionItem
+              label={t("library.options.list")}
+              selected={settings.display === "list"}
+              onPress={() => updateSettings({ display: "list" })}
+              isLast
+            />
+          </OptionGroup>
+
+          <OptionGroup title={t("library.options.image_style")}>
+            <OptionItem
+              label={t("library.options.poster")}
+              selected={settings.imageStyle === "poster"}
+              onPress={() => updateSettings({ imageStyle: "poster" })}
+            />
+            <OptionItem
+              label={t("library.options.cover")}
+              selected={settings.imageStyle === "cover"}
+              onPress={() => updateSettings({ imageStyle: "cover" })}
+              isLast
+            />
+          </OptionGroup>
+
+          <OptionGroup title='Options'>
+            <ToggleItem
+              label={t("library.options.show_titles")}
+              value={settings.showTitles}
+              onToggle={() =>
+                updateSettings({ showTitles: !settings.showTitles })
+              }
+              disabled={settings.imageStyle === "poster"}
+            />
+            <ToggleItem
+              label={t("library.options.show_stats")}
+              value={settings.showStats}
+              onToggle={() =>
+                updateSettings({ showStats: !settings.showStats })
+              }
+              isLast
+            />
+          </OptionGroup>
+        </View>
+      </BottomSheetView>
+    </BottomSheetModal>
+  );
+};