mirror of
https://gitea.invidious.io/iv-org/invidious-copy-2022-08-14.git
synced 2024-08-15 00:53:20 +00:00
408 lines
14 KiB
Text
408 lines
14 KiB
Text
<% content_for "header" do %>
|
|
<meta name="thumbnail" content="<%= thumbnail %>">
|
|
<meta name="description" content="<%= description %>">
|
|
<meta name="keywords" content="<%= video.info["keywords"] %>">
|
|
<meta property="og:site_name" content="Invidious">
|
|
<meta property="og:url" content="https://invidio.us/watch?v=<%= video.id %>">
|
|
<meta property="og:title" content="<%= video.title %>">
|
|
<meta property="og:image" content="https://i.ytimg.com/vi/<%= video.id %>/hqdefault.jpg">
|
|
<meta property="og:description" content="<%= description %>">
|
|
<meta property="og:type" content="video.other">
|
|
<meta property="og:video:url" content="https://invidio.us/embed/<%= video.id %>">
|
|
<meta property="og:video:secure_url" content="https://invidio.us/embed/<%= video.id %>">
|
|
<meta property="og:video:type" content="text/html">
|
|
<meta property="og:video:width" content="1280">
|
|
<meta property="og:video:height" content="720">
|
|
<meta name="twitter:card" content="player">
|
|
<meta name="twitter:site" content="@omarroth">
|
|
<meta name="twitter:url" content="https://invidio.us/watch?v=<%= video.id %>">
|
|
<meta name="twitter:title" content="<%= video.title %>">
|
|
<meta name="twitter:description" content="<%= description %>">
|
|
<meta name="twitter:image" content="https://i.ytimg.com/vi/<%= video.id %>/maxresdefault.jpg">
|
|
<meta name="twitter:player" content="https://invidio.us/embed/<%= video.id %>">
|
|
<meta name="twitter:player:width" content="1280">
|
|
<meta name="twitter:player:height" content="720">
|
|
<link rel="stylesheet" href="https://unpkg.com/video.js@6.10.3/dist/video-js.min.css">
|
|
<link rel="stylesheet" href="https://unpkg.com/silvermine-videojs-quality-selector@1.1.2/dist/css/quality-selector.css">
|
|
<link rel="stylesheet" href="https://unpkg.com/videojs-markers@1.0.1/dist/videojs.markers.min.css">
|
|
<link rel="stylesheet" href="https://unpkg.com/videojs-share@1.1.0/dist/videojs-share.css">
|
|
<script src="https://unpkg.com/video.js@6.10.3/dist/video.min.js"></script>
|
|
<script src="https://unpkg.com/videojs-hotkeys@0.2.21/videojs.hotkeys.min.js"></script>
|
|
<script src="https://unpkg.com/silvermine-videojs-quality-selector@1.1.2/dist/js/silvermine-videojs-quality-selector.min.js"></script>
|
|
<script src="https://unpkg.com/videojs-markers@1.0.1/dist/videojs-markers.min.js"></script>
|
|
<script src="https://unpkg.com/videojs-share@1.1.0/dist/videojs-share.min.js"></script>
|
|
<title><%= video.title %> - Invidious</title>
|
|
<% end %>
|
|
|
|
<% if hlsvp %>
|
|
<script src="https://unpkg.com/videojs-contrib-hls@5.14.1/dist/videojs-contrib-hls.min.js"></script>
|
|
<% end %>
|
|
|
|
<div class="h-box">
|
|
<video style="width:100%" playsinline poster="<%= thumbnail %>" title="<%= HTML.escape(video.title) %>"
|
|
id="player" class="video-js" data-setup="{}"
|
|
<% if autoplay %>autoplay<% end %>
|
|
<% if video_loop %>loop<% end %>
|
|
controls>
|
|
<% if hlsvp %>
|
|
<source src="<%= hlsvp %>" type="application/x-mpegURL">
|
|
<% else %>
|
|
<% if listen %>
|
|
<% audio_streams.each_with_index do |fmt, i| %>
|
|
<source src="<%= fmt["url"] %>" type="<%= fmt["type"] %>" label="<%= fmt["bitrate"] %>k" selected="<%= i == 0 ? true : false %>">
|
|
<% end %>
|
|
<% else %>
|
|
<% fmt_stream.each_with_index do |fmt, i| %>
|
|
<% if preferences %>
|
|
<source src="<%= fmt["url"] %>" type="<%= fmt["type"] %>" label="<%= fmt["label"] %>" selected="<%= preferences.quality == fmt["label"].split(" - ")[0] %>">
|
|
<% else %>
|
|
<source src="<%= fmt["url"] %>" type="<%= fmt["type"] %>" label="<%= fmt["label"] %>" selected="<%= i == 0 ? true : false %>">
|
|
<% end %>
|
|
<% end %>
|
|
|
|
<% captions.each do |caption| %>
|
|
<track kind="captions" src="/api/v1/captions/<%= video.id %>?label=<%= caption["name"]["simpleText"] %>"
|
|
srclang="<%= caption["languageCode"] %>" label="<%= caption["name"]["simpleText"]%> ">
|
|
<% end %>
|
|
<% end %>
|
|
<% end %>
|
|
</video>
|
|
</div>
|
|
|
|
<script>
|
|
var options = {
|
|
aspectRatio: '16:9',
|
|
preload: 'auto',
|
|
playbackRates: [0.5, 1, 1.5, 2],
|
|
controlBar: {
|
|
children: [
|
|
'playToggle',
|
|
'volumePanel',
|
|
'progressControl',
|
|
'remainingTimeDisplay',
|
|
'captionsButton',
|
|
'qualitySelector',
|
|
'playbackRateMenuButton',
|
|
'fullscreenToggle',
|
|
],
|
|
},
|
|
};
|
|
|
|
var shareOptions = {
|
|
socials: ["fb", "tw", "reddit", "mail"],
|
|
|
|
url: "<%= host_url %>/<%= video.id %>?<%= host_params %>",
|
|
title: "<%= video.title %>",
|
|
description: "<%= description %>",
|
|
image: '<%= thumbnail %>'
|
|
};
|
|
|
|
var player = videojs('player', options, function() {
|
|
this.hotkeys({
|
|
volumeStep: 0.1,
|
|
seekStep: 5,
|
|
enableModifiersForNumbers: 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.share(shareOptions);
|
|
|
|
<% if preferences %>
|
|
player.volume(<%= preferences.volume.to_f / 100 %>);
|
|
player.playbackRate(<%= preferences.speed %>);
|
|
<% end %>
|
|
|
|
<% if video_start > 0 || video_end > 0 %>
|
|
player.markers({
|
|
onMarkerReached: function(marker) {
|
|
if (marker.text === 'End') {
|
|
if (player.loop()) {
|
|
player.markers.prev('Start');
|
|
} else {
|
|
player.pause();
|
|
}
|
|
}
|
|
},
|
|
markers: [
|
|
{time: <%= video_start %>, text: 'Start'},
|
|
<% if video_end < 0 %>
|
|
{time: <%= video.info["length_seconds"].to_f - 0.5 %>, text: 'End'}
|
|
<% else %>
|
|
{time: <%= video_end %>, text: 'End'}
|
|
<% end %>
|
|
]
|
|
});
|
|
|
|
player.currentTime(<%= video_start %>);
|
|
<% end %>
|
|
|
|
<% if !listen %>
|
|
var currentSources = player.currentSources();
|
|
for ( var i = 0; i < currentSources.length; i++ ) {
|
|
if (player.canPlayType(currentSources[i]['type'].split(';')[0]) === '') {
|
|
currentSources.splice(i);
|
|
i--;
|
|
}
|
|
}
|
|
|
|
player.src(currentSources);
|
|
<% end %>
|
|
|
|
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 = '';
|
|
}
|
|
}
|
|
|
|
function timeout(ms, promise) {
|
|
return new Promise(function(resolve, reject) {
|
|
setTimeout(function() {
|
|
reject(new Error('timeout'));
|
|
}, ms);
|
|
promise.then(resolve, reject);
|
|
});
|
|
}
|
|
|
|
function load_comments(target) {
|
|
var continuation = target.getAttribute('data-continuation');
|
|
|
|
var body = target.parentNode.parentNode;
|
|
var fallback = body.innerHTML;
|
|
body.innerHTML =
|
|
'<h3><center class="loading"><i class="icon ion-ios-refresh"></i></center></h3>';
|
|
|
|
var url =
|
|
'/api/v1/comments/<%= video.id %>?format=html&continuation=' + continuation;
|
|
timeout(5000, fetch(url))
|
|
.then(function(response) {
|
|
return response.json();
|
|
})
|
|
.then(
|
|
function(jsonResponse) {
|
|
body.innerHTML = jsonResponse.content_html;
|
|
},
|
|
function(error) {
|
|
body.innerHTML = fallback;
|
|
console.log(response);
|
|
}
|
|
)
|
|
.catch(function(error) {
|
|
body.innerHTML = fallback;
|
|
console.log(error);
|
|
});
|
|
}
|
|
|
|
function get_reddit_comments() {
|
|
fetch('/api/v1/comments/<%= video.id %>?source=reddit')
|
|
.then(function(response) {
|
|
return response.json();
|
|
})
|
|
.then(
|
|
function(jsonResponse) {
|
|
comments = document.getElementById('comments');
|
|
comments.innerHTML = `
|
|
<div>
|
|
<h3>
|
|
<a href="javascript:void(0)" onclick="toggle_comments(this)">[ - ]</a>
|
|
{title}
|
|
</h3>
|
|
<b>
|
|
<a target="_blank" href="https://reddit.com{permalink}">View more comments on Reddit</a>
|
|
</b>
|
|
</div>
|
|
<div>{content_html}</div>
|
|
|
|
<hr style="margin-left:1em; margin-right:1em;">`.supplant({
|
|
title: jsonResponse.title,
|
|
permalink: jsonResponse.permalink,
|
|
content_html: jsonResponse.content_html
|
|
});
|
|
},
|
|
function(response) {
|
|
get_youtube_comments();
|
|
}
|
|
);
|
|
}
|
|
|
|
function get_youtube_comments() {
|
|
fetch('/api/v1/comments/<%= video.id %>?format=html')
|
|
.then(function(response) {
|
|
return response.json();
|
|
})
|
|
.then(
|
|
function(jsonResponse) {
|
|
comments = document.getElementById('comments');
|
|
comments.innerHTML = `
|
|
<div>{content_html}</div>
|
|
<hr style="margin-left:1em; margin-right:1em;">`.supplant({
|
|
content_html: jsonResponse.content_html
|
|
});
|
|
},
|
|
function(response) {
|
|
comments.innerHTML = '';
|
|
}
|
|
);
|
|
}
|
|
|
|
String.prototype.supplant = function(o) {
|
|
return this.replace(/{([^{}]*)}/g, function(a, b) {
|
|
var r = o[b];
|
|
return typeof r === 'string' || typeof r === 'number' ? r : a;
|
|
});
|
|
};
|
|
|
|
<% if preferences && preferences.comments == "reddit" %>
|
|
get_reddit_comments();
|
|
<% else %>
|
|
get_youtube_comments();
|
|
<% end %>
|
|
|
|
</script>
|
|
|
|
<div class="h-box">
|
|
<h1>
|
|
<%= video.title %>
|
|
<% if listen %>
|
|
<a href="/watch?<%= env.params.query %>">
|
|
<i class="icon ion-ios-videocam" aria-hidden="true"></i>
|
|
</a>
|
|
<% else %>
|
|
<a href="/watch?<%= env.params.query %>&listen=true">
|
|
<i class="icon ion-ios-volume-high" aria-hidden="true"></i>
|
|
</a>
|
|
<% end %>
|
|
</h1>
|
|
</div>
|
|
|
|
<div class="pure-g">
|
|
<div class="pure-u-1 pure-u-md-1-5">
|
|
<div class="h-box">
|
|
<p><i class="icon ion-ios-eye" aria-hidden="true"></i> <%= number_with_separator(video.views) %></p>
|
|
<p><i class="icon ion-ios-thumbs-up" aria-hidden="true"></i> <%= number_with_separator(video.likes) %></p>
|
|
<p><i class="icon ion-ios-thumbs-down" aria-hidden="true"></i> <%= number_with_separator(video.dislikes) %></p>
|
|
<p id="Genre">Genre : <%= video.genre %></p>
|
|
<p id="FamilyFriendly">Family Friendly? <%= video.is_family_friendly %></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 id="Slots">Ad Slots : <%= ad_slots %></p>
|
|
<% end %>
|
|
<% if engage_types %>
|
|
<p id="Engage">Engage Types : <%= engage_types %></p>
|
|
<% end %>
|
|
<% if ad_tag %>
|
|
<p id="Category">Ad Category : <%= ad_category %></p>
|
|
<p id="Tags">Ad Tags(?) : <%= k2 %></p>
|
|
<% end %>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="pure-u-1 pure-u-md-3-5">
|
|
<div class="h-box">
|
|
<p>
|
|
<a href="/channel/<%= video.ucid %>">
|
|
<h3><%= video.author %></h3>
|
|
</a>
|
|
</p>
|
|
<% if user %>
|
|
<% if subscriptions.includes? video.ucid %>
|
|
<p>
|
|
<a href="/subscription_ajax?action_remove_subscriptions=1&c=<%= video.ucid %>">
|
|
<b>Unsubscribe from <%= video.author %></b>
|
|
</a>
|
|
</p>
|
|
<% else %>
|
|
<p>
|
|
<a href="/subscription_ajax?action_create_subscription_to_channel=1&c=<%= video.ucid %>">
|
|
<b>Subscribe to <%= video.author %></b>
|
|
</a>
|
|
</p>
|
|
<% end %>
|
|
<% else %>
|
|
<p>
|
|
<a href="/login">
|
|
<b>Login to subscribe to <%= video.author %></b>
|
|
</a>
|
|
</p>
|
|
<% end %>
|
|
<p>
|
|
<b>Shared <%= video.published.to_s("%B %-d, %Y") %></b>
|
|
</p>
|
|
<div>
|
|
<%= video.description %>
|
|
</div>
|
|
<hr style="margin-left:1em; margin-right:1em;">
|
|
<div id="comments">
|
|
<h3><center class="loading"><i class="icon ion-ios-refresh"></i></center></h3>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="pure-u-1 pure-u-md-1-5">
|
|
<div class="h-box">
|
|
<% rvs.each do |rv| %>
|
|
<% if rv.has_key?("id") %>
|
|
<a href="/watch?v=<%= rv["id"] %>">
|
|
<% if preferences && preferences.thin_mode %>
|
|
<% else %>
|
|
<img style="width:100%;" src="<%= rv["iurlmq"] %>">
|
|
<% end %>
|
|
<p style="width:100%"><%= rv["title"] %></p>
|
|
<p>
|
|
<b style="width: 100%"><%= rv["author"] %></b>
|
|
</p>
|
|
</a>
|
|
<% end %>
|
|
<% end %>
|
|
</div>
|
|
</div>
|
|
</div>
|