Add seek slider
This commit is contained in:
@@ -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 %>
|
||||
|
||||
Reference in New Issue
Block a user