sansyrox / kasper_music_player

An All In One app that would allow "music.youtube.com" to work in restricted countries. This app aims to bypass all the premium models and create FFA experience

NOTE: You will have to use chrome without security in this case

Kasper Music Player

---

Why Kasper?
As It is the name of my dog and it rhymes with the iconic app Napster.

It is a music streaming app which allows free music streaming for all and bypasses the youtube music algorithm to work even in restricted countries.

Contents

• Contents
• About the Kasper Music Player
• History
• RoadMap
• Installation
  • For Flask Server
  • For React Frontend
• Tech Stack (Expected)

History

(Back to contents👆🏻)

This project started as a custom media server created using flask and vlc to allow youtube streaming via terminal in search of creating a server. Even worked on less powerful devices like RaspberryPi.

RoadMap

(Back to contents👆🏻)

UI Refactor(Including Audio Player) -> Add Travis -> Connect a DataBase(FireBase, until a better option available) -> Add API for PlayLists -> Likes -> Support For Different Platforms

Installation

(Back to contents👆🏻)

To start the Flask Server

• It is advised to use a pipenv as the already installed versions of vlc might interfere with the ones in the dependencies

• Use the command pip3 install pipenv

• Now go into server directory using the command cd server/

• Next, install the dependenices by using the command pipenv install

• Before running the server, get your YouTube API key by following this guide - https://developers.google.com/youtube/v3/getting-started

• To run the server, use the command pipenv run python3 server.py

To start the React Frontend

• Open terminal to get started.

• To clone the repo, type git clone https://github.com/sansyrox/kasper_music_player.git in your terminal.

• Then go to the frontend directory using cd kasper_music_player/youtube_mp3_frontend.

• Install the dependencies using npm install --save

• Install tachyons using npm install tachyons

• Install react-coverflow using npm install react-coverflow

• To start the react app, Use npm start.

• Now the app would have started on your default browser!!

Tech Stack (Expected)

(Back to contents👆🏻)

• Backend - Flask (Python)
• Frontend - React
• Firebase for Auth and DB.
• Netlify

Made with ❤ by Sanskar Jethi

kasper_music_player's Issues

Create the frontend environment from scratch

Create a react environment without using prebuilt templates like "create-react-app"

Song Saving Architecture of the code

Is your feature request related to a problem? Please describe.
For a corresponding username, a general JSON format of a file is to be decided, which will be passed through a hashing function and then being stored in a single JSON file.
The data would include the playlists, songs, dob, age,email id(maybe) ,etc.

Describe the solution you'd like
Alter the endpoints of storing the corresponding username and data in a "single" JSON file in the server directory.

Additional context
Add any other context or screenshots about the feature request here.

Replace the youtube API with web scrapping

Is your feature request related to a problem? Please describe.
Currently, data API is used with the App and since the calls are not completely free it would be sensible to replace the API with scrapping as it is just used to get video ids

Describe the solution you'd like
Use some library like beautiful soup to scrape the vid's from youtube

Additional context
One of the highest priority issues.

Suggest a framework to convert it into a Desktop App

Fix issues in README

There might be some issues in the README file, find and fix them by creating a PR

Add CI/CD via to heroku

Is your feature request related to a problem? Please describe.
Use the firebase API keys from the env variables/ a .json file in the gitignore file

Additional context
I will be working on this issue

Add Logo in the top of ReadMe

Describe the bug
Logo photo not present in ReadME file

Expected behavior
To add the logo photo in the readme file

Additional context
Add any other context about the problem here.

OSError: [Errno 0] Error

Describe the bug
Whenever a query is searched in the search bar it results in two cases either it executes properly and the searched result is displayed on the screen or sometimes it gives an error at the back-end.

To Reproduce
Steps to reproduce the behavior:

1. Run both back-end and front-end server.
2. Login and search a query in the search bar.
3. See error in the terminal where back-end server is running.

Screenshots
You can see the error here : https://pastebin.com/ATvDzxDp

Desktop (please complete the following information):

• Ubuntu 18.04

Create a better Audio playing bar

Is your feature request related to a problem? Please describe.
Currently an Ugly default html5 audio component is being used

Describe the solution you'd like
A custom bar that matches with the UI

Describe alternatives you've considered
Create our own custom audio Player component instead of a prebuilt one on npmjs

Additional context
Add any other context or screenshots about the feature request here.

Deploy this app

Is your feature request related to a problem? Please describe.
I have enough GCP credits. Need to deploy this app.

