music-bot-for-jitsi / jimmi Goto Github PK

As a developer
I want a structured base repository
so that I can implement features and tests in an orderly fashion.

Description:

Setup svelte and deno project.

🟢 In scope:

• #47
• #27
• Create trex scripts for run, build, lint, fmt @p-fruck
• Setup linting for frontend/backend @p-fruck

🔴 Not in scope:

• Start programming on features
• Setup unit tests structure

What should be the result?

A setup that can be used to start working on features.

Description:

• Change mode from auto to chatops link
• Disable to copy projects from issues to pr link

As a developer
I want to use issue branches
so that every branch has its corresponding issue and follows the same naming convention.

Description:

Setup a GitHub Actions that creates a new branch for every new issue.

🟢 In scope:

🔴 Not in scope:

What should be the result?

As a user
I want to have an endpoint for all music controls
so that I can start, stop and control music in the frontend.

Description:

Create an endpoint /api/instances/<id>/music for all music controls (e.g. play, pause, stop) as POST-request. To play a new track, a PATCH request should be sent with an additional JSON-payload containing the url to the song (play vs. continue). A GET request to the music endpoint should return information about the current song.

🟢 In scope:

• GET /music

GET /music res:
{
    status: 'playing'
    queue: [...]
    current: 'string_url'
}

• PATCH /music allows to update the status attribute and optionally the current attribute:

PATCH /music req:
{
    status: 'playing'
    current: 'someurl.com'
}

• DELETE /music clear queue

DELETE /music res
{
    status: 'playing'
    queue: []
    current: 'string_url'
}

• DELETE /music/:index deletes the song at index from the queue - index 0 skips the current song

DELETE /music/12 res: (204)

• POST /music/ adds a url to the queue

POST /music res like GET /music

🔴 Not in scope:

• Router implementations
• Other endpoints / features

What should be the result?

An endpoint that gives the user in the frontend clear controls over all music features.

As a developer
I want my code to be checked automatically for test coverage on each push on main
so that I have clear metrics showing my code quality.

Description:

Setup Codecov for this repo using GitHub Actions.

🟢 In scope:

🔴 Not in scope:

What should be the result?

As a developer
I want to use a config file
so that I don't have hard-coded settings which cannot be changed easily.

Description:

Create a config file and the typescript class for using it. Transfer all existing hard-coded settings into the new config file.

🟢 In scope:

• Create a config .env file in the backend folder
• Create a typescript module for accessing the config values (parser).
• Include the following variables:
  • Backend port (default: 8000)
  • Binding address (default: localhost)
  • Frontend dir (default: frontend)
• Set sensible defaults inside the parser module and fail on wrong or bad values (use a descriptive exception)
• Refactor old code to use the newly created config module
• Make sure that this .env file is also accessible from the binary and is used if existing

🔴 Not in scope:

• Backend features or api endpoints
• Docker config
• Workflow config

What should be the result?

A config file and a typescript module that every developer can import easily to access the config values. Also the module should be good structured for easy extension at new values.

As a developer
I want to have my frontend api client to be generated automatically from the api documentation
so that a correct api documentation is enforced and I do not have to manually change/update/create the api client manually.

Description:

Setup automatic api client generation from swagger docs using inline JSDoc/TSDoc comments.

🟢 In scope:

• Create a new repository jimmi-api-client
• Add the new repo as submodule in the main monorepo frontend section.
• Setup automatic Swagger definition generation from inline JSDoc/TSDoc comments (maybe with this)
• #44
• Setup pipelines to automate the above process (maybe with this module)

🔴 Not in scope:

• Write features or api specs (except some testing specs maybe)
• Begin api documentation

What should be the result?

A new repo with the frontend api client, included as submodule in the main repo which will be updated automatically once the backend api has changed.

As a user
I want to have a landing page
so that I have a good starting point to create a new bot instance.

Description:

Set up a landing page with a Create-Instance component. Use the old frontend as template regarding layout etc.

🟢 In scope:

• Create a new component / page that is registered as the main (landing) page /
• Add a Create button to create a new bot
• Add input fields for Instance, Room name, Password
• Add a Connect button to connect the the newly created bot
• Implement a loading screen while connecting that redirects to /instance/<id>/dashboard when connected

🔴 Not in scope:

