add extjs 6.0.1 sources

[extjs.git] / extjs / examples / classic / desktop / app / VideoWindow.js

/*!\r
* Copyright(c) 2006-2014 Sencha Inc.\r
* licensing@sencha.com\r
* http://www.sencha.com/license\r
*/\r
\r
// From code originally written by David Davis (http://www.sencha.com/blog/html5-video-canvas-and-ext-js/)\r
\r
Ext.define('Desktop.VideoWindow', {\r
    extend: 'Ext.ux.desktop.Module',\r
\r
    uses: [\r
        'Ext.ux.desktop.Video'\r
    ],\r
\r
    id:'video',\r
    windowId: 'video-window',\r
\r
    tipWidth: 160,\r
    tipHeight: 96,\r
\r
    init : function(){\r
        this.launcher = {\r
            text: 'About Ext JS',\r
            iconCls:'video'\r
        }\r
    },\r
\r
    createWindow : function(){\r
        var me = this, desktop = me.app.getDesktop(),\r
            win = desktop.getWindow(me.windowId);\r
\r
        if (!win) {\r
            win = desktop.createWindow({\r
                id: me.windowId,\r
                title: 'About Ext JS',\r
                width: 740,\r
                height: 480,\r
                iconCls: 'video',\r
                animCollapse: false,\r
                border: false,\r
\r
                layout: 'fit',\r
                items: [\r
                    {\r
                        xtype: 'video',\r
                        id: 'video-player',\r
                        src: [\r
                            // browser will pick the format it likes most:\r
                            { src: 'http://dev.sencha.com/desktopvideo.mp4', type: 'video/mp4' },\r
                            { src: 'http://dev.sencha.com/desktopvideo.ogv', type: 'video/ogg' },\r
                            { src: 'http://dev.sencha.com/desktopvideo.mov', type: 'video/quicktime' }\r
                        ],\r
                        poster: 'http://b.vimeocdn.com/ts/148/397/148397103_640.jpg',\r
                        autobuffer: true,\r
                        autoplay : true,\r
                        controls : true,\r
                        /* default */\r
                        listeners: {\r
                            afterrender: function(video) {\r
                                me.videoEl = video.video.dom;\r
\r
                                if (video.supported) {\r
                                    me.tip = new Ext.tip.ToolTip({\r
                                        anchor   : 'bottom',\r
                                        dismissDelay : 0,\r
                                        height   : me.tipHeight,\r
                                        width    : me.tipWidth,\r
                                        renderTpl: [\r
                                            '<canvas width="', me.tipWidth,\r
                                                  '" height="', me.tipHeight, '">'\r
                                        ],\r
                                        renderSelectors: {\r
                                            body: 'canvas'\r
                                        },\r
                                        listeners: {\r
                                            afterrender: me.onTooltipRender,\r
                                            show: me.renderPreview,\r
                                            scope: me\r
                                        }\r
                                    }); // tip\r
                                }\r
                            }\r
                        }\r
                    }\r
                ],\r
                listeners: {\r
                    beforedestroy: function() {\r
                        me.tip = me.ctx = me.videoEl = null;\r
                    }\r
                }\r
            });\r
        }\r
\r
        if (me.tip) {\r
            me.tip.setTarget(win.taskButton.el);\r
        }\r
\r
        return win;\r
    },\r
\r
    onTooltipRender: function (tip) {\r
        // get the canvas 2d context\r
        var el = tip.body.dom, me = this;\r
        me.ctx = el.getContext && el.getContext('2d');\r
    },\r
\r
    renderPreview: function() {\r
        var me = this;\r
\r
        if ((me.tip && !me.tip.isVisible()) || !me.videoEl) {\r
            return;\r
        }\r
\r
        if (me.ctx) {\r
            try {\r
                me.ctx.drawImage(me.videoEl, 0, 0, me.tipWidth, me.tipHeight);\r
            } catch(e) {}\r
        }\r
\r
        // 20ms to keep the tooltip video smooth\r
        Ext.Function.defer(me.renderPreview, 20, me);\r
    }\r
});\r