From 32516187b21296468fddb0c1c18f17262ec35a37 Mon Sep 17 00:00:00 2001 From: ditiqi Date: Fri, 21 Feb 2025 16:11:02 +0800 Subject: [PATCH] add --- .../course/detail/CourseDetailContext.tsx | 15 +++++++++--- .../course/detail/CourseDetailDisplayArea.tsx | 23 ++++++++++--------- .../CourseDetailHeader/CourseDetailHeader.tsx | 9 +++++++- .../course/detail/CourseDetailLayout.tsx | 17 ++++++++++---- apps/web/src/hooks/useTusUpload.ts | 1 - 5 files changed, 44 insertions(+), 21 deletions(-) diff --git a/apps/web/src/components/models/course/detail/CourseDetailContext.tsx b/apps/web/src/components/models/course/detail/CourseDetailContext.tsx index 8540e54..c67a896 100644 --- a/apps/web/src/components/models/course/detail/CourseDetailContext.tsx +++ b/apps/web/src/components/models/course/detail/CourseDetailContext.tsx @@ -1,11 +1,12 @@ import { api } from "@nice/client"; -import { courseDetailSelect, CourseDto } from "@nice/common"; +import { courseDetailSelect, CourseDto, Lecture } from "@nice/common"; import React, { createContext, ReactNode, useEffect, useState } from "react"; import { useNavigate } from "react-router-dom"; interface CourseDetailContextType { editId?: string; // 添加 editId course?: CourseDto; + lecture?: Lecture; selectedLectureId?: string | undefined; setSelectedLectureId?: React.Dispatch>; isLoading?: boolean; @@ -37,9 +38,16 @@ export function CourseDetailProvider({ const [selectedLectureId, setSelectedLectureId] = useState< string | undefined >(undefined); + const { data: lecture, isLoading: lectureIsLoading } = ( + api.post as any + ).findFirst.useQuery( + { + where: { id: selectedLectureId }, + }, + { enabled: Boolean(editId) } + ); useEffect(() => { - navigate(``) - + navigate(`/course/${editId}/detail/${selectedLectureId}`); }, [selectedLectureId, editId]); const [isHeaderVisible, setIsHeaderVisible] = useState(true); // 新增 return ( @@ -47,6 +55,7 @@ export function CourseDetailProvider({ value={{ editId, course, + lecture, selectedLectureId, setSelectedLectureId, isLoading, diff --git a/apps/web/src/components/models/course/detail/CourseDetailDisplayArea.tsx b/apps/web/src/components/models/course/detail/CourseDetailDisplayArea.tsx index 2db3ffa..4f956b5 100644 --- a/apps/web/src/components/models/course/detail/CourseDetailDisplayArea.tsx +++ b/apps/web/src/components/models/course/detail/CourseDetailDisplayArea.tsx @@ -1,21 +1,23 @@ // components/CourseDetailDisplayArea.tsx import { motion, useScroll, useTransform } from "framer-motion"; -import React from "react"; +import React, { useContext } from "react"; import { VideoPlayer } from "@web/src/components/presentation/video-player/VideoPlayer"; import { CourseDetailDescription } from "./CourseDetailDescription/CourseDetailDescription"; -import { Course } from "@nice/common"; +import { Course, PostType } from "@nice/common"; +import { CourseDetailContext } from "./CourseDetailContext"; interface CourseDetailDisplayAreaProps { - course: Course; + // course: Course; videoSrc?: string; videoPoster?: string; - isLoading?: boolean; + // isLoading?: boolean; } export const CourseDetailDisplayArea: React.FC< CourseDetailDisplayAreaProps -> = ({ course, videoSrc, videoPoster, isLoading = false }) => { +> = ({ videoSrc, videoPoster }) => { // 创建滚动动画效果 + const { course, isLoading, lecture } = useContext(CourseDetailContext); const { scrollY } = useScroll(); const videoScale = useTransform(scrollY, [0, 200], [1, 0.8]); const videoOpacity = useTransform(scrollY, [0, 200], [1, 0.8]); @@ -25,16 +27,15 @@ export const CourseDetailDisplayArea: React.FC< {/* 固定的视频区域 */} {/* 移除 sticky 定位，让视频区域随页面滚动 */} -
- -
+ {lecture.type === PostType.LECTURE && ( +
+ +
+ )} {/* 课程内容区域 */} diff --git a/apps/web/src/components/models/course/detail/CourseDetailHeader/CourseDetailHeader.tsx b/apps/web/src/components/models/course/detail/CourseDetailHeader/CourseDetailHeader.tsx index 4ef5e54..338d428 100644 --- a/apps/web/src/components/models/course/detail/CourseDetailHeader/CourseDetailHeader.tsx +++ b/apps/web/src/components/models/course/detail/CourseDetailHeader/CourseDetailHeader.tsx @@ -2,12 +2,13 @@ import { motion, useScroll, useTransform } from "framer-motion"; import { useContext, useEffect, useState } from "react"; import { CourseDetailContext } from "../CourseDetailContext"; +import { Button } from "antd"; export const CourseDetailHeader = () => { const { scrollY } = useScroll(); const [lastScrollY, setLastScrollY] = useState(0); - const { course, isHeaderVisible, setIsHeaderVisible } = + const { course, isHeaderVisible, setIsHeaderVisible, lecture } = useContext(CourseDetailContext); useEffect(() => { const updateHeader = () => { @@ -43,6 +44,12 @@ export const CourseDetailHeader = () => {

{course?.title}

+