feat: enhance video library management with renaming and ordering functionality

README.md

@@ -249,7 +249,7 @@ alter table public.dailies enable row level security;
 
 ### Video library
 
-Apart from those there is one library of videos for the whole course: they are not part of the path, need no date, and are the same for every level and class. In **תוכן** the card "ספריה דיגיטלית" comes first, above the levels; the teacher adds a video (a name and a link) and deletes one there. Every student finds them in the "ספריה דיגיטלית" tab of the bar at the screen's foot: a list, and a video plays in the same box as the path's videos. The ones opened are marked (on that device). Create the table once (its `level` column stays empty):
+Apart from those there is one library of videos for the whole course: they are not part of the path, need no date, and are the same for every level and class. In **תוכן** the card "ספריה דיגיטלית" comes first, above the levels; the teacher adds a video (a name and a link), renames one, moves one up or down the list with its arrows, and deletes one there. Every student finds them in the "ספריה דיגיטלית" tab of the bar at the screen's foot: a list, and a video plays in the same box as the path's videos. The ones opened are marked (on that device). Create the table once (its `level` column stays empty):
 
 ```sql
 create table public.library (
@@ -257,11 +257,19 @@ create table public.library (
   level      text not null,                        -- a level id, e.g. 1
   title      text not null,
   url        text not null,
+  ord        int,                                  -- its turn in the list; none until the teacher moves a video
   created_at timestamptz not null default now()
 );
 alter table public.library enable row level security;
 ```
 
