Fully functional multi platform (MacOS/Windows/Linux) mp3 player built with Electron/React/Node. Built in memory of Keith Flint, one of my favorite vocalist.
Download MacOS arm64 dmg (link valid until 26-03-2023). You can also build binary for another platform by yourself extremely easily
- basic player option: start/stop, skip backward && forward, restart, volume setter
- auto switch to next song
- main grid with audio metadata: title, artist, album, year and genre
- quick search for songs
- traversing local directories in side panel
- filtering by artist, album and year
- theme picker (6 available themes! ... and it's extremely easy to add new !)*
- i18n (EN, PL, FR, DE ... and it's extremely easy to add new !)*
- see also Customizing app
App consists of two parts: application view built with React and lightweight HATEOS-driven server built with express. There are different ways to run them in development mode
First of all make sure you have node in version >= 14 installed on your machine. To check this simply type:
node -v
in your terminal. Then install necessary dependencies in client and server directories (please make sure to install dependencies using yarn)
cd client && yarn install
yarn run i18n
cd ../server && yarn install
There are different ways of running app (or its parts). You can:
- run electron in dev environment (fire entire application in dev mode)
cd server
yarn run electron-dev
- run client app separately
cd client
yarn run start
- run server side separately
cd server
yarn run server:dev
- run server and client side simultaneously (launch app in the browser)
cd server
yarn run start
There are two things which you can extremely easy customize:
- translations
- themes
You can add support for new translations in 4 simple steps:
- Generate translations template
cd client
yarn run i18n:populate
New file will be placed in client/translations/lang.json
- Translate all values , and adjust file name (filename should match your locale)
- Go to
AppContext.tsx
and update locales array with your locale. You can modify array in a way you want. Basically array determines order in which translations are loaded after clicking button. You can leave only yours locale (no possibilty to change language), or put it somwhere in the array. It must be reflected on server side validation -> please visit preferences.js and update language base types. - Regenerate types on client side (types are creted dynamically based on exisitng data)
cd client
yarn run i18n
Process is even simpler comparing to translations. You have to:
- Visit themeMap.ts and define your theme based on 3 colors (light primary, dark primary and accent). New type must be typeof Theme and must be added to themeMap (you can also drop / update other themes if they are not suitable for You)
- Update validation on server side by visiting preferences.js and extending themes base type
To build native app go to server diectory and run
yarn run build-electron
As a first stage react production build is made. Then it's being copied to server and finally everything is bundled into one app. After awhile you should be able to see your app in dist folder. Depending on your operation system different binaries are located there (like DMG images on MacOS or Windows installer).
If you need some kind of customization, please read electron docs.
- fork project and create Electron based desktop app
- basic e2e test suite with Cypress
- HATEOAS driven API
- clean up types
I have some ideas in my mind about next features but it's always better to groom them together ! Write to me directly on jedrzej.lukasiuk@gmail.com and let's see how this project can grow !