☰

youtube-playlist-randomizer improvements

Improve your youtube-playlist-randomizer experience with these cosmetic changes.

ئاپتورى
r5ne
بۈگۈن قاچىلانغىنى
0
جەمئىي قاچىلانغىنى
1
باھا نومۇرى
0 0 0
نەشرى
1.1
قۇرۇلغان ۋاقتى
2025-05-24
يېڭىلانغان ۋاقتى
2025-05-28
Size
7.3 KB
ئىجازەتنامىسى
GPL-3.0-only
قوللايدىغىنى

youtube-playlist-randomizer improvements

Updates

v0.6 Beta

  • Added ability to change the site's background image to a specific URL of choice.

v0.7 Beta

  • Centering applied to the whole website.

v1.0 Main release

  • Added low opacity boxes around all the text to make it easier to see on some backgrounds and for a cleaner look.
  • Added option for multiple different background themes.
  • Added link to the image being used in a semi-transparent credits box at the bottom right hand side.
  • If the image has a too low luminosity, the font and link colors change to white with some shadow.
  • Added compatibility for use on the mirror website.
  • Optimized the code using async and removing redundancy.

v1.1 More Credits

  • Added info on the location of the image being displayed (when applicable).
  • Added info on which query was used to find the image.
  • Made links white and non-underlined (until hovered) so it looks better.

Overview

Currently 2 improvements for the https://youtube-playlist-randomizer.bitbucket.io site.
First image is the website before any changes, last 2 images show the latest release (pictures in between are other versions).
The improvements include:

  • A better background system using unsplash to generate random backgrounds with a specific theme each time the site is reloaded
  • Centering applied to the whole website.
  • If the image has a too low luminosity, the font and link colors change to white with some shadow.
  • Added low opacity boxes around all the text to make it easier to see on some backgrounds and for a cleaner look

How to use:

If you want to use the unsplash themed images you must have an Unsplash Access Key, which you should paste into the script where instructed. Instructions on how to obtain this can be found in the unsplash developer docs.
TLDR, create an unsplash account, create an unsplash app, copy the access key.
If the image is blurry/doesn't cover the entirety of your screen or is cut off, modify the finalUrl, where w is width and h is height of the image (this should probably match your monitor size).

CREDITS:

Originally I was just modifying Warsoldier's webpage background changer, however now 100% of the code was changed.
However I take like 5% credit, since this was mostly just asking the AI to do this, with some bugfixing. It wasn't trivial, but I also don't actually know JS at all and know only basic HTML.