+A library made before its videos could be moved has no `ord` column; until it is added, moving a video is refused with this command in the message (renaming works without it):
+
+```sql
+alter table public.library add column if not exists ord int;
+notify pgrst, 'reload schema';
+```
+
 For the video to play inside the page, its Vimeo privacy setting has to allow embedding (on this site's domain, or anywhere); a YouTube video has to allow embedding too (it does unless its owner turned that off), and plays from `youtube-nocookie.com`.
 
 Keeping the link from being passed on is done in Vimeo, not here: the page has to give the browser the player's address, so a student who looks for it finds it (the server only keeps the link itself, `url`, for teachers). In the video's privacy settings on Vimeo, hide it from vimeo.com and allow embedding on specific domains only, naming the app's own domain (on Hugging Face, `<owner>-<space>.hf.space`). The video then plays inside the app and nowhere else: its link, opened or embedded anywhere else, shows nothing. Domain-level privacy needs a paid Vimeo plan.

app/auth.py

@@ -341,7 +341,8 @@ class SupabaseAuth:
         self._videos = None
 
     def level_videos(self, table: str, fresh: bool = False) -> list[dict]:
-        """A level's videos that stand outside the path, in the order they were added: id, level (a level id), title,
+        """A level's videos that stand outside the path, in the order the teacher gave them (`ord`, see
+        `order_level_videos`) and then, those never moved, in the order they were added: id, level (a level id), title,
         url (the Vimeo or YouTube link). `table` is "dailies" (the daily videos) or "library" (the video library,
         which is one for every level: its `level` is empty). Kept for CLASSES_TTL. Without the secret key, or before the table is created, there are none."""
         assert table in ("dailies", "library")
@@ -354,6 +355,7 @@ class SupabaseAuth:
         if self.secret:
             try:
                 rows = self._admin(f"/rest/v1/{table}?select=*&order=id.asc")
+                rows.sort(key=lambda r: (r.get("ord") is None, r.get("ord") or 0, r["id"]))
             except AuthUnavailable as e:
                 if "answered 404" not in str(e):
                     raise
@@ -372,6 +374,22 @@ class SupabaseAuth:
         self._admin(f"/rest/v1/{table}?id=eq.{int(id)}", "DELETE")
         self._level_videos.pop(table, None)
 
+    def rename_level_video(self, table: str, id: int, title: str) -> None:
+        assert table in ("dailies", "library")
+        try:
+            self._admin(f"/rest/v1/{table}?id=eq.{int(id)}", "PATCH", {"title": title})
+        finally:
+            self._level_videos.pop(table, None)
+
+    def order_level_videos(self, table: str, ids: list[int]) -> None:
+        """Puts the table's videos in this order: each one's `ord` is its turn."""
+        assert table in ("dailies", "library")
+        try:
+            for k, id in enumerate(ids):
+                self._admin(f"/rest/v1/{table}?id=eq.{int(id)}", "PATCH", {"ord": k})
+        finally:
+            self._level_videos.pop(table, None)
+
     def ranked(self, fresh: bool = False) -> frozenset[str] | None:
         """The lower-case emails the teacher gave the tutor's rank (the table `tutors`). Kept for CLASSES_TTL, as each
         sign-in check asks. None before the table is created; without the secret key there are none."""

app/main.py

@@ -64,9 +64,11 @@ CREATE_VIDEOS = ("create table public.videos (id bigint generated always as iden
 MIGRATE_VIDEOS = "alter table public.videos add column if not exists pos int, add column if not exists ord int not null default 0;"
 # The daily videos: a library by level; a class gives a video its day (the class's `dailies`: [{"video", "date"}])
 # The library: other videos, which every student browses, whatever the level and the class (its `level` is empty)
+# The library's videos stand in the order the teacher gave them (`ord`; one never moved has none, and comes after those)
 CREATE_LEVEL_VIDEOS = {t: (f"create table public.{t} (id bigint generated always as identity primary key, level text not null, "
-                           "title text not null, url text not null, created_at timestamptz not null default now()); "
+                           f"title text not null, url text not null, {'ord int, ' if t == 'library' else ''}created_at timestamptz not null default now()); "
                            f"alter table public.{t} enable row level security;") for t in ("dailies", "library")}
+MIGRATE_LIBRARY = "alter table public.library add column if not exists ord int;"
 LEVEL_IDS = [v["id"] for v in LEVELS]
 LESSON_LEVEL = {l["id"]: l["level"] for l in LESSONS}
 MAX_DAILIES = 400
@@ -727,6 +729,8 @@ def create_app(scorer: Scorer | None = None, tts: SawtakTTS | None = None,
         if "answered 404" in str(e):
             return (f"הטבלה {table} לא קיימת ב-Supabase. הריצו ב-SQL Editor: "
                     f"{CREATE_LEVEL_VIDEOS[table]} אם כבר נוצרה, הריצו שם: notify pgrst, 'reload schema';")
+        if "'ord'" in str(e) or "ord" in str(e) and "column" in str(e):   # a library made before its videos could be moved
+            return f"לטבלה {table} חסרה עמודה. הריצו ב-SQL Editor של Supabase: {MIGRATE_LIBRARY} notify pgrst, 'reload schema';"
         return f"Supabase לא זמין: {e}"
 
     @app.get("/api/dailies")
@@ -742,7 +746,7 @@ def create_app(scorer: Scorer | None = None, tts: SawtakTTS | None = None,
     @app.get("/api/library")
     def library(user: dict | None = Depends(signed_in)):
         """The video library, which stands outside the path and is one for every level and class: id, title, url
-        (for a teacher only) and embed (its player) of each, in the order they were added."""
+        (for a teacher only) and embed (its player) of each, in the teacher's order (see `order_library`)."""
         if not user:
             return {"library": []}
         try:
