I've been working on an AV timeline scrubber. For the most part, it's working, except after a target element is dragged, then the animation stops and will not resume. It does call the seek appropriately with the correct value in seconds.
If I kill the animation and restart it each time after a drag event, the coordinates of the scrubber knob get messed up and I cannot tell where the darn thing is at or where it should be. Plus it seems to make more sense that an animation not have to be recreated every time.
What am I missing here?
D
var knob_offset = 4;
Draggable.create("#pb-scrubber-knob",
{ bounds: $("#pb-scrubber-bounds"),
type: "x",
edgeResistance: 1,
onDragStart: function() {
var knob = Draggable.get("#pb-scrubber-knob");
knob.update();
},
onDrag: function() {
$("#pb-scrubber-fill").width(
$("#pb-scrubber-knob").position().left +
knob_offset
);
$("#pb-elapsed-time").text(
window.odeshell.formatTrackTime(
window.odeshell.getTrackPosition()));
},
onDragEnd: function() {
$("#pb-elapsed-time").text(
window.odeshell.formatTrackTime(
window.odeshell.getTrackPosition())
);
window.odeshell.seekScrub();
},
onUpdate: function() {
$("#pb-scrubber-fill").width(
$("#pb-scrubber-knob").position().left +
knob_offset
);
},
});
window.odeshell.startScrub = function() {
var dur = window.odeshell.getScreenDuration();
var animate_to = $("#pb-scrubber-bounds").width()-knob_offset;
$("#pb-elapsed-time").text(window.odeshell.formatTrackTime(0));
if ( window.odeshell.tlScrubberKnob !== undefined ) {
window.odeshell.restartScrub();
}
else {
window.odeshell.tlScrubberKnob = new TweenLite(
"#pb-scrubber-knob",
(dur/1000),
{ left:animate_to,
immediateRender: true,
ease:Linear.easeNone,
onUpdate: function() {
var sndpos = window.odeshell.getTrackPosition();
var dur = window.odeshell.getScreenDuration();
var kpos = $("#pb-scrubber-knob").position().left;
var bounds = $('#pb-scrubber-bounds').width()-
($("#pb-scrubber-knob").width() + 8);
$("#pb-elapsed-time").text(
window.odeshell.formatTrackTime(sndpos));
$("#pb-scrubber-fill").width(kpos);
if ( window.odeshell.playComplete() &&
(kpos >= bounds) ) {
window.odeshell.stopScrub();
}
}
});
}
};
window.odeshell.restartScrub = function() {
if ( window.odeshell.tlScrubberKnob !== undefined ) {
window.odeshell.tlScrubberKnob.restart(false, false);
}
};
window.odeshell.seekScrub = function() {
if ( window.odeshell.tlScrubberKnob === undefined ) { return; }
var kpos = $('#pb-scrubber-knob').position().left;
var dur = window.odeshell.getScreenDuration();
var animate_to = $("#pb-scrubber-bounds").width()-knob_offset;
var prct = kpos/animate_to;
var sndpos = dur * prct;
if ( sndpos < 0) { sndpos = 0; }
if ( sndpos >= dur) { sndpos = dur; }
var seekpos = Math.round(sndpos/1000);
$("#pb-elapsed-time").text(window.odeshell.formatTrackTime(sndpos));
window.odeshell.setTrackPosition(sndpos);
window.odeshell.tlScrubberKnob.seek(seekpos);
if ( !window.odeshell.tlScrubberKnob.paused() ) {
window.odeshell.tlScrubberKnob.play(seekpos);
}
};
window.odeshell.resumeScrub = function() {
if ( window.odeshell.tlScrubberKnob !== undefined ) {
window.odeshell.tlScrubberKnob.resume();
}
};
window.odeshell.pauseScrub = function() {
if ( window.odeshell.tlScrubberKnob !== undefined ) {
window.odeshell.tlScrubberKnob.pause();
}
};
window.odeshell.stopScrub = function() {
if ( window.odeshell.tlScrubberKnob !== undefined ) {
window.odeshell.tlScrubberKnob.pause();
}
};