Freegal hover listing

$(`<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
}

To do: For compilations, show artist for each track