add extjs 6.0.1 sources

[extjs.git] / extjs / packages / ux / classic / src / desktop / Video.js

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