/*
 * Ext JS Library
 * Copyright(c) 2006-2015 Sencha Inc.
 * [email protected]
 * http://www.sencha.com/license
 */
 
/**
 * From code originally written by David Davis
 *
 * For HTML5 video to work, your server must
 * send the right content type, for more info see:
 * <http://developer.mozilla.org/En/HTML/Element/Video>
 * @class Ext.ux.desktop.Video
 */
Ext.define('Ext.ux.desktop.Video', {
    extend: 'Ext.panel.Panel',
 
    alias: 'widget.video',
    layout: 'fit',
    autoplay: false,
    controls: true,
    bodyStyle: 'background-color:#000;color:#fff',
    html: '',
    
    /* eslint-disable max-len, indent */
    tpl: [
        '<video id="{id}-video" autoPlay="{autoplay}" controls="{controls}" poster="{poster}" start="{start}" loopstart="{loopstart}" loopend="{loopend}" autobuffer="{autobuffer}" loop="{loop}" style="width:100%;height:100%">',
            '<tpl for="src">',
                '<source src="{src}" type="{type}"/>',
            '</tpl>',
            '{html}',
        '</video>'
    ],
    /* eslint-enable max-len, indent */
 
    initComponent: function() {
        var me = this,
            fallback, cfg, chrome;
 
        if (me.fallbackHTML) {
            fallback = me.fallbackHTML;
        }
        else {
            fallback = "Your browser does not support HTML5 Video. ";
 
            if (Ext.isChrome) {
                fallback += 'Upgrade Chrome.';
            }
            else if (Ext.isGecko) {
                fallback += 'Upgrade to Firefox 3.5 or newer.';
            }
            else {
                chrome = '<a href="http://www.google.com/chrome">Chrome</a>';
                
                fallback += 'Please try <a href="http://www.mozilla.com">Firefox</a>';
 
                if (Ext.isIE) {
                    fallback += ', ' + chrome +
                        ' or <a href="http://www.apple.com/safari/">Safari</a>.';
                }
                else {
                    fallback += ' or ' + chrome + '.';
                }
            }
        }
        
        me.fallbackHTML = fallback;
 
        cfg = me.data =
            Ext.copyTo(
                {
                    tag: 'video',
                    html: fallback
                },
                me,
                'id,poster,start,loopstart,loopend,playcount,autobuffer,loop'
            );
 
        // just having the params exist enables them
        if (me.autoplay) {
            cfg.autoplay = 1;
        }
        
        if (me.controls) {
            cfg.controls = 1;
        }
 
        // handle multiple sources
        if (Ext.isArray(me.src)) {
            cfg.src = me.src;
        }
        else {
            cfg.src = [{ src: me.src }];
        }
        
        me.callParent();
    },
 
    afterRender: function() {
        var me = this,
            el;
        
        me.callParent();
        
        me.video = me.body.getById(me.id + '-video');
        el = me.video.dom;
        me.supported = (el && el.tagName.toLowerCase() === 'video');
        
        if (me.supported) {
            me.video.on('error', me.onVideoError, me);
        }
    },
    
    getFallback: function() {
        return '<h1 style="background-color:#ff4f4f;padding: 10px;">' + this.fallbackHTML + '</h1>';
    },
 
    onVideoError: function() {
        var me = this;
 
        me.video.remove();
        me.supported = false;
        me.body.createChild(me.getFallback());
    },
 
    doDestroy: function() {
        var me = this,
            video = me.video,
            videoDom;
 
        video = me.video;
        
        if (me.supported && video) {
            videoDom = video.dom;
            
            if (videoDom && videoDom.pause) {
                videoDom.pause();
            }
            
            video.remove();
            me.video = null;
        }
 
        me.callParent();
    }
});