fix js for ugoira player

app/javascript/packs/application.js

@@ -36,3 +36,4 @@ export { default as Dtext } from '../src/javascripts/dtext.js';
 export { default as Note } from '../src/javascripts/notes.js';
 export { default as PostModeMenu } from '../src/javascripts/post_mode_menu.js';
 export { default as Utility } from '../src/javascripts/utility.js';
+export { default as Ugoira } from '../src/javascripts/ugoira.js';

app/javascript/src/javascripts/ugoira.js

@@ -0,0 +1,76 @@
+import { ZipImagePlayer } from '../../vendor/pixiv-ugoira-player';
+require("jquery-ui/ui/widgets/progressbar");
+require("jquery-ui/ui/widgets/slider");
+require("jquery-ui/themes/base/progressbar.css");
+require("jquery-ui/themes/base/slider.css");
+
+let Ugoira = {};
+
+Ugoira.create_player = (mime_type, frames, file_url) => {
+  var meta_data = {
+    mime_type: mime_type,
+    frames: frames
+  };
+  var options = {
+    canvas: $("#image")[0],
+    source: file_url,
+    metadata: meta_data,
+    chunkSize: 300000,
+    loop: true,
+    autoStart: true,
+    debug: false,
+  }
+
+  Ugoira.player = new ZipImagePlayer(options);
+  Ugoira.player_manually_paused = false;
+
+  $(Ugoira.player).on("loadProgress", (ev, progress) => {
+    $("#seek-slider").progressbar("value", Math.floor(progress * 100));
+  });
+
+  $("#ugoira-play").click(e => {
+    Ugoira.player.play();
+    $(this).hide();
+    $("#ugoira-pause").show();
+    Ugoira.player_manually_paused = false;
+    e.preventDefault();
+  })
+
+  $("#ugoira-pause").click(e => {
+    Ugoira.player.pause();
+    $(this).hide();
+    $("#ugoira-play").show();
+    Ugoira.player_manually_paused = true;
+    e.preventDefault();
+  });
+
+  $("#seek-slider").progressbar({
+    value: 0
+  });
+
+  $("#seek-slider").slider({
+    min: 0,
+    max: Ugoira.player._frameCount-1,
+    start: (event, ui) => {
+      // Need to pause while slider is being dragged or playback speed will bug out
+      Ugoira.player.pause();
+    },
+    slide: (event, ui) => {
+      Ugoira.player._frame = ui.value;
+      Ugoira.player._displayFrame();
+    },
+    stop: (event, ui) => {
+      // Resume playback when dragging stops, but only if player was not paused by the user earlier
+      if (!(Ugoira.player_manually_paused)) {
+        Ugoira.player.play();
+      }
+    }
+  });
+
+  $(Ugoira.player).on("frame", (frame, frame_number) => {
+    $("#seek-slider").slider("option", "value", frame_number);
+  });
+}
+
+export default Ugoira;
+

app/javascript/vendor/pixiv-ugoira-player.js

@@ -518,4 +518,8 @@ ZipImagePlayer.prototype = {
     hasError: function() {
         return this._failed;
     }
-}
+}
+
+// added
+
+export { ZipImagePlayer };

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

@@ -38,74 +38,12 @@
 
 <% content_for(:html_header) do %>
   <script type="text/javascript">
-    var Ugoira = {};
-
-    Ugoira.create_player = function() {
-      var meta_data = {
-        mime_type: <%= raw @post.pixiv_ugoira_frame_data.content_type.to_json %>,
-        frames: <%= raw @post.pixiv_ugoira_frame_data.data.to_json %>
-      };
-      var options = {
-        canvas: document.getElementById("image"),
-        source: "<%= @post.file_url %>",
-        metadata: meta_data,
-        chunkSize: 300000,
-        loop: true,
-        autoStart: true,
-        debug: false,
-      }
-      this.player = new ZipImagePlayer(options);
-    }
-
-    Ugoira.player = null;
-
     $(function() {
-      Ugoira.create_player();
+      Danbooru.Ugoira.create_player(
-      $(Ugoira.player).on("loadProgress", function(ev, progress) {
+        <%= raw @post.pixiv_ugoira_frame_data.content_type.to_json %>, 
-        $("#seek-slider").progressbar("value", Math.floor(progress * 100));
+        <%= raw @post.pixiv_ugoira_frame_data.data.to_json %>,
-      });
+        "<%= @post.file_url %>"
-
+      );      
-      var player_manually_paused = false;
-      $("#ugoira-play").click(function(e) {
-        Ugoira.player.play();
-        $(this).hide();
-        $("#ugoira-pause").show();
-        player_manually_paused = false;
-        e.preventDefault();
-      })
-      $("#ugoira-pause").click(function(e) {
-        Ugoira.player.pause();
-        $(this).hide();
-        $("#ugoira-play").show();
-        player_manually_paused = true;
-        e.preventDefault();
-      });
-
-      $("#seek-slider").progressbar({
-        value: 0
-      });
-
-      $("#seek-slider").slider({
-        min: 0,
-        max: Ugoira.player._frameCount-1,
-        start: function(event, ui) {
-          // Need to pause while slider is being dragged or playback speed will bug out
-          Ugoira.player.pause();
-        },
-        slide: function(event, ui) {
-          Ugoira.player._frame = ui.value;
-          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)) {
-            Ugoira.player.play();
-          }
-        }
-      });
-      $(Ugoira.player).on("frame", function(frame, frame_number) {
-        $("#seek-slider").slider("option", "value", frame_number);
-      });
     });
   </script>
 <% end %>