linfeng
/
training_data
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add

This commit is contained in:
ditiqi 2025-02-23 22:51:23 +08:00
parent 66ae05cdbd
commit c6d57face4
1 changed files with 24 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
apps/web/src/components/models/course/detail/CourseDetailDisplayArea.tsx
View File

@ -2,22 +2,20 @@
import { motion, useScroll, useTransform } from "framer-motion"; import { motion, useScroll, useTransform } from "framer-motion";
import React, { useContext, useRef, useState } from "react"; import React, { useContext, useRef, useState } from "react";
import { VideoPlayer } from "@web/src/components/presentation/video-player/VideoPlayer"; import { VideoPlayer } from "@web/src/components/presentation/video-player/VideoPlayer";
import { CourseDetailDescription } from "./CourseDetailDescription/CourseDetailDescription"; import { CourseDetailDescription } from "./CourseDetailDescription";
import { Course, LectureType, PostType } from "@nice/common"; import { Course, LectureType, PostType } from "@nice/common";
import { CourseDetailContext } from "./CourseDetailContext"; import { CourseDetailContext } from "./CourseDetailContext";
import CollapsibleContent from "@web/src/components/common/container/CollapsibleContent"; import CollapsibleContent from "@web/src/components/common/container/CollapsibleContent";
import { Skeleton } from "antd"; import { Skeleton } from "antd";
interface CourseDetailDisplayAreaProps { // interface CourseDetailDisplayAreaProps {
// course: Course; // // course: Course;
videoSrc?: string; // // videoSrc?: string;
videoPoster?: string; // // videoPoster?: string;
// isLoading?: boolean; // // isLoading?: boolean;
} // }
export const CourseDetailDisplayArea: React.FC< export const CourseDetailDisplayArea: React.FC = () => {
CourseDetailDisplayAreaProps
> = ({ videoSrc, videoPoster }) => {
// 创建滚动动画效果 // 创建滚动动画效果
const { course, isLoading, lecture, lectureIsLoading } = const { course, isLoading, lecture, lectureIsLoading } =
useContext(CourseDetailContext); useContext(CourseDetailContext);
@ -30,20 +28,22 @@ export const CourseDetailDisplayArea: React.FC<
<Skeleton active paragraph={{ rows: 4 }} title={false} /> <Skeleton active paragraph={{ rows: 4 }} title={false} />
)} )}
{!lectureIsLoading && lecture?.meta?.type === LectureType.VIDEO && ( {!lectureIsLoading && lecture?.meta?.type === LectureType.VIDEO && (
<motion.div <div className="flex justify-center flex-col items-center gap-2 w-full mt-2 px-4">
style={{ <motion.div
opacity: videoOpacity, style={{
}} opacity: videoOpacity,
className="w-full bg-black"> }}
<div className=" w-full "> className="w-full bg-black rounded-lg ">
<VideoPlayer src={videoSrc} poster={videoPoster} /> <div className=" w-full ">
</div> <VideoPlayer src={lecture?.meta?.videoUrl} />
</motion.div> </div>
</motion.div>{" "}
</div>
)} )}
{!lectureIsLoading && {!lectureIsLoading &&
lecture?.meta?.type === LectureType.ARTICLE && ( lecture?.meta?.type === LectureType.ARTICLE && (
<div className="flex justify-center w-full my-2"> <div className="flex justify-center flex-col items-center gap-2 w-full my-2 px-4">
<div className="w-4/5 bg-white shadow-md rounded-lg border border-gray-200 p-6 "> <div className="w-full bg-white shadow-md rounded-lg border border-gray-200 p-6 ">
<CollapsibleContent <CollapsibleContent
content={lecture?.content || ""} content={lecture?.content || ""}
maxHeight={150} // Optional, defaults to 150 maxHeight={150} // Optional, defaults to 150
@ -51,17 +51,13 @@ export const CourseDetailDisplayArea: React.FC<
</div> </div>
</div> </div>
)} )}
{/* 课程内容区域 */} <div className="flex justify-center flex-col items-center gap-2 w-full my-2 px-4">
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.5, delay: 0.2 }}
className="w-full">
<CourseDetailDescription <CourseDetailDescription
course={course} course={course}
isLoading={isLoading} isLoading={isLoading}
/> />
</motion.div> </div>
{/* 课程内容区域 */}
</div> </div>
); );
}; };