oxjs/source/Ox.UI/js/Video/Ox.VideoPanelPlayer.js

// vim: et:ts=4:sw=4:sts=4:ft=javascript

/*@
Ox.VideoPanelPlayer <f:Ox.Element> VideoPanelPlayer Object
    () ->              <f> VideoPanelPlayer Object
    (options) ->       <f> VideoPanelPlayer Object
    (options, self) -> <f> VideoPanelPlayer Object
    options <o> Options object
    self    <o> shared private variable
@*/

Ox.VideoPanelPlayer = function(options, self) {

    self = self || {};
    var that = Ox.Element({}, self)
            .defaults({
                annotationsSize: 256,
                duration: 0,
                height: 0,
                loop: false,
                muted: false,
                paused: false,
                playInToOut: false,
                points: [0, 0],
                position: 0,
                poster: '',
                scaleToFill: false,
                showAnnotations: true,
                showControls: true,
                subtitles: [],
                video: '',
                volume: 1,
                width: 0
            })
            .options(options || {})
            .css({
                height: self.options.height + 'px',
                width: self.options.width + 'px'
            })
            .bindEvent({
                resize: resizeElement,
                key_shift_a: function() {
                    that.toggleAnnotations();
                },
                key_shift_c: function() {
                    that.toggleControls();
                },
                key_shift_s: function() {
                    that.toggleSize();
                },
                key_space: function() {
                    that.togglePlay();
                }
            });

    self.fullscreen = false;
    //alert(JSON.stringify([self.playerHeight, self.playerWidth, self.videoCSS]))

    self.$player = Ox.Element()
        .css({
            overflowX: 'hidden',
            overflowY: 'hidden'
        });

    self.$video = Ox.VideoPlayer({
            controlsTop: ['fullscreen', 'scale', 'title', 'find'],
            controlsBottom: ['play', 'volume', 'timeline', 'position', 'resolution'],
            enableFind: true,
            enableKeyboard: true,
            enableMouse: true,
            height: getPlayerHeight(),
            muted: self.options.muted,
            paused: true,
            position: self.options.position,
            scaleToFill: self.options.scaleToFill,
            subtitles: self.options.subtitles,
            timeline: self.options.timeline,
            video: self.options.video,
            volume: self.options.volume,
            width: getPlayerWidth()
        })
        .bindEvent({
            position: setPosition,
            muted: function(data) {
                that.triggerEvent('muted', data);
            },
            scale: function(data) {
                that.triggerEvent('scale', data);
            },
            volume: function(data) {
                that.triggerEvent('volume', data);
            }
        })
        .appendTo(self.$player);

    self.$controls = Ox.Element()
        .bindEvent({
            toggle: toggleControls
        });

    self.$timeline = Ox.LargeVideoTimeline({
            duration: self.options.duration,
            getImageURL: self.options.getTimelineImageURL,
            position: self.options.position,
            subtitles: self.options.subtitles,
            videoId: self.options.videoId,
            width: getTimelineWidth()
        })
        .css({left: '4px', top: '4px'})
        .bindEvent({
            position: changeTimeline
        })
        .appendTo(self.$controls);

    self.$panel = Ox.SplitPanel({
            elements: [
                {
                    element: self.$player
                },
                {
                    collapsed: !self.options.showControls,
                    collapsible: true,
                    element: self.$controls,
                    size: 80
                }
            ],
            orientation: 'vertical'
        })
        .bindEvent({
            resize: resizePanel
        });

    self.$annotations = Ox.Element()
        .bindEvent({
            resize: resizeAnnotations,
            resizeend: resizeendAnnotations,
            toggle: toggleAnnotations
        });

    that.$element = Ox.SplitPanel({
            elements: [
                {
                    element: self.$panel
                },
                {
                    collapsed: !self.options.showAnnotations,
                    collapsible: true,
                    element: self.$annotations,
                    resizable: true,
                    resize: [192, 256, 320, 384],
                    size: self.options.annotationsSize
                }
            ],
            orientation: 'horizontal'
        });

    function changeTimeline(data) {
        self.options.position = data.position;
        self.$video.options({position: self.options.position});
    }

    function getPlayerHeight() {
        return self.options.height -
            self.options.showControls * 80 - 1;
    }

    function getPlayerWidth() {
        return self.options.width -
            (self.options.showAnnotations && !self.fullscreen)
            * self.options.annotationsSize - 1;
    }

    function getTimelineWidth() {
        return self.options.width -
            (self.options.showAnnotations && !self.fullscreen) *
            self.options.annotationsSize - 16 - 1;
    }

    function resizeAnnotations(event, data) {
        // called on annotations resize
        self.options.annotationsSize = data;
        self.$video.options({
            width: getPlayerWidth()
        });
        self.$timeline.options({
            width: getTimelineWidth()
        });
    }

    function resizeendAnnotations(event, data) {
        self.options.annotationsSize = data;
        that.triggerEvent('resizeannotations', {
            annotationsSize: self.options.annotationsSize
        });
    }

    function resizeElement(event, data) {
        // called on browser toggle
        self.options.height = data;
        self.$video.options({
            height: getPlayerHeight()
        });
    }

    function resizePanel(event, data) {
        // called on annotations toggle
        self.$video.options({
            width: getPlayerWidth()
        });
        self.$timeline.options({
            width: getTimelineWidth()
        });
    }

    function setPosition(event, data) {
        self.options.position = data.position;
        //self.$video.position(self.options.position);
        self.$timeline.options({
            position: self.options.position
        });            
    }

    function toggleAnnotations(event, data) {
        self.options.showAnnotations = !data.collapsed;
        self.$video.options({
            height: getPlayerHeight()
        });
        that.triggerEvent('toggleannotations', {
            showAnnotations: self.options.showAnnotations
        });
    }

    function toggleControls(event, data) {
        self.options.showControls = !data.collapsed;
        self.$video.options({
            height: getPlayerHeight()
        });
        that.triggerEvent('togglecontrols', {
            showControls: self.options.showControls
        });
    }

    self.setOption = function(key, value) {
        if (key == 'height') {
            self.$video.options({
                height: getPlayerHeight()
            });
        } else if (key == 'position') {
            self.$video.position(value);
        } else if (key == 'width') {
            self.$video.options({
                width: getPlayerWidth()
            });
            self.$timeline.options({
                width: getTimelineWidth()
            });
        }
    }

    that.toggleAnnotations = function() {
        that.$element.toggle(1);
        //that.toggleAnnotations(null, !self.options.showAnnotations);
    };

    that.toggleControls = function() {
        self.$panel.toggle(1);
        //that.toggleControls(null, !self.options.showControls);
    };

    return that;

}