• Backend api / features
• Dashboard

What should be the result?

A main page for the user that can be used to create a new bot instance and connect to it.

As a developer
I want my code to be compiled automatically
so that a new release is instantly available as binary.

Description:

Setup a continuous deployment pipeline on main push / release using GitHub Actions.
Depends on #59 and #60.

🟢 In scope:

• Build and push docker containers
• Build binary for Windows, Linux and MacOS
• Create release and append binarys

🔴 Not in scope:

• Write something else beside a .yml file

What should be the result?

A GitHub Actions pipeline that does the required actions automatically.

If the bot is the only user on the call, it should give moderator to the first person who joins.

As a
I want
so that

Description:

🟢 In scope:

🔴 Not in scope:

What should be the result?

As a end user
I want to have a single static binary I can download and run
so that jimmi is ready to use in just a few clicks.

Description:

Setup Deno to compile binaries for Windows, Linux and MacOS.

🟢 In scope:

• Create a build script for all operating systems
• Serve static files from backend
• Include static files in binary (no clean solution with deno)
• Ship as archive with frontend files and backend binary (portable)

🔴 Not in scope:

• Pipeline to automate something
• Publishing of releases

What should be the result?

A script that builds three executable binaries and bundles them into three archives.

As a student
I want my lecturer to be informed of all decisions and the reasoning behind them
so that we all get a 1.0 grade.

Description:

Document all decisions and cool things we made during development. This Issue is open end.

🟢 In scope:

• Why Svelte?
• Why Deno?
• Why Velociraptor and trex and for what?
• Why Snel and for what? (solved problems?)
• Why opine (backend framework)?
• Automated api client generation
• All GitHub Actions automations (what and why)? (e.g. SonarCloud, Issue automation, CI/CD, devcontainer, CodeCov, etc.)
• All external contributions
• #56

🔴 Not in scope:

• Programming or everything that has not to do with documentation

What should be the result?

A reasonable documentation that gives a good overview of what has been done and achieved.

As a developer
I want a new issue to be automatically added to the project JIMMI
so that my project overview is always up to date and complete.

Description:

Setup one of the automation options found here to automatically assign a new issue to the project with backlog status.
Potential candidate here.

🟢 In scope:

• Assign new Issues automatically to the JIMMI project

🔴 Not in scope:

• Other automation stuff

What should be the result?

I GitHub Actions pipeline (or modified pipeline) which does the required tasks on each new issue.

As a developer
I want a a web-socket connection for communicating between frontend and backend
so that events can be easily dispatched without the overhead of single http requests.

Description:

Implement a Web-Socket Connection between Frontend and Backend for dispatching of events (e.g. user joined or music controls). Use old code if possible, do refactoring as needed and take care of good exception handling (not yet there).

🟢 In scope:

• #87
• #88
• #89

🔴 Not in scope:

• Other api endpoints
• Web-socket message implementations

What should be the result?

A working backend endpoint /api/instances/<id>/socket that creates a websocket. A frontend implementation in a Socket.ts file that can be used by other components to communicate with the backend and receive events.

As a developer
I want my code to be checked automatically
so that syntax and all tests are passing before merging new code.

Description:

Setup linting and unit test ci on pull request using GitHub Actions. Use org-wide secrets if needed.

🟢 In scope:

• Setup one pipeline to run on each pull request, check for linting errors and run all unit tests.
• Separate jobs for backend and frontend
• If possible, use an existing action that gives good output what failed and why
• Add the same ci pipeline to the jitsi-api-client repository

🔴 Not in scope:

• All besides writing a .yml file

What should be the result?

A pipeline that runs on every pull request.

As a developer
I want to have coverage tests on pull requests
so that all new code is checked for unit test coverage.

Description:

Extend the SonarCloud pipeline to include coverage reports.

🟢 In scope:

• Update and test the SonarCloud pipeline

🔴 Not in scope:

• Update CI pipeline

What should be the result?

Coverage reports on the main branch and every pull request. Effective fail on check at coverage less than 80%.

As a service provider
I want a cool microservice architecture
so that I can setup and host my own scalable version of jimmi.

Description:

Create docker files for container building and run.

🟢 In scope:

