feat: unified player controls with heatmap progress + thumbnail preview

- VideoPlayer: 移除 onProgress/seekTo props，新增 bvid/cid 向下透传
- [bvid].tsx: 删除 HeatProgressBar 及 currentTime/duration/seekCmd state
- HeatProgressBar.tsx: 删除（逻辑已合并进 NativeVideoPlayer）
- 计划文档已保存到 docs/superpowers/plans/

components/HeatProgressBar.tsx

@@ -1,289 +0,0 @@
-import React, { useEffect, useRef, useState, useCallback } from 'react';
-import {
-  View, Image, Text, StyleSheet, Dimensions, PanResponder,
-} from 'react-native';
-import { getHeatmap, getVideoShot } from '../services/bilibili';
-import type { VideoShotData } from '../services/types';
-
-const { width: SCREEN_WIDTH } = Dimensions.get('window');
-const BAR_H = 4;
-const BALL_SIZE = 12;
-const THUMB_PREVIEW_H = 60; // space above bar for thumbnail
-const CONTAINER_H = THUMB_PREVIEW_H + 16 + BAR_H + BALL_SIZE;
-const SEGMENTS = 120;
-
-function clamp(v: number, lo: number, hi: number) {
-  return Math.max(lo, Math.min(hi, v));
-}
-
-function heatColor(v: number): string {
-  if (v < 0.5) {
-    const t = v * 2;
-    const r = Math.round(t * 255);
-    return `rgb(${r},174,236)`;
-  }
-  const t = (v - 0.5) * 2;
-  const g = Math.round((1 - t) * 114);
-  const b = Math.round((1 - t) * 153);
-  return `rgb(251,${g},${b})`;
-}
-
-function decodeFloats(base64: string): number[] {
-  const binary = atob(base64);
-  const bytes = new Uint8Array(binary.length);
-  for (let i = 0; i < binary.length; i++) bytes[i] = binary.charCodeAt(i);
-  const view = new DataView(bytes.buffer);
-  const floats: number[] = [];
-  let i = 0;
-  while (i < bytes.length) {
-    const tag = bytes[i++];
-    const wireType = tag & 0x7;
-    if (wireType === 5) {
-      floats.push(view.getFloat32(i, true));
-      i += 4;
-    } else if (wireType === 0) {
-      while (i < bytes.length && (bytes[i++] & 0x80));
-    } else if (wireType === 1) {
-      i += 8;
-    } else if (wireType === 2) {
-      let len = 0, shift = 0;
-      do {
-        const b = bytes[i++];
-        len |= (b & 0x7f) << shift;
-        shift += 7;
-        if (!(b & 0x80)) break;
-      } while (true);
-      i += len;
-    } else {
-      break;
-    }
-  }
-  return floats;
-}
-
-function downsample(data: number[], n: number): number[] {
-  if (data.length === 0) return Array(n).fill(0);
-  const result: number[] = [];
-  for (let i = 0; i < n; i++) {
-    const idx = Math.floor((i / n) * data.length);
-    result.push(data[idx]);
-  }
-  const max = Math.max(...result);
-  if (max === 0) return result;
-  return result.map(v => v / max);
-}
-
-interface Props {
-  bvid: string;
-  cid: number;
-  currentTime: number;
-  duration: number;
-  onSeek: (t: number) => void;
-}
-
-export function HeatProgressBar({ bvid, cid, currentTime, duration, onSeek }: Props) {
-  const [segments, setSegments] = useState<number[]>([]);
-  const [shots, setShots] = useState<VideoShotData | null>(null);
-  const [touchX, setTouchX] = useState<number | null>(null);
-  const barX = useRef(0);
-
-  useEffect(() => {
-    let cancelled = false;
-    Promise.all([getHeatmap(bvid), getVideoShot(bvid, cid)]).then(([heatmap, shotData]) => {
-      if (cancelled) return;
-      if (heatmap?.pb_data) {
-        try {
-          const floats = decodeFloats(heatmap.pb_data);
-          setSegments(downsample(floats, SEGMENTS));
-        } catch {
-          setSegments([]);
-        }
-      }
-      if (shotData?.image?.length) setShots(shotData);
-    });
-    return () => { cancelled = true; };
-  }, [bvid, cid]);
-
-  const panResponder = useRef(
-    PanResponder.create({
-      onStartShouldSetPanResponder: () => true,
-      onMoveShouldSetPanResponder: () => true,
-      onPanResponderGrant: (_, gs) => {
-        setTouchX(gs.x0 - barX.current);
-      },
-      onPanResponderMove: (_, gs) => {
-        setTouchX(gs.moveX - barX.current);
-      },
-      onPanResponderRelease: (_, gs) => {
-        const relX = gs.moveX - barX.current;
-        const ratio = clamp(relX / BAR_WIDTH, 0, 1);
-        onSeek(ratio * duration);
-        setTouchX(null);
-      },
-      onPanResponderTerminate: () => setTouchX(null),
-    })
-  ).current;
-
-  const BAR_WIDTH = SCREEN_WIDTH - 32;
-  const progressRatio = duration > 0 ? clamp(currentTime / duration, 0, 1) : 0;
-  const touchRatio = touchX !== null ? clamp(touchX / BAR_WIDTH, 0, 1) : null;
-
-  const renderThumbnail = () => {
-    if (touchRatio === null || !shots) return null;
-    const THUMB_W = shots.img_x_size;
-    const THUMB_H = shots.img_y_size;
-    const totalFrames = shots.img_x_len * shots.img_y_len * shots.image.length;
-    const framesPerSheet = shots.img_x_len * shots.img_y_len;
-    const frameIdx = Math.floor(touchRatio * (totalFrames - 1));
-    const sheetIdx = Math.floor(frameIdx / framesPerSheet);
-    const local = frameIdx % framesPerSheet;
-    const col = local % shots.img_x_len;
-    const row = Math.floor(local / shots.img_x_len);
-    const thumbLeft = clamp((touchX ?? 0) - THUMB_W / 2, 0, BAR_WIDTH - THUMB_W);
-
-    const timeLabel = formatTime(touchRatio * duration);
-
-    return (
-      <View style={[styles.thumbContainer, { left: thumbLeft, width: THUMB_W }]}>
-        <View style={{ width: THUMB_W, height: THUMB_H, overflow: 'hidden', borderRadius: 4 }}>
-          <Image
-            source={{ uri: shots.image[sheetIdx] }}
-            style={{
-              position: 'absolute',
-              width: THUMB_W * shots.img_x_len,
-              height: THUMB_H * shots.img_y_len,
-              left: -col * THUMB_W,
-              top: -row * THUMB_H,
-            }}
-          />
-        </View>
-        <Text style={styles.timeLabel}>{timeLabel}</Text>
-      </View>
-    );
-  };
-
-  const renderTouchIndicator = () => {
-    if (touchRatio === null) return null;
-    return (
-      <View style={[styles.touchBall, { left: touchRatio * BAR_WIDTH - BALL_SIZE / 2 }]} />
-    );
-  };
-
-  return (
-    <View
-      style={styles.wrapper}
-      onLayout={e => { barX.current = e.nativeEvent.layout.x + 16; }}
-    >
-      {renderThumbnail()}
-
-      <View
-        style={styles.barArea}
-        {...panResponder.panHandlers}
-      >
-        <View style={styles.barTrack}>
-          {segments.length > 0 ? (
-            segments.map((v, i) => (
-              <View
-                key={i}
-                style={[
-                  styles.segment,
-                  { backgroundColor: heatColor(v), width: `${100 / SEGMENTS}%` },
-                ]}
-              />
-            ))
-          ) : (
-            <View style={[styles.segment, { flex: 1, backgroundColor: '#00AEEC' }]} />
-          )}
-          {/* played overlay */}
-          <View
-            style={[
-              styles.playedOverlay,
-              { width: `${progressRatio * 100}%` },
-            ]}
-          />
-        </View>
-
-        {/* progress ball */}
-        <View
-          style={[styles.progressBall, { left: progressRatio * BAR_WIDTH - BALL_SIZE / 2 }]}
-        />
-
-        {renderTouchIndicator()}
-      </View>
-    </View>
-  );
-}
-
-function formatTime(s: number): string {
-  const m = Math.floor(s / 60);
-  const sec = Math.floor(s % 60);
-  return `${m}:${sec.toString().padStart(2, '0')}`;
-}
-
-const BAR_WIDTH = Dimensions.get('window').width - 32;
-
-const styles = StyleSheet.create({
-  wrapper: {
-    backgroundColor: '#fff',
-    paddingHorizontal: 16,
-    paddingBottom: 8,
-    paddingTop: 4,
-    overflow: 'visible',
-  },
-  barArea: {
-    height: BAR_H + BALL_SIZE,
-    justifyContent: 'center',
-    position: 'relative',
-  },
-  barTrack: {
-    height: BAR_H,
-    flexDirection: 'row',
-    borderRadius: 2,
-    overflow: 'hidden',
-    backgroundColor: '#e0e0e0',
-  },
-  segment: {
-    height: BAR_H,
-  },
-  playedOverlay: {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    height: BAR_H,
-    backgroundColor: 'rgba(255,255,255,0.3)',
-  },
-  progressBall: {
-    position: 'absolute',
-    top: (BAR_H + BALL_SIZE) / 2 - BALL_SIZE / 2,
-    width: BALL_SIZE,
-    height: BALL_SIZE,
-    borderRadius: BALL_SIZE / 2,
-    backgroundColor: '#fff',
-    borderWidth: 2,
-    borderColor: '#00AEEC',
-    shadowColor: '#000',
-    shadowOpacity: 0.2,
-    shadowRadius: 2,
-    elevation: 2,
-  },
-  touchBall: {
-    position: 'absolute',
-    top: (BAR_H + BALL_SIZE) / 2 - BALL_SIZE / 2,
-    width: BALL_SIZE,
-    height: BALL_SIZE,
-    borderRadius: BALL_SIZE / 2,
-    backgroundColor: '#00AEEC',
-    opacity: 0.8,
-  },
-  thumbContainer: {
-    position: 'absolute',
-    top: -THUMB_PREVIEW_H - 4,
-    alignItems: 'center',
-  },
-  timeLabel: {
-    fontSize: 11,
-    color: '#212121',
-    marginTop: 2,
-    fontWeight: '600',
-  },
-});

