add
This commit is contained in:
parent
6042002280
commit
ae1d4df170
|
@ -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("/")}
|
||||||
|
|
|
@ -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,8 +43,8 @@ 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>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -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 && (
|
||||||
|
|
|
@ -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;
|
||||||
|
|
||||||
|
@ -24,21 +25,17 @@ export function CourseDetailHeader() {
|
||||||
const { update } = useStaff();
|
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 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 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>
|
</div>
|
||||||
{/* <NavigationMenu /> */}
|
<NavigationMenu />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="flex items-center space-x-6">
|
<div className="flex items-center space-x-6">
|
||||||
{isAuthenticated && (
|
{isAuthenticated && (
|
||||||
<Button
|
<Button
|
||||||
|
|
|
@ -55,7 +55,6 @@ export function VideoPlayer({
|
||||||
src,
|
src,
|
||||||
poster,
|
poster,
|
||||||
onError,
|
onError,
|
||||||
|
|
||||||
}: {
|
}: {
|
||||||
src: string;
|
src: string;
|
||||||
poster?: string;
|
poster?: string;
|
||||||
|
|
|
@ -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);
|
||||||
|
|
Loading…
Reference in New Issue