mirror of
https://gh-proxy.org/https://github.com/tiajinsha/JKVideo
synced 2026-07-08 07:28:37 +08:00
fix: 推荐图占位色、评论文字、弹幕背景色跟随暗黑主题
This commit is contained in:
@@ -209,7 +209,7 @@ export default function VideoDetailScreen() {
|
|||||||
onPress={() => router.push(`/video/${item.bvid}` as any)}
|
onPress={() => router.push(`/video/${item.bvid}` as any)}
|
||||||
activeOpacity={0.85}
|
activeOpacity={0.85}
|
||||||
>
|
>
|
||||||
<View style={[styles.relatedThumbWrap, { backgroundColor: theme.bg }]}>
|
<View style={[styles.relatedThumbWrap, { backgroundColor: theme.card }]}>
|
||||||
<Image
|
<Image
|
||||||
source={{ uri: proxyImageUrl(item.pic) }}
|
source={{ uri: proxyImageUrl(item.pic) }}
|
||||||
style={styles.relatedThumb}
|
style={styles.relatedThumb}
|
||||||
|
|||||||
@@ -4,16 +4,18 @@ import { Ionicons } from '@expo/vector-icons';
|
|||||||
import type { Comment } from '../services/types';
|
import type { Comment } from '../services/types';
|
||||||
import { formatTime } from '../utils/format';
|
import { formatTime } from '../utils/format';
|
||||||
import { proxyImageUrl } from '../utils/imageUrl';
|
import { proxyImageUrl } from '../utils/imageUrl';
|
||||||
|
import { useTheme } from '../utils/theme';
|
||||||
|
|
||||||
interface Props { item: Comment; }
|
interface Props { item: Comment; }
|
||||||
|
|
||||||
export function CommentItem({ item }: Props) {
|
export function CommentItem({ item }: Props) {
|
||||||
|
const theme = useTheme();
|
||||||
return (
|
return (
|
||||||
<View style={styles.row}>
|
<View style={[styles.row, { borderBottomColor: theme.border }]}>
|
||||||
<Image source={{ uri: proxyImageUrl(item.member.avatar) }} style={styles.avatar} />
|
<Image source={{ uri: proxyImageUrl(item.member.avatar) }} style={styles.avatar} />
|
||||||
<View style={styles.content}>
|
<View style={styles.content}>
|
||||||
<Text style={styles.username}>{item.member.uname}</Text>
|
<Text style={styles.username}>{item.member.uname}</Text>
|
||||||
<Text style={styles.message}>{item.content.message}</Text>
|
<Text style={[styles.message, { color: theme.text }]}>{item.content.message}</Text>
|
||||||
<View style={styles.footer}>
|
<View style={styles.footer}>
|
||||||
<Text style={styles.time}>{formatTime(item.ctime)}</Text>
|
<Text style={styles.time}>{formatTime(item.ctime)}</Text>
|
||||||
<View style={styles.likeRow}>
|
<View style={styles.likeRow}>
|
||||||
|
|||||||
@@ -12,6 +12,7 @@ import {
|
|||||||
import { Ionicons } from "@expo/vector-icons";
|
import { Ionicons } from "@expo/vector-icons";
|
||||||
import { DanmakuItem } from "../services/types";
|
import { DanmakuItem } from "../services/types";
|
||||||
import { danmakuColorToCss } from "../utils/danmaku";
|
import { danmakuColorToCss } from "../utils/danmaku";
|
||||||
|
import { useTheme } from "../utils/theme";
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
danmakus: DanmakuItem[];
|
danmakus: DanmakuItem[];
|
||||||
@@ -65,6 +66,7 @@ export default function DanmakuList({
|
|||||||
maxItems = 100,
|
maxItems = 100,
|
||||||
giftCounts,
|
giftCounts,
|
||||||
}: Props) {
|
}: Props) {
|
||||||
|
const theme = useTheme();
|
||||||
const flatListRef = useRef<FlatList>(null);
|
const flatListRef = useRef<FlatList>(null);
|
||||||
const [displayedItems, setDisplayedItems] = useState<DisplayedDanmaku[]>([]);
|
const [displayedItems, setDisplayedItems] = useState<DisplayedDanmaku[]>([]);
|
||||||
const [unseenCount, setUnseenCount] = useState(0);
|
const [unseenCount, setUnseenCount] = useState(0);
|
||||||
@@ -213,7 +215,7 @@ export default function DanmakuList({
|
|||||||
const guard = item.guardLevel ? GUARD_LABELS[item.guardLevel] : null;
|
const guard = item.guardLevel ? GUARD_LABELS[item.guardLevel] : null;
|
||||||
const timeStr = formatLiveTime(item.timeline);
|
const timeStr = formatLiveTime(item.timeline);
|
||||||
return (
|
return (
|
||||||
<Animated.View style={[liveStyles.row, { opacity: item._fadeAnim }]}>
|
<Animated.View style={[liveStyles.row, { opacity: item._fadeAnim, borderBottomColor: theme.border }]}>
|
||||||
{timeStr ? (
|
{timeStr ? (
|
||||||
<Text style={liveStyles.time}>{timeStr}</Text>
|
<Text style={liveStyles.time}>{timeStr}</Text>
|
||||||
) : null}
|
) : null}
|
||||||
@@ -240,27 +242,27 @@ export default function DanmakuList({
|
|||||||
{item.uname ?? "匿名"}
|
{item.uname ?? "匿名"}
|
||||||
</Text>
|
</Text>
|
||||||
<Text style={liveStyles.colon}>:</Text>
|
<Text style={liveStyles.colon}>:</Text>
|
||||||
<Text style={liveStyles.text} numberOfLines={2}>
|
<Text style={[liveStyles.text, { color: theme.text }]} numberOfLines={2}>
|
||||||
{item.text}
|
{item.text}
|
||||||
</Text>
|
</Text>
|
||||||
</View>
|
</View>
|
||||||
</Animated.View>
|
</Animated.View>
|
||||||
);
|
);
|
||||||
}, []);
|
}, [theme]);
|
||||||
|
|
||||||
// ─── Video mode render (original bubble) ───────────────────────────────────
|
// ─── Video mode render (original bubble) ───────────────────────────────────
|
||||||
const renderVideoItem = useCallback(({ item }: { item: DisplayedDanmaku }) => {
|
const renderVideoItem = useCallback(({ item }: { item: DisplayedDanmaku }) => {
|
||||||
const dotColor = danmakuColorToCss(item.color);
|
const dotColor = danmakuColorToCss(item.color);
|
||||||
return (
|
return (
|
||||||
<Animated.View style={[styles.bubble, { opacity: item._fadeAnim }]}>
|
<Animated.View style={[styles.bubble, { opacity: item._fadeAnim, backgroundColor: theme.bg }]}>
|
||||||
<View style={[styles.colorDot, { backgroundColor: dotColor }]} />
|
<View style={[styles.colorDot, { backgroundColor: dotColor }]} />
|
||||||
<Text style={styles.bubbleText} numberOfLines={3}>
|
<Text style={[styles.bubbleText, { color: theme.text }]} numberOfLines={3}>
|
||||||
{item.text}
|
{item.text}
|
||||||
</Text>
|
</Text>
|
||||||
<Text style={styles.timestamp}>{formatTimestamp(item.time)}</Text>
|
<Text style={styles.timestamp}>{formatTimestamp(item.time)}</Text>
|
||||||
</Animated.View>
|
</Animated.View>
|
||||||
);
|
);
|
||||||
}, []);
|
}, [theme]);
|
||||||
|
|
||||||
const keyExtractor = useCallback(
|
const keyExtractor = useCallback(
|
||||||
(item: DisplayedDanmaku) => String(item._key),
|
(item: DisplayedDanmaku) => String(item._key),
|
||||||
@@ -268,7 +270,7 @@ export default function DanmakuList({
|
|||||||
);
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<View style={[styles.container, style]}>
|
<View style={[styles.container, { backgroundColor: theme.card, borderTopColor: theme.border }, style]}>
|
||||||
{!hideHeader && (
|
{!hideHeader && (
|
||||||
<TouchableOpacity
|
<TouchableOpacity
|
||||||
style={styles.header}
|
style={styles.header}
|
||||||
@@ -298,7 +300,7 @@ export default function DanmakuList({
|
|||||||
data={displayedItems}
|
data={displayedItems}
|
||||||
keyExtractor={keyExtractor}
|
keyExtractor={keyExtractor}
|
||||||
renderItem={isLive ? renderLiveItem : renderVideoItem}
|
renderItem={isLive ? renderLiveItem : renderVideoItem}
|
||||||
style={isLive ? liveStyles.list : styles.list}
|
style={[isLive ? liveStyles.list : styles.list, { backgroundColor: theme.bg }]}
|
||||||
contentContainerStyle={isLive ? liveStyles.listContent : styles.listContent}
|
contentContainerStyle={isLive ? liveStyles.listContent : styles.listContent}
|
||||||
onScroll={handleScroll}
|
onScroll={handleScroll}
|
||||||
onScrollBeginDrag={handleScrollBeginDrag}
|
onScrollBeginDrag={handleScrollBeginDrag}
|
||||||
|
|||||||
Reference in New Issue
Block a user