77 lines
3.0 KiB
JavaScript
77 lines
3.0 KiB
JavaScript
|
"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._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);
|
||
|
},
|
||
|
destructor: function() {
|
||
|
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";
|
||
|
},
|
||
|
_onData: function() {
|
||
|
this._onLoad(this._f.load);
|
||
|
this._onPlayback(this._f.playback);
|
||
|
},
|
||
|
_onLoad: function(load) {
|
||
|
this._loadProgress.style.width = load * 100 + "%";
|
||
|
},
|
||
|
_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;
|
||
|
})
|
||
|
})();
|
||
|
|