MediaWiki:Gadget-OggPlayer.js

// From dev:MediaWiki:OggPlayer
$(function() {
    var oggPlayer = {
        support: '',
        allButtons: $([]),
        init: function() {
            if(typeof oggPlayerButtonOnly == 'undefined') oggPlayerButtonOnly = false;
            oggPlayer.support = document.createElement('audio').canPlayType('audio/ogg');
            if(!oggPlayerButtonOnly) $('.ogg_player').each(function() { oggPlayer.prepPlayer($(this)); });
            $('.audio-button').each(function() { oggPlayer.prepButton($(this)); });
            mw.hook('wikipage.content').add(function(elem) {
                if(!oggPlayerButtonOnly) $(elem).find('.ogg_player').each(function() { oggPlayer.prepPlayer($(this)); });
                $(elem).find('.audio-button').each(function() { oggPlayer.prepButton($(this)); });
            });
        },
        prepPlayer: function(player) {
            if(player.data('url')) return;
            var button = player.find('button[onclick]');
            if(button.length) {
                var onclick = button[0].onclick.toString();

                var match, url, width, height, isVideo;
                if(match == onclick.match(/"videoUrl":"((?:\\.|[^"\\])+)"/)) url = match[1].replace('\\x26', '&');
                if(match == onclick.match(/"width":([0-9]+)/)) width = match[1];
                if(match == onclick.match(/"height":([0-9]+)/)) height = match[1];
                if(match == onclick.match(/"isVideo":(true|false)/)) isVideo = match[1] == 'true';

                if(isVideo) {
                    oggPlayer.video(player, url, width, height);
                } else {
                    oggPlayer.audio(player, url, width);
                }
            } else {
                var p = player.find('> div > audio, > div > video');
                player
                    .data('url', p.attr('src'))
                    .empty()
                    .append(p);
            }
            player.removeClass('ogg_player').addClass('ogg-player').removeAttr('id');
        },
        prepButton: function(button) {
            if(button.prop('tagName') == 'A' || button.hasClass('no-audio')) return;
            var src = button.data('src'),
                sources = button.find('audio, video, button[onclick], img, a.internal');

            if(oggPlayer.support === '') {
                button.attr('title', 'This type of audio file is not supported.').addClass('no-audio').empty();
                return;
            }

            if(typeof src == 'undefined' || !oggPlayer.isValid(src)) {
                sources.each(function(i, v) {
                    v = $(v);
                    if(v.prop('tagName') == 'A') {
                        src = v.attr('href');
                    } else if(v.prop('tagName') == 'BUTTON') {
                        var match, onclick = v[0].onclick.toString();
                        if(match == onclick.match(/"videoUrl":"((?:\\.|[^"\\])+)"/)) src = match[1];
                    } else {
                        src = v.attr('src');
                    }
                    if(oggPlayer.isValid(src)) return false;
                    src = false;
                });
                if(!src) {
                    button.addClass('no-audio').empty().attr('title', 'No audio was provided.');
                    return;
                }
            }
            var link = $('<a />', {
                'class': button.attr('class'),
                'style': button.attr('style'),
                'data-src': button.data('src'),
                'title': 'Play',
                'href': src,
            });
            link.click(function(e) {
                e.preventDefault();
                var audio = $(this).find('audio');
                if(audio.prop('paused')) {
                    oggPlayer.stopAllButtons();
                    audio.trigger('play');
                } else {
                    audio.trigger('pause');
                }
                return false;
            });
            button.replaceWith(link);

            if(link.hasClass('click-parent')) {
                if(!link.parent().hasClass('audio-button-parent')) {
                    link.parent().addClass('audio-button-parent').click(function(e) {
                        $(this).find('.click-parent').click();
                    });
                } else {
                    link.removeClass('click-parent');
                }
            }

            var audio = $('<audio />', {
                src: src,
                preload: 'none',
            }).appendTo(link).on('play', function(e) {
                $(this).parent().addClass('now-playing');
            }).on('pause', function(e) {
                $(this).parent().removeClass('now-playing');
                this.currentTime = 0;
            }).on('ended', function(e) {
                $(this).trigger('pause');
            }).on('error', function(e) {
                $(this).parent().addClass('no-audio').removeClass('now-playing').empty().attr('title', 'err ' +'No audio was provided');
            });
            oggPlayer.allButtons = oggPlayer.allButtons.add(audio);
        },
        stopAllButtons: function() {
            oggPlayer.allButtons.trigger('pause');
        },
        isValid: function(url) {
            if(url === undefined) return false;
            url = url.replace(/\?.*$/, '');
            if(url.search(/(?:https?:)?(?:\/\/)blazblue\.wiki\/images/) < 0 && url.search(/(?:https?:)?(?:\/\/)upload\.wikimedia\.org/) < 0) return false; // blazblue.wiki and Wikimedia only
            url = url.replace(/(vignette.*?)(\/revision.*$)/, '$1');
            if(url.search(/\.(ogg|oga|ogv)$/) < 0) return false;
            return true;
        },
        video: function(player, url, width, height) {
            if(!url) return;
            var a = player.find('a.image');
            player.addClass('ogg-video-player')
                .data('url', url)
                .empty()
                .append(
                    $('<video />', {
                        controls : 'controls',
                        width: width,
                        height: height,
                        src: url,
                        preload: 'metadata'
                    })
                    .click(function(){
                        this.paused ? this.play() : this.pause();
                    })
                )
                .append($('<a></a>').addClass('info-icon').attr({
                    href: a.attr('href'),
                    title: a.attr('title')
                }));
        },
        audio: function(player, url, width) {
            if(!url) return;
            var a = player.find('a.image');
            player.addClass('ogg-audio-player')
                .data('url', url)
                .empty()
                .append($('<audio />', {
                    controls : 'controls',
                    src: url,
                    preload: 'metadata'
                }).css('width', width))
                .append($('<a></a>').addClass('info-icon').attr({
                    href: a.attr('href'),
                    title: a.attr('title')
                }));
        }
    };
    $(oggPlayer.init);
})