fix: episode list

This commit is contained in:
Fredrik Burmester
2025-11-11 09:51:10 +01:00
parent de6c2072c9
commit 222ba13529

View File

@@ -4,6 +4,7 @@ import { FlashList } from "@shopify/flash-list";
import { router, useLocalSearchParams, useNavigation } from "expo-router"; import { router, useLocalSearchParams, useNavigation } from "expo-router";
import { useCallback, useEffect, useMemo, useState } from "react"; import { useCallback, useEffect, useMemo, useState } from "react";
import { Alert, Platform, TouchableOpacity, View } from "react-native"; import { Alert, Platform, TouchableOpacity, View } from "react-native";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import { Text } from "@/components/common/Text"; import { Text } from "@/components/common/Text";
import { EpisodeCard } from "@/components/downloads/EpisodeCard"; import { EpisodeCard } from "@/components/downloads/EpisodeCard";
import { import {
@@ -25,6 +26,7 @@ export default function page() {
{}, {},
); );
const { downloadedItems, deleteItems } = useDownload(); const { downloadedItems, deleteItems } = useDownload();
const insets = useSafeAreaInsets();
const series = useMemo(() => { const series = useMemo(() => {
try { try {
@@ -72,8 +74,9 @@ export default function page() {
}, [seasonGroups]); }, [seasonGroups]);
const seasonIndex = const seasonIndex =
seasonIndexState[series?.[0]?.item?.ParentId ?? ""] || seasonIndexState[series?.[0]?.item?.ParentId ?? ""] ??
episodeSeasonIndex || episodeSeasonIndex ??
series?.[0]?.item?.ParentIndexNumber ??
""; "";
const groupBySeason = useMemo<BaseItemDto[]>(() => { const groupBySeason = useMemo<BaseItemDto[]>(() => {
@@ -82,9 +85,9 @@ export default function page() {
const initialSeasonIndex = useMemo( const initialSeasonIndex = useMemo(
() => () =>
Object.values(groupBySeason)?.[0]?.ParentIndexNumber ?? groupBySeason?.[0]?.ParentIndexNumber ??
series?.[0]?.item?.ParentIndexNumber, series?.[0]?.item?.ParentIndexNumber,
[groupBySeason], [groupBySeason, series],
); );
useEffect(() => { useEffect(() => {
@@ -121,38 +124,57 @@ export default function page() {
); );
}, [groupBySeason, deleteItems]); }, [groupBySeason, deleteItems]);
return ( const ListHeaderComponent = useCallback(() => {
<View style={{ paddingTop: Platform.OS === "android" ? 10 : 0 }}> if (series.length === 0) return null;
{series.length > 0 && (
<View className='flex flex-row items-center justify-start px-4 pb-2'> return (
<SeasonDropdown <View className='flex flex-row items-center justify-start pb-2'>
item={series[0].item} <SeasonDropdown
seasons={uniqueSeasons} item={series[0].item}
state={seasonIndexState} seasons={uniqueSeasons}
initialSeasonIndex={initialSeasonIndex!} state={seasonIndexState}
onSelect={(season) => { initialSeasonIndex={initialSeasonIndex!}
setSeasonIndexState((prev) => ({ onSelect={(season) => {
...prev, setSeasonIndexState((prev) => ({
[series[0].item.ParentId ?? ""]: season.ParentIndexNumber, ...prev,
})); [series[0].item.ParentId ?? ""]: season.ParentIndexNumber,
}} }));
/> }}
<View className='bg-purple-600 rounded-full h-6 w-6 flex items-center justify-center ml-2'> />
<Text className='text-xs font-bold'>{groupBySeason.length}</Text> <View className='bg-purple-600 rounded-full h-6 w-6 flex items-center justify-center ml-2'>
</View> <Text className='text-xs font-bold'>{groupBySeason.length}</Text>
<View className='bg-neutral-800/80 rounded-full h-9 w-9 flex items-center justify-center ml-auto'>
<TouchableOpacity onPress={deleteSeries}>
<Ionicons name='trash' size={20} color='white' />
</TouchableOpacity>
</View>
</View> </View>
)} <View className='bg-neutral-800/80 rounded-full h-9 w-9 flex items-center justify-center ml-auto'>
<TouchableOpacity onPress={deleteSeries}>
<Ionicons name='trash' size={20} color='white' />
</TouchableOpacity>
</View>
</View>
);
}, [
series,
uniqueSeasons,
seasonIndexState,
initialSeasonIndex,
groupBySeason,
deleteSeries,
]);
return (
<View className='flex-1'>
<FlashList <FlashList
key={seasonIndex} key={seasonIndex}
data={groupBySeason} data={groupBySeason}
renderItem={({ item }) => <EpisodeCard item={item} />} renderItem={({ item }) => <EpisodeCard item={item} />}
keyExtractor={(item, index) => item.Id ?? `episode-${index}`} keyExtractor={(item, index) => item.Id ?? `episode-${index}`}
contentContainerStyle={{ paddingHorizontal: 16 }} ListHeaderComponent={ListHeaderComponent}
contentInsetAdjustmentBehavior='automatic'
contentContainerStyle={{
paddingHorizontal: 16,
paddingLeft: insets.left + 16,
paddingRight: insets.right + 16,
paddingTop: Platform.OS === "android" ? 10 : 8,
}}
/> />
</View> </View>
); );