physical/physical-expo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

实现直播详情页

Browse Source
This commit is contained in:
yuchenglong
2026-01-14 18:15:13 +08:00
parent 8dc87c9b29
commit 025b483099
18 changed files with 2497 additions and 347 deletions
Download Patch File Download Diff File Expand all files Collapse all files

534
components/live-detail/events-timeline.tsx Normal file
View File

@@ -0,0 +1,534 @@
import { ThemedText } from "@/components/themed-text";
import { ThemedView } from "@/components/themed-view";
import { IconSymbol } from "@/components/ui/icon-symbol";
import { LiveScoreMatch } from "@/types/api";
import React, { useState } from "react";
import { useTranslation } from "react-i18next";
import { StyleSheet, Switch, View } from "react-native";
interface EventItem {
time: string;
type: "goal" | "card" | "sub" | "status";
side: "home" | "away" | "center";
player?: string;
playerIn?: string;
playerOut?: string;
detail?: string;
score?: string;
isPenalty?: boolean;
}
interface EventsTimelineProps {
match: LiveScoreMatch;
isDark: boolean;
}
export function EventsTimeline({ match, isDark }: EventsTimelineProps) {
const { t } = useTranslation();
const [showSub, setShowSub] = useState(true);
const [showCard, setShowCard] = useState(true);
// Parse and merge events
const events: EventItem[] = [];
// 1. Goals
match.goalscorers?.forEach((g) => {
const isHome = !!g.home_scorer;
events.push({
time: g.time,
type: "goal",
side: isHome ? "home" : "away",
player: isHome ? g.home_scorer : g.away_scorer,
detail: isHome ? g.home_assist : g.away_assist,
score: g.score,
isPenalty: g.info?.toLowerCase().includes("penalty"),
});
});
// 2. Cards
match.cards?.forEach((c) => {
const isHome = !!c.home_fault;
events.push({
time: c.time,
type: "card",
side: isHome ? "home" : "away",
player: isHome ? c.home_fault : c.away_fault,
detail: c.card, // "yellow card" or "red card"
});
});
// 3. Substitutes
match.substitutes?.forEach((s) => {
const isHome = Array.isArray(s.home_scorer) ? false : !!s.home_scorer?.in;
const isAway = Array.isArray(s.away_scorer) ? false : !!s.away_scorer?.in;
if (isHome) {
const h = s.home_scorer as any;
events.push({
time: s.time,
type: "sub",
side: "home",
playerIn: h.in,
playerOut: h.out,
});
}
if (isAway) {
const a = s.away_scorer as any;
events.push({
time: s.time,
type: "sub",
side: "away",
playerIn: a.in,
playerOut: a.out,
});
}
});
// 4. Status items
events.push({
time: "0",
type: "status",
side: "center",
detail: t("detail.events.start"),
});
if (match.event_halftime_result) {
events.push({
time: "45",
type: "status",
side: "center",
detail: `${t("detail.events.ht")} ${match.event_halftime_result}`,
});
}
// Sort by time (Descending - Newer at top)
const sortedEvents = events.sort((a, b) => {
const timeA = parseInt(a.time.replace("'", "")) || 0;
const timeB = parseInt(b.time.replace("'", "")) || 0;
return timeB - timeA;
});
const filteredEvents = sortedEvents.filter((ev) => {
if (ev.type === "sub") return showSub;
if (ev.type === "card") return showCard;
return true;
});
return (
<ThemedView style={[styles.container, isDark && styles.darkContainer]}>
<View style={styles.timelineWrapper}>
<View style={[styles.centerLine, isDark && styles.darkLine]} />
{filteredEvents.map((event, index) => (
<View key={index} style={styles.eventRow}>
{/* Home Side */}
<View style={styles.sideContainer}>
{event.side === "home" && (
<View style={[styles.eventContent, styles.homeContent]}>
{event.type === "goal" && (
<View style={styles.goalBox}>
<ThemedText style={styles.eventLabel}>
{event.isPenalty
? t("detail.events.penalty_goal")
: t("detail.events.goal")}
</ThemedText>
<View
style={[
styles.playerIconPlaceholder,
isDark && styles.darkItem,
isDark && { borderColor: "#333" },
]}
>
<IconSymbol
name="person"
size={16}
color={isDark ? "#666" : "#BBB"}
/>
</View>
<View
style={[styles.scorePill, isDark && styles.darkItem]}
>
<IconSymbol
name="football"
size={12}
color={isDark ? "#FFF" : "#000"}
/>
<ThemedText
style={[styles.scoreLabel, isDark && styles.darkText]}
>
{event.score}
</ThemedText>
</View>
</View>
)}
{event.type === "card" && (
<View
style={[
styles.cardPill,
isDark && styles.darkItem,
{ borderColor: isDark ? "#333" : "#EEE" },
]}
>
<View
style={[
styles.miniCard,
{
backgroundColor: event.detail?.includes("yellow")
? "#FFD700"
: "#FF3B30",
},
]}
/>
</View>
)}
{event.type === "sub" && (
<View style={styles.subBox}>
<ThemedText
style={[styles.subInText, isDark && styles.darkText]}
>
{event.playerIn}
</ThemedText>
<ThemedText style={styles.subOutText}>
{event.playerOut}
</ThemedText>
</View>
)}
</View>
)}
</View>
{/* Time Point */}
<View style={styles.timePointContainer}>
{event.type !== "status" ? (
<View style={[styles.timeCircle, isDark && styles.darkItem]}>
<ThemedText
style={[styles.timeText, isDark && styles.darkText]}
>
{`${event.time}'`}
</ThemedText>
</View>
) : (
<View
style={[
styles.statusPill,
isDark && styles.darkItem,
isDark && { borderColor: "#333" },
]}
>
<ThemedText
style={[styles.statusText, isDark && styles.darkText]}
>
{event.detail}
</ThemedText>
</View>
)}
</View>
{/* Away Side */}
<View style={styles.sideContainer}>
{event.side === "away" && (
<View style={[styles.eventContent, styles.awayContent]}>
{event.type === "goal" && (
<View style={styles.goalBox}>
<View
style={[styles.scorePill, isDark && styles.darkItem]}
>
<ThemedText
style={[styles.scoreLabel, isDark && styles.darkText]}
>
{event.score}
</ThemedText>
<IconSymbol
name="football"
size={12}
color={isDark ? "#FFF" : "#000"}
/>
</View>
<View
style={[
styles.playerIconPlaceholder,
isDark && styles.darkItem,
isDark && { borderColor: "#333" },
]}
>
<IconSymbol
name="person"
size={16}
color={isDark ? "#666" : "#BBB"}
/>
</View>
<ThemedText style={styles.eventLabel}>
{event.isPenalty
? t("detail.events.penalty_goal")
: t("detail.events.goal")}
</ThemedText>
</View>
)}
{event.type === "card" && (
<View
style={[
styles.cardPill,
isDark && styles.darkItem,
{ borderColor: isDark ? "#333" : "#EEE" },
]}
>
<View
style={[
styles.miniCard,
{
backgroundColor: event.detail?.includes("yellow")
? "#FFD700"
: "#FF3B30",
},
]}
/>
</View>
)}
{event.type === "sub" && (
<View style={styles.subBox}>
<ThemedText
style={[
styles.subInText,
isDark && styles.darkText,
{ textAlign: "left" },
]}
>
{event.playerIn}
</ThemedText>
<ThemedText
style={[styles.subOutText, { textAlign: "left" }]}
>
{event.playerOut}
</ThemedText>
</View>
)}
</View>
)}
</View>
</View>
))}
</View>
{/* Footer Controls */}
<View style={[styles.footer, isDark && { borderTopColor: "#333" }]}>
<ThemedText style={styles.footerLabel}>
{t("detail.events.toggle_visibility")}
</ThemedText>
<View style={styles.footerSwitches}>
<View style={styles.switchItem}>
<IconSymbol name="swap-vertical" size={16} color="#4CAF50" />
<Switch
value={showSub}
onValueChange={setShowSub}
trackColor={{ false: "#DDD", true: "#3b5998" }}
thumbColor="#FFF"
style={styles.miniSwitch}
/>
</View>
<View style={styles.switchItem}>
<View
style={[
styles.miniCard,
{ backgroundColor: "#FFD700", width: 8, height: 12 },
]}
/>
<Switch
value={showCard}
onValueChange={setShowCard}
trackColor={{ false: "#DDD", true: "#3b5998" }}
thumbColor="#FFF"
style={styles.miniSwitch}
/>
</View>
</View>
</View>
</ThemedView>
);
}
const styles = StyleSheet.create({
container: {
margin: 16,
borderRadius: 20,
backgroundColor: "#FFF",
padding: 16,
paddingBottom: 30,
shadowColor: "#000",
shadowOpacity: 0.05,
shadowRadius: 10,
elevation: 2,
},
darkContainer: {
backgroundColor: "#1E1E20",
shadowOpacity: 0,
elevation: 0,
},
darkItem: {
backgroundColor: "#2C2C2E",
borderColor: "#38383a",
},
darkText: {
color: "#FFF",
},
timelineWrapper: {
position: "relative",
alignItems: "center",
},
centerLine: {
position: "absolute",
width: 1,
height: "100%",
backgroundColor: "#F0F0F0",
top: 0,
},
darkLine: {
backgroundColor: "#333",
},
eventRow: {
flexDirection: "row",
width: "100%",
alignItems: "center",
marginVertical: 12,
},
sideContainer: {
flex: 1,
},
timePointContainer: {
width: 60,
alignItems: "center",
justifyContent: "center",
},
timeCircle: {
width: 30,
height: 30,
borderRadius: 15,
backgroundColor: "#FFF",
justifyContent: "center",
alignItems: "center",
zIndex: 1,
borderWidth: 1,
borderColor: "#F0F0F0",
},
timeText: {
fontSize: 12,
fontWeight: "500",
color: "#333",
},
statusPill: {
position: "absolute",
backgroundColor: "#FFF",
borderWidth: 1,
borderColor: "#E0E0E0",
paddingHorizontal: 12,
paddingVertical: 4,
borderRadius: 15,
zIndex: 2,
},
statusText: {
fontSize: 14,
fontWeight: "bold",
},
eventContent: {
flexDirection: "row",
alignItems: "center",
},
homeContent: {
justifyContent: "flex-end",
paddingRight: 10,
},
awayContent: {
justifyContent: "flex-start",
paddingLeft: 10,
},
scorePill: {
flexDirection: "row",
alignItems: "center",
backgroundColor: "#FFF",
borderWidth: 1.5,
borderColor: "#FFD700",
borderRadius: 12,
paddingHorizontal: 6,
paddingVertical: 2,
gap: 4,
},
scoreLabel: {
fontSize: 14,
fontWeight: "bold",
},
eventLabel: {
fontSize: 12,
color: "#999",
},
goalBox: {
flexDirection: "row",
alignItems: "center",
gap: 8,
},
playerIconPlaceholder: {
width: 24,
height: 24,
borderRadius: 12,
backgroundColor: "#EEE",
borderWidth: 1,
borderColor: "#DDD",
},
cardPill: {
width: 30,
height: 30,
borderRadius: 15,
borderWidth: 1,
justifyContent: "center",
alignItems: "center",
backgroundColor: "#FFF",
},
miniCard: {
width: 10,
height: 14,
borderRadius: 2,
},
subBox: {
alignItems: "flex-end",
},
subInText: {
fontSize: 12,
color: "#333",
fontWeight: "500",
},
subOutText: {
fontSize: 10,
color: "#999",
},
penaltyIcon: {
width: 12,
height: 12,
backgroundColor: "#4B77FF",
borderRadius: 2,
justifyContent: "center",
alignItems: "center",
},
footer: {
marginTop: 30,
borderTopWidth: 1,
borderTopColor: "#F0F0F0",
paddingTop: 16,
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
},
footerLabel: {
fontSize: 12,
color: "#999",
},
footerSwitches: {
flexDirection: "row",
gap: 12,
},
switchItem: {
flexDirection: "row",
alignItems: "center",
gap: 4,
},
miniSwitch: {
transform: [{ scaleX: 0.7 }, { scaleY: 0.7 }],
},
});