Write Tests for the backend

Is your feature request related to a problem? Please describe.
Currently, no tests are present for the server.py file.

Describe the solution you'd like
Create a test folder and start writing tests for the server

Additional context
PyTest library should be used for these

Create a web front end via React

Dependent on #3

Create a global state management solution for the app

Describe the bug
Currently, as the app size is increasing, state communication is becoming tedious.
Create a global store using react recoil. Makes life much simpler, even so than redux and context.

To add a shuffle feature using Fisher Yatches Algo

Is your feature request related to a problem? Please describe.
Get a list of songs and shuffle it in a linear complexity or smaller.

Describe the solution you'd like
Use Fisher Yates Algo

Describe alternatives you've considered
Using the random.shuffle isn't very effective as it uses n^2 complexity(probably)

Additional context
I'd be working on this

Add endpoint to generate playlist

Is your feature request related to a problem? Please describe.

• Every song the user sees should have an "add to playlist" button, which keeps adding songs to their playlist.

Describe the solution you'd like

• Pressing the "add to playlist" button should lead to the @add_to_playlist endpoint
• @add_to_playlist endpoint will take the selected song's title, video_id as input from the front end and add it to a new list called "playlist"
• It should send the response "song added to playlist"

Describe alternatives you've considered

Additional context
There should be another endpoint @view_playlist which will send the list called "playlist" in JSON to the front end. "View playlist" button should lead to this endpoint.

To extract thumbnail using scrapping script

Is your feature request related to a problem? Please describe.
Currently, no cover art is present.

Describe the solution you'd like
To extract thumbnails from youtube using the scraping script.

Describe alternatives you've considered
An option is to use data API.

Additional context
Add any other context or screenshots about the feature request here.

Port the props to recoiljs

Is your feature request related to a problem? Please describe.
The props are being drilled deep down in the app.

Describe the solution you'd like
To port the props to a recoiljs solution

To add a filter in the scrapping script

Describe the bug
Currently, the scrapping script scrapes all the youtube content. But we only need the music files like in the data api.

Expected behavior
To add a filter that filter outs all the content that is not music. (need to analyse the metadata in the response)

Additional context
Add any other context about the problem here.

Suggest a Cool Name

Port flask server to a Quart or Express

Describe the bug
Flask is blocking
https://stackoverflow.com/questions/47841985/make-a-python-asyncio-call-from-a-flask-route

To Reproduce
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

Suggest a UI Design

A color scheme similar to this app design is considered.

Create a requirements file

Add way to integrate Soundcloud , Spotify and Gaana API's

ReadMe Update

Describe the bug
The readme is outdated. Please update the readme with some new content.

UI color scheme refactor

Is your feature request related to a problem? Please describe.
Change the color scheme of the new UI in accordance with the new logo

Describe the solution you'd like
The background of black, with accent colors of red and violent(check color code from the psd file) with the buttons of a gradient texture

Additional context
This issue can be split into parts and the points shall be adjusted accordingly

Remove package-lock.json file from front-end

Describe the bug
Remove package-lock.json file from front-end and add it in the gitignore file

To Add a client side music player

Is your feature request related to a problem? Please describe.
Currently, the song is played in the local server's vlc play method.

Describe the solution you'd like
As the server is supposed to be deployed on some network, it is a wise choice to play the music on the client side.
Hence add a client-side music player for the App.

Additional context
Add any other context or screenshots about the feature request here.

Filter out song name and artist name from recommend song list #51

Describe the bug
The album art for recommended songs cannot be retrieved right now because the titles of the results contain words like “official music video”, “live 2013”, “lyrics”, “high quality HD”, etc, we need to separate out the title of the song and artist name to able to get the album art, otherwise the album art api will show no result.

Expected behavior
The results should only contain the song titles and artists name.

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

To increase the responsiveness of the front-end of the app

Describe the bug
Currently, the app has a very basic UI with a fixed sidebar.

Expected behavior
To add mobile responsiveness like Spotify webapp

Screenshots
If applicable, add screenshots to help explain your problem.

Additional context
Add any other context about the problem here.

To add login and signup functionality

Is your feature request related to a problem? Please describe.
Currently, the basic implementation of the app uses admin-admin as the credentials for the app.

Describe the solution you'd like
To use firebase apis or flask oauth as the login features

Additional context
I'd be working on this app

Create a docker script to split the server project in individual services and use a docker script for it (maybe)