components/VideoPlayer.tsx

@@ -1,6 +1,5 @@
 import React, { useState } from 'react';
-import { View, StyleSheet, Dimensions, Text, Platform, Modal, TouchableOpacity, StatusBar } from 'react-native';
-import { Ionicons } from '@expo/vector-icons';
+import { View, StyleSheet, Dimensions, Text, Platform, Modal, StatusBar } from 'react-native';
 import { NativeVideoPlayer } from './NativeVideoPlayer';
 import type { PlayUrlResponse } from '../services/types';
 
@@ -13,11 +12,11 @@ interface Props {
   currentQn: number;
   onQualityChange: (qn: number) => void;
   onMiniPlayer?: () => void;
-  onProgress?: (currentTime: number, duration: number) => void;
-  seekTo?: { t: number; v: number };
+  bvid?: string;
+  cid?: number;
 }
 
-export function VideoPlayer({ playData, qualities, currentQn, onQualityChange, onMiniPlayer, onProgress, seekTo }: Props) {
+export function VideoPlayer({ playData, qualities, currentQn, onQualityChange, onMiniPlayer, bvid, cid }: Props) {
   const [fullscreen, setFullscreen] = useState(false);
 
   if (!playData) {
@@ -51,8 +50,8 @@ export function VideoPlayer({ playData, qualities, currentQn, onQualityChange, o
         onQualityChange={onQualityChange}
         onFullscreen={() => setFullscreen(true)}
         onMiniPlayer={onMiniPlayer}
-        onProgress={onProgress}
-        seekTo={seekTo}
+        bvid={bvid}
+        cid={cid}
       />
 
       <Modal visible={fullscreen} animationType="fade" statusBarTranslucent>
@@ -64,13 +63,10 @@ export function VideoPlayer({ playData, qualities, currentQn, onQualityChange, o
             currentQn={currentQn}
             onQualityChange={onQualityChange}
             onFullscreen={() => setFullscreen(false)}
+            bvid={bvid}
+            cid={cid}
             style={{ width: '100%', height: '100%' } as any}
-            onProgress={onProgress}
-            seekTo={seekTo}
           />
-          <TouchableOpacity style={styles.closeBtn} onPress={() => setFullscreen(false)}>
-            <Ionicons name="close" size={28} color="#fff" />
-          </TouchableOpacity>
         </View>
       </Modal>
     </>
@@ -82,12 +78,4 @@ const styles = StyleSheet.create({
   placeholder: { justifyContent: 'center', alignItems: 'center' },
   placeholderText: { color: '#fff', fontSize: 14 },
   fullscreenContainer: { flex: 1, backgroundColor: '#000' },
-  closeBtn: {
-    position: 'absolute',
-    top: 40,
-    right: 16,
-    padding: 8,
-    backgroundColor: 'rgba(0,0,0,0.4)',
-    borderRadius: 20,
-  },
 });