Add mp3 player into files_videoviewer (enhancement)

[tombou]

Since the start, I always want to be able to play in browser mp3 files. So, I've check the current video player and it can plays mp3 without problem. Also, there was some issues playing some mp4 files generated from a cell phone on some browser, so I've added a direct download link for my own purpose.

What I suggest, is to check if it is possible to add these kind of features in next release of the app/owncloud.

Here is my workaround which is located at "owncloud/apps/files_videoviewer/js/viewer.js"

var videoViewer = {
    UI : {
        videoTemplate : '<video type="%type%" src="%src%" width="%width%" height="%height%" id="media_element" class="video-js vjs-default-skin" controls preload>' + 
        '</video>',
        show : function () {
            $('<div id="videoviewer_overlay" style="display:none;"></div><div id="videoviewer_popup"><div id="videoviewer_container"><a class="box-close" id="box-close" href="#"></a><h3>'+escapeHTML(videoViewer.file)+'</h3><a href="'+videoViewer.location+'">Click here to download</a></div></div>').appendTo('body');

            $('#videoviewer_overlay').fadeIn('fast',function(){
                $('#videoviewer_popup').fadeIn('fast');
            });
            $('#box-close').click(videoViewer.hidePlayer);
            var size = videoViewer.UI.getSize(videoViewer.mime);
            var playerView = videoViewer.UI.videoTemplate.replace(/%width%/g, size.width)
                                .replace(/%height%/g, size.height)
                                .replace(/%type%/g, videoViewer.mime)
                                .replace(/%src%/g, videoViewer.location)
            ;

            $(playerView).prependTo('#videoviewer_container');
        },
        hide : function() {
            $('#videoviewer_popup').fadeOut('fast', function() {
                $('#videoviewer_overlay').fadeOut('fast', function() {
                    $('#videoviewer_popup').remove();
                    $('#videoviewer_overlay').remove();
                });
            });
        },
        getSize : function (mimeType) {
            var size;
            if(mimeType.toLowerCase().indexOf('audio') !== -1){
                size = {width: '320', height: '100'};
            }else if ($(document).width()>'680' && $(document).height()>'520' ){
                size = {width: '640', height: '480'};
            } else {
                size = {width: '320', height: '240'};
            }

            return size;
        },
    },
    mime : null,
    file : null,
    location : null,
    player : null,
    mimeTypes : [
        'video/mp4',
        'video/webm',
        'video/x-flv',
        'application/ogg',
        'video/ogg',
        'video/quicktime',
        'video/x-msvideo',
        'video/x-matroska',
        'video/x-ms-asf',
        'audio/mpeg',
        'audio/ogg',
        'audio/webm',
        'audio/wav',
        'audio/x-m4a',
        'audio/m4a',
        'audio/x-mpegurl',
        'audio/mp4'
    ],
    onView : function(file) {
        videoViewer.file = file;
        videoViewer.location = videoViewer.getMediaUrl(file);
        videoViewer.mime = FileActions.getCurrentMimeType();

        OC.addScript('files_videoviewer','mediaelement-and-player', function(){
            OC.addScript('files_videoviewer','mep-extra', videoViewer.showPlayer);
        });
    },
    showPlayer : function() {
        videoViewer.UI.show();

        videoViewer.player = new MediaElementPlayer('#media_element', {
            features: ['playpause','progress','current','duration','tracks','volume','fullscreen'],
            pluginPath : OC.filePath('files_videoviewer', 'js', ''),
            pauseOtherPlayers: true,
            enablePluginDebug: true,
            plugins: ['flash','silverlight'],
            pluginVars: 'isvideo=true',
            success: function (player, node) {
                //set the size (for flash otherwise no video just sound!)
                player.setVideoSize($(node).width(), $(node).height());
                player.load();
                player.pause();
            },
            error: function (m) { 
                console.log(m);
            }
        });
    },
    hidePlayer : function() {
        videoViewer.player = false;
        delete videoViewer.player;

        videoViewer.UI.hide();
    },
    getMediaUrl : function(file) {
        var dir = $('#dir').val();
        return fileDownloadPath(dir, file);
    },
    onKeyDown : function(e) {
        if (e.keyCode == 27 && !$('.mejs-container-fullscreen').length && videoViewer.player) {
             videoViewer.hidePlayer();
        }
    },
    log : function(message){
        console.log(message);
    }
};

$(document).ready(function() {  
    if (typeof FileActions !== 'undefined') {
        for (var i = 0; i < videoViewer.mimeTypes.length; ++i) {
            var mime = videoViewer.mimeTypes[i];
            FileActions.register(mime, 'View', OC.PERMISSION_READ, '', videoViewer.onView);
            FileActions.setDefault(mime, 'View');
        }
        $(document).keydown(videoViewer.onKeyDown);
    }
});

Hope it may help someone. It works currently with owncloud 7.0.4.

[karlitschek]

@VicDeo What do you think?