render ugoira webm if user prefers large files
This commit is contained in:
r888888888
@@ -1,115 +1,5 @@
|
|||||||
<%= content_tag(
|
<% if CurrentUser.user.default_image_size == "large" && params[:original].blank? %>
|
||||||
:canvas,
|
<%= render "posts/partials/show/ugoira_webm", :post => post %>
|
||||||
nil,
|
<% else %>
|
||||||
:id => "image",
|
<%= render "posts/partials/show/ugoira_original", :post => post %>
|
||||||
: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, 350].max %>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, 350].max - 81 %>px;"></div>
|
|
||||||
</div>
|
|
||||||
<p id="save-video-link">
|
|
||||||
<% if post.has_ugoira_webm? %>
|
|
||||||
<%= link_to "Save as video (right click and save)", post.large_file_url %>
|
|
||||||
<% else %>
|
|
||||||
WebM conversion pending
|
|
||||||
<% end %>
|
|
||||||
</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 %>
|
<% end %>
|
||||||
115
app/views/posts/partials/show/_ugoira_original.html.erb
Normal file
115
app/views/posts/partials/show/_ugoira_original.html.erb
Normal file
@@ -0,0 +1,115 @@
|
|||||||
|
<%= 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, 350].max %>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, 350].max - 81 %>px;"></div>
|
||||||
|
</div>
|
||||||
|
<p id="save-video-link">
|
||||||
|
<% if post.has_ugoira_webm? %>
|
||||||
|
<%= link_to "Save as video (right click and save)", post.large_file_url %>
|
||||||
|
<% else %>
|
||||||
|
WebM conversion pending
|
||||||
|
<% end %>
|
||||||
|
</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 %>
|
||||||
3
app/views/posts/partials/show/_ugoira_webm.html.erb
Normal file
3
app/views/posts/partials/show/_ugoira_webm.html.erb
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
<%= content_tag(:video, nil, :id => "image", :width => post.image_width, :height => post.image_height, :autoplay => true, :loop => true, :controls => "controls", :src => post.large_file_url) %>
|
||||||
|
|
||||||
|
<p><%= link_to "Save this video (right click and save)", post.large_file_url %> | <%= link_to "View original", post_path(post, :original => 1) %></p>
|
||||||
Reference in New Issue
Block a user