Add File
This commit is contained in:
269
src/elderly/components/MemoryPlayer.tsx
Normal file
269
src/elderly/components/MemoryPlayer.tsx
Normal file
@@ -0,0 +1,269 @@
|
|||||||
|
import React, { useState } from 'react';
|
||||||
|
import { ThumbsUp, ThumbsDown, X, Maximize2, ChevronLeft, ChevronRight, Grid3x3 } from 'lucide-react';
|
||||||
|
import { MediaLibraryGrid } from './MediaLibraryGrid';
|
||||||
|
|
||||||
|
interface MediaItem {
|
||||||
|
id: string;
|
||||||
|
url: string;
|
||||||
|
type: 'photo' | 'video';
|
||||||
|
caption: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface MemoryPlayerProps {
|
||||||
|
mediaUrl?: string;
|
||||||
|
mediaType: 'photo' | 'video';
|
||||||
|
title?: string;
|
||||||
|
caption?: string;
|
||||||
|
mode?: 'pip' | 'fullscreen';
|
||||||
|
mediaList?: MediaItem[];
|
||||||
|
currentIndex?: number;
|
||||||
|
onLike?: () => void;
|
||||||
|
onDislike?: () => void;
|
||||||
|
onClose?: () => void;
|
||||||
|
onToggleMode?: () => void;
|
||||||
|
onNext?: () => void;
|
||||||
|
onPrevious?: () => void;
|
||||||
|
onSelectMedia?: (index: number) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 媒体播放组件
|
||||||
|
* 支持 PIP（画中画）和全屏模式
|
||||||
|
*/
|
||||||
|
export const MemoryPlayer: React.FC<MemoryPlayerProps> = ({
|
||||||
|
mediaUrl = '/placeholder-photo.jpg',
|
||||||
|
mediaType,
|
||||||
|
caption = '小米 2018 秋游',
|
||||||
|
mode = 'fullscreen',
|
||||||
|
mediaList = [],
|
||||||
|
currentIndex = 0,
|
||||||
|
onLike,
|
||||||
|
onDislike,
|
||||||
|
onClose,
|
||||||
|
onToggleMode,
|
||||||
|
onNext,
|
||||||
|
onPrevious,
|
||||||
|
onSelectMedia,
|
||||||
|
}) => {
|
||||||
|
const [liked, setLiked] = useState<boolean | null>(null);
|
||||||
|
const [showGrid, setShowGrid] = useState(false);
|
||||||
|
|
||||||
|
// 如果有素材库，使用当前索引的媒体
|
||||||
|
const currentMedia = mediaList.length > 0 ? mediaList[currentIndex] : null;
|
||||||
|
const displayUrl = currentMedia?.url || mediaUrl;
|
||||||
|
const displayType = currentMedia?.type || mediaType;
|
||||||
|
const displayCaption = currentMedia?.caption || caption;
|
||||||
|
|
||||||
|
const hasPrevious = mediaList.length > 0 && currentIndex > 0;
|
||||||
|
const hasNext = mediaList.length > 0 && currentIndex < mediaList.length - 1;
|
||||||
|
|
||||||
|
const handleLike = () => {
|
||||||
|
setLiked(true);
|
||||||
|
onLike?.();
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleDislike = () => {
|
||||||
|
setLiked(false);
|
||||||
|
onDislike?.();
|
||||||
|
};
|
||||||
|
|
||||||
|
const isPIP = mode === 'pip';
|
||||||
|
|
||||||
|
if (isPIP) {
|
||||||
|
// PIP 模式 - 小窗口在右上角
|
||||||
|
return (
|
||||||
|
<div className="fixed top-20 right-6 w-80 bg-white rounded-2xl shadow-2xl z-40 animate-fade-in overflow-hidden">
|
||||||
|
{/* 媒体内容 */}
|
||||||
|
<div className="relative bg-gray-200 aspect-video">
|
||||||
|
{mediaType === 'photo' ? (
|
||||||
|
<img
|
||||||
|
src={mediaUrl}
|
||||||
|
alt={caption}
|
||||||
|
className="w-full h-full object-cover"
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<video
|
||||||
|
src={mediaUrl}
|
||||||
|
controls
|
||||||
|
autoPlay
|
||||||
|
className="w-full h-full object-cover"
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* 工具栏 */}
|
||||||
|
<div className="absolute top-2 right-2 flex gap-2">
|
||||||
|
<button
|
||||||
|
onClick={onToggleMode}
|
||||||
|
className="p-2 bg-black bg-opacity-50 rounded-lg hover:bg-opacity-70 transition-colors"
|
||||||
|
aria-label="切换全屏"
|
||||||
|
>
|
||||||
|
<Maximize2 size={20} className="text-white" />
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={onClose}
|
||||||
|
className="p-2 bg-black bg-opacity-50 rounded-lg hover:bg-opacity-70 transition-colors"
|
||||||
|
aria-label="关闭"
|
||||||
|
>
|
||||||
|
<X size={20} className="text-white" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 标题 */}
|
||||||
|
<div className="p-3">
|
||||||
|
<p className="text-sm font-medium text-gray-900 truncate">{caption}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 全屏模式 - 照片/视频占满屏幕，数字人小圆圈在右下角
|
||||||
|
return (
|
||||||
|
<div className="fixed inset-0 bg-black z-50 animate-fade-in">
|
||||||
|
{/* 媒体内容区 - 占满整个屏幕 */}
|
||||||
|
<div className="absolute inset-0 flex items-center justify-center p-6">
|
||||||
|
{displayType === 'photo' ? (
|
||||||
|
<img
|
||||||
|
src={displayUrl}
|
||||||
|
alt={displayCaption}
|
||||||
|
className="max-w-full max-h-full object-contain"
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<video
|
||||||
|
src={displayUrl}
|
||||||
|
controls
|
||||||
|
autoPlay
|
||||||
|
className="max-w-full max-h-full object-contain"
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 左侧切换按钮 */}
|
||||||
|
{hasPrevious && (
|
||||||
|
<button
|
||||||
|
onClick={onPrevious}
|
||||||
|
className="absolute left-4 top-1/2 -translate-y-1/2 z-20 w-16 h-16 bg-black/60 hover:bg-black/80 backdrop-blur-sm text-white rounded-full shadow-2xl active:scale-95 transition-all flex items-center justify-center"
|
||||||
|
aria-label="上一张"
|
||||||
|
>
|
||||||
|
<ChevronLeft size={40} strokeWidth={2.5} />
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* 右侧切换按钮 */}
|
||||||
|
{hasNext && (
|
||||||
|
<button
|
||||||
|
onClick={onNext}
|
||||||
|
className="absolute right-4 top-1/2 -translate-y-1/2 z-20 w-16 h-16 bg-black/60 hover:bg-black/80 backdrop-blur-sm text-white rounded-full shadow-2xl active:scale-95 transition-all flex items-center justify-center"
|
||||||
|
aria-label="下一张"
|
||||||
|
>
|
||||||
|
<ChevronRight size={40} strokeWidth={2.5} />
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* 标题和进度 - 顶部悬浮 */}
|
||||||
|
{displayCaption && (
|
||||||
|
<div className="absolute top-6 left-0 right-0 z-10 flex flex-col items-center gap-2 px-6">
|
||||||
|
<p className="text-elderly-xl font-bold text-white bg-black/60 backdrop-blur-sm px-6 py-3 rounded-2xl">
|
||||||
|
{displayCaption}
|
||||||
|
</p>
|
||||||
|
{mediaList.length > 0 && (
|
||||||
|
<p className="text-base text-white bg-black/40 backdrop-blur-sm px-4 py-2 rounded-full">
|
||||||
|
{currentIndex + 1} / {mediaList.length}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* 数字人小圆圈 - 右上角悬浮 */}
|
||||||
|
<div className="absolute top-20 right-6 z-20">
|
||||||
|
<div className="relative">
|
||||||
|
{/* 数字人圆圈 */}
|
||||||
|
<div className="w-24 h-24 rounded-full bg-gradient-to-br from-primary-400 to-primary-500 shadow-2xl flex items-center justify-center border-4 border-white/30 backdrop-blur-sm animate-breathe">
|
||||||
|
<div className="text-5xl">👤</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 提示文字 */}
|
||||||
|
<div className="absolute -bottom-10 right-0 bg-white/90 backdrop-blur-sm px-3 py-1.5 rounded-full shadow-lg whitespace-nowrap">
|
||||||
|
<p className="text-xs font-medium text-gray-700">随时问我</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 底部操作栏 - 悬浮 */}
|
||||||
|
<div className="absolute bottom-0 left-0 right-0 z-10 bg-gradient-to-t from-black/70 to-transparent backdrop-blur-md p-4">
|
||||||
|
<div className="flex items-center justify-center gap-4 max-w-lg mx-auto">
|
||||||
|
{/* 喜欢按钮 */}
|
||||||
|
<button
|
||||||
|
onClick={handleLike}
|
||||||
|
className={`
|
||||||
|
${liked === true ? 'bg-green-600' : 'bg-green-500 hover:bg-green-600'}
|
||||||
|
text-white
|
||||||
|
flex items-center justify-center gap-2
|
||||||
|
px-6 py-4
|
||||||
|
rounded-2xl
|
||||||
|
shadow-xl
|
||||||
|
active:scale-95
|
||||||
|
transition-all
|
||||||
|
flex-1
|
||||||
|
`}
|
||||||
|
>
|
||||||
|
<ThumbsUp size={28} strokeWidth={2.5} />
|
||||||
|
<span className="text-lg font-bold">喜欢</span>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{/* 不喜欢按钮 */}
|
||||||
|
<button
|
||||||
|
onClick={handleDislike}
|
||||||
|
className={`
|
||||||
|
${liked === false ? 'bg-red-600' : 'bg-red-500 hover:bg-red-600'}
|
||||||
|
text-white
|
||||||
|
flex items-center justify-center gap-2
|
||||||
|
px-6 py-4
|
||||||
|
rounded-2xl
|
||||||
|
shadow-xl
|
||||||
|
active:scale-95
|
||||||
|
transition-all
|
||||||
|
flex-1
|
||||||
|
`}
|
||||||
|
>
|
||||||
|
<ThumbsDown size={28} strokeWidth={2.5} />
|
||||||
|
<span className="text-lg font-bold">不喜欢</span>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{/* 网格视图按钮 */}
|
||||||
|
{mediaList.length > 0 && (
|
||||||
|
<button
|
||||||
|
onClick={() => setShowGrid(true)}
|
||||||
|
className="bg-blue-600 hover:bg-blue-700 text-white p-4 rounded-2xl shadow-xl active:scale-95 transition-all"
|
||||||
|
aria-label="查看全部"
|
||||||
|
>
|
||||||
|
<Grid3x3 size={28} strokeWidth={2.5} />
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* 关闭按钮 */}
|
||||||
|
<button
|
||||||
|
onClick={onClose}
|
||||||
|
className="bg-gray-700 hover:bg-gray-800 text-white p-4 rounded-2xl shadow-xl active:scale-95 transition-all"
|
||||||
|
aria-label="关闭"
|
||||||
|
>
|
||||||
|
<X size={28} strokeWidth={2.5} />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 网格视图弹窗 */}
|
||||||
|
{showGrid && (
|
||||||
|
<MediaLibraryGrid
|
||||||
|
mediaList={mediaList}
|
||||||
|
currentIndex={currentIndex}
|
||||||
|
onSelect={(index) => {
|
||||||
|
onSelectMedia?.(index);
|
||||||
|
setShowGrid(false);
|
||||||
|
}}
|
||||||
|
onClose={() => setShowGrid(false)}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
Reference in New Issue
Block a user