Prototyp Website VideoAG

Dies ist ein Fork des VideoAG repo in dem an einem neuem Frontend gebaut wird, die alte README ist unten.

Eine Live Version ist erreichbar unter https://video.dorianko.ch/new/. Diese wird jedoch nur hin und wieder manuell von @doriank geupdated.

Das neue Frontend ist unter ./videoag_new_frontend zu finden. Zur Entwicklung ist es notwendig NodeJS zu installieren. Das Frontend läuft über NextJS, dieses Framework erlaubt es uns mit wenig Aufwand code-splitting zu betreiben, und ist sehr schnell in der Kompilierung (Was die Entwicklung ungemein beschleunigt). Wenn ihr gute Argumente habt, bin ich bereit das Framework zu wechseln solange es mindestens support for ReactJS hat.

Warum ein neues Frontend?

Die bisherige Codebase ist nicht besonders strukturiert aufgebaut. Dies führt dazu, dass es für Außenstehende schwer ist, Änderungen durchzuführen, da die verschiedenen Komponenten sehr stark verstrickt sind (Rumpe würde von einer hohen "Kopplung" sprechen). Insbesondere ist das problematisch, da die ursprünglichen Entwickler schon lange nicht mehr an der Universität sind, und sich seitdem niemand anderes gefunden hat der/die die alte Codebase weiterentwickeln will.

Die Folgende Liste ist das Ergebnis von ein paar Minuten brainstorming:

• Dark Mode
• Download von allen Videos einer Vorlesungsreihe mit nur einem Button-Click
• Effektivere und schnellere Navigation für den üblichen Use-Case
  • Das zuletzt angesehene Video/Vorlesung auf der Startseite anzeigen
  • Searchbar die nicht bei jeder Eingabe den Server fragen muss (-> Alle Video-Namen einmal abfragen und darauf suchen)
• Untertitel
  • Automatische Untertitel Generierung über Whisper (-> Entsprechende Hardware / Cluster Zugriff notwendig)
  • Wenn Untertitel verfügbar sind, kann man auch automatisch Zusammenfassungen und Videokapitel über LLMs generieren (-> CLAIX-2023 kommt uns hier sehr gelegen)
• (E-Mail)-Benachrichtigungen bei neuen Uploads einer bestehenden Vorlesungs-Reihe

Offensichtlich ist es nicht das Ziel des Repositories alle diese Features zu realisieren, sondern vielmehr eine Grundlage zu schaffen in der diese Ideen (und in der Zukunft hoffentlich noch viele andere) ohen viel Vorwissen der Codebase oder Infrastruktur von (fast) jedem implementiert werden können.

Entwicklung

Die Entwicklung via Docker mit dem Code als Volumen eingebunden ist am einfachsten aufzusetzen und konsistent über alle (Betriebs-)Systeme. Die Commands werden unten in der README nochmal ausführlicher erklärt, aber hier die Zusammenfassung:

Einmalig:

• Docker und NodeJS installieren
• Überprüfe deine NodeJS version: node --version
  • Falls die ausgegebene Version älter als v18 ist, ist es notwendig, Node.js zu aktualisieren.
  • Beachte, dass bei der Verwendung von Ubuntu über den Standardpaketmanager apt oft nur ältere Versionen von Node.js verfügbar sind.
• In diesem Ordner: docker build -t videoag .
• Im Ordner videoag_new_frontend/: npm install

Dann (nicht vergessen wieder ins Projekt verzeichnis zurück zu navigieren):

• Unix: docker run --rm --name=videoag -it -v "$(pwd):/code" -p 5000:5000 --add-host=host.docker.internal:host-gateway videoag
  • Auf windows $(pwd) mit ${pwd} ersetzen
• Im Ordner videoag_new_frontend/: npm run dev
  • Dies startet einen dev-server für das neue Frontend auf Port 3000
• Webseite unter localhost:5000 besuchen, das neue Frontend ist unter localhost:5000/new erreichbar.

Der Erste Command startet ein docker image, welches nginx und python-flask startet. Der Zweite Command startet den WebServer des neuen Frontends, auf der Production Website wird dieser aber nicht benötigt, weshalb dieser nicht in einem docker image ist.

