mirror of
https://gitea.invidious.io/iv-org/invidious.git
synced 2024-08-14 16:47:39 +00:00
210 lines
6.9 KiB
Text
210 lines
6.9 KiB
Text
<% content_for "header" do %>
|
|
<meta name="thumbnail" content="<%= thumbnail %>">
|
|
<link rel="stylesheet" href="https://vjs.zencdn.net/6.6.3/video-js.css">
|
|
<link rel="stylesheet" href="https://unpkg.com/silvermine-videojs-quality-selector/dist/css/quality-selector.css">
|
|
<script src="https://vjs.zencdn.net/6.6.3/video.js"></script>
|
|
<script src="https://cdn.sc.gl/videojs-hotkeys/latest/videojs.hotkeys.min.js"></script>
|
|
<script src="https://unpkg.com/silvermine-videojs-quality-selector/dist/js/silvermine-videojs-quality-selector.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/videojs-offset/dist/videojs-offset.min.js"></script>
|
|
<title><%= video.title %> - Invidious</title>
|
|
<% end %>
|
|
|
|
<div class="h-box">
|
|
<% if listen %>
|
|
<%= render "src/views/player/audio.ecr" %>
|
|
<% else %>
|
|
<%= render "src/views/player/video.ecr" %>
|
|
<% end %>
|
|
</div>
|
|
|
|
<script>
|
|
var options = {
|
|
aspectRatio: "16:9",
|
|
preload: "auto",
|
|
playbackRates: [0.5, 1, 1.5, 2],
|
|
fluid: true,
|
|
controlBar: {
|
|
children: [
|
|
'playToggle',
|
|
'volumePanel',
|
|
'progressControl',
|
|
'remainingTimeDisplay',
|
|
'qualitySelector',
|
|
'playbackRateMenuButton',
|
|
'fullscreenToggle',
|
|
],
|
|
},
|
|
};
|
|
var player = videojs('player', options, function() {
|
|
this.hotkeys({
|
|
volumeStep: 0.1,
|
|
seekStep: 5,
|
|
enableModifiersForNumbers: false,
|
|
enableVolumeScroll: false,
|
|
customKeys: {
|
|
play: {
|
|
key: function(e) {
|
|
// Toggle play with K Key
|
|
return (e.which === 75);
|
|
},
|
|
handler: function(player, options, e) {
|
|
if (player.paused()) {
|
|
player.play();
|
|
} else {
|
|
player.pause();
|
|
}
|
|
}
|
|
},
|
|
backward: {
|
|
key: function(e) {
|
|
// Go backward 5 seconds
|
|
return (e.which === 74);
|
|
},
|
|
handler: function(player, options, e) {
|
|
player.currentTime(player.currentTime() - 5);
|
|
}
|
|
},
|
|
forward: {
|
|
key: function(e) {
|
|
// Go forward 5 seconds
|
|
return (e.which === 76);
|
|
},
|
|
handler: function(player, options, e) {
|
|
player.currentTime(player.currentTime() + 5);
|
|
}
|
|
}
|
|
}
|
|
});
|
|
});
|
|
player.offset({
|
|
start: <%= video_start %>,
|
|
end: <%= video_end %>,
|
|
restart_beginning: true
|
|
});
|
|
|
|
function toggle(target) {
|
|
body = target.parentNode.parentNode.children[1];
|
|
if (body.style.display === null || body.style.display === '') {
|
|
target.innerHTML = '[ + ]';
|
|
body.style.display = 'none';
|
|
} else {
|
|
target.innerHTML = '[ - ]';
|
|
body.style.display = '';
|
|
}
|
|
};
|
|
|
|
function toggle_comments(target) {
|
|
body = target.parentNode.parentNode.parentNode.children[1];
|
|
if (body.style.display === null || body.style.display === '') {
|
|
target.innerHTML = '[ + ]';
|
|
body.style.display = 'none';
|
|
} else {
|
|
target.innerHTML = '[ - ]';
|
|
body.style.display = '';
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<div class="h-box">
|
|
<h1>
|
|
<%= video.info["title"] %>
|
|
<% if listen %>
|
|
<a href="/watch?<%= env.params.query %>">
|
|
<i class="fa fa-video" aria-hidden="true"></i>
|
|
</a>
|
|
<% else %>
|
|
<a href="/watch?<%= env.params.query %>&listen=true">
|
|
<i class="fa fa-volume-up" aria-hidden="true"></i>
|
|
</a>
|
|
<% end %>
|
|
</h1>
|
|
</div>
|
|
|
|
<div class="pure-g">
|
|
<div class="pure-u-1 pure-u-md-1-5">
|
|
<div style="overflow-wrap:break-word; word-wrap:break-word;" class="h-box">
|
|
<p><i class="fa fa-eye" aria-hidden="true"></i> <%= number_with_separator(video.views) %></p>
|
|
<p><i class="fa fa-thumbs-up" aria-hidden="true"></i> <%= number_with_separator(video.likes) %></p>
|
|
<p><i class="fa fa-thumbs-down" aria-hidden="true"></i> <%= number_with_separator(video.dislikes) %></p>
|
|
<p id="Wilson">Wilson Score : <%= video.wilson_score.round(4) %></p>
|
|
<p id="Rating">Rating : <%= rating.round(4) %> / 5</p>
|
|
<p id="Engagement">Engagement : <%= engagement.round(2) %>%</p>
|
|
<% if ad_slots %>
|
|
<p>Ad Slots : <%= ad_slots %></p>
|
|
<% end %>
|
|
<% if engage_types %>
|
|
<p>Engage Types : <%= engage_types %></p>
|
|
<% end %>
|
|
<% if ad_tag %>
|
|
<p>Ad Category : <%= ad_category %></p>
|
|
<p>Ad Tags(?) : <%= k2 %></p>
|
|
<% end %>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="pure-u-1 pure-u-md-3-5">
|
|
<div style="overflow-wrap:break-word; word-wrap:break-word;" class="h-box">
|
|
<p>
|
|
<a href="https://youtube.com/channel/<%= video.info["ucid"] %>">
|
|
<h3><%= video.info["author"] %></h3>
|
|
</a>
|
|
</p>
|
|
<% if authorized %>
|
|
<% if subscriptions.includes? video.info["ucid"] %>
|
|
<p>
|
|
<a href="/subscription_ajax?action_remove_subscriptions=1&c=<%= video.info["ucid"] %>">
|
|
<b>Unsubscribe from <%= video.info["author"] %></b>
|
|
</a>
|
|
</p>
|
|
<% else %>
|
|
<p>
|
|
<a href="/subscription_ajax?action_create_subscription_to_channel=1&c=<%= video.info["ucid"] %>">
|
|
<b>Subscribe to <%= video.info["author"] %></b>
|
|
</a>
|
|
</p>
|
|
<% end %>
|
|
<% end %>
|
|
<p>
|
|
<b>Shared <%= video.published.to_s("%B %-d, %Y") %></b>
|
|
</p>
|
|
<div style="overflow-wrap:break-word; word-wrap:break-word;">
|
|
<%= video.description %>
|
|
</div>
|
|
<hr style="margin-left:1em; margin-right:1em;">
|
|
<% if reddit_thread && !reddit_html.empty? %>
|
|
<div>
|
|
<div>
|
|
<h3>
|
|
<a href="javascript:void(0)" onclick="toggle_comments(this)">[ - ]</a>
|
|
<%= reddit_thread.data.title %>
|
|
</h3>
|
|
<b>
|
|
<a target="_blank" href="https://reddit.com<%= reddit_thread.data.permalink %>">View more comments on Reddit</a>
|
|
</b>
|
|
</div>
|
|
<div>
|
|
<%= reddit_html %>
|
|
</div>
|
|
</div>
|
|
<hr style="margin-left:1em; margin-right:1em;">
|
|
<% end %>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="pure-u-1 pure-u-md-1-5">
|
|
<div style="overflow-wrap:break-word; word-wrap:break-word;" class="h-box">
|
|
<% rvs.each do |rv| %>
|
|
<% if rv.has_key?("id") %>
|
|
<a href="/watch?v=<%= rv["id"] %>">
|
|
<img style="width:100%;" alt="thumbnail" src="<%= rv["iurlmq"] %>">
|
|
<p style="width:100%"><%= rv["title"] %></p>
|
|
<p>
|
|
<b style="width: 100%"><%= rv["author"] %></b>
|
|
</p>
|
|
</a>
|
|
<% end %>
|
|
<% end %>
|
|
</div>
|
|
</div>
|
|
</div>
|