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 18:59:42 +08:00
parent 079a705d9e
commit 0e9ac6713a
1 changed files with 18 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -6,6 +6,7 @@ import { CourseDetailDescription } from "./CourseDetailDescription/CourseDetailD
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;
@ -18,18 +19,17 @@ export const CourseDetailDisplayArea: React.FC<
CourseDetailDisplayAreaProps
> = ({ videoSrc, videoPoster }) => {
// 创建滚动动画效果
const { course, isLoading, lecture } = useContext(CourseDetailContext);
const { course, isLoading, lecture, lectureIsLoading } =
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 && (
{lectureIsLoading && (
<Skeleton active paragraph={{ rows: 4 }} title={false} />
)}
{!lectureIsLoading && lecture?.meta?.type === LectureType.VIDEO && (
<motion.div
style={{
opacity: videoOpacity,
@ -40,16 +40,17 @@ export const CourseDetailDisplayArea: React.FC<
</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
/>
{!lectureIsLoading &&
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>
</div>
)}
)}
{/* 课程内容区域 */}
<motion.div
initial={{ opacity: 0, y: 20 }}
@ -64,4 +65,5 @@ export const CourseDetailDisplayArea: React.FC<
</div>
);
};
export default CourseDetailDisplayArea;