filter, haptik, background

2025-10-28 22:42:19 +01:00
parent 6b39579c75
commit 21cd6c3241
8 changed files with 145 additions and 84 deletions
--- a/app/(tabs)/index.tsx
+++ b/app/(tabs)/index.tsx
@@ -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>
--- a/app/participant.tsx
+++ b/app/participant.tsx
@@ -179,7 +179,8 @@ export default function ParticipantScreen() {
    <GestureHandlerRootView style={styles.mainContainer}>
      <ScrollView
        showsVerticalScrollIndicator={false}
-        contentContainerStyle={{ paddingBottom: 20, paddingTop: 10 }}
+        contentContainerStyle={{ paddingBottom: 20, paddingTop: 10}}
+
      >
        <Text style={styles.participantName}>{name}</Text>
        <TouchableOpacity
@@ -214,7 +215,7 @@ export default function ParticipantScreen() {
              paddingLeft: 30,
            }}
          >
-            {appearances.map(({ show, seasons }) => {
+            {appearances.toReversed().map(({ show, seasons }) => {
              const partners = Array.from(
                new Map(
                  seasons
--- a/app/showDetails.tsx
+++ b/app/showDetails.tsx
@@ -1,9 +1,11 @@
+import { getShowById, Show } from "@/apis/showApi";
 import ParticipantDetails from "@/components/ParticipantDeatails";
 import ShowInfo from "@/components/ui/ShowInfo";
 import StackHeader from "@/components/ui/StackHeader";
 import { useSeasonContext } from "@/contexts/SeasonContext";
+import * as Haptics from 'expo-haptics';
 import { router, useLocalSearchParams } from "expo-router";
-import React from "react";
+import React, { useState } from "react";
 import {
  Dimensions,
  Image,
@@ -16,14 +18,18 @@ import styles from "./stackStyles/showDetailStyles";

 export default function ShowDetails() {
  const {
-    bannerUri,
-    description,
-    concept,
-    genres,
-    streamingService,
+    // bannerUri,
+    // description,
+    // concept,
+    // genres,
+    // streamingService,
    id,
-    endDate,
+    // endDate,
  } = useLocalSearchParams();
+
+  const [show, setShow] = useState<Show | null>(null);
+  const [loading, setLoading] = useState(true);
+
  const [selectedParticipants, setSelectedParticipants] =
    React.useState<boolean>(true);
  const [selectedSeason, setSelectedSeason] = React.useState<number>(1);
@@ -48,6 +54,18 @@ export default function ShowDetails() {

  React.useEffect(() => {
    if (!showId) return;
+
+    const fetchShow = async () => {
+      try {
+        const data = await getShowById(showId);
+        setShow(data);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchShow();
+
    let active = true;
    (async () => {
      const count = await fetchSeasonCount(showId);
@@ -128,15 +146,15 @@ export default function ShowDetails() {
        <ShowInfo
          seasons={seasonCount}
          participants={participants.length}
-          streamingService={streamingService as string}
+          streamingService={show?.streamingService as string}
          startDate={startDate as string}
-          endDate={endDate as string | null}
+          endDate={show?.endDate as string | null}
        />

        <View style={styles.showBannerLogoContainer}>
          <Image
            source={{
-              uri: bannerUri as string,
+              uri: show?.bannerUri as string,
            }}
            style={styles.showBannerLogo}
            resizeMode="cover"
@@ -194,6 +212,7 @@ export default function ShowDetails() {
                      ]}
                      onPress={() => {
                        setSelectedSeason(season);
+                        Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
                      }}
                    >
                      <Text style={styles.seasonLabel}>{season}</Text>
@@ -241,10 +260,10 @@ export default function ShowDetails() {
          </>
        ) : (
          <ParticipantDetails
-            description={description as string}
-            concept={concept as string}
-            genres={genres as string}
-            streamingService={streamingService as string}
+            description={show?.description as string}
+            concept={show?.concept as string}
+            genres={show?.genres as string[]}
+            streamingService={show?.streamingService as string}
          />
        )}
      </ScrollView>
--- a/app/stackStyles/participantStyles.tsx
+++ b/app/stackStyles/participantStyles.tsx
@@ -50,7 +50,7 @@ const styles = StyleSheet.create({
  performedShowsSection: {
    width: "100%",
    height: "100%",
-    backgroundColor: "hsl(221, 39%, 0%)",
+    backgroundColor: 'hsl(221, 39%, 16%)',
    marginTop: 20,
  },
  performedShowsTitle: {
@@ -175,7 +175,7 @@ const styles = StyleSheet.create({
    width: 50,
    height: 50,
    borderRadius: 20,
-    backgroundColor: "hsl(221, 39%, 18%)",
+    backgroundColor: "hsl(221, 39%, 12%)",
    marginLeft: 15,
    marginTop: 15,
    marginBottom: 5,