Wenn du Probleme mit 403 Errors hast, sind wahrscheinlich die Berechtigungen deiner Ordner nicht richtig angepasst. Damit der Docker Container funktionieren kann, muss für die "Other" Gruppe jeder Ordner (Auch der Projekt ordner selbst!) das Execute Bit und jede Datei das Read bit gesetzt haben.

Website der Video AG (Alte README)

Entwicklung

Zum Testen:

Hinweis: diese Variante startet eine lokale Testversion der Website, es sind nicht alle Features verfügbar, z.B. LDAP-Login.

1. Repo Clonen
2. Verzeichnis betreten
3. (optional) config.py.example anpassen und als config.py neu speichern (z.B. DEBUG = True)
4. Schauen, ob alle Dependencies erfüllt sind (siehe weiter unten)
5. ./run.py ausführen
6. Unter http://localhost:5000 ist die Website verfügbar
7. Moderatorlogin mit user: videoag Passwort: videoag

Alternativ, insbesondere zum Testen der Zugriffsbeschränkungen: Siehe nginx.example.conf.

Unittests

Tests können mittels ./run_tests.py ausgeführt werden.

Coverage Tests können mittels rm .coverage; python -m coverage run run_tests.py; python -m coverage html ausgeführt werden. Dies erstellt einen Ordner htmlcov in dem HTML Output liegt.

Zum Mitmachen:

1. Repo für den eigenen User forken, dafür den "Fork-Button" auf der Website verwenden
2. Sicherstellen, dass der Upstream richtig konfiguriert ist:
   Link Origin stellt hier euren User da, Upstream das Original der Gruppe videoagwebsite
3. Erstellt euch eine eigene Branch, diese könnt ihr nennen wie ihr wollt, entweder nach der Änderung oder eurem Namen (git branch username), danach switched ihr in diese Branch (git checkout username)
4. Die Initialisierung ist unter "Zum Testen" bereits erklärt worden
5. Änderungen machen, committen, upstream mergen (git fetch upstream; git merge upstream/master)
6. Ins eigene Repo pushen (git push)
7. Pull-Request an uns, dazu unter "Merge-Requests" einmal auf "New Merge Request" und das Private Repo auswählen; oder ihr geht auf euer privates repo, da taucht dann eine Benachrichtigung über einen möglichen Merge-Request auf
8. Warten
9. Wir mergen die Änderungen

Abhängigkeiten

Notwendig:

• python (Version 3)
• sqlite3 (Python builtin)
• python-flask
• python-requests (wird vom L2P und vom Kalenderimport verwendet, kann nicht optional eingebunden werden)
• git (zum Anzeigen der aktuellen Version)

Optional (wird für einzelne Features benötigt):

• python-lxml (Campus- und RO-Import)
• python-pytz (RO-Import)
• python-ldap3 (Login mit Fachschaftsaccount)
• python-icalendar (RO-Import, Kalenderimport für Sitzungsankündigungen)
• python-mysql-connector (wenn MySQL als Datenbank verwendet werden soll)
• python-coverage (Für Coverage Tests benötigt)

Kurzform unter Ubuntu: sudo apt install python3 python3-flask sqlite python3-requests python3-lxml python3-ldap3 python3-icalendar python3-mysql.connector

Mit python-eigenem Paketmanager: pip install -r requirements.txt

---

Alternative: Docker Image

Alternativ zu vorigem Setup kann zum lokalen Testen Docker verwendet werden, um die Testversion zu starten:

1. Lokal das Image erstellen mittels docker build -t videoag . in diesem Ordner.
2. Einen entsprechenden Container starten, z.B.: docker run --rm --name=videoag -p 5000:5000 videoag
   • --rm löscht den Container nach dessen Terminierung
   • -p 5000:5000 mappt den Port, damit der Host auf die Webseite zugreifen kann. Nicht den lokalen Port ändern, da ansonsten ggf. Thumbnails oder Videos nicht mehr geladen werden können.
   • Zusätzlich kann mittels -v /lokaler/pfad/:/code der Source-Code im Container mit dem Host gemounted werden.
3. Webseite unter localhost:5000 besuchen.

In dieser Variante sollte in der config.py folgendes gesetzt werden:

SERVER_IP = 'localhost'
VIDEOPREFIX = '/files'