Add File
This commit is contained in:
300
src/elderly/components/MediaPlayer.tsx
Normal file
300
src/elderly/components/MediaPlayer.tsx
Normal file
@@ -0,0 +1,300 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { ThumbsUp, ThumbsDown, X, Grid3x3 } from 'lucide-react';
|
||||
import * as mediaService from '../services/mediaService';
|
||||
import { MediaLibraryGrid } from './MediaLibraryGrid';
|
||||
|
||||
interface MediaPlayerProps {
|
||||
familyId: string;
|
||||
elderlyId: number;
|
||||
currentMood?: string;
|
||||
onClose?: () => void;
|
||||
}
|
||||
|
||||
/**
|
||||
* 老人端媒体播放器组件
|
||||
* 自动获取推荐媒体并播放，支持点赞/点踩反馈
|
||||
*/
|
||||
export const MediaPlayer: React.FC<MediaPlayerProps> = ({
|
||||
familyId,
|
||||
elderlyId,
|
||||
currentMood,
|
||||
onClose,
|
||||
}) => {
|
||||
const [recommendedMedia, setRecommendedMedia] = useState<mediaService.RecommendedMedia[]>([]);
|
||||
const [currentIndex, setCurrentIndex] = useState(0);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [playStartTime, setPlayStartTime] = useState<Date | null>(null);
|
||||
const [hasGivenFeedback, setHasGivenFeedback] = useState(false);
|
||||
const [showGrid, setShowGrid] = useState(false);
|
||||
|
||||
// 加载推荐媒体
|
||||
useEffect(() => {
|
||||
loadRecommendedMedia();
|
||||
}, [familyId, elderlyId, currentMood]);
|
||||
|
||||
// 记录播放开始时间
|
||||
useEffect(() => {
|
||||
if (currentMedia) {
|
||||
setPlayStartTime(new Date());
|
||||
setHasGivenFeedback(false);
|
||||
}
|
||||
}, [currentIndex]);
|
||||
|
||||
const loadRecommendedMedia = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const media = await mediaService.getRecommendedMedia(
|
||||
familyId,
|
||||
elderlyId,
|
||||
currentMood
|
||||
);
|
||||
setRecommendedMedia(media);
|
||||
// 如果有媒体，记录第一个的播放
|
||||
if (media.length > 0) {
|
||||
recordPlayStart(media[0].id);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('加载推荐媒体失败:', error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// 记录播放开始（不等待完成）
|
||||
const recordPlayStart = async (mediaId: number) => {
|
||||
try {
|
||||
await mediaService.recordMediaPlay(mediaId, {
|
||||
elderly_id: elderlyId,
|
||||
duration_watched: 0,
|
||||
completed: 0,
|
||||
triggered_by: 'auto',
|
||||
mood_before: currentMood,
|
||||
});
|
||||
console.log('播放记录已创建, mediaId:', mediaId);
|
||||
} catch (error) {
|
||||
console.error('记录播放开始失败:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const currentMedia = recommendedMedia[currentIndex];
|
||||
|
||||
// 记录播放
|
||||
const recordPlay = async (completed: boolean = false) => {
|
||||
if (!currentMedia || !playStartTime) return;
|
||||
|
||||
const durationWatched = Math.floor((new Date().getTime() - playStartTime.getTime()) / 1000);
|
||||
|
||||
try {
|
||||
await mediaService.recordMediaPlay(currentMedia.id, {
|
||||
elderly_id: elderlyId,
|
||||
duration_watched: durationWatched,
|
||||
completed: completed ? 1 : 0,
|
||||
triggered_by: 'auto',
|
||||
mood_before: currentMood,
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('记录播放失败:', error);
|
||||
}
|
||||
};
|
||||
|
||||
// 处理反馈
|
||||
const handleFeedback = async (type: 'like' | 'dislike') => {
|
||||
if (!currentMedia || hasGivenFeedback) return;
|
||||
|
||||
try {
|
||||
await mediaService.submitFeedback(currentMedia.id, {
|
||||
elderly_id: elderlyId,
|
||||
feedback_type: type,
|
||||
});
|
||||
setHasGivenFeedback(true);
|
||||
|
||||
// 自动切换到下一个
|
||||
setTimeout(() => {
|
||||
handleNext();
|
||||
}, 1000);
|
||||
} catch (error) {
|
||||
console.error('提交反馈失败:', error);
|
||||
}
|
||||
};
|
||||
|
||||
// 下一个媒体
|
||||
const handleNext = async () => {
|
||||
await recordPlay(true);
|
||||
|
||||
if (currentIndex < recommendedMedia.length - 1) {
|
||||
const nextIndex = currentIndex + 1;
|
||||
setCurrentIndex(nextIndex);
|
||||
// 记录下一个媒体的播放
|
||||
recordPlayStart(recommendedMedia[nextIndex].id);
|
||||
} else {
|
||||
// 已经是最后一个，重新加载
|
||||
await loadRecommendedMedia();
|
||||
setCurrentIndex(0);
|
||||
}
|
||||
};
|
||||
|
||||
// 关闭播放器
|
||||
const handleClose = async () => {
|
||||
await recordPlay(false);
|
||||
onClose?.();
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="fixed inset-0 bg-black flex items-center justify-center z-50">
|
||||
<div className="text-white text-xl">正在加载...</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!currentMedia) {
|
||||
return (
|
||||
<div className="fixed inset-0 bg-black flex items-center justify-center z-50">
|
||||
<div className="text-white text-center">
|
||||
<p className="text-xl mb-4">暂时没有推荐的照片或视频</p>
|
||||
<button
|
||||
onClick={handleClose}
|
||||
className="px-6 py-3 bg-white text-black rounded-lg hover:bg-gray-200 transition-colors"
|
||||
>
|
||||
关闭
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 bg-black flex flex-col z-50">
|
||||
{/* 数字人小圆圈头像 - 左上角 */}
|
||||
<div className="absolute top-6 left-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 left-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 top-6 left-0 right-0 z-10 flex flex-col items-center gap-2 px-6">
|
||||
<p className="text-2xl font-bold text-white bg-black/60 backdrop-blur-sm px-6 py-3 rounded-2xl">
|
||||
{currentMedia.title}
|
||||
</p>
|
||||
{recommendedMedia.length > 1 && (
|
||||
<p className="text-base text-white bg-black/40 backdrop-blur-sm px-4 py-2 rounded-full">
|
||||
{currentIndex + 1} / {recommendedMedia.length}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 媒体内容区 */}
|
||||
<div className="flex-1 flex items-center justify-center p-8">
|
||||
{currentMedia.media_type === 'photo' ? (
|
||||
<img
|
||||
src={mediaService.getMediaUrl(currentMedia.file_path)}
|
||||
alt={currentMedia.title}
|
||||
className="max-w-full max-h-full object-contain"
|
||||
/>
|
||||
) : (
|
||||
<video
|
||||
src={mediaService.getMediaUrl(currentMedia.file_path)}
|
||||
controls
|
||||
autoPlay
|
||||
className="max-w-full max-h-full"
|
||||
onEnded={handleNext}
|
||||
/>
|
||||
)}
|
||||
</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={() => handleFeedback('like')}
|
||||
disabled={hasGivenFeedback}
|
||||
className={`
|
||||
${hasGivenFeedback ? 'bg-gray-600 cursor-not-allowed' : '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={() => handleFeedback('dislike')}
|
||||
disabled={hasGivenFeedback}
|
||||
className={`
|
||||
${hasGivenFeedback ? 'bg-gray-600 cursor-not-allowed' : '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>
|
||||
|
||||
{/* 显示全部按钮 */}
|
||||
{recommendedMedia.length > 1 && (
|
||||
<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={handleClose}
|
||||
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={recommendedMedia.map(m => ({
|
||||
id: m.id.toString(),
|
||||
url: mediaService.getMediaUrl(m.file_path),
|
||||
thumbnailUrl: m.thumbnail_path ? mediaService.getThumbnailUrl(m.thumbnail_path) : undefined,
|
||||
type: m.media_type,
|
||||
caption: m.title,
|
||||
tags: m.tags || []
|
||||
}))}
|
||||
currentIndex={currentIndex}
|
||||
onSelect={(index) => {
|
||||
setCurrentIndex(index);
|
||||
setShowGrid(false);
|
||||
}}
|
||||
onClose={() => setShowGrid(false)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user