From 0e9ac6713a4f9ea21bcc81a86aea8eceae8b6675 Mon Sep 17 00:00:00 2001
From: ditiqi <ditiqi@163.com>
Date: Sun, 23 Feb 2025 18:59:42 +0800
Subject: [PATCH] add

---
 .../course/detail/CourseDetailDisplayArea.tsx | 34 ++++++++++---------
 1 file changed, 18 insertions(+), 16 deletions(-)

diff --git a/apps/web/src/components/models/course/detail/CourseDetailDisplayArea.tsx b/apps/web/src/components/models/course/detail/CourseDetailDisplayArea.tsx
index 3a2d6ff..ee99da1 100755
--- a/apps/web/src/components/models/course/detail/CourseDetailDisplayArea.tsx
+++ b/apps/web/src/components/models/course/detail/CourseDetailDisplayArea.tsx
@@ -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;