[Entry] Dj Soma
Tags: pushercontest, angular, python, pusher
Published: 2018-05-23 21:06:42

---
title: [Entry] Dj Soma
published: true
description: An app/hack submitted to the first-ever DEV Community contest. 
tags: pushercontest, angular, python, pusher
---

# What I built

A "distributed" music player web application.

The player is on the server machine and anybody on the local network can add songs to the playlist.

If somebody adds a song to the playlist he/she can't add a new one for a given time (default is 1 minute).

There is one device with administrator priviliges. With this device the waiting time can be changed and songs' deletion also possible with it.

There is an autoplay feature (the application uses the youtube API for this) but sometimes I'm not satisfied with the provided next song. It should be improved so this feature is marked as beta.

## Demo Link

Videos:
- [video1](https://youtu.be/tz_K8ClsJMs)
- [video2](https://youtu.be/gRuZNHXfE1Y)
- [video3](https://youtu.be/ES3oOVrdOCU)

### How to run this application

I tested it on linux mint 18 but I think it should work on every linux distribution. (docker attaches /dev/snd volume and it's not available on windows)

#### Docker-compose

Download [Docker compose file](https://drive.google.com/open?id=1cPFyWOQXEXnErd0sHa8JGciLYz9BoQYg) and run `docker-compose up -d`

#### Without docker-compose

`docker container run -d -p 8080:8080 docoprusta/dj-soma-frontend-pusher`

`docker container run -d --privileged -v /dev/snd:/dev/snd -p 5000:5000 dj-soma-backend`

## Link to Code

[Frontend](https://github.com/docoprusta/dj-soma-frontend-pusher)
[Backend](https://github.com/docoprusta/dj-soma-backend-pusher)


# How I built it

Actually it was one of my half done side project. I tried to use flask-socketio but it's a bit unreliable and hard to use. I read about the pusher contest here and I realized it's perfect for my app :)

I learned a lot during the development process i.e.: youtube API, how to use pusher, improved my angular knowledge, etc.

I'd like to develop further the application, refactor the code, add tests, maybe add new features.

Stack that I used:

Backend:
- [Pusher ❤️](https://pusher.com)
- [Python 3](https://www.python.org)
- [Flask](http://flask.pocoo.org)
- [MPV player/libmpv](https://mpv.io)
- [youtube-dl](https://github.com/rg3/youtube-dl)
- [python-mpv](https://github.com/jaseg/python-mpv)

Frontend:
- [Pusher ❤️](https://pusher.com)
- [Angular 5](https://angular.io)
- [Bootstrap 3](http://getbootstrap.com/docs/3.3/)
- [Youtube API](https://developers.google.com/youtube/v3/)

## How I used pusher

There is one channel for each client (the channel name is the internal ip address of the client) and one broadcast channel.

The client channels are used for the remaining time notifications, the broadcast/admin channel for everything else.

Broadcast channel messages:
- song added: When somebody adds a new song, Pusher sends the data of the new song for every client.
- song deleted: similar to song added 
- time position changed (current time position of the song): This message is sent 10 times for every song
- volume changed: When somebody uses the volume slider the other clients receive the message from pusher about the new value of the volume slider
- autoplay changed: If somebody checks/unchecks the autoplay checkbox, Pusher sends message for the clients with the new value (true/false)