Create Project EPIC and User Story Issues

[antonplagemann]

As a developer
I want the project to be well structured
so that everyone knows who does what until when with a clear defined result.

Description:

Create an Issue for every EPIC and every User Story that has been discussed in the last meeting at 25.02.2022.
Raw meeting output (german):

# Wrapper für die Jitsi API (eigenes Package auslagern & publishen)
- Meilenstein 1: Connect Funktion implementieren
- Meilenstein 2: Commands über die Jitsi API auführen
- Meilenstein 3: Events von der Jitsi API durchreichen
- Eigenes Repo anlegen 'jitsi-api-client'
- Exception Handling implementieren
- Code von Philipp nehmen, Methoden rausfinden und refactoren (wrappen)
- Eine Methode: Raum & Passwort dann direkt Verbunden

# Modul für die YouTube API (oder https://invidious.snopyta.org, dezentral)
- Eigene TypeScript Klasse im Repo anlegen im Ordner 'lib'
- Im Kontruktor URL für die Instanz übergeben mit Default (snopyta)
- Erste Funktion: Link bekommen, YoutUbe ID extrahieren, Audiofile finden, Format beachten (ogg vorbis am besten)
- Zweite Funktion (optional später): Search-Query (mit Text-Input)

# Definition REST-Schnittstelle (Endpunkte) Backend für Frontend und Third-Party-Tools
- Verschiedene Router (z.B. Jitsi) mit weiteren Routern für Unterpunkte (Join, Leave). Ordnerstruktur sollte REST-Struktur widerspiegeln.
- Pro Endpunkt iterativ, Basis /api in Ordnerstruktur abbilden
- Endpunkt-Schema: instances/<id>/<endpoint>
- Post an instances legt neue jimmi Instanz an
- 1. Endpunkt <id>/Music: Für alle Music-Controls, d.h. play, pause, stop als POST-Requests, optional mit JSON Payload (play vs. continue)
- 2. Endpunkt <id>/Jitsi (low Prio, erst später): Updated den Raum

# Web-Socket Connection zwischen Frontend und Backend für das Dispatchen von Events (z.B. User joined oder Musikcontrols)

# Frontend einrichten (viel copy & paste aber Struktur einrichten). Auf Tailwind 3 migrieren.

🟢 In scope:

• Create an Issue for every EPIC
• Create an Issue for every User Story

🔴 Not in scope:

• Development
• User assignments
• Issue time scheduling

What should be the result?

An Issue for every EPIC and User Story using the default Issue templates.

[antonplagemann]

Issues created:

• [EPIC] Develop a Wrapper for the Jitsi API jitsi-api-client#8
  • Create jitsi-api-client Repository jitsi-api-client#2
  • Implement Jitsi API Connect Function jitsi-api-client#3
  • Implement Jitsi API Command Execution Function jitsi-api-client#4
  • Implement Jitsi API Event Handling Function jitsi-api-client#5
  • Implement Jitsi API Room Connection Function jitsi-api-client#7
• [EPIC] Develop YouTube Module using Invidious #69
  • Implement YouTube Audio File Search Function #70
• [EPIC] Develop Backend REST-API #71
  • Create Opine Routers #72
  • Create /api/instances Backend Endpoint #73
  • Create /api/instances/<id>/music Backend Endpoint #74
• [EPIC] Implement Web-Socket Connection between Frontend and Backend #75
  • Implement Backend Web-Socket Endpoint #87
  • Implement Frontend Web-Socket #88
  • Create Web-Socket Documentation #89
• [EPIC] Setup Frontend using Tailwind 3 #76
  • Setup Tailwind Frontend #90
  • Develop Landing Page Component #91
  • Develop Dashboard Component #92
  • Develop Dashboard Music Player Frame #93
• [EPIC] Implement Audio Functionality #111
  • Implement functionality to stream in to a Jitsi room #112
  • Implement play, pause functionality #113
  • Add unit tests for all audio functionality #114

[antonplagemann]

Update Task:

Create an Issue for every EPIC and every User Story that has been discussed in the last meeting at 04.03.2022.
Raw meeting output (german):

# Web-Socket Connection zwischen Frontend und Backend für das Dispatchen von Events (z.B. User joined oder Musikcontrols)

- Ist das mit [Opine](https://deno.land/x/[email protected]/examples/websockets) realisierbar?
  - Client-Server example evtl. direkt übernehmen?
  - Kann Opine auch im Frontend verwendet werden? Native Browser-API verwenden?
- Falls nicht: Implementierung socket.io möglich?
- Ziel: Server -> Frontend Kommunikation bei Änderungen (z.B. Musik gestoppt) für Aktualisierung der Anzeige
- Eigene Datei (eigene Klasse?)
- Datei enthält Code, um einen Socket anzulegen und die Verbindung aufzubauen. Der Socket wird dann exportiert und kann dann von anderen Funktionen importiert & verwendet werden.
- Endpunkt für Web-Socket: `/api/instances/<id>/socket`.
- Nachrichten werden unverändert weitergegeben
- Dokumentieren was darüber versendet wird (welche Events, Subscriptions, etc.). [Async api](https://www.asyncapi.com/) verwenden? Inline im Code.
- Frontend Socket.ts mit default listener für open, close, etc. anlegen.
- Wrapper Klasse für Queue Szenarien benötigt?

# Frontend einrichten (viel copy & paste aber Struktur einrichten)

- Einrichtung von [tabler](https://tabler.io/)
- Create-Instance component (Startbildschirm) `/`
  - Neuen Bot erstellen Button
  - Inputs: Instanz, Raumname, Password
  - Connect Button -> Loading Screen -> Dashboard
  - Altes Frontend als Vorlage verwenden für Anordnung etc.
- Dashboard component `/instance/<id>/dashboard`
  - Raum-URL
  - Disconnect / Leave Button
  - Video-URL / Search Term (optional) Input Feld & Play Button
  - Music Player: aktueller Song, thumbnail, play, pause, skip, previous, time slider (low prio)
  - Song-Queue
  - Dashboard vorab designen / mock up (wo ist welche Komponente, wie platziert)?
  - User Liste (low prio label)

🟢 In scope:

• Create an Issue for every EPIC
• Create an Issue for every User Story

🔴 Not in scope:

• Development
• User assignments
• Issue time scheduling

What should be the result?

An Issue for every EPIC and User Story using the default Issue templates.

[antonplagemann]

New issues created, the overview comment has been updated with all new changes.