Close chapter suggestion when done, Add red bg to hidden chapters, Closes #43

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>
                     ))}
 

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"