@@ -794,6 +798,34 @@ def create_app(scorer: Scorer | None = None, tts: SawtakTTS | None = None,
     def delete_library(video_id: int, a: SupabaseAuth = Depends(teacher_only)):
         return delete_level_video("library", video_id, a)
 
+    @app.put("/api/library/order")
+    def order_library(body: dict = Body(...), a: SupabaseAuth = Depends(teacher_only)):
+        """Puts the library's videos in the teacher's order: {"order": [id]}, every video of the library once."""
+        order = body.get("order")
+        if not isinstance(order, list) or not all(isinstance(i, int) and not isinstance(i, bool) for i in order):
+            raise HTTPException(400, "the order is a list of video ids")
+        try:
+            if len(set(order)) != len(order) or set(order) != {v["id"] for v in a.level_videos("library", fresh=True)}:   # added or deleted meanwhile, in another tab
+                raise HTTPException(409, "הספריה השתנתה. רעננו ונסו שוב")
+            a.order_level_videos("library", order)
+        except AuthUnavailable as e:
+            raise HTTPException(503, level_store_error("library", e))
+        return {"ok": True}
+
+    @app.put("/api/library/{video_id}")
+    def rename_library(video_id: int, body: dict = Body(...), a: SupabaseAuth = Depends(teacher_only)):
+        """Gives a video of the library another name: {"title"}."""
+        title = " ".join(str(body.get("title", "")).split())
+        if not title or len(title) > MAX_TITLE:
+            raise HTTPException(400, f"לסרטון צריך שם (עד {MAX_TITLE} תווים)")
+        try:
+            if all(v["id"] != video_id for v in a.level_videos("library", fresh=True)):
+                raise HTTPException(404, "הסרטון כבר לא בספריה. רעננו ונסו שוב")
+            a.rename_level_video("library", video_id, title)
+        except AuthUnavailable as e:
+            raise HTTPException(503, level_store_error("library", e))
+        return {"ok": True}
+
     @app.get("/api/classmates")
     def classmates(user: dict | None = Depends(signed_in)):
         """The signed-in student's classes: each one's name and its students, each by the nickname the teacher gave

static/index.html

@@ -908,7 +908,10 @@ body.quiet :is(#mic,#playMine,#driveBtn,.phone-btn),body.driving :is(#quietBtn,#
       <li>בכרטיס <b>הסרטונים שבספריה</b> לוחצים על <b>+ הוספת סרטון לספריה</b>.</li>
       <li>ממלאים <b>שם הסרטון</b> (עד 80 תווים) ו<b>קישור ל-Vimeo או ל-YouTube</b>.</li>
       <li>לוחצים <b>הוספה</b>.</li></ol>
-    <p>הסרטון מופיע ברשימה של הכרטיס. כפתור <b>צפייה</b> שלידו מאפשר לבדוק שהוא נפתח כמו שצריך. כדי להוסיף סרטונים נוספים חוזרים על שלבים 3 עד 5; הם מוצגים בסדר שבו נוספו.</p>
+    <p>הסרטון מופיע ברשימה של הכרטיס. כפתור <b>צפייה</b> שלידו מאפשר לבדוק שהוא נפתח כמו שצריך. כדי להוסיף סרטונים נוספים חוזרים על שלבים 3 עד 5; סרטון חדש נוסף בסוף הרשימה.</p>
+    <h3>שינוי שם ושינוי סדר</h3>
+    <ul><li><b>שינוי שם:</b> לוחצים <b>שינוי שם</b> ליד הסרטון, מקלידים את השם החדש ומאשרים.</li>
+      <li><b>שינוי סדר:</b> בחיצים <b>↑</b> ו-<b>↓</b> שבשורה של הסרטון מזיזים אותו מקום אחד למעלה או למטה. התלמידים רואים את הסרטונים באותו סדר.</li></ul>
     <h3>מה התלמידים רואים</h3>
     <ul><li>התלמידים מגיעים לסרטונים דרך הלשונית <b>ספריה דיגיטלית</b> שבתחתית המסך.</li>
       <li>כל תלמיד רואה את כל הסרטונים, בלי קשר לשלב או לכיתה שלו.</li>
@@ -916,9 +919,10 @@ body.quiet :is(#mic,#playMine,#driveBtn,.phone-btn),body.driving :is(#quietBtn,#
     <h3>אם משהו לא עובד</h3>
     <ul><li><b>"זה לא קישור לסרטון":</b> בודקים שהקישור הוא של Vimeo או YouTube ושהועתק במלואו.</li>
       <li><b>הודעה שהטבלה <code>library</code> לא קיימת:</b> מריצים פעם אחת ב-SQL Editor של Supabase את הפקודה שמופיעה בהודעה.</li>
+      <li><b>הודעה שלטבלה <code>library</code> חסרה עמודה (בהזזת סרטון):</b> מריצים פעם אחת ב-SQL Editor של Supabase את הפקודה שמופיעה בהודעה.</li>
       <li><b>תלמיד לא רואה סרטון חדש:</b> שירענן את הדף; הרשימה מתעדכנת אצל התלמידים תוך כדקה.</li></ul>
     <h3>מחיקה</h3>
-    <p>ב<b>תוכן</b>, בכרטיס <b>הסרטונים שבספריה</b>, לוחצים <b>מחיקה</b> ליד הסרטון ומאשרים. הסרטון נעלם לכל התלמידים. אין עריכה של שם או קישור: כדי לשנות, מוחקים ומוסיפים מחדש.</p>
+    <p>ב<b>תוכן</b>, בכרטיס <b>הסרטונים שבספריה</b>, לוחצים <b>מחיקה</b> ליד הסרטון ומאשרים. הסרטון נעלם לכל התלמידים. את הקישור אי אפשר לערוך: כדי לשנות אותו, מוחקים ומוסיפים מחדש.</p>
   </article>
 </dialog>
 <div id="whyTip" role="tooltip" hidden></div>
@@ -2586,7 +2590,15 @@ function drawContent(){
       const see=mark("btn","צפייה","button"), del=mark("btn danger","מחיקה","button");
       t.textContent=v.title; title.append(t); link.dir="ltr"; link.textContent=v.url.replace("https://",""); text.append(title,link);
       see.onclick=()=>playVideo(v,true); del.onclick=()=>deleteItem(table,v.id,`את הסרטון ${v.title}`,gone);
-      acts.append(see,del); row.append(mark("","▶︎","i"),text,acts); list.append(row);
+      if(table==="library"){   // the library's videos stand in the teacher's order, and take another name
+        const at=mine.indexOf(v), up=mark("btn move","↑","button"), down=mark("btn move","↓","button"), name=mark("btn","שינוי שם","button");
+        row.dataset.id="library"+v.id; up.title="הזזה למעלה: מוקדם יותר בספריה"; down.title="הזזה למטה: מאוחר יותר בספריה";
+        up.setAttribute("aria-label",`${up.title}, ${v.title}`); down.setAttribute("aria-label",`${down.title}, ${v.title}`);
+        up.disabled=!at; down.disabled=at===mine.length-1;
+        up.onclick=()=>moveShelf(mine,at,-1,list); down.onclick=()=>moveShelf(mine,at,1,list); name.onclick=()=>renameShelf(v);
+        acts.append(up,down,see,name,del);
+      }else acts.append(see,del);
+      row.append(mark("","▶︎","i"),text,acts); list.append(row);
     }
     adder(adds,`+ הוספת ${one}`,[field("שם הסרטון","title",{maxLength:80,placeholder:sample}),
         field("קישור ל-Vimeo או ל-YouTube","url",{inputMode:"url",placeholder:"https://vimeo.com/1233611297/d46ac373c8"})],hint,
@@ -2684,6 +2696,26 @@ async function moveItem(l,items,at,step,list){   // a video or a text changes pl
   const me=id(items[at]), moved=[...$("mContent").querySelectorAll(".crow.added")].find(r=>r.dataset.id===me.kind+me.id);   // the keyboard stays on what moved
   const again=moved&&[...moved.querySelectorAll(".move")].find((b,k)=>k===(step<0?0:1)&&!b.disabled)||moved&&moved.querySelector(".move:not(:disabled)"); if(again) again.focus({preventScroll:true});
 }
+async function moveShelf(all,at,step,list){   // a video of the library changes places with its neighbour
+  const order=all.map(v=>v.id), me=order[at]; [order[at],order[at+step]]=[order[at+step],order[at]];
+  list.querySelectorAll("button").forEach(b=>b.disabled=true);
+  try{
+    const res=await send("/api/library/order","PUT",{order});
+    if(!res.ok) alert(await refused(res,"ההזזה"));
+  }catch{ alert("השרת לא זמין."); }
+  await loadContent(); drawContent();
+  const moved=[...$("mContent").querySelectorAll(".crow.added")].find(r=>r.dataset.id==="library"+me);   // the keyboard stays on what moved
+  const again=moved&&[...moved.querySelectorAll(".move")].find((b,k)=>k===(step<0?0:1)&&!b.disabled)||moved&&moved.querySelector(".move:not(:disabled)"); if(again) again.focus({preventScroll:true});
+}
+async function renameShelf(v){
+  const title=(prompt("שם הסרטון (עד 80 תווים):",v.title)||"").trim();
+  if(!title||title===v.title) return;
+  try{
+    const res=await send(`/api/library/${v.id}`,"PUT",{title});
+    if(!res.ok) alert(await refused(res,"שינוי השם"));
+  }catch{ alert("השרת לא זמין."); }
+  await loadContent(); drawContent();
+}
 async function deleteItem(table,id,what,more){
   if(!confirm(`למחוק ${what}? ${table==="videos"||table==="texts"?"זה יירד מהמסלול של התלמידים.":"התלמידים לא יראו אותו עוד."}${more}`)) return;
   try{

tests/test_scoring.py

@@ -1008,6 +1008,12 @@ def test_sign_in_guards_the_practice_endpoints():
         def delete_level_video(self, table, id):
             self.days[table] = [v for v in self.days[table] if v["id"] != id]
 
+        def rename_level_video(self, table, id, title):
+            next(v for v in self.days[table] if v["id"] == id)["title"] = title
+
+        def order_level_videos(self, table, ids):
+            self.days[table].sort(key=lambda v: ids.index(v["id"]))
+
         def add_video(self, lesson, title, url, pos, ord):
             self.vids.append({"id": len(self.vids) + 1, "lesson": lesson, "title": title, "url": url, "pos": pos, "ord": ord})
 
@@ -1222,9 +1228,18 @@ def test_sign_in_guards_the_practice_endpoints():
         assert c.delete("/api/library/3", headers=good).status_code == 200
         shelves = c.get("/api/library", headers=good).json()["library"]
         assert [(v["id"], v["title"], v["url"]) for v in shelves] == [(1, "two", link.split("?")[0]), (2, "one", link.split("?")[0])]
+        # a video of the library is renamed, and the library is put in the teacher's order
+        rename = lambda id, **body: c.put(f"/api/library/{id}", json=body, headers=good).status_code
+        order = lambda ids: c.put("/api/library/order", json={"order": ids}, headers=good).status_code
+        assert rename(1, title="  the  first ") == 200 and rename(1, title="") == 400 and rename(1, title="x" * 200) == 400 and rename(9, title="x") == 404
+        assert order([2]) == 409 and order([2, 2]) == 409 and order([2, 1, 9]) == 409 and order("x") == 400 and order(["2", "1"]) == 400
+        assert order([2, 1]) == 200
+        shelves = c.get("/api/library", headers=good).json()["library"]
+        assert [(v["id"], v["title"]) for v in shelves] == [(2, "one"), (1, "the first")]
         c.app.state.auth.teachers = frozenset()
         assert c.get("/api/library", headers=good).json()["library"] == [{k: v for k, v in s.items() if k != "url"} for s in shelves]   # all of it, without the links
         assert shelf(title="x", url=link) == 403 and c.delete("/api/library/1", headers=good).status_code == 403
+        assert rename(1, title="x") == 403 and order([1, 2]) == 403
         assert c.get("/api/dailies", headers=good).status_code == 403 and daily(level=L1, title="x", url=link) == 403 and c.delete("/api/dailies/2", headers=good).status_code == 403
         c.app.state.auth.cls, c.app.state.auth.teachers = [k for k in c.app.state.auth.cls if k["name"] != "D"], frozenset({"a@b.c"})
         new_class = {"name": " October 2026 ", "emails": "S@b.c, new@b.c\nnew@b.c  דנה  \nx@b.c\n",   # an optional nickname