77 lines
2.5 KiB
TypeScript
Executable File
77 lines
2.5 KiB
TypeScript
Executable File
// 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 ResourcesShower from "@web/src/components/common/uploader/ResourceShower";
|
|
import { useNavigate } from "react-router-dom";
|
|
import CourseDetailTitle from "./CourseDetailTitle";
|
|
|
|
|
|
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;
|