slider and volume ctrl

This commit is contained in:
Blue 2019-01-30 23:36:33 +03:00
parent 35a9abc7d7
commit d2e3aa0880
5 changed files with 206 additions and 104 deletions

View File

@ -22,9 +22,12 @@ var Player = Controller.inherit({
this.views = Object.create(null); this.views = Object.create(null);
this.mode = PlayerMode.straight.playback; this.mode = PlayerMode.straight.playback;
this.progress = new ProgressModel(); this.progress = new ProgressModel();
this.volume = new Slider();
this.volume.setValue(1);
this.progress.on("seekingStart", this._onSeekingStart, this); this.progress.on("seekingStart", this._onSeekingStart, this);
this.progress.on("seekingEnd", this._onSeekingEnd, this); this.progress.on("seekingEnd", this._onSeekingEnd, this);
this.progress.on("seek", this._onSeek, this); this.progress.enable(false);
this.volume.on("value", this._onVolume, this);
this._audio = null; this._audio = null;
this._createStateMachine(); this._createStateMachine();
this._createPlayingInfrastructure(); this._createPlayingInfrastructure();
@ -123,6 +126,8 @@ var Player = Controller.inherit({
_createPlayingInfrastructure: function() { _createPlayingInfrastructure: function() {
this._ctx = new AudioContext(); this._ctx = new AudioContext();
this._decoder = new Mp3Decoder(); this._decoder = new Mp3Decoder();
this._gainNode = this._ctx.createGain();
this._gainNode.connect(this._ctx.destination);
this._currentTime = 0; this._currentTime = 0;
this._seekingTime = 0; this._seekingTime = 0;
this._buffers = []; this._buffers = [];
@ -212,14 +217,14 @@ var Player = Controller.inherit({
if (offset > 0) { if (offset > 0) {
var src = this._ctx.createBufferSource(); var src = this._ctx.createBufferSource();
src.buffer = sb; src.buffer = sb;
src.connect(this._ctx.destination); src.connect(this._gainNode);
src.start(0, Math.abs(startTime - this._ctx.currentTime)); src.start(0, Math.abs(startTime - this._ctx.currentTime));
this._sources.push(src); this._sources.push(src);
} }
} else { } else {
var src = this._ctx.createBufferSource(); var src = this._ctx.createBufferSource();
src.buffer = sb; src.buffer = sb;
src.connect(this._ctx.destination); src.connect(this._gainNode);
src.start(startTime); src.start(startTime);
this._sources.push(src); this._sources.push(src);
} }
@ -243,10 +248,10 @@ var Player = Controller.inherit({
_onInterval: function() { _onInterval: function() {
if (this._audio && this._audio.initialized && seekingStates.indexOf(this._fsm.state()) === -1) { if (this._audio && this._audio.initialized && seekingStates.indexOf(this._fsm.state()) === -1) {
var duration = this._audio.getDuration(); var duration = this._audio.getDuration();
this.progress.setPlayback(this.getCurrentPlaybackTime() / duration); this.progress.setValue(this.getCurrentPlaybackTime() / duration);
this._checkIfEnough(); this._checkIfEnough();
if (this.progress.playback >= 0.9999) { if (this.progress.value >= 0.9999) {
var next = this.controls[ItemType.straight.next]; var next = this.controls[ItemType.straight.next];
if (next && next.enabled) { if (next && next.enabled) {
next.activate(); next.activate();
@ -289,11 +294,6 @@ var Player = Controller.inherit({
this._audio = null; this._audio = null;
} }
}, },
_onSeek: function(progress) {
if (seekingStates.indexOf(this._fsm.state()) !== -1) {
this.progress.setPlayback(progress);
}
},
_onSeekingStart: function() { _onSeekingStart: function() {
this._fsm.manipulation("startSeeking"); this._fsm.manipulation("startSeeking");
}, },
@ -319,14 +319,14 @@ var Player = Controller.inherit({
if (offset > 0) { if (offset > 0) {
var src = this._ctx.createBufferSource(); var src = this._ctx.createBufferSource();
src.buffer = buffer; src.buffer = buffer;
src.connect(this._ctx.destination); src.connect(this._gainNode);
src.start(0, Math.abs(startTime)); src.start(0, Math.abs(startTime));
this._sources.push(src); this._sources.push(src);
} }
} else { } else {
var src = this._ctx.createBufferSource(); var src = this._ctx.createBufferSource();
src.buffer = buffer; src.buffer = buffer;
src.connect(this._ctx.destination); src.connect(this._gainNode);
src.start(this._ctx.currentTime + startTime); src.start(this._ctx.currentTime + startTime);
this._sources.push(src); this._sources.push(src);
} }
@ -340,7 +340,7 @@ var Player = Controller.inherit({
switch (e.newState) { switch (e.newState) {
case "initial": case "initial":
if (e.manipulation === "noController") { if (e.manipulation === "noController") {
this.progress.enable(false);
this.removeForeignController(this._audio); this.removeForeignController(this._audio);
this._audio.destructor(); this._audio.destructor();
this._audio = null; this._audio = null;
@ -350,6 +350,7 @@ var Player = Controller.inherit({
break; break;
case "initialPlaying": case "initialPlaying":
if (e.manipulation === "noController") { if (e.manipulation === "noController") {
this.progress.enable(false);
this._ctx.suspend(); this._ctx.suspend();
this.removeForeignController(this._audio); this.removeForeignController(this._audio);
@ -373,10 +374,15 @@ var Player = Controller.inherit({
} }
break; break;
case "buffering": case "buffering":
if (e.oldState === "hasController") {
this.progress.enable(true);
}
break; break;
case "bufferingPlaying": case "bufferingPlaying":
if (e.oldState === "playing") { if (e.oldState === "playing") {
this._ctx.suspend(); this._ctx.suspend();
} else if (e.oldState === "hasControllerPlaying") {
this.progress.enable(true);
} }
break; break;
case "seeking": case "seeking":
@ -421,6 +427,10 @@ var Player = Controller.inherit({
break; break;
} }
}, },
_onVolume: function(volume) {
this._gainNode.gain.cancelScheduledValues(this._ctx.currentTime);
this._gainNode.gain.exponentialRampToValueAtTime(volume, this._ctx.currentTime + 0.01);
},
_removeControl: function(type) { _removeControl: function(type) {
var ctrl = this.controls[type]; var ctrl = this.controls[type];
if (ctrl !== undefined) { if (ctrl !== undefined) {
@ -553,26 +563,41 @@ var audioPortion = 1024 * 50; //bytes to download for each portion
var threshold = 2; //seconds to buffer before playing var threshold = 2; //seconds to buffer before playing
var intervalPrecision = 100; //millisecond of how often to check the playback var intervalPrecision = 100; //millisecond of how often to check the playback
var ProgressModel = Model.inherit({ var Slider = Model.inherit({
className: "ProgressModel", className: "Slider",
constructor: function(properties) { constructor: function(properties) {
Model.fn.constructor.call(this, properties); Model.fn.constructor.call(this, properties);
this.load = 0; this.enabled = true;
this.playback = 0; this.value = 0;
this.initialized = true; this.initialized = true;
}, },
enable: function(en) {
if (en !== this.enabled) {
this.enabled = en;
this.trigger("enabled", en);
}
},
setValue: function(p) {
if (p !== this.value) {
this.value = p;
this.trigger("value", p);
}
}
});
var ProgressModel = Slider.inherit({
className: "ProgressModel",
constructor: function(properties) {
Slider.fn.constructor.call(this, properties);
this.value = 0;
},
setLoad: function(l) { setLoad: function(l) {
if (l !== this.load) { if (l !== this.load) {
this.load = l; this.load = l;
this.trigger("load", l); this.trigger("load", l);
} }
},
setPlayback: function(p) {
if (p !== this.playback) {
this.playback = p;
this.trigger("playback", p);
}
} }
}); });

View File

@ -14,6 +14,7 @@ configure_file(image.js image.js)
configure_file(button.js button.js) configure_file(button.js button.js)
configure_file(enumeration.js enumeration.js) configure_file(enumeration.js enumeration.js)
configure_file(player.js player.js) configure_file(player.js player.js)
configure_file(slider.js slider.js)
configure_file(songProgress.js songProgress.js) configure_file(songProgress.js songProgress.js)
add_subdirectory(helpers) add_subdirectory(helpers)

View File

@ -9,6 +9,7 @@
deps.push("views/view"); deps.push("views/view");
deps.push("views/image"); deps.push("views/image");
deps.push("views/songProgress"); deps.push("views/songProgress");
deps.push("views/slider");
deps.push("lib/wController/localModel"); deps.push("lib/wController/localModel");
@ -21,6 +22,7 @@
var View = require("views/view"); var View = require("views/view");
var Image = require("views/image"); var Image = require("views/image");
var SongProgress = require("views/songProgress"); var SongProgress = require("views/songProgress");
var Slider = require("views/slider");
var Model = require("lib/wController/localModel"); var Model = require("lib/wController/localModel");
@ -49,14 +51,16 @@
var artist = new Label(this._infoModels.artist); var artist = new Label(this._infoModels.artist);
var album = new Label(this._infoModels.album); var album = new Label(this._infoModels.album);
var song = new Label(this._infoModels.song); var song = new Label(this._infoModels.song);
var spacer = new View(helper, {maxWidth: 50}); var spacer = new View(helper, {maxWidth: 10});
var progress = new SongProgress(ctrl.progress); var progress = new SongProgress(ctrl.progress);
var volume = new Slider(ctrl.volume, {maxWidth: 100});
this.append(artist, 0, 4, 1, 1, GridLayout.Aligment.LeftCenter); this.append(artist, 0, 4, 1, 1, GridLayout.Aligment.LeftCenter);
this.append(song, 1, 4, 1, 1, GridLayout.Aligment.LeftCenter); this.append(song, 1, 4, 1, 1, GridLayout.Aligment.LeftCenter);
this.append(album, 2, 4, 1, 1, GridLayout.Aligment.LeftCenter); this.append(album, 2, 4, 1, 1, GridLayout.Aligment.LeftCenter);
this.append(spacer, 0, 6, 3, 1, GridLayout.Aligment.LeftCenter); this.append(spacer, 0, 6, 3, 1, GridLayout.Aligment.LeftCenter);
this.append(progress, 1, 5, 1, 1, GridLayout.Aligment.CenterCenter); this.append(progress, 1, 5, 1, 1, GridLayout.Aligment.CenterCenter);
this.append(volume, 1, 7, 1, 1, GridLayout.Aligment.CenterCenter);
this._uncyclic.push(this._infoModels.artist.destructor.bind(this._infoModels.artist)); this._uncyclic.push(this._infoModels.artist.destructor.bind(this._infoModels.artist));
this._uncyclic.push(this._infoModels.song.destructor.bind(this._infoModels.song)); this._uncyclic.push(this._infoModels.song.destructor.bind(this._infoModels.song));

137
lorgar/views/slider.js Normal file
View File

@ -0,0 +1,137 @@
"use strict";
(function() {
var moduleName = "views/slider";
var deps = [];
deps.push("views/view");
define(moduleName, deps, function() {
var View = require("views/view");
var Slider = View.inherit({
className: "Slider",
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("value", this._onValue, this);
this._f.on("enabled", this._onEnabled, this);
this._e.style.backgroundColor = "#eeeeee";
this._e.appendChild(this._value);
if (this._f.enabled) {
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);
}
if (this._f.enabled) {
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("value", this._value, this);
this._f.off("enabled", this._onEnabled, this);
View.fn.destructor.call(this);
},
_createBars: function() {
this._value = document.createElement("div");
this._value.style.backgroundColor = View.theme.primaryColor || "#ff0000";
this._value.style.height = "100%";
this._value.style.width = "0";
this._value.style.position = "absolute";
this._value.style.top = "0";
this._value.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._onValue(this._f.value);
},
_onEnabled: function(enabled) {
if (enabled) {
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);
} else {
if (this._seeking) {
this._onMouseUp();
}
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);
}
},
_onMouseDown: function(e) {
if (e.which === 1) {
window.addEventListener("mouseup", this._proxy.onMouseUp);
window.addEventListener("mousemove", this._proxy.onMouseMove);
this._seeking = true;
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.setValue(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.setValue(this._seek);
}
},
_onMouseUp: function() {
delete this._ap;
delete this._seek;
this._seeking = false;
window.removeEventListener("mouseup", this._proxy.onMouseUp);
window.removeEventListener("mousemove", this._proxy.onMouseMove);
},
_onValue: function(pb) {
this._value.style.width = pb * 100 + "%";
},
_resetTheme: function() {
View.fn._resetTheme.call(this);
this._value.style.backgroundColor = View.theme.primaryColor || "#ff0000";
}
});
return Slider;
})
})();

View File

@ -3,12 +3,12 @@
var moduleName = "views/songProgress"; var moduleName = "views/songProgress";
var deps = []; var deps = [];
deps.push("views/view"); deps.push("views/slider");
define(moduleName, deps, function() { define(moduleName, deps, function() {
var View = require("views/view"); var Slider = require("views/slider");
var SongProgress = View.inherit({ var SongProgress = Slider.inherit({
className: "SongProgress", className: "SongProgress",
constructor: function(controller, options) { constructor: function(controller, options) {
var base = { var base = {
@ -16,116 +16,51 @@
maxHeight: 10 maxHeight: 10
}; };
W.extend(base, options) W.extend(base, options)
var el = document.createElement("div"); Slider.fn.constructor.call(this, controller, base);
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("load", this._onLoad, this);
this._f.on("playback", this._onPlayback, this);
this._e.style.backgroundColor = "#eeeeee"; this._e.insertBefore(this._loadProgress, this._value);
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() { 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("load", this._onLoad, this);
this._f.off("playback", this._onPlayback, this);
View.fn.destructor.call(this); Slider.fn.destructor.call(this);
}, },
_createBars: function() { _createBars: function() {
Slider.fn._createBars.call(this);
this._loadProgress = document.createElement("div"); this._loadProgress = document.createElement("div");
this._playbackProgress = document.createElement("div");
this._loadProgress.style.backgroundColor = View.theme.secondaryColor || "#ffff00"; this._loadProgress.style.backgroundColor = Slider.theme.secondaryColor || "#ffff00";
this._loadProgress.style.height = "100%"; this._loadProgress.style.height = "100%";
this._loadProgress.style.width = "0"; this._loadProgress.style.width = "0";
this._loadProgress.style.position = "absolute"; this._loadProgress.style.position = "absolute";
this._loadProgress.style.top = "0"; this._loadProgress.style.top = "0";
this._loadProgress.style.left = "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() { _onData: function() {
Slider.fn._onData.call(this);
this._onLoad(this._f.load); this._onLoad(this._f.load);
this._onPlayback(this._f.playback);
}, },
_onLoad: function(load) { _onLoad: function(load) {
this._loadProgress.style.width = load * 100 + "%"; this._loadProgress.style.width = load * 100 + "%";
}, },
_onMouseDown: function(e) { _onMouseDown: function(e) {
if (e.which === 1) { if (e.which === 1) {
window.addEventListener("mouseup", this._proxy.onMouseUp);
window.addEventListener("mousemove", this._proxy.onMouseMove);
this._seeking = true;
this._f.trigger("seekingStart"); 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; Slider.fn._onMouseDown.call(this, e);
window.removeEventListener("mouseup", this._proxy.onMouseUp);
window.removeEventListener("mousemove", this._proxy.onMouseMove);
}, },
_onPlayback: function(pb) { _onMouseUp: function(e) {
this._playbackProgress.style.width = pb * 100 + "%"; Slider.fn._onMouseUp.call(this, e);
this._f.trigger("seekingEnd", this._f.value);
}, },
_resetTheme: function() { _resetTheme: function() {
View.fn._resetTheme.call(this); Slider.fn._resetTheme.call(this);
this._loadProgress.style.backgroundColor = View.theme.secondaryColor || "#ffff00" this._loadProgress.style.backgroundColor = Slider.theme.secondaryColor || "#ffff00"
this._playbackProgress.style.backgroundColor = View.theme.primaryColor || "#ff0000";
} }
}); });