66 lines
2.2 KiB
TypeScript
Executable File
66 lines
2.2 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";
|
|
|
|
// interface CourseDetailDisplayAreaProps {
|
|
// // course: Course;
|
|
// // videoSrc?: string;
|
|
// // videoPoster?: string;
|
|
// // isLoading?: boolean;
|
|
// }
|
|
|
|
export const CourseDetailDisplayArea: React.FC = () => {
|
|
// 创建滚动动画效果
|
|
const { course, isLoading, lecture, lectureIsLoading } =
|
|
useContext(CourseDetailContext);
|
|
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} />
|
|
)}
|
|
{!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 &&
|
|
lecture?.meta?.type === LectureType.ARTICLE && (
|
|
<div className="flex justify-center flex-col items-center gap-2 w-full my-2 px-4">
|
|
<div className="w-full bg-white shadow-md rounded-lg border border-gray-200 p-6 ">
|
|
<CollapsibleContent
|
|
content={lecture?.content || ""}
|
|
maxHeight={150} // Optional, defaults to 150
|
|
/>
|
|
</div>
|
|
</div>
|
|
)}
|
|
<div className="flex justify-center flex-col items-center gap-2 w-full my-2 px-4">
|
|
<CourseDetailDescription
|
|
course={course}
|
|
isLoading={isLoading}
|
|
/>
|
|
</div>
|
|
{/* 课程内容区域 */}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default CourseDetailDisplayArea;
|