|
class SpotifyMediaControls { |
|
async setrepeat(args) { |
|
let {this2,repeatState} = args |
|
if(!(window.spotifyproduct === "premium")) { |
|
new Notice("❌ Non premium users can't change playback state", 5000) |
|
} else { |
|
repeatState.toggleRepeatState() |
|
await spotifysdk.player.setRepeatMode(repeatState.getRepeatState()) |
|
} |
|
} |
|
|
|
async toggleplayback(args) { |
|
let {this2,playbutton} = args |
|
if(!(window.spotifyproduct === "premium")) { |
|
new Notice("❌ Non premium users can't change playback state", 5000) |
|
} else { |
|
let data = await spotifysdk.player.getPlaybackState() |
|
if(data.is_playing) { |
|
await spotifysdk.player.pausePlayback() |
|
} else { |
|
await spotifysdk.player.startResumePlayback() |
|
} |
|
} |
|
} |
|
|
|
async nextplayback(args) { |
|
if(!(window.spotifyproduct === "premium")) { |
|
new Notice("❌ Non premium users can't change playback state", 5000) |
|
} else { |
|
await spotifysdk.player.skipToNext() |
|
} |
|
} |
|
|
|
async previousplayback(args) { |
|
if(!(window.spotifyproduct === "premium")) { |
|
new Notice("❌ Non premium users can't change playback state", 5000) |
|
} else { |
|
await spotifysdk.player.skipToPrevious() |
|
} |
|
} |
|
|
|
async switchdevice(args) { |
|
if(!(window.spotifyproduct === "premium")) { |
|
new Notice("❌ Non premium users can't change playback state", 5000) |
|
} else { |
|
const devices = await spotifysdk.player.getAvailableDevices() |
|
let dlist = {} |
|
for(let device_c of devices.devices){ |
|
dlist[device_c["name"]] = device_c["id"] |
|
} |
|
const system = await app.plugins.getPlugin('templater-obsidian').templater.functions_generator.internal_functions.modules_array.find(x => x.name === "system").static_object |
|
const selection = await system.suggester(Object.keys(dlist), Object.keys(dlist)) |
|
await spotifysdk.player.transferPlayback([dlist[selection]]) |
|
} |
|
|
|
} |
|
|
|
async display(args){ |
|
let accountdata = await spotifysdk.currentUser.profile() |
|
window.spotifyproduct = accountdata.product |
|
|
|
window.currentr = 0 |
|
window.spotifycontrolwidgetplaypointcurrentlychanging = false |
|
window.spotifycurrentplayingsilderfocused = false |
|
let {this2,dv} = args |
|
let {SpotifyRepeatState, SpotifyMediaUpdate, SpotifyMediaControls} = customJS |
|
let RepeatStateLib = SpotifyRepeatState.load(); |
|
let repeatState = new RepeatStateLib; |
|
await SpotifyMediaUpdate.run() |
|
|
|
|
|
let { createButton } = app.plugins.plugins["buttons"] |
|
|
|
let img = dv.span("<img style='max-width: 150px; max-height: 150px; margin-left: 0px; margin-right: 0px;' src=''><img>") |
|
|
|
let songname = dv.span("") |
|
|
|
dv.table(["Currently Playing",""], [[img,songname]]) |
|
|
|
|
|
img.style = 'max-width: 150px; max-height: 150px; margin-left: 0px; margin-right: 0px;' |
|
img.lastChild.style = 'max-width: 150px; max-height: 150px; margin-left: 0px; margin-right: 0px;' |
|
|
|
let image = img.lastChild.childNodes |
|
|
|
dv.span("<br>") |
|
|
|
|
|
let previousbutton = createButton({ |
|
|
|
app, |
|
|
|
el: this2.container, |
|
|
|
args: { name: "⏮ Previous", id: "button-spotify-skiptoprevious"}, |
|
|
|
clickOverride: { click: await SpotifyMediaControls.previousplayback, params: [{this2}] }, |
|
|
|
}) |
|
|
|
dv.span(" ") |
|
|
|
|
|
let playbutton = createButton({ |
|
|
|
app, |
|
|
|
el: this2.container, |
|
|
|
args: { name: "⏸ Pause", id: "button-spotify-changeplaystate"}, |
|
|
|
clickOverride: { click: await SpotifyMediaControls.toggleplayback, params: [{this2}] }, |
|
|
|
}) |
|
|
|
dv.span(" ") |
|
|
|
let nextbutton = createButton({ |
|
|
|
app, |
|
|
|
el: this2.container, |
|
|
|
args: { name: "Next ⏭", id: "button-spotify-skiptonext"}, |
|
|
|
clickOverride: { click: await SpotifyMediaControls.nextplayback, params: [{this2}] }, |
|
|
|
}) |
|
|
|
dv.span(" ") |
|
|
|
let repeatbutton = createButton({ |
|
|
|
app, |
|
|
|
el: this2.container, |
|
|
|
args: { name: "❌ Repeat Off", id: "button-spotify-repeatbutton"}, |
|
|
|
clickOverride: { click: await SpotifyMediaControls.setrepeat, params: [{this2,repeatState}] }, |
|
|
|
}) |
|
|
|
|
|
dv.span("<br>") |
|
|
|
dv.span("Volume: 0% ") |
|
|
|
|
|
let volumesilder = dv.span('<input id="spotify-range-input" type="range" min="1" max="100" value="0" width="max">') |
|
|
|
let volumetext = dv.span(" 0%") |
|
|
|
dv.span("<br>") |
|
|
|
dv.span("Playing on ") |
|
let playingon = dv.span("none") |
|
|
|
dv.span(" ") |
|
|
|
let switchdevicebutton = createButton({ |
|
|
|
app, |
|
|
|
el: this2.container, |
|
|
|
args: { name: "🖥 Change Device", id: "button-spotify-switch-device"}, |
|
|
|
clickOverride: { click: await SpotifyMediaControls.switchdevice, params: [{this2}] }, |
|
|
|
}) |
|
|
|
dv.span("<br>") |
|
const totallength = dv.span("00:00 ") |
|
|
|
|
|
let currentplayingsilder = dv.span('<input id="spotify-range-input" style="width: 48%" type="range" min="1" max="100" value="0" width="max">') |
|
|
|
let currentplayinglengthtext = dv.span(" 00:00") |
|
|
|
let spotifycurrentplayingsilder = currentplayingsilder.lastChild.lastChild |
|
|
|
let spotifyvolumesilder = volumesilder.lastChild.lastChild |
|
|
|
|
|
spotifyvolumesilder.addEventListener('input', async function(event) { |
|
window.spotifycontrolwidgetvolumecurrentlychanging = true |
|
const tempSliderValue = event.target.value; |
|
|
|
const progress = (tempSliderValue / spotifyvolumesilder.max) * 100; |
|
|
|
spotifyvolumesilder.style.background = `linear-gradient(to right, #fff ${progress}%, #4d4d4d ${progress}%)`; |
|
|
|
}); |
|
|
|
if (!(Capacitor.getPlatform() == "web")) { |
|
spotifyvolumesilder.classList.add('focused'); |
|
spotifycurrentplayingsilder.classList.add('focused'); |
|
} |
|
|
|
spotifycurrentplayingsilder.addEventListener('mouseenter', function () { |
|
// Add a class or apply styles to the thumb when the slider is focused |
|
spotifycurrentplayingsilder.classList.add('focused'); |
|
let progress = window.spotifycurrentplayingsilderprogress |
|
spotifycurrentplayingsilder.style.background = `linear-gradient(to right, #1DB954 ${progress}%, #4d4d4d ${progress}%)`; |
|
window.spotifycurrentplayingsilderfocused = true |
|
}); |
|
|
|
spotifycurrentplayingsilder.addEventListener('mouseleave', function () { |
|
// Remove the class or reset styles when the slider loses focus |
|
spotifycurrentplayingsilder.classList.remove('focused'); |
|
let progress = window.spotifycurrentplayingsilderprogress |
|
spotifycurrentplayingsilder.style.background = `linear-gradient(to right, #fff ${progress}%, #4d4d4d ${progress}%)`; |
|
window.spotifycurrentplayingsilderfocused = false |
|
}); |
|
|
|
spotifyvolumesilder.addEventListener('mouseenter', function () { |
|
// Add a class or apply styles to the thumb when the slider is focused |
|
spotifyvolumesilder.classList.add('focused'); |
|
let progress = window.spotifyvolumesilderprogress |
|
spotifyvolumesilder.style.background = `linear-gradient(to right, #1DB954 ${progress}% , #4d4d4d ${progress}% )`; |
|
window.spotifyvolumesilderfocused = true |
|
}); |
|
|
|
spotifyvolumesilder.addEventListener('mouseleave', function () { |
|
// Remove the class or reset styles when the slider loses focus |
|
spotifyvolumesilder.classList.remove('focused'); |
|
let progress = window.spotifyvolumesilderprogress |
|
spotifyvolumesilder.style.background = `linear-gradient(to right, #fff ${progress}% , #4d4d4d ${progress}% )`; |
|
window.spotifyvolumesilderfocused = false |
|
}); |
|
|
|
spotifyvolumesilder.addEventListener('change', async function(event) { |
|
if(!(window.spotifyproduct === "premium")) { |
|
new Notice("❌ Non premium users can't change playback state", 5000) |
|
window.spotifycontrolwidgetvolumecurrentlychanging = false |
|
} else { |
|
|
|
let sliderValue = event.target.value; |
|
window.spotifycontrolwidgetvolumejustset = true |
|
await spotifysdk.player.setPlaybackVolume(sliderValue) |
|
volumetext.innerText = " " + event.target.value + "%" |
|
const tempSliderValue = event.target.value; |
|
|
|
const progress = (tempSliderValue / spotifyvolumesilder.max) * 100; |
|
|
|
if(window.spotifyvolumesilderfocused) { |
|
spotifyvolumesilder.style.background = `linear-gradient(to right, #fff ${progress}%, #4d4d4d ${progress}%)`; |
|
} else { |
|
spotifyvolumesilder.style.background = `linear-gradient(to right, #1DB954 ${progress}%, #4d4d4d ${progress}%)`; |
|
} |
|
window.spotifycontrolwidgetvolumecurrentlychanging = false |
|
} |
|
|
|
|
|
}); |
|
|
|
spotifycurrentplayingsilder.addEventListener('input', async function(event) { |
|
window.spotifycontrolwidgetplaypointcurrentlychanging = true |
|
const tempSliderValue = event.target.value; |
|
|
|
const progress = (tempSliderValue / spotifycurrentplayingsilder.max) * 100; |
|
|
|
if(!window.spotifycurrentplayingsilderfocused) { |
|
spotifycurrentplayingsilder.style.background = `linear-gradient(to right, #fff ${progress}%, #4d4d4d ${progress}%)`; |
|
} else { |
|
spotifycurrentplayingsilder.style.background = `linear-gradient(to right, #1DB954 ${progress}%, #4d4d4d ${progress}%)`; |
|
} |
|
|
|
}); |
|
|
|
spotifycurrentplayingsilder.addEventListener('change', async function(event) { |
|
if(!(window.spotifyproduct === "premium")) { |
|
new Notice("❌ Non premium users can't change playback state", 5000) |
|
window.spotifycontrolwidgetplaypointcurrentlychanging = false |
|
} else { |
|
|
|
let sliderValue = event.target.value |
|
window.spotifycontrolwidgetplaypointjustset = true |
|
await spotifysdk.player.seekToPosition(sliderValue) |
|
const tempSliderValue = event.target.value; |
|
|
|
const progress = (tempSliderValue / spotifycurrentplayingsilder.max) * 100; |
|
|
|
if(!window.spotifycurrentplayingsilderfocused) { |
|
spotifycurrentplayingsilder.style.background = `linear-gradient(to right, #fff ${progress}%, #4d4d4d ${progress}%)`; |
|
} else { |
|
spotifycurrentplayingsilder.style.background = `linear-gradient(to right, #1DB954 ${progress}%, #4d4d4d ${progress}%)`; |
|
} |
|
window.spotifycontrolwidgetplaypointcurrentlychanging = false |
|
} |
|
|
|
}); |
|
|
|
document.addEventListener('spotifyliveupdate', () => { |
|
try { |
|
let data = event.detail |
|
if(!window.spotifycontrolwidgetplaypointcurrentlychanging) { |
|
if(window.spotifycontrolwidgetplaypointjustset) { |
|
setTimeout( async () => { |
|
data = await spotifysdk.player.getPlaybackState() |
|
spotifycurrentplayingsilder.max = data.item.duration_ms |
|
spotifycurrentplayingsilder.value = data.progress_ms |
|
const tempSliderValue = data.progress_ms; |
|
|
|
const progress = (tempSliderValue / spotifycurrentplayingsilder.max) * 100; |
|
if(!window.spotifycurrentplayingsilderfocused) { |
|
spotifycurrentplayingsilder.style.background = `linear-gradient(to right, #fff ${progress}%, #4d4d4d ${progress}%)`; |
|
} else { |
|
spotifycurrentplayingsilder.style.background = `linear-gradient(to right, #1DB954 ${progress}%, #4d4d4d ${progress}%)`; |
|
} |
|
currentplayinglengthtext.innerText = " " + new Date(data.progress_ms).toISOString().slice(11, 19).replace("00:" , ''); |
|
totallength.innerText = " " + new Date(data.item.duration_ms).toISOString().slice(11, 19).replace("00:" , ''); |
|
window.spotifycontrolwidgetplaypointjustset = false |
|
}, 500) |
|
|
|
} else { |
|
spotifycurrentplayingsilder.max = data.item.duration_ms |
|
spotifycurrentplayingsilder.value = data.progress_ms |
|
const tempSliderValue = data.progress_ms; |
|
const progress = (tempSliderValue / spotifycurrentplayingsilder.max) * 100; |
|
window.spotifycurrentplayingsilderprogress = progress |
|
|
|
if(!window.spotifycurrentplayingsilderfocused) { |
|
spotifycurrentplayingsilder.style.background = `linear-gradient(to right, #fff ${progress}%, #4d4d4d ${progress}%)`; |
|
} else { |
|
spotifycurrentplayingsilder.style.background = `linear-gradient(to right, #1DB954 ${progress}%, #4d4d4d ${progress}%)`; |
|
} |
|
currentplayinglengthtext.innerText = " " + new Date(data.progress_ms).toISOString().slice(11, 19).replace("00:" , ''); |
|
totallength.innerText = new Date(data.item.duration_ms).toISOString().slice(11, 19).replace("00:" , '') + " " |
|
} |
|
} else { |
|
currentplayinglengthtext.innerText = " " + new Date(data.progress_ms).toISOString().slice(11, 19).replace("00:" , ''); |
|
totallength.innerText = new Date(data.item.duration_ms).toISOString().slice(11, 19).replace("00:" , '') + " " |
|
} |
|
if(data.is_playing) { |
|
playbutton.innerText = "⏸ Pause" |
|
} else { |
|
playbutton.innerText = "▶ Play" |
|
} |
|
if(!window.spotifycontrolwidgetvolumecurrentlychanging) { |
|
if(window.spotifycontrolwidgetvolumejustset){ |
|
setTimeout(async () => { |
|
data = await spotifysdk.player.getPlaybackState() |
|
volumetext.innerText = " " + data.device.volume_percent + "%" |
|
spotifyvolumesilder.value = data.device.volume_percent |
|
window.spotifycontrolwidgetvolumejustset = false |
|
|
|
}, 500) |
|
} else { |
|
spotifyvolumesilder.value = data.device.volume_percent |
|
const tempSliderValue = data.device.volume_percent; |
|
volumetext.innerText = " " + data.device.volume_percent + "%" |
|
|
|
const progress = (tempSliderValue / spotifyvolumesilder.max) * 100; |
|
window.spotifyvolumesilderprogress = progress |
|
|
|
if(!window.spotifyvolumesilderfocused) { |
|
spotifyvolumesilder.style.background = `linear-gradient(to right, #fff ${progress}%, #4d4d4d ${progress}%)`; |
|
} else { |
|
spotifyvolumesilder.style.background = `linear-gradient(to right, #1DB954 ${progress}%, #4d4d4d ${progress}%)`; |
|
} |
|
} } else { |
|
volumetext.innerText = " " + data.device.volume_percent + "%" |
|
const tempSliderValue = data.device.volume_percent; |
|
|
|
const progress = (tempSliderValue / spotifyvolumesilder.max) * 100; |
|
|
|
if(!window.spotifyvolumesilderfocused) { |
|
spotifyvolumesilder.style.background = `linear-gradient(to right, #fff ${progress}%, #4d4d4d ${progress}%)`; |
|
} else { |
|
spotifyvolumesilder.style.background = `linear-gradient(to right, #1DB954 ${progress}%, #4d4d4d ${progress}%)`; |
|
} |
|
} |
|
if(data.repeat_state) { |
|
repeatState.setRepeatState(data.repeat_state) |
|
let state = repeatState.getRepeatState() |
|
if(state==="off"){ |
|
repeatbutton.innerText = "❌ Repeat Off" |
|
} |
|
if(state==="track"){ |
|
repeatbutton.innerText = "🔂 Repeat current song" |
|
} |
|
if(state==="context"){ |
|
repeatbutton.innerText = "🔁 Repeat whole album or playlist" |
|
} |
|
} else { |
|
repeatState.setRepeatState("off") |
|
repeatbutton.innerText = "❌ Repeat Off" |
|
} |
|
image[0].src = data.item.album.images[1].url |
|
playingon.innerText = data.device.name + " " |
|
let artistname = '' |
|
for(let i in data.item.artists){ |
|
let artist = data.item.artists[i] |
|
artistname = artistname + artist.name + ", " |
|
} |
|
songname.innerText = "Currently playing " + data.item.name + " from " + data.item.album.name + " by " + artistname.slice(0, -2) |
|
window.spotifycurrentchangingsliders = false |
|
|
|
window.currentr = window.currentr + 1 |
|
|
|
} catch(error) { |
|
} |
|
}); |
|
} |
|
} |
