forked from Ninjalama/streamyfin_mirror
113 lines
3.4 KiB
TypeScript
113 lines
3.4 KiB
TypeScript
import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
|
|
import * as Haptics from "@/packages/expo-haptics";
|
|
import React, { useCallback, useMemo } from "react";
|
|
import { TouchableOpacity, TouchableOpacityProps, View } from "react-native";
|
|
import {
|
|
ActionSheetProvider,
|
|
useActionSheet,
|
|
} from "@expo/react-native-action-sheet";
|
|
|
|
import { useDownloadedFileOpener } from "@/hooks/useDownloadedFileOpener";
|
|
import { useDownload } from "@/providers/DownloadProvider";
|
|
import { storage } from "@/utils/mmkv";
|
|
import { Image } from "expo-image";
|
|
import { Ionicons } from "@expo/vector-icons";
|
|
import { Text } from "@/components/common/Text";
|
|
import { runtimeTicksToSeconds } from "@/utils/time";
|
|
import { DownloadSize } from "@/components/downloads/DownloadSize";
|
|
import { TouchableItemRouter } from "../common/TouchableItemRouter";
|
|
import ContinueWatchingPoster from "../ContinueWatchingPoster";
|
|
|
|
interface EpisodeCardProps extends TouchableOpacityProps {
|
|
item: BaseItemDto;
|
|
}
|
|
|
|
export const EpisodeCard: React.FC<EpisodeCardProps> = ({ item, ...props }) => {
|
|
const { deleteFile } = useDownload();
|
|
const { openFile } = useDownloadedFileOpener();
|
|
const { showActionSheetWithOptions } = useActionSheet();
|
|
|
|
const base64Image = useMemo(() => {
|
|
return storage.getString(item.Id!);
|
|
}, [item]);
|
|
|
|
const handleOpenFile = useCallback(() => {
|
|
openFile(item);
|
|
}, [item, openFile]);
|
|
|
|
/**
|
|
* Handles deleting the file with haptic feedback.
|
|
*/
|
|
const handleDeleteFile = useCallback(() => {
|
|
if (item.Id) {
|
|
deleteFile(item.Id);
|
|
Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success);
|
|
}
|
|
}, [deleteFile, item.Id]);
|
|
|
|
const showActionSheet = useCallback(() => {
|
|
const options = ["Delete", "Cancel"];
|
|
const destructiveButtonIndex = 0;
|
|
const cancelButtonIndex = 1;
|
|
|
|
showActionSheetWithOptions(
|
|
{
|
|
options,
|
|
cancelButtonIndex,
|
|
destructiveButtonIndex,
|
|
},
|
|
(selectedIndex) => {
|
|
switch (selectedIndex) {
|
|
case destructiveButtonIndex:
|
|
// Delete
|
|
handleDeleteFile();
|
|
break;
|
|
case cancelButtonIndex:
|
|
// Cancelled
|
|
break;
|
|
}
|
|
}
|
|
);
|
|
}, [showActionSheetWithOptions, handleDeleteFile]);
|
|
|
|
return (
|
|
<TouchableOpacity
|
|
onPress={handleOpenFile}
|
|
onLongPress={showActionSheet}
|
|
key={item.Id}
|
|
className="flex flex-col mb-4"
|
|
>
|
|
<View className="flex flex-row items-start mb-2">
|
|
<View className="mr-2">
|
|
<ContinueWatchingPoster size="small" item={item} useEpisodePoster />
|
|
</View>
|
|
<View className="shrink">
|
|
<Text numberOfLines={2} className="">
|
|
{item.Name}
|
|
</Text>
|
|
<Text numberOfLines={1} className="text-xs text-neutral-500">
|
|
{`S${item.ParentIndexNumber?.toString()}:E${item.IndexNumber?.toString()}`}
|
|
</Text>
|
|
<Text className="text-xs text-neutral-500">
|
|
{runtimeTicksToSeconds(item.RunTimeTicks)}
|
|
</Text>
|
|
<DownloadSize items={[item]} />
|
|
</View>
|
|
</View>
|
|
|
|
<Text numberOfLines={3} className="text-xs text-neutral-500 shrink">
|
|
{item.Overview}
|
|
</Text>
|
|
</TouchableOpacity>
|
|
);
|
|
};
|
|
|
|
// Wrap the parent component with ActionSheetProvider
|
|
export const EpisodeCardWithActionSheet: React.FC<EpisodeCardProps> = (
|
|
props
|
|
) => (
|
|
<ActionSheetProvider>
|
|
<EpisodeCard {...props} />
|
|
</ActionSheetProvider>
|
|
);
|