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 { 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";
interface CourseDetailDisplayAreaProps { interface CourseDetailDisplayAreaProps {
// course: Course; // course: Course;
@ -18,18 +19,17 @@ export const CourseDetailDisplayArea: React.FC<
CourseDetailDisplayAreaProps CourseDetailDisplayAreaProps
> = ({ videoSrc, videoPoster }) => { > = ({ videoSrc, videoPoster }) => {
// 创建滚动动画效果 // 创建滚动动画效果
const { course, isLoading, lecture } = useContext(CourseDetailContext); const { course, isLoading, lecture, lectureIsLoading } =
useContext(CourseDetailContext);
const { scrollY } = useScroll(); const { scrollY } = useScroll();
const videoScale = useTransform(scrollY, [0, 200], [1, 0.8]);
const videoOpacity = 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 ( return (
<div className="min-h-screen bg-gray-50"> <div className="min-h-screen bg-gray-50">
{/* 固定的视频区域 */} {/* 固定的视频区域 */}
{/* 移除 sticky 定位，让视频区域随页面滚动 */} {lectureIsLoading && (
{lecture?.meta?.type === LectureType.VIDEO && ( <Skeleton active paragraph={{ rows: 4 }} title={false} />
)}
{!lectureIsLoading && lecture?.meta?.type === LectureType.VIDEO && (
<motion.div <motion.div
style={{ style={{
opacity: videoOpacity, opacity: videoOpacity,
@ -40,16 +40,17 @@ export const CourseDetailDisplayArea: React.FC<
</div> </div>
</motion.div> </motion.div>
)} )}
{lecture?.meta?.type === LectureType.ARTICLE && ( {!lectureIsLoading &&
<div className="flex justify-center w-full my-2"> lecture?.meta?.type === LectureType.ARTICLE && (
<div className="w-4/5 bg-white shadow-md rounded-lg border border-gray-200 p-6 "> <div className="flex justify-center w-full my-2">
<CollapsibleContent <div className="w-4/5 bg-white shadow-md rounded-lg border border-gray-200 p-6 ">
content={lecture?.content || ""} <CollapsibleContent
maxHeight={150} // Optional, defaults to 150 content={lecture?.content || ""}
/> maxHeight={150} // Optional, defaults to 150
/>
</div>
</div> </div>
</div> )}
)}
{/* 课程内容区域 */} {/* 课程内容区域 */}
<motion.div <motion.div
initial={{ opacity: 0, y: 20 }} initial={{ opacity: 0, y: 20 }}
@ -64,4 +65,5 @@ export const CourseDetailDisplayArea: React.FC<
</div> </div>
); );
}; };
export default CourseDetailDisplayArea; export default CourseDetailDisplayArea;