New
We're now open source! Check Code

Ytmdl Web v2 is finally here. Here's what has changed!

Deepjyoti Barman @deepjyoti30
Feb 25, 2021 • 4:35 PM UTC
Post cover

So it's been in works since a while now. Yep. Ytmdl Web's V2. This time it is even better! Since the first version was released, it did get a lot of traffic but it was far from perfect so I felt like I owed it to the users to give them a new, better, aweseome version that would work flawlessly.

So here it is. Ytmdl Web V2.

Features

So this version does come with a lot of changes and a lot of new features. Most importantly, this version is built from the ground up and it is not just a few changes on top of the older version, you can totally expect something way better. Go check it out.

Some of the new features are:

  • Way Faster (It's a proper PWA now so that means improved performance)
  • Better Downloads
  • User Settings
  • Manual Metadata
  • URL Support
  • Open Source (yep, not a feature, but it is!!)

Way Faster

The previous version was just a badly built webapp that wasn't optimized in many ways and it took ages to load. I have to admit, I was just a newbie getting started with Vue when I built that app and I am not going to call it one of the better apps I built. I agree, the functionality was good, it worked all right, but it was not perfect. You can see that for yourself in the following Lighthouse score of the older version.

YtmdlWeb V1 Lighthouse Score Ytmdl Web v1 lighthouse score

I know, Lighthouse score doesn't mean everything but it does indicate some of the important things that were skipped in the first iteration of the app.

To fix those things, I finally built the second iteration from scratch. Keeping in mind everything. Most important change on this version is I have added workbox. This means the app will be a proper Progressive Web App now and will load way faster since a lot of files will be cached once the first load is done.

Also the code is improved a lot which compressed the overall app size to 145KiB Gzipped. This is important since devices with slow important might not be able to download large content at once.

Anyway, check the lighthouse score of the newer version below. It is almost perfect.

Ytmdlweb V2 Lighthouse Score Ytmdl Web v2 lighthouse score

Better Downloads

Not just the app, the backend is also redone this time. I will probably write a separate post about that later.

TL;DR: The backend is now rewritten using FastAPI and works way better.

This time, the backend is written in FastAPI and yeah, it is better in a lot of ways. However, one of the most important changes in this version of the API is that downloading the song is now done after the user has selected both the song and metadata.

In the previous version, following was the flow:

Select Song -> Downloaded song -> Selecte metadata -> Add metadata -> Let user download

In this version, the flow is refactored to the following:

Select Song -> Select metadata -> Download song and Add metadata -> Let user download

This might not seem like a lot of improvement, but it is. In the previous version, we had to know which file the API was working since the first request which added a lot of overhead. That restriction is now gone with this release.

User Settings

On this version, user settings are introduced. There are settings like default song format. So if you select one format and keep it default, you wouldn't be asked to select it everytime. When I was building the app, I wanted to make sure that the user has the best experience possible and so User Settings were an important part of it.

You can check user settings by going to the /settings route in the webapp.

Manual Metadata

Yes. The CLI version has it so I thought the web version totally needed that feature, so here it is. Based on the various user reports in the CLI app, it seemed like this would be a necessary feature because no matter how many meta sources we add, there's always that one song from an Indie singer that doesn't exist in any servers. In cases like that people can now opt for manually inserting the metadata and downloading the song.

URL Support

Since the CLI version supported it, the web version needed to add support for Youtube URL's, so here it is. Instead of entering a song name, you can just enter a valid YouTube URL and Ytmdl will automatically take you to the next page of selecting metadata. It's not much but it might come very handy at times.

Other Changes

Addition of Opus

Not just the above, there are a lot of under the hood, quality of life patches. One of those is addition of Opus as a song format. The previous version just supported m4a and mp3 so this version adds one to the list.

Open Source

If you're a part of the Telegram Channel, you'd know that a lot of users keep asking if the Web version is open source so I gave it some thought and finally decided to make this version open source. Not just that, this version comes with container images that can be deployed right away so that you have the freedom of using a self hosted version. You can find the source here.

I am really excited to finally be able to release this version, especially considering the response that I got with the first version of the app. Also, if you feel like there are some settings that might be a nice addition to the current app, feel free to raise an issue on GitHub.

Discussion

ytmdl
webapp
vue
python
node
js
release
© 2021-Present Deepjyoti Barman