ready to release
This commit is contained in:
DevOFVictory
@@ -1,5 +1,4 @@
|
||||
import { AutoCompleteItem } from "@/apis/autoCompleteApi";
|
||||
import { SearchResultItem } from "@/apis/searchApi";
|
||||
import { Season } from "@/apis/seasonApi";
|
||||
import { Show } from "@/apis/showApi";
|
||||
import styles from "@/app/tabStyles/indexStyles";
|
||||
@@ -8,33 +7,52 @@ import { useDiscoveryContext } from "@/contexts/DiscoveryContext";
|
||||
import { FontAwesome } from "@expo/vector-icons";
|
||||
import Feather from "@expo/vector-icons/Feather";
|
||||
import React from "react";
|
||||
import { Keyboard, ScrollView, Text, TextInput, TouchableOpacity, View } from "react-native";
|
||||
import {
|
||||
Keyboard,
|
||||
ScrollView,
|
||||
Text,
|
||||
TextInput,
|
||||
TouchableOpacity,
|
||||
TouchableWithoutFeedback,
|
||||
View,
|
||||
} from "react-native";
|
||||
|
||||
import { useSearch } from "@/hooks/useSearch";
|
||||
import { getShowById } from "@/apis/showApi";
|
||||
import PersonRow from "@/components/discovery/PersonRow";
|
||||
import SeasonCarousel from "@/components/discovery/SeasonCarousel";
|
||||
import TagChip from "@/components/discovery/TagChip";
|
||||
import { getIconName, mapApiPersonToUI, mapApiSeasonToUI, mapApiShowToUI } from "@/utils/searchMapping";
|
||||
import { useSearch } from "@/hooks/useSearch";
|
||||
import {
|
||||
getIconName,
|
||||
mapApiPersonToUI,
|
||||
mapApiSeasonToUI,
|
||||
mapApiShowToUI,
|
||||
} from "@/utils/searchMapping";
|
||||
|
||||
export default function ExploreScreen() {
|
||||
const { query, setQuery, suggestions } = useDiscoveryContext();
|
||||
|
||||
const [tags, setTags] = React.useState<AutoCompleteItem[]>([]);
|
||||
const tagStrings = React.useMemo(() => tags.map((t) => t.text), [tags]);
|
||||
const { data: results = [] } = useSearch(tagStrings);
|
||||
|
||||
// Show metadata cache by id (filled from SHOW results and lazy-loaded by id)
|
||||
const {
|
||||
data: results = [],
|
||||
error,
|
||||
refetch,
|
||||
// isLoading, // optional, falls benötigt
|
||||
} = useSearch(tagStrings as string[]);
|
||||
|
||||
// Lokaler Show-Cache
|
||||
const [showsById, setShowsById] = React.useState<Record<number, Show>>({});
|
||||
|
||||
// --- helpers ---
|
||||
|
||||
// Steuerung für Vorschlagsliste
|
||||
const [showSuggestions, setShowSuggestions] = React.useState(false);
|
||||
|
||||
function tagAdded(tag: AutoCompleteItem) {
|
||||
const nextTags = tags.some((t) => t.text === tag.text) ? tags : [...tags, tag];
|
||||
setTags(nextTags);
|
||||
|
||||
setQuery("");
|
||||
setShowSuggestions(false);
|
||||
Keyboard.dismiss();
|
||||
}
|
||||
|
||||
@@ -43,7 +61,7 @@ export default function ExploreScreen() {
|
||||
setTags(nextTags);
|
||||
}
|
||||
|
||||
// Keep our local show cache in sync with SHOW items returned by search
|
||||
// Cache mit SHOW-Resultaten füllen
|
||||
React.useEffect(() => {
|
||||
const fromResults: Record<number, Show> = {};
|
||||
for (const r of results) {
|
||||
@@ -57,9 +75,7 @@ export default function ExploreScreen() {
|
||||
}
|
||||
}, [results]);
|
||||
|
||||
|
||||
|
||||
// Group SEASON results by showId
|
||||
// SEASON-Ergebnisse nach showId gruppieren
|
||||
const seasonsByShowId = React.useMemo(() => {
|
||||
const map = new Map<number, Season[]>();
|
||||
for (const r of results) {
|
||||
@@ -71,7 +87,6 @@ export default function ExploreScreen() {
|
||||
list.push(s as Season);
|
||||
map.set(key, list);
|
||||
}
|
||||
// sort seasons per show by startDate asc
|
||||
for (const [k, list] of map) {
|
||||
list.sort((a, b) => {
|
||||
const da = a?.startDate ? new Date(a.startDate).getTime() : Number.POSITIVE_INFINITY;
|
||||
@@ -83,7 +98,7 @@ export default function ExploreScreen() {
|
||||
return map;
|
||||
}, [results]);
|
||||
|
||||
// Lazy fetch missing shows needed for Season carousels
|
||||
// Fehlende Shows für Carousels nachladen
|
||||
React.useEffect(() => {
|
||||
const needed = Array.from(seasonsByShowId.keys()).filter((id) => !showsById[id]);
|
||||
if (needed.length === 0) return;
|
||||
@@ -97,7 +112,7 @@ export default function ExploreScreen() {
|
||||
const next: Record<number, Show> = {};
|
||||
for (const s of fetched) {
|
||||
if (!s) continue;
|
||||
next[s.id] = s; // wichtig: s.id, nicht s.showId
|
||||
next[s.id] = s;
|
||||
}
|
||||
if (Object.keys(next).length) {
|
||||
setShowsById((prev) => ({ ...prev, ...next }));
|
||||
@@ -107,10 +122,12 @@ export default function ExploreScreen() {
|
||||
}
|
||||
})();
|
||||
|
||||
return () => { cancelled = true; };
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
}, [seasonsByShowId, showsById]);
|
||||
|
||||
// PERSON hits shown at the top (like old screen)
|
||||
// PERSON-Resultate
|
||||
const persons = React.useMemo(() => {
|
||||
return results
|
||||
.filter((r) => r.type === "PERSON")
|
||||
@@ -118,120 +135,309 @@ export default function ExploreScreen() {
|
||||
.sort((a, b) => (a.name || "").localeCompare(b.name || ""));
|
||||
}, [results]);
|
||||
|
||||
// Moderner Fehlerblock
|
||||
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 refetch === "function") refetch();
|
||||
}}
|
||||
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>
|
||||
);
|
||||
}
|
||||
|
||||
const noResults = persons.length === 0 && seasonsByShowId.size === 0;
|
||||
|
||||
return (
|
||||
<View style={[styles.mainContainer]}>
|
||||
<View style={styles.header}>
|
||||
<Text style={[styles.title, { fontSize: 28 }]}>Durchsuchen</Text>
|
||||
</View>
|
||||
|
||||
<View style={styles.sectionContainer}>
|
||||
{/* Search bar */}
|
||||
<View style={styles.searchContainer}>
|
||||
<TextInput
|
||||
value={query}
|
||||
onChangeText={setQuery}
|
||||
placeholder="Wonach suchst du?"
|
||||
placeholderTextColor=""
|
||||
style={styles.searchInput}
|
||||
returnKeyType="search"
|
||||
onSubmitEditing={() => {
|
||||
if (!query.trim()) return;
|
||||
tagAdded({ type: "CUSTOM", text: query.trim() });
|
||||
}}
|
||||
autoCapitalize="none"
|
||||
/>
|
||||
<TouchableWithoutFeedback
|
||||
onPress={() => {
|
||||
Keyboard.dismiss();
|
||||
setShowSuggestions(false);
|
||||
}}
|
||||
>
|
||||
<View style={{ flex: 1 }}>
|
||||
<View style={styles.sectionContainer}>
|
||||
<View style={styles.searchContainer}>
|
||||
<TextInput
|
||||
value={query}
|
||||
autoComplete="off"
|
||||
autoCorrect={false}
|
||||
onChangeText={(t) => {
|
||||
setQuery(t);
|
||||
if (t.length > 0 && !showSuggestions) setShowSuggestions(true);
|
||||
if (t.length === 0) setShowSuggestions(false);
|
||||
}}
|
||||
placeholder="Wonach suchst du?"
|
||||
placeholderTextColor=""
|
||||
style={styles.searchInput}
|
||||
returnKeyType="search"
|
||||
onFocus={() => setShowSuggestions(true)}
|
||||
onSubmitEditing={() => {
|
||||
if (!query.trim()) return;
|
||||
tagAdded({ type: "CUSTOM", text: query.trim() });
|
||||
}}
|
||||
autoCapitalize="none"
|
||||
/>
|
||||
|
||||
{query.length === 0 ? (
|
||||
<Feather name="search" size={24} color="hsl(221, 39%, 80%)" />
|
||||
) : (
|
||||
<Feather name="x" size={24} color="hsl(221, 39%, 80%)" onPress={() => setQuery("")} />
|
||||
)}
|
||||
</View>
|
||||
{query.length === 0 ? (
|
||||
<Feather name="search" size={24} color="hsl(221, 39%, 80%)" />
|
||||
) : (
|
||||
<Feather
|
||||
name="x"
|
||||
size={24}
|
||||
color="hsl(221, 39%, 80%)"
|
||||
onPress={() => {
|
||||
setQuery("");
|
||||
setShowSuggestions(false);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</View>
|
||||
|
||||
{/* Tag chips */}
|
||||
<View style={styles.tagContainer}>
|
||||
{tags.map((tag) => (
|
||||
<TagChip
|
||||
key={tag.text}
|
||||
icon={getIconName(tag.type)}
|
||||
label={tag.text}
|
||||
onPress={() => {
|
||||
tagRemoved(tag);
|
||||
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</View>
|
||||
|
||||
{/* Suggestions dropdown */}
|
||||
{query.length > 0 && (
|
||||
<View style={styles.suggestionsSection}>
|
||||
<Text style={styles.suggestionTitle}>Suchvorschläge</Text>
|
||||
<ScrollView keyboardShouldPersistTaps="handled">
|
||||
{suggestions.map((suggestion, idx) => (
|
||||
<TouchableOpacity
|
||||
key={suggestion.text + "_" + idx}
|
||||
style={styles.suggestionContainer}
|
||||
onPress={() => tagAdded(suggestion)}
|
||||
>
|
||||
<FontAwesome name={getIconName(suggestion.type)} size={16} color="hsl(0, 0%, 90%)" />
|
||||
<Text style={styles.suggestionLabel}>{suggestion.text}</Text>
|
||||
</TouchableOpacity>
|
||||
))}
|
||||
</ScrollView>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
|
||||
{/* Results */}
|
||||
<View style={{ flex: 1 }}>
|
||||
<ScrollView keyboardShouldPersistTaps="handled">
|
||||
{/* Personen Section (top) */}
|
||||
{persons.length > 0 && (
|
||||
<View style={styles.sectionContainer}>
|
||||
<Text style={styles.sectionTitle}>Personen</Text>
|
||||
{persons.slice(0, 5).map((p) => (
|
||||
<PersonRow key={`p-${p.personId ?? p.id}`} person={p}/>
|
||||
<View style={styles.tagContainer}>
|
||||
{tags.map((tag) => (
|
||||
<TagChip
|
||||
key={tag.text}
|
||||
icon={getIconName(tag.type)}
|
||||
label={tag.text}
|
||||
onPress={() => {
|
||||
tagRemoved(tag);
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</View>
|
||||
)}
|
||||
|
||||
{/* Staffeln grouped by Show with page view */}
|
||||
<View style={styles.sectionContainer}>
|
||||
<Text style={styles.sectionTitle}>Staffeln</Text>
|
||||
|
||||
{Array.from(seasonsByShowId.entries()).map(([showId, seasons]) => {
|
||||
const show = showsById[Number(showId)];
|
||||
if (!seasons || seasons.length === 0) return null;
|
||||
// If show metadata is not yet loaded, render a minimal ShowBox fallback once per page item
|
||||
if (!show) {
|
||||
return (
|
||||
<SeasonCarousel
|
||||
key={`sc-${showId}`}
|
||||
show={{ showId: showId as any, title: "blaaa", description: "", genre: "", thumbnailUrl: "", running: false } as any}
|
||||
seasons={seasons}
|
||||
renderItem={(s) => <ShowBox show={{ showId: showId as any, title: `Show #${showId}`, description: "", genre: "", thumbnailUrl: "", running: false } as any} displayedSeason={s} shadow={false} />}
|
||||
/>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<SeasonCarousel
|
||||
key={`sc-${showId}`}
|
||||
show={show}
|
||||
seasons={seasons}
|
||||
renderItem={(s) => <ShowBox show={show} displayedSeason={s} shadow={false} />}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
|
||||
{seasonsByShowId.size === 0 && (
|
||||
<Text style={styles.centerText}>
|
||||
Keine Staffeln gefunden. Passe deine Tags an.
|
||||
</Text>
|
||||
{/* Suggestions dropdown */}
|
||||
{query.length > 0 && showSuggestions && (
|
||||
<View style={styles.suggestionsSection}>
|
||||
<Text style={styles.suggestionTitle}>Suchvorschläge</Text>
|
||||
<ScrollView keyboardShouldPersistTaps="handled">
|
||||
{suggestions.map((suggestion, idx) => (
|
||||
<TouchableOpacity
|
||||
key={suggestion.text + "_" + idx}
|
||||
style={styles.suggestionContainer}
|
||||
onPress={() => tagAdded(suggestion)}
|
||||
>
|
||||
<FontAwesome
|
||||
name={getIconName(suggestion.type)}
|
||||
size={16}
|
||||
color="hsl(0, 0%, 90%)"
|
||||
/>
|
||||
<Text style={styles.suggestionLabel}>
|
||||
{suggestion.text}
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
))}
|
||||
</ScrollView>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
</ScrollView>
|
||||
</View>
|
||||
|
||||
{/* Results */}
|
||||
<View style={{ flex: 1 }}>
|
||||
<ScrollView keyboardShouldPersistTaps="handled">
|
||||
{/* Personen Section (top) */}
|
||||
{persons.length > 0 && (
|
||||
<View style={styles.sectionContainer}>
|
||||
<Text style={styles.sectionTitle}>Personen</Text>
|
||||
{persons.slice(0, 5).map((p) => (
|
||||
<PersonRow key={`p-${p.personId ?? p.id}`} person={p} />
|
||||
))}
|
||||
</View>
|
||||
)}
|
||||
|
||||
<View style={styles.sectionContainer}>
|
||||
{seasonsByShowId.size > 0 && (
|
||||
<Text style={styles.sectionTitle}>Staffeln</Text>
|
||||
)}
|
||||
|
||||
{Array.from(seasonsByShowId.entries()).map(([showId, seasons]) => {
|
||||
const show = showsById[Number(showId)];
|
||||
if (!seasons || seasons.length === 0) return null;
|
||||
|
||||
if (!show) {
|
||||
return (
|
||||
<SeasonCarousel
|
||||
key={`sc-${showId}`}
|
||||
show={
|
||||
{
|
||||
showId: showId as any,
|
||||
title: "blaaa",
|
||||
description: "",
|
||||
genre: "",
|
||||
thumbnailUrl: "",
|
||||
running: false,
|
||||
} as any
|
||||
}
|
||||
seasons={seasons}
|
||||
renderItem={(s) => (
|
||||
<ShowBox
|
||||
show={
|
||||
{
|
||||
showId: showId as any,
|
||||
title: `Show #${showId}`,
|
||||
description: "",
|
||||
genre: "",
|
||||
thumbnailUrl: "",
|
||||
running: false,
|
||||
} as any
|
||||
}
|
||||
displayedSeason={s}
|
||||
shadow={false}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<SeasonCarousel
|
||||
key={`sc-${showId}`}
|
||||
show={show}
|
||||
seasons={seasons}
|
||||
renderItem={(s) => (
|
||||
<ShowBox show={show} displayedSeason={s} shadow={false} />
|
||||
)}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
|
||||
{/* Schöner Empty-State */}
|
||||
{noResults && (
|
||||
<View
|
||||
style={{
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
gap: 12,
|
||||
backgroundColor: "rgba(255,255,255,0.04)",
|
||||
paddingVertical: 28,
|
||||
paddingHorizontal: 20,
|
||||
borderRadius: 12,
|
||||
marginTop: 8,
|
||||
}}
|
||||
>
|
||||
<Feather
|
||||
name="search"
|
||||
size={36}
|
||||
color="rgba(255,255,255,0.9)"
|
||||
/>
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 18,
|
||||
fontWeight: "600",
|
||||
color: "white",
|
||||
textAlign: "center",
|
||||
}}
|
||||
>
|
||||
Keine Ergebnisse gefunden
|
||||
</Text>
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 14,
|
||||
color: "rgba(255,255,255,0.7)",
|
||||
textAlign: "center",
|
||||
}}
|
||||
>
|
||||
Passen Sie Ihre Tags an oder setzen Sie die Filter zurück.
|
||||
</Text>
|
||||
|
||||
<View style={{ flexDirection: "row", gap: 10, marginTop: 4 }}>
|
||||
<TouchableOpacity
|
||||
onPress={() => {
|
||||
setTags([]);
|
||||
setQuery("");
|
||||
setShowSuggestions(false);
|
||||
Keyboard.dismiss();
|
||||
if (typeof refetch === "function") refetch();
|
||||
}}
|
||||
style={{
|
||||
backgroundColor: "rgba(255,255,255,0.15)",
|
||||
paddingVertical: 10,
|
||||
paddingHorizontal: 14,
|
||||
borderRadius: 8,
|
||||
}}
|
||||
>
|
||||
<Text style={{ color: "white", fontWeight: "600" }}>
|
||||
Filter zurücksetzen
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
|
||||
<TouchableOpacity
|
||||
onPress={() => {
|
||||
setQuery("");
|
||||
setShowSuggestions(false);
|
||||
Keyboard.dismiss();
|
||||
}}
|
||||
style={{
|
||||
backgroundColor: "rgba(255,255,255,0.08)",
|
||||
paddingVertical: 10,
|
||||
paddingHorizontal: 14,
|
||||
borderRadius: 8,
|
||||
}}
|
||||
>
|
||||
<Text style={{ color: "white" }}>Eingabe löschen</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
</ScrollView>
|
||||
</View>
|
||||
</View>
|
||||
</TouchableWithoutFeedback>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -2,6 +2,7 @@ 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";
|
||||
@@ -89,6 +90,28 @@ export default function HomeScreen() {
|
||||
<GestureHandlerRootView>
|
||||
<View style={styles.mainContainer}>
|
||||
<View style={styles.header}>
|
||||
<TouchableOpacity
|
||||
onPress={() => {
|
||||
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>
|
||||
<ScrollView
|
||||
@@ -165,7 +188,7 @@ export default function HomeScreen() {
|
||||
{uniqueStreamingServices.map((serviceName) => {
|
||||
const streamingService =
|
||||
streamingServices[
|
||||
`assets.images.streamingServices.${serviceName.toLowerCase()}`
|
||||
`assets.images.streamingServices.${serviceName.toLowerCase()}`
|
||||
];
|
||||
return (
|
||||
<TouchableOpacity
|
||||
@@ -223,15 +246,15 @@ export default function HomeScreen() {
|
||||
.map(
|
||||
(s) =>
|
||||
streamingServices[
|
||||
`assets.images.streamingServices.${s.toLowerCase()}`
|
||||
`assets.images.streamingServices.${s.toLowerCase()}`
|
||||
]
|
||||
)}
|
||||
genres={show.genres}
|
||||
{...(showLiveBadge
|
||||
? {
|
||||
liveBadgeText: "LIVE",
|
||||
liveBadgeContainerStyle: styles.liveBadgeContainer,
|
||||
}
|
||||
liveBadgeText: "LIVE",
|
||||
liveBadgeContainerStyle: styles.liveBadgeContainer,
|
||||
}
|
||||
: {})}
|
||||
/>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user