ARCHITECTURE.md

App architecture

Here is a summary of how the app is structured. Useful to get started with development.

File and Folder structure

There are two source folders. One for the renderer process and one for the main process.

src: the renderer process code and assets

• src/application: the SPA js code (React + Mobx, related services, ...)
• src/images: all images go there
• src/lib: contains modules that handle the data under the hood (media library, db wrapper, ...)
• src/styles: contains the entry point for styles, variables and skins (less)
• src/ui-framework: contains resusable styles and UI components (less / React)

app: the main process code

Note: named "app" to follow the two package.json structure.

• app/main: js code for all the main/nodejs logic.

Webpack build

The client app (renderer) is built with Webpack.

The entry point is in src/index. Everything that Webpack loads is required there.

Electron build

The app releases are created with electron-builder. Currently using the two package.json structure.

Electron main entry file is in app/main.js which is transpiled after in main.dist.js.

Current implementation

Media libray

• The media library is stored in the browser WebSQL database.
• When the app loads, it will load the media library into memory through the app store.

Scanning for audio files

• Given a directory, it will look for audio files and parse their audio tag with music-metadata.
• A new entry will be added in the DB.

Playing songs

• The player is using Howler.js under the hood.
• It can be manipulated through the UI or keyboard media keys registered in playerEventManager.js

App settings

• They are stored in a JSON config file located in the corresponding user data folder.
• When the app loads, it will read the settings there. If any setting changes, the file is updated.