Improve ugoira controls

app/assets/stylesheets/specific/posts.css.scss

@@ -521,3 +521,14 @@ div#unapprove-dialog {
     width: 100%;
   }
 }
+
+#ugoira-controls {
+  button {
+    height: 2em;
+    width: 5em;
+  }
+
+  #progressbar {
+    height: 1.5em;
+  }
+}

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

@@ -16,15 +16,13 @@
                 "data-score" => post.score,
                 "data-fav-count" => post.fav_count) %>
 
-<div id="progressbar"></div>
-
-<p>
-  <%= link_to "Play", "#", :id => "ugoira-play" %>
-  | <%= link_to "Pause", "#", :id => "ugoira-pause" %>  
-  | <%= link_to "Rewind", "#", :id => "ugoira-rewind" %>
-  | <%= link_to "Stop", "#", :id => "ugoira-stop" %>
-  | <%= link_to "Save as video (right click and save)", post.large_file_url %>
-</p>
+<div id="ugoira-controls">
+  <div id="progressbar" 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" %>
+  <%= link_to "Save as video (right click and save)", post.large_file_url %>
+</div>
 
 <% content_for(:html_header) do %>
   <%= javascript_include_tag "ugoira_player" %>
@@ -60,22 +58,23 @@
           $("#progressbar").remove();
         }
       });
+
       $("#ugoira-play").click(function(e) {
         Danbooru.Ugoira.player.play();
+        $(this).hide();
+        $("#ugoira-pause").show();
         e.preventDefault();
       })
       $("#ugoira-pause").click(function(e) {
         Danbooru.Ugoira.player.pause();
+        $(this).hide();
+        $("#ugoira-play").show();
         e.preventDefault();
       });
       $("#ugoira-rewind").click(function(e) {
         Danbooru.Ugoira.player.rewind();
         e.preventDefault();
       });
-      $("#ugoira-stop").click(function(e) {
-        Danbooru.Ugoira.player.stop();
-        e.preventDefault();
-      });
     });
   </script>
 <% end %>