merge develop

components/common/Dropdown.tsx

@@ -0,0 +1,108 @@
+import * as DropdownMenu from "zeego/dropdown-menu";
+import {TouchableOpacity, View, ViewProps} from "react-native";
+import {Text} from "@/components/common/Text";
+import React, {PropsWithChildren, ReactNode, useEffect, useState} from "react";
+import DisabledSetting from "@/components/settings/DisabledSetting";
+
+interface Props<T> {
+  data: T[]
+  disabled?: boolean
+  placeholderText?: string,
+  keyExtractor: (item: T) => string
+  titleExtractor: (item: T) => string | undefined
+  title: string | ReactNode,
+  label: string,
+  onSelected: (...item: T[]) => void
+  multi?: boolean
+}
+
+const Dropdown =  <T extends unknown>({
+  data,
+  disabled,
+  placeholderText,
+  keyExtractor,
+  titleExtractor,
+  title,
+  label,
+  onSelected,
+  multi = false,
+  ...props
+}: PropsWithChildren<Props<T> & ViewProps>) => {
+  const [selected, setSelected] = useState<T[]>();
+
+  useEffect(() => {
+    if (selected !== undefined) {
+      onSelected(...selected)
+    }
+  }, [selected]);
+
+  return (
+    <DisabledSetting
+      disabled={disabled === true}
+      showText={false}
+      {...props}
+    >
+      <DropdownMenu.Root>
+        <DropdownMenu.Trigger>
+          {typeof title === 'string' ? (
+            <View className="flex flex-col">
+              <Text className="opacity-50 mb-1 text-xs">
+                {title}
+              </Text>
+              <TouchableOpacity
+                className="bg-neutral-900 h-10 rounded-xl border-neutral-800 border px-3 py-2 flex flex-row items-center justify-between">
+                <Text style={{}} className="" numberOfLines={1}>
+                  {selected?.length !== undefined ? selected.map(titleExtractor).join(",") : placeholderText}
+                </Text>
+              </TouchableOpacity>
+            </View>
+          ) : (
+            <>
+              {title}
+            </>
+          )}
+        </DropdownMenu.Trigger>
+        <DropdownMenu.Content
+          loop={false}
+          side="bottom"
+          align="center"
+          alignOffset={0}
+          avoidCollisions={true}
+          collisionPadding={0}
+          sideOffset={0}
+        >
+          <DropdownMenu.Label>{label}</DropdownMenu.Label>
+          {data.map((item, idx) => (
+            multi ? (
+                <DropdownMenu.CheckboxItem
+                  value={selected?.some(s => keyExtractor(s) == keyExtractor(item)) ? 'on' : 'off'}
+                  key={keyExtractor(item)}
+                  onValueChange={(next, previous) =>
+                    setSelected((p) => {
+                      const prev = p || []
+                      if (next == 'on') {
+                        return [...prev, item]
+                      }
+                      return [...prev.filter(p => keyExtractor(p) !== keyExtractor(item))]
+                    })
+                  }
+                >
+                  <DropdownMenu.ItemTitle>{titleExtractor(item)}</DropdownMenu.ItemTitle>
+                </DropdownMenu.CheckboxItem>
+              )
+              : (
+                <DropdownMenu.Item
+                  key={keyExtractor(item)}
+                  onSelect={() => setSelected([item])}
+                >
+                  <DropdownMenu.ItemTitle>{titleExtractor(item)}</DropdownMenu.ItemTitle>
+                </DropdownMenu.Item>
+              )
+          ))}
+        </DropdownMenu.Content>
+      </DropdownMenu.Root>
+    </DisabledSetting>
+  )
+};
+
+export default Dropdown;

components/common/InfiniteHorrizontalScroll.tsx

@@ -15,6 +15,7 @@ import Animated, {
 } from "react-native-reanimated";
 import { Loader } from "../Loader";
 import { Text } from "./Text";
