utkarsh-raj / umusic

Your favorite video downloads. Simplified.

UMusic

Your favourite video downloads. Simplified.

🚀 Quick Start Steps for building UMusic locally

• Download the project on your local system

git clone https://github.com/utkarsh-raj/umusic.git

• Enter the root directory of umusic

cd umusic

• Install all the dependencies

npm install

• If you are using windows make sure you run this too

npm install -g nodemon

• Create a Youtube Data API v3 Key
• Store that key in .env file
• Run the app.js file

node app.js

umusic's Issues

Download Progress Bar

Currently, the download process is an async task with no user feedback. It will be great to have a progress bar for giving the progress report to the user. And it looks more dynamic for the user.

Build instructions for Windows

The project was built and tested on Linux environments. We need to build on Windows and note the process for people who prefer Windows.

Home page changes size when hovering over the footer link

The last commit (#14 ) made a few changes in the UI, maybe by mistake. Can @jai-dewani have a look please?

New UI for the app

Design a new User Interface for app

Adding a search bar on the results page

Adding this feature will help users to search again without going back to the root page.
Maybe the same search bar can be just implemented/copied on the top of the results page

Breaking changes when EJS version is increased to 2.7.2 or above

<% include ./partials/footer %> isn't supported anymore
Insted <%- include ('./partials/footer') %> is used

You can refer to this issue for more information

PS: Your current EJS version is 2.6.1

Problem while setting up the project

Even after setting up env file, there seems to be some error with browsing the response object probably due to changes in API response structure

PS: I am using Youtube Data API v3

TypeError: E:\Github\umusic\views\index.ejs:6
    4|         <% var i = 0;%>

    5|         <% for (i = 0; i < 4; i++) { %>

 >> 6|             <% if (data.items[i].id.kind === "youtube#video") { %>

    7|                 <div class="row dataField">

    8|                     <div class="col-md-5 img-thumbnail img-responsive">

    9|                         <img src="<%= data.items[i].snippet.thumbnails.medium.url %>">


Cannot read property '0' of undefined
    at eval (eval at compile (E:\Github\umusic\node_modules\ejs\lib\ejs.js:618:12), <anonymous>:26:22)
    at returnedFn (E:\Github\umusic\node_modules\ejs\lib\ejs.js:653:17)
    at tryHandleCache (E:\Github\umusic\node_modules\ejs\lib\ejs.js:251:36)
    at View.exports.renderFile [as engine] (E:\Github\umusic\node_modules\ejs\lib\ejs.js:482:10)
    at View.render (E:\Github\umusic\node_modules\express\lib\view.js:135:8)
    at tryRender (E:\Github\umusic\node_modules\express\lib\application.js:640:10)
    at Function.render (E:\Github\umusic\node_modules\express\lib\application.js:592:3)
    at ServerResponse.render (E:\Github\umusic\node_modules\express\lib\response.js:1008:7)
    at Request._callback (E:\Github\umusic\app.js:49:13)
    at Request.self.callback (E:\Github\umusic\node_modules\request\request.js:185:22)

Extend the Readme File

If only we could get some creative, fun to read documentation. I would love to have help with the documentation currently under development.

Build process in Readme.md

An elaborate walkthrough of building the app locally is required. We can give the ways to get the dependencies up and running and building the app.

Download Button Link is inside the Button

The download now button has the anchor inside it. It should be encompassing the button for all of it to be click responsive.

Custom download directory

The current app downloads files in the same directory the app is in. It will be good to give the user an option to choose the location of download.

Setup travis CI for continuous code checking

Setup Travis CI in github

Download options

Allow the user to choose the resolution while downloading. The current version only has the basic resolution available.

Allow end users to download the video to their device

I saw this blog post of how to make a file serving server and it struck me that we can add some file serving routes and host the application. Whenever a person clicks on download the file will get downloaded on the server but the user will also get a link to access that file which will go through the file serving routes with the help of which he should be able to download the file to his device.

Kinda hacky but is a good place to start with

Unwanted modules in package.json

umusic/package.json

Lines 15 to 16 in a9d341c

	"express": "^4.16.4",
	"google-auth-library": "^2.0.1",

If these packages have no use in the project as of now so they can be removed from the package.json.
It might help to reduce the size of dependencies

Some errors while saving old videos

Very old videos are giving some error on the console log, which probably arise from the API.

Port the frontend to Vue.js

The current frontend is in Vanilla JS and EJS. It will be great to refactor (or rewrite totally) the frontend to move towards the goal of a serverless setup.