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

feat:二维码优化和保存

Browse Source
This commit is contained in:
Developer
2026-03-19 17:00:35 +08:00
parent 46796d3d6d
commit f1c040de68
5 changed files with 127 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

111
components/LoginModal.tsx
View File

@@ -7,7 +7,12 @@ import {
TouchableOpacity,
Image,
ActivityIndicator,
Animated,
Alert,
} from "react-native";
import * as FileSystem from "expo-file-system/legacy";
import * as MediaLibrary from "expo-media-library";
import { Ionicons } from "@expo/vector-icons";
import { generateQRCode, pollQRCode, getUserInfo } from "../services/bilibili";
import { useAuthStore } from "../store/authStore";
@@ -19,6 +24,8 @@ interface Props {
export function LoginModal({ visible, onClose }: Props) {
const [qrUrl, setQrUrl] = useState<string | null>(null);
const [qrKey, setQrKey] = useState<string | null>(null);
const [qrImageLoaded, setQrImageLoaded] = useState(false);
const [saving, setSaving] = useState(false);
const [status, setStatus] = useState<
"loading" | "waiting" | "scanned" | "done" | "error"
>("loading");
@@ -26,15 +33,31 @@ export function LoginModal({ visible, onClose }: Props) {
const login = useAuthStore((s) => s.login);
const setProfile = useAuthStore((s) => s.setProfile);
// sheet 滑入动画
const slideY = useRef(new Animated.Value(300)).current;
useEffect(() => {
if (visible) {
Animated.spring(slideY, {
toValue: 0,
useNativeDriver: true,
bounciness: 4,
}).start();
} else {
slideY.setValue(300);
}
}, [visible]);
useEffect(() => {
if (!visible) return;
setStatus("loading");
setQrUrl(null);
setQrKey(null);
setQrImageLoaded(false);
generateQRCode()
.then((data) => {
setQrUrl(
`https://api.qrserver.com/v1/create-qr-code/?data=${encodeURIComponent(data.url)}&size=200x200`,
`https://api.qrserver.com/v1/create-qr-code/?data=${encodeURIComponent(data.url)}&size=400x400`,
);
setQrKey(data.qrcode_key);
setStatus("waiting");
@@ -60,7 +83,6 @@ export function LoginModal({ visible, onClose }: Props) {
try {
await login(result.cookie, "", "");
setStatus("done");
// 登录后异步拉取用户头像和昵称
const info = await getUserInfo();
setProfile(info.face, info.uname, String(info.mid));
} catch {
@@ -74,6 +96,26 @@ export function LoginModal({ visible, onClose }: Props) {
};
}, [qrKey, status]);
async function handleSaveQR() {
if (!qrUrl) return;
setSaving(true);
try {
const { status: perm } = await MediaLibrary.requestPermissionsAsync();
if (perm !== "granted") {
Alert.alert("提示", "需要相册权限才能保存图片");
return;
}
const dest = `${FileSystem.cacheDirectory}bilibili_qr.png`;
const { uri } = await FileSystem.downloadAsync(qrUrl, dest);
await MediaLibrary.saveToLibraryAsync(uri);
Alert.alert("已保存", "二维码已存入相册");
} catch {
Alert.alert("失败", "保存失败，请重试");
} finally {
setSaving(false);
}
}
return (
<Modal
visible={visible}
@@ -81,7 +123,13 @@ export function LoginModal({ visible, onClose }: Props) {
animationType="none"
onRequestClose={onClose}
>
<View style={styles.overlay}>
{/* 遮罩固定不动 */}
<View style={styles.overlay} pointerEvents="box-none" />
{/* sheet 独立滑入 */}
<Animated.View
style={[styles.sheetWrapper, { transform: [{ translateY: slideY }] }]}
>
<View style={styles.sheet}>
<Text style={styles.title}>扫码登录</Text>
{status === "loading" && (
@@ -93,7 +141,31 @@ export function LoginModal({ visible, onClose }: Props) {
)}
{(status === "waiting" || status === "scanned") && qrUrl && (
<>
<Image source={{ uri: qrUrl }} style={styles.qr} />
<View style={styles.qrWrapper}>
<Image
source={{ uri: qrUrl }}
style={styles.qr}
onLoad={() => setQrImageLoaded(true)}
/>
{!qrImageLoaded && (
<View style={styles.qrLoader}>
<ActivityIndicator size="large" color="#00AEEC" />
</View>
)}
{qrImageLoaded && (
<TouchableOpacity
style={styles.saveBtn}
onPress={handleSaveQR}
disabled={saving}
>
{saving ? (
<ActivityIndicator size="small" color="#fff" />
) : (
<Ionicons name="download-outline" size={16} color="#fff" />
)}
</TouchableOpacity>
)}
</View>
<Text style={styles.hint}>
{status === "scanned"
? "扫描成功，请在手机确认"
@@ -108,16 +180,21 @@ export function LoginModal({ visible, onClose }: Props) {
<Text style={styles.closeTxt}>关闭</Text>
</TouchableOpacity>
</View>
</View>
</Animated.View>
</Modal>
);
}
const styles = StyleSheet.create({
overlay: {
flex: 1,
...StyleSheet.absoluteFillObject,
backgroundColor: "rgba(0,0,0,0.5)",
justifyContent: "flex-end",
},
sheetWrapper: {
position: "absolute",
bottom: 0,
left: 0,
right: 0,
},
sheet: {
backgroundColor: "#fff",
@@ -128,7 +205,25 @@ const styles = StyleSheet.create({
},
title: { fontSize: 18, fontWeight: "600", marginBottom: 20 },
loader: { marginVertical: 40 },
qr: { width: 200, height: 200, marginBottom: 12 },
qrWrapper: { width: 200, height: 200, marginBottom: 12 },
qr: { width: 200, height: 200 },
qrLoader: {
...StyleSheet.absoluteFillObject,
alignItems: "center",
justifyContent: "center",
backgroundColor: "#f4f4f4",
},
saveBtn: {
position: "absolute",
bottom: 6,
right: 6,
backgroundColor: "rgba(0,0,0,0.45)",
borderRadius: 14,
width: 28,
height: 28,
alignItems: "center",
justifyContent: "center",
},
hint: { fontSize: 13, color: "#666", marginBottom: 20 },
closeBtn: { padding: 12 },
closeTxt: { fontSize: 14, color: "#00AEEC" },

15
components/NativeVideoPlayer.tsx
View File

@@ -413,7 +413,7 @@ export const NativeVideoPlayer = forwardRef<NativeVideoPlayerRef, Props>(
onQualityChange(80);
return;
}
console.warn('Video playback error:', e);
console.warn("Video playback error:", e);
}}
/>
) : (
@@ -441,8 +441,7 @@ export const NativeVideoPlayer = forwardRef<NativeVideoPlayerRef, Props>(
colors={["rgba(0,0,0,0.55)", "transparent"]}
style={styles.topBar}
pointerEvents="box-none"
>
</LinearGradient>
></LinearGradient>
<TouchableOpacity
style={styles.centerBtn}
@@ -580,7 +579,8 @@ export const NativeVideoPlayer = forwardRef<NativeVideoPlayerRef, Props>(
q.qn === currentQn && styles.qualityItemActive,
]}
>
{q.desc}{q.qn === 126 ? ' DV' : ''}
{q.desc}
{q.qn === 126 ? " DV" : ""}
</Text>
{q.qn === currentQn && (
<Ionicons name="checkmark" size={16} color="#00AEEC" />
@@ -684,7 +684,12 @@ const styles = StyleSheet.create({
marginTop: 4,
},
ctrlBtn: { paddingHorizontal: 8, paddingVertical: 4 },
timeText: { color: "#fff", fontSize: 11, marginHorizontal: 2 },
timeText: {
color: "#fff",
fontSize: 11,
marginHorizontal: 2,
fontWeight: "600",
},
qualityText: { color: "#fff", fontSize: 11, fontWeight: "600" },
modalOverlay: {
flex: 1,

97
package-lock.json generated
View File

@@ -16,11 +16,11 @@
"expo-dev-client": "~55.0.11",
"expo-file-system": "~55.0.10",
"expo-linear-gradient": "~55.0.8",
"expo-media-library": "~55.0.10",
"expo-router": "~55.0.4",
"expo-screen-orientation": "~55.0.8",
"expo-status-bar": "~55.0.4",
"expo-system-ui": "~55.0.9",
"fast-xml-parser": "^5.5.1",
"pako": "^2.1.0",
"react": "19.2.0",
"react-dom": "19.2.0",
@@ -31,7 +31,6 @@
"react-native-video": "^6.19.0",
"react-native-web": "^0.21.0",
"react-native-webview": "13.16.0",
"xml2js": "^0.6.2",
"zustand": "^5.0.11"
},
"devDependencies": {
@@ -4525,6 +4524,16 @@
"expo": "*"
}
},
"node_modules/expo-media-library": {
"version": "55.0.10",
"resolved": "https://registry.npmjs.org/expo-media-library/-/expo-media-library-55.0.10.tgz",
"integrity": "sha512-xXmz8Do9BJSt1LrkC6r8l2HAXNdaAr2TdzCuiVo9u47Vuo54twlOgzLpdx4rIzODy/cclqbYb2tae4nCKHJLbw==",
"license": "MIT",
"peerDependencies": {
"expo": "*",
"react-native": "*"
}
},
"node_modules/expo-modules-autolinking": {
"version": "55.0.8",
"resolved": "https://registry.npmjs.org/expo-modules-autolinking/-/expo-modules-autolinking-55.0.8.tgz",
@@ -5219,41 +5228,6 @@
"integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==",
"license": "MIT"
},
"node_modules/fast-xml-builder": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/fast-xml-builder/-/fast-xml-builder-1.1.0.tgz",
"integrity": "sha512-7mtITW/we2/wTUZqMyBOR2F8xP4CRxMiSEcQxPIqdRWdO2L/HZSOlzoNyghmyDwNB8BDxePooV1ZTJpkOUhdRg==",
"funding": [
{
"type": "github",
"url": "https://github.com/sponsors/NaturalIntelligence"
}
],
"license": "MIT",
"dependencies": {
"path-expression-matcher": "^1.1.2"
}
},
"node_modules/fast-xml-parser": {
"version": "5.5.1",
"resolved": "https://registry.npmjs.org/fast-xml-parser/-/fast-xml-parser-5.5.1.tgz",
"integrity": "sha512-JTpMz8P5mDoNYzXTmTT/xzWjFiCWi0U+UQTJtrFH9muXsr2RqtXZPbnCW5h2mKsOd4u3XcPWCvDSrnaBPlUcMQ==",
"funding": [
{
"type": "github",
"url": "https://github.com/sponsors/NaturalIntelligence"
}
],
"license": "MIT",
"dependencies": {
"fast-xml-builder": "^1.1.0",
"path-expression-matcher": "^1.1.2",
"strnum": "^2.1.2"
},
"bin": {
"fxparser": "src/cli/cli.js"
}
},
"node_modules/fb-dotslash": {
"version": "0.5.8",
"resolved": "https://registry.npmjs.org/fb-dotslash/-/fb-dotslash-0.5.8.tgz",
@@ -7410,21 +7384,6 @@
"node": ">=8"
}
},
"node_modules/path-expression-matcher": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/path-expression-matcher/-/path-expression-matcher-1.1.2.tgz",
"integrity": "sha512-LXWqJmcpp2BKOEmgt4CyuESFmBfPuhJlAHKJsFzuJU6CxErWk75BrO+Ni77M9OxHN6dCYKM4vj+21Z6cOL96YQ==",
"funding": [
{
"type": "github",
"url": "https://github.com/sponsors/NaturalIntelligence"
}
],
"license": "MIT",
"engines": {
"node": ">=14.0.0"
}
},
"node_modules/path-is-absolute": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
@@ -8764,18 +8723,6 @@
"node": ">=8"
}
},
"node_modules/strnum": {
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/strnum/-/strnum-2.2.0.tgz",
"integrity": "sha512-Y7Bj8XyJxnPAORMZj/xltsfo55uOiyHcU2tnAVzHUnSJR/KsEX+9RoDeXEnsXtl/CX4fAcrt64gZ13aGaWPeBg==",
"funding": [
{
"type": "github",
"url": "https://github.com/sponsors/NaturalIntelligence"
}
],
"license": "MIT"
},
"node_modules/structured-headers": {
"version": "0.4.1",
"resolved": "https://registry.npmjs.org/structured-headers/-/structured-headers-0.4.1.tgz",
@@ -9389,28 +9336,6 @@
"node": ">=10.0.0"
}
},
"node_modules/xml2js": {
"version": "0.6.2",
"resolved": "https://registry.npmjs.org/xml2js/-/xml2js-0.6.2.tgz",
"integrity": "sha512-T4rieHaC1EXcES0Kxxj4JWgaUQHDk+qwHcYOCFHfiwKz7tOVPLq7Hjq9dM1WCMhylqMEfP7hMcOIChvotiZegA==",
"license": "MIT",
"dependencies": {
"sax": ">=0.6.0",
"xmlbuilder": "~11.0.0"
},
"engines": {
"node": ">=4.0.0"
}
},
"node_modules/xml2js/node_modules/xmlbuilder": {
"version": "11.0.1",
"resolved": "https://registry.npmjs.org/xmlbuilder/-/xmlbuilder-11.0.1.tgz",
"integrity": "sha512-fDlsI/kFEx7gLvbecc0/ohLG50fugQp8ryHzMTuW9vSa1GJ0XYWKnhsUx7oie3G98+r56aTQIUB4kht42R3JvA==",
"license": "MIT",
"engines": {
"node": ">=4.0"
}
},
"node_modules/xmlbuilder": {
"version": "15.1.1",
"resolved": "https://registry.npmjs.org/xmlbuilder/-/xmlbuilder-15.1.1.tgz",

1
package.json
View File

@@ -18,6 +18,7 @@
"expo-dev-client": "~55.0.11",
"expo-file-system": "~55.0.10",
"expo-linear-gradient": "~55.0.8",
"expo-media-library": "~55.0.10",
"expo-router": "~55.0.4",
"expo-screen-orientation": "~55.0.8",
"expo-status-bar": "~55.0.4",

1
utils/format.ts
View File

@@ -1,6 +1,7 @@
export function formatCount(n: number): string {
if (n >= 100_000_000) return (n / 100_000_000).toFixed(1) + '亿';
if (n >= 10_000) return (n / 10_000).toFixed(1) + '万';
return String(n);
}