+import { t } from "i18next";
 
 interface HorizontalScrollProps
   extends Omit<FlashListProps<BaseItemDto>, "renderItem" | "data" | "style"> {
@@ -136,7 +137,7 @@ export function InfiniteHorizontalScroll({
         showsHorizontalScrollIndicator={false}
         ListEmptyComponent={
           <View className="flex-1 justify-center items-center">
-            <Text className="text-center text-gray-500">No data available</Text>
+            <Text className="text-center text-gray-500">{t("item_card.no_data_available")}</Text>
           </View>
         }
         {...props}

components/common/Input.tsx

@@ -7,7 +7,7 @@ export function Input(props: TextInputProps) {
   return (
     <TextInput
       ref={inputRef}
-      className="p-4 border border-neutral-800 rounded-xl bg-neutral-900"
+      className="p-4  rounded-xl bg-neutral-900"
       allowFontScaling={false}
       style={[{ color: "white" }, style]}
       placeholderTextColor={"#9CA3AF"}

components/common/TouchableItemRouter.tsx

@@ -1,13 +1,13 @@
 import { useMarkAsPlayed } from "@/hooks/useMarkAsPlayed";
-import { Platform } from "react-native";
 import {
   BaseItemDto,
   BaseItemPerson,
 } from "@jellyfin/sdk/lib/generated-client/models";
 import { useRouter, useSegments } from "expo-router";
-import { PropsWithChildren } from "react";
+import { PropsWithChildren, useCallback } from "react";
 import { TouchableOpacity, TouchableOpacityProps } from "react-native";
-import * as ContextMenu from "@/components/ContextMenu";
+import { useActionSheet } from "@expo/react-native-action-sheet";
+import * as Haptics from "expo-haptics";
 
 interface Props extends TouchableOpacityProps {
   item: BaseItemDto;
@@ -17,8 +17,6 @@ export const itemRouter = (
   item: BaseItemDto | BaseItemPerson,
   from: string
 ) => {
-  console.log(item.Type, item?.CollectionType);
-
   if ("CollectionType" in item && item.CollectionType === "livetv") {
     return `/(auth)/(tabs)/${from}/livetv`;
   }
@@ -57,10 +55,33 @@ export const TouchableItemRouter: React.FC<PropsWithChildren<Props>> = ({
 }) => {
   const router = useRouter();
   const segments = useSegments();
+  const { showActionSheetWithOptions } = useActionSheet();
+  const markAsPlayedStatus = useMarkAsPlayed([item]);
 
   const from = segments[2];
 
-  const markAsPlayedStatus = useMarkAsPlayed(item);
+  const showActionSheet = useCallback(() => {
+    if (!(item.Type === "Movie" || item.Type === "Episode")) return;
+
+    const options = ["Mark as Played", "Mark as Not Played", "Cancel"];
+    const cancelButtonIndex = 2;
+
+    showActionSheetWithOptions(
+      {
+        options,
+        cancelButtonIndex,
+      },
+      async (selectedIndex) => {
+        if (selectedIndex === 0) {
+          await markAsPlayedStatus(true);
+          Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success);
+        } else if (selectedIndex === 1) {
+          await markAsPlayedStatus(false);
+          Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success);
+        }
+      }
+    );
+  }, [showActionSheetWithOptions, markAsPlayedStatus]);
 
   if (
     from === "(home)" ||
@@ -68,94 +89,17 @@ export const TouchableItemRouter: React.FC<PropsWithChildren<Props>> = ({
     from === "(libraries)" ||
     from === "(favorites)"
   )
-    if (Platform.isTV) {
-      return (
-        <TouchableOpacity
-          onPress={() => {
-            const url = itemRouter(item, from);
-            // @ts-ignore
-            router.push(url);
-          }}
-          {...props}
-        >
-          {children}
-        </TouchableOpacity>
-      );
-    } else {
-      return (
-        <ContextMenu.Root>
-          <ContextMenu.Trigger>
-            <TouchableOpacity
-              onPress={() => {
-                const url = itemRouter(item, from);
-                // @ts-ignore
-                router.push(url);
-              }}
-              {...props}
-            >
-              {children}
-            </TouchableOpacity>
-          </ContextMenu.Trigger>
-          <ContextMenu.Content
-            avoidCollisions
-            alignOffset={0}
-            collisionPadding={0}
-            loop={false}
-            key={"content"}
-          >
-            <ContextMenu.Label key="label-1">Actions</ContextMenu.Label>
-            <ContextMenu.Item
-              key="item-1"
-              onSelect={() => {
-                markAsPlayedStatus(true);
-              }}
-              shouldDismissMenuOnSelect
-            >
-              <ContextMenu.ItemTitle key="item-1-title">
-                Mark as watched
-              </ContextMenu.ItemTitle>
-              <ContextMenu.ItemIcon
-                ios={{
-                  name: "checkmark.circle", // Changed to "checkmark.circle" which represents "watched"
-                  pointSize: 18,
-                  weight: "semibold",
-                  scale: "medium",
-                  hierarchicalColor: {
-                    dark: "green", // Changed to green for "watched"
-                    light: "green",
-                  },
-                }}
-                androidIconName="checkmark-circle"
-              ></ContextMenu.ItemIcon>
-            </ContextMenu.Item>
-            <ContextMenu.Item
-              key="item-2"
-              onSelect={() => {
-                markAsPlayedStatus(false);
-              }}
-              shouldDismissMenuOnSelect
-              destructive
-            >
-              <ContextMenu.ItemTitle key="item-2-title">
-                Mark as not watched
-              </ContextMenu.ItemTitle>
-              <ContextMenu.ItemIcon
-                ios={{
-                  name: "eye.slash", // Changed to "eye.slash" which represents "not watched"
-                  pointSize: 18, // Adjusted for better visibility
-                  weight: "semibold",
-                  scale: "medium",
-                  hierarchicalColor: {
-                    dark: "red", // Changed to red for "not watched"
-                    light: "red",
-                  },
-                  // Removed paletteColors as it's not necessary in this case
-                }}
-                androidIconName="eye-slash"
-              ></ContextMenu.ItemIcon>
-            </ContextMenu.Item>
-          </ContextMenu.Content>
-        </ContextMenu.Root>
-      );
-    }
+    return (
+      <TouchableOpacity
+        onLongPress={showActionSheet}
+        onPress={() => {
+          const url = itemRouter(item, from);
+          // @ts-expect-error
+          router.push(url);
+        }}
+        {...props}
+      >
+        {children}
+      </TouchableOpacity>
+    );
 };