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";
import { Course, LectureType, PostType } from "@nice/common";
import { CourseDetailContext } from "./CourseDetailContext";
import CollapsibleContent from "@web/src/components/common/container/CollapsibleContent";
import { Skeleton } from "antd";
import { CoursePreview } from "./CoursePreview/CoursePreview";
import ResourcesShower from "@web/src/components/common/uploader/ResourceShower";
import {
	BookOutlined,
	CalendarOutlined,
	EditTwoTone,
	EyeOutlined,
	ReloadOutlined,
} from "@ant-design/icons";
import dayjs from "dayjs";
import { useNavigate } from "react-router-dom";
import CourseDetailTitle from "./CourseDetailTitle";

// interface CourseDetailDisplayAreaProps {
// 	// course: Course;
// 	// videoSrc?: string;
// 	// videoPoster?: string;
// 	// isLoading?: boolean;
// }

export const CourseDetailDisplayArea: React.FC = () => {
	// 创建滚动动画效果
	const {
		course,
		isLoading,
		canEdit,
		lecture,
		lectureIsLoading,
		selectedLectureId,
	} = useContext(CourseDetailContext);
	const navigate = useNavigate();
	const { scrollY } = useScroll();
	const videoOpacity = useTransform(scrollY, [0, 200], [1, 0.8]);
	return (
		<div className="min-h-screen bg-gray-50">
			{/* 固定的视频区域 */}
			{lectureIsLoading && (
				<Skeleton active paragraph={{ rows: 4 }} title={false} />
			)}
			<CourseDetailTitle></CourseDetailTitle>
			{selectedLectureId &&
				!lectureIsLoading &&
				lecture?.meta?.type === LectureType.VIDEO && (
					<div className="flex justify-center flex-col items-center gap-2 w-full mt-2 px-4">
						<motion.div
							style={{
								opacity: videoOpacity,
							}}
							className="w-full bg-black rounded-lg  ">
							<div className=" w-full  ">
								<VideoPlayer src={lecture?.meta?.videoUrl} />
							</div>
						</motion.div>
					</div>
				)}
			{!lectureIsLoading &&
				selectedLectureId &&
				lecture?.meta?.type === LectureType.ARTICLE && (
					<div className="flex justify-center flex-col items-center gap-2 w-full my-2 ">
						<div className="w-full   rounded-lg      ">
							<CollapsibleContent
								content={lecture?.content || ""}
								maxHeight={500} // Optional, defaults to 150
							/>
							<div className="px-6">
								<ResourcesShower
									resources={
										lecture?.resources
									}></ResourcesShower>
							</div>
						</div>
					</div>
				)}
			<div className="flex justify-center flex-col items-center gap-2 w-full my-2  ">
				<CourseDetailDescription />
			</div>
			{/* 课程内容区域 */}
		</div>
	);
};

export default CourseDetailDisplayArea;