• Setup a Dockerfile for frontend inside the frontend folder
• Setup a Dockerfile for backend inside the backend folder
• Setup .dockerignore files (frontend & backend)
• Setup a docker-compose.yml for starting jimmi

🔴 Not in scope:

What should be the result?

A docker setup that can be build and run by using one command.

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.

Description

To get the current text coverage of the project,

Steps to reproduce:

Steps to reproduce the behavior:

1. Open a "ready to code" repo
2. Go to backend cd backend
3. Execute trex run cov

What was supposed to happen?

Some sort of results instead of an error message.

Further information:

Log

vscode ➜ /workspaces/Jimmi/backend (feature/72-Create-Opine-Routers ✗) $ trex run cov
error: Found argument '--config' which wasn't expected, or isn't valid in this context

        If you tried to supply `--config` as a value rather than a flag, use `-- --config`

USAGE:
    deno coverage [OPTIONS] <files>...

For more information try --help

error: Uncaught (in promise) Error: running command deno coverage  --config deno.json

Additional
Here you have space to add additional information. Remove this section if it is not necessary.

As a user
I want to have a bot dashboard
so that I control music and other settings with ease.

Description:

Set up a dashboard page /instance/<id>/dashboard with a Dashboard component. Use the old frontend as template regarding layout etc.

🟢 In scope:

• Create a short mockup of the plannend layout and discuss it with the team (or some team members)
• Add a display field for the room url
• Implement a Disconnect / Leave button and its functionality
• Implement a video url / search term input fiel with a play button and its functionality
• Add a template frame for the music player component
• Add a song queue component
• Optional: add a list of users that are currently in the jitsi room

🔴 Not in scope:

• Backend api / features
• Music player component

What should be the result?

A dashboard page for the user that can be used to control all bot aspects.

As a developer
I want to use a development container
so that I do not have to install all dependencies and runtime environments by hand on bare metal.

Description:

Create a devcontainer Dockerfile.

🟢 In scope:

🔴 Not in scope:

What should be the result?

As a developer
I want to have routers that provide access to different endpoints
so that I have well structured code and can execute requests to those endpoints.

Description:

Create different first-level opine routers (e.g. music) with second-level sub-routers (e.g. play or pause). Create a directory structure that reflects the router levels.

🟢 In scope:

• Create a directory structure that reflects router levels
• Create different first-level opine routers
• Create second-level sub-routers

🔴 Not in scope:

• Endpoint implementations
• Everything not inside the jimmi backend

What should be the result?

Different opine routers providing all required endpoints within a reasonable directory structure.

As a developer
I want a well documented REST-endpoint for communication with the backend
so that everyone can use jimmi with their own frontend.

Description:

Develop a REST-API with Deno and Opine in the Jimmi backend that provides clean and simple endpoints for the jimmi frontend and others. Use old code when possible, do refactoring as needed and take care of good exception handling (not yet there). Use the old code to find all methods and api calls needed for the jimmi frontend. Implement the API iteratively and add endpoints as they are needed. Use /api as base for every endpoint. User swagger inline JSDoc comments to document all created endpoints.

🟢 In scope:

• Create an api folder with all contents inside the backend folder.
• #72
• #73
• #74
• Low priority: Create an endpoint /api/instances/<id>/jitsi for switching to a new jitsi room.

🔴 Not in scope:

• Direct interactions with the jitsi api (use the provided api wrapper)
• Direct interactions with the youtube or invidious api (use the provided module)
• Frontend stuff

What should be the result?

A full documented and well structured REST api that has varoius endpoints that can be used with the jimmi frontend or other applications.

Setup document structure for architectural decisions, etc.

Summary

Allow users to paste a full link into the "instance" field and automatically fill the room name using the inputed url.

User inputs "https://meet.jit.si/MaximumDocumentationsWinWhen" into "instance"
-> automatically fill room name: "MaximumDocumentationsWinWhen"

Motivation

Improves the usability for users

As a developer
I want to have a module to get the audio stream from youtube
so that I have more reusable and well-structured code.

Description:

Develop a new node module which handles all interaction with youtube. Use old code whenever possible, do refactoring as needed and take care of good exception handling (not yet there). Use the old code to find all methods and API calls needed for Jimmi.

🟢 In scope:

• Implement a contructor that takes an invidious instance url as optional parameter. Use snopyta as default.
• #70
• Optional: Implement a function for searching a video by text input (search query)

What should be the result?

A new module which can be seamlessly included in the Jimmi backend that has the required functions.

As a developer
I want to have a library for playing music
so that I can start, stop and control music in the backend.

Description:

Implement a module for handling the audio stream functionality with Jitsi. It should contain a function that takes an URL of an audiofile and streams its content into a Jitsi room.

🟢 In scope:

• Create a new module inside the lib folder.
• #112
• #113
• #114
• [Optional]: Implement fast forward and seek functionality

🔴 Not in scope:

• Backend API implementation
• Jitsi API implementation
• Playlist functionality

What should be the result?

A library that can be used in the backend REST API to play music in a Jitsi room.

As a developer
I want my code to be checked automatically for code smells and other metrics on each push on main
so that the overall code quality improves.

Description:

Setup Code Climate for this repo using GitHub Actions.

🟢 In scope:

🔴 Not in scope:

What should be the result?

As a developer
I want to use issue templates for user storys and bug reports
so that all changes are documented using the same structure and all information are complete.

Description:

Setup Issue Templates for Userstorys & Bugreports for this repo.

🟢 In scope:

🔴 Not in scope:

What should be the result?

Description

Our script to generate the api specification does not use all files in src/ as an input.

Steps to reproduce:

Steps to reproduce the behavior:

1. Execute ./scripts/gen_openapi_spec.ts test.json

What was supposed to happen?

The script should use all files in src/ as an input to generate the documentation

As a developer
I want to write and run unit tests in a structured fashion
so that I recognize errors early in the development process.

Description:

Setup own tests folder which mirrors the structures of the main frontend/backend folder. Use deno in backend. Use jest in frontend. Write two example unit tests (frontend/backend) which always pass. Write test and cov scripts for trex.

🟢 In scope:

• Setup own tests folder which mirrors the structures of the main frontend/backend folder.
• Use deno in backend.
• Use deno in frontend.
• Write two example unit tests (frontend/backend) which always pass.
• Write test and cov scripts for trex.

🔴 Not in scope:

• Write features or unit tests for features

What should be the result?

A setup which can be used straightforward to start writing unit tests.

As a developer
I want have a good description of my project
so that everyone can understand what I am doing and how to use this repo.

Description:

Add a readme.

🟢 In scope:

🔴 Not in scope:

What should be the result?

As a developer
I want to have a websocket endpoint in the backend
so that I can communicate events e.g. music stopped) to the frontend in real time.

Description:

Implement a web socket endpoint in the backend. Check if this can be realized using Opine (see examples). If not check if it can be done using socket.io. Use a separate file for your implementation.

🟢 In scope:

• Implement a Socket class that creates a new web socket
• Add an /api/instances/<id>/socket api endpoint that creates a new socket and returns it

🔴 Not in scope:

• Frontend implementation of the web socket
• Web socket documentation

What should be the result?

A working web socket implementation in the backend.

As a developer
I want to have a function that gets me the correct audio file from youtube
so that I can start streaming it to jitsi

Description:

Implement a function that takes a youtube link, extracts the youtube id and finds the correct audio file (ogg vorbis is preferred).

🟢 In scope:

• Function and methods needed to retrieve the audio file link

🔴 Not in scope:

• Audio file download / streaming
• Jimmi backend stuff

What should be the result?

A functions that takes a youtube url and returns a link the the corresponding audio file.

As a user
I want to have a music player in the bot dashboard
so that I start and stop music and see the current status.

Description:

Implement a music player component for the dashboard that uses the web socket connection to synchronize with the backend and can be used to control all music aspects except of adding a new song.

🟢 In scope:

• Add controls for play, pause, skip and previous
• Low prio: Add time slider that is in sync with the backend
• Add a music cover
• Display the current song
• Integrate your component into the dashboard

🔴 Not in scope:

• Other dashboard components
• Backend implementations
• Websocket implementation

What should be the result?

A music component for the user that can be used to control all music aspects.

Summary

As mentioned in #15, a beta switch should be implemented which enables switching between the stable version at jimmi.xyz and the beta version jimmi.xyz/beta.

Motivation

Users should be able to test the beta mode of the application and thereby improve issue reporting

Additional information

As a user
I want want an easy and beauty frontend
so that I can control all aspects of jimmi with ease.

Description:

Setup a frontend using Tabler. Take care of a good structure. Use code from the old (Tailwind 2) frontend when possible, do refactoring as needed and take care of good exception handling (not yet there). Use dynamic colors (primary and secondary color are defined as theme) in contrast to the hardcoded colors in the old backend.

🟢 In scope:

• #90
• #91
• #92
• #93

🔴 Not in scope:

• Backend implementations
• Api clients (use the generated one)

What should be the result?

A working frontend with the components described.

As a developer
I want to have my frontend api client to be generated automatically from the api documentation
so that a correct api documentation is enforced and I do not have to manually change/update/create the api client manually.

Description:

Setup automatic api client generation from swagger docs using inline JSDoc/TSDoc comments.

🟢 In scope:

• Setup Swagger CodeGen for automatic generation of an JS api client

🔴 Not in scope:

• Create a new repository jimmi-api-client
• Add the new repo as submodule in the main monorepo frontend section.
• Setup pipelines to automate the above process (maybe with this module)
• Write features or api specs (except some testing specs maybe)
• Begin api documentation

What should be the result?

tbd

Description

The api client generation pipeline fails.

Steps to reproduce:

Steps to reproduce the behavior:

1. Commit a backend api change

What was supposed to happen?

The pipeline should pass and update the api client.

Further information:

Caused by #63. Pipeline needs to be updated to use the new gen_openapi_spec.ts script to generate the json file instead of starting the backend.

Log
See here for logs.

As a Developer
I want a simpler way to run my scripts
so that I can get started with development more quickly

Description:

Deno had its update to 1.20.1, which introduces the task subcommand, which we can utilize to get rid of trex.
Furthermore, the --import-map flag can now be written inside the deno.config.

🟢 In scope:

• Migrate from trex to deno tasks
• Include import-map in config
• Remove explicit --config, as deno detects it automatically
• Adapt CI pipeline to use deno tasks
• Change --no-check to --no-check=remote
• Optionally split the test command in test and test:cov

🔴 Not in scope:

What should be the result?

As a developer
I want to have an endpoint for creating a new jimmi instance
so that I have an instance id for all further configuration.

Description:

Create an endpoint /api/instances that accepts a POST request and creates a new jimmi instance.

🟢 In scope:

• Function and methods needed to accept a POST request and create a new jimmi instance.
• Internal mapping of Instance UUIDs to Jimmi instances

🔴 Not in scope:

• Router implementations
• Other endpoints / features

What should be the result?

An endpoint that creates a new jimmi instance on POST request and return its id.

As a developer
I want to have well structured frontend
so that I can add fancy features.

Description:

Set up a frontend with tabler. Take care of a good structure.

🟢 In scope:

• Frontend setup

🔴 Not in scope:

• Frontend features

What should be the result?

A working basic frontend, maybe with sample pages or data.

As a developer
I want to have a websocket documentation
so that there is no confusion about what can be send and received using the websocket.

Description:

Check and create a good documentation structure for everything we want to send through the web socket connection (maybe using the async api with inline code comments.

🟢 In scope:

• Implement good documentation structure for everything that will be sent using the websocket
• Create documentation for all existing message and event types

🔴 Not in scope:

• Functionality implementations

What should be the result?

A reasonable web socket documentation like we have for the backend REST api.

As a developer
I want my code to be checked automatically by SonarCloud on each pull request and periodically on main
so that my code is secure and clean.

Description:

Setup SonarCloud for this repo.

🟢 In scope:

🔴 Not in scope:

What should be the result?

A new workflow that does SAST and code scanning on every PR and push to main.

As a developer
I want to have a websocket class in the frontend
so that I can receive events e.g. music stopped) from the backend in real time.

Description:

Implement a web socket class in the frontend. Check if this can be realized using Opine (see client examples). If not, check if it can be done the native browser api. Use a separate file for your implementation.

🟢 In scope:

• Implement a Socket class that creates a new web socket, opens a backend connection. and can be imported by other modules for registering callback listening functions.
• Add/test functionality to receive messages and pass them to the caller (no modification here)
• Create default listeners for open, close, etc.

🔴 Not in scope:

• Backend implementation of the web socket
• Web socket documentation

What should be the result?

A working web socket implementation in the frontend.