355 lines
11 KiB
TypeScript
355 lines
11 KiB
TypeScript
import styles from "@/app/tabStyles/indexStyles";
|
||
import ShowCard from "@/components/ui/ShowCard";
|
||
import { useShows } from "@/hooks/useShows";
|
||
import { useStreamingServices } from "@/hooks/useStreamingServices";
|
||
import Feather from "@expo/vector-icons/Feather";
|
||
import * as Haptics from "expo-haptics";
|
||
import { router } from "expo-router";
|
||
import React from "react";
|
||
import {
|
||
ActivityIndicator,
|
||
Image,
|
||
RefreshControl,
|
||
ScrollView as RNScrollView,
|
||
Text,
|
||
TouchableOpacity,
|
||
View,
|
||
} from "react-native";
|
||
import {
|
||
GestureHandlerRootView,
|
||
ScrollView, // horizontaler ScrollView bleibt aus RNGH
|
||
} from "react-native-gesture-handler";
|
||
|
||
export default function HomeScreen() {
|
||
const {
|
||
data: shows = [],
|
||
error,
|
||
isLoading: loading,
|
||
refetch: refetchShows, // ⬅️ refetch aus Hook
|
||
} = useShows();
|
||
|
||
const {
|
||
data: streamingServices = {},
|
||
refetch: refetchServices, // ⬅️ refetch aus Hook
|
||
} = useStreamingServices();
|
||
|
||
const [activeFilter, setActiveFilter] = React.useState<string>("all");
|
||
const [refreshing, setRefreshing] = React.useState(false); // ⬅️ UI-State für Pull-to-Refresh
|
||
|
||
const haptikFeedback = () => {
|
||
Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
|
||
};
|
||
|
||
const handleFilter = (type: string) => {
|
||
haptikFeedback();
|
||
if (type === activeFilter) {
|
||
setActiveFilter("all");
|
||
} else {
|
||
setActiveFilter(type);
|
||
}
|
||
};
|
||
|
||
// ⬅️ Pull-to-Refresh Handler
|
||
const onRefresh = React.useCallback(async () => {
|
||
haptikFeedback();
|
||
setRefreshing(true);
|
||
try {
|
||
await Promise.all([
|
||
typeof refetchShows === "function" ? refetchShows() : Promise.resolve(),
|
||
typeof refetchServices === "function" ? refetchServices() : Promise.resolve(),
|
||
]);
|
||
} finally {
|
||
setRefreshing(false);
|
||
}
|
||
}, [refetchShows, refetchServices]);
|
||
|
||
const filteredShows = React.useMemo(() => {
|
||
if (activeFilter === "all") {
|
||
return shows;
|
||
}
|
||
if (activeFilter === "live") {
|
||
return shows.filter((show) => show.running);
|
||
}
|
||
return shows.filter((show) =>
|
||
show.streamingService
|
||
.split(",")
|
||
.map((s) => s.trim())
|
||
.includes(activeFilter)
|
||
);
|
||
}, [shows, activeFilter]);
|
||
|
||
const uniqueStreamingServices = React.useMemo(() => {
|
||
const uniqueServices = new Set<string>();
|
||
shows.forEach((show) => {
|
||
const services = show.streamingService.split(", ").map((s) => s.trim());
|
||
services.forEach((service) => uniqueServices.add(service));
|
||
});
|
||
return Array.from(uniqueServices);
|
||
}, [shows]);
|
||
|
||
if (loading) {
|
||
return (
|
||
<View
|
||
style={[
|
||
styles.mainContainer,
|
||
{ justifyContent: "center", alignItems: "center" },
|
||
]}
|
||
>
|
||
<ActivityIndicator size="large" color="#ffffff" />
|
||
</View>
|
||
);
|
||
}
|
||
|
||
if (error) {
|
||
return (
|
||
<View
|
||
style={[
|
||
styles.mainContainer,
|
||
{ justifyContent: "center", alignItems: "center", padding: 20 },
|
||
]}
|
||
>
|
||
<View
|
||
style={{
|
||
alignItems: "center",
|
||
gap: 12,
|
||
backgroundColor: "rgba(255,255,255,0.05)",
|
||
paddingVertical: 24,
|
||
paddingHorizontal: 20,
|
||
borderRadius: 12,
|
||
width: "85%",
|
||
}}
|
||
>
|
||
<Text style={{ fontSize: 36 }}>⚠️</Text>
|
||
<Text
|
||
style={{
|
||
fontSize: 18,
|
||
fontWeight: "600",
|
||
color: "white",
|
||
textAlign: "center",
|
||
}}
|
||
>
|
||
Fehler beim Laden
|
||
</Text>
|
||
<Text
|
||
style={{
|
||
fontSize: 14,
|
||
color: "rgba(255,255,255,0.6)",
|
||
textAlign: "center",
|
||
}}
|
||
>
|
||
{error?.message || "Ein unerwarteter Fehler ist aufgetreten."}
|
||
</Text>
|
||
|
||
<TouchableOpacity
|
||
onPress={() => {
|
||
if (typeof refetchShows === "function") refetchShows();
|
||
if (typeof refetchServices === "function") refetchServices();
|
||
}}
|
||
style={{
|
||
marginTop: 6,
|
||
backgroundColor: "rgba(255,255,255,0.15)",
|
||
paddingVertical: 10,
|
||
paddingHorizontal: 18,
|
||
borderRadius: 8,
|
||
}}
|
||
>
|
||
<Text style={{ color: "white", fontWeight: "600" }}>Erneut versuchen</Text>
|
||
</TouchableOpacity>
|
||
</View>
|
||
</View>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<GestureHandlerRootView>
|
||
<View style={styles.mainContainer}>
|
||
<View style={styles.header}>
|
||
<TouchableOpacity
|
||
onPress={() => {
|
||
haptikFeedback();
|
||
router.push("/legal");
|
||
}}
|
||
style={{
|
||
position: "absolute",
|
||
left: 16,
|
||
top: "63%",
|
||
transform: [{ translateY: -12 }],
|
||
height: 40,
|
||
width: 40,
|
||
alignItems: "center",
|
||
justifyContent: "center",
|
||
borderRadius: 10,
|
||
backgroundColor: "rgba(255,255,255,0.06)",
|
||
}}
|
||
accessibilityRole="button"
|
||
accessibilityLabel="Menü öffnen"
|
||
>
|
||
<Feather name="menu" size={22} color="#FFFFFF" />
|
||
</TouchableOpacity>
|
||
|
||
<Text style={styles.title}>FLTR</Text>
|
||
</View>
|
||
|
||
|
||
<RNScrollView
|
||
contentContainerStyle={{ paddingBottom: 30 }}
|
||
showsVerticalScrollIndicator={false}
|
||
refreshControl={
|
||
<RefreshControl
|
||
refreshing={refreshing}
|
||
onRefresh={onRefresh}
|
||
tintColor="#FFFFFF" // iOS Spinner
|
||
colors={["#FFFFFF"]} // Android Spinner
|
||
progressBackgroundColor="hsla(0, 0%, 29%, 1.00)"
|
||
/>
|
||
}
|
||
>
|
||
<View style={styles.filterSection}>
|
||
{/* ⬅️ HORIZONTALER SCROLLBEREICH BLEIBT AUS RNGH */}
|
||
<ScrollView
|
||
horizontal
|
||
showsHorizontalScrollIndicator={false}
|
||
contentContainerStyle={{
|
||
alignItems: "center",
|
||
paddingHorizontal: 10,
|
||
gap: 10,
|
||
marginLeft: 10,
|
||
}}
|
||
>
|
||
{activeFilter !== "all" && (
|
||
<TouchableOpacity
|
||
style={{
|
||
padding: 5,
|
||
height: 60,
|
||
width: 60,
|
||
alignItems: "center",
|
||
justifyContent: "center",
|
||
backgroundColor: "hsla(0, 0%, 29%, 1.00)",
|
||
borderRadius: 50,
|
||
}}
|
||
onPress={() => handleFilter("all")}
|
||
>
|
||
<Text style={{ fontWeight: "bold", color: "white" }}>
|
||
ALLE
|
||
</Text>
|
||
</TouchableOpacity>
|
||
)}
|
||
{activeFilter !== "live" && (
|
||
<TouchableOpacity
|
||
style={{
|
||
padding: 5,
|
||
height: 60,
|
||
width: 60,
|
||
alignItems: "center",
|
||
justifyContent: "center",
|
||
backgroundColor: "hsla(0, 0%, 29%, 1.00)",
|
||
borderRadius: 50,
|
||
}}
|
||
onPress={() => handleFilter("live")}
|
||
>
|
||
<View
|
||
style={{
|
||
backgroundColor: "red",
|
||
paddingHorizontal: 5,
|
||
paddingVertical: 2,
|
||
borderRadius: 5,
|
||
}}
|
||
>
|
||
<Text style={{ fontWeight: "bold", color: "white" }}>
|
||
LIVE
|
||
</Text>
|
||
</View>
|
||
</TouchableOpacity>
|
||
)}
|
||
|
||
<View
|
||
style={{
|
||
height: 60,
|
||
width: 2,
|
||
backgroundColor: "hsla(0, 0%, 37%, 1.00)",
|
||
marginHorizontal: 5,
|
||
borderRadius: 5,
|
||
}}
|
||
/>
|
||
|
||
{uniqueStreamingServices.map((serviceName) => {
|
||
const streamingService =
|
||
streamingServices[
|
||
`assets.images.streamingServices.${serviceName.toLowerCase()}`
|
||
];
|
||
return (
|
||
<TouchableOpacity
|
||
key={serviceName}
|
||
style={{
|
||
padding: 5,
|
||
backgroundColor: "hsla(0, 0%, 29%, 1.00)",
|
||
borderRadius: 50,
|
||
borderWidth: serviceName.includes(activeFilter) ? 2 : 0,
|
||
borderColor: "hsla(0, 100%, 50%, 1.00)",
|
||
}}
|
||
onPress={() => handleFilter(serviceName)}
|
||
>
|
||
<Image
|
||
source={{ uri: streamingService }}
|
||
style={{
|
||
width: 50,
|
||
height: 50,
|
||
borderRadius: 30,
|
||
resizeMode: "contain",
|
||
}}
|
||
/>
|
||
</TouchableOpacity>
|
||
);
|
||
})}
|
||
</ScrollView>
|
||
</View>
|
||
|
||
<View style={{ flex: 1, paddingHorizontal: 10 }}>
|
||
{filteredShows.map((show) => {
|
||
const showLiveBadge = show.running;
|
||
return (
|
||
<ShowCard
|
||
key={show.id}
|
||
title={show.title}
|
||
onPress={() =>
|
||
router.push({
|
||
pathname: "/showDetails",
|
||
params: {
|
||
id: String(show.id),
|
||
title: show.title,
|
||
bannerUri: show.bannerUri,
|
||
description: show.description,
|
||
concept: show.concept,
|
||
genres: show.genres,
|
||
streamingService: show.streamingService,
|
||
logoUri: show.logoUrl,
|
||
running: String(show.running),
|
||
},
|
||
})
|
||
}
|
||
imageUri={show.bannerUri}
|
||
streamingServicesUris={show.streamingService
|
||
.split(", ")
|
||
.map(
|
||
(s) =>
|
||
streamingServices[
|
||
`assets.images.streamingServices.${s.toLowerCase()}`
|
||
]
|
||
)}
|
||
genres={show.genres}
|
||
{...(showLiveBadge
|
||
? {
|
||
liveBadgeText: "LIVE",
|
||
liveBadgeContainerStyle: styles.liveBadgeContainer,
|
||
}
|
||
: {})}
|
||
/>
|
||
);
|
||
})}
|
||
</View>
|
||
</RNScrollView>
|
||
</View>
|
||
</GestureHandlerRootView>
|
||
);
|
||
}
|