Spicetify - Remove Smart Shuffle, Remove DJ

README.md

I'm not the only person who is increasingly frustrated with Spotify and their determination to ignore the community while they COMPLETELY FUCK UP THE USER EXPERIENCE of their apps.

Some time ago, they added 'Smart Shuffle'. The community has clearly voiced their dislike of this feature, and yet still it remains in the app. Smart shuffle wouldn't be so bad if it wasn't combined with the regular shuffle button.

They also recently introduced the 'DJ' playlist which has no reliable way to be removed and is adding extra clutter we didn't ask for.

This is the third revision which removes the default shuffle button and replaces it with one which is visually identical but which only toggles shuffle functionality without smart shuffle.

1. Install Spicetify
2. If you want to remove smart shuffle: Place the contents of the remove-smart-shuffle.js file below in a file in your Spicetify extensions folder. For example, on Windows, place this file at %APPDATA%/spicetify/Extensions/remove-smart-shuffle.js. Run spicetify config extensions remove-smart-shuffle.js followed by spicetify apply from a terminal
3. If you want to remove DJ: Place the contents of the remove-dj.js file below in a file in your Spicetify extensions folder. For example, on Windows, place this file at %APPDATA%/spicetify/Extensions/remove-dj.js. Run spicetify config extensions dj.js followed by spicetify apply from a terminal

To Spotify: Notice a theme, Spotify? We don't want you cluttering our music up with things we didn't ask for. Focus on delivering music, and let users deal with how they want to consume it. Get your shit together, because we're tired of it.

remove-dj.js

// The async modifier allows for the user of await, which converts a promise into an object, when not using await, async is not necessary.
(async function extension() {
  // The following code segment waits for platform to load before running the code, this is important to avoid errors. When using things such as Player or URI, it is necessary to add those as well.
  const { Platform } = Spicetify;
  if (!Platform) {
    setTimeout(extension, 300);
    return;
  }

  const findElement = () => {
    return Array.from(document.querySelectorAll("#spicetify-playlist-list > div > div:nth-child(2)")?.[0]?.childNodes).find(x => x.innerText === "DJ\n\n•\n\nClick to start listening")
  }

  const removalInterval = setInterval(() => {
    const element = findElement();
    if (element) {
      try {
        element.remove();
        clearInterval(removalInterval)
      } catch {}
    }
  }, 1000)
})();

remove-smart-shuffle.js

// The async modifier allows for the user of await, which converts a promise into an object, when not using await, async is not necessary.
(async function extension() {
  // The following code segment waits for platform to load before running the code, this is important to avoid errors. When using things such as Player or URI, it is necessary to add those as well.
  const { Platform } = Spicetify;
  if (!Platform) {
    setTimeout(extension, 300);
    return;
  }

  const defaultShuffleButton = document.querySelectorAll("#main > div > div.Root__top-container > div.Root__now-playing-bar > footer > div > div.main-nowPlayingBar-center > div > div.player-controls__buttons.player-controls__buttons--new-icons > div.player-controls__left > div > div > button")[0];//.remove()
  const defaultShuffleButtonHolder = document.querySelectorAll("#main > div > div.Root__top-container > div.Root__now-playing-bar > footer > div > div.main-nowPlayingBar-center > div > div.player-controls__buttons.player-controls__buttons--new-icons > div.player-controls__left > div > div")[0]

  defaultShuffleButton.remove();
  const shuffleButtonReplacement = new Spicetify.Playbar.Button(
    "Shuffle",
    "shuffle",
    async (self) => {
      Spicetify.Player.toggleShuffle();
      const shuffleIsActive = Spicetify.Player.getShuffle();
      console.log({ shuffleIsActive })
      const shuffleSvg = document.querySelectorAll("#main > div > div.Root__top-container > div.Root__now-playing-bar > footer > div > div.main-nowPlayingBar-center > div > div.player-controls__buttons.player-controls__buttons--new-icons > div.player-controls__left > div > div > button > span > svg")[0]
      if (!shuffleIsActive) {
        shuffleSvg.setAttribute('color', 'var(--spice-button-active)');
      } else {
        shuffleSvg.setAttribute('color', 'currentcolor');
      }
    },
    false, // whether the button is disabled
    false, // Whether the button is active
    true, // whether the button should be registered when created
  )

  await new Promise(resolve => setTimeout(resolve, 1000))
  defaultShuffleButtonHolder.appendChild(shuffleButtonReplacement.element);

})();