56 lines
1.7 KiB
TypeScript
56 lines
1.7 KiB
TypeScript
// components/CourseDetailDisplayArea.tsx
|
|
import { motion, useScroll, useTransform } from "framer-motion";
|
|
import React, { useContext } from "react";
|
|
import { VideoPlayer } from "@web/src/components/presentation/video-player/VideoPlayer";
|
|
import { CourseDetailDescription } from "./CourseDetailDescription/CourseDetailDescription";
|
|
import { Course, PostType } from "@nice/common";
|
|
import { CourseDetailContext } from "./CourseDetailContext";
|
|
|
|
interface CourseDetailDisplayAreaProps {
|
|
// course: Course;
|
|
videoSrc?: string;
|
|
videoPoster?: string;
|
|
// isLoading?: boolean;
|
|
}
|
|
|
|
export const CourseDetailDisplayArea: React.FC<
|
|
CourseDetailDisplayAreaProps
|
|
> = ({ videoSrc, videoPoster }) => {
|
|
// 创建滚动动画效果
|
|
const { course, isLoading, lecture } = useContext(CourseDetailContext);
|
|
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">
|
|
{/* 固定的视频区域 */}
|
|
{/* 移除 sticky 定位，让视频区域随页面滚动 */}
|
|
<motion.div
|
|
style={{
|
|
opacity: videoOpacity,
|
|
}}
|
|
className="w-full bg-black">
|
|
{lecture.type === PostType.LECTURE && (
|
|
<div className=" w-full ">
|
|
<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="w-full">
|
|
<CourseDetailDescription
|
|
course={course}
|
|
isLoading={isLoading}
|
|
/>
|
|
</motion.div>
|
|
</div>
|
|
);
|
|
};
|
|
export default CourseDetailDisplayArea;
|