52 lines
1.4 KiB
TypeScript
52 lines
1.4 KiB
TypeScript
|
// components/CourseVideoPage.tsx
|
||
|
|
import { motion, useScroll, useTransform } from "framer-motion";
|
||
|
|
import React from "react";
|
||
|
|
import { VideoPlayer } from "@web/src/components/presentation/video-player/VideoPlayer";
|
||
|
|
import { CourseDetailContent } from "./CourseDetailContent";
|
||
|
|
import { Course } from "@nice/common";
|
||
|
|
|
||
|
|
interface CourseVideoPageProps {
|
||
|
|
course: Course;
|
||
|
|
videoSrc?: string;
|
||
|
|
videoPoster?: string;
|
||
|
|
isLoading?: boolean;
|
||
|
|
}
|
||
|
|
|
||
|
|
export const CourseVideoPage: React.FC<CourseVideoPageProps> = ({
|
||
|
|
course,
|
||
|
|
videoSrc,
|
||
|
|
videoPoster,
|
||
|
|
isLoading = false,
|
||
|
|
}) => {
|
||
|
|
// 创建滚动动画效果
|
||
|
|
const { scrollY } = useScroll();
|
||
|
|
const videoScale = useTransform(scrollY, [0, 200], [1, 0.8]);
|
||
|
|
const videoOpacity = useTransform(scrollY, [0, 200], [1, 0.8]);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="min-h-screen bg-gray-50">
|
||
|
|
{/* 固定的视频区域 */}
|
||
|
|
<motion.div
|
||
|
|
style={{
|
||
|
|
// scale: videoScale,
|
||
|
|
opacity: videoOpacity,
|
||
|
|
}}
|
||
|
|
className="sticky top-0 w-full bg-black z-10">
|
||
|
|
<div className="max-w-6xl mx-auto px-4">
|
||
|
|
<VideoPlayer src={videoSrc} poster={videoPoster} />
|
||
|
|
</div>
|
||
|
|
</motion.div>
|
||
|
|
|
||
|
|
{/* 课程内容区域 */}
|
||
|
|
<motion.div
|
||
|
|
initial={{ opacity: 0, y: 20 }}
|
||
|
|
animate={{ opacity: 1, y: 0 }}
|
||
|
|
transition={{ duration: 0.5, delay: 0.2 }}
|
||
|
|
className="max-w-6xl mx-auto px-4 py-8">
|
||
|
|
<CourseDetailContent course={course} isLoading={isLoading} />
|
||
|
|
</motion.div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
export default CourseVideoPage;
|