misuzu/assets/misuzu.js/embed/audio.js

#include watcher.js

const MszAudioEmbedPlayerEvents = function() {
    return [
        'play', 'pause', 'stop',
        'mute', 'volume',
        'rate', 'duration', 'time',
    ];
};

const MszAudioEmbed = function(player) {
    const element = $element('div', { classList: ['aembed', 'aembed-' + player.getType()] }, player);

    return {
        get element() { return element; },
        get player() { return player; },
        appendTo: function(target) {
            target.appendChild(element);
        },
        insertBefore: function(ref) {
            $insertBefore(ref, element);
        },
        nuke: function() {
            element.remove();
        },
        replaceElement(target) {
            $insertBefore(target, element);
            target.remove();
        },
    };
};

const MszAudioEmbedPlayer = function(metadata, options) {
    options = options || {};

    const shouldAutoplay = options.autoplay === undefined || options.autoplay;
    const haveNativeControls = options.nativeControls !== undefined && options.nativeControls;

    const playerAttrs = {
        src: metadata.url,
        style: {},
    };

    if(shouldAutoplay)
        playerAttrs.autoplay = 'autoplay';
    if(haveNativeControls)
        playerAttrs.controls = 'controls';

    const watchers = new MszWatchers;
    watchers.define(MszAudioEmbedPlayerEvents());

    const element = $element('audio', playerAttrs);

    const pub = {
        get element() { return element; },
        appendTo: function(target) {
            target.appendChild(element);
        },
        insertBefore: function(ref) {
            $insertBefore(ref, element);
        },
        nuke: function() {
            element.remove();
        },
        replaceElement(target) {
            $insertBefore(target, element);
            target.remove();
        },
        getType: function() { return 'external'; },
    };

    pub.watch = (name, handler) => watchers.watch(name, handler);
    pub.unwatch = (name, handler) => watchers.unwatch(name, handler);

    element.addEventListener('play', function() { watchers.call('play', pub); });

    const pPlay = function() { element.play(); };
    pub.play = pPlay;

    const pPause = function() { element.pause(); };
    pub.pause = pPause;

    let stopCalled = false;
    element.addEventListener('pause', function() {
        watchers.call(stopCalled ? 'stop' : 'pause', pub);
        stopCalled = false;
    });

    const pStop = function() {
        stopCalled = true;
        element.pause();
        element.currentTime = 0;
    };
    pub.stop = pStop;

    const pIsPlaying = function() { return !element.paused; };
    pub.isPlaying = pIsPlaying;

    const pIsMuted = function() { return element.muted; };
    pub.isMuted = pIsMuted;

    let lastMuteState = element.muted;
    element.addEventListener('volumechange', function() {
        if(lastMuteState !== element.muted) {
            lastMuteState = element.muted;
            watchers.call('mute', pub, [lastMuteState]);
        } else
            watchers.call('volume', pub, [element.volume]);
    });

    const pSetMuted = function(state) { element.muted = state; };
    pub.setMuted = pSetMuted;

    const pGetVolume = function() { return element.volume; };
    pub.getVolume = pGetVolume;

    const pSetVolume = function(volume) { element.volume = volume; };
    pub.setVolume = pSetVolume;

    const pGetPlaybackRate = function() { return element.playbackRate; };
    pub.getPlaybackRate = pGetPlaybackRate;

    element.addEventListener('ratechange', function() {
        watchers.call('rate', pub, [element.playbackRate]);
    });

    const pSetPlaybackRate = function(rate) { element.playbackRate = rate; };
    pub.setPlaybackRate = pSetPlaybackRate;

    window.addEventListener('durationchange', function() {
        watchers.call('duration', pub, [element.duration]);
    });

    const pGetDuration = function() { return element.duration; };
    pub.getDuration = pGetDuration;

    window.addEventListener('timeupdate', function() {
        watchers.call('time', pub, [element.currentTime]);
    });

    const pGetTime = function() { return element.currentTime; };
    pub.getTime = pGetTime;

    const pSeek = function(time) { element.currentTime = time; };
    pub.seek = pSeek;

    return pub;
};

