mirror of
https://github.com/streamyfin/streamyfin.git
synced 2026-06-18 11:50:26 +01:00
fix: episode list
This commit is contained in:
@@ -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>
|
||||||
);
|
);
|
||||||
|
|||||||
Reference in New Issue
Block a user