Skip to content

Instantly share code, notes, and snippets.

@novafurry
Last active April 27, 2024 02:57
Show Gist options
  • Save novafurry/f8661356979187d38bf48c92ae4492b4 to your computer and use it in GitHub Desktop.
Save novafurry/f8661356979187d38bf48c92ae4492b4 to your computer and use it in GitHub Desktop.
SpotiMS - Bring Back Media Session Controls To Spotify Web When Listening On Connect

SpotiMS
Bring Back That Damn Media Controller!

What changes with this?

You won't notice any change when playing locally or to a chromecast, but when playing to a spotify connect device, the media controls which are not usually there, re-appear.

Without With
image image

So, wait what are we talking about?

These.
image
Currently, the cast to a device dropdown does not work.

// ==UserScript==
// @name Spotify MediaSession API Fixer
// @version 2
// @description Re-Adds the browser media session controller when the user is listening on connect
// @author Nova (nova.is-a.dev)
// @match https://open.spotify.com/*
// @match https://novathefox.github.io/userscript-deps/spotims.options.html
// @match https://developer.spotify.com/tutorial?gapi
// @icon https://gist.github.com/assets/47910472/97bc3b06-f8c8-40cb-8aa8-b321d3b25cd7
// @updateURL https://gist.github.com/novathefox/f8661356979187d38bf48c92ae4492b4/raw/0b258ba3660ab3ba007b60873fd421faa83f2435/spotims.user.js
// @downloadURL https://gist.github.com/novathefox/f8661356979187d38bf48c92ae4492b4/raw/0b258ba3660ab3ba007b60873fd421faa83f2435/spotims.user.js
// @grant GM_setValue
// @grant GM_getValue
// @grant GM.getValue
// @grant GM_setClipboard
// @grant unsafeWindow
// @grant window.close
// @grant window.focus
// @grant window.onurlchange
// @grant GM_notification
// @grant GM_xmlhttpRequest
// @grant GM_registerMenuCommand
// @grant unsafeWindow
// @sandbox MAIN_WORLD
// ==/UserScript==
GM_registerMenuCommand("Grab API KEY", () => {
alert("Please ensure that you are logged in")
const windowFeatures = "left=100,top=100,width=442,height=103";
const handle = window.open(
"https://developer.spotify.com/tutorial?gapi",
"set",
windowFeatures,
);
console.log(handle)
});
if(window.location.href == "https://developer.spotify.com/tutorial?gapi"){
setTimeout(function () {
GM_setValue("apikey",document.querySelector("span[style='color:#2CCDA9']").innerText.trim().replaceAll("'", ""));
alert("Grabbed KEY. This window is closing");
unsafeWindow.close()
},2000)
}
if(GM_getValue("apikey",0) == 0){
alert("Grabbing API KEY")
const windowFeatures = "left=100,top=100,width=442,height=103";
const handle = window.open(
"https://developer.spotify.com/tutorial?gapi",
"set",
windowFeatures,
);
}
var fakeAudio = document.createElement('audio')
fakeAudio.src = "https://novathefox.github.io/userscript-deps/5-seconds-of-silence.mp3"
fakeAudio.style.display = "none"
fakeAudio.loop = true
fakeAudio.disableRemotePlayback = true
async function tchange() {
if(document.body.contains(document.querySelector('[aria-label="Pause"]'))){fakeAudio.play()}else{fakeAudio.pause()}
var track = await fetch("https://api.spotify.com/v1/tracks/" + document.querySelector('[data-testid="context-item-link"]').href.replace("https://open.spotify.com/track/", ""), {
"headers": {
"authorization": "Bearer " + GM_getValue("apikey"),
},
"body": null,
"method": "GET",
"mode": "cors",
});
var resp = await track.json()
if ("mediaSession" in navigator && document.querySelector('.encore-bright-accent-set [data-encore-id="textLink"]') != null) {
document.body.appendChild(fakeAudio)
navigator.mediaSession.metadata = new MediaMetadata({
title: document.querySelector('[data-testid="context-item-info-title"]').textContent,
artist: document.querySelector('[data-testid="context-item-info-subtitles"]').textContent,
album: "Provided by SpotiMS Userscript",
artwork: [
{
src: resp.album.images[0].url,
sizes: String(resp.album.images[0].width) + "x" + String(resp.album.images[0].height),
type: "image/png",
}
],
});
navigator.mediaSession.setActionHandler("play", () => {
document.querySelector('[data-testid="control-button-playpause"]').click()
});
navigator.mediaSession.setActionHandler("pause", () => {
document.querySelector('[data-testid="control-button-playpause"]').click()
});
navigator.mediaSession.setActionHandler("stop", () => {
document.querySelector('[data-testid="control-button-playpause"][aria-label="Pause"]').click()
});
navigator.mediaSession.setActionHandler("previoustrack", () => {
document.querySelector('[aria-label="Previous"]').click()
});
navigator.mediaSession.setActionHandler("nexttrack", () => {
document.querySelector('[aria-label="Next"]').click()
/* Code excerpted. */
});
}
}
if(window.location.host == "open.spotify.com"){
const observer = new MutationObserver((mutations) => {
tchange()
});
observer.observe(document.querySelector("title"), {
subtree: true,
characterData: true,
childList: true,
})
}
console.log("SpotiMS Fix")
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment