Skip to content

SpotOn Version 3
Compare
Choose a tag to compare
@SenpaiHunters SenpaiHunters released this 15 Feb 13:29
V_3
65eac05

What's Changed

Greetings everyone!

SpotOn V3 is out. Here is the massive changelog that will take me ages to write. By the time you read this, both the Chrome Web Store and SpotOn here will have been updated.

Changes

Optimization was the main focus: speed, optimization, and UI/UX. I'm happy to say that this has been succeeded.

Optimsation

TL:DR: Every file has had a change of some sort

Sizing

  • Initial size: 512 kB
  • Final size: 172 kB
  • Difference: 512 kB - 172 kB = 340 kB
  • Optimization percentage: (340 kB / 512 kB) * 100 ≈ 66.41%
  • Changed number: 340 kB

Speed

SpotOn load times have been improved from the previous times of 5ms/15ms at some points to a speed of 1ms. If you're lucky, you could see even less than that! This improvement is due to a significant optimization in how SpotOn loads and interacts with the page.

At its best:

  • Previous load time: 15 ms
  • New load time: 1 ms
  • Difference: 15 ms - 1 ms = 14 ms
  • Improvement percentage: (14 ms / 15 ms) * 100 = 93.33%
  • Changed number: 14 ms

Generalised:

  • Average difference: (4 ms + 14 ms) / 2 = 9 ms
  • Improvement percentage: (9 ms / 15 ms) * 100 ≈ 60%
  • Changed number: 9 ms

This is just SpotOn load times, when refreshing the page, you will now see faster rendering, and when skipping songs, there will no longer be that annoy lag.

Here is the repo size changes:
Size changes

  • Red indicates: Removal.
  • Blue indicates: Changes.

The differences, both in numbers and percentage, are as follows:

  • background.js decreased by 46kb (76.67% reduction)
  • folder CSS decreased by 59kb (86.76% reduction)
  • folder Icons decreased by 1kb (33.33% reduction)
  • manifest.json decreased by 1kb (33.33% reduction)
  • folder Options decreased by 53kb (45.69% reduction)
  • settings.html increased by 1kb (4.55% increase)
    • The increase in settings.js is due to options.html being included in it as well

The total removal is 160kb.

The total removal in kilobytes (kb) is as follows:

  • color.html: 3kb
  • colorHistory.html: 3kb
  • colorOptions.html: 6kb
  • download.html: 21kb
  • options.html: 5kb
  • folder Themes: 73kb

The total removal is 111kb.

File changes - Removal / Additions

Additions

  • Did you know, you can press a header to collapse it?
  • Completely redesigned the main popup page, along with associated JS and CSS, and improved functionality.

Additions / New Features

Theme Locking

A pretty heavily requested feature, allow the SpotOn theme to be locked, this is now fully in effect, and the first thing you'll see when loading into SpotOn, if the theme ever freezes unlock theme will force a state change, if that again does not work, a simple reload will fix it all!

SpotOn main page

Mini song player

SpotOn main page

I have drafted several options, including a standalone player menu (which I may add to a future stats website!). However, I decided to go with a small one that updates every time you open SpotOn. Additionally, I added a "Copy Track Info" feature, allowing me to easily copy the song name to the clipboard. I also included a "Search on Genius" option for when Spotify does not have the lyrics, as well as a "Download Album Art" feature. This feature has replaced the original button on the NPB and is now optimized. It downloads all album arts regardless of the situation and does not require a reload to function.

Wanna see that draft?

SpotOn Player

all JS

It's built in JS pretty nice, anyway, back to SpotOn!!

Custom CSS

The Spotify popup has undergone a complete overhaul and now exists as a single page that encompasses everything. The following features have been added:

  • You can now utilize custom CSS to create your own SpotOn themes or import themes from the official SpotOn Themes repository: SpotOnThemes.
  • By default, all of SpotOn's original themes are imported into the editor.
  • To fetch any new changes to the theme repository, simply press the "Check for New Themes" button.

Images

Arc - February 02, 2024 - 10:13 PM Arc - February 02, 2024 - 10:13 PM Arc - February 02, 2024 - 10:14 PM

As evident from the array of buttons, you have numerous options at your disposal. Additionally, the Themes repository provides CSS examples and walkthroughs that can serve as a foundation for your own CSS.

