radio/lorgar/views/songProgress.js

"use strict";
(function() {
    var moduleName = "views/songProgress";
    
    var deps = [];
    deps.push("views/view");
    
    define(moduleName, deps, function() {
        var View = require("views/view");
        
        var SongProgress = View.inherit({
            className: "SongProgress",
            constructor: function(controller, options) {
                var base = {
                    minHeight: 10,
                    maxHeight: 10
                };
                W.extend(base, options)
                var el = document.createElement("div");
                this._createBars();
                View.fn.constructor.call(this, controller, base, el);
                
                this._seeking = false;
                this._createProxy();
                
                this._f.on("load", this._onLoad, this);
                this._f.on("playback", this._onPlayback, this);
                
                this._e.style.backgroundColor = "#eeeeee";
                this._e.appendChild(this._loadProgress);
                this._e.appendChild(this._playbackProgress);
                
                this._e.addEventListener("mousedown", this._proxy.onMouseDown, false);
                this._e.addEventListener("touchstart", W.touchToMouse, false);
                this._e.addEventListener("touchmove", W.touchToMouse, false);
                this._e.addEventListener("touchend", W.touchToMouse, false);
            },
            destructor: function() {
                if (this._seeking) {
                    window.removeEventListener("mouseup", this._proxy.onMouseUp);
                    window.removeEventListener("mousemove", this._proxy.onMouseMove);
                }
                
                this._e.removeEventListener("mousedown", this._proxy.onMouseDown);
                this._e.removeEventListener("touchstart", W.touchToMouse);
                this._e.removeEventListener("touchmove", W.touchToMouse);
                this._e.removeEventListener("touchend", W.touchToMouse);
                
                this._f.off("load", this._onLoad, this);
                this._f.off("playback", this._onPlayback, this);
                
                View.fn.destructor.call(this);
            },
            _createBars: function() {
                
                this._loadProgress = document.createElement("div");
                this._playbackProgress = document.createElement("div");
                
                this._loadProgress.style.backgroundColor = View.theme.secondaryColor || "#ffff00";
                this._loadProgress.style.height = "100%";
                this._loadProgress.style.width = "0";
                this._loadProgress.style.position = "absolute";
                this._loadProgress.style.top = "0";
                this._loadProgress.style.left = "0";
                
                this._playbackProgress.style.backgroundColor = View.theme.primaryColor || "#ff0000";
                this._playbackProgress.style.height = "100%";
                this._playbackProgress.style.width = "0";
                this._playbackProgress.style.position = "absolute";
                this._playbackProgress.style.top = "0";
                this._playbackProgress.style.left = "0";
            },
            _createProxy: function () {
                this._proxy = {
                    onMouseDown: this._onMouseDown.bind(this),
                    onMouseUp: this._onMouseUp.bind(this),
                    onMouseMove: this._onMouseMove.bind(this)
                }
            },
            _onData: function() {
                this._onLoad(this._f.load);
                this._onPlayback(this._f.playback);
            },
            _onLoad: function(load) {
                this._loadProgress.style.width = load * 100 + "%";
            },
            _onMouseDown: function(e) {
                if (e.which === 1) {
                    window.addEventListener("mouseup", this._proxy.onMouseUp);
                    window.addEventListener("mousemove", this._proxy.onMouseMove);
                    this._seeking = true;
                    
                    this._f.trigger("seekingStart");
                    
                    this._ap = this.getAbsolutePosition();
                    var seek = Math.max(Math.min(e.pageX - this._ap.x, this._w), 0);
                    var nSeek = seek / this._w;
                    if (this._seek !== nSeek) {
                        this._seek = nSeek;
                        this._f.trigger("seek", this._seek);
                    }
                }
            },
            _onMouseMove: function(e) {
                var seek = Math.max(Math.min(e.pageX - this._ap.x, this._w), 0);
                var nSeek = seek / this._w;
                if (this._seek !== nSeek) {
                    this._seek = nSeek;
                    this._f.trigger("seek", this._seek);
                }
            },
            _onMouseUp: function() {
                delete this._ap;
                delete this._seek;
                this._f.trigger("seekingEnd", this._f.playback);
                
                this._seeking = false;
                window.removeEventListener("mouseup", this._proxy.onMouseUp);
                window.removeEventListener("mousemove", this._proxy.onMouseMove);
            },
            _onPlayback: function(pb) {
                this._playbackProgress.style.width = pb * 100 + "%";
            },
            _resetTheme: function() {
                View.fn._resetTheme.call(this);
                
                this._loadProgress.style.backgroundColor = View.theme.secondaryColor || "#ffff00"
                this._playbackProgress.style.backgroundColor = View.theme.primaryColor || "#ff0000";
            }
        });
        
        return SongProgress;
    })
})();