Commit 2683cbf8 authored by Rene Saarsoo's avatar Rene Saarsoo
Browse files

Add title and description to video page. 

Created separate component for showing the video page.

For now throwing away the next/prev functionality.
parent 080c15a6

template/app/controller/Videos.js

+14 −30
Original line number Diff line number Diff line
@@ -35,19 +35,18 @@ Ext.define('Docs.controller.Videos', { 
    },



    loadVideo: function(url, noHistory) {

        var videoRe = url.match(/[0-9]+$/),

            videoId = videoRe[0];

        var videoId = url.match(/[0-9]+$/)[0];



        if (this.currentVideo === videoId) {

            return this.activateVideoCard();

            this.activateVideoCard();

            return;

        }

        this.currentVideo = videoId;



        noHistory || Docs.History.push(url);

        this.fireEvent('showVideo', url);



        var ifr = document.getElementById("videoplayer");

        ifr.contentWindow.location.replace(this.getUrl(videoId));

        Ext.getCmp('video').load(this.getVideo(videoId));

        this.activateVideoCard();

    },
@@ -56,31 +55,16 @@ Ext.define('Docs.controller.Videos', { 
        Ext.getCmp('treecontainer').showTree('videotree');

    },



    getUrl: function(videoId) {

        return 'http://player.vimeo.com/video/' + videoId + '?portrait=0&color=4CC208';

    },



    setUrl: function(videoId) {

        this.currentVideo = videoId;

        document.getElementById('videoplayer').setAttribute('src', this.getUrl(videoId));

    },



    next: function() {

        if (!this.currentVideo) return;

        var idx = Ext.Array.indexOf(this.videoIds(), this.currentVideo);

        this.setUrl((idx == this.videoIds().length) ? 0 : this.videoIds()[idx + 1]);

    },



    prev: function() {

        if (!this.currentVideo) return;

        var idx = Ext.Array.indexOf(this.videoIds(), this.currentVideo);

        this.setUrl((idx == 0) ? this.videoIds()[this.videoIds().length - 1] : this.videoIds()[idx - 1]);

    },



    videoIds: function() {

        if (!this._videoIds) {

            this._videoIds = Ext.Array.flatten(Ext.Array.map(Docs.data.videos, function(v) { return Ext.Array.map(v.videos, function(w) { return w.id; }); }));

    // Given an ID returns corresponding video description object

    getVideo: function(id) {

        if (!this.map) {

            this.map = {};

            Ext.Array.forEach(Docs.data.videos, function(group) {

                Ext.Array.forEach(group.items, function(v) {

                    this.map[v.id] = v;

                }, this);

            }, this);

        }

        return this._videoIds;

        return this.map[id];

    }

});

template/app/view/Viewport.js

+2 −1
Original line number Diff line number Diff line
@@ -12,6 +12,7 @@ Ext.define('Docs.view.Viewport', { 
        'Docs.view.cls.Container',

        'Docs.view.guides.Index',

        'Docs.view.videos.Index',

        'Docs.view.videos.Container',

        'Docs.view.examples.Index'

    ],
@@ -125,7 +126,7 @@ Ext.define('Docs.view.Viewport', { 
                                    id: 'videoindex'

                                },

                                {

                                    xtype: 'container',

                                    xtype: 'videocontainer',

                                    id: 'video',

                                    html: '<iframe id="videoplayer" src="egIframe.html" width="640" height="360" frameborder="0" style="margin: 15px;"></iframe>'

                                }

template/app/view/videos/Container.js

0 → 100644
+24 −0
Original line number Diff line number Diff line 
/**

 * The video page.

 *

 * Renders the video itself and its title + description.

 */

Ext.define('Docs.view.videos.Container', {

    extend: 'Ext.container.Container',

    alias: 'widget.videocontainer',



    /**

     * Loads video into the page.

     * @param {Object} video

     */

    load: function(video) {

        this.tpl = new Ext.XTemplate(

            '<iframe id="videoplayer"',

            ' src="http://player.vimeo.com/video/{id}?portrait=0&amp;color=4CC208"',

            ' width="640" height="360" frameborder="0"></iframe>',

            '<h1>{title}</h1>',

            '<p>{description}</p>'

        );

        this.update(this.tpl.apply(video));

    }

});
 
 No newline at end of file

template/resources/sass/viewport.scss

+7 −0
Original line number Diff line number Diff line
@@ -778,6 +778,13 @@ a { 
    &.copy {

      background-position: -30px -85px; } } }





// Some margins for the stuff on video page.

#video {

  iframe, p, h1 {

    margin: 15px; } }





.doctabs {

  @include icons;

  padding-left: 10px;