Macaw/radio
3
0
Fork 0
Code Issues 3 Pull Requests Releases Wiki Activity

slider and volume ctrl

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
libjs/wController/player.js
View File

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

1
lorgar/views/CMakeLists.txt
View File

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

6
lorgar/views/player.js
View File

@ -9,6 +9,7 @@
deps.push("views/view");
deps.push("views/image");
deps.push("views/songProgress");
deps.push("views/slider");
deps.push("lib/wController/localModel");
@ -21,6 +22,7 @@
var View = require("views/view");
var Image = require("views/image");
var SongProgress = require("views/songProgress");
var Slider = require("views/slider");
var Model = require("lib/wController/localModel");
@ -49,14 +51,16 @@
var artist = new Label(this._infoModels.artist);
var album = new Label(this._infoModels.album);
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 volume = new Slider(ctrl.volume, {maxWidth: 100});
this.append(artist, 0, 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(spacer, 0, 6, 3, 1, GridLayout.Aligment.LeftCenter);
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.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;
})
})();

97
lorgar/views/songProgress.js
View File

@ -3,12 +3,12 @@
var moduleName = "views/songProgress";
var deps = [];
deps.push("views/view");
deps.push("views/slider");
define(moduleName, deps, function() {
var View = require("views/view");
var Slider = require("views/slider");
var SongProgress = View.inherit({
var SongProgress = Slider.inherit({
className: "SongProgress",
constructor: function(controller, options) {
var base = {
@ -16,116 +16,51 @@
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();
Slider.fn.constructor.call(this, controller, base);
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);
this._e.insertBefore(this._loadProgress, this._value);
},
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);
Slider.fn.destructor.call(this);
},
_createBars: function() {
Slider.fn._createBars.call(this);
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.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() {
Slider.fn._onData.call(this);
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);
}
}
Slider.fn._onMouseDown.call(this, e);
},
_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 + "%";
_onMouseUp: function(e) {
Slider.fn._onMouseUp.call(this, e);
this._f.trigger("seekingEnd", this._f.value);
},
_resetTheme: function() {
View.fn._resetTheme.call(this);
Slider.fn._resetTheme.call(this);
this._loadProgress.style.backgroundColor = View.theme.secondaryColor || "#ffff00"
this._playbackProgress.style.backgroundColor = View.theme.primaryColor || "#ff0000";
this._loadProgress.style.backgroundColor = Slider.theme.secondaryColor || "#ffff00"
}
});