show track detail on Amazon (Prime) Music CloudPlayer for UserScript

amcp-trackinfo.user.js

// ==UserScript==
// @name        AMCP trackinfo
// @namespace   http://noromanba.flavors.me
// @description show track detail on Amazon (Prime) Music CloudPlayer for UserScript
// @include     https://www.amazon.tld/gp/dmusic/cloudplayer/*
// @include     https://music.amazon.tld/*
// @grant       none
// @noframes
// @run-at      document-end
// @version     2016.04.21.2
// @homepage    https://gist.github.com/noromanba/27614896d2c2819c916e
// @downloadURL https://gist.github.com/noromanba/27614896d2c2819c916e/raw/amcp-trackinfo.user.js
// @license     MIT License http://nrm.mit-license.org/2015
// @author      noromanba   http://noromanba.flavors.me
// @icon        https://openclipart.org/image/32px/svg_to_png/22267/yoderj-mid-OK-icon.png
// @icon64      https://openclipart.org/image/64px/svg_to_png/22267/yoderj-mid-OK-icon.png
// ==/UserScript==

// Icon (PD by yoderj)
// https://openclipart.org/detail/22267/midok-icon

// Devel
// https://gist.github.com/noromanba/27614896d2c2819c916e


// rel.
// window.amznMusic
// window.__flash__*
(() => {
    'use strict';

    const state = document.body.querySelector('#dragonflyTransport');
    if (!state) return;

    // TBD fixed to "Amazon Music" or omit SERVICE_NAME
    const SERVICE_NAME = document.title;

    const selectTrackInfo = () => {
        const track = state.querySelector('.trackInfoContainer');

        const title = (track.querySelector('.trackTitle') || {}).textContent;
        const artist = (track.querySelector('.trackArtist a[title]') || {}).title;
        // replaced to playlist-name when playing from playlist, so can't get album-name
        const album = (track.querySelector('.trackSourceLink a[title]') || {}).title;

        return { title, artist, album };
    };

    const refreshTrackInfo = () => {
        if (!state.querySelector('.noMusicInNowPlaying.hidden')) return;

        const track = selectTrackInfo();

        const trackinfo = [
            track.title || '?',
            track.artist || '?',
            track.album || '?',
            SERVICE_NAME || 'Amazon Music'
        ].join(' - ');
        if (document.title === trackinfo) return;

        document.title = trackinfo;

        //*
        // FIXME
        // - observe cover mode toggle strictly
        //  - no changes when 1st play
        //  - old album name when toggle
        const coverView = document.body.querySelector('.nowPlayingViewContainer.shown');
        if (!coverView) return;

        const artistContainer = coverView.querySelector('.trackInformation .trackArtist');
        // XXX append album section
        //*/
        const artistLabel = artistContainer.querySelector('.artist');
        artistLabel.textContent = `${track.artist} - ${track.album}`
        /*/
        // TODO fix css for album
        if (coverView.querySelector('.trackInformation .trackAlbum')) return;
        const albumContainer = artistContainer.cloneNode(true);

        const albumLabel = albumContainer.querySelector('.artist');
        albumContainer.className = albumLabel.className.replace(/Artist/, 'Album');
        albumLabel.className.replace(/artist/, 'album');
        albumLabel.textContent = track.album || '?';

        artistContainer.parentNode.insertBefore(albumContainer, artistContainer.nextSibling);
        //*/
    };

    new MutationObserver(records => {
        records.forEach(record => {
            const node = record.target;
            if (node.id === 'currentTime') return;

            refreshTrackInfo();
        });
    }).observe(state, { childList: true, subtree: true });

    // TODO coverView is null when DOMContentLoaded; needs lazyload/observe WTF
//    new MutationObserver(() => {
//        refreshTrackInfo();
//    }).observe(coverView, { attributes: true });
})();