diff --git a/lib/js/waveform_viewer/player/player.js b/lib/js/waveform_viewer/player/player.js index 668684fa8..adc0121ee 100644 --- a/lib/js/waveform_viewer/player/player.js +++ b/lib/js/waveform_viewer/player/player.js @@ -57,8 +57,8 @@ define(["m/bootstrap", "m/player/waveform/waveform.mixins"], function (bootstrap bootstrap.pubsub.emit("player_pause", that.getTime()); }); - bootstrap.pubsub.on("waveform_seek", function (seconds) { - that.seekBySeconds(seconds); + this.player.addEventListener("seeked", function () { + bootstrap.pubsub.emit("waveform_seek", that.getTime()); }); }, diff --git a/lib/js/waveform_viewer/player/waveform/waveform.overview.js b/lib/js/waveform_viewer/player/waveform/waveform.overview.js index 83fcf1d27..1ff0d7452 100644 --- a/lib/js/waveform_viewer/player/waveform/waveform.overview.js +++ b/lib/js/waveform_viewer/player/waveform/waveform.overview.js @@ -57,19 +57,15 @@ define([ that.data.time(event.layerX + width) ); - that.playheadPixel = event.layerX; - that.updateUi(that.playheadPixel); - - bootstrap.pubsub.emit("overview_user_seek", that.data.time(event.layerX)); + bootstrap.pubsub.emit("overview_user_seek", that.data.time(event.layerX), event.layerX); that.stage.on("mousemove", function (event) { that.updateRefWaveform( that.data.time(event.layerX), that.data.time(event.layerX + width) ); - that.playheadPixel = event.layerX; - that.updateUi(that.playheadPixel); - bootstrap.pubsub.emit("overview_user_seek", that.data.time(event.layerX)); + + bootstrap.pubsub.emit("overview_user_seek", that.data.time(event.layerX), event.layerX); }); $(document).on("mouseup", function () { @@ -87,12 +83,18 @@ define([ bootstrap.pubsub.on("player_time_update", function (time) { if (!that.seeking) { - that.currentTime = time; - that.playheadPixel = that.data.at_time(that.currentTime); + that.playheadPixel = that.data.at_time(time); that.updateUi(that.playheadPixel); } }); + bootstrap.pubsub.on("overview_user_seek", function (time, frame) { + that.playheadPixel = frame; + that.updateUi(that.playheadPixel); + + options.audioElement.currentTime = time; + }); + bootstrap.pubsub.on("waveform_zoom_displaying", function (start, end) { that.updateRefWaveform(start, end); }); diff --git a/lib/js/waveform_viewer/player/waveform/waveform.zoomview.js b/lib/js/waveform_viewer/player/waveform/waveform.zoomview.js index 994bba6a6..1804ea75d 100644 --- a/lib/js/waveform_viewer/player/waveform/waveform.zoomview.js +++ b/lib/js/waveform_viewer/player/waveform/waveform.zoomview.js @@ -21,7 +21,6 @@ define([ that.seeking = false; that.current_zoom_level = 0; - that.currentTime = 0; that.data = that.rootData.resample({ scale: options.zoomLevels[that.current_zoom_level] @@ -70,9 +69,7 @@ define([ var x = event.layerX, dX, p; // Set playhead position - that.currentTime = that.data.time(that.frameOffset + x); - that.syncPlayhead(that.frameOffset + x); - options.audioElement.currentTime = that.currentTime; + bootstrap.pubsub.emit("zoomview_user_seek", that.data.time(that.frameOffset + x), that.frameOffset + x); // enable drag if necessary that.stage.on("mousemove", function (event) { @@ -95,31 +92,44 @@ define([ // EVENTS ==================================================== + var userSeekHandler = function userSeekHandler (time) { + that.seekFrame(that.data.at_time(time)); + + if (that.playing){ + that.playFrom(time, that.data.at_time(time)); + } + }; + bootstrap.pubsub.on("player_time_update", function (time) { if (!that.seeking && !that.playing) { - that.currentTime = time; - that.seekFrame(that.data.at_time(that.currentTime)); + that.seekFrame(that.data.at_time(time)); } }); - bootstrap.pubsub.on("overview_user_seek", function (time) { - that.currentTime = time; - that.seekFrame(that.data.at_time(that.currentTime)); + bootstrap.pubsub.on("zoomview_user_seek", function (time, frame) { + options.audioElement.currentTime = time; + + that.syncPlayhead(frame); + + if (that.playing){ + that.playFrom(time, that.data.at_time(time)); + } }); + bootstrap.pubsub.on("waveform_seek", userSeekHandler); + bootstrap.pubsub.on("overview_user_seek", userSeekHandler); + bootstrap.pubsub.on("player_play", function (time) { that.playing = true; - that.currentTime = time; that.playFrom(time, that.data.at_time(time)); }); bootstrap.pubsub.on("player_pause", function (time) { that.playing = false; - that.currentTime = time; if (that.playheadLineAnimation) { that.playheadLineAnimation.stop(); } - that.syncPlayhead(that.data.at_time(that.currentTime)); + that.syncPlayhead(that.data.at_time(time)); }); bootstrap.pubsub.on("waveform_zoom_level_changed", function (zoom_level) { @@ -133,7 +143,7 @@ define([ scale: zoom_level }); that.pixelsPerSecond = that.data.pixels_per_second; - that.seekFrame(that.data.at_time(that.currentTime)); + that.seekFrame(that.data.at_time(options.audioElement.currentTime)); } }); @@ -146,26 +156,17 @@ define([ }); // KEYBOARD EVENTS ========================================= + var nudgeFrame = function nudgeFrame(step){ + var atTime = options.audioElement.currentTime; - bootstrap.pubsub.on("kybrd_left", function () { - that.currentTime -= that.options.nudgeIncrement; - that.seekFrame(that.data.at_time(that.currentTime)); - }); - - bootstrap.pubsub.on("kybrd_right", function () { - that.currentTime += that.options.nudgeIncrement; - that.seekFrame(that.data.at_time(that.currentTime)); - }); + atTime += (that.options.nudgeIncrement * step); + that.seekFrame(that.data.at_time(atTime)); + }; - bootstrap.pubsub.on("kybrd_shift_left", function () { - that.currentTime -= (that.options.nudgeIncrement*10); - that.seekFrame(that.data.at_time(that.currentTime)); - }); - - bootstrap.pubsub.on("kybrd_shift_right", function () { - that.currentTime += (that.options.nudgeIncrement*10); - that.seekFrame(that.data.at_time(that.currentTime)); - }); + bootstrap.pubsub.on("kybrd_left", nudgeFrame.bind(that, -1)); + bootstrap.pubsub.on("kybrd_right", nudgeFrame.bind(that, 1)); + bootstrap.pubsub.on("kybrd_shift_left", nudgeFrame.bind(that, -10)); + bootstrap.pubsub.on("kybrd_shift_right", nudgeFrame.bind(that, 10)); } WaveformZoomView.prototype.createZoomWaveform = function() {