# audio-guesser design document

Development workflow is [gitflow](https://www.atlassian.com/git/tutorials/comparing-workflows/gitflow-workflow).

## Requirements

### Primary

1. The web-ui provides capabilities to input search request into a text input and get a response with the list (prioritized by the best match-first) of audio tracks which contain information about the author, track title, an optional album and icon.
2. Application should provide an opportunity to listen to the song, which was found previously.
3. UI/UX of simple music player should provide such information, like: duration, title, album and author of a song, current progress of listening the song.
5. Web-ui must provide an ability to stop, pause, volume up/down of song, which is playing.
6. Web-ui and web-server is available under some domain name in public Internet space.

### Additional

1. The application provides a dedicated mode for playing the game of finding out the audio track that the user makes up. The rules of the game are the following:

1.1. User inputx words of some song or record it from audio-device.

1.2. Application shows a single song, which matched to the provided data best.

1.3. The user replies with `"Yes"` or `"No"` to the question whether the provided song was the one user made up initially.

1.4. Each time the user presses `"No"` the amount of tries decreases.

1.5. Once the user pressed `"No"` 5 times (5-ths is the dermining try) the user wins the game and the application cries like a baby.

1.6. If the user presses `"Yes"` // FIXME: todo the reward

## Solutions

### Frontend
1. Single page `Angular` application that displays a text input in the middle (google.com - like design). The logo (audio-guesser) is displayed as a jumbotron on the top of the text input.
2. Text input has a button with an embedded microphone icon that spawns an audio-recorder dialogue. If user's microphone is not available it is displayed disabled with a tooltip `"Your input audio device is not available"`.
3. Once the user presses the search button Frontend issues a GraphQL request to the server that paginates relevant search results in best-match first order.
4. Audio-recorder dialogue (or pop-up window, choose the easiest implementation) must record a sample of audio from user's input audio device.
5. On the top the page there is a second tab that lets the user to jump into `"Game mode"`, it forwards the client to `/play` route.

### Backend
1. Backend is a single-instance classic web-server running any opinionated web-framework that serves the `Angular` bundle.
2. Backend is running in a docker container that gets deployed to heroku via Github workflow cicd service.