b843f54d20
This puts the load progress in the same place as the seek slider so them switching doesn't move around the bottom half of the page.
110 lines
3.7 KiB
Plaintext
110 lines
3.7 KiB
Plaintext
<%= content_tag(
|
|
:canvas,
|
|
nil,
|
|
:id => "image",
|
|
:width => post.image_width,
|
|
:height => post.image_height,
|
|
"data-original-width" => post.image_width,
|
|
"data-original-height" => post.image_height,
|
|
"data-large-width" => post.image_width,
|
|
"data-large-height" => post.image_height,
|
|
"data-tags" => post.tag_string,
|
|
"data-uploader" => post.uploader_name,
|
|
"data-rating" => post.rating,
|
|
"data-flags" => post.status_flags,
|
|
"data-parent-id" => post.parent_id,
|
|
"data-has-children" => post.has_children?,
|
|
"data-has-active-children" => post.has_active_children?,
|
|
"data-score" => post.score,
|
|
"data-fav-count" => post.fav_count,
|
|
"data-ugoira-frames" => post.pixiv_ugoira_frame_data.data.to_json,
|
|
"data-ugoira-content-type" => post.pixiv_ugoira_frame_data.content_type.to_json,
|
|
) %>
|
|
|
|
<div id="ugoira-controls">
|
|
<div id="ugoira-control-panel" style="width: <%= @post.image_width %>px;">
|
|
<%= button_tag "Play", :id => "ugoira-play", :style => "display: none;" %>
|
|
<%= button_tag "Pause", :id => "ugoira-pause" %>
|
|
<p id="ugoira-load-progress">Loaded <span id="ugoira-load-percentage">0</span>%</p>
|
|
<div id="seek-slider" style="display: none; width: <%= @post.image_width - 81 %>px;"></div>
|
|
</div>
|
|
<p id="save-video-link"><%= link_to "Save as video (right click and save)", post.large_file_url %></p>
|
|
</div>
|
|
|
|
<% content_for(:html_header) do %>
|
|
<%= javascript_include_tag "ugoira_player" %>
|
|
<script type="text/javascript">
|
|
Danbooru.Ugoira = {};
|
|
|
|
Danbooru.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);
|
|
}
|
|
|
|
Danbooru.Ugoira.player = null;
|
|
|
|
$(function() {
|
|
Danbooru.Ugoira.create_player();
|
|
$(Danbooru.Ugoira.player).on("loadProgress", function(ev, progress) {
|
|
$("#ugoira-load-percentage").text(Math.floor(progress * 100));
|
|
});
|
|
$(Danbooru.Ugoira.player).on("loadingStateChanged", function(ev, state) {
|
|
if (state === 2) {
|
|
$("#ugoira-load-progress").remove();
|
|
$("#seek-slider").show();
|
|
}
|
|
});
|
|
|
|
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();
|
|
});
|
|
|
|
$("#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 %>
|