jam-cloud/web/app/assets/javascripts/playbackControls.js

/**
 * Static functions for creating pagination
 */
(function(context, $) {

    "use strict";

    context.JK = context.JK || {};
    context.JK.PlaybackControls = function($parentElement){
        var logger = context.JK.logger;
        var $playButton = $('.play-button img.playbutton', $parentElement);
        var $pauseButton = $('.play-button img.pausebutton', $parentElement);
        var $currentTime = $('.recording-current', $parentElement);
        var $duration = $('.duration-time', $parentElement);
        var $sliderBar = $('.recording-playback', $parentElement);
        var $slider = $('.recording-slider', $parentElement);
        var $self = $(this);

        var playbackPlaying = false;
        var playbackDurationMs = 0;
        var playbackPositionMs = 0;
        var durationChanged = false;

        var endReached = false;
        var dragging = false;
        var playingWhenDragStart = false;
        var draggingUpdateTimer = null;
        var canUpdateBackend = false;

        function startPlay() {
            updateIsPlaying(true);
            if(endReached) {
                update(0, playbackDurationMs, playbackPlaying);
            }
            $self.triggerHandler('play');
        }

        function stopPlay() {
            updateIsPlaying(false);
            $self.triggerHandler('pause');
        }

        function updateOffsetBasedOnPosition(offsetLeft) {
            var sliderBarWidth = $sliderBar.width();

            playbackPositionMs = parseInt((offsetLeft / sliderBarWidth) * playbackDurationMs);
            updateCurrentTimeText(playbackPositionMs);
            if(canUpdateBackend) {
                $self.triggerHandler('change-position', {positionMs: playbackPositionMs});
                canUpdateBackend = false;
            }
        }

        function startDrag(e, ui) {
            dragging = true;
            playingWhenDragStart = playbackPlaying;
            draggingUpdateTimer = setInterval(function() { canUpdateBackend = true; }, 333); // only call backend up to 3 times a second while dragging
            if(playingWhenDragStart) {
                stopPlay();
            }
        }

        function stopDrag(e, ui) {
            dragging = false;

            clearInterval(draggingUpdateTimer);

            canUpdateBackend = true;
            updateOffsetBasedOnPosition(ui.position.left);

            if(playingWhenDragStart) {
                playingWhenDragStart = false;
                startPlay();
            }
        }

        function onDrag(e, ui) {
            updateOffsetBasedOnPosition(ui.position.left);
        }

        $playButton.on('click', function(e) {
            startPlay();
            return false;
        });

        $pauseButton.on('click', function(e) {
            stopPlay();
            return false;
        });

        $sliderBar.on('click', function(e) {
            var offset = e.pageX - $(this).offset().left;
            canUpdateBackend = true;
            updateOffsetBasedOnPosition(offset);
            updateSliderPosition(playbackPositionMs);
            return false;
        })

        $slider.draggable({
            axis: 'x',
            containment: $sliderBar,
            start: startDrag,
            stop: stopDrag,
            drag: onDrag
        });

        function update(currentTimeMs, durationTimeMs, isPlaying) {

            if(dragging) {
                return;
            }

            // at the end of the play, the duration sets to 0, as does currentTime. but isPlaying does not reset to
            if(currentTimeMs == 0 && durationTimeMs == 0) {
                if(isPlaying) {
                    isPlaying = false;
                    durationTimeMs = playbackDurationMs;
                    currentTimeMs = playbackDurationMs;
                    stopPlay();
                    endReached = true;
                }
                else {
                    return;
                }
            }

            updateDurationTime(durationTimeMs);
            updateCurrentTime(currentTimeMs);
            updateIsPlaying(isPlaying);

            durationChanged = false;
        }

        function updateDurationTime(timeMs) {
            if(timeMs != playbackDurationMs) {
                $duration.text(context.JK.prettyPrintSeconds(parseInt(timeMs / 1000)));
                playbackDurationMs = timeMs;
                durationChanged = true;
            }
        }

        function updateCurrentTimeText(timeMs) {
            $currentTime.text(context.JK.prettyPrintSeconds(parseInt(timeMs / 1000)));
        }

        function updateSliderPosition(timeMs) {

            var slideWidthPx = $sliderBar.width();
            var xPos = Math.ceil(timeMs / playbackDurationMs * slideWidthPx);
            $slider.css('left', xPos);
        }

        function updateCurrentTime(timeMs) {
            if(timeMs != playbackPositionMs || durationChanged) {

                updateCurrentTimeText(timeMs);
                updateSliderPosition(timeMs);

                playbackPositionMs = timeMs;
            }
        }

        function updateIsPlaying(isPlaying) {
            if(isPlaying != playbackPlaying) {
                if(isPlaying) {
                    $playButton.hide();
                    $pauseButton.show();
                }
                else {
                    $playButton.show();
                    $pauseButton.hide();
                }

                playbackPlaying = isPlaying;
            }
        }



        this.update = update;

        return this;
    }
})(window, jQuery);