about
Youtube's playlist interface is silly
It may work fine in some cases, but I find it struggling when playlists have more and more items. I personally have one or two with hundreds of videos (respectively food and bass covers), and you cannot have them all displayed in one go, everything is paginated with 50 max items per lot, with the next batch of videos fetched once you reach the bottom of the page. So, searching a specific title is out of the question. Don't get me started on the time it takes to scroll through it.
Why not load all videos in a playlist at once ?
The funny thing is that it is actually provided as an example in youtube API's docs. When you call it to get playlist items, one of the (optional) parameters is pageToken
. It lets the API load the "page" of data you want to load. And, in the response, if there are still more items to be fetched, you will find a nextPageToken
. So you just have to repeatedly query the API until nextPageToken
is no longer present, and there you have it ! The entire playlist content.
I'd rather wait a few seconds (it takes ~8 seconds for about a thousand videos) upfront and then browse freely than repeatedly have stop and wait 😊
Behold, my liege, thy mighty charriot
Hannon is really simple: you log in with your youtube account, it fetches your playlists, and if you click one of them it fetches the videos within.
It's a React app made with Vite, and makes use of really cool tricks:
- TanStack Query - JS library for data caching (so we don't have to reload a huge playlist everytime)
- everything is rendered - but not all is shown (hiding elements with css
visibility
is cheaper than adding/removing them from the DOM)