const MszAudioEmbedPlaceholder = function(metadata, options) {
    options = options || {};

    if(typeof options.player !== 'function' && typeof options.onclick !== 'function')
        throw 'Neither a player nor an onclick handler were provided.';

    let title = [];
    let album;
    if(metadata.media !== undefined && metadata.media.tags !== undefined) {
        const tags = metadata.media.tags;

        if(tags.title !== undefined) {
            if(tags.artist !== undefined) {
                title.push($element(
                    'span',
                    { className: 'aembedph-info-title-artist' },
                    tags.artist,
                ));
                title.push(' - ');
            }

            title.push($element(
                'span',
                { className: 'aembedph-info-title-title' },
                tags.title,
            ));
        } else {
            title.push($element(
                'span',
                { className: 'aembedph-info-title-title' },
                metadata.title,
            ));
        }

        if(tags.album !== undefined && tags.album !== tags.title)
            album = tags.album;
    }

    const infoChildren = [];

    infoChildren.push($element(
        'h1',
        { className: 'aembedph-info-title' },
        ...title,
    ));

    infoChildren.push($element(
        'p',
        { className: 'aembedph-info-album' },
        album,
    ));

    infoChildren.push($element(
        'div',
        { className: 'aembedph-info-site' },
        metadata.site_name,
    ));

    const style = [];
    if(typeof metadata.color !== 'undefined')
        style.push('--aembedph-colour: ' + metadata.color);

    const coverBackground = $element(
        'div',
        { className: 'aembedph-bg' },
        $element('img', {
            alt: '',
            src: metadata.image,
            onerror: function(ev) {
                coverBackground.classList.add('aembedph-bg-none');
            },
        }),
    );

    const coverPreview = $element(
        'div',
        { className: 'aembedph-info-cover' },
        $element('img', {
            alt: '',
            src: metadata.image,
            onerror: function(ev) {
                coverPreview.classList.add('aembedph-info-cover-none');
            },
        }),
    );

    let element;
    const pub = {
        get element() { return element; },
    };

    element = $element(
        'div',
        {
            className: ('aembedph aembedph-' + (options.type || 'external')),
            style: style.join(';'),
            title: metadata.title,
        },
        coverBackground,
        $element(
            'div',
            { className: 'aembedph-fg' },
            $element(
                'div',
                { className: 'aembedph-info' },
                coverPreview,
                $element(
                    'div',
                    { className: 'aembedph-info-body' },
                    ...infoChildren
                ),
            ),
            $element(
                'div',
                {
                    className: 'aembedph-play',
                    onclick: function(ev) {
                        if(ev.target.tagName.toLowerCase() === 'a')
                            return;

                        if(typeof options.onclick === 'function') {
                            options.onclick(ev);
                            return;
                        }

                        const player = new options.player(metadata, options);

                        const embed = new MszAudioEmbed(player);
                        if(options.autoembed === undefined || options.autoembed)
                            embed.replaceElement(element);

                        if(typeof options.onembed === 'function')
                            options.onembed(embed);
                    },
                },
                $element(
                    'div',
                    { className: 'aembedph-play-internal', },
                    $element('i', { className: 'fas fa-play fa-3x fa-fw' }),
                ),
                $element(
                    'div',
                    { className: 'aembedph-play-external' },
                    $element(
                        'a',
                        {
                            className: 'aembedph-play-external-link',
                            href: metadata.url,
                            target: '_blank',
                            rel: 'noopener',
                        },
                        `or listen on ${metadata.site_name}?`
                    ),
                ),
            ),
        ),
    );

    pub.appendTo = function(target) { target.appendChild(element); };
    pub.insertBefore = function(ref) { $insertBefore(ref, element); };
    pub.nuke = function() {
        element.remove();
    };
    pub.replaceElement = function(target) {
        $insertBefore(target, element);
        target.remove();
    };

    return pub;
}