From 617c7db9197af313bdbc9a157a3d8ae099f094a9 Mon Sep 17 00:00:00 2001
From: ditiqi <ditiqi@163.com>
Date: Mon, 24 Feb 2025 11:50:33 +0800
Subject: [PATCH] add

---
 .../course/detail/CourseDetailDescription.tsx | 25 ++++++++---
 .../detail/CourseSyllabus/LectureItem.tsx     | 42 +++++++++++--------
 2 files changed, 44 insertions(+), 23 deletions(-)

diff --git a/apps/web/src/components/models/course/detail/CourseDetailDescription.tsx b/apps/web/src/components/models/course/detail/CourseDetailDescription.tsx
index a7eea6c..e33e445 100755
--- a/apps/web/src/components/models/course/detail/CourseDetailDescription.tsx
+++ b/apps/web/src/components/models/course/detail/CourseDetailDescription.tsx
@@ -1,15 +1,23 @@
 import { Course } from "@nice/common";
-import React, { useContext } from "react";
+import React, { useContext, useMemo } from "react";
 import { Image, Typography, Skeleton } from "antd"; // 引入 antd 组件
 import { CourseDetailContext } from "./CourseDetailContext";
-import { CalendarOutlined, EyeOutlined } from "@ant-design/icons";
+import {
+	CalendarOutlined,
+	EyeOutlined,
+	PlayCircleOutlined,
+} from "@ant-design/icons";
 import dayjs from "dayjs";
+import { useNavigate } from "react-router-dom";
 
 export const CourseDetailDescription: React.FC = () => {
-	const { course, isLoading, selectedLectureId } =
+	const { course, isLoading, selectedLectureId, setSelectedLectureId } =
 		useContext(CourseDetailContext);
 	const { Paragraph, Title } = Typography;
-
+	const firstLectureId = useMemo(() => {
+		return course?.sections?.[0]?.lectures?.[0]?.id;
+	}, [course]);
+	const navigate = useNavigate();
 	return (
 		<div className="w-full bg-white shadow-md rounded-lg border border-gray-200 p-6">
 			{isLoading || !course ? (
@@ -18,12 +26,19 @@ export const CourseDetailDescription: React.FC = () => {
 				<div className="space-y-4">
 					{!selectedLectureId && (
 						<>
-							<div className="relative w-[600px] h-[340px] m-4 overflow-hidden flex justify-center items-center">
+							<div className="relative  my-4 overflow-hidden flex justify-center items-center">
 								<Image
 									src={course?.meta?.thumbnail}
 									preview={false}
 									className="w-full h-full object-cover z-0"
 								/>
+								<div
+									onClick={() => {
+										setSelectedLectureId(firstLectureId);
+									}}
+									className="w-full h-full  absolute top-0 z-10 bg-black opacity-30 transition-opacity duration-300 ease-in-out hover:opacity-70 cursor-pointer">
+									<PlayCircleOutlined className="absolute top-1/2  left-1/2 -translate-x-1/2 -translate-y-1/2 text-white text-4xl z-10" />
+								</div>
 							</div>
 						</>
 					)}
diff --git a/apps/web/src/components/models/course/detail/CourseSyllabus/LectureItem.tsx b/apps/web/src/components/models/course/detail/CourseSyllabus/LectureItem.tsx
index a79b16e..ed73745 100755
--- a/apps/web/src/components/models/course/detail/CourseSyllabus/LectureItem.tsx
+++ b/apps/web/src/components/models/course/detail/CourseSyllabus/LectureItem.tsx
@@ -7,6 +7,7 @@ import {
 	FileTextOutlined,
 	PlayCircleOutlined,
 } from "@ant-design/icons"; // 使用 Ant Design 图标
+import { useParams } from "react-router-dom";
 
 interface LectureItemProps {
 	lecture: Lecture;
@@ -16,25 +17,30 @@ interface LectureItemProps {
 export const LectureItem: React.FC<LectureItemProps> = ({
 	lecture,
 	onClick,
-}) => (
-	<div
-		className="w-full flex items-center gap-4 p-4 hover:bg-gray-50 text-left transition-colors cursor-pointer"
-		onClick={() => onClick(lecture.id)}>
-		{lecture.type === LectureType.VIDEO && (
-			<PlayCircleOutlined className="w-5 h-5 text-blue-500 flex-shrink-0" />
-		)}
-		{lecture.type === LectureType.ARTICLE && (
-			<FileTextOutlined className="w-5 h-5 text-blue-500 flex-shrink-0" /> // 为文章类型添加图标
-		)}
-		<div className="flex-grow">
-			<h4 className="font-medium text-gray-800">{lecture.title}</h4>
-			{lecture.subTitle && (
-				<p className="text-sm text-gray-500 mt-1">{lecture.subTitle}</p>
+}) => {
+	const { lectureId } = useParams();
+	return (
+		<div
+			className="w-full flex items-center gap-4 p-4 hover:bg-gray-50 text-left transition-colors cursor-pointer"
+			onClick={() => onClick(lecture.id)}>
+			{lecture.type === LectureType.VIDEO && (
+				<PlayCircleOutlined className="w-5 h-5 text-blue-500 flex-shrink-0" />
 			)}
-		</div>
-		{/* <div className="flex items-center gap-1 text-sm text-gray-500">
+			{lecture.type === LectureType.ARTICLE && (
+				<FileTextOutlined className="w-5 h-5 text-blue-500 flex-shrink-0" /> // 为文章类型添加图标
+			)}
+			<div className="flex-grow">
+				<h4 className="font-medium text-gray-800">{lecture.title}</h4>
+				{lecture.subTitle && (
+					<p className="text-sm text-gray-500 mt-1">
+						{lecture.subTitle}
+					</p>
+				)}
+			</div>
+			{/* <div className="flex items-center gap-1 text-sm text-gray-500">
 			<ClockCircleOutlined className="w-4 h-4" />
 			<span>{lecture.duration}分钟</span>
 		</div> */}
-	</div>
-);
+		</div>
+	);
+};