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

'use strict';

/*@
Ox.VideoTimelinePlayer <f:Ox.Element> Video Timeline Player
    (options[, self]) -> <o> Video Timeline Player
    options <o> Options
    self <o> Shared private variable
@*/
Ox.VideoTimelinePlayer = function(options, self) {

    self = self || {};
    var that = Ox.Element({}, self)
        .defaults({
            censored: [],
            censoredIcon: '',
            censoredTooltip: '',
            cuts: [],
            duration: 0,
            find: '',
            followPlayer: false,
            getFrameURL: null,
            getLargeTimelineURL: null,
            height: 0,
            'in': 0,
            matches: [],
            muted: false,
            out: 0,
            paused: false,
            position: 0,
            showMilliseconds: false,
            smallTimelineURL: '',
            subtitles: [],
            timeline: '',
            timelines: [],
            video: '',
            videoRatio: 1,
            volume: 1,
            width: 0
        })
        .options(options || {})
        .update({
            height: setHeight,
            paused: function() {
                self.options.paused = !self.options.paused;
                togglePaused();
            },
            position: setPosition,
            width: setWidth
        });

    self.fps = 25;
    self.frame = self.options.position * self.fps;
    self.frames = self.options.duration * self.fps;
    self.tileWidth = 1500;
    self.tileHeight = 64;
    self.margin = 8;
    self.contentWidth = self.options.width - 2 * self.margin;
    self.contentHeight = self.options.height - 32;
    self.positionWidth = 48
        + !!self.options.showMilliseconds * 2
        + self.options.showMilliseconds * 6;
    self.tiles = Math.ceil(self.frames / self.tileWidth);
    self.videoWidth = Math.round(self.tileHeight * self.options.videoRatio);
    self.lines = getLines(); // may update self.contentWidth
    self.videoLines = getVideoLines();

    self.$menubar = Ox.Bar({size: 16});

    self.$menuButton = Ox.MenuButton({
            items: [
                {id: 'timelines', title: 'Timeline', disabled: true},
                {group: 'timeline', min: 1, max: 1, items: Ox.map(
                    self.options.timelines,
                    function(timeline) {
                        return Ox.extend({
                            checked: timeline.id == self.options.timeline,
                            disabled: true
                        }, timeline);
                    }
                )},
                {},
                {
                    id: 'followPlayer',
                    title: 'Follow Player While Playing',
                    checked: self.options.followPlayer
                }
            ],
            style: 'square',
            title: 'set',
            tooltip: 'Options',
            type: 'image'
        })
        .css({float: 'left'})
        .bindEvent({
            change: function(data) {
                var id = data.id;
                if (id == 'timeline') {
                    // data.checked[0].id
                } else if (id == 'followPlayer') {
                    self.options.followPlayer = data.checked;
                    if (!self.options.paused && self.options.followPlayer) {
                        self.scrollTimeout && clearTimeout(self.scrollTimeout);
                        scrollToPosition();
                    }
                    that.triggerEvent('follow', {
                        follow: self.options.followPlayer
                    });
                }
            }
        })
        .appendTo(self.$menubar);

    self.$scrollButton = Ox.Button({
            style: 'symbol',
            title: 'arrowDown',
            tooltip: 'Scroll to Player',
            type: 'image'
        })
        .css({float: 'right'})
        .hide()
        .bindEvent({
            click: function() {
                self.scrollTimeout && clearTimeout(self.scrollTimeout);
                scrollToPosition();
            }
        })
        .appendTo(self.$menubar);

    self.$timelinePlayer = Ox.Element()
        .css({overflowX: 'hidden', overflowY: 'auto'})
        .on({
            mousedown: mousedown,
            mouseleave: mouseleave,
            mousemove: mousemove,
            scroll: scroll
        })
        .bindEvent({
            mousedown: function() {
                this.gainFocus();
            },
            key_0: toggleMuted,
            key_down: function() {
                self.options.position += self.contentWidth / self.fps;
                setPosition();
            },
            key_equal: function() {
                changeVolume(0.1);
            },
            key_enter: function() {
                scrollToPosition();
            },
            key_left: function() {
                self.options.position -= self.videoWidth / self.fps;
                setPosition();
            },
            key_minus: function() {
                changeVolume(-0.1);
            },
            key_right: function() {
                self.options.position += self.videoWidth / self.fps;
                setPosition();
            },
            key_shift_left: function() {
                self.options.position -= 1 / self.fps;
                setPosition();
            },
            key_shift_right: function() {
                self.options.position += 1 / self.fps;
                setPosition();
            },
            key_space: function() {
                togglePaused()
            },
            key_up: function() {
                self.options.position -= self.contentWidth / self.fps;
                setPosition();
            }
        });

    self.$playerbar = Ox.Bar({size: 16});

    self.$playButton = Ox.Button({
            style: 'symbol',
            title: 'play',
            tooltip: 'Play',
            type: 'image'
        })
        .css({
            float: 'left'
        })
        .bindEvent({
            click: function() {
                togglePaused();
            }
        })
        .appendTo(self.$playerbar);

    self.$muteButton = Ox.Button({
            style: 'symbol',
            title: self.options.muted ? 'unmute' : 'mute',
            tooltip: self.options.muted ? 'Unmute' : 'Mute',
            type: 'image'
        })
        .css({float: 'left'})
        .bindEvent({
            click: toggleMuted
        })
        .appendTo(self.$playerbar);

    self.$smallTimeline = getSmallTimeline().appendTo(self.$playerbar);

    self.$position = Ox.Element()
        .addClass('OxPosition')
        .css({
            width: self.positionWidth - 4 + 'px'
        })
        .html(formatPosition())
        .on({
            click: function() {
                if (!self.options.paused) {
                    self.playOnSubmit = true;
                    togglePaused();
                }
                self.$position.hide();
                self.$positionInput
                    .value(formatPosition())
                    .show()
                    .focusInput(false);
            }
        })
        .appendTo(self.$playerbar);

    self.$positionInput = Ox.Input({
            value: formatPosition(),
            width: self.positionWidth
        })
        .addClass('OxPositionInput')
        .bindEvent({
            blur: submitPositionInput,
            submit: submitPositionInput
        })
        .appendTo(self.$playerbar);

    self.$positionInput.children('input').css({
            width: (self.positionWidth - 6) + 'px',
            fontSize: '9px'
        });

    self.$panel = Ox.SplitPanel({
            elements: [
                {
                    element: self.$menubar,
                    size: 16
                },
                {
                    element: self.$timelinePlayer
                },
                {
                    element: self.$playerbar,
                    size: 16
                }
            ],
            orientation: 'vertical'
        })
        .addClass('OxVideoTimelinePlayer');

    that.setElement(self.$panel);

    self.$lines = [];
    self.$timelines = [];
    self.$interfaces = [];

    self.$timeline = renderTimeline();
    //setSubtitles();
    Ox.loop(self.lines, function(i) {
        addLine(i);
    });
    Ox.last(self.$lines).css({
        height: self.tileHeight + 1.5 * self.margin + 'px'
    });

    self.$frameBox = $('<div>')
        .css({
            position: 'absolute',
            right: 0,
            top: self.margin / 2 - 1 + 'px',
            width: self.videoWidth + 'px',
            height: self.tileHeight + 'px',
            borderTop: '1px solid rgb(128, 128, 128)',
            borderBottom: '1px solid rgb(128, 128, 128)',
            background: 'rgb(0, 0, 0)'
        })
        .appendTo(self.$timelines[self.videoLines[1]][0]);

    self.$frame = Ox.VideoPlayer({
            censored: self.options.censored,
            censoredIcon: self.options.censoredIcon,
            censoredTooltip: self.options.censoredTooltip,
            duration: self.options.duration,
            height: self.tileHeight,
            position: self.options.position,
            scaleToFill: true,
            type: 'in',
            video: self.options.getFrameURL,
            width: self.videoWidth
        })
        .bindEvent({
            censored: function() {
                that.triggerEvent('censored');
            }
        })
        .appendTo(self.$frameBox);

    $('<div>')
        .addClass('OxFrameInterface')
        .css({
            position: 'absolute',
            left: 0,
            top: 0,
            width: self.videoWidth + 'px',
            height: self.tileHeight + 'px'
        })
        .appendTo(self.$frameBox);

    self.$videoBox = $('<div>')
        .css({
            position: 'absolute',
            right: 0,
            top: self.margin / 2 - 1 + 'px',
            width: self.videoWidth + 'px',
            height: self.tileHeight + 'px',
            borderTop: '1px solid rgb(128, 128, 128)',
            borderBottom: '1px solid rgb(128, 128, 128)',
            background: 'rgb(0, 0, 0)',
            zIndex: 5
        })
        .appendTo(self.$timelines[self.videoLines[0]][0]);

    self.$video = Ox.VideoPlayer({
            censored: self.options.censored,
            censoredIcon: self.options.censoredIcon,
            censoredTooltip: self.options.censoredTooltip,
            duration: self.options.duration,
            height: self.tileHeight,
            muted: self.options.muted,
            paused: self.options.paused,
            position: self.options.position,
            scaleToFill: true,
            video: self.options.video,
            width: self.videoWidth
        })
        .bindEvent({
            censored: function() {
                that.triggerEvent('censored');
            },
            ended: function() {
                togglePaused(true);
            },
            playing: function(data) {
                self.options.position = data.position;
                setPosition(true);
            }
        })
        .appendTo(self.$videoBox);

    $('<div>')
        .addClass('OxFrameInterface OxVideoInterface')
        .css({
            position: 'absolute',
            left: 0,
            top: 0,
            width: self.videoWidth + 'px',
            height: self.tileHeight + 'px'
        })
        .appendTo(self.$videoBox);

    self.$tooltip = Ox.Tooltip({
            animate: false
        })
        .css({
            textAlign: 'center'
        });

    setTimeout(function() {
        scrollToPosition();
    });

    function addLine(i) {
        self.$lines[i] = $('<div>')
            .css({
                position: 'absolute',
                left: self.margin + 'px',
                top: self.margin / 2 + i * (self.tileHeight + self.margin) + 'px',
                width: self.contentWidth + 'px',
                height: self.tileHeight + self.margin + 'px',
                overflowX: 'hidden'
            })
            .appendTo(self.$timelinePlayer);
        self.$timelines[i] = [
            self.$timeline.clone()
                .css({
                    width: self.frame + self.videoWidth + 'px',
                    marginLeft: -i * self.contentWidth + 'px'
                }),
            self.$timeline.clone()
                .css({
                    marginLeft: -i * self.contentWidth + self.videoWidth - 1 + 'px'
                })
        ];
        self.$lines[i]
            .append(self.$timelines[i][1])
            .append(self.$timelines[i][0]);
    }

    function changeVolume(num) {
        self.options.volume = Ox.limit(self.options.volume + num, 0, 1);
        setVolume();
    }

    function formatPosition(position) {
        position = Ox.isUndefined(position) ? self.options.position : position;
        return Ox.formatDuration(position, self.options.showMilliseconds);
    }

    function getLines(scrollbarIsVisible) {
        // Returns the number of lines
        var lines;
        if (scrollbarIsVisible) {
            self.contentWidth -= Ox.UI.SCROLLBAR_SIZE;
        }
        lines = Math.ceil(
            (self.frames - 1 + self.videoWidth) / self.contentWidth
        );
        return !scrollbarIsVisible && lines * (
                self.tileHeight + self.margin
            ) + self.margin > self.contentHeight ? getLines(true) : lines;
    }

    function getPosition(e) {
        return (
            e.offsetX ? e.offsetX
            : e.clientX - $(e.target).offset().left
        ) / self.fps;
    }

    function getPositionScrollTop() {
        // Returns the target scrolltop if the player is not fully visible,
        // otherwise returns null
        var scrollTop = self.$timelinePlayer.scrollTop(),
            videoTop = [
                self.margin + Ox.min(self.videoLines) * (self.tileHeight + self.margin),
                self.margin + Ox.max(self.videoLines) * (self.tileHeight + self.margin)
            ],
            offset = self.contentHeight - self.tileHeight - self.margin;
        return videoTop[0] < scrollTop + self.margin ? videoTop[0] - self.margin
            : videoTop[1] > scrollTop + offset ? videoTop[1] - offset
            : null;
    }

    function getSmallTimeline() {
        var $timeline = Ox.SmallVideoTimeline({
                duration: self.options.duration,
                imageURL: self.options.smallTimelineURL,
                mode: 'player',
                paused: self.options.paused,
                position: self.options.position,
                showMilliseconds: self.options.showMilliseconds,
                width: getSmallTimelineWidth()
            })
            .css({float: 'left'})
            .css({background: '-moz-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(64, 64, 64, 0.5))'})
            .css({background: '-o-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(64, 64, 64, 0.5))'})
            .css({background: '-webkit-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(64, 64, 64, 0.5))'})
            .bindEvent({
                position: function(data) {
                    self.options.position = data.position;
                    setPosition();
                    that.triggerEvent('position', {
                        position: self.options.position
                    });
                }
            });
        $timeline.children().css({marginLeft: '32px'});
        $timeline.find('.OxInterface').css({marginLeft: '32px'});
        return $timeline;
    }

    function getSmallTimelineWidth() {
        return self.options.width - 32 - self.positionWidth;
    }

    function getSubtitle(position) {
        var subtitle = '';
        Ox.forEach(self.options.subtitles, function(v) {
            if (v['in'] <= position && v.out > position) {
                subtitle = v;
                Ox.Break();
            }
        });
        return subtitle;
    }

    function getVideoLine() {
        self.videoLine = Math.floor(getVideoFrame() / self.contentWidth);
    }

    function getVideoLines() {
        // Returns the lines the video is at, as an array of two line numbers.
        // If the video fits in one line, they're both the same, otherwise, the
        // line that has most of the video (and thus the player) comes first.
        var videoFrame = getVideoFrame(),
            videoLeft = videoFrame % self.contentWidth,
            lines = [];
        lines[0] = Math.floor(videoFrame / self.contentWidth);
        lines[1] = lines[0] + (
            videoLeft + self.videoWidth > self.contentWidth ? 1 : 0
        )
        if (videoLeft + Math.floor(self.videoWidth / 2) > self.contentWidth) {
            lines.reverse();
        }
        return lines;
    }

    function getVideoFrame() {
        return Math.floor(self.options.position * self.fps);
    }

    function mousedown(e) {
        var $target = $(e.target),
            isTimeline = $target.is('.OxTimelineInterface'),
            isVideo = $target.is('.OxFrameInterface');
        if (isTimeline) {
            self.options.position = getPosition(e);
            setPosition();
            if (!self.triggered) {
                that.triggerEvent('position', {
                    position: self.options.position
                });
                self.triggered = true;
                setTimeout(function() {
                    self.triggered = false;
                }, 250);
            }
        } else if (isVideo) {
            togglePaused();
        }
    }

    function mouseleave() {
        self.$tooltip.hide();
    }

    function mousemove(e) {
        var $target = $(e.target),
            isTimeline = $target.is('.OxTimelineInterface'),
            isVideo = $target.is('.OxFrameInterface'),
            position, subtitle;
        if (isTimeline || isVideo) {
            position = isTimeline ? getPosition(e) : self.options.position;
            subtitle = getSubtitle(position);
            self.$tooltip.options({
                    title: (
                        subtitle
                            ? '<span class=\'OxBright\'>' +
                            Ox.highlight(subtitle.text, self.options.find, 'OxHighlight').replace(/\n/g, '<br/>') +
                            '</span><br/>'
                            : ''
                        ) + Ox.formatDuration(position, 3)
                })
                .show(e.clientX, e.clientY);
        } else {
            self.$tooltip.hide();
        }
    }

    function renderTimeline() {
        var $timeline = $('<div>')
            .css({
                position: 'absolute',
                width: self.frames + 'px',
                height: self.tileHeight + self.margin + 'px',
                overflow: 'hidden'
            });
            Ox.loop(self.tiles, function(i) {
                $('<img>')
                    .attr({
                        src: self.options.getLargeTimelineURL(self.options.timeline, i)
                    })
                    .css({
                        position: 'absolute',
                        left: i * self.tileWidth + 'px',
                        top: self.margin / 2 + 'px'
                    })
                    .appendTo($timeline);
            });
            $('<div>')
                .addClass('OxTimelineInterface')
                .css({
                    position: 'absolute',
                    left: 0,
                    top: self.margin / 2 + 'px',
                    width: self.frames + 'px',
                    height: self.tileHeight + 'px'
                    //background: 'rgba(255, 0, 0, 0.5)'
                })
                .appendTo($timeline);
            
        return $timeline;
    }

    function scroll() {
        updateScrollButton();
        if (!self.options.paused && self.options.followPlayer) {
            self.scrollTimeout && clearTimeout(self.scrollTimeout);
            self.scrollTimeout = setTimeout(function() {
                scrollToPosition();
                self.scrollTimeout = 0;
            }, 2500);
        }
    }

    function scrollToPosition() {
        var positionScrollTop = getPositionScrollTop();
        positionScrollTop && self.$timelinePlayer.stop().animate({
            scrollTop: positionScrollTop
        }, 250, function() {
            self.$scrollButton.hide();
        });
    }

    function setHeight() {
        self.contentHeight = self.options.height - 32;
        if (!self.options.paused && self.options.followPlayer) {
            self.scrollTimeout && clearTimeout(self.scrollTimeout);
            scrollToPosition();
        }
    }

    function setPosition(fromVideo) {
        var isPlaying = !self.options.paused,
            max, min, videoLines, videoLines_;
        self.options.position = Ox.limit(self.options.position, 0, self.options.duration);
        self.frame = Math.floor(self.options.position * self.fps);
        videoLines = getVideoLines();
        // current and previous video lines
        videoLines_ = Ox.flatten([self.videoLines, videoLines]);
        min = Ox.min(videoLines_);
        max = Ox.max(videoLines_);
        Ox.loop(min, max + 1, function(i) {
            self.$timelines[i][0].css({
                width: self.frame + self.videoWidth + 'px'
            });
        });
        if (videoLines[1] != self.videoLines[1]) {
            // move frame to new line
            self.$frameBox.detach().appendTo(self.$timelines[videoLines[1]][0]);
        }
        if (videoLines[0] != self.videoLines[0]) {
            // move video to new line
            isPlaying && self.$video.togglePaused();
            self.$videoBox.detach().appendTo(self.$timelines[videoLines[0]][0]);
            isPlaying && self.$video.togglePaused();
        }
        if (videoLines[0] != videoLines[1]) {
            // if the player spans two lines, update the frame
            // (but only once per second if the video is playing)
            self.$frame.options({
                position: self.paused
                    ? self.options.position
                    : Math.floor(self.options.position)
            });
        }
        if (
            fromVideo && !self.scrollTimeout
            && videoLines[1] != self.videoLines[1]
            && videoLines[1] > videoLines[0]
        ) {
            // if the video is moving, the user has not scrolled away
            // and the video has reached a line break, then either
            // follow the video or update the scroll button
            self.videoLines = videoLines;
            self.options.followPlayer ? scrollToPosition() : updateScrollButton();
        } else {
            self.videoLines = videoLines;
        }
        if (!fromVideo) {
            self.$video.options({position: self.options.position});
            self.$frame.options({position: self.options.position});           
            scrollToPosition();
        }
        self.$smallTimeline.options({position: self.options.position});
        self.$position.html(formatPosition());
        that.triggerEvent(fromVideo ? 'playing' : 'position', {
            position: self.options.position
        });
    }

    function setSubtitles() {
        self.$timeline.find('.OxSubtitle').remove();
        self.$subtitles = [];
        self.options.subtitles.forEach(function(subtitle, i) {
            var found = self.options.find
                && subtitle.text.toLowerCase().indexOf(self.options.find.toLowerCase()) > -1;
            self.$subtitles[i] = $('<div>')
                .addClass('OxSubtitle' + (found ? ' OxHighlight' : ''))
                .css({
                    position: 'absolute',
                    left: (subtitle['in'] * self.fps) + 'px',
                    width: (((subtitle.out - subtitle['in']) * self.fps) - 2) + 'px'
                })
                .html(Ox.highlight(subtitle.text, self.options.find, 'OxHighlight'))
                .appendTo(self.$timeline);
        });
    }

    function setVolume() {
        self.$video.options({volume: self.options.volume});
        that.triggerEvent('volume', {
            volume: self.options.volume
        });
    }

    function setWidth() {
        self.contentWidth = self.options.width - 2 * self.margin;
        self.lines = getLines();
		Ox.loop(self.lines, function(i) {
            if (self.$lines[i]) {
                self.$lines[i].css({
                    width: self.contentWidth + 'px'
                });
                self.$timelines[i][0].css({
                    marginLeft: -i * self.contentWidth + 'px'
                });
                self.$timelines[i][1].css({
                    marginLeft: -i * self.contentWidth + self.videoWidth - 1 + 'px'
                });
            } else {
                addLine(i);
            }
        });
        while (self.$lines.length > self.lines) {
            self.$lines[self.$lines.length - 1].remove();
            self.$lines.pop();
            self.$timelines.pop();
        }
        Ox.last(self.$lines).css({
            height: self.tileHeight + 1.5 * self.margin + 'px'
        });
        if (!self.options.paused && self.options.followPlayer) {
            self.scrollTimeout && clearTimeout(self.scrollTimeout);
            scrollToPosition();
        }
        self.$smallTimeline.options({width: getSmallTimelineWidth()})
    }

    function submitPositionInput() {
        self.$positionInput.hide();
        self.$position.html('').show();
        self.options.position = Ox.parseDuration(self.$positionInput.value());
        setPosition();
        if (self.playOnSubmit) {
            togglePaused();
            self.playOnSubmit = false;
        }
        that.triggerEvent('position', {
            position: self.options.position
        });
    }

    function toggleMuted() {
        self.options.muted = !self.options.muted;
        self.$video.options({muted: self.options.muted});
        self.$muteButton.options({
            title: self.options.muted ? 'unmute' : 'mute',
            tooltip: self.options.muted ? 'Unmute' : 'Mute'
        });
        that.triggerEvent('muted', {
            muted: self.options.muted
        });
    }

    function togglePaused(fromVideo) {
        self.options.paused = !self.options.paused;
        if (!self.options.paused && self.options.followPlayer) {
            self.scrollTimeout && clearTimeout(self.scrollTimeout);
            scrollToPosition();
        }
        !fromVideo && self.$video.options({
            paused: self.options.paused
        });
        self.$playButton.options({
            title: self.options.paused ? 'play' : 'pause'
        });
    }

    function updateScrollButton() {
        var scrollTop = self.$timelinePlayer.scrollTop(),
            positionScrollTop = getPositionScrollTop();
        if (positionScrollTop === null) {
            self.$scrollButton.hide();
        } else {
            self.$scrollButton.options({
                title: positionScrollTop < scrollTop ? 'arrowUp' : 'arrowDown'
            }).show();
        }
    }

    /*@
    togglePaused <f> toggle paused 
        () -> <o>  toggle paused
    @*/
    that.togglePaused = function() {
        togglePaused();
        return that;
    };

    return that;

};