Translator

translation

I was really debating whether to include this drafted feature or not. However, I decided I would, so here we are! After hours of improving and optimising, it's now live. You can change the color of the lyrics too, if you please. We also have an auto translator feature.

translator opts

Settings

Now, we have a small little settings section, by pressing the cog on the left of the header, you can find the following

Settings
  • In Import/Export you can import or export any of your SpotOn settings, this will include all CSS themes, and non coded themes, like we had before, now under "Visual Editor"
Import/export

In addition to the importing and exporting of settings, we have a new theme picker for how SpotOn will look. In this example, I'm using the Dark theme. We also have Dark, Gray, and Light themes, as well as Auto. Auto will be the default, so hopefully, if you're on a dark theme, you won't see a flashbang when loading into SpotOn. It will fetch your device theme and dynamically change the theme based on your device's mode. Then you have your manual modes.

If you have any suggestions on what else to include, shoot me a message!

Development

Settings

Added a small development section where you can see some stats. It's pretty barebones for now, but it's where I'll put some hidden options or toggles in later!

Keybinds

keybinds

When Nav toggle is enabled, added the option to use keybinds for toggling the sidebar and npb

URL: chrome://extensions/shortcuts

Notable mention: When you right-click, you have a few options under SpotOn, such as going to the current Spotify tab, opening a playlist, or closing the current tab. When you highlight some text, you can then use that text to search for the song on Spotify as well!

Removal

  • Removed all of the color tools. This was not used when I asked my 40 BETA testers. It was removed for speed and weight.
  • Removed all previous mentions of theming and opted for custom CSS.
  • Full options changes:
    • Red indicates removal.
    • Blue indicates changes.
    • Green indicates additions.

file opt


file opt

  • Totalized size already calculated above.

Bug Fixes

  • Fixed a long-standing bug where media keys were not reassigned.
  • Fixed a bug where you could not skip a song.
  • Fixed a bug where keybinds would not be registered.
  • Fixed a bug where hotkeys would sometimes double skip.
  • Fixed a bug where reloading the extension would reset the options to defaults.
  • Fixed a multitude of bugs inside the options folder.
  • Fixed the nav hider not working.
  • Fixed non-highlighting failing to add.
  • Fixed an issue where the font would not be added to the npb.
  • Fixed an issue where album art would not be rounded.
  • Fixed a bug where you'd be asked for SpotOn to access a site, even when it wasn't scoped.
  • Fixed a small error when searching; the text would still be highlighted.
  • Fixed an annoying issue when reloading SpotOn would randomly reset all toggles.
  • Resolved an issue with extra padding when toggling the sidebar.
  • Fixed an annoying problem where options would randomly appear on an unaccepted page (this was in response to bug 11).
  • Rewrote the code for saving options and using toggles.
  • Fixed a small CSS issue on some pages when loading.
  • Fixed a JS error causing a memory leak when SpotOn was enabled for a long period of time and checking for updates (this had to do with Spotify's vendor~web-player.da5d0645).
  • Removed nav bar styling and opted for only changing lyric colors, font, and bar colorings.
  • Fixed a multitude of padding issues.
  • Removed some defaults when first installing, notably rainbow controls; this would slow down lower-performing machines by an excess of 8.4%.
  • Fixed an issue where SpotOn would pause when you went to a new Spotify tab.
  • Fixed an issue where you could not see any connections in the music player.
  • Fixed a lot of CSS issues... I mean a lot...
  • Then fixed more issues, but this was midway through development, so I won't note them!

Ending notes

SpotOn V3 has taken me a while—from new features to bug fixes. Unfortunately, I am now sick. I wish I had posted this 15 days ago, but time is running out. I do have more plans and will continue maintaining SpotOn. However, I am currently out of ideas. I have already rewritten it six times, from V2 to V3, and I can't optimize it any further.

This project has made me nothing still, but if you find use in it, that's good enough. I'm always happy to hear your feedback!

If you'd like to make some themes for SpotOn, share them in the new repository under a pull request!

I have spent over 3 months working on this; hopefully, there won't be any bugs!

If you'd like to support the development of SpotOn, you can find some links here:

I will now go to bed and wake up, editing this if there are any new features or if I missed something. This took an hour to write.

Contributors

SenpaiHunters
Assets 2
Loading
0 Join discussion