From 20cfaa69db49b80a98bb06202fd4a8990962d219 Mon Sep 17 00:00:00 2001 From: Dorian Koch <doriank@fsmpi.rwth-aachen.de> Date: Thu, 4 Jul 2024 18:44:02 +0200 Subject: [PATCH] Close chapter suggestion when done, Add red bg to hidden chapters, Closes #43 --- src/components/CourseListing.tsx | 26 +++++++++++++++++++++++++- src/components/Player.tsx | 23 +++++++++++++++++++---- 2 files changed, 44 insertions(+), 5 deletions(-) diff --git a/src/components/CourseListing.tsx b/src/components/CourseListing.tsx index a91ec7a..5a30790 100644 --- a/src/components/CourseListing.tsx +++ b/src/components/CourseListing.tsx @@ -190,13 +190,37 @@ export function LectureListItem({ /> </li> {lecture.chapters?.map((chapter) => ( - <li key={chapter.name}> + <li + key={chapter.name} + className={ + "d-flex " + + (chapter.is_visible === false ? "bg-danger-subtle rounded" : "") + } + > <span className="bi bi-play" /> <Link href={`/${course_id_string}/${lecture.id}?t=` + chapter.start_time} > {chapter.name} </Link> + {editMode && ( + <> + <div className="flex-fill" /> + <EmbeddedOMFieldComponent + object_type="chapter" + object_id={chapter.id!} + field_id="is_visible" + field_type="boolean" + initialValue={chapter.is_visible} + className="me-2 align-self-center py-0" + /> + <OMDelete + object_type="chapter" + object_id={chapter.id!} + className="py-0" + /> + </> + )} </li> ))} diff --git a/src/components/Player.tsx b/src/components/Player.tsx index 845b8cf..341f532 100644 --- a/src/components/Player.tsx +++ b/src/components/Player.tsx @@ -177,9 +177,11 @@ function KapitelPopover({ const userContext = useUserContext(); const api = useBackendContext(); const reloadFunc = useReloadBoundary(); + const [isSubmitting, setIsSubmitting] = useState(false); const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => { e.preventDefault(); + if (isSubmitting) return; let form = e.currentTarget; let timeHuman = form.time.value; // Format HH:MM:SS let time = 0; @@ -191,6 +193,7 @@ function KapitelPopover({ } let text = form.text.value; + setIsSubmitting(true); if (userContext.canEditStuff()) { api.createOMObject("chapter", { parent_type: "lecture", @@ -207,7 +210,8 @@ function KapitelPopover({ }) .catch((e) => { showError(e, "Unable to create chapter"); - }); + }) + .finally(() => setIsSubmitting(false)); } else { api.suggestChapter(lectureId, { start_time: time, @@ -219,7 +223,8 @@ function KapitelPopover({ }) .catch((e) => { showError(e, "Unable to suggest chapter"); - }); + }) + .finally(() => setIsSubmitting(false)); } return false; @@ -249,7 +254,9 @@ function KapitelPopover({ className="btn btn-primary" style={{ marginBottom: "6px" }} value={userContext.canEditStuff() ? "Hinzufügen" : "Vorschlagen"} + disabled={isSubmitting} /> + {isSubmitting && <div className="spinner-border ms-2" role="status" />} </form> ); } @@ -471,7 +478,10 @@ function Chapters({ chapters, seekTo }: { chapters?: chapter[]; seekTo: (time: n .map((c) => { const bgColor = c.is_visible === false ? "bg-danger-subtle" : ""; return ( - <tr key={c.start_time} className={"w-100 " + bgColor}> + <tr + key={`${c.start_time}+${c.name}`} + className={"w-100 " + bgColor} + > <td style={{ width: "130px" }} className={bgColor}> <a className="chapterlink" @@ -714,7 +724,12 @@ export default function Player({ playerData }: { playerData: ResourceType<Player <VideoPlayer lecture={lecture} /> </div> <div className="col-12 pt-4"> - <OverlayTrigger trigger="click" placement="top" overlay={kapitelPopover}> + <OverlayTrigger + trigger="click" + placement="top" + overlay={kapitelPopover} + show={showPop} + > <button className="btn btn-primary" id="hintnewchapter" -- GitLab