Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
$(`<style>
.fp-album-wrapper:not(:hover) .fp-track-listing {
display: none;
margin-left: -0.5em;
}
.album-title .fp-track-listing {
position: absolute;
z-index: 1;
}
.fp-track-listing {
background-color: transparent !important;
padding: 0 10px 10px 0;
}
.fp-track-listing table {
background-color: white;
border: solid #cccccc 1px;
box-shadow: 2px 2px 3px 1px rgba(0, 0, 0, 0.2) !important;
}
.fp-track-listing tr:nth-of-type(even) {
background-color: #f8f8f8;
}
.fp-track-listing td {
padding: 0.25em 0.5em;
}
.fp-track-listing td.fp-index,
.fp-track-listing td.fp-time {
text-align: right;
}
.fp-track-listing td.fp-artist {
font-style: italic;
}
</style>`).appendTo('head');
// Add useful classes
$('.album-container').closest('li').addClass('fp-album-wrapper')
$('.album-container > a').mouseenter(function() {window.fpOnAlbumHover(this)})
window.fpOnAlbumHover = (link) => {
const wrapper = $(link).closest('.fp-album-wrapper')
fpCheckTrackListing(wrapper)
}
window.fpCheckTrackListing = (wrapper) => {
if (wrapper.find('.fp-track-listing').length === 0) {
fpGetListing(wrapper)
.then(album => {
// console.log(`${album.title} by ${album.artist}`)
// album.tracks.forEach(track => console.log(`${track.time}: ${track.title} by ${track.artist}`))
const doShowArtist = ! album.tracks.every(track => track.artist === album.tracks[0].artist)
const html = album.tracks.map((track, i) => `<tr>
<td class="fp-index">${i + 1}</td>
<td class="fp-title">${track.title}</td>
${doShowArtist ? '<td class="fp-artist">' + track.artist + '</td>' : ''}
<td class="fp-time">${track.time}</td>
</tr>`)
html.unshift('<div class="fp-track-listing"><table><tbody>')
html.push('</tbody></table></div>')
wrapper.find('.album-title').append(html.join(''))
})
}
}
window.fpGetListing = (wrapper) => {
// given a wrapper element, get the track list and save and return a promise
if (wrapper.data('track-listing-promise')) {
return wrapper.data('track-listing-promise')
}
const link = wrapper.find('.album-container > a')
const url = link.prop('href')
// console.log(`Fetching ${url}`)
const promise = $.get(url)
.then(result => {
const container = $('<div>' + result.replace(/^[\s\S]*<body.*?>|<\/body>[\s\S]*$/ig, '') + '</div>').find('.tracklist-container')
// console.log('Got tracklist:', container)
const album = {
title: container.find('.album-title').text().trim(),
artist: container.find('.artist-name').text().trim(),
tracks: container.find('.tracklist').map(function () {
const track = jQuery(this)
return {
title: track.find('> .song').text().trim(),
artist: track.find('> .artist').text().trim(),
time: track.find('> .time').text().trim(),
}
}).get()
}
wrapper.removeData('track-listing-promise')
return album
})
wrapper.data('track-listing-promise', promise)
return promise
}
@bennettmcelwee

This comment has been minimized.

Copy link
Owner Author

@bennettmcelwee bennettmcelwee commented Jan 22, 2018

To do: For compilations, show artist for each track

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment