// ==UserScript==
// @name Bandcamp script (Deluxe Edition)
// @description A discography player for bandcamp.com and manage your played albums
// @namespace https://openuserjs.org/users/cuzi
// @copyright 2019, cuzi (https://openuserjs.org/users/cuzi)
// @supportURL https://github.com/cvzi/Bandcamp-script-deluxe-edition/issues
// @contributionURL https://buymeacoff.ee/cuzi
// @contributionURL https://ko-fi.com/cuzicvzi
// @license MIT
// @version 1.4
// @require https://unpkg.com/[email protected]/dist/index.min.js
// @grant GM.xmlHttpRequest
// @grant GM.setValue
// @grant GM.getValue
// @grant GM.notification
// @grant GM.download
// @grant unsafeWindow
// @connect bandcamp.com
// @connect *.bandcamp.com
// @connect bcbits.com
// @connect *.bcbits.com
// @include https://bandcamp.com/*
// @include https://*.bandcamp.com/*
// @include https://campexplorer.io/
// ==/UserScript==
// ==OpenUserJS==
// @author cuzi
// ==/OpenUserJS==
/* globals JSON5, GM, unsafeWindow, MediaMetadata, MouseEvent, Response */
// TODO media key control possible?
// TODO genius lyrics?
// TODO test preorder albums and albums that are not streamable
// TODO run on all sites, not only bandcamp if (hostname is 'bandcamp' or definingFeature())
// TODO Mark as played automatically when played
const BACKUP_REMINDER_DAYS = 35
const TRALBUM_CACHE_HOURS = 2
const CHROME = navigator.userAgent.indexOf('Chrome') !== -1
const CAMPEXPLORER = document.location.hostname === 'campexplorer.io'
const NOEMOJI = CHROME && navigator.userAgent.match(/Windows (NT)? [4-9]/i)
const allFeatures = {
discographyplayer: {
name: 'Enable player on discography page',
default: true
},
albumPageVolumeBar: {
name: 'Enable volume slider/shuffle/repeat on album page',
default: true
},
albumPageAutoRepeatAll: {
name: 'Always "repeat all" on album page',
default: false
},
markasplayed: {
name: 'Show "mark as played" link on discography player',
default: true
},
markasplayedEverywhere: {
name: 'Show "mark as played" link everywhere',
default: true
},
/* markasplayedAuto: {
name: '(NOT YET IMPLEMENTED) Automatically "mark as played" once a song was played for',
default: false
}, */
thetimehascome: {
name: 'Circumvent "The time has come to open thy wallet" limit',
default: true
},
albumPageDownloadLinks: {
name: 'Show download links on album page',
default: true
},
discographyplayerDownloadLink: {
name: 'Show download link on discography player',
default: true
},
backupReminder: {
name: 'Remind me to backup my played albums every month',
default: true
},
nextSongNotifications: {
name: 'Show a notification when a new song starts',
default: false
},
discographyplayerPersist: {
name: 'Recover discography player on next page',
default: true
},
releaseReminder: {
name: 'Show new releases that I have saved',
default: true
}
}
var player, audio, currentDuration, timeline, playhead, bufferbar
var onPlayHead = false
const spriteRepeatShuffle = 'url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACUAAABgCAMAAACt1UvuAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAA2UExURQAAAP////39/Tw8PP///////w4ODv////7+/v7+/k5OTktLS35+fiAgIJSUlAAAABAQECoqKpxAnVsAAAAPdFJOUwAxQ05UJGkKBRchgWiOOufd5UcAAAKrSURBVEjH7ZfrkqQgDIUbFLmphPd/2T2EgNqNzlTt7o+p3dR0d5V+JOGEYzkvZ63nsNY6517XCPIrjIDvXF7qL24ao5QynesIllDKE1MpJdom1UDBQIQlE+HmEipVIk+6cqVqQYivlq/loBJFDa6WnaitbbnMtFHnOF1niDJJX14pPa+cOm0l3Vohyuus8xpkj9ih1nPke6iaO6KV323XqwhRON4tQ3GedakNYYQqslaO+yv9xs64Lh2rX8sWeSISzVWTk8ROJmmU9MTl1PvEnHBmzXRSzvhhuqJAzjlJY9eJCVWljKwcESbL+fbTYK0NWx0IGodyvKCACqp6VqMNlguhktbxMqHdI5k7ps1SsiTxPO0YDgojkZPIysl+617cy8rUkIfPflMY4IaKLZfHhSoPn782iQJC5tIX2nfNQseGG4eoe3T1+kXh7j1j/H6W9TbC65ZxR2S0frKePUWYlhbY/hTkvL6aiKPApCRTeoxNTvUTI16r1DqPAqrGVR0UT/ojwGByJ6qO8S32HQ6wJ8r4TwFdyGnx7kzVM8l/nZpwRwkm1GAKC+5oKflMzY3aUm4rBpSsd17pVv2Bsn739ivqFWK2bhD2TE0wwTKM3Knu2puo1PJ8blqu7TEXVY1wgvGQwYN6HKJR0WGjYqxheN/lCpOzd/GlHX+gHyEe/SE/qpyV+sKPfqdEhzVv/OjwwC3zlefnnR+9YW+5Zz86fzjw3o+f1NCP9oMa+fGeOvnR2brH/378B/xI9A0/UjUjSfyOH2GzCDOuKavyUUM/eryMFjNOIMrHD/1o4di0GlCkp8IP/RjwglRSCKX9yI845VGXqwc18KOtWq3mSr35EQVnHbnzC3X144I3d7Wj6xuq+hH7gwz4PvY48GP9p8i2Vzus/dt+pB/nx18MUmsLM2EHrwAAAABJRU5ErkJggg==")'
function humanDuration (duration) {
let hours = parseInt(duration / 3600)
if (!hours) {
hours = ''
} else {
hours += ':'
}
duration %= 3600
let minutes = parseInt(duration / 60)
minutes = (minutes < 10 ? '0' : '') + minutes
duration %= 60
let seconds = parseInt(duration)
if (duration - seconds >= 0.5) {
seconds++
}
seconds = (seconds < 10 ? '0' : '') + seconds
return `${hours}${minutes}:${seconds}`
}
function addLogVolume (mediaElement) {
if (!Object.hasOwnProperty.call(mediaElement, 'logVolume')) {
Object.defineProperty(mediaElement, 'logVolume', {
get () {
return Math.log((Math.E - 1) * this.volume + 1)
},
set (percentage) {
this.volume = (Math.exp(percentage) - 1) / (Math.E - 1)
}
})
}
}
function randomIndex (max) {
// Random int from interval [0,max)
return Math.floor(Math.random() * Math.floor(max))
}
function padd (n, width, filler) {
let s
for (s = n.toString(); s.length < width; s = filler + s) {}
return s
}
function metricPrefix (n, decimals, k) {
// From http://stackoverflow.com/a/18650828
if (n <= 0) {
return String(n)
}
k = k || 1000
const dm = decimals <= 0 ? 0 : decimals || 2
const sizes = ['', 'K', 'M', 'G', 'T', 'P', 'E', 'Z', 'Y']
const i = Math.floor(Math.log(n) / Math.log(k))
return parseFloat((n / Math.pow(k, i)).toFixed(dm)) + sizes[i]
}
function fixFilename (s) {
const forbidden = '*"/\\[]:|,<>?\n\t\0'.split('')
forbidden.forEach(function (char) {
s = s.replace(char, '')
})
return s
}
function base64encode (s) {
// from https://gist.github.com/stubbetje/229984
const base64 = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/='.split('')
const l = s.length
let o = ''
for (let i = 0; i < l; i++) {
const byte0 = s.charCodeAt(i++) & 0xff
const byte1 = s.charCodeAt(i++) & 0xff
const byte2 = s.charCodeAt(i) & 0xff
o += base64[byte0 >> 2]
o += base64[((byte0 & 0x3) << 4) | (byte1 >> 4)]
const t = i - l
if (t >= 0) {
if (t === 0) {
o += base64[((byte1 & 0x0f) << 2) | (byte2 >> 6)]
o += base64[64]
} else {
o += base64[64]
o += base64[64]
}
} else {
o += base64[((byte1 & 0x0f) << 2) | (byte2 >> 6)]
o += base64[byte2 & 0x3f]
}
}
return o
}
function timeSince (date) {
// From https://stackoverflow.com/a/3177838/10367381
const seconds = Math.floor((new Date() - date) / 1000)
let interval = Math.floor(seconds / 31536000)
if (interval > 1) {
return interval + ' years'
}
interval = Math.floor(seconds / 2592000)
if (interval > 1) {
return interval + ' months'
}
interval = Math.floor(seconds / 86400)
if (interval > 1) {
return interval + ' days'
}
interval = Math.floor(seconds / 3600)
if (interval > 1) {
return interval + ' hours'
}
interval = Math.floor(seconds / 60)
if (interval > 1) {
return interval + ' minutes'
}
return Math.floor(seconds) + ' seconds'
}
function removeViaQuerySelector (parent, selector) {
if (typeof selector === 'undefined') {
selector = parent
parent = document
}
for (let el = parent.querySelector(selector); el; el = parent.querySelector(selector)) {
el.remove()
}
}
function firstChildWithText (parent) {
for (let i = 0; i < parent.childNodes.length; i++) {
const node = parent.childNodes[i]
if (node.nodeType === window.Node.TEXT_NODE && node.nodeValue.trim()) {
return node
} else if (node.childNodes.length) {
const r = firstChildWithText(node)
if (r) {
return r
}
}
}
return false
}
const _dateOptions = { year: 'numeric', month: 'short', day: 'numeric' }
const _dateOptionsWithoutYear = { month: 'short', day: 'numeric' }
const _dateOptionsNumericWithoutYear = { year: '2-digit', month: '2-digit', day: '2-digit' }
function dateFormater (date) {
if (date.getFullYear() === (new Date()).getFullYear()) {
return date.toLocaleDateString(undefined, _dateOptionsWithoutYear)
} else {
return date.toLocaleDateString(undefined, _dateOptions)
}
}
function dateFormaterRelease (date) {
return date.toLocaleDateString(undefined, _dateOptionsWithoutYear) + ', ' + date.getFullYear()
}
function dateFormaterNumeric (date) {
return date.toLocaleDateString(undefined, _dateOptionsNumericWithoutYear)
}
function getEnabledFeatures (enabledFeaturesValue) {
for (const feature in allFeatures) {
allFeatures[feature].enabled = allFeatures[feature].default
}
if (enabledFeaturesValue !== false) {
const enabledFeatures = JSON.parse(enabledFeaturesValue)
if (enabledFeatures.constructor === Object) {
for (const feature in enabledFeatures) {
if (feature in allFeatures) {
allFeatures[feature].enabled = enabledFeatures[feature].enabled
}
}
}
}
return allFeatures
}
function findUserProfileUrl () {
if (document.querySelector('#collection-main a')) {
return document.querySelector('#collection-main a').href
}
return 'https://bandcamp.com/login'
}
var ivRestoreVolume
function getStoredVolume (callbackIfVolumeExists) {
GM.getValue('volume', '0.7').then(str => {
return parseFloat(str)
}).then(function storedVolumeLoaded (volume) {
if (!Number.isNaN(volume) && volume > 0.0) {
callbackIfVolumeExists(volume)
}
})
}
function restoreVolume () {
getStoredVolume(function getStoredVolumeCallback (volume) {
const restoreVolumeInterval = function restoreInterval () {
const audios = document.querySelectorAll('audio,video')
if (audios.length > 0) {
let paused = true
audios.forEach(function (media) {
addLogVolume(media)
paused = paused && media.paused
media.logVolume = volume
})
if (!paused) {
// Clear interval once audio is actually playing
window.clearInterval(ivRestoreVolume)
}
// Update volume bar on tag player (by double clicking mute button)
const muteWrapper = document.querySelector('.vol-icon-wrapper')
if (muteWrapper) {
const mouseDownEvent = new MouseEvent('mousedown', { view: window, bubbles: true, cancelable: true })
muteWrapper.dispatchEvent(mouseDownEvent)
muteWrapper.dispatchEvent(mouseDownEvent)
}
}
}
restoreVolumeInterval()
ivRestoreVolume = window.setInterval(restoreVolumeInterval, 3000)
})
window.setTimeout(function clearRestoreInterval () {
window.clearInterval(ivRestoreVolume)
}, 10000)
}
function findPreviousAlbumCover (currentUrl) {
const currentKey = albumKey(currentUrl)
const as = document.querySelectorAll('.music-grid .music-grid-item a[href*="/album/"],.music-grid .music-grid-item a[href*="/track/"]')
let last = false
let found = false
for (let i = 0; i < as.length; i++) {
if (last && albumKey(as[i].href) === currentKey) {
found = last
break
}
last = as[i]
}
if (found) {
return playAlbumFromCover.apply(found, null)
}
return false
}
function findNextAlbumCover (currentUrl) {
const currentKey = albumKey(currentUrl)
const as = document.querySelectorAll('.music-grid .music-grid-item a[href*="/album/"],.music-grid .music-grid-item a[href*="/track/"]')
let isNext = false
for (let i = 0; i < as.length; i++) {
if (isNext) {
playAlbumFromCover.apply(as[i], null)
return true
}
if (albumKey(as[i].href) === currentKey) {
isNext = true
}
}
return false
}
function musicPlayerNextSong (next) {
const current = player.querySelector('.playlist .playing')
if (!next) {
next = current.nextElementSibling
while (next) {
if ('file' in next.dataset) {
break
}
next = next.nextElementSibling
}
}
if (next) {
current.classList.remove('playing')
next.classList.add('playing')
musicPlayerPlaySong(next)
} else {
// End of playlist reached
if (findNextAlbumCover(current.dataset.albumUrl) === false) {
const notloaded = player.querySelector('.playlist .playlistheading a.notloaded')
if (notloaded) {
// Unloaded albums in playlist
const url = notloaded.href
notloaded.remove()
cachedTralbumData(url).then(function onCachedTralbumDataLoaded (TralbumData) {
if (TralbumData) {
addAlbumToPlaylist(TralbumData, 0)
} else {
playAlbumFromUrl(url)
}
})
} else {
audio.pause()
audio.currentTime -= 1
musicPlayerOnTimeUpdate()
window.alert('End of playlist reached')
}
}
}
}
var ivSlideInNextSong
function musicPlayerPlaySong (next, startTime) {
currentDuration = next.dataset.duration
player.querySelector('.durationDisplay .current').innerHTML = '-'
player.querySelector('.durationDisplay .total').innerHTML = humanDuration(currentDuration)
audio.src = next.dataset.file
if (typeof startTime !== 'undefined' && startTime !== false) {
audio.currentTime = startTime
}
bufferbar.classList.remove('bufferbaranimation')
window.setTimeout(function bufferbaranimationWidth () {
bufferbar.style.width = '0px'
window.setTimeout(function bufferbaranimationClass () {
bufferbar.classList.add('bufferbaranimation')
}, 0)
}, 0)
const key = albumKey(next.dataset.albumUrl)
// Meta
const currentlyPlaying = document.querySelector('.currentlyPlaying')
const nextInRow = player.querySelector('.nextInRow')
nextInRow.querySelector('.cover').href = next.dataset.albumUrl
nextInRow.querySelector('.cover img').src = next.dataset.albumCover
nextInRow.querySelector('.info .link').href = next.dataset.albumUrl
nextInRow.querySelector('.info .title').innerHTML = next.dataset.title
nextInRow.querySelector('.info .artist').innerHTML = next.dataset.artist
nextInRow.querySelector('.info .album').innerHTML = next.dataset.album
// Favicon
musicPlayerFavicon(next.dataset.albumCover.replace(/_\d.jpg$/, '_3.jpg'))
// Wishlist
const collectWishlist = player.querySelector('.collect-wishlist')
collectWishlist.dataset.albumUrl = next.dataset.albumUrl
player.querySelectorAll('.collect-wishlist>*').forEach(function (e) { e.style.display = 'none' })
if (next.dataset.isPurchased === 'true') {
player.querySelector('.collect-wishlist .wishlist-own').style.display = 'inline-block'
collectWishlist.dataset.wishlist = 'own'
} else if (next.dataset.inWishlist === 'true') {
player.querySelector('.collect-wishlist .wishlist-collected').style.display = 'inline-block'
collectWishlist.dataset.wishlist = 'collected'
} else {
player.querySelector('.collect-wishlist .wishlist-add').style.display = 'inline-block'
collectWishlist.dataset.wishlist = 'add'
}
// Played/Listened
const collectListened = player.querySelector('.collect-listened')
if (allFeatures.markasplayed.enabled && collectListened) {
collectListened.dataset.albumUrl = next.dataset.albumUrl
player.querySelectorAll('.collect-listened>*').forEach(function (e) { e.style.display = 'none' })
GM.getValue('myalbums', '{}').then(function myalbumsLoaded (str) {
const myalbums = JSON.parse(str)
if (key in myalbums && 'listened' in myalbums[key] && myalbums[key].listened) {
player.querySelector('.collect-listened .listened').style.display = 'inline-block'
const date = new Date(myalbums[key].listened)
const since = timeSince(date)
player.querySelector('.collect-listened .listened').title = since + ' ago\nClick to mark as NOT played'
collectListened.dataset.listened = myalbums[key].listened
} else {
player.querySelector('.collect-listened .mark-listened').style.display = 'inline-block'
collectListened.dataset.listened = false
}
})
} else if (collectListened) {
collectListened.remove()
}
// Notification
if (allFeatures.nextSongNotifications.enabled && 'notification' in GM) {
GM.notification({
title: document.location.host,
text: next.dataset.title + '\nby ' + next.dataset.artist + '\nfrom ' + next.dataset.album,
image: next.dataset.albumCover,
highlight: false,
silent: true,
timeout: 3000,
onclick: musicPlayerNext
})
}
// Media hub
if ('mediaSession' in navigator) {
navigator.mediaSession.metadata = new MediaMetadata({
title: next.dataset.title,
artist: next.dataset.artist,
album: next.dataset.album,
artwork: [{
src: next.dataset.albumCover,
sizes: '350x350',
type: 'image/jpeg'
}]
})
navigator.mediaSession.setActionHandler('previoustrack', musicPlayerPrev)
navigator.mediaSession.setActionHandler('nexttrack', musicPlayerNext)
}
// Download link
const downloadLink = player.querySelector('.downloadlink')
if (allFeatures.discographyplayerDownloadLink.enabled) {
downloadLink.href = next.dataset.file
downloadLink.download = (next.dataset.trackNumber > 9 ? '' : '0') + next.dataset.trackNumber + '. ' + fixFilename(next.dataset.artist + ' - ' + next.dataset.title) + '.mp3'
downloadLink.style.display = 'block'
} else {
downloadLink.style.display = 'none'
}
// Show "playing" indication on album covers
const coverLinkPattern = albumPath(next.dataset.albumUrl)
document.querySelectorAll('img.albumIsCurrentlyPlaying').forEach(img => img.classList.remove('albumIsCurrentlyPlaying'))
document.querySelectorAll('.albumIsCurrentlyPlayingIndicator').forEach(div => div.remove())
document.querySelectorAll('a[href*="' + coverLinkPattern + '"] img').forEach(function (img) {
let node = img
while (node) {
if (node.id === 'discographyplayer') {
return
}
if (node === document.body) {
break
}
node = node.parentNode
}
img.classList.add('albumIsCurrentlyPlaying')
if (!img.parentNode.querySelector('.albumIsCurrentlyPlayingIndicator')) {
const indicator = img.parentNode.appendChild(document.createElement('div'))
indicator.classList.add('albumIsCurrentlyPlayingIndicator')
indicator.addEventListener('click', function (ev) {
ev.preventDefault()
musicPlayerPlay()
})
indicator.appendChild(document.createElement('div')).classList.add('currentlyPlayingBg')
indicator.appendChild(document.createElement('div')).classList.add('currentlyPlayingIcon')
}
})
// Animate
currentlyPlaying.style.marginLeft = -parseInt(currentlyPlaying.clientWidth + 1) + 'px'
nextInRow.style.width = '99%'
clearTimeout(ivSlideInNextSong)
ivSlideInNextSong = window.setTimeout(function slideInSongInterval () {
currentlyPlaying.remove()
const clone = nextInRow.cloneNode(true)
clone.style.width = '0%'
clone.className = 'nextInRow'
nextInRow.className = 'currentlyPlaying'
nextInRow.parentNode.appendChild(clone)
}, 7 * 1000)
window.setTimeout(() => player.querySelector('.playlist .playing').scrollIntoView({ block: 'nearest' }), 200)
}
function musicPlayerPlay () {
if (audio.paused) {
audio.play()
musicPlayerCookieChannelSendStop()
} else {
audio.pause()
}
}
function musicPlayerStop () {
if (!audio.paused) {
audio.pause()
}
}
function musicPlayerPrev () {
musicPlayerShowBusy()
const current = player.querySelector('.playlist .playing')
let prev = current.previousElementSibling
while (prev) {
if ('file' in prev.dataset) {
break
}
prev = prev.previousElementSibling
}
if (prev) {
musicPlayerNextSong(prev)
}
}
function musicPlayerNext () {
musicPlayerShowBusy()
musicPlayerNextSong()
}
function musicPlayerPrevAlbum () {
audio.pause()
window.setTimeout(function musicPlayerPrevAlbumTimeout () {
musicPlayerShowBusy()
const url = player.querySelector('.playlist .playing').dataset.albumUrl
if (!findPreviousAlbumCover(url)) {
// Find previous album in playlist
let prev = false
const as = player.querySelectorAll('.playlist .playlistheading a')
for (let i = 0; i < as.length; i++) {
if (albumKey(as[i].href) === albumKey(url)) {
if (i > 0) {
prev = as[i - 1]
}
break
}
}
if (prev) {
prev.parentNode.click()
} else {
// Just play first song in playlist
player.querySelector('.playlist .playlistentry').click()
}
}
}, 10)
}
function musicPlayerNextAlbum () {
audio.pause()
window.setTimeout(function musicPlayerNextAlbumTimeout () {
musicPlayerShowBusy()
const r = findNextAlbumCover(player.querySelector('.playlist .playing').dataset.albumUrl)
if (r === false) {
// Find next album in playlist
let reachedPlaying = false
let found = false
const lis = player.querySelectorAll('.playlist li')
for (let i = 0; i < lis.length; i++) {
if (reachedPlaying && lis[i].classList.contains('playlistheading')) {
lis[i].click()
found = true
break
} else if (lis[i].classList.contains('playing')) {
reachedPlaying = true
}
}
if (!found) {
audio.play()
window.alert('End of playlist reached')
}
}
}, 10)
}
function musicPlayerOnTimelineClick (ev) {
musicPlayerMovePlayHead(ev)
const timelineWidth = timeline.offsetWidth - playhead.offsetWidth
const clickPercent = (ev.clientX - timeline.getBoundingClientRect().left) / timelineWidth
audio.currentTime = currentDuration * clickPercent
}
function musicPlayerOnTimeUpdate () {
const playpause = player.querySelector('.playpause')
const timelineWidth = timeline.offsetWidth - playhead.offsetWidth
const playPercent = timelineWidth * (audio.currentTime / currentDuration)
playhead.style.marginLeft = playPercent + 'px'
if (audio.currentTime === currentDuration) {
playpause.querySelector('.play').style.display = 'none'
playpause.querySelector('.busy').style.display = ''
playpause.querySelector('.pause').style.display = 'none'
} else if (audio.paused) {
playpause.querySelector('.play').style.display = ''
playpause.querySelector('.busy').style.display = 'none'
playpause.querySelector('.pause').style.display = 'none'
if (document.title.startsWith('\u25B6\uFE0E ')) {
document.title = document.title.substring(3)
}
} else {
playpause.querySelector('.play').style.display = 'none'
playpause.querySelector('.busy').style.display = 'none'
playpause.querySelector('.pause').style.display = ''
if (!document.title.startsWith('\u25B6\uFE0E ')) {
document.title = '\u25B6\uFE0E ' + document.title
}
}
player.querySelector('.durationDisplay .current').innerHTML = humanDuration(audio.currentTime)
}
function musicPlayerUpdateBufferBar () {
if (currentDuration) {
if (audio.buffered.length > 0) {
bufferbar.style.width = Math.min(100, 1 + parseInt(100 * audio.buffered.end(0) / currentDuration)) + '%'
} else {
bufferbar.style.width = '100%'
}
} else {
bufferbar.style.width = '0px'
}
}
function musicPlayerShowBusy (ev) {
const playpause = player.querySelector('.playpause')
playpause.querySelector('.play').style.display = 'none'
playpause.querySelector('.busy').style.display = ''
playpause.querySelector('.pause').style.display = 'none'
}
function musicPlayerMovePlayHead (event) {
const newMargLeft = event.clientX - timeline.getBoundingClientRect().left
const timelineWidth = timeline.offsetWidth - playhead.offsetWidth
if (newMargLeft >= 0 && newMargLeft <= timelineWidth) {
playhead.style.marginLeft = newMargLeft + 'px'
}
if (newMargLeft < 0) {
playhead.style.marginLeft = '0px'
}
if (newMargLeft > timelineWidth) {
playhead.style.marginLeft = timelineWidth + 'px'
}
}
function musicPlayerOnPlayheadMouseDown () {
onPlayHead = true
window.addEventListener('mousemove', musicPlayerMovePlayHead, true)
audio.removeEventListener('timeupdate', musicPlayerOnTimeUpdate, false)
}
function musicPlayerOnPlayheadMouseUp (event) {
if (onPlayHead) {
musicPlayerMovePlayHead(event)
window.removeEventListener('mousemove', musicPlayerMovePlayHead, true)
// change current time
const timelineWidth = timeline.offsetWidth - playhead.offsetWidth
const clickPercent = (event.clientX - timeline.getBoundingClientRect().left) / timelineWidth
audio.currentTime = currentDuration * clickPercent
audio.addEventListener('timeupdate', musicPlayerOnTimeUpdate, false)
}
onPlayHead = false
}
function musicPlayerOnVolumeClick (ev) {
const volSlider = player.querySelector('.vol-slider')
const sliderWidth = volSlider.offsetWidth
const percent = (ev.clientX - volSlider.getBoundingClientRect().left) / sliderWidth
audio.logVolume = percent > 0.9 ? 1.0 : percent
GM.setValue('volume', audio.logVolume)
}
function musicPlayerOnVolumeWheel (ev) {
ev.preventDefault()
const direction = Math.min(Math.max(-1.0, ev.deltaY), 1.0)
audio.logVolume = Math.min(Math.max(0.0, audio.logVolume - 0.05 * direction), 1.0)
GM.setValue('volume', audio.logVolume)
}
function musicPlayerOnMuteClick (ev) {
if (audio.logVolume < 0.01) {
if ('lastvolume' in audio.dataset && audio.dataset.lastvolume) {
audio.logVolume = audio.dataset.lastvolume
GM.setValue('volume', audio.logVolume)
} else {
audio.logVolume = 1.0
}
} else {
audio.dataset.lastvolume = audio.logVolume
audio.logVolume = 0.0
}
}
function musicPlayerOnVolumeChanged (ev) {
const icons = ['\uD83D\uDD07', '\uD83D\uDD08', '\uD83D\uDD09', '\uD83D\uDD0A']
const percent = audio.logVolume
const volSlider = player.querySelector('.vol-slider')
volSlider.querySelector('.vol-amt').style.width = parseInt(100 * percent) + '%'
const volIconWrapper = player.querySelector('.vol-icon-wrapper')
volIconWrapper.title = 'Mute (' + parseInt(percent * 100) + '%)'
if (percent < 0.05) {
volIconWrapper.innerHTML = icons[0]
} else if (percent < 0.3) {
volIconWrapper.innerHTML = icons[1]
} else if (percent < 0.8) {
volIconWrapper.innerHTML = icons[2]
} else {
volIconWrapper.innerHTML = icons[3]
}
}
function musicPlayerOnEnded (ev) {
musicPlayerNextSong()
window.setTimeout(() => player.querySelector('.playlist .playing').scrollIntoView({ block: 'nearest' }), 200)
}
function musicPlayerOnPlaylistClick (ev) {
musicPlayerNextSong(this)
}
function musicPlayerOnPlaylistHeadingClick (ev) {
const a = this.querySelector('a[href]')
if (a && a.classList.contains('notloaded')) {
const url = a.href
this.remove()
cachedTralbumData(url).then(function onCachedTralbumDataLoaded (TralbumData) {
if (TralbumData) {
addAlbumToPlaylist(TralbumData, 0)
} else {
playAlbumFromUrl(url)
}
})
} else if (a && this.nextElementSibling) {
this.nextElementSibling.click()
}
}
function musicPlayerFavicon (url) {
removeViaQuerySelector(document.head, 'link[rel*=icon]')
const link = document.createElement('link')
link.type = 'image/x-icon'
link.rel = 'shortcut icon'
link.href = url
document.head.appendChild(link)
}
function musicPlayerCollectWishlistClick (ev) {
ev.preventDefault()
if (player.querySelector('.collect-wishlist').dataset === 'own') {
return
}
const url = player.querySelector('.collect-wishlist').dataset.albumUrl
player.querySelectorAll('.collect-wishlist>*').forEach(function (e) { e.style.display = 'none' })
window.open(url + '#collect-wishlist')
}
async function musicPlayerCollectListenedClick (ev) {
ev.preventDefault()
const collectListened = player.querySelector('.collect-listened')
const url = collectListened.dataset.albumUrl
setTimeout(function musicPlayerCollectListenedResetTimeout () {
player.querySelectorAll('.collect-listened>*').forEach(function (e) { e.style.display = 'none' })
player.querySelector('.collect-listened .listened-saving').style.display = 'inline-block'
player.querySelector('.collect-listened').style.cursor = 'wait'
}, 0)
let albumData = await myAlbumsGetAlbum(url)
if (!albumData) {
albumData = await myAlbumsNewFromUrl(url, {})
}
if (albumData.listened) {
albumData.listened = false
} else {
albumData.listened = (new Date()).toJSON()
}
collectListened.dataset.listened = albumData.listened
await myAlbumsUpdateAlbum(albumData)
player.querySelectorAll('.collect-listened>*').forEach(function (e) { e.style.display = 'none' })
if (albumData.listened) {
player.querySelector('.collect-listened .listened').style.display = 'inline-block'
} else {
player.querySelector('.collect-listened .mark-listened').style.display = 'inline-block'
}
player.querySelector('.collect-listened').style.cursor = ''
makeAlbumLinksGreat()
}
function musicPlayerCookieChannel (onStopEventCb) {
if (CAMPEXPLORER) {
return
}
window.addEventListener('message', function onMessage (event) {
// Receive messages from the cookie channel event handler
if (event.origin === document.location.protocol + '//' + document.location.hostname &&
event.data && typeof (event.data) === 'object' && 'discographyplayerCookiechannelPlaylist' in event.data &&
event.data.discographyplayerCookiechannelPlaylist.length >= 2 && event.data.discographyplayerCookiechannelPlaylist[1] === 'stop') {
onStopEventCb(event.data.discographyplayerCookiechannelPlaylist)
}
})
var script = document.createElement('script')
script.innerHTML = `
var channel = new Cookie.CommChannel('playlist')
channel.send('stop')
channel.subscribe(function(a,b) {
window.postMessage({'discographyplayerCookiechannelPlaylist': b}, document.location.href)
})
channel.startListening()
window.addEventListener('message', function onMessage (event) {
// Receive messages from the user script
if (event.origin === document.location.protocol + '//' + document.location.hostname
&& event.data && typeof(event.data) === 'object' && 'discographyplayerCookiechannelPlaylist' in event.data
&& event.data.discographyplayerCookiechannelPlaylist === 'sendstop') {
channel.send('stop')
}
})
window.addEventListener('unload', function(event) {
channel.cleanup()
})
`
document.head.appendChild(script)
}
function musicPlayerCookieChannelSendStop (onStopEventCb) {
window.postMessage({ discographyplayerCookiechannelPlaylist: 'sendstop' }, document.location.href)
}
function musicPlayerSaveState () {
let startPlaybackIndex = false
const playlistEntries = player.querySelectorAll('.playlist .playlistentry')
for (let i = 0; i < playlistEntries.length; i++) {
if (playlistEntries[i].classList.contains('playing')) {
startPlaybackIndex = i
break
}
}
const startPlaybackTime = audio.currentTime
return GM.setValue('musicPlayerState', JSON.stringify({
time: (new Date().getTime()),
htmlPlaylist: player.querySelector('.playlist').innerHTML,
startPlayback: !audio.paused,
startPlaybackIndex: startPlaybackIndex,
startPlaybackTime: startPlaybackTime
}))
}
function musicPlayerRestoreState (state) {
if (!allFeatures.discographyplayerPersist.enabled) {
return
}
if (state.time + 1000 * 30 < (new Date().getTime())) {
// Saved state expires after 30 seconds
return
}
// Re-create music player
musicPlayerCreate()
player.querySelector('.playlist').innerHTML = state.htmlPlaylist
const playlistEntries = player.querySelectorAll('.playlist .playlistentry')
playlistEntries.forEach(function addPlaylistEntryOnClick (li) {
li.addEventListener('click', musicPlayerOnPlaylistClick)
})
player.querySelectorAll('.playlist .playlistheading').forEach(function addPlaylistHeadingEntryOnClick (li) {
li.addEventListener('click', musicPlayerOnPlaylistHeadingClick)
})
if (state.startPlaybackIndex !== false) {
player.querySelectorAll('.playlist .playing').forEach(function (el) {
el.classList.remove('playing')
})
playlistEntries[state.startPlaybackIndex].classList.add('playing')
window.setTimeout(() => player.querySelector('.playlist .playing').scrollIntoView({ block: 'nearest' }), 200)
}
// Start playback
if (state.startPlayback && state.startPlaybackIndex !== false) {
musicPlayerPlaySong(playlistEntries[state.startPlaybackIndex], state.startPlaybackTime)
}
}
function musicPlayerToggleMinimize (ev, hide) {
if (hide || player.style.bottom !== '-57px') {
player.style.bottom = '-57px'
this.classList.add('minimized')
} else {
player.style.bottom = '0px'
this.classList.remove('minimized')
}
}
function musicPlayerClose () {
if (player) {
player.style.display = 'none'
}
if (audio) {
audio.pause()
}
}
function musicPlayerCreate () {
if (player) {
player.style.display = 'block'
return
}
musicPlayerCookieChannel(musicPlayerStop)
const img1px = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mOsmLZvJgAFwQJn5VVZ5QAAAABJRU5ErkJggg=='
const listenedListUrl = findUserProfileUrl() + '#listened-tab'
const checkSymbol = NOEMOJI ? '✓' : '✔'
player = document.createElement('div')
document.body.appendChild(player)
player.id = 'discographyplayer'
player.innerHTML = `
<div class="col col25 nowPlaying">
<div class="currentlyPlaying">
<a class="cover" target="_blank" href="#">
<img src="${img1px}">
</a>
<div class="info">
<a class="link" target="_blank" href="#">
<div class="title">◧◩◨▧■□▩</div>
<div class="artist">by <span>◩▧◧□ ◩◨▧ ■◩▩</span></div>
<div>from <span class="album">◨■■▩ ▧◨□</span></div>
</a>
</div>
</div>
<div class="nextInRow">
<a class="cover" target="_blank" href="#">
<img src="${img1px}">
</a>
<div class="info">
<a class="link" target="_blank" href="#">
<div class="title">◧◩◨▧■□▩</div>
<div>by <span class="artist">◩▧◧□ ◩◨▧ ■◩▩</span></div>
<div>from <span class="album">◨■■▩ ▧◨□</span></div>
</a>
</div>
</div>
</div>
<div class="col col25 colcontrols">
<audio autoplay="autoplay" preload="auto"></audio>
<div class="audioplayer">
<div id="timeline">
<div id="bufferbar" class="bufferbaranimation"></div>
<div id="playhead"></div>
</div>
<div class="controls">
<div class="prevalbum" title="Previous album">
<div class="arrowbutton prevalbum-icon"></div>
</div>
<div class="prev" title="Previous song">
<div class="arrowbutton prev-icon"></div>
</div>
<div class="playpause" title="Play/Pause">
<div class="play" style="display: none;"></div>
<div class="busy" style="display: none;"></div>
<div class="pause" style=""></div>
</div>
<div class="next" title="Next song">
<div class="arrowbutton next-icon"></div>
</div>
<div class="nextalbum" title="Next album">
<div class="arrowbutton nextalbum-icon"></div>
</div>
</div>
<div class="durationDisplay"><span class="current">-</span>/<span class="total">-</span></div>
<a class="downloadlink" title="Download mp3">
⭳
</a>
<br class="clb">
</div>
</div>
<div class="col col35">
<ol class="playlist"></ol>
</div>
<div class="col col15 colcontrols colvolumecontrols">
<div class="vol">
<div class="vol-icon-wrapper" title="Mute">
🔊
</div>
<div class="vol-slider">
<div class="vol-amt" style="width: 100%;"></div>
<div class="vol-bg"></div>
</div>
</div>
<div class="collect">
<div class="collect-wishlist">
<a class="wishlist-default" href="https://bandcamp.com/wishlist">Wishlist</a>
<span class="wishlist-add" title="Add this album to your wishlist">
<span class="bc-ui2 icon add-item-icon"></span>
<span class="add-item-label">Add to wishlist</span>
</span>
<span class="wishlist-collected" title="Remove this album from your wishlist">
<span class="bc-ui2 icon collected-item-icon"></span>
<span>In Wishlist</span>
</span>
<span class="wishlist-own" title="You own this album">
<span class="bc-ui2 icon own-item-icon"></span>
<span>You own this</span>
</span>
<span class="wishlist-saving">
Saving....
</span>
</div>
<div class="collect-listened">
<a class="listened-default" href="${listenedListUrl}">
Played albums
</a>
<span class="listened" title="Mark album as NOT played">
<span class="listened-symbol">${checkSymbol}</span>
<span class="listened-label">Played</span>
</span>
<span class="mark-listened" title="Mark album as played">
<span class="mark-listened-symbol">${checkSymbol}</span>
<span class="mark-listened-label">Mark as played</span>
</span>
<span class="listened-saving">
Saving...
</span>
</div>
</div>
<br class="cll">
<div class="minimizebutton">
<span class="minimized" title="Maximize player">↑</span>
<span class="maximized" title="Minimize player">↓</span>
</div>
<div class="closebutton" title="Close player">x</div>
</div>`
document.head.appendChild(document.createElement('style')).innerHTML = `
.cll{
clear:left;
}
.clb{
clear:both;
}
#discographyplayer{
z-index:1010;
position:fixed;
bottom:0px;
height:83px;
width:100%;
padding-top:3px;
background:white;
color:#505958;
border-top: 1px solid rgba(0,0,0,0.15);
font: 13px/1.231 "Helvetica Neue",Helvetica,Arial,sans-serif;
transition: bottom 500ms
}
#discographyplayer a:link,#discographyplayer a:visited{
color: #0687f5;
text-decoration: none;
cursor: pointer;
}
#discographyplayer a:hover {
color: #0687f5;
text-decoration: underline;
cursor: pointer;
}
#discographyplayer .nowPlaying .info,#discographyplayer .nowPlaying .cover {
display: inline-block;
vertical-align: top;
}
#discographyplayer .nowPlaying img {
width: 60px;
height: 60px;
margin-top: 4px;
margin-left: 4px;
margin-bottom: 4px;
}
#discographyplayer .nowPlaying .info {
line-height: 18px;
margin-left: 8px;
margin-top: 8px;
max-width: calc(100% - 76px);
border: 0px solid black;
padding: 0px;
width: auto;
max-height: auto;
overflow-y: hidden;
}
#discographyplayer .nowPlaying .info .title, #discographyplayer .nowPlaying .info .album {
font-size: 13px;
font-weight: normal;
color: #0687f5;
margin:0;
padding:0;
}
#discographyplayer .currentlyPlaying{
display:inline-block;
vertical-align: top;
overflow: hidden;
transition: margin-left 3s ease-in-out;
width:99%;
}
#discographyplayer .nextInRow {
display:inline-block;
vertical-align: top;
width:0%;
overflow: hidden;
transition: width 6s ease-in-out;
}
#discographyplayer .durationDisplay{
margin-top:24px;
float:left;
}
#discographyplayer .downloadlink:link{
display:block;
float:right;
margin-top: 10px;
font-size:15px;
padding: 0px 3px;
color: rgb(6, 135, 245);
border:1px solid rgb(6, 135, 245);
transition: color 300ms ease-in-out, border-color 300ms ease-in-out;
}
#discographyplayer .downloadlink:hover{
text-decoration:none
}
#discographyplayer .downloadlink.downloading{
color:#f0f;
border-color:#f0f;
animation: downloadrotation 3s infinite linear;
cursor:wait;
}
@keyframes downloadrotation {
from {transform: rotate(0deg)}
to {transform: rotate(359deg)}
}
#discographyplayer .controls{
margin-top: 10px;
width: auto;
float:left;
}
#discographyplayer .controls > *{
display:inline-block;
cursor: pointer;
border: 1px solid #d9d9d9;
padding: 11px;
margin-right: 4px;
height: 18px;
width: 17px;
}
#discographyplayer .playpause .play {
width: 0;
height: 0;
border-top: 9px inset transparent;
border-bottom: 9px inset transparent;
border-left: 15px solid rgb(34, 34, 34);
cursor: pointer;
margin-left: 2px;
}
#discographyplayer .playpause .pause {
border: 0;
border-left: 5px solid #2d2d2d;
border-right: 5px solid #2d2d2d;
height: 18px;
width: 4px;
margin-right: 2px;
margin-left: 1px;
}
#discographyplayer .playpause .busy {
background-image: url(https://bandcamp.com/img/playerbusy-noborder.gif);
background-position: 50% 50%;
background-repeat: no-repeat;
border: none;
height: 30px;
margin: 0px 0px 0px -3px;
width: 25px;
overflow: hidden;
background-size: contain;
}
#discographyplayer .arrowbutton {
border: 0;
height: 13px;
width: 20px;
margin-top: 4px;
background: url(https://bandcamp.com/img/nextprev.png) 0px 0px / 40px 12px no-repeat transparent;
background-position-x: 0px;
cursor: pointer;
}
#discographyplayer .arrowbutton.next-icon {
background-position: 100% 0px;
}
#discographyplayer .arrowbutton.prev-icon {
}
#discographyplayer .arrowbutton.prevalbum-icon {
border-right: 3px solid #2d2d2d;
}
#discographyplayer .arrowbutton.nextalbum-icon {
background-position: 100% 0px;
border-left: 3px solid #2d2d2d;
}
#timeline{
width: 100%;
background: rgba(50,50,50,0.4);
margin-top:5px;
border-left:1px solid black;
border-right:1px solid black;
}
#playhead{
width:10px;
height:10px;
border-radius: 50%;
background:rgba(50,50,50,1.0);;
cursor:pointer;
}
.bufferbaranimation{
transition: width 1s;
}
#bufferbar{
position:absolute;
width:0px;
height:10px;
background:rgba(0,0,0,0.1);
}
#discographyplayer .playlist{
width:100%;
display:inline-block;
max-height:80px;
overflow:auto;
list-style:none;
margin:0px;
padding: 0px 5px 0px 5px;
scrollbar-color: rgba(50,50,50,0.4) white;
}
#discographyplayer .playlist .playlistentry {
cursor:pointer;
margin:1px 0px
}
#discographyplayer .playlist .playlistentry .duration {
float:right
}
#discographyplayer .playlist .playing{
background:#619aa950
}
#discographyplayer .playlist .playlistheading{
background:rgba(50,50,50,0.4);
margin:3px 0px
}
#discographyplayer .playlist .playlistheading a:link,#discographyplayer .playlist .playlistheading a:hover,#discographyplayer .playlist .playlistheading a:visited{
color:#EEE;
cursor:pointer
}
#discographyplayer .playlist .playlistheading a.notloaded{
color:#CCC
}
#discographyplayer .playlist .playlistheading.notloaded{
cursor:copy
}
#discographyplayer .vol{
float:left;
position: relative;
width: 100px;
margin-left: 1em;
margin-top: 1em;
}
#discographyplayer .vol-icon-wrapper{
font-size: 20px;
cursor: pointer;
width:27px;
}
#discographyplayer .vol-slider {
width: 60px;
height: 10px;
position: relative;
cursor: pointer;
}
#discographyplayer .vol > * {
display: inline-block;
vertical-align: middle;
}
#discographyplayer .vol-bg {
background: rgba(50, 50, 50, 0.4);
width: 100%;
margin-top: 4px;
height: 3px;
position: absolute;
}
#discographyplayer .vol-amt {
margin-top: 4px;
height: 3px;
position: absolute;
background: rgba(50, 50, 50, 1);
}
#discographyplayer .vol-control-outer {
height: 100%;
position: relative;
margin-left: -3px;
margin-right: 5px;
}
#discographyplayer .collect{
float:left;
margin-left: 1em;
}
#discographyplayer .collect-wishlist {
cursor:default;
margin-top:0.5em;
}
#discographyplayer .collect-wishlist .wishlist-add {
cursor:pointer;
}
#discographyplayer .collect-listened {
cursor:pointer;
margin-top:0.5em;
margin-left: 2px;
}
#discographyplayer .collect .icon{
height: 13px;
width: 14px;
display: inline-block;
position: relative;
top: 2px;
}
#discographyplayer .collect .add-item-icon{
background-position: 0px -73px;
}
#discographyplayer .collect .collected-item-icon{
background-position: -28px -73px;
}
#discographyplayer .collect .own-item-icon{
background-position: -42px -73px;
}
#discographyplayer .collect .wishlist-add,#discographyplayer .collect .wishlist-collected,#discographyplayer .collect .wishlist-own,#discographyplayer .collect .wishlist-saving{
display:none;
}
#discographyplayer .collect .wishlist-add:hover .add-item-icon{
background-position: -56px -73px;
}
#discographyplayer .collect .wishlist-add:hover .add-item-label{
text-decoration:underline;
}
#discographyplayer .collect .listened,#discographyplayer .collect .mark-listened, #discographyplayer .collect .listened-saving{
display:none;
}
#discographyplayer .collect .listened .listened-symbol{
color:rgb(0,220,50);
text-shadow:1px 0px #DDD,-1px 0px #DDD,0px -1px #DDD,0px 1px #DDD
}
#discographyplayer .collect .mark-listened .mark-listened-symbol{
color:#FFF;
text-shadow:1px 0px #959595,-1px 0px #959595,0px -1px #959595,0px 1px #959595
}
#discographyplayer .collect .mark-listened:hover .mark-listened-symbol{
text-shadow:1px 0px #0AF,-1px 0px #0AF,0px -1px #0AF,0px 1px #0AF
}
#discographyplayer .collect .mark-listened:hover .mark-listened-label {
text-decoration:underline;
}
#discographyplayer .closebutton,#discographyplayer .minimizebutton {
position: absolute;
top: 1px;
right: 1px;
border: 1px solid #505958;
color: #505958;
font-size: 10px;
box-shadow: 0px 0px 2px #505958;
cursor: pointer;
opacity:0.0;
transition: opacity 300ms;
min-width:8px;
min-height:13px;
text-align:center;
}
#discographyplayer .minimizebutton {
right:13px;
}
#discographyplayer .minimizebutton .minimized {
display:none
}
#discographyplayer .minimizebutton.minimized .maximized {
display:none
}
#discographyplayer .minimizebutton.minimized .minimized {
display:inline
}
#discographyplayer:hover .closebutton, #discographyplayer:hover .minimizebutton {
opacity:1.0
}
#discographyplayer .col {
float: left;
min-height: 1px;
position: relative;
}
#discographyplayer .col25 {
width: 25%;
}
#discographyplayer .col35 {
width: 35%;
}
#discographyplayer .col30 {
width: 30%;
}
#discographyplayer .col15 {
width: 14%;
}
#discographyplayer .col20 {
width: 20%;
}
#discographyplayer .colcontrols {
user-select: none
}
#discographyplayer .colvolumecontrols {
margin-left:10px
}
.albumIsCurrentlyPlaying {
border:2px solid lime
}
.music-grid-item .albumIsCurrentlyPlaying {
border:none
}
.albumIsCurrentlyPlayingIndicator {
display:none;
}
.music-grid-item .albumIsCurrentlyPlayingIndicator {
position: absolute;
display:block;
width: 74px;
height: 54px;
left: 50%;
top: 50%;
margin-left: -36px;
margin-top: -27px;
opacity: 0.5;
transition: opacity 0.2s;
}
.albumIsCurrentlyPlayingIndicator:hover {
opacity: 0.0;
}
.albumIsCurrentlyPlayingIndicator .currentlyPlayingBg {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background: #000;
border-radius: 4px;
}
.albumIsCurrentlyPlayingIndicator .currentlyPlayingIcon {
position: absolute;
width: 10px;
height: 20px;
left: 28px;
top: 17px;
border-width: 0px 5px;
border-color: #fff;
border-style: solid;
}
`
audio = player.querySelector('audio')
addLogVolume(audio)
getStoredVolume(function setVolumeCallback (volume) { audio.logVolume = volume })
playhead = player.querySelector('#playhead')
bufferbar = player.querySelector('#bufferbar')
timeline = player.querySelector('#timeline')
player.querySelector('.minimizebutton').addEventListener('click', musicPlayerToggleMinimize)
player.querySelector('.closebutton').addEventListener('click', musicPlayerClose)
audio.addEventListener('ended', musicPlayerOnEnded)
audio.addEventListener('timeupdate', musicPlayerOnTimeUpdate)
audio.addEventListener('volumechange', musicPlayerOnVolumeChanged)
audio.addEventListener('canplaythrough', function onCanPlayThrough () {
currentDuration = audio.duration
player.querySelector('.durationDisplay .total').innerHTML = humanDuration(currentDuration)
})
timeline.addEventListener('click', musicPlayerOnTimelineClick, false)
playhead.addEventListener('mousedown', musicPlayerOnPlayheadMouseDown, false)
window.addEventListener('mouseup', musicPlayerOnPlayheadMouseUp, false)
player.querySelector('.prevalbum').addEventListener('click', musicPlayerPrevAlbum)
player.querySelector('.prev').addEventListener('click', musicPlayerPrev)
player.querySelector('.playpause').addEventListener('click', musicPlayerPlay)
player.querySelector('.next').addEventListener('click', musicPlayerNext)
player.querySelector('.nextalbum').addEventListener('click', musicPlayerNextAlbum)
player.querySelector('.vol-slider').addEventListener('click', musicPlayerOnVolumeClick)
player.querySelector('.vol').addEventListener('wheel', musicPlayerOnVolumeWheel, false)
player.querySelector('.vol-icon-wrapper').addEventListener('click', musicPlayerOnMuteClick)
player.querySelector('.collect-wishlist').addEventListener('click', musicPlayerCollectWishlistClick)
player.querySelector('.collect-listened').addEventListener('click', musicPlayerCollectListenedClick)
player.querySelector('.downloadlink').addEventListener('click', function onDownloadLinkClick (ev) {
const addSpinner = (el) => el.classList.add('downloading')
const removeSpinner = (el) => el.classList.remove('downloading')
downloadMp3FromLink(ev, this, addSpinner, removeSpinner)
})
if (NOEMOJI) {
player.querySelector('.downloadlink').innerHTML = '↓'
}
window.addEventListener('unload', function onPageUnLoad (ev) {
if (allFeatures.discographyplayerPersist.enabled && player.style.display !== 'none' && !audio.paused) {
addAllAlbumsAsHeadings()
musicPlayerSaveState()
}
})
window.setInterval(musicPlayerUpdateBufferBar, 1200)
}
function addHeadingToPlaylist (title, url, albumLoaded) {
musicPlayerCreate()
let content = document.createTextNode('💽 ' + title)
if (url) {
const a = document.createElement('a')
a.href = url
a.target = '_blank'
a.appendChild(content)
content = a
a.className = albumLoaded ? 'loaded' : 'notloaded'
a.title = 'Open album page'
}
const li = document.createElement('li')
li.appendChild(content)
li.className = 'playlistheading'
if (!albumLoaded) {
li.className += ' notloaded'
li.title = 'Load album into playlist'
}
li.addEventListener('click', musicPlayerOnPlaylistHeadingClick)
player.querySelector('.playlist').appendChild(li)
}
function addToPlaylist (startPlayback, data) {
musicPlayerCreate()
const li = document.createElement('li')
li.appendChild(document.createTextNode((data.trackNumber > 9 ? '' : '0') + data.trackNumber + '. ' + data.artist + ' - ' + data.title))
const span = document.createElement('span')
span.className = 'duration'
span.appendChild(document.createTextNode(humanDuration(data.duration)))
li.appendChild(span)
li.value = data.trackNumber
li.dataset.file = data.file
li.dataset.title = data.title
li.dataset.trackNumber = data.trackNumber
li.dataset.duration = data.duration
li.dataset.artist = data.artist
li.dataset.album = data.album
li.dataset.albumUrl = data.albumUrl
li.dataset.albumCover = data.albumCover
li.dataset.inWishlist = data.inWishlist
li.dataset.isPurchased = data.isPurchased
li.addEventListener('click', musicPlayerOnPlaylistClick)
li.className = 'playlistentry'
player.querySelector('.playlist').appendChild(li)
if (startPlayback) {
player.querySelectorAll('.playlist .playing').forEach(function (el) {
el.classList.remove('playing')
})
li.classList.add('playing')
musicPlayerPlaySong(li)
window.setTimeout(() => player.querySelector('.playlist .playing').scrollIntoView({ block: 'nearest' }), 200)
}
}
function addAlbumToPlaylist (TralbumData, startPlaybackIndex) {
let i = 0
const artist = TralbumData.artist
const album = TralbumData.current.title
const albumUrl = document.location.protocol + '//' + albumKey(TralbumData.url)
const albumCover = `https://f4.bcbits.com/img/a${TralbumData.art_id}_2.jpg`
addHeadingToPlaylist(album, 'url' in TralbumData ? TralbumData.url : false, true)
let streamable = 0
for (const key in TralbumData.trackinfo) {
const track = TralbumData.trackinfo[key]
if (!track.file) {
continue
}
const trackNumber = track.track_num
const file = track.file[Object.keys(track.file)[0]]
const title = track.title
const duration = track.duration
const inWishlist = 'tralbum_collect_info' in TralbumData && 'is_collected' in TralbumData.tralbum_collect_info && TralbumData.tralbum_collect_info.is_collected
const isPurchased = 'tralbum_collect_info' in TralbumData && 'is_purchased' in TralbumData.tralbum_collect_info && TralbumData.tralbum_collect_info.is_purchased
addToPlaylist(startPlaybackIndex === i++, {
file: file,
title: title,
trackNumber: trackNumber,
duration: duration,
artist: artist,
album: album,
albumUrl: albumUrl,
albumCover: albumCover,
inWishlist: inWishlist,
isPurchased: isPurchased
})
streamable++
}
if (streamable === 0) {
const li = document.createElement('li')
li.appendChild(document.createTextNode((NOEMOJI ? '\u27C1' : '\uD83D\uDE22') + ' Album is not streamable'))
player.querySelector('.playlist').appendChild(li)
}
player.querySelectorAll('.playlist .playlistheading a.notloaded').forEach(function (el) {
// Move unloaded items to the end
el.parentNode.parentNode.appendChild(el.parentNode)
})
}
function addAllAlbumsAsHeadings () {
const as = document.querySelectorAll('.music-grid .music-grid-item a[href*="/album/"],.music-grid .music-grid-item a[href*="/track/"]')
const lis = player.querySelectorAll('.playlist .playlistentry')
const isAlreadyInPlaylist = function (url) {
for (let i = 0; i < lis.length; i++) {
if (albumKey(lis[i].dataset.albumUrl) === albumKey(url)) {
return true
}
}
return false
}
for (let i = 0; i < as.length; i++) {
const url = as[i].href
// Check if already in playlist
if (!isAlreadyInPlaylist(url)) {
const title = ('textContent' in as[i].dataset ? as[i].dataset.textContent : as[i].querySelector('.title').textContent).trim()
addHeadingToPlaylist(title, url, false)
}
}
}
function getTralbumData (url, cb) {
return new Promise(function getTralbumDataPromise (resolve, reject) {
GM.xmlHttpRequest({
method: 'GET',
url: url,
onload: function getTralbumDataOnLoad (response) {
if (!response.responseText || response.responseText.indexOf('400 Bad Request') !== -1) {
let msg = ''
try {
msg = response.responseText.split('<center>')[1].split('</center>')[0]
} catch (e) {
msg = response.responseText
}
window.alert('An error occured. Please clear your cookies of bandcamp.com and try again.\n\nOriginal error:\n' + msg)
reject(response)
return
}
const TralbumData = JSON5.parse(response.responseText.split('var TralbumData =')[1].split('\n};\n')[0].replace(/"\s+\+\s+"/, '') + '\n}')
correctTralbumData(TralbumData)
resolve(TralbumData)
},
onerror: function getTralbumDataOnError (response) {
console.log('getTralbumData(' + url + ') Error: ' + response.status + '\nResponse:\n' + response.responseText)
reject(response)
}
})
})
}
function correctTralbumData (TralbumData) {
// Corrections for single tracks
if (TralbumData.current.type === 'track' && TralbumData.current.title.toLowerCase().indexOf('single') === -1) {
TralbumData.current.title += ' - Single'
}
for (let i = 0; i < TralbumData.trackinfo.length; i++) {
if (TralbumData.trackinfo[i].track_num === null) {
TralbumData.trackinfo[i].track_num = i + 1
}
}
return TralbumData
}
function albumKey (url) {
if (url.startsWith('/')) {
url = document.location.hostname + url
}
if (url.indexOf('://') !== -1) {
url = url.split('://')[1]
}
if (url.indexOf('#') !== -1) {
url = url.split('#')[0]
}
if (url.indexOf('?') !== -1) {
url = url.split('?')[0]
}
return url
}
function albumPath (url) {
if (url.startsWith('/')) {
return albumKey(url)
}
const a = document.createElement('a')
a.href = url
return a.pathname
}
async function storeTralbumData (TralbumData) {
const expires = TRALBUM_CACHE_HOURS * 3600000
const cache = JSON.parse(await GM.getValue('tralbumdata', '{}'))
for (const prop in cache) {
// Delete cached values, that are older than 2 hours
if ((new Date()).getTime() - (new Date(cache[prop].time)).getTime() > expires) {
delete cache[prop]
}
}
TralbumData.time = (new Date()).toJSON()
cache[albumKey(TralbumData.url)] = TralbumData
await GM.setValue('tralbumdata', JSON.stringify(cache))
}
async function cachedTralbumData (url) {
const expires = TRALBUM_CACHE_HOURS * 3600000
const key = albumKey(url)
const cache = JSON.parse(await GM.getValue('tralbumdata', '{}'))
for (const prop in cache) {
// Delete cached values, that are older than 2 hours
if ((new Date()).getTime() - (new Date(cache[prop].time)).getTime() > expires) {
delete cache[prop]
continue
}
if (prop === key) {
return cache[prop]
}
}
return false
}
function playAlbumFromCover (ev) {
let parent = this
for (let j = 0; parent.tagName !== 'A' && j < 20; j++) {
parent = parent.parentNode
}
const url = parent.href
parent.querySelector('img')
parent.classList.add('discographyplayer_currentalbum')
// Check if already in playlist
if (player) {
musicPlayerCreate()
const lis = player.querySelectorAll('.playlist .playlistentry')
for (let i = 0; i < lis.length; i++) {
if (albumKey(lis[i].dataset.albumUrl) === albumKey(url)) {
lis[i].click()
return
}
}
}
// Load data
cachedTralbumData(url).then(function onCachedTralbumDataLoaded (TralbumData) {
if (TralbumData) {
addAlbumToPlaylist(TralbumData, 0)
} else {
playAlbumFromUrl(url)
}
})
}
function playAlbumFromUrl (url) {
getTralbumData(url).then(function onGetTralbumDataLoaded (TralbumData) {
storeTralbumData(TralbumData)
addAlbumToPlaylist(TralbumData, 0)
}).catch(function onGetTralbumDataError (e) {
window.alert('Could not load album data from url:\n' + url + '\n' + e)
})
}
async function myAlbumsGetAlbum (url) {
const key = albumKey(url)
const data = JSON.parse(await GM.getValue('myalbums', '{}'))
if (key in data) {
return data[key]
} else {
return false
}
}
async function myAlbumsUpdateAlbum (albumData) {
const key = albumKey(albumData.url)
const data = JSON.parse(await GM.getValue('myalbums', '{}'))
if (key in data) {
data[key] = Object.assign(data[key], albumData)
} else {
data[key] = albumData
}
await GM.setValue('myalbums', JSON.stringify(data))
}
async function myAlbumsNewFromUrl (url, fallback) {
// Get data from cache or load from url
url = albumKey(url)
const albumData = fallback || {}
let TralbumData = await cachedTralbumData(url)
if (!TralbumData) {
try {
TralbumData = await getTralbumData(document.location.protocol + '//' + url)
} catch (e) {
console.log('myAlbumsNewFromUrl() Could not load album data from url:\n' + url)
}
if (TralbumData) {
storeTralbumData(TralbumData)
}
}
if (TralbumData) {
albumData.artist = TralbumData.artist
albumData.title = TralbumData.current.title
albumData.albumCover = `https://f4.bcbits.com/img/a${TralbumData.art_id}_2.jpg`
albumData.releaseDate = TralbumData.current.release_date
}
albumData.url = url
albumData.listened = false
return albumData
}
function makeAlbumCoversGreat () {
if (!('makeAlbumCoversGreat' in document.head.dataset)) {
document.head.dataset.makeAlbumCoversGreat = true
const campExplorerCSS = `
.music-grid-item {
position: relative
}
.music-grid-item .art-play {
margin-top: -50px;
}
`
document.head.appendChild(document.createElement('style')).innerHTML = `
.music-grid-item .art-play {
position: absolute;
width: 74px;
height: 54px;
left: 50%;
top: 50%;
margin-left: -36px;
margin-top: -27px;
opacity: 0;
transition: opacity 0.2s;
}
.music-grid-item .art-play-bg {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background: #000;
border-radius: 4px;
}
.music-grid-item .art-play-icon {
position: absolute;
width: 0;
height: 0;
left: 28px;
top: 17px;
border-width: 10px 0 10px 17px;
border-color: transparent transparent transparent #fff;
border-style: dashed dashed dashed solid;
}
.music-grid-item:hover .art-play {
opacity: 0.6;
}
${CAMPEXPLORER ? campExplorerCSS : ''}
`
}
const onclick = function onclick (ev) {
ev.preventDefault()
playAlbumFromCover.apply(this, ev)
}
const artPlay = document.createElement('div')
artPlay.className = 'art-play'
artPlay.innerHTML = '<div class="art-play-bg"></div><div class="art-play-icon"></div>'
if (CAMPEXPLORER) {
document.querySelectorAll('ul.albums').forEach(e => e.classList.add('music-grid'))
document.querySelectorAll('ul.albums li.album').forEach(e => e.classList.add('music-grid-item'))
}
// Albums and single tracks
const imgs = document.querySelectorAll('.music-grid .music-grid-item a[href*="/album/"] img,.music-grid .music-grid-item a[href*="/track/"] img')
for (let i = 0; i < imgs.length; i++) {
if (imgs[i].parentNode.getElementsByClassName('art-play').length) {
continue
}
imgs[i].addEventListener('click', onclick)
// Add play overlay
const clone = artPlay.cloneNode(true)
clone.addEventListener('click', onclick)
imgs[i].parentNode.appendChild(clone)
}
}
async function makeAlbumLinksGreat (parentElement) {
const doc = parentElement || document
const myalbums = JSON.parse(await GM.getValue('myalbums', '{}'))
if (!('makeAlbumLinksGreat' in document.head.dataset)) {
document.head.dataset.makeAlbumLinksGreat = true
document.head.appendChild(document.createElement('style')).innerHTML = `
.bdp_check_onlinkhover_container { z-index:1002; position:absolute; display:none }
.bdp_check_onlinkhover_container_shown { display:block; background-color:rgba(255,255,255,0.9); padding:0px 2px 0px 0px; border-radius:5px }
.bdp_check_onlinkhover_container:hover { position:absolute; transition: all 300ms linear; background-color:rgba(255,255,255,0.9); padding:0px 10px 0px 7px; border-radius:5px }
.bdp_check_onchecked_container { z-index:-1; position:absolute; opacity:0.0; margin-top:-2px}
a:hover .bdp_check_onchecked_container { z-index:1002; position:absolute; transition: opacity 300ms linear; opacity:1.0}
.bdp_check_onlinkhover_symbol {color:rgba(0,0,50,0.7)}
.bdp_check_onlinkhover_text {color:rgba(0,0,50,0.7)}
.bdp_check_onlinkhover_container:hover .bdp_check_onlinkhover_symbol { color:rgba(0,0,100,1.0) }
.bdp_check_onlinkhover_container:hover .bdp_check_onlinkhover_text { color:rgba(0,100,0,1.0)}
.bdp_check_onchecked_symbol { color:rgba(0,100,0,0.8) }
.bdp_check_onchecked_text { color:rgba(150,200,150,0.8) }
a:hover .bdp_check_onchecked_symbol { text-shadow: 1px 1px #fff; color:rgba(0,50,0,1.0); transition: all 300ms linear }
a:hover .bdp_check_onchecked_text { text-shadow: 1px 1px #000; color:rgba(200,255,200,0.8); transition: all 300ms linear }
`
}
const excluded = [...document.querySelectorAll('#carousel-player .now-playing a')]
excluded.push(...document.querySelectorAll('#discographyplayer a'))
excluded.push(...document.querySelectorAll('#pastreleases a'))
/*
<div class="bdp_check_container bdp_check_onlinkhover_container"><span class="bdp_check_onlinkhover_symbol">\u2610</span> <span class="bdp_check_onlinkhover_text">Check</span></div>
<div class="bdp_check_container bdp_check_onlinkhover_container"><span class="bdp_check_onlinkhover_symbol">\u1f5f9</span> <span class="bdp_check_onlinkhover_text">Check</span></div>
<span class="bdp_check_onchecked_symbol">\u2611</span> TITLE <div class="bdp_check_container bdp_check_onchecked_container"><span class="bdp_check_onchecked_text">Played</span></div>
*/
const onClickSetListened = async function onClickSetListenedAsync (ev) {
ev.preventDefault()
let parent = this
for (let j = 0; parent.tagName !== 'A' && j < 20; j++) {
parent = parent.parentNode
}
setTimeout(function showSavingLabel () {
parent.style.cursor = 'wait'
parent.querySelector('.bdp_check_container').innerHTML = 'Saving...'
}, 0)
const url = parent.href
let albumData = await myAlbumsGetAlbum(url)
if (!albumData) {
albumData = await myAlbumsNewFromUrl(url, { title: this.dataset.textContent })
}
albumData.listened = (new Date()).toJSON()
await myAlbumsUpdateAlbum(albumData)
makeAlbumLinksGreat()
parent.style.cursor = ''
}
const onClickRemoveListened = async function onClickRemoveListenedAsync (ev) {
ev.preventDefault()
let parent = this
for (let j = 0; parent.tagName !== 'A' && j < 20; j++) {
parent = parent.parentNode
}
setTimeout(function showSavingLabel () {
parent.style.cursor = 'wait'
parent.querySelector('.bdp_check_container').innerHTML = 'Saving...'
}, 0)
const url = parent.href
const albumData = await myAlbumsGetAlbum(url)
if (albumData) {
albumData.listened = false
await myAlbumsUpdateAlbum(albumData)
}
makeAlbumLinksGreat()
parent.style.cursor = ''
}
const mouseOverLink = function onMouseOverLink (ev) {
const bdpCheckOnlinkhoverContainer = this.querySelector('.bdp_check_onlinkhover_container')
if (bdpCheckOnlinkhoverContainer) {
bdpCheckOnlinkhoverContainer.classList.add('bdp_check_onlinkhover_container_shown')
}
}
const mouseOutLink = function onMouseOutLink (ev) {
const a = this
a.dataset.iv = setTimeout(function mouseOutLinkTimeout () {
const div = a.querySelector('.bdp_check_onlinkhover_container')
if (div) {
div.classList.remove('bdp_check_onlinkhover_container_shown')
div.dataset.iv = a.dataset.iv
}
}, 1000)
}
const mouseMoveLink = function onMouseLoveLink (ev) {
if ('iv' in this.dataset) {
window.clearTimeout(this.dataset.iv)
}
}
const mouseOverDivCheck = function onMouseOverDivCheck (ev) {
const bdpCheckOnlinkhoverSymbol = this.querySelector('.bdp_check_onlinkhover_symbol')
if (bdpCheckOnlinkhoverSymbol) {
bdpCheckOnlinkhoverSymbol.innerText = NOEMOJI ? '\u2611' : '\uD83D\uDDF9'
}
if ('iv' in this.dataset) {
window.clearTimeout(this.dataset.iv)
}
}
const mouseOutDivCheck = function onMouseOutDivCheck (ev) {
const bdpCheckOnlinkhoverSymbol = this.querySelector('.bdp_check_onlinkhover_symbol')
if (bdpCheckOnlinkhoverSymbol) {
bdpCheckOnlinkhoverSymbol.innerText = '\u2610'
}
}
const divCheck = document.createElement('div')
divCheck.setAttribute('class', 'bdp_check_container bdp_check_onlinkhover_container')
divCheck.setAttribute('title', 'Mark as played')
divCheck.innerHTML = '<span class="bdp_check_onlinkhover_symbol">\u2610</span> <span class="bdp_check_onlinkhover_text">Check</span>'
const divChecked = document.createElement('div')
divChecked.setAttribute('class', 'bdp_check_container bdp_check_onchecked_container')
divChecked.innerHTML = '<span class="bdp_check_onchecked_text">Played</span>'
const spanChecked = document.createElement('span')
spanChecked.appendChild(document.createTextNode('\u2611 '))
spanChecked.setAttribute('class', 'bdp_check_onchecked_symbol')
const a = doc.querySelectorAll('a[href*="/album/"],.music-grid .music-grid-item a[href*="/track/"]')
let lastKey = ''
for (let i = 0; i < a.length; i++) {
if (excluded.indexOf(a[i]) !== -1) {
continue
}
const key = albumKey(a[i].href)
if (key === lastKey) {
// Skip multiple consequent links to same album
continue
}
const textContent = a[i].textContent.trim()
if (!textContent) {
// Skip album covers only
continue
}
let div
if (a[i].dataset.textContent) {
removeViaQuerySelector(a[i], '.bdp_check_onlinkhover_container')
removeViaQuerySelector(a[i], '.bdp_check_onchecked_container')
removeViaQuerySelector(a[i], '.bdp_check_onchecked_symbol')
} else {
a[i].dataset.textContent = textContent
a[i].addEventListener('mouseover', mouseOverLink)
a[i].addEventListener('mousemove', mouseMoveLink)
a[i].addEventListener('mouseout', mouseOutLink)
}
if (key in myalbums && 'listened' in myalbums[key] && myalbums[key].listened) {
div = divChecked.cloneNode(true)
div.addEventListener('click', onClickRemoveListened)
const date = new Date(myalbums[key].listened)
const since = timeSince(date)
const dateStr = dateFormater(date)
div.title = since + ' ago\nClick to mark as NOT played'
div.querySelector('.bdp_check_onchecked_text').appendChild(document.createTextNode(' ' + dateStr))
const span = spanChecked.cloneNode(true)
span.title = since + ' ago\nClick to mark as NOT played'
span.addEventListener('click', onClickRemoveListened)
const firstText = firstChildWithText(a[i]) || a[i].firstChild
firstText.parentNode.insertBefore(span, firstText)
} else {
div = divCheck.cloneNode(true)
div.addEventListener('mouseover', mouseOverDivCheck)
div.addEventListener('mouseout', mouseOutDivCheck)
div.addEventListener('click', onClickSetListened)
}
a[i].appendChild(div)
lastKey = key
}
}
function removeTheTimeHasComeToOpenThyHeartWallet () {
if ('theTimeHasComeToOpenThyHeartWallet' in document.head.dataset) {
return
}
document.head.dataset.theTimeHasComeToOpenThyHeartWallet = true
document.head.appendChild(document.createElement('script')).innerHTML = `
function removeViaQuerySelector (parent, selector) {
if (typeof selector === 'undefined') {
selector = parent
parent = document
}
for (let el = parent.querySelector(selector); el; el = parent.querySelector(selector)) {
el.remove()
}
}
if (TralbumData.play_cap_data) {
TralbumData.play_cap_data.streaming_limit = 100
TralbumData.play_cap_data.streaming_limits_enabled = false
}
for(let i = 0; i < TralbumData.trackinfo.length; i++) {
TralbumData.trackinfo[i].is_capped = false
TralbumData.trackinfo[i].play_count = 1
}
/* // Alternative would be create new player
TralbumLimits.onPlayerInit = () => true
TralbumLimits.updatePlayCounts = () => true
Player.init(TralbumData, AlbumPage.onPlayerInit);
*/
Player.update(TralbumData)
// Hide popup (not really needed, but won't hurt)
window.setInterval(function() {
if(document.getElementById('play-limits-dialog-cancel-btn')) {
document.getElementById('play-limits-dialog-cancel-btn').click()
window.setTimeout(function() {
removeViaQuerySelector(document, '.ui-dialog.ui-widget')
removeViaQuerySelector(document, '.ui-widget-overlay')
}, 100)
}
}, 3000)
`
}
function makeCarouselPlayerGreatAgain () {
if (player) {
// Hide/minimize discography player
const closePlayerOnCarouselIv = window.setInterval(function closePlayerOnCarouselInterval () {
if (!document.getElementById('carousel-player') || document.getElementById('carousel-player').getClientRects()[0].bottom - window.innerHeight > 0) {
return
}
if (player.style.display === 'none') {
// Put carousel player back down in normal position, because discography player is hidden forever
document.getElementById('carousel-player').style.bottom = '0px'
window.clearInterval(closePlayerOnCarouselIv)
} else if (!player.style.bottom) {
// Minimize discography player and push carousel player up above the minimized player
musicPlayerToggleMinimize.call(player.querySelector('.minimizebutton'), null, true)
document.getElementById('carousel-player').style.bottom = (player.clientHeight - 57) + 'px'
}
}, 5000)
}
let addListenedButtonToCarouselPlayerLast = null
const addListenedButtonToCarouselPlayer = function listenedButtonOnCarouselPlayer () {
const url = document.querySelector('#carousel-player a[href]') ? albumKey(document.querySelector('#carousel-player a[href]').href) : null
if (url && addListenedButtonToCarouselPlayerLast === url) {
return
}
if (!url) {
console.log('No url found in carousel player: `#carousel-player a[href]`')
return
}
addListenedButtonToCarouselPlayerLast = url
removeViaQuerySelector('#carousel-player .carousellistenedstatus')
const a = document.createElement('a')
a.className = 'carousellistenedstatus'
a.addEventListener('click', ev => ev.preventDefault())
document.querySelector('#carousel-player .controls-extra').insertBefore(a, document.querySelector('#carousel-player .controls-extra').firstChild)
a.innerHTML = '<span class="listenedstatus">Loading...</span>'
a.href = 'https://' + url
makeAlbumLinksGreat(a.parentNode).then(function () {
removeViaQuerySelector(a, '.listenedstatus')
const span = document.createElement('span')
span.addEventListener('click', function () {
const span = this
span.parentNode.querySelector('.bdp_check_container').click()
window.setTimeout(function () {
if (span.parentNode.querySelector('.bdp_check_container').textContent.indexOf('Played') !== -1) {
span.parentNode.innerHTML = 'Listened'
} else {
span.parentNode.innerHTML = 'Unplayed'
}
}, 3000)
})
if (a.querySelector('.bdp_check_onchecked_text')) {
span.className = 'listenedstatus listened'
span.innerHTML = '<span class="listened-symbol">✓</span> <span class="listened-label">Played</span>'
} else {
span.className = 'listenedstatus mark-listened'
span.innerHTML = '<span class="mark-listened-symbol">✓</span> <span class="mark-listened-label">Mark as played</span>'
}
a.insertBefore(span, a.firstChild)
a.dataset.textContent = document.querySelector('#carousel-player .now-playing .info a .artist span').textContent + ' - ' + document.querySelector('#carousel-player .now-playing .info a .title').textContent
})
}
let lastMediaHubMeta = [null, null]
const addChromeMediaHubToCarouselPlayer = function chromeMediaHubToCarouselPlayer () {
// Media hub
if ('mediaSession' in navigator) {
const title = document.querySelector('#carousel-player .info-progress span[data-bind*="trackTitle"]').textContent.trim()
const artwork = document.querySelector('#carousel-player .now-playing img').src
if (lastMediaHubMeta[0] === title && lastMediaHubMeta[1] === artwork) {
return
}
lastMediaHubMeta = [title, artwork]
navigator.mediaSession.metadata = new MediaMetadata({
title: title,
artist: document.querySelector('#carousel-player .now-playing .artist span').textContent.trim(),
album: document.querySelector('#carousel-player .now-playing .title').textContent.trim(),
artwork: [{
src: artwork,
sizes: '350x350',
type: 'image/jpeg'
}]
})
if (!document.querySelector('#carousel-player .transport .prev-icon').classList.contains('disabled')) {
navigator.mediaSession.setActionHandler('previoustrack', () => document.querySelector('#carousel-player .transport .prev-icon').click())
} else {
navigator.mediaSession.setActionHandler('previoustrack', null)
}
if (!document.querySelector('#carousel-player .transport .next-icon').classList.contains('disabled')) {
navigator.mediaSession.setActionHandler('nexttrack', () => document.querySelector('#carousel-player .transport .next-icon').click())
} else {
navigator.mediaSession.setActionHandler('nexttrack', null)
}
}
}
window.setInterval(function addListenedButtonToCarouselPlayerInterval () {
if (!document.getElementById('carousel-player') || document.getElementById('carousel-player').getClientRects()[0].bottom - window.innerHeight > 0) {
return
}
addListenedButtonToCarouselPlayer()
addChromeMediaHubToCarouselPlayer()
}, 2000)
document.head.appendChild(document.createElement('style')).innerHTML = `
#carousel-player a.carousellistenedstatus:link,#carousel-player a.carousellistenedstatus:visited,#carousel-player a.carousellistenedstatus:hover{
text-decoration:none;
cursor:default
}
#carousel-player .listened .listened-symbol{
color:rgb(0,220,50);
text-shadow:1px 0px #DDD,-1px 0px #DDD,0px -1px #DDD,0px 1px #DDD
}
#carousel-player .mark-listened .mark-listened-symbol{
color:#FFF;
text-shadow:1px 0px #959595,-1px 0px #959595,0px -1px #959595,0px 1px #959595
}
#carousel-player .mark-listened:hover .mark-listened-symbol{
text-shadow:1px 0px #0AF,-1px 0px #0AF,0px -1px #0AF,0px 1px #0AF
}
`
}
async function addListenedButtonToCollectControls () {
const lastLi = document.querySelector('.share-panel-wrapper-desktop ul li')
if (!lastLi) {
window.setTimeout(addListenedButtonToCollectControls, 300)
return
}
const checkSymbol = NOEMOJI ? '✓' : '✔'
const myalbums = JSON.parse(await GM.getValue('myalbums', '{}'))
const key = albumKey(document.location.href)
const listened = key in myalbums && 'listened' in myalbums[key] && myalbums[key].listened
const onClickSetListened = async function onClickSetListenedAsync (ev) {
ev.preventDefault()
let parent = this
for (let j = 0; parent.tagName !== 'LI' && j < 20; j++) {
parent = parent.parentNode
}
setTimeout(function showSavingLabel () { parent.style.cursor = 'wait'; parent.innerHTML = 'Saving...' }, 0)
const url = document.location.href
let albumData = await myAlbumsGetAlbum(url)
if (!albumData) {
albumData = await myAlbumsNewFromUrl(url, { title: this.dataset.textContent })
}
albumData.listened = (new Date()).toJSON()
await myAlbumsUpdateAlbum(albumData)
addListenedButtonToCollectControls()
}
const onClickRemoveListened = async function onClickRemoveListenedAsync (ev) {
ev.preventDefault()
let parent = this
for (let j = 0; parent.tagName !== 'LI' && j < 20; j++) {
parent = parent.parentNode
}
setTimeout(function showSavingLabel () {
parent.style.cursor = 'wait'
parent.innerHTML = 'Saving...'
}, 0)
const url = document.location.href
const albumData = await myAlbumsGetAlbum(url)
if (albumData) {
albumData.listened = false
await myAlbumsUpdateAlbum(albumData)
}
addListenedButtonToCollectControls()
}
removeViaQuerySelector('#discographyplayer_sharepanel')
const li = lastLi.parentNode.appendChild(document.createElement('li'))
const button = li.appendChild(document.createElement('span'))
const icon = button.appendChild(document.createElement('span'))
const a = button.appendChild(document.createElement('a'))
li.setAttribute('id', 'discographyplayer_sharepanel')
a.addEventListener('click', (ev) => ev.preventDefault())
icon.className = 'sharepanelchecksymbol'
if (listened) {
const date = new Date(listened)
const since = timeSince(date)
button.title = since + '\nClick to mark as NOT played'
button.addEventListener('click', onClickRemoveListened)
icon.style.color = 'rgb(0,220,50)'
icon.style.textShadow = '1px 0px #DDD,-1px 0px #DDD,0px -1px #DDD,0px 1px #DDD'
icon.style.paddingRight = '5px'
icon.appendChild(document.createTextNode(checkSymbol))
a.appendChild(document.createTextNode('Played'))
li.appendChild(document.createTextNode(' - '))
const link = li.appendChild(document.createElement('span'))
const viewLink = link.appendChild(document.createElement('a'))
viewLink.href = findUserProfileUrl() + '#listened-tab'
viewLink.title = 'View list of played albums'
viewLink.appendChild(document.createTextNode('view'))
} else {
button.title = 'Click to mark as played'
button.addEventListener('click', onClickSetListened)
try {
icon.style.color = window.getComputedStyle(document.getElementById('pgBd')).backgroundColor
icon.style.textShadow = '1px 0px #959595,-1px 0px #959595,0px -1px #959595,0px 1px #959595'
icon.style.paddingRight = '5px'
} catch (e) {
icon.style.color = '#959595'
icon.style.fontWeight = 700
}
icon.appendChild(document.createTextNode(checkSymbol))
a.appendChild(document.createTextNode('Unplayed'))
}
}
function makeListenedListTabLink () {
const grid = document.getElementById('grids').appendChild(document.createElement('div'))
grid.className = 'grid'
grid.id = 'listened-grid'
const inner = grid.appendChild(document.createElement('div'))
inner.className = 'inner'
inner.innerHTML = 'Loading...'
const li = document.querySelector('ol#grid-tabs').appendChild(document.createElement('li'))
li.id = 'listenedlisttablink'
li.dataset.tab = 'listened'
li.setAttribute('data-grid-id', 'listened-grid')
const span = li.appendChild(document.createElement('span'))
span.className = 'tab-title'
span.appendChild(document.createTextNode('played'))
const count = span.appendChild(document.createElement('span'))
count.className = 'count'
GM.getValue('myalbums', '{}').then(function myalbumsLoaded (str) {
let n = 0
const myalbums = JSON.parse(str)
for (const key in myalbums) {
if (myalbums[key].listened) {
n++
}
}
count.appendChild(document.createTextNode(n))
})
li.addEventListener('click', showListenedListTab)
return li
}
async function showListenedListTab () {
if (document.getElementById('owner-controls')) document.getElementById('owner-controls').style.display = 'none'
if (document.getElementById('wishlist-controls')) document.getElementById('wishlist-controls').style.display = 'none'
const grid = document.getElementById('listened-grid')
const gridActive = document.querySelector('#grids .grid.active')
if (gridActive && gridActive !== grid) {
gridActive.classList.remove('active')
}
grid.classList.add('active')
const tabLink = document.getElementById('listenedlisttablink')
const tabLinkActive = document.querySelector('#grid-tab li.active')
if (tabLinkActive && tabLinkActive !== tabLink) {
tabLinkActive.classList.remove('active')
}
tabLink.classList.add('active')
if (grid.querySelector('.collection-items')) {
return
}
grid.innerHTML = ''
const collectionItems = grid.appendChild(document.createElement('div'))
collectionItems.className = 'collection-items'
const collectionGrid = collectionItems.appendChild(document.createElement('ol'))
collectionGrid.className = 'collection-grid'
const myalbums = JSON.parse(await GM.getValue('myalbums', '{}'))
for (const key in myalbums) {
const albumData = myalbums[key]
if (!albumData.listened) {
continue
}
const artist = albumData.artist || 'Unkown artist'
const title = albumData.title || 'Unkown title'
const albumCover = albumData.albumCover || 'https://bandcamp.com/img/0.gif'
const url = key
const date = new Date(albumData.listened)
const since = timeSince(date)
const dateStr = dateFormater(date)
let releaseDate
if ('releaseDate' in albumData) {
releaseDate = dateFormaterRelease(new Date(albumData.releaseDate))
} else {
releaseDate = 'Unknown'
}
const li = collectionGrid.appendChild(document.createElement('li'))
li.className = 'collection-item-container'
li.innerHTML = `
<div class="collection-item-gallery-container">
<span class="bc-ui2 collect-item-icon-alt"></span>
<div class="collection-item-art-container">
<img class="collection-item-art" alt="" src="${albumCover}">
</div>
<div class="collection-title-details">
<a target="_blank" href="https://${url}" class="item-link">
<div class="collection-item-title">${title}</div>
<div class="collection-item-artist">by ${artist}</div>
</a>
</div>
<div class="collection-item-fav-track">
<span title="${since} ago" class="favoriteTrackLabel">played</span>
<div title="${since} ago">
<span class="fav-track-link">${dateStr}</span>
</div>
<span class="favoriteTrackLabel">released</span>
<div>
<span class="fav-track-link">${releaseDate}</span>
</div>
</div>
</div>
`
}
}
function addVolumeBarToAlbumPage () {
// Do not add if one of these scripts already added a volume bar
// https://openuserjs.org/scripts/cuzi/Bandcamp_Volume_Bar
// https://openuserjs.org/scripts/Mranth0ny62/Bandcamp_Volume_Bar
// https://openuserjs.org/scripts/ArtificialInput/Bandcamp_Volume_Bar
// https://greasyfork.org/en/scripts/11047-bandcamp-volume-bar/
// https://greasyfork.org/en/scripts/38012-bandcamp-volume-bar/
if (document.querySelector('.volumeControl')) {
return false
}
document.head.appendChild(document.createElement('style')).innerHTML = `
/* Hide if inline_player is hidden */
.hidden .volumeButton,.hidden .volumeControl,.hidden .volumeLabel{
display:none
}
.volumeButton {
display: inline-block;
user-select:none;
background: #fff;
border: 1px solid #d9d9d9;
border-radius: 2px;
cursor: pointer;
min-height: 50px;
min-width: 54px;
text-align:center;
margin-top:5px;
}
.volumeSymbol {
margin-top: 16px;
font-size: 30px;
color:#222;
font-weight:bolder;
transform: rotate(-90deg);
text-shadow: rgb(255, 255, 255) 0px 0px 0px;
transition: text-shadow linear 300ms;
}
.volumeControl {
display:inline-block;
user-select:none;
top:5px;
}
.volumeLabel {
display:inline-block;
}
.nextsongcontrolbutton {
background:#fff;
border:1px solid #d9d9d9;
border-radius:2px;
cursor:pointer;
height:24px;
width:35px;
margin-top:2px;
margin-left:80px;
float:left;
text-align:center
}
.nextsongcontrolicon {
background-size:cover;
background-image:${spriteRepeatShuffle};
width:31px;
height:20px;
filter:drop-shadow(#FFF 1px 1px 2px);
display:inline-block;
margin-top:1px;
transition: filter 500ms;
}
.nextsongcontrolbutton.active .nextsongcontrolicon {
filter:drop-shadow(#0060F2 1px 1px 2px);
}
`
const playbutton = document.querySelector('#trackInfoInner .playbutton')
const volumeButton = playbutton.cloneNode(true)
document.querySelector('#trackInfoInner .inline_player').appendChild(volumeButton)
volumeButton.classList.replace('playbutton', 'volumeButton')
volumeButton.style.width = playbutton.clientWidth + 'px'
const volumeSymbol = volumeButton.appendChild(document.createElement('div'))
volumeSymbol.className = 'volumeSymbol'
volumeSymbol.appendChild(document.createTextNode(CHROME ? '\uD83D\uDD5B' : '\u23F2'))
const progbar = document.querySelector('#trackInfoInner .progbar_cell .progbar')
const volumeBar = progbar.cloneNode(true)
document.querySelector('#trackInfoInner .inline_player').appendChild(volumeBar)
volumeBar.classList.add('volumeControl')
volumeBar.style.width = Math.max(200, progbar.clientWidth) + 'px'
const thumb = volumeBar.querySelector('.thumb')
thumb.setAttribute('id', 'deluxe_thumb')
const progbarFill = volumeBar.querySelector('.progbar_fill')
const volumeLabel = document.createElement('div')
document.querySelector('#trackInfoInner .inline_player').appendChild(volumeLabel)
volumeLabel.classList.add('volumeLabel')
let dragging = false
let dragPos
const width100 = volumeBar.clientWidth - (thumb.clientWidth + 2) // 2px border
const rot0 = CHROME ? -180 : -90
const rot100 = CHROME ? 350 : 265 - rot0
const blue0 = 180
const blue100 = 75
const green0 = 90
const green100 = 100
const audioAlbumPage = document.querySelector('audio')
addLogVolume(audioAlbumPage)
const volumeBarPos = volumeBar.getBoundingClientRect().left
const displayVolume = function updateDisplayVolume () {
const level = audioAlbumPage.logVolume
volumeLabel.innerHTML = parseInt(level * 100.0) + '%'
thumb.style.left = (width100 * level) + 'px'
progbarFill.style.width = parseInt(level * 100.0) + '%'
volumeSymbol.style.transform = 'rotate(' + ((level * rot100) + rot0) + 'deg)'
if (level > 0.005) {
volumeSymbol.style.textShadow = 'rgb(0, ' + ((level * green100) + green0) + ', ' + ((level * blue100) + blue0) + ') 0px 0px 4px'
volumeSymbol.style.color = '#03a'
} else {
volumeSymbol.style.textShadow = 'rgb(255, 255, 255) 0px 0px 0px'
volumeSymbol.style.color = '#222'
}
}
thumb.addEventListener('mousedown', function thumbMouseDown (ev) {
if (ev.button === 0) {
dragging = true
dragPos = ev.offsetX
}
})
volumeBar.addEventListener('mouseup', function thumbMouseUp (ev) {
if (ev.button !== 0) {
return
}
ev.preventDefault()
ev.stopPropagation()
if (!dragging) {
// Click on volume bar without dragging:
audioAlbumPage.muted = false
audioAlbumPage.logVolume = Math.max(0.0, Math.min(1.0, (ev.pageX - volumeBarPos) / width100))
displayVolume()
}
dragging = false
GM.setValue('volume', audioAlbumPage.logVolume)
})
document.addEventListener('mouseup', function documentMouseUp (ev) {
if (ev.button === 0 && dragging) {
dragging = false
ev.preventDefault()
ev.stopPropagation()
GM.setValue('volume', audioAlbumPage.logVolume)
}
})
document.addEventListener('mousemove', function documentMouseMove (ev) {
if (ev.button === 0 && dragging) {
ev.preventDefault()
ev.stopPropagation()
audioAlbumPage.muted = false
audioAlbumPage.logVolume = Math.max(0.0, Math.min(1.0, ((ev.pageX - volumeBarPos) - dragPos) / width100))
displayVolume()
}
})
const onWheel = function onMouseWheel (ev) {
ev.preventDefault()
const direction = Math.min(Math.max(-1.0, ev.deltaY), 1.0)
audioAlbumPage.logVolume = Math.min(Math.max(0.0, audioAlbumPage.logVolume - 0.05 * direction), 1.0)
displayVolume()
GM.setValue('volume', audioAlbumPage.logVolume)
}
volumeButton.addEventListener('wheel', onWheel, false)
volumeBar.addEventListener('wheel', onWheel, false)
volumeButton.addEventListener('click', function onVolumeButtonClick (ev) {
if (audioAlbumPage.logVolume < 0.01) {
if ('lastvolume' in audioAlbumPage.dataset && audioAlbumPage.dataset.lastvolume) {
audioAlbumPage.logVolume = audioAlbumPage.dataset.lastvolume
GM.setValue('volume', audioAlbumPage.logVolume)
} else {
audioAlbumPage.logVolume = 1.0
}
} else {
audioAlbumPage.dataset.lastvolume = audioAlbumPage.logVolume
audioAlbumPage.logVolume = 0.0
}
displayVolume()
})
displayVolume()
window.clearInterval(ivRestoreVolume)
// Repeat/shuffle buttons
const playnextcontrols = document.querySelector('#trackInfoInner .inline_player').appendChild(document.createElement('div'))
// Show repeat button
const repeatButton = playnextcontrols.appendChild(document.createElement('div'))
repeatButton.classList.add('nextsongcontrolbutton', 'repeat')
repeatButton.setAttribute('title', 'Repeat')
const repeatButtonIcon = repeatButton.appendChild(document.createElement('div'))
repeatButtonIcon.classList.add('nextsongcontrolicon')
repeatButton.dataset.repeat = 'none'
repeatButtonIcon.style.backgroundPositionY = '-20px'
repeatButton.addEventListener('click', function () {
const posY = this.getElementsByClassName('nextsongcontrolicon')[0].style.backgroundPositionY
if (posY === '-20px') {
this.getElementsByClassName('nextsongcontrolicon')[0].style.backgroundPositionY = '-40px'
this.classList.toggle('active')
this.dataset.repeat = 'one'
} else if (posY === '-40px') {
this.getElementsByClassName('nextsongcontrolicon')[0].style.backgroundPositionY = '-60px'
this.dataset.repeat = 'all'
} else {
this.getElementsByClassName('nextsongcontrolicon')[0].style.backgroundPositionY = '-20px'
this.classList.toggle('active')
this.dataset.repeat = 'none'
}
})
if (allFeatures.albumPageAutoRepeatAll.enabled) {
repeatButton.click()
repeatButton.click()
}
// Show shuffle button
const shuffleButton = playnextcontrols.appendChild(document.createElement('div'))
if (document.querySelectorAll('#track_table a div').length > 2) {
shuffleButton.classList.add('nextsongcontrolbutton', 'shuffle')
shuffleButton.setAttribute('title', 'Shuffle')
const shuffleButtonIcon = shuffleButton.appendChild(document.createElement('div'))
shuffleButtonIcon.classList.add('nextsongcontrolicon')
shuffleButtonIcon.style.backgroundPositionY = '0px'
shuffleButton.addEventListener('click', function () {
this.classList.toggle('active')
})
}
const findLastSongIndex = function () {
const allDiv = document.querySelectorAll('#track_table a div')
const nextDiv = document.querySelector('#track_table a div.playing')
if (!nextDiv) {
return allDiv.length - 1
}
for (let i = 1; i < allDiv.length; i++) {
if (allDiv[i] === nextDiv) {
return i - 1
}
}
return -1
}
const albumPageAudioOnEnded = function (ev) {
const allDiv = document.querySelectorAll('#track_table a div')
if (repeatButton.dataset.repeat === 'one') {
// Click on last song again
if (allDiv.length > 0) {
allDiv[findLastSongIndex()].click()
} else {
// No tracklist, click on play button
document.querySelector('#trackInfoInner .inline_player .playbutton').click()
}
} else if (shuffleButton.classList.contains('active') && allDiv.length > 1) {
// Find last song
const lastSongIndex = findLastSongIndex()
// Set a random song (that is not the last song)
let index = lastSongIndex
while (index === lastSongIndex) {
index = randomIndex(allDiv.length)
}
if (index !== lastSongIndex + 1) {
allDiv[index].click()
}
} else if (repeatButton.dataset.repeat === 'all') {
if (findLastSongIndex() === allDiv.length - 1) {
if (allDiv[0]) {
allDiv[0].click() // Click on first song's play button
} else {
// No tracklist, click on play button
document.querySelector('#trackInfoInner .inline_player .playbutton').click()
}
}
}
}
let lastMediaHubTitle = null
const albumPageUpdateMediaHubListener = function albumPageUpdateMediaHub () {
// Media hub
if ('mediaSession' in navigator) {
const title = document.querySelector('#trackInfoInner .inline_player .title').textContent.trim()
if (lastMediaHubTitle === title) {
return
}
lastMediaHubTitle = title
const TralbumData = unsafeWindow.TralbumData
// Pre load image to get dimension
const cover = document.createElement('img')
cover.onload = function onCoverLoaded () {
navigator.mediaSession.metadata = new MediaMetadata({
title: title,
artist: TralbumData.artist,
album: TralbumData.current.title,
artwork: [{
src: cover.src,
sizes: `${cover.width}x${cover.height}`,
type: 'image/jpeg'
}]
})
}
cover.src = `https://f4.bcbits.com/img/a${TralbumData.current.art_id}_2.jpg`
if (!document.querySelector('#trackInfoInner .inline_player .prevbutton').classList.contains('hiddenelem')) {
navigator.mediaSession.setActionHandler('previoustrack', () => document.querySelector('#trackInfoInner .inline_player .prevbutton').click())
} else {
navigator.mediaSession.setActionHandler('previoustrack', null)
}
if (!document.querySelector('#trackInfoInner .inline_player .nextbutton').classList.contains('hiddenelem')) {
navigator.mediaSession.setActionHandler('nexttrack', () => document.querySelector('#trackInfoInner .inline_player .nextbutton').click())
} else {
navigator.mediaSession.setActionHandler('nexttrack', null)
}
}
}
audioAlbumPage.addEventListener('ended', albumPageAudioOnEnded)
audioAlbumPage.addEventListener('play', albumPageUpdateMediaHubListener)
audioAlbumPage.addEventListener('ended', albumPageUpdateMediaHubListener)
}
function clickAddToWishlist () {
const wishButton = document.querySelector('#collect-item>*')
if (!wishButton) {
window.setTimeout(clickAddToWishlist, 300)
return
}
wishButton.click()
if (document.querySelector('#collection-main a')) {
// if logged in, the click should be successful, so try to close the window
window.setTimeout(window.close, 1000)
}
}
function addReleaseDateButton () {
const meta = document.querySelector('*[itemprop="datePublished"]')
if (!meta || !meta.content) {
return // no release date found
}
const TralbumData = unsafeWindow.TralbumData
const now = new Date()
const releaseDate = new Date(TralbumData.current.release_date)
const days = parseInt(Math.ceil((releaseDate - now) / (1000 * 60 * 60 * 24)))
if (releaseDate < now) {
return // Release date is in the past
}
const key = albumKey(TralbumData.url)
document.head.appendChild(document.createElement('style')).innerHTML = `
.releaseReminderButton {
font-size:13px;
font-weight:700;
cursor:pointer;
transition: border 500ms, padding 500ms
}
.releaseReminderButton.active {
border-radius:5px;
padding:0px 5px;
border:#3fb32f66 solid 2px
}
.releaseReminderButton:hover .releaseLabel {
text-decoration:underline
}
`
const div = document.querySelector('.share-collect-controls').appendChild(document.createElement('div'))
div.style = 'margin-top:4px'
const span = div.appendChild(document.createElement('span'))
span.className = 'custom-link-color releaseReminderButton'
span.title = 'Releases ' + dateFormaterRelease(releaseDate)
const daysStr = days === 1 ? 'tomorrow' : (`in ${days} days`)
span.innerHTML = `<span>\u23F0</span> <span class="releaseLabel">Notify <time datetime="${releaseDate.toISOString()}">${daysStr}</time></span>`
span.addEventListener('click', (ev) => toggleReleaseReminder(ev, span))
GM.getValue('releasereminder', '{}').then(function (str) {
const releaseReminderData = JSON.parse(str)
if (key in releaseReminderData) {
span.classList.add('active')
span.innerHTML = `<span>\u23F0</span> <span class="releaseLabel">Reminder set (<time datetime="${releaseDate.toISOString()}">${daysStr}</time>)</span>`
}
})
}
async function toggleReleaseReminder (ev, span) {
const TralbumData = unsafeWindow.TralbumData
const key = albumKey(TralbumData.url)
const releaseReminderData = JSON.parse(await GM.getValue('releasereminder', '{}'))
if (key in releaseReminderData) {
delete releaseReminderData[key]
} else {
releaseReminderData[key] = {
albumCover: `https://f4.bcbits.com/img/a${TralbumData.art_id}_2.jpg`,
releaseDate: TralbumData.current.release_date,
artist: TralbumData.artist,
title: TralbumData.current.title
}
}
await GM.setValue('releasereminder', JSON.stringify(releaseReminderData))
if (span) {
const releaseDate = new Date(TralbumData.current.release_date)
const now = new Date()
const days = parseInt(Math.ceil((releaseDate - now) / (1000 * 60 * 60 * 24)))
const daysStr = days === 1 ? 'tomorrow' : (`in ${days} days`)
if (key in releaseReminderData) {
span.classList.add('active')
span.innerHTML = `<span>\u23F0</span> <span class="releaseLabel">Reminder set (<time datetime="${releaseDate.toISOString()}">${daysStr}</time>)</span>`
} else {
span.classList.remove('active')
span.innerHTML = `<span>\u23F0</span> <span class="releaseLabel">Notify <time datetime="${releaseDate.toISOString()}">${daysStr}</time></span>`
}
}
}
async function removeReleaseReminder (ev) {
ev.preventDefault()
const key = this.parentNode.dataset.key
const releaseReminderData = JSON.parse(await GM.getValue('releasereminder', '{}'))
if (key in releaseReminderData) {
delete releaseReminderData[key]
await GM.setValue('releasereminder', JSON.stringify(releaseReminderData))
}
this.parentNode.remove()
}
function maximizePastReleases () {
document.getElementById('pastreleases').style.opacity = 0.0
window.setTimeout(() => showPastReleases(null, true), 500)
document.getElementById('pastreleases').removeEventListener('click', maximizePastReleases)
}
async function showPastReleases (ev, forceShow) {
let hideDate = await GM.getValue('pastreleaseshidden', false)
const releaseReminderData = JSON.parse(await GM.getValue('releasereminder', '{}'))
const releases = []
let pastReleasesCounter = 0
const now = new Date()
now.setHours(23)
now.setMinutes(59)
for (const key in releaseReminderData) {
releaseReminderData[key].key = key
releaseReminderData[key].date = new Date(releaseReminderData[key].releaseDate)
releaseReminderData[key].past = now >= releaseReminderData[key].date
if (releaseReminderData[key].past) {
pastReleasesCounter++
}
releases.push(releaseReminderData[key])
}
releases.sort((a, b) => b.date - a.date)
if (releases.length === 0 || pastReleasesCounter === 0) {
return
}
if (!document.getElementById('pastreleases')) {
document.head.appendChild(document.createElement('style')).innerHTML = `
#pastreleases {
position:fixed;
bottom:1%;
left:10px;
background:#d5dce4;
color:#033162;
font-size:10pt;
border:1px solid #033162;
z-index:200;
opacity:0.0;
transition: opacity 700ms;
overflow:auto
}
#pastreleases .tablediv {
display: table;
position:relative;
}
#pastreleases .entry,#pastreleases .header {
display:table-row
}
#pastreleases .entry > *,#pastreleases .header > * {
display:table-cell;
line-height:21pt
}
#pastreleases .upcoming {
cursor:pointer;
font-size:x-small
}
#pastreleases .controls {
cursor:pointer;
position:absolute;
top:0px;
right:1px;
line-height:11pt
}
#pastreleases .entry:link {
position:relative;
border-top:1px solid #033162;
color:#033162;
text-decoration:none
}
#pastreleases .entry:nth-child(odd) {
background:#c5ccd4
}
#pastreleases .entry:hover,#pastreleases .entry:visited {
color:#033162;
text-decoration:none
}
#pastreleases .entry.future {
display:none;
background:#9fc2ea;
}
#pastreleases .entry.future:nth-child(odd) {
background:#8fc2e1;
}
#pastreleases .entry .image {
background-size:contain;
width:21pt;
height:21pt
}
#pastreleases .entry:hover .image {
display:block;
position:fixed;
bottom:10px;
top:50%;
left:50%;
margin-right:-50%;
transform:translate(-50%, -50%);
width:350px;
height:350px;
background:black;
border:5px solid white;
}
#pastreleases .entry time {
padding-right: 2px
}
#pastreleases .entry .title {
padding-left: 2px;
border-left: 1px solid #47a2bd
}
#pastreleases .remove {
font-family:sans-serif;
color:#97174e;
font-size: small;
padding-right:3px
}
`
}
const div = document.body.appendChild(document.getElementById('pastreleases') || document.createElement('div'))
div.setAttribute('id', 'pastreleases')
div.style.maxHeight = (document.documentElement.clientHeight - 50) + 'px'
div.style.maxWidth = (document.documentElement.clientWidth - 100) + 'px'
window.setTimeout(function () {
div.style.opacity = 1.0
}, 200)
div.innerHTML = ''
const table = div.appendChild(document.createElement('div'))
table.classList.add('tablediv')
const firstRow = table.appendChild(document.createElement('div'))
firstRow.classList.add('header')
firstRow.appendChild(document.createTextNode('\u23F0'))
firstRow.appendChild(document.createElement('span'))
if (!forceShow && hideDate && !isNaN(hideDate = new Date(hideDate)) && (new Date() - hideDate) < 1000 * 60 * 60) {
firstRow.appendChild(document.createTextNode(`${pastReleasesCounter} release` + (pastReleasesCounter === 1 ? '' : 's')))
table.addEventListener('click', maximizePastReleases)
return
} else {
GM.setValue('pastreleaseshidden', '')
}
const upcoming = firstRow.appendChild(document.createElement('span'))
if (releases.length !== pastReleasesCounter) {
upcoming.appendChild(document.createTextNode(' Show upcoming'))
upcoming.classList.add('upcoming')
upcoming.addEventListener('click', function () {
document.querySelectorAll('#pastreleases .future').forEach(function (el) {
el.style.display = 'table-row'
})
this.remove()
})
}
const controls = firstRow.appendChild(document.createElement('span'))
controls.classList.add('controls')
const refresh = controls.appendChild(document.createElement('span'))
refresh.setAttribute('title', 'Update')
refresh.addEventListener('click', function () {
document.getElementById('pastreleases').style.opacity = 0.0
window.setTimeout(() => showPastReleases(null, true), 1200)
})
refresh.appendChild(document.createTextNode(NOEMOJI ? 'Refresh' : '⟳'))
const close = controls.appendChild(document.createElement('span'))
close.setAttribute('title', 'Hide')
close.addEventListener('click', function () {
GM.setValue('pastreleaseshidden', new Date().toJSON())
document.getElementById('pastreleases').style.opacity = 0.0
window.setTimeout(function () {
document.getElementById('pastreleases').remove()
}, 700)
})
close.appendChild(document.createTextNode('X'))
releases.forEach(function (release) {
const days = parseInt(Math.ceil((release.date - now) / (1000 * 60 * 60 * 24)))
const daysStr = days === 1 ? 'tomorrow' : (`in ${days} days`)
let title = `${release.artist} - ${release.title}`
const entry = table.appendChild(document.createElement('a'))
entry.setAttribute('title', title)
entry.dataset.key = release.key
entry.classList.add('entry')
entry.classList.add(release.past ? 'past' : 'future')
entry.setAttribute('href', document.location.protocol + '//' + release.key)
entry.setAttribute('target', '_blank')
const removeButton = entry.appendChild(document.createElement('span'))
removeButton.setAttribute('title', 'Remove album')
removeButton.classList.add('remove')
removeButton.appendChild(document.createTextNode(NOEMOJI ? 'X' : '╳'))
removeButton.addEventListener('click', removeReleaseReminder)
const time = entry.appendChild(document.createElement('time'))
time.setAttribute('datetime', release.date.toISOString())
time.setAttribute('title', 'Releases ' + dateFormaterRelease(release.date))
if (release.past) {
time.appendChild(document.createTextNode(dateFormaterNumeric(release.date)))
} else {
time.appendChild(document.createTextNode(daysStr))
}
const span = entry.appendChild(document.createElement('span'))
span.classList.add('title')
title = title.length < 60 ? title : (title.substr(0, 57) + '…')
span.appendChild(document.createTextNode(' ' + title))
const image = entry.appendChild(document.createElement('div'))
image.classList.add('image')
image.style.backgroundRepeat = 'no-repeat'
image.style.backgroundSize = 'contain'
image.style.backgroundImage = `url(${release.albumCover})`
})
}
function mainMenu (startBackup) {
document.head.appendChild(document.createElement('style')).innerHTML = `
.deluxemenu {
position:fixed;
height:auto;
overflow:auto;
top:20px;
left:20px;
z-index:200;
padding:5px;
transition: left 1s;
border:2px solid black;
border-radius:10px;
color:black;
background:white;
}
.deluxemenu input{
box-shadow: 2px 2px 5px #5555;
transition: box-shadow 500ms;
}
`
if (startBackup === true) {
exportMenu()
return
}
if (document.querySelector('.deluxemenu')) {
return
}
// Blur background
if (document.getElementById('centerWrapper')) { document.getElementById('centerWrapper').style.filter = 'blur(4px)' }
const main = document.body.appendChild(document.createElement('div'))
main.className = 'deluxemenu'
main.innerHTML = `<h2>Bandcamp script (Deluxe Edition)</h2>
Source code license: <a href="https://github.com/cvzi/Bandcamp-script-deluxe-edition/blob/master/LICENSE">MIT</a><br>
Support: <a href="https://github.com/cvzi/Bandcamp-script-deluxe-edition">github.com/cvzi/Bandcamp-script-deluxe-edition</a><br>
OUJS.org: <a href="https://openuserjs.org/scripts/cuzi/Bandcamp_script_(Deluxe_Edition)">openuserjs.org/scripts/cuzi/Bandcamp_script_(Deluxe_Edition)</a><br>
Libraries used:<br>
* <a href="https://json5.org/">JSON5 - JSON for Humans</a> (MIT license)
<h3>Options</h3>
`
window.setTimeout(function moveMenuIntoView () {
main.style.maxHeight = (document.documentElement.clientHeight - 40) + 'px'
main.style.maxWidth = (document.documentElement.clientWidth - 40) + 'px'
main.style.left = Math.max(20, 0.5 * (document.body.clientWidth - main.clientWidth)) + 'px'
}, 0)
Promise.all([
GM.getValue('volume', '0.7'),
GM.getValue('myalbums', '{}'),
GM.getValue('tralbumdata', '{}'),
GM.getValue('enabledFeatures', false),
GM.getValue('markasplayedThreshold', '10s')
]).then(function allPromisesLoaded (values) {
// let volume = parseFloat(values[0])
// volume = Number.isNaN(volume) ? 0.7 : volume
const myalbums = JSON.parse(values[1])
const tralbumdata = JSON.parse(values[2])
getEnabledFeatures(values[3])
const markasplayedThreshold = values[4]
const checkboxOnChange = async function onCheckboxChange () {
const input = this
getEnabledFeatures(await GM.getValue('enabledFeatures', false))
allFeatures[input.name].enabled = input.checked
await GM.setValue('enabledFeatures', JSON.stringify(allFeatures))
input.style.boxShadow = '2px 2px 5px #0a0f'
window.setTimeout(function resetBoxShadowTimeout () {
input.style.boxShadow = ''
}, 3000)
}
const thresholdOnChange = async function onThresholdChange () {
const input = this
let value = input.value.trim()
const m = value.match(/^(\d+)(s|%)$/)
if (m && parseInt(m[1]) >= 0 && (m[2] === 's' || parseInt(m[1]) <= 100)) {
value = m[1] + m[2]
} else if (value.match(/^\d+$/) && parseInt(value.split('\n')[0]) >= 0) {
value = value.split('\n')[0] + 's'
} else {
window.alert('Format does not match!\nChoose either a time in seconds e.g. 10s or a percentage e.g. 50%')
return
}
await GM.setValue('markasplayedThreshold', value)
input.value = value
input.style.boxShadow = '2px 2px 5px #0a0f'
window.setTimeout(function resetBoxShadowTimeout () {
input.style.boxShadow = ''
}, 3000)
}
for (const feature in allFeatures) {
const div = main.appendChild(document.createElement('div'))
const checkbox = div.appendChild(document.createElement('input'))
checkbox.type = 'checkbox'
checkbox.id = 'feature_' + feature
checkbox.name = feature
checkbox.checked = allFeatures[feature].enabled
const label = div.appendChild(document.createElement('label'))
label.setAttribute('for', 'feature_' + feature)
label.innerHTML = allFeatures[feature].name
checkbox.addEventListener('change', checkboxOnChange)
if (feature === 'markasplayedAuto') {
main.appendChild(document.createTextNode(' '))
const inputThreshold = div.appendChild(document.createElement('input'))
inputThreshold.type = 'text'
inputThreshold.value = markasplayedThreshold
inputThreshold.size = 3
inputThreshold.title = 'For example: 10s or 50%'
inputThreshold.id = 'feature_' + feature + '_threshold'
div.appendChild(document.createTextNode(' '))
const label = div.appendChild(document.createElement('label'))
label.setAttribute('for', 'feature_' + feature + '_threshold')
label.innerHTML = 'seconds or percentage.'
inputThreshold.addEventListener('change', thresholdOnChange)
}
}
// Bottom buttons
main.appendChild(document.createElement('br'))
main.appendChild(document.createElement('br'))
const buttons = main.appendChild(document.createElement('div'))
const closeButton = buttons.appendChild(document.createElement('button'))
closeButton.appendChild(document.createTextNode('Close'))
closeButton.style.color = 'black'
closeButton.addEventListener('click', function onCloseButtonClick () {
document.querySelector('.deluxemenu').remove()
// Un-blur background
if (document.getElementById('centerWrapper')) {
document.getElementById('centerWrapper').style.filter = ''
}
})
const bytes = metricPrefix(JSON.stringify(tralbumdata).length - 2, 1, 1024) + 'Bytes'
const clearCacheButton = buttons.appendChild(document.createElement('button'))
clearCacheButton.appendChild(document.createTextNode('Clear cache (' + bytes + ')'))
clearCacheButton.style.color = 'black'
clearCacheButton.addEventListener('click', function onClearCacheButtonClick () {
GM.setValue('tralbumdata', '{}').then(function showClearedLabel () {
clearCacheButton.innerHTML = 'Cleared'
})
})
let myalbumsLength = 0
for (const key in myalbums) {
if (myalbums[key].listened) {
myalbumsLength++
}
}
const exportButton = buttons.appendChild(document.createElement('button'))
exportButton.appendChild(document.createTextNode('Export played albums (' + myalbumsLength + ')'))
exportButton.style.color = 'black'
exportButton.addEventListener('click', function onExportButtonClick () {
document.querySelector('.deluxemenu').remove()
exportMenu()
})
})
window.setTimeout(function moveMenuIntoView () {
main.style.maxHeight = (document.documentElement.clientHeight - 40) + 'px'
main.style.maxWidth = (document.documentElement.clientWidth - 40) + 'px'
main.style.left = Math.max(20, 0.5 * (document.body.clientWidth - main.clientWidth)) + 'px'
}, 0)
}
function exportMenu (showClearButton) {
document.head.appendChild(document.createElement('style')).innerHTML = `
.deluxeexportmenu table {
}
.deluxeexportmenu table tr>td {
color:black
}
.deluxeexportmenu table tr>td:nth-child(3) {
color:silver
}
.deluxeexportmenu textarea.animated{
box-shadow: 2px 2px 5px #5555;
transition: box-shadow 500ms;
}
.deluxeexportmenu .drophint {
position:absolute;
top:10%;
left:30%;
color:#0097ff;
font-size:3em;
display:none;
}
`
// Blur background
if (document.getElementById('centerWrapper')) { document.getElementById('centerWrapper').style.filter = 'blur(4px)' }
const main = document.body.appendChild(document.createElement('div'))
main.className = 'deluxeexportmenu deluxemenu'
main.innerHTML = `<h2>Export played albums</h2>
<h1 class="drophint">Drop to restore from backup</h1>
Available fields per album:<br>
<table>
<tr>
<td>%artist%</td>
<td>Artist name</td>
<td>Jay-X</td>
</tr>
<tr>
<td>%title%</td>
<td>Song title</td>
<td>Classic song</td>
</tr>
<tr>
<td>%cover%</td>
<td>Cover image url</td>
<td>https://f4.bcbits.com/img/a2588527047_2.jpg</td>
</tr>
<tr>
<td>%url%</td>
<td>Album url</td>
<td>petrolgirls.bandcamp.com/album/cut-stitch</td>
</tr>
<tr>
<td>%releaseDate% / %releaseUnix% / %releaseTimestamp%</td>
<td>Release date</td>
<td>2019-02-07T14:01:59.100Z / 1549548119 / 1549548119100</td>
</tr>
<tr>
<td>%listenedDate% / %listenedUnix% / %listenedTimestamp%</td>
<td>Played/Listened date</td>
<td>2019-02-07T02:17:21.315Z / 1549505841 / 1549505841315</td>
</tr>
<tr>
<td>%releaseY% / %releaseYYYY%</td>
<td>Release: Year</td>
<td>19 / 2019</td>
</tr>
<tr>
<td>%releaseM% / %releaseMM% / %releaseMon% / %releaseMonth%</td>
<td>Release: Month</td>
<td>2 / 02 / Feb / February</td>
</tr>
<tr>
<td>%releaseD% / %releaseDD%</td>
<td>Release: Day of month</td>
<td>7 / 07</td>
</tr>
<tr>
<td>%releaseDay%</td>
<td>Release: Day of week</td>
<td>Friday</td>
</tr>
<tr>
<td>%listenedY% / %listenedYYYY%</td>
<td>Played: Year</td>
<td>19 / 2019</td>
</tr>
<tr>
<td>%listenedM% / %listenedMM% / %listenedMon% / %listenedMonth%</td>
<td>Played: Month</td>
<td>2 / 02 / Feb / February</td>
</tr>
<tr>
<td>%listenedD% / %listenedDD%</td>
<td>Played: Day of month</td>
<td>7 / 07</td>
</tr>
<tr>
<td>%listenedDay%</td>
<td>Played: Day of week</td>
<td>Friday</td>
</tr>
</table>
`
const drophint = main.querySelector('.drophint')
window.setTimeout(function moveMenuIntoView () {
main.style.maxHeight = (document.documentElement.clientHeight - 40) + 'px'
main.style.maxWidth = (document.documentElement.clientWidth - 40) + 'px'
main.style.left = Math.max(20, 0.5 * (document.body.clientWidth - main.clientWidth)) + 'px'
}, 0)
GM.getValue('myalbums', '{}').then(function myalbumsLoaded (myalbumsStr) {
const myalbums = JSON.parse(myalbumsStr)
const listenedAlbums = []
for (const key in myalbums) {
if (myalbums[key].listened) {
listenedAlbums.push(myalbums[key])
}
}
main.querySelector('h2').appendChild(document.createTextNode(' (' + listenedAlbums.length + ' records)'))
let format = '%artist% - %title%'
const formatAlbum = function formatAlbumStr (format, myAlbum) {
const releaseDate = new Date(myAlbum.releaseDate)
const listenedDate = new Date(myAlbum.listened)
const fields = {
'%artist%': () => myAlbum.artist,
'%title%': () => myAlbum.title,
'%cover%': () => myAlbum.albumCover,
'%url%': () => myAlbum.url,
'%releaseDate%': () => releaseDate.toISOString(),
'%listenedDate%': () => listenedDate.toISOString(),
'%releaseUnix%': () => parseInt(releaseDate.getTime() / 1000),
'%listenedUnix%': () => parseInt(listenedDate.getTime() / 1000),
'%releaseTimestamp%': () => releaseDate.getTime(),
'%listenedTimestamp%': () => listenedDate.getTime(),
'%releaseY%': () => releaseDate.getFullYear().toString().substring(2),
'%releaseYYYY%': () => releaseDate.getFullYear(),
'%releaseM%': () => releaseDate.getMonth() + 1,
'%releaseMM%': () => padd(releaseDate.getMonth() + 1, 2, '0'),
'%releaseMon%': () => releaseDate.toLocaleString(undefined, { month: 'short' }),
'%releaseMonth%': () => releaseDate.toLocaleString(undefined, { month: 'long' }),
'%releaseD%': () => releaseDate.getDate(),
'%releaseDD%': () => padd(releaseDate.getDate(), 2, '0'),
'%releaseDay%': () => releaseDate.toLocaleString(undefined, { weekday: 'long' }),
'%listenedY%': () => listenedDate.getFullYear().toString().substring(2),
'%listenedYYYY%': () => listenedDate.getFullYear(),
'%listenedM%': () => listenedDate.getMonth() + 1,
'%listenedMM%': () => padd(listenedDate.getMonth() + 1, 2, '0'),
'%listenedMon%': () => listenedDate.toLocaleString(undefined, { month: 'short' }),
'%listenedMonth%': () => listenedDate.toLocaleString(undefined, { month: 'long' }),
'%listenedD%': () => listenedDate.getDate(),
'%listenedDD%': () => padd(listenedDate.getDate(), 2, '0'),
'%listenedDay%': () => listenedDate.toLocaleString(undefined, { weekday: 'long' }),
'%json%': () => JSON.stringify(myAlbum),
'%json5%': () => JSON5.stringify(myAlbum)
}
for (const field in fields) {
if (format.includes(field)) {
try {
format = format.replace(field, fields[field]())
} catch (e) {
console.log('Could not format replace "' + field + '": ' + e)
}
}
}
return format
}
const sortBy = function sortByCmp (sortKey) {
const cmps = {
playedAsc: function playedAsc (a, b) {
return -cmps.playedDesc(a, b)
},
playedDesc: function playedDesc (a, b) {
try {
return new Date(b.listened) - new Date(a.listened)
} catch (e) {
return 0
}
},
releasedAsc: function releasedAsc (a, b) {
return -cmps.releasedDesc(a, b)
},
releasedDesc: function releasedDesc (a, b) {
try {
return new Date(b.releaseDate) - new Date(a.releaseDate)
} catch (e) {
return 0
}
},
artist: function artist (a, b, fallbackToTitle) {
const d = a.artist.localeCompare(b.artist)
if (d === 0 && fallbackToTitle) {
return cmps.title(a, b, false)
} else {
return d
}
},
title: function title (a, b, fallbackToArtist) {
const d = a.title.localeCompare(b.title)
if (d === 0 && fallbackToArtist) {
return cmps.artist(a, b, false)
} else {
return d
}
}
}
listenedAlbums.sort(cmps[sortKey])
}
const generate = function generateStr () {
const textarea = document.getElementById('export_output')
window.setTimeout(function generateStrAnimation () {
textarea.classList.remove('animated')
textarea.style.boxShadow = '2px 2px 5px #00af'
}, 0)
let str
if (format === '%backup%') {
str = myalbumsStr
} else {
const sortSelect = document.getElementById('sort_select')
sortBy(sortSelect.options[sortSelect.selectedIndex].value)
str = []
for (let i = 0; i < listenedAlbums.length; i++) {
str.push(formatAlbum(format, listenedAlbums[i]))
}
str = str.join(navigator.platform.startsWith('Win') ? '\r\n' : '\n')
}
window.setTimeout(function generateStrAnimationSuccess () {
textarea.value = str
textarea.classList.add('animated')
textarea.style.boxShadow = '2px 2px 5px #0a0f'
}, 50)
window.setTimeout(function generateStrResetAnimation () {
textarea.style.boxShadow = ''
}, 3000)
return str
}
const inputFormatOnChange = async function onInputFormatChange () {
const input = this
const formatExample = document.getElementById('format_example')
format = input.value
formatExample.value = listenedAlbums.length > 0 ? formatAlbum(format, listenedAlbums[0]) : ''
formatExample.style.boxShadow = '2px 2px 5px #0a0f'
window.setTimeout(function resetBoxShadow () {
formatExample.style.boxShadow = ''
}, 3000)
}
const importData = function importDate (data) {
GM.getValue('myalbums', '{}').then(function myalbumsLoaded (myalbumsStr) {
let myalbums = JSON.parse(myalbumsStr)
myalbums = Object.assign(myalbums, data)
return GM.setValue('myalbums', JSON.stringify(myalbums))
}).then(function myalbumsSaved () {
document.getElementById('exportmenu_close').click()
window.setTimeout(() => exportMenu(true), 50)
})
}
const handleFiles = async function handleFilesAsync (fileList) {
if (fileList.length === 0) {
console.log('fileList is empty')
return
}
let data
try {
data = await (new Response(fileList[0])).json()
} catch (e) {
window.alert('Could not load file:\n' + e)
return
}
const n = Object.keys(data).length
if (window.confirm('Found ' + n + ' albums. Continue import and overwrite existing albums?')) {
importData(data)
}
}
const inputTable = main.appendChild(document.createElement('table'))
let tr
let td
tr = inputTable.appendChild(document.createElement('tr'))
td = tr.appendChild(document.createElement('td'))
const label = td.appendChild(document.createElement('label'))
label.setAttribute('for', 'export_format')
label.appendChild(document.createTextNode('Format:'))
td = tr.appendChild(document.createElement('td'))
const inputFormat = td.appendChild(document.createElement('input'))
inputFormat.type = 'text'
inputFormat.value = format
inputFormat.id = 'export_format'
inputFormat.style.width = '600px'
inputFormat.addEventListener('change', inputFormatOnChange)
inputFormat.addEventListener('keyup', inputFormatOnChange)
tr = inputTable.appendChild(document.createElement('tr'))
td = tr.appendChild(document.createElement('td'))
td.appendChild(document.createTextNode('Example:'))
td = tr.appendChild(document.createElement('td'))
const inputExample = td.appendChild(document.createElement('input'))
inputExample.type = 'text'
inputExample.value = listenedAlbums.length > 0 ? formatAlbum(format, listenedAlbums[0]) : ''
inputExample.readonly = true
inputExample.id = 'format_example'
inputExample.style.width = '600px'
td = tr.appendChild(document.createElement('td'))
td.appendChild(document.createTextNode('Sort by:'))
td = tr.appendChild(document.createElement('td'))
const sortSelect = td.appendChild(document.createElement('select'))
sortSelect.id = 'sort_select'
sortSelect.innerHTML = `
<option value="playedDesc">Recent play first</option>
<option value="playedAsc">Recent play last</option>
<option value="releasedDesc">Recent release first</option>
<option value="releasedAsc">Recent release last</option>
<option value="artist">Artist A-Z</option>
<option value="title">Title A-Z</option>
`
tr = inputTable.appendChild(document.createElement('tr'))
td = tr.appendChild(document.createElement('td'))
td.setAttribute('colspan', '2')
const generateButton = td.appendChild(document.createElement('button'))
generateButton.appendChild(document.createTextNode('Generate'))
generateButton.addEventListener('click', (ev) => generate())
const exportButton = td.appendChild(document.createElement('button'))
exportButton.appendChild(document.createTextNode('Export to file'))
exportButton.addEventListener('click', function onExportFileButtonClick () {
const dateSuffix = (new Date()).toISOString().split('T')[0]
document.getElementById('export_download_link').download = 'bandcampPlayedAlbums_' + dateSuffix + '.txt'
document.getElementById('export_download_link').href = 'data:text/plain,' + encodeURIComponent(generate())
window.setTimeout(() => document.getElementById('export_download_link').click(), 50)
})
const backupButton = td.appendChild(document.createElement('button'))
backupButton.appendChild(document.createTextNode('Backup'))
backupButton.addEventListener('click', function onBackupButtonClick () {
format = '%backup%'
document.getElementById('export_format').value = format
document.getElementById('format_example').value = 'JSON dictionary'
const dateSuffix = (new Date()).toISOString().split('T')[0]
document.getElementById('export_download_link').download = 'bandcampPlayedAlbums_' + dateSuffix + '.json'
document.getElementById('export_download_link').href = 'data:application/json,' + encodeURIComponent(generate())
document.getElementById('export_clear_button').style.display = ''
GM.setValue('myalbums_lastbackup', Object.keys(myalbums).length + '#####' + (new Date()).toJSON())
window.setTimeout(() => document.getElementById('export_download_link').click(), 50)
})
const restoreButton = td.appendChild(document.createElement('button'))
restoreButton.appendChild(document.createTextNode('Restore'))
restoreButton.addEventListener('click', function onBackupButtonClick () {
inputFile.click()
})
const clearButton = td.appendChild(document.createElement('button'))
clearButton.appendChild(document.createTextNode('Clear played albums'))
clearButton.id = 'export_clear_button'
if (showClearButton !== true) {
clearButton.style.display = 'none'
}
clearButton.addEventListener('click', function onClearButtonClick () {
if (window.confirm('Remove all played albums?\n\nThis cannot be undone.')) {
if (window.confirm('Are you sure? Delete all played albums?')) {
GM.setValue('myalbums', '{}').then(function myalbumsSaved () {
document.getElementById('exportmenu_close').click()
window.setTimeout(exportMenu, 50)
})
}
}
})
const downloadA = td.appendChild(document.createElement('a'))
downloadA.id = 'export_download_link'
downloadA.href = '#'
downloadA.download = 'bandcamp_played_albums.txt'
downloadA.target = '_blank'
const inputFile = td.appendChild(document.createElement('input'))
inputFile.type = 'file'
inputFile.id = 'input_file'
inputFile.accept = '.txt,plain/text,.json,application/json'
inputFile.style.display = 'none'
inputFile.addEventListener('change', function onFileChanged (ev) {
handleFiles(this.files)
}, false)
main.addEventListener('dragenter', function dragenter (ev) {
ev.stopPropagation()
ev.preventDefault()
main.style.backgroundColor = '#c6daf9'
drophint.style.left = (main.clientWidth / 2 - drophint.clientWidth / 2) + 'px'
drophint.style.display = 'block'
}, false)
main.addEventListener('dragleave', function dragleave (ev) {
main.style.backgroundColor = 'white'
drophint.style.display = 'none'
}, false)
main.addEventListener('dragover', function dragover (ev) {
ev.stopPropagation()
ev.preventDefault()
main.style.backgroundColor = '#c6daf9'
drophint.style.display = 'block'
}, false)
main.addEventListener('drop', function drop (ev) {
ev.stopPropagation()
ev.preventDefault()
main.style.backgroundColor = 'white'
drophint.style.display = 'none'
handleFiles(ev.dataTransfer.files)
}, false)
tr = inputTable.appendChild(document.createElement('tr'))
td = tr.appendChild(document.createElement('td'))
td.setAttribute('colspan', '3')
const textarea = td.appendChild(document.createElement('textarea'))
textarea.id = 'export_output'
textarea.style.width = Math.max(500, main.clientWidth - 50) + 'px'
// Bottom buttons
main.appendChild(document.createElement('br'))
main.appendChild(document.createElement('br'))
const buttons = main.appendChild(document.createElement('div'))
const closeButton = buttons.appendChild(document.createElement('button'))
closeButton.appendChild(document.createTextNode('Close'))
closeButton.id = 'exportmenu_close'
closeButton.style.color = 'black'
closeButton.addEventListener('click', function onCloseButtonClick () {
document.querySelector('.deluxeexportmenu').remove()
// Un-blur background
if (document.getElementById('centerWrapper')) {
document.getElementById('centerWrapper').style.filter = ''
}
})
})
window.setTimeout(function moveMenuIntoView () {
main.style.maxHeight = (document.documentElement.clientHeight - 40) + 'px'
main.style.maxWidth = (document.documentElement.clientWidth - 40) + 'px'
main.style.left = Math.max(20, 0.5 * (document.body.clientWidth - main.clientWidth)) + 'px'
}, 0)
}
function checkBackupStatus () {
GM.getValue('myalbums_lastbackup', '').then(function myalbumsLastBackupLoaded (value) {
if (!value || !value.includes('#####')) {
// Set current date (install date) as initial value
GM.setValue('myalbums_lastbackup', '0#####' + (new Date()).toJSON())
return
}
const parts = value.split('#####')
const n0 = parseInt(parts[0])
const lastBackup = new Date(parts[1])
if ((new Date()) - lastBackup > BACKUP_REMINDER_DAYS * 86400000) {
GM.getValue('myalbums', '{}').then(function myalbumsLoaded (str) {
const n1 = Object.keys(JSON.parse(str)).length
if (Math.abs(n0 - n1) > 10) {
showBackupHint(lastBackup, Math.abs(n0 - n1))
}
})
}
})
}
function showBackupHint (lastBackup, changedRecords) {
const since = timeSince(lastBackup)
document.head.appendChild(document.createElement('style')).innerHTML = `
.backupreminder {
position:fixed;
height:auto;
overflow:auto;
top:110%;
left:40%;
z-index:200;
padding:5px;
transition: top 1s;
border:2px solid black;
border-radius:10px;
color:black;
background:white;
}
`
// Blur background
if (document.getElementById('centerWrapper')) { document.getElementById('centerWrapper').style.filter = 'blur(4px)' }
const main = document.body.appendChild(document.createElement('div'))
main.className = 'backupreminder'
main.innerHTML = `<h2>Bandcamp script (Deluxe Edition)</h2>
<h1>Backup reminder</h1>
<p>
Your last backup was ${since} ago. Since then, you played ${changedRecords} albums.
</p>
`
main.appendChild(document.createElement('br'))
const buttons = main.appendChild(document.createElement('div'))
const closeButton = buttons.appendChild(document.createElement('button'))
closeButton.appendChild(document.createTextNode('Close'))
closeButton.id = 'backupreminder_close'
closeButton.style.color = 'black'
closeButton.addEventListener('click', function onCloseButtonClick () {
document.querySelector('.backupreminder').remove()
// Un-blur background
if (document.getElementById('centerWrapper')) {
document.getElementById('centerWrapper').style.filter = ''
}
})
buttons.appendChild(document.createTextNode(' '))
const backupButton = buttons.appendChild(document.createElement('button'))
backupButton.appendChild(document.createTextNode('Start backup'))
backupButton.style.color = '#0687f5'
backupButton.addEventListener('click', function backupButtonClick () {
document.getElementById('backupreminder_close').click()
mainMenu(true)
})
buttons.appendChild(document.createTextNode(' '))
const ignoreButton = buttons.appendChild(document.createElement('button'))
ignoreButton.appendChild(document.createTextNode('Disable reminder'))
ignoreButton.style.color = 'black'
ignoreButton.addEventListener('click', async function ignoreButtonClick () {
getEnabledFeatures(await GM.getValue('enabledFeatures', false))
if (allFeatures.backupReminder.enabled) {
allFeatures.backupReminder.enabled = false
}
await GM.setValue('enabledFeatures', JSON.stringify(allFeatures))
document.getElementById('backupreminder_close').click()
})
window.setTimeout(function moveMenuIntoView () {
main.style.maxHeight = (document.documentElement.clientHeight - 40) + 'px'
main.style.maxWidth = (document.documentElement.clientWidth - 40) + 'px'
main.style.left = Math.max(20, 0.5 * (document.documentElement.clientWidth - main.clientWidth)) + 'px'
main.style.top = Math.max(20, 0.3 * document.documentElement.clientHeight) + 'px'
}, 0)
}
function downloadMp3FromLink (ev, a, addSpinner, removeSpinner) {
const url = a.href
if (GM.download) {
// Use Tampermonkey GM.download function
ev.preventDefault()
addSpinner(a)
GM.download({
url: url,
name: a.download || 'default.mp3',
onerror: function downloadMp3FromLinkOnError () {
window.alert('Could not download via GM.download')
document.location.href = url
},
ontimeout: function downloadMp3FromLinkOnTimeout () {
window.alert('Could not download via GM.download. Time out.')
document.location.href = url
},
onload: function downloadMp3FromLinkOnLoad () {
window.setTimeout(() => removeSpinner(a), 500)
}
})
}
if (!url.startsWith('http') || navigator.userAgent.indexOf('Chrome') !== -1) {
// Just open the link normally (no prevent default)
addSpinner(a)
window.setTimeout(() => removeSpinner(a), 1000)
return
}
// Use GM.xmlHttpRequest to download and offer data uri
ev.preventDefault()
addSpinner(a)
GM.xmlHttpRequest({
method: 'GET',
overrideMimeType: 'text/plain; charset=x-user-defined',
url: url,
onload: function onMp3Load (response) {
a.href = 'data:audio/mpeg;base64,' + base64encode(response.responseText)
window.setTimeout(() => a.click(), 10)
},
onerror: function onMp3LoadError (response) {
window.alert('Could not download via GM.xmlHttpRequest')
document.location.href = url
}
})
}
function addDownloadLinksToAlbumPage () {
document.head.appendChild(document.createElement('style')).innerHTML = `
.download-col .downloaddisk:hover {
text-decoration:none
}
/* From http://www.designcouch.com/home/why/2013/05/23/dead-simple-pure-css-loading-spinner/ */
.downspinner {
height:16px;
width:16px;
margin:0px auto;
position:relative;
display:inline-block;
animation: spinnerrotation 3s infinite linear;
cursor:wait;
}
@keyframes spinnerrotation {
from {transform: rotate(0deg)}
to {transform: rotate(359deg)}
}`
const addSpiner = function downloadLinksOnAlbumPageAddSpinner (el) {
el.style = ''
el.classList.add('downspinner')
}
const removeSpinner = function downloadLinksOnAlbumPageRemoveSpinner (el) {
el.classList.remove('downspinner')
el.style = 'background:#1cea1c; border-radius:5px; padding:1px; opacity:0.5'
}
const TralbumData = unsafeWindow.TralbumData
if (TralbumData && TralbumData.hasAudio && !TralbumData.freeDownloadPage && TralbumData.trackinfo) {
var hoverdiv = document.querySelectorAll('.download-col div')
if (hoverdiv.length > 0) {
// Album page
for (let i = 0; i < TralbumData.trackinfo.length; i++) {
const t = TralbumData.trackinfo[i]
for (var prop in t.file) {
const mp3 = t.file[prop].replace(/^\/\//, 'http://')
const a = document.createElement('a')
a.className = 'downloaddisk'
a.href = mp3
a.download = (t.track_num == null ? '' : ((t.track_num > 9 ? '' : '0') + t.track_num + '. ')) + fixFilename(TralbumData.artist + ' - ' + t.title) + '.mp3'
a.title = 'Download ' + prop
a.appendChild(document.createTextNode(NOEMOJI ? '\u2193' : '\uD83D\uDCBE'))
a.addEventListener('click', function onDownloadLinkClick (ev) {
downloadMp3FromLink(ev, this, addSpiner, removeSpinner)
})
hoverdiv[i].appendChild(a)
break
}
}
} else if (document.querySelector('#trackInfo .download-link')) {
// Single track page
const t = TralbumData.trackinfo[0]
const mp3 = t.file[Object.keys(t.file)[0]].replace(/^\/\//, 'http://')
const a = document.createElement('a')
a.className = 'downloaddisk'
a.href = mp3
a.download = (t.track_num == null ? '' : ((t.track_num > 9 ? '' : '0') + t.track_num + '. ')) + fixFilename(TralbumData.artist + ' - ' + t.title) + '.mp3'
a.title = 'Download ' + prop
a.appendChild(document.createTextNode(NOEMOJI ? '\u2193' : '\uD83D\uDCBE'))
a.addEventListener('click', function onDownloadLinkClick (ev) {
downloadMp3FromLink(ev, this, addSpiner, removeSpinner)
})
document.querySelector('#trackInfo .download-link').parentNode.appendChild(a)
}
}
}
function addMainMenuButtonToUserNav () {
const userNav = document.getElementById('user-nav')
const li = userNav.insertBefore(document.createElement('li'), userNav.firstChild)
li.className = 'menubar-item hoverable'
li.title = 'userscript settings - Bandcamp script (Deluxe Edition)'
const a = li.appendChild(document.createElement('a'))
a.className = 'settingssymbol'
a.style.fontSize = '24px'
if (NOEMOJI) {
a.appendChild(document.createTextNode('\u26ED'))
} else {
a.appendChild(document.createTextNode('\u2699\uFE0F'))
}
li.addEventListener('click', () => mainMenu())
}
const maintenanceContent = document.querySelector('.content')
if (maintenanceContent && maintenanceContent.textContent.indexOf('are offline') !== -1) {
console.log('Maintenance detected')
} else {
if (NOEMOJI) {
document.head.appendChild(document.createElement('style')).innerHTML = '@font-face{font-family:Symbola;src:local("Symbola Regular"),local("Symbola"),url(https://cdnjs.cloudflare.com/ajax/libs/mathquill/0.10.1/font/Symbola.woff2) format("woff2"),url(https://cdnjs.cloudflare.com/ajax/libs/mathquill/0.10.1/font/Symbola.woff) format("woff"),url(https://cdnjs.cloudflare.com/ajax/libs/mathquill/0.10.1/font/Symbola.ttf) format("truetype"),url(https://cdnjs.cloudflare.com/ajax/libs/mathquill/0.10.1/font/Symbola.otf) format("opentype"),url(https://cdnjs.cloudflare.com/ajax/libs/mathquill/0.10.1/font/Symbola.svg#Symbola) format("svg")}' +
'.sharepanelchecksymbol,.bdp_check_onlinkhover_symbol,.bdp_check_onchecked_symbol,.volumeSymbol,.downloaddisk,.downloadlink,#user-nav .settingssymbol,.listened-symbol,.mark-listened-symbol,.minimizebutton{font-family:Symbola,Quivira,"Segoe UI Symbol","Segoe UI Emoji",Arial,sans-serif}' +
'.downloaddisk,.downloadlink{font-weight: bolder}'
}
GM.getValue('enabledFeatures', false).then(function onEnabledFeaturesLoad (value) {
getEnabledFeatures(value)
if (allFeatures.releaseReminder.enabled) {
showPastReleases()
}
if (document.querySelector('#indexpage .indexpage_list_cell a[href^="/album/"] img')) {
// Index pages are almost like discography page. To make them compatible, let's add the class names from the discography page
document.querySelector('#indexpage').classList.add('music-grid')
document.querySelectorAll('#indexpage .indexpage_list_cell').forEach(cell => cell.classList.add('music-grid-item'))
document.head.appendChild(document.createElement('style')).innerHTML = '#indexpage .ipCellImage { position:relative }'
}
if (allFeatures.discographyplayer.enabled && document.querySelector('.music-grid .music-grid-item a[href^="/album/"] img')) {
// Discography page
makeAlbumCoversGreat()
}
if (document.querySelector('.inline_player')) {
// Album page with player
if (allFeatures.thetimehascome.enabled) {
removeTheTimeHasComeToOpenThyHeartWallet()
}
if (allFeatures.albumPageVolumeBar.enabled) {
window.setTimeout(addVolumeBarToAlbumPage, 3000)
}
if (allFeatures.albumPageDownloadLinks.enabled) {
window.setTimeout(addDownloadLinksToAlbumPage, 500)
}
}
if (document.querySelector('.share-panel-wrapper-desktop')) {
// Album page with Share,Embed,Wishlist links
if (allFeatures.markasplayedEverywhere.enabled) {
addListenedButtonToCollectControls()
}
if (document.location.hash === '#collect-wishlist') {
clickAddToWishlist()
}
if (document.querySelector('*[itemprop="datePublished"]')) {
addReleaseDateButton()
}
}
if (document.getElementById('user-nav')) {
addMainMenuButtonToUserNav()
}
if (document.getElementById('carousel-player') || document.querySelector('.play-carousel')) {
window.setTimeout(makeCarouselPlayerGreatAgain, 5000)
}
if (document.querySelector('ol#grid-tabs li') && document.querySelector('.fan-bio-pic-upload-container')) {
const listenedTabLink = makeListenedListTabLink()
if (document.location.hash === '#listened-tab') {
window.setTimeout(function resetGridTabs () {
document.querySelector('#grid-tabs .active').classList.remove('active')
document.querySelector('#grids .grid.active').classList.remove('active')
listenedTabLink.classList.add('active')
listenedTabLink.click()
}, 500)
}
}
if (allFeatures.albumPageVolumeBar.enabled) {
restoreVolume()
}
if (allFeatures.markasplayedEverywhere.enabled) {
makeAlbumLinksGreat()
}
if (allFeatures.backupReminder.enabled) {
checkBackupStatus()
}
if (CAMPEXPLORER) {
let lastTagsText = document.querySelector('.tags') ? document.querySelector('.tags').textContent : ''
window.setInterval(function () {
const tagsText = document.querySelector('.tags') ? document.querySelector('.tags').textContent : ''
if (lastTagsText !== tagsText) {
lastTagsText = tagsText
if (allFeatures.discographyplayer.enabled) {
makeAlbumCoversGreat()
}
if (allFeatures.markasplayedEverywhere.enabled) {
makeAlbumLinksGreat()
}
}
}, 3000)
}
GM.getValue('musicPlayerState', '{}').then(function restoreState (s) {
if (s !== '{}') {
GM.setValue('musicPlayerState', '{}')
musicPlayerRestoreState(JSON.parse(s))
}
})
})
}
