linfeng
/
staff_data
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add

This commit is contained in:
ditiqi 2025-02-23 21:42:44 +08:00
parent e790321e6a
commit 510b75b206
1 changed files with 32 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
apps/web/src/components/models/course/editor/form/CourseContentForm/SortableLecture.tsx
View File

@ -2,6 +2,7 @@ import {
DragOutlined,
CaretRightOutlined,
SaveOutlined,
CaretDownOutlined,
} from "@ant-design/icons";
import { Form, Button, Input, Select, Space } from "antd";
import React, { useState } from "react";
@ -9,14 +10,16 @@ import { useSortable } from "@dnd-kit/sortable";
import { CSS } from "@dnd-kit/utilities";
import QuillEditor from "@web/src/components/common/editor/quill/QuillEditor";
import { TusUploader } from "@web/src/components/common/uploader/TusUploader";
import { LectureType, LessonTypeLabel, PostType } from "@nice/common";
import { Lecture, LectureType, LessonTypeLabel, PostType } from "@nice/common";
import { usePost } from "@nice/client";
import toast from "react-hot-toast";
import { LectureData } from "./interface";
import { env } from "@web/src/env";
import CollapsibleContent from "@web/src/components/common/container/CollapsibleContent";
import { VideoPlayer } from "@web/src/components/presentation/video-player/VideoPlayer";
interface SortableLectureProps {
field: LectureData;
field: Lecture;
remove: () => void;
sectionFieldKey: string;
}
@ -37,6 +40,11 @@ export const SortableLecture: React.FC<SortableLectureProps> = ({
const [form] = Form.useForm();
const [editing, setEditing] = useState(field?.id ? false : true);
const [loading, setLoading] = useState(false);
const [isContentVisible, setIsContentVisible] = useState(false); // State to manage content visibility
const handleToggleContent = () => {
setIsContentVisible(!isContentVisible); // Toggle content visibility
};
const lectureType =
Form.useWatch(["meta", "type"], form) || LectureType.ARTICLE;
const handleSave = async () => {
@ -44,12 +52,12 @@ export const SortableLecture: React.FC<SortableLectureProps> = ({
setLoading(true);
const values = await form.validateFields();
let result;
const videoUrlId = Array.isArray(values?.videoUrlIds)
? values.videoUrlIds[0]
: typeof values?.videoUrlIds === "string"
? values.videoUrlIds
const videoUrlId = Array.isArray(values?.meta?.videoIds)
? values?.meta?.videoIds[0]
: typeof values?.meta?.videoIds === "string"
? values?.meta?.videoIds
: undefined;
console.log(sectionFieldKey);
if (!field.id) {
result = await create.mutateAsync({
data: {
@ -58,7 +66,7 @@ export const SortableLecture: React.FC<SortableLectureProps> = ({
title: values?.title,
meta: {
type: values?.meta?.type,
// fileIds: values?.meta?.fileIds,
videoIds: videoUrlId ? [videoUrlId] : [],
videoUrl: videoUrlId
? `http://${env.SERVER_IP}:${env.FILE_PORT}/uploads/${videoUrlId}/stream/index.m3u8`
: undefined,
@ -79,9 +87,11 @@ export const SortableLecture: React.FC<SortableLectureProps> = ({
id: field?.id,
},
data: {
parentId: sectionFieldKey,
title: values?.title,
meta: {
type: values?.meta?.type,
videoIds: videoUrlId ? [videoUrlId] : [],
videoUrl: videoUrlId
? `http://${env.SERVER_IP}:${env.FILE_PORT}/uploads/${videoUrlId}/stream/index.m3u8`
: undefined,
@ -146,7 +156,7 @@ export const SortableLecture: React.FC<SortableLectureProps> = ({
<div className="mt-4 flex flex-1 ">
{lectureType === LectureType.VIDEO ? (
<Form.Item
name={"videoUrlIds"}
name={["meta", "videoIds"]}
className="mb-0 flex-1"
rules={[{ required: true }]}>
<TusUploader multiple={false} />
@ -188,7 +198,11 @@ export const SortableLecture: React.FC<SortableLectureProps> = ({
{...listeners}
className="cursor-move"
/>
<CaretRightOutlined />
{isContentVisible ? (
<CaretDownOutlined onClick={handleToggleContent} />
) : (
<CaretRightOutlined onClick={handleToggleContent} />
)}
<span>{LessonTypeLabel[field?.meta?.type]}</span>
<span>{field?.title || "未命名课时"}</span>
</Space>
@ -202,6 +216,13 @@ export const SortableLecture: React.FC<SortableLectureProps> = ({
</Space>
</div>
)}
{isContentVisible &&
!editing && // Conditionally render content based on type
(field?.meta?.type === LectureType.ARTICLE ? (
<CollapsibleContent content={field?.content} />
) : (
<VideoPlayer src={field?.meta?.videoUrl} />
))}
</div>
);
};