seeking, autonext song
This commit is contained in:
parent
d6e22f6111
commit
3f660239ec
7 changed files with 294 additions and 66 deletions
|
@ -30,9 +30,9 @@
|
|||
this._y = 0;
|
||||
|
||||
this._e.addEventListener("mousedown", this._proxy.onMouseDown, false);
|
||||
this._e.addEventListener("touchstart", this._touch, false);
|
||||
this._e.addEventListener("touchmove", this._touch, false);
|
||||
this._e.addEventListener("touchend", this._touch, 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._dragging) {
|
||||
|
@ -45,9 +45,9 @@
|
|||
}
|
||||
|
||||
this._e.removeEventListener("mousedown", this._proxy.onMouseDown);
|
||||
this._e.removeEventListener("touchstart", this._touch);
|
||||
this._e.removeEventListener("touchmove", this._touch);
|
||||
this._e.removeEventListener("touchend", this._touch);
|
||||
this._e.removeEventListener("touchstart", W.touchToMouse);
|
||||
this._e.removeEventListener("touchmove", W.touchToMouse);
|
||||
this._e.removeEventListener("touchend", W.touchToMouse);
|
||||
|
||||
Subscribable.fn.destructor.call(this);
|
||||
},
|
||||
|
@ -105,41 +105,6 @@
|
|||
this._v.trigger("dragEnd");
|
||||
return false;
|
||||
}
|
||||
},
|
||||
"_touch": function (e) {
|
||||
e.preventDefault();
|
||||
if (e.touches.length > 1 || (e.type == "touchend" && e.touches.length > 0))
|
||||
return;
|
||||
|
||||
var type = null;
|
||||
var touch = null;
|
||||
var src = e.currentTarget;
|
||||
switch (e.type) {
|
||||
case "touchstart":
|
||||
type = "mousedown";
|
||||
touch = e.changedTouches[0];
|
||||
|
||||
break;
|
||||
case "touchmove":
|
||||
type = "mousemove";
|
||||
touch = e.changedTouches[0];
|
||||
src = window;
|
||||
break;
|
||||
case "touchend":
|
||||
type = "mouseup";
|
||||
touch = e.changedTouches[0];
|
||||
src = window;
|
||||
break;
|
||||
}
|
||||
|
||||
var event = new MouseEvent(type, {
|
||||
button: 0,
|
||||
screenX: touch.screenX,
|
||||
screenY: touch.screenY,
|
||||
clientX: touch.clientX,
|
||||
clientY: touch.clientY
|
||||
});
|
||||
src.dispatchEvent(event);
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
@ -20,14 +20,32 @@
|
|||
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);
|
||||
|
||||
|
@ -52,6 +70,13 @@
|
|||
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);
|
||||
|
@ -59,6 +84,40 @@
|
|||
_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 + "%";
|
||||
},
|
||||
|
|
|
@ -98,6 +98,21 @@
|
|||
|
||||
return w;
|
||||
},
|
||||
"getAbsolutePosition": function() {
|
||||
var pp;
|
||||
if (this._p) {
|
||||
pp = this._p.getAbsolutePosition();
|
||||
} else {
|
||||
pp = Object.create(null);
|
||||
pp.x = 0;
|
||||
pp.y = 0;
|
||||
}
|
||||
|
||||
pp.x += this._x;
|
||||
pp.y += this._y;
|
||||
|
||||
return pp;
|
||||
},
|
||||
"_initDraggable": function() {
|
||||
this._dg = new Draggable(this, {
|
||||
snapDistance: this._o.snapDistance
|
||||
|
@ -134,6 +149,7 @@
|
|||
"remove": function() {
|
||||
if (this._p) {
|
||||
this._p.removeChild(this);
|
||||
delete this._p; //just to make sure
|
||||
}
|
||||
},
|
||||
"removeClass": function(className) {
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue