Add seek slider

app/views/posts/partials/show/_ugoira.html.erb

@@ -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 %>