This commit is contained in:
ditiqi 2025-02-26 22:54:22 +08:00
parent 6042002280
commit ae1d4df170
6 changed files with 24 additions and 21 deletions

View File

@ -6,6 +6,7 @@ import { useNavigate, useParams, useSearchParams } from "react-router-dom";
import { UserMenu } from "./UserMenu/UserMenu"; import { UserMenu } from "./UserMenu/UserMenu";
import { NavigationMenu } from "./NavigationMenu"; import { NavigationMenu } from "./NavigationMenu";
import { useMainContext } from "./MainProvider"; import { useMainContext } from "./MainProvider";
import { useStaff } from "@nice/client";
const { Header } = Layout; const { Header } = Layout;
export function MainHeader() { export function MainHeader() {
@ -13,9 +14,11 @@ export function MainHeader() {
const { id } = useParams(); const { id } = useParams();
const navigate = useNavigate(); const navigate = useNavigate();
const { searchValue, setSearchValue } = useMainContext(); const { searchValue, setSearchValue } = useMainContext();
const { update } = useStaff();
return ( return (
<Header className="select-none flex items-center justify-center bg-white shadow-md border-b border-gray-100 fixed w-full z-30"> <Header className="select-none flex items-center justify-center bg-white shadow-md border-b border-gray-100 fixed w-full z-30">
<div className="w-full max-w-screen-2xl px-4 md:px-6 mx-auto flex items-center justify-between h-full"> <div className="w-full max-w-screen-3xl px-4 md:px-6 mx-auto flex items-center justify-between h-full">
<div className="flex items-center space-x-8"> <div className="flex items-center space-x-8">
<div <div
onClick={() => navigate("/")} onClick={() => navigate("/")}

View File

@ -26,12 +26,12 @@ export const CourseDetailDescription: React.FC = () => {
const { id } = useParams(); const { id } = useParams();
return ( return (
// <div className="w-full bg-white shadow-md rounded-lg border border-gray-200 p-5 my-4"> // <div className="w-full bg-white shadow-md rounded-lg border border-gray-200 p-5 my-4">
<div className="w-full p-5 my-4"> <div className="w-full px-5 my-4">
{isLoading || !course ? ( {isLoading || !course ? (
<Skeleton active paragraph={{ rows: 4 }} /> <Skeleton active paragraph={{ rows: 4 }} />
) : ( ) : (
<div className="space-y-2"> <div className="space-y-2">
{!selectedLectureId && ( {!selectedLectureId && course?.meta?.thumbnail && (
<> <>
<div className="relative my-4 overflow-hidden flex justify-center items-center"> <div className="relative my-4 overflow-hidden flex justify-center items-center">
<Image <Image
@ -43,7 +43,7 @@ export const CourseDetailDescription: React.FC = () => {
onClick={() => { onClick={() => {
setSelectedLectureId(firstLectureId); 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"> className="w-full h-full absolute top-0 z-10 bg-[rgba(0,0,0,0.3)] transition-all duration-300 ease-in-out hover:bg-[rgba(0,0,0,0.7)] cursor-pointer">
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-white text-4xl z-10"> <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-white text-4xl z-10">
</div> </div>

View File

@ -29,7 +29,11 @@ export const CourseDetailDisplayArea: React.FC = () => {
{lectureIsLoading && ( {lectureIsLoading && (
<Skeleton active paragraph={{ rows: 4 }} title={false} /> <Skeleton active paragraph={{ rows: 4 }} title={false} />
)} )}
<div className="flex justify-center flex-col items-center gap-2 w-full my-2 px-8">
<div className="flex justify-start w-full text-2xl font-bold">
{course?.title}
</div>
</div>
{selectedLectureId && {selectedLectureId &&
!lectureIsLoading && !lectureIsLoading &&
lecture?.meta?.type === LectureType.VIDEO && ( lecture?.meta?.type === LectureType.VIDEO && (

View File

@ -12,6 +12,7 @@ import { UserMenu } from "@web/src/app/main/layout/UserMenu/UserMenu";
import { CourseDetailContext } from "../CourseDetailContext"; import { CourseDetailContext } from "../CourseDetailContext";
import { usePost, useStaff } from "@nice/client"; import { usePost, useStaff } from "@nice/client";
import toast from "react-hot-toast"; import toast from "react-hot-toast";
import { NavigationMenu } from "@web/src/app/main/layout/NavigationMenu";
const { Header } = Layout; const { Header } = Layout;
@ -25,20 +26,16 @@ export function CourseDetailHeader() {
return ( return (
<Header className="select-none flex items-center justify-center bg-white shadow-md border-b border-gray-100 fixed w-full z-30"> <Header className="select-none flex items-center justify-center bg-white shadow-md border-b border-gray-100 fixed w-full z-30">
<div className="w-full flex items-center justify-between h-full"> <div className="w-full max-w-screen-3xl px-4 md:px-6 flex items-center justify-between h-full">
<div className="flex items-center space-x-10"> <div className="flex items-center space-x-8">
<HomeOutlined <div
onClick={() => { onClick={() => navigate("/")}
navigate("/"); className="text-2xl font-bold bg-gradient-to-r from-primary-600 via-primary-500 to-primary-400 bg-clip-text text-transparent hover:scale-105 transition-transform cursor-pointer">
}}
className="text-2xl text-primary-500 hover:scale-105 cursor-pointer" </div>
/> <NavigationMenu />
</div>
<div className="text-2xl tracking-widest font-bold bg-gradient-to-r from-primary-600 via-primary-500 to-primary-400 bg-clip-text text-transparent transition-transform ">
{course?.title}
</div>
{/* <NavigationMenu /> */}
</div>
<div className="flex items-center space-x-6"> <div className="flex items-center space-x-6">
{isAuthenticated && ( {isAuthenticated && (
<Button <Button

View File

@ -55,7 +55,6 @@ export function VideoPlayer({
src, src,
poster, poster,
onError, onError,
}: { }: {
src: string; src: string;
poster?: string; poster?: string;

View File

@ -18,7 +18,7 @@ export default function VideoPlayerLayout() {
<> <>
<div <div
className={`relative w-full bg-black rounded-lg overflow-hidden`} className={`relative w-full bg-black rounded-lg overflow-hidden`}
style={{ aspectRatio: "21/9" }} style={{ aspectRatio: "16/9" }}
onMouseEnter={() => { onMouseEnter={() => {
setIsHovering(true); setIsHovering(true);
setShowControls(true); setShowControls(true);