43 lines
1.3 KiB
TypeScript
43 lines
1.3 KiB
TypeScript
|
import { motion } from "framer-motion";
|
||
|
|
import { useContext, useState } from "react";
|
||
|
|
import { CourseDetailContext } from "./CourseDetailContext";
|
||
|
|
import { CourseSyllabus } from "./CourseSyllabus";
|
||
|
|
import { CourseDetailContent } from "./CourseDetailContent";
|
||
|
|
import CourseVideoPage from "./CourseVideoPage";
|
||
|
|
|
||
|
|
export default function CourseDetailLayout() {
|
||
|
|
const { course, selectedLectureId, isLoading, setSelectedLectureId } =
|
||
|
|
useContext(CourseDetailContext);
|
||
|
|
|
||
|
|
const handleLectureClick = (lectureId: string) => {
|
||
|
|
setSelectedLectureId(lectureId);
|
||
|
|
};
|
||
|
|
const [isSyllabusOpen, setIsSyllabusOpen] = useState(false);
|
||
|
|
return (
|
||
|
|
<div className="relative">
|
||
|
|
{/* 主内容区域 */}
|
||
|
|
<motion.div
|
||
|
|
animate={{
|
||
|
|
width: isSyllabusOpen ? "66.666667%" : "100%",
|
||
|
|
}}
|
||
|
|
transition={{ type: "spring", stiffness: 300, damping: 30 }}
|
||
|
|
className="relative">
|
||
|
|
<CourseVideoPage
|
||
|
|
course={course}
|
||
|
|
isLoading={isLoading}
|
||
|
|
videoSrc="https://flipfit-cdn.akamaized.net/flip_hls/664ce52bd6fcda001911a88c-8f1c4d/video_h1.m3u8"
|
||
|
|
videoPoster="https://picsum.photos/800/450"
|
||
|
|
/>
|
||
|
|
</motion.div>
|
||
|
|
|
||
|
|
{/* 课程大纲侧边栏 */}
|
||
|
|
<CourseSyllabus
|
||
|
|
sections={course?.sections || []}
|
||
|
|
onLectureClick={handleLectureClick}
|
||
|
|
isOpen={isSyllabusOpen}
|
||
|
|
onToggle={() => setIsSyllabusOpen(!isSyllabusOpen)}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|