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-25 13:25:34 +08:00
parent 2afe5839f9
commit 0ffb331971
2 changed files with 28 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
components/LiveMiniPlayer.tsx
View File

@@ -49,14 +49,22 @@ export function LiveMiniPlayer() {
const { width: sw, height: sh } = Dimensions.get('window');
const curX = (pan.x as any)._value;
const curY = (pan.y as any)._value;
const clampedX = Math.max(-sw + MINI_W + 12, Math.min(12, curX));
// 吸附到左边缘或右边缘（取最近的一侧）
// container 默认 right:12，pan.x=0 为右侧，-(sw-MINI_W-24) 为左侧贴边
const snapRight = 0;
const snapLeft = -(sw - MINI_W - 24);
const snapX = curX < snapLeft / 2 ? snapLeft : snapRight;
// Y 轴仅做越界回弹，不吸附
const clampedY = Math.max(-sh + MINI_H + 60, Math.min(60, curY));
if (curX !== clampedX || curY !== clampedY) {
Animated.spring(pan, {
toValue: { x: clampedX, y: clampedY },
useNativeDriver: false,
}).start();
}
Animated.spring(pan, {
toValue: { x: snapX, y: clampedY },
useNativeDriver: false,
tension: 120,
friction: 10,
}).start();
},
}),
).current;

18
components/MiniPlayer.tsx
View File

@@ -28,15 +28,23 @@ export function MiniPlayer() {
onPanResponderMove: Animated.event([null, { dx: pan.x, dy: pan.y }], { useNativeDriver: false }),
onPanResponderRelease: () => {
pan.flattenOffset();
// Clamp to screen bounds
const { width: sw, height: sh } = Dimensions.get('window');
const curX = (pan.x as any)._value;
const curY = (pan.y as any)._value;
const clampedX = Math.max(-sw + MINI_W + 12, Math.min(12, curX));
// 吸附到左边缘或右边缘（取最近的一侧）
const snapRight = 0;
const snapLeft = -(sw - MINI_W - 24);
const snapX = curX < snapLeft / 2 ? snapLeft : snapRight;
const clampedY = Math.max(-sh + MINI_H + 60, Math.min(60, curY));
if (curX !== clampedX || curY !== clampedY) {
Animated.spring(pan, { toValue: { x: clampedX, y: clampedY }, useNativeDriver: false }).start();
}
Animated.spring(pan, {
toValue: { x: snapX, y: clampedY },
useNativeDriver: false,
tension: 120,
friction: 10,
}).start();
},
})
).current;