training_data/apps/web/src/components/models/course/detail/CourseDetailDisplayArea.tsx

// components/CourseDetailDisplayArea.tsx
import { motion, useScroll, useTransform } from "framer-motion";
import React, { useContext, useRef, useState } from "react";
import { VideoPlayer } from "@web/src/components/presentation/video-player/VideoPlayer";
import { CourseDetailDescription } from "./CourseDetailDescription/CourseDetailDescription";
import { Course, LectureType, PostType } from "@nice/common";
import { CourseDetailContext } from "./CourseDetailContext";
import CollapsibleContent from "@web/src/components/common/container/CollapsibleContent";

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]);
	const contentWrapperRef = useRef(null);
	const [isExpanded, setIsExpanded] = useState(false);
	const [shouldCollapse, setShouldCollapse] = useState(false);
	return (
		<div className="min-h-screen bg-gray-50">
			{/* 固定的视频区域 */}
			{/* 移除 sticky 定位，让视频区域随页面滚动 */}
			{lecture?.meta?.type === LectureType.VIDEO && (
				<motion.div
					style={{
						opacity: videoOpacity,
					}}
					className="w-full bg-black">
					<div className=" w-full  ">
						<VideoPlayer src={videoSrc} poster={videoPoster} />
					</div>
				</motion.div>
			)}
			{lecture?.meta?.type === LectureType.ARTICLE && (
				<div className="flex justify-center w-full my-2">
					<div className="w-4/5  bg-white shadow-md rounded-lg  border border-gray-200  p-6  ">
						<CollapsibleContent
							content={lecture?.content || ""}
							maxHeight={150} // Optional, defaults to 150
						/>
					</div>
				</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;