add extjs 6.0.1 sources

[extjs.git] / extjs / modern / modern / src / Video.js

/**\r
 * Provides a simple Container for HTML5 Video.\r
 *\r
 * ## Notes\r
 *\r
 * - There are quite a few issues with the `<video>` tag on Android devices. On Android 2+, the video will\r
 * appear and play on first attempt, but any attempt afterwards will not work.\r
 *\r
 * ## Useful Properties\r
 *\r
 * - {@link #url}\r
 * - {@link #autoPause}\r
 * - {@link #autoResume}\r
 *\r
 * ## Useful Methods\r
 *\r
 * - {@link #method-pause}\r
 * - {@link #method-play}\r
 * - {@link #toggle}\r
 *\r
 * ## Example\r
 *\r
 *     var panel = Ext.create('Ext.Panel', {\r
 *         fullscreen: true,\r
 *         items: [\r
 *             {\r
 *                 xtype    : 'video',\r
 *                 x        : 600,\r
 *                 y        : 300,\r
 *                 width    : 175,\r
 *                 height   : 98,\r
 *                 url      : "porsche911.mov",\r
 *                 posterUrl: 'porsche.png'\r
 *             }\r
 *         ]\r
 *     });\r
 */\r
Ext.define('Ext.Video', {\r
    extend: 'Ext.Media',\r
    xtype: 'video',\r
\r
    config: {\r
        /**\r
         * @cfg {String/Array} url\r
         * Location of the video to play. This should be in H.264 format and in a .mov file format.\r
         * @accessor\r
         */\r
\r
        /**\r
         * @cfg {String} posterUrl\r
         * Location of a poster image to be shown before showing the video.\r
         * @accessor\r
         */\r
        posterUrl: null,\r
\r
        /**\r
         * @cfg\r
         * @inheritdoc\r
         */\r
        baseCls: Ext.baseCSSPrefix + 'video',\r
\r
        /**\r
         * @cfg {Boolean} controls\r
         * Determines if native controls should be shown for this video player.\r
         */\r
        controls: true\r
    },\r
\r
    template: [{\r
        /**\r
         * @property {Ext.dom.Element} ghost\r
         * @private\r
         */\r
        reference: 'ghost',\r
        classList: [Ext.baseCSSPrefix + 'video-ghost']\r
    }, {\r
        tag: 'video',\r
        reference: 'media',\r
        classList: [Ext.baseCSSPrefix + 'media']\r
    }],\r
\r
    initialize: function() {\r
        var me = this;\r
\r
        me.callParent();\r
\r
        me.media.hide();\r
\r
        me.ghost.on({\r
            tap: 'onGhostTap',\r
            scope: me\r
        });\r
\r
        me.media.on({\r
            pause: 'onPause',\r
            scope: me\r
        });\r
\r
        if (Ext.os.is.Android4 || Ext.os.is.iPad) {\r
            this.isInlineVideo = true;\r
        }\r
    },\r
\r
    applyUrl: function(url) {\r
        return [].concat(url);\r
    },\r
\r
    updateUrl: function(newUrl) {\r
        var me = this,\r
            media = me.media,\r
            newLn = newUrl.length,\r
            existingSources = media.query('source'),\r
            oldLn = existingSources.length,\r
            i;\r
\r
\r
        for (i = 0; i < oldLn; i++) {\r
            Ext.fly(existingSources[i]).destroy();\r
        }\r
\r
        for (i = 0; i < newLn; i++) {\r
            media.appendChild(Ext.Element.create({\r
                tag: 'source',\r
                src: newUrl[i]\r
            }));\r
        }\r
\r
        if (me.isPlaying()) {\r
            me.play();\r
        }\r
    },\r
\r
    updateControls: function(value) {\r
        this.media.set({controls:value ? true : undefined});\r
    },\r
\r
    onActivate: function() {\r
        this.media.setTop(0);\r
    },\r
\r
    onDeactivate: function() {\r
        this.pause();\r
        this.media.setTop(-2000);\r
        this.ghost.show();\r
    },\r
\r
    /**\r
     * @private\r
     * Called when the {@link #ghost} element is tapped.\r
     */\r
    onGhostTap: function() {\r
        var me = this,\r
            media = this.media,\r
            ghost = this.ghost;\r
\r
        media.show();\r
        // Browsers which support native video tag display only, move the media down so\r
        // we can control the Viewport\r
        ghost.hide();\r
        me.play();\r
    },\r
\r
    /**\r
     * @private\r
     * native video tag display only, move the media down so we can control the Viewport\r
     */\r
    onPause: function() {\r
        this.callParent(arguments);\r
        if (!this.isInlineVideo) {\r
            this.media.setTop(-2000);\r
            this.ghost.show();\r
        }\r
    },\r
\r
    /**\r
     * @private\r
     * native video tag display only, move the media down so we can control the Viewport\r
     */\r
    onPlay: function() {\r
        this.callParent(arguments);\r
        this.media.setTop(0);\r
    },\r
\r
    /**\r
     * Updates the URL to the poster, even if it is rendered.\r
     * @param {Object} newUrl\r
     */\r
    updatePosterUrl: function(newUrl) {\r
        var ghost = this.ghost;\r
        if (ghost) {\r
            ghost.setStyle('background-image', 'url(' + newUrl + ')');\r
        }\r
    }\r
});\r