@spacecorexdev/core 0.0.2 → 0.0.5

package/src/ui/UIFilePreview/filetypes/video.tsx

@@ -0,0 +1,482 @@
+import React, { useState, useRef, useEffect, useCallback } from 'react';
+import { PlayCircleOutlined, LoadingOutlined, ReloadOutlined, PauseCircleOutlined } from '@ant-design/icons';
+import { AuthorizationHandler } from '../../../api/_base';
+import { Button } from 'antd';
+
+export interface VideoPreviewProps {
+  previewUrl: string;
+  type: string;
+}
+
+export const VideoPreview: React.FC<VideoPreviewProps> = ({ previewUrl, type }) => {
+  const [isLoading, setIsLoading] = useState(false);
+  const [isLoaded, setIsLoaded] = useState(false);
+  const [isError, setIsError] = useState(false);
+  const [hasInteracted, setHasInteracted] = useState(false);
+  const [playbackRate, setPlaybackRate] = useState(1);
+  const [posterBlobUrl, setPosterBlobUrl] = useState<string | null>(null);
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [bufferProgress, setBufferProgress] = useState(0);
+  const videoRef = useRef<HTMLVideoElement>(null);
+
+  // 获取带有 Authorization header 的请求头
+  const getAuthHeaders = useCallback(() => {
+    const headers: Record<string, string> = {};
+    const handler = {
+      headers: {
+        set: (key: string, value: string) => {
+          headers[key] = value;
+        },
+      } as any,
+    };
+    AuthorizationHandler.requestHandleSid(handler);
+    return headers;
+  }, []);
+
+  // 尝试获取视频缩略图
+  useEffect(() => {
+    if (type !== 'video') return;
+
+    const generatePoster = async () => {
+      const headers = getAuthHeaders();
+      
+      try {
+        // 使用 HEAD 请求获取文件信息（避免下载完整文件）
+        const headResponse = await fetch(previewUrl, {
+          method: 'HEAD',
+          headers: { Authorization: headers.Authorization || '' },
+        });
+
+        if (!headResponse.ok) {
+          console.warn('HEAD request failed, trying GET for poster');
+          return;
+        }
+
+        // 尝试获取视频第一帧（使用 Range 请求只获取部分数据）
+        const rangeResponse = await fetch(previewUrl, {
+          method: 'GET',
+          headers: {
+            Authorization: headers.Authorization || '',
+            Range: 'bytes=0-102400', // 获取前 100KB
+          },
+        });
+
+        if (!rangeResponse.ok && rangeResponse.status !== 206) {
+          console.warn('Failed to fetch video header for poster');
+          return;
+        }
+
+        const blob = await rangeResponse.blob();
+        const videoUrl = URL.createObjectURL(blob);
+
+        const video = document.createElement('video');
+        video.crossOrigin = 'anonymous';
+        video.src = videoUrl;
+
+        try {
+          await new Promise<void>((resolve, reject) => {
+            video.onloadedmetadata = () => {
+              video.currentTime = 0.1;
+              resolve();
+            };
+            video.onerror = reject;
+          });
+
+          await new Promise<void>((resolve) => {
+            video.onseeked = () => resolve();
+          });
+
+          const canvas = document.createElement('canvas');
+          canvas.width = video.videoWidth || 640;
+          canvas.height = video.videoHeight || 360;
+          const ctx = canvas.getContext('2d');
+          if (ctx) {
+            ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
+            const posterUrl = canvas.toDataURL('image/jpeg', 0.7);
+            setPosterBlobUrl(posterUrl);
+          }
+        } catch (error) {
+          console.warn('Failed to generate video poster:', error);
+        } finally {
+          URL.revokeObjectURL(videoUrl);
+        }
+      } catch (error) {
+        console.warn('Failed to fetch video for poster:', error);
+      }
+    };
+
+    generatePoster();
+  }, [previewUrl, type, getAuthHeaders]);
+
+  const handlePlayClick = async () => {
+    if (isError) {
+      setIsError(false);
+      setIsLoading(true);
+      setHasInteracted(true);
+      await setupStreamedVideo();
+      return;
+    }
+
+    setHasInteracted(true);
+    setIsLoading(true);
+    await setupStreamedVideo();
+  };
+
+  // 设置流式视频加载
+  const setupStreamedVideo = async () => {
+    try {
+      const headers = getAuthHeaders();
+      
+      // 先检查服务器是否支持 Range 请求（流式加载的关键）
+      const headResponse = await fetch(previewUrl, {
+        method: 'HEAD',
+        headers: { Authorization: headers.Authorization || '' },
+      });
+
+      const acceptRanges = headResponse.headers.get('accept-ranges');
+      const contentLength = headResponse.headers.get('content-length');
+      
+      console.log(`Server supports ranges: ${acceptRanges}`);
+      console.log(`Content length: ${contentLength}`);
+
+      // 创建支持流式播放的视频源
+      const videoSource = document.createElement('source');
+      videoSource.src = previewUrl;
+      
+      // 如果服务器支持范围请求，视频将自动流式加载
+      if (videoRef.current) {
+        // 清除现有源
+        while (videoRef.current.firstChild) {
+          videoRef.current.removeChild(videoRef.current.firstChild);
+        }
+        videoRef.current.appendChild(videoSource);
+        
+        // 设置跨域和认证头
+        videoRef.current.crossOrigin = 'use-credentials';
+        
+        // 加载视频
+        await videoRef.current.load();
+        
+        setIsLoading(false);
+        setIsLoaded(true);
+        setIsPlaying(true);
+        
+        // 尝试播放（可能因浏览器策略失败，需要用户交互）
+        videoRef.current.play().catch(() => {});
+      }
+    } catch (error) {
+      console.error('Video setup error:', error);
+      // 降级到完整下载模式
+      await fallbackToFullDownload();
+    }
+  };
+
+  // 降级方案：完整下载后播放
+  const fallbackToFullDownload = async () => {
+    try {
+      const headers = getAuthHeaders();
+      
+      const response = await fetch(previewUrl, {
+        headers: { Authorization: headers.Authorization || '' },
+        method: 'GET',
+      });
+
+      if (!response.ok) {
+        throw new Error(`视频加载失败，状态码: ${response.status}`);
+      }
+
+      const blob = await response.blob();
+      const url = URL.createObjectURL(blob);
+      
+      if (videoRef.current) {
+        videoRef.current.src = url;
+        await videoRef.current.load();
+        setIsLoading(false);
+        setIsLoaded(true);
+        setIsPlaying(true);
+        videoRef.current.play().catch(() => {});
+      }
+
+      // 清理：组件卸载时释放 blob URL
+      return () => {
+        URL.revokeObjectURL(url);
+      };
+    } catch (error) {
+      console.error('Fallback download error:', error);
+      setIsLoading(false);
+      setIsError(true);
+    }
+  };
+
+  const handleVideoProgress = () => {
+    if (videoRef.current) {
+      const buffered = videoRef.current.buffered;
+      const duration = videoRef.current.duration;
+      
+      if (buffered.length > 0 && duration > 0) {
+        const bufferedEnd = buffered.end(buffered.length - 1);
+        const percent = Math.min((bufferedEnd / duration) * 100, 100);
+        setBufferProgress(percent);
+        
+        // 检测是否缓冲完成
+        if (percent >= 99) {
+          console.log('Video fully buffered');
+        }
+      }
+    }
+  };
+
+  const handleVideoLoaded = () => {
+    setIsLoading(false);
+    setIsLoaded(true);
+  };
+
+  const handleVideoError = () => {
+    console.error('Video element error');
+    setIsLoading(false);
+    setIsError(true);
+  };
+
+  const handleVideoPlay = () => {
+    setIsPlaying(true);
+  };
+
+  const handleVideoPause = () => {
+    setIsPlaying(false);
+  };
+
+  const handlePlaybackRateChange = (rate: number) => {
+    setPlaybackRate(rate);
+    if (videoRef.current) {
+      videoRef.current.playbackRate = rate;
+    }
+  };
+
+  const togglePlayPause = () => {
+    if (videoRef.current) {
+      if (isPlaying) {
+        videoRef.current.pause();
+      } else {
+        videoRef.current.play().catch(() => {});
+      }
+    }
+  };
+
+  if (type !== 'video') return null;
+
+  return (
+    <div style={{ 
+      width: '100%', 
+      height: '100%',
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      background: '#000',
+      position: 'relative',
+    }}>
+      {/* 视频元素 - 支持流式加载 */}
+      <video
+        ref={videoRef}
+        controls
+        preload="metadata"
+        onLoadedData={handleVideoLoaded}
+        onError={handleVideoError}
+        onProgress={handleVideoProgress}
+        onPlay={handleVideoPlay}
+        onPause={handleVideoPause}
+        style={{
+          maxWidth: '100%',
+          maxHeight: 'calc(100vh - 40px)',
+          objectFit: 'contain',
+          display: hasInteracted && !isLoading && !isError ? 'block' : 'none',
+        }}
+        crossOrigin="use-credentials"
+      />
+
+      {/* 缓冲进度条 */}
+      {isPlaying && bufferProgress > 0 && bufferProgress < 100 && (
+        <div 
+          style={{
+            position: 'absolute',
+            bottom: '45px',
+            left: '20px',
+            right: '20px',
+            height: '4px',
+            backgroundColor: 'rgba(255, 255, 255, 0.3)',
+            borderRadius: '2px',
+          }}
+        >
+          <div 
+            style={{
+              height: '100%',
+              backgroundColor: '#1890ff',
+              borderRadius: '2px',
+              transition: 'width 0.3s ease',
+              width: `${bufferProgress}%`,
+            }}
+          />
+        </div>
+      )}
+
+      {/* 缩略图/加载遮罩 */}
+      {!hasInteracted || isLoading || isError ? (
+        <div 
+          style={{
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            display: 'flex',
+            flexDirection: 'column',
+            justifyContent: 'center',
+            alignItems: 'center',
+            background: '#1a1a1a',
+          }}
+        >
+          {/* 缩略图 */}
+          {!isLoading && !isError && (
+            <img
+              src={posterBlobUrl || 'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 72"%3E%3Crect fill="%232a2a2a" width="128" height="72"/%3E%3Ctext fill="%234a4a4a" font-family="sans-serif" font-size="12" x="50%25" y="50%25" text-anchor="middle" dominant-baseline="middle"%3E视频预览%3C/text%3E%3C/svg%3E'}
+              alt="Video preview"
+              style={{
+                maxWidth: '100%',
+                maxHeight: 'calc(100vh - 200px)',
+                objectFit: 'contain',
+              }}
+            />
+          )}
+
+          {/* 加载状态 */}
+          {isLoading && (
+            <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 16 }}>
+              <LoadingOutlined style={{ fontSize: 48, color: '#1890ff' }} spin />
+              <span style={{ color: '#999', fontSize: 14 }}>正在准备视频...</span>
+            </div>
+          )}
+
+          {/* 错误状态 */}
+          {isError && (
+            <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 16 }}>
+              <div style={{ fontSize: 48, color: '#ff4d4f' }}>
+                <svg viewBox="0 0 24 24" fill="currentColor">
+                  <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/>
+                </svg>
+              </div>
+              <span style={{ color: '#ff4d4f', fontSize: 14 }}>视频加载失败</span>
+              <Button
+                type="primary"
+                onClick={handlePlayClick}
+                style={{
+                  padding: '8px 16px',
+                  color: '#fff',
+                  border: 'none',
+                  borderRadius: '4px',
+                  cursor: 'pointer',
+                  display: 'flex',
+                  alignItems: 'center',
+                  gap: 8,
+                }}
+              >
+                <ReloadOutlined />
+                重试加载
+              </Button>
+            </div>
+          )}
+
+          {/* 播放按钮 */}
+          {!isLoading && !isError && (
+            <Button
+              type="primary"
+              onClick={handlePlayClick}
+              style={{
+                position: 'absolute',
+                width: '80px',
+                height: '80px',
+                borderRadius: '50%',
+                backgroundColor: 'rgba(24, 144, 255, 0.9)',
+                border: 'none',
+                cursor: 'pointer',
+                display: 'flex',
+                justifyContent: 'center',
+                alignItems: 'center',
+                transition: 'transform 0.2s',
+              }}
+              onMouseEnter={(e) => {
+                (e.currentTarget as HTMLElement).style.transform = 'scale(1.1)';
+              }}
+              onMouseLeave={(e) => {
+                (e.currentTarget as HTMLElement).style.transform = 'scale(1)';
+              }}
+            >
+              <PlayCircleOutlined style={{ fontSize: 48, color: '#fff' }} />
+            </Button>
+          )}
+        </div>
+      ) : null}
+
+      {/* 播放/暂停切换按钮（视频加载后显示在中央） */}
+      {isLoaded && (
+        <Button
+          type="text"
+          onClick={togglePlayPause}
+          style={{
+            position: 'absolute',
+            width: '60px',
+            height: '60px',
+            borderRadius: '50%',
+            backgroundColor: 'rgba(0, 0, 0, 0.6)',
+            border: 'none',
+            cursor: 'pointer',
+            display: 'none',
+            justifyContent: 'center',
+            alignItems: 'center',
+            transition: 'opacity 0.3s',
+          }}
+          className="video-overlay-play-btn"
+        >
+          {isPlaying ? (
+            <PauseCircleOutlined style={{ fontSize: 36, color: '#fff' }} />
+          ) : (
+            <PlayCircleOutlined style={{ fontSize: 36, color: '#fff' }} />
+          )}
+        </Button>
+      )}
+
+      {/* 播放速度控制 */}
+      {isLoaded && (
+        <div 
+          style={{
+            position: 'absolute',
+            bottom: '60px',
+            right: '20px',
+            backgroundColor: 'rgba(0, 0, 0, 0.7)',
+            padding: '4px',
+            borderRadius: '4px',
+            display: 'flex',
+            gap: '4px',
+          }}
+        >
+          {[0.5, 1, 1.25, 1.5, 2].map((rate) => (
+            <Button
+              type="text"
+              key={rate}
+              onClick={() => handlePlaybackRateChange(rate)}
+              style={{
+                padding: '4px 8px',
+                backgroundColor: playbackRate === rate ? '#1890ff' : 'transparent',
+                color: '#fff',
+                border: 'none',
+                borderRadius: '2px',
+                fontSize: '12px',
+                cursor: 'pointer',
+              }}
+            >
+              {rate}x
+            </Button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};