Cron1cle/fltr-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

filter, haptik, background

Browse Source
This commit is contained in:
DevOFVictory
2025-10-28 22:42:19 +01:00
parent 6b39579c75
commit 21cd6c3241
8 changed files with 145 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

133
app/(tabs)/index.tsx
View File

@@ -2,6 +2,7 @@ import styles from "@/app/tabStyles/indexStyles";
import ShowCard from "@/components/ui/ShowCard";
import { useShowContext } from "@/contexts/ShowContext";
import { useStreamingServiceContext } from "@/contexts/StreamingServiceContext";
import * as Haptics from 'expo-haptics';
import { router } from "expo-router";
import React from "react";
import {
@@ -22,12 +23,19 @@ export default function HomeScreen() {
const [filteredShows, setFilteredShows] = React.useState(shows);
const [activeFilter, setActiveFilter] = React.useState<string>("all");
const haptikFeedback = () => {
Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
}
React.useEffect(() => {
setFilteredShows(shows);
}, [shows]);
const handleFilter = (type: string) => {
haptikFeedback();
setActiveFilter(type);
if (type === "all") {
setFilteredShows(shows);
return;
@@ -39,12 +47,26 @@ export default function HomeScreen() {
return;
}
const filtered = shows.filter((show) => show.streamingService === type);
if (type === activeFilter) {
setFilteredShows(shows);
setActiveFilter('all');
return;
}
const filtered = shows.filter((show) =>
show.streamingService.split(',').map(s => s.trim()).includes(type)
);
setFilteredShows(filtered);
};
const uniqueStreamingServices = React.useMemo(() => {
const uniqueServices = new Set(shows.map((show) => show.streamingService));
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]);
@@ -95,48 +117,61 @@ export default function HomeScreen() {
{activeFilter !== "all" && (
<TouchableOpacity
style={{
padding: 2,
height: 50,
width: 50,
padding: 5,
height: 60,
width: 60,
alignItems: "center",
justifyContent: "center",
backgroundColor: "hsl(221, 39%, 80%)",
backgroundColor: "hsla(0, 0%, 29%, 1.00)",
borderRadius: 50,
}}
onPress={() => handleFilter("all")}
>
<Text>ALLE</Text>
<Text style={{fontWeight: 'bold', color: 'white'}}>ALLE</Text>
</TouchableOpacity>
)}
{activeFilter !== "live" && (
<TouchableOpacity
style={{
padding: 2,
height: 50,
width: 50,
padding: 5,
height: 60,
width: 60,
alignItems: "center",
justifyContent: "center",
backgroundColor: "hsl(221, 39%, 80%)",
backgroundColor: "hsla(0, 0%, 29%, 1.00)",
borderRadius: 50,
}}
onPress={() => handleFilter("live")}
>
<Text>LIVE</Text>
<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()}`
`assets.images.streamingServices.${serviceName.toLowerCase()}`
];
return (
<TouchableOpacity
key={serviceName}
style={{
padding: 2,
backgroundColor: "hsl(221, 39%, 80%)",
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)}
>
@@ -154,45 +189,43 @@ export default function HomeScreen() {
})}
</ScrollView>
</View>
{filteredShows.map((show) => {
const showLiveBadge = show.running;
const streamingService =
streamingServices[
`assets.images.streamingServices.${show.streamingService.toLowerCase()}`
];
<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}
streamingServiceUri={streamingService}
genres={show.genres}
{...(showLiveBadge
? {
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>
</ScrollView>
</View>
</GestureHandlerRootView>