aa01a386f6
* Change the id of the canvas tag to 'image'. This is what the notes JS expects. It's also what the shift+e edit shortcut depends on. * Add data-original-width/height attributes, which are what the notes JS needs to position notes properly. * Add all the other data attributes that regular images have, because why not.
82 lines
2.7 KiB
Plaintext
82 lines
2.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) %>
|
|
|
|
<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>
|
|
|
|
<% 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) {
|
|
$("#progressbar").progressbar({value: progress * 100});
|
|
});
|
|
$(Danbooru.Ugoira.player).on("loadingStateChanged", function(ev, state) {
|
|
if (state === 2) {
|
|
$("#progressbar").remove();
|
|
}
|
|
});
|
|
$("#ugoira-play").click(function(e) {
|
|
Danbooru.Ugoira.player.play();
|
|
e.preventDefault();
|
|
})
|
|
$("#ugoira-pause").click(function(e) {
|
|
Danbooru.Ugoira.player.pause();
|
|
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 %>
|