lan/JKVideo
1
0
Fork 0
mirror of https://gh-proxy.org/https://github.com/tiajinsha/JKVideo synced 2026-07-08 07:28:37 +08:00
Code Issues Packages Projects Releases Wiki Activity

热力图bug

Browse Source
This commit is contained in:
Developer
2026-03-12 23:57:01 +08:00
parent a55bcd46ea
commit 2e7578afde
7 changed files with 245 additions and 229 deletions
Download Patch File Download Diff File Expand all files Collapse all files

101
components/VideoCard.tsx
View File

@@ -1,11 +1,18 @@
import React from 'react';
import { View, Text, Image, TouchableOpacity, StyleSheet, Dimensions } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import type { VideoItem } from '../services/types';
import { formatCount, formatDuration } from '../utils/format';
import { proxyImageUrl } from '../utils/imageUrl';
import React from "react";
import {
View,
Text,
Image,
TouchableOpacity,
StyleSheet,
Dimensions,
} from "react-native";
import { Ionicons } from "@expo/vector-icons";
import type { VideoItem } from "../services/types";
import { formatCount, formatDuration } from "../utils/format";
import { proxyImageUrl } from "../utils/imageUrl";
const { width } = Dimensions.get('window');
const { width } = Dimensions.get("window");
const CARD_WIDTH = (width - 14) / 2;
interface Props {
@@ -15,38 +22,84 @@ interface Props {
export function VideoCard({ item, onPress }: Props) {
return (
<TouchableOpacity style={styles.card} onPress={onPress} activeOpacity={0.85}>
<TouchableOpacity
style={styles.card}
onPress={onPress}
activeOpacity={0.85}
>
<View style={styles.thumbContainer}>
<Image
source={{ uri: proxyImageUrl(item.pic) }}
style={styles.thumb}
resizeMode="cover"
/>
<View style={styles.meta}>
<Ionicons name="play" size={11} color="#fff" />
<Text style={styles.metaText}>
{formatCount(item.stat?.view ?? 0)}
</Text>
</View>
<View style={styles.durationBadge}>
<Text style={styles.durationText}>{formatDuration(item.duration)}</Text>
<Text style={styles.durationText}>
{formatDuration(item.duration)}
</Text>
</View>
</View>
<View style={styles.info}>
<Text style={styles.title} numberOfLines={2}>{item.title}</Text>
<View style={styles.meta}>
<Ionicons name="play" size={11} color="#999" />
<Text style={styles.metaText}>{formatCount(item.stat?.view ?? 0)}</Text>
</View>
<Text style={styles.owner} numberOfLines={1}>{item.owner?.name ?? ''}</Text>
<Text style={styles.title} numberOfLines={2}>
{item.title}
</Text>
<Text style={styles.owner} numberOfLines={1}>
{item.owner?.name ?? ""}
</Text>
</View>
</TouchableOpacity>
);
}
const styles = StyleSheet.create({
card: { width: CARD_WIDTH, marginBottom: 6, backgroundColor: '#fff', borderRadius: 6, overflow: 'hidden' },
thumbContainer: { position: 'relative' },
thumb: { width: CARD_WIDTH, height: CARD_WIDTH * 0.5625 },
durationBadge: { position: 'absolute', bottom: 4, right: 4, backgroundColor: 'rgba(0,0,0,0.6)', borderRadius: 3, paddingHorizontal: 4, paddingVertical: 1 },
durationText: { color: '#fff', fontSize: 10 },
card: {
width: CARD_WIDTH,
marginBottom: 6,
backgroundColor: "#fff",
borderRadius: 6,
overflow: "hidden",
},
thumbContainer: { position: "relative" },
thumb: {
width: CARD_WIDTH,
height: CARD_WIDTH * 0.5625,
backgroundColor: "#ddd",
},
durationBadge: {
position: "absolute",
bottom: 4,
right: 4,
borderRadius: 5,
paddingHorizontal: 4,
backgroundColor: "rgba(0,0,0,0.6)",
paddingVertical: 0,
},
durationText: { color: "#fff", fontSize: 10 },
info: { padding: 6 },
title: { fontSize: 12, color: '#212121', lineHeight: 16, height: 32, marginBottom: 4 },
meta: { flexDirection: 'row', alignItems: 'center', gap: 2 },
metaText: { fontSize: 11, color: '#999' },
owner: { fontSize: 11, color: '#999', marginTop: 2 },
title: {
fontSize: 12,
color: "#212121",
height: 33,
marginBottom: 4,
},
owner: { fontSize: 11, color: "#999", marginTop: 2 },
meta: {
position: "absolute",
bottom: 4,
left: 4,
paddingHorizontal: 4,
borderRadius: 5,
backgroundColor: "rgba(0,0,0,0.6)",
flexDirection: "row",
alignItems: "center",
paddingVertical: 0,
gap: 2,
},
metaText: { fontSize: 10, color: "#fff" },
});