Add seek slider

This commit is contained in:
Toks
2014-10-18 16:48:40 -04:00
committed by r888888888
parent 34e3fd45b9
commit 1bcec0fbbf
3 changed files with 33 additions and 6 deletions

View File

@@ -18,6 +18,7 @@
<div id="ugoira-controls">
<div id="progressbar" style="width: <%= post.image_width %>px;"></div>
<div id="seek-slider" style="width: <%= post.image_width %>px;"></div>
<%= button_tag "Play", :id => "ugoira-play", :style => "display: none;" %>
<%= button_tag "Pause", :id => "ugoira-pause" %>
<%= button_tag "Rewind", :id => "ugoira-rewind" %>
@@ -59,22 +60,47 @@
}
});
var player_manually_paused = false;
$("#ugoira-play").click(function(e) {
Danbooru.Ugoira.player.play();
$(this).hide();
$("#ugoira-pause").show();
player_manually_paused = false;
e.preventDefault();
})
$("#ugoira-pause").click(function(e) {
Danbooru.Ugoira.player.pause();
$(this).hide();
$("#ugoira-play").show();
player_manually_paused = true;
e.preventDefault();
});
$("#ugoira-rewind").click(function(e) {
Danbooru.Ugoira.player.rewind();
e.preventDefault();
});
$("#seek-slider").slider({
min: 0,
max: Danbooru.Ugoira.player._frameCount-1,
start: function(event, ui) {
// Need to pause while slider is being dragged or playback speed will bug out
Danbooru.Ugoira.player.pause();
},
slide: function(event, ui) {
Danbooru.Ugoira.player._frame = ui.value;
Danbooru.Ugoira.player._displayFrame();
},
stop: function(event, ui) {
// Resume playback when dragging stops, but only if player was not paused by the user earlier
if (!(player_manually_paused)) {
Danbooru.Ugoira.player.play();
}
}
});
$(Danbooru.Ugoira.player).on("frame", function(frame, frame_number) {
$("#seek-slider").slider("option", "value", frame_number);
});
});
</script>
<% end %>