Refactor player.js
This commit is contained in:
Omar Roth
parent
2ddc61fa5c
commit
058711d3a8
|
|
@ -6,12 +6,12 @@ function get_playlist(plid, timeouts = 0) {
|
|||
|
||||
if (plid.startsWith('RD')) {
|
||||
var plid_url = '/api/v1/mixes/' + plid +
|
||||
'?continuation=' + embed_data.id +
|
||||
'&format=html&hl=' + embed_data.preferences.locale;
|
||||
'?continuation=' + video_data.id +
|
||||
'&format=html&hl=' + video_data.preferences.locale;
|
||||
} else {
|
||||
var plid_url = '/api/v1/playlists/' + plid +
|
||||
'?continuation=' + embed_data.id +
|
||||
'&format=html&hl=' + embed_data.preferences.locale;
|
||||
'?continuation=' + video_data.id +
|
||||
'&format=html&hl=' + video_data.preferences.locale;
|
||||
}
|
||||
|
||||
var xhr = new XMLHttpRequest();
|
||||
|
|
@ -21,22 +21,22 @@ function get_playlist(plid, timeouts = 0) {
|
|||
xhr.send();
|
||||
|
||||
xhr.onreadystatechange = function () {
|
||||
if (xhr.readyState == 4) {
|
||||
if (xhr.status == 200) {
|
||||
if (xhr.readyState === 4) {
|
||||
if (xhr.status === 200) {
|
||||
if (xhr.response.nextVideo) {
|
||||
player.on('ended', function () {
|
||||
var url = new URL('https://example.com/embed/' + xhr.response.nextVideo);
|
||||
|
||||
if (embed_data.params.autoplay || embed_data.params.continue_autoplay) {
|
||||
if (video_data.params.autoplay || video_data.params.continue_autoplay) {
|
||||
url.searchParams.set('autoplay', '1');
|
||||
}
|
||||
|
||||
if (embed_data.params.listen !== embed_data.preferences.listen) {
|
||||
url.searchParams.set('listen', embed_data.params.listen);
|
||||
if (video_data.params.listen !== video_data.preferences.listen) {
|
||||
url.searchParams.set('listen', video_data.params.listen);
|
||||
}
|
||||
|
||||
if (embed_data.params.speed !== embed_data.preferences.speed) {
|
||||
url.searchParams.set('speed', embed_data.params.speed);
|
||||
if (video_data.params.speed !== video_data.preferences.speed) {
|
||||
url.searchParams.set('speed', video_data.params.speed);
|
||||
}
|
||||
|
||||
url.searchParams.set('list', plid);
|
||||
|
|
@ -53,26 +53,26 @@ function get_playlist(plid, timeouts = 0) {
|
|||
}
|
||||
}
|
||||
|
||||
if (embed_data.plid) {
|
||||
get_playlist(embed_data.plid);
|
||||
} else if (embed_data.video_series) {
|
||||
if (video_data.plid) {
|
||||
get_playlist(video_data.plid);
|
||||
} else if (video_data.video_series) {
|
||||
player.on('ended', function () {
|
||||
var url = new URL('https://example.com/embed/' + embed_data.video_series.shift());
|
||||
var url = new URL('https://example.com/embed/' + video_data.video_series.shift());
|
||||
|
||||
if (embed_data.params.autoplay || embed_data.params.continue_autoplay) {
|
||||
if (video_data.params.autoplay || video_data.params.continue_autoplay) {
|
||||
url.searchParams.set('autoplay', '1');
|
||||
}
|
||||
|
||||
if (embed_data.params.listen !== embed_data.preferences.listen) {
|
||||
url.searchParams.set('listen', embed_data.params.listen);
|
||||
if (video_data.params.listen !== video_data.preferences.listen) {
|
||||
url.searchParams.set('listen', video_data.params.listen);
|
||||
}
|
||||
|
||||
if (embed_data.params.speed !== embed_data.preferences.speed) {
|
||||
url.searchParams.set('speed', embed_data.params.speed);
|
||||
if (video_data.params.speed !== video_data.preferences.speed) {
|
||||
url.searchParams.set('speed', video_data.params.speed);
|
||||
}
|
||||
|
||||
if (embed_data.video_series.length !== 0) {
|
||||
url.searchParams.set('playlist', embed_data.video_series.join(','))
|
||||
if (video_data.video_series.length !== 0) {
|
||||
url.searchParams.set('playlist', video_data.video_series.join(','))
|
||||
}
|
||||
|
||||
location.assign(url.pathname + url.search);
|
||||
|
|
|
|||
231
assets/js/player.js
Normal file
231
assets/js/player.js
Normal file
|
|
@ -0,0 +1,231 @@
|
|||
var options = {
|
||||
preload: "auto",
|
||||
playbackRates: [0.25, 0.5, 0.75, 1.0, 1.25, 1.5, 2.0],
|
||||
controlBar: {
|
||||
children: [
|
||||
"playToggle",
|
||||
"volumePanel",
|
||||
"currentTimeDisplay",
|
||||
"timeDivider",
|
||||
"durationDisplay",
|
||||
"progressControl",
|
||||
"remainingTimeDisplay",
|
||||
"captionsButton",
|
||||
"qualitySelector",
|
||||
"playbackRateMenuButton",
|
||||
"fullscreenToggle"
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
if (player_data.aspect_ratio) {
|
||||
options.aspectRatio = player_data.aspect_ratio;
|
||||
}
|
||||
|
||||
var embed_url = new URL(location);
|
||||
embed_url.searchParams.delete('v');
|
||||
embed_url = location.origin + '/embed/' + video_data.id + embed_url.search;
|
||||
|
||||
var shareOptions = {
|
||||
socials: ["fbFeed", "tw", "reddit", "email"],
|
||||
|
||||
url: window.location.href,
|
||||
title: player_data.title,
|
||||
description: player_data.description,
|
||||
image: player_data.thumbnail,
|
||||
embedCode: "<iframe id='ivplayer' type='text/html' width='640' height='360' src='" + embed_url + "' frameborder='0'></iframe>"
|
||||
}
|
||||
|
||||
var player = videojs("player", options, function () {
|
||||
this.hotkeys({
|
||||
volumeStep: 0.1,
|
||||
seekStep: 5,
|
||||
enableModifiersForNumbers: false,
|
||||
enableHoverScroll: true,
|
||||
customKeys: {
|
||||
// Toggle play with K Key
|
||||
play: {
|
||||
key: function (e) {
|
||||
return e.which === 75;
|
||||
},
|
||||
handler: function (player, options, e) {
|
||||
if (player.paused()) {
|
||||
player.play();
|
||||
} else {
|
||||
player.pause();
|
||||
}
|
||||
}
|
||||
},
|
||||
// Go backward 10 seconds
|
||||
backward: {
|
||||
key: function (e) {
|
||||
return e.which === 74;
|
||||
},
|
||||
handler: function (player, options, e) {
|
||||
player.currentTime(player.currentTime() - 10);
|
||||
}
|
||||
},
|
||||
// Go forward 10 seconds
|
||||
forward: {
|
||||
key: function (e) {
|
||||
return e.which === 76;
|
||||
},
|
||||
handler: function (player, options, e) {
|
||||
player.currentTime(player.currentTime() + 10);
|
||||
}
|
||||
},
|
||||
// Increase speed
|
||||
increase_speed: {
|
||||
key: function (e) {
|
||||
return (e.which === 190 && e.shiftKey);
|
||||
},
|
||||
handler: function (player, _, e) {
|
||||
size = options.playbackRates.length;
|
||||
index = options.playbackRates.indexOf(player.playbackRate());
|
||||
player.playbackRate(options.playbackRates[(index + 1) % size]);
|
||||
}
|
||||
},
|
||||
// Decrease speed
|
||||
decrease_speed: {
|
||||
key: function (e) {
|
||||
return (e.which === 188 && e.shiftKey);
|
||||
},
|
||||
handler: function (player, _, e) {
|
||||
size = options.playbackRates.length;
|
||||
index = options.playbackRates.indexOf(player.playbackRate());
|
||||
player.playbackRate(options.playbackRates[(size + index - 1) % size]);
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
player.on('error', function (event) {
|
||||
if (player.error().code === 2 || player.error().code === 4) {
|
||||
setInterval(setTimeout(function (event) {
|
||||
console.log('An error occured in the player, reloading...');
|
||||
|
||||
var currentTime = player.currentTime();
|
||||
var playbackRate = player.playbackRate();
|
||||
var paused = player.paused();
|
||||
|
||||
player.load();
|
||||
|
||||
if (currentTime > 0.5) {
|
||||
currentTime -= 0.5;
|
||||
}
|
||||
|
||||
player.currentTime(currentTime);
|
||||
player.playbackRate(playbackRate);
|
||||
|
||||
if (!paused) {
|
||||
player.play();
|
||||
}
|
||||
}, 5000), 5000);
|
||||
}
|
||||
});
|
||||
|
||||
// Add markers
|
||||
if (video_data.params.video_start > 0 || video_data.params.video_end > 0) {
|
||||
var markers = [{ time: video_data.params.video_start, text: 'Start' }];
|
||||
|
||||
if (video_data.params.video_end < 0) {
|
||||
markers.push({ time: video_data.length_seconds - 0.5, text: 'End' });
|
||||
} else {
|
||||
markers.push({ time: video_data.params.video_end, text: 'End' });
|
||||
}
|
||||
|
||||
player.markers({
|
||||
onMarkerReached: function (marker) {
|
||||
if (marker.text === 'End') {
|
||||
if (player.loop()) {
|
||||
player.markers.prev('Start');
|
||||
} else {
|
||||
player.pause();
|
||||
}
|
||||
}
|
||||
},
|
||||
markers: markers
|
||||
});
|
||||
|
||||
player.currentTime(video_data.params.video_start);
|
||||
}
|
||||
|
||||
player.volume(video_data.params.volume / 100);
|
||||
player.playbackRate(video_data.params.speed);
|
||||
|
||||
if (video_data.params.autoplay) {
|
||||
var bpb = player.getChild('bigPlayButton');
|
||||
|
||||
if (bpb) {
|
||||
bpb.hide();
|
||||
|
||||
player.ready(function () {
|
||||
new Promise(function (resolve, reject) {
|
||||
setTimeout(() => resolve(1), 1);
|
||||
}).then(function (result) {
|
||||
var promise = player.play();
|
||||
|
||||
if (promise !== undefined) {
|
||||
promise.then(_ => {
|
||||
}).catch(error => {
|
||||
bpb.show();
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
if (!video_data.params.listen && video_data.params.quality === 'dash') {
|
||||
player.httpSourceSelector();
|
||||
}
|
||||
|
||||
player.vttThumbnails({
|
||||
src: location.origin + '/api/v1/storyboards/' + video_data.id + '?height=90'
|
||||
});
|
||||
|
||||
// Enable annotations
|
||||
if (video_data.params.listen && video_data.params.annotations) {
|
||||
var video_container = document.getElementById('player');
|
||||
let xhr = new XMLHttpRequest();
|
||||
xhr.responseType = 'text';
|
||||
xhr.timeout = 60000;
|
||||
xhr.open('GET', '/api/v1/annotations/' + video_data.id, true);
|
||||
xhr.send();
|
||||
|
||||
xhr.onreadystatechange = function () {
|
||||
if (xhr.readyState === 4) {
|
||||
if (xhr.status === 200) {
|
||||
videojs.registerPlugin('youtubeAnnotationsPlugin', youtubeAnnotationsPlugin);
|
||||
if (!player.paused()) {
|
||||
player.youtubeAnnotationsPlugin({ annotationXml: xhr.response, videoContainer: video_container });
|
||||
} else {
|
||||
player.one('play', function (event) {
|
||||
player.youtubeAnnotationsPlugin({ annotationXml: xhr.response, videoContainer: video_container });
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener('__ar_annotation_click', e => {
|
||||
const { url, target, seconds } = e.detail;
|
||||
var path = new URL(url);
|
||||
|
||||
if (path.href.startsWith('https://www.youtube.com/watch?') && seconds) {
|
||||
path.search += '&t=' + seconds;
|
||||
}
|
||||
|
||||
path = path.pathname + path.search;
|
||||
|
||||
if (target === 'current') {
|
||||
window.location.href = path;
|
||||
} else if (target === 'new') {
|
||||
window.open(path, '_blank');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Since videojs-share can sometimes be blocked, we defer it until last
|
||||
player.share(shareOptions);
|
||||
|
|
@ -51,21 +51,24 @@ function hide_youtube_replies(target, inner_text, sub_text) {
|
|||
target.setAttribute('onclick', "show_youtube_replies(this, \'" + inner_text + "\', \'" + sub_text + "\')");
|
||||
}
|
||||
|
||||
function continue_autoplay(target) {
|
||||
if (target.checked) {
|
||||
player.on('ended', function () {
|
||||
var url = new URL('https://example.com/watch?v=' + watch_data.next_video);
|
||||
var continue_button = document.getElementById('continue');
|
||||
continue_button.onclick = continue_autoplay;
|
||||
|
||||
if (watch_data.params.autoplay || watch_data.params.continue_autoplay) {
|
||||
function continue_autoplay(event) {
|
||||
if (event.target.checked) {
|
||||
player.on('ended', function () {
|
||||
var url = new URL('https://example.com/watch?v=' + video_data.next_video);
|
||||
|
||||
if (video_data.params.autoplay || video_data.params.continue_autoplay) {
|
||||
url.searchParams.set('autoplay', '1');
|
||||
}
|
||||
|
||||
if (watch_data.params.listen !== watch_data.preferences.listen) {
|
||||
url.searchParams.set('listen', watch_data.params.listen);
|
||||
if (video_data.params.listen !== video_data.preferences.listen) {
|
||||
url.searchParams.set('listen', video_data.params.listen);
|
||||
}
|
||||
|
||||
if (watch_data.params.speed !== watch_data.preferences.speed) {
|
||||
url.searchParams.set('speed', watch_data.params.speed);
|
||||
if (video_data.params.speed !== video_data.preferences.speed) {
|
||||
url.searchParams.set('speed', video_data.params.speed);
|
||||
}
|
||||
|
||||
url.searchParams.set('continue', '1');
|
||||
|
|
@ -98,12 +101,12 @@ function get_playlist(plid, timeouts = 0) {
|
|||
|
||||
if (plid.startsWith('RD')) {
|
||||
var plid_url = '/api/v1/mixes/' + plid +
|
||||
'?continuation=' + watch_data.id +
|
||||
'&format=html&hl=' + watch_data.preferences.locale;
|
||||
'?continuation=' + video_data.id +
|
||||
'&format=html&hl=' + video_data.preferences.locale;
|
||||
} else {
|
||||
var plid_url = '/api/v1/playlists/' + plid +
|
||||
'?continuation=' + watch_data.id +
|
||||
'&format=html&hl=' + watch_data.preferences.locale;
|
||||
'?continuation=' + video_data.id +
|
||||
'&format=html&hl=' + video_data.preferences.locale;
|
||||
}
|
||||
|
||||
var xhr = new XMLHttpRequest();
|
||||
|
|
@ -119,18 +122,18 @@ function get_playlist(plid, timeouts = 0) {
|
|||
|
||||
if (xhr.response.nextVideo) {
|
||||
player.on('ended', function () {
|
||||
var url = new URL('https://example.com/watch?v=' + watch_data.next_video);
|
||||
var url = new URL('https://example.com/watch?v=' + video_data.next_video);
|
||||
|
||||
if (watch_data.params.autoplay || watch_data.params.continue_autoplay) {
|
||||
if (video_data.params.autoplay || video_data.params.continue_autoplay) {
|
||||
url.searchParams.set('autoplay', '1');
|
||||
}
|
||||
|
||||
if (watch_data.params.listen !== watch_data.preferences.listen) {
|
||||
url.searchParams.set('listen', watch_data.params.listen);
|
||||
if (video_data.params.listen !== video_data.preferences.listen) {
|
||||
url.searchParams.set('listen', video_data.params.listen);
|
||||
}
|
||||
|
||||
if (watch_data.params.speed !== watch_data.preferences.speed) {
|
||||
url.searchParams.set('speed', watch_data.params.speed);
|
||||
if (video_data.params.speed !== video_data.preferences.speed) {
|
||||
url.searchParams.set('speed', video_data.params.speed);
|
||||
}
|
||||
|
||||
url.searchParams.set('list', plid);
|
||||
|
|
@ -166,9 +169,9 @@ function get_reddit_comments(timeouts = 0) {
|
|||
comments.innerHTML =
|
||||
'<h3 style="text-align:center"><div class="loading"><i class="icon ion-ios-refresh"></i></div></h3>';
|
||||
|
||||
var url = '/api/v1/comments/' + watch_data.id +
|
||||
var url = '/api/v1/comments/' + video_data.id +
|
||||
'?source=reddit&format=html' +
|
||||
'&hl=' + watch_data.preferences.locale;
|
||||
'&hl=' + video_data.preferences.locale;
|
||||
var xhr = new XMLHttpRequest();
|
||||
xhr.responseType = 'json';
|
||||
xhr.timeout = 20000;
|
||||
|
|
@ -198,13 +201,13 @@ function get_reddit_comments(timeouts = 0) {
|
|||
<div>{contentHtml}</div> \
|
||||
<hr>'.supplant({
|
||||
title: xhr.response.title,
|
||||
youtubeCommentsText: watch_data.youtube_comments_text,
|
||||
redditPermalinkText: watch_data.reddit_permalink_text,
|
||||
youtubeCommentsText: video_data.youtube_comments_text,
|
||||
redditPermalinkText: video_data.reddit_permalink_text,
|
||||
permalink: xhr.response.permalink,
|
||||
contentHtml: xhr.response.contentHtml
|
||||
});
|
||||
} else {
|
||||
if (watch_data.preferences.comments[1] === 'youtube') {
|
||||
if (video_data.preferences.comments[1] === 'youtube') {
|
||||
get_youtube_comments(timeouts + 1);
|
||||
} else {
|
||||
comments.innerHTML = fallback;
|
||||
|
|
@ -232,10 +235,10 @@ function get_youtube_comments(timeouts = 0) {
|
|||
comments.innerHTML =
|
||||
'<h3 style="text-align:center"><div class="loading"><i class="icon ion-ios-refresh"></i></div></h3>';
|
||||
|
||||
var url = '/api/v1/comments/' + watch_data.id +
|
||||
var url = '/api/v1/comments/' + video_data.id +
|
||||
'?format=html' +
|
||||
'&hl=' + watch_data.preferences.locale +
|
||||
'&thin_mode=' + watch_data.preferences.thin_mode;
|
||||
'&hl=' + video_data.preferences.locale +
|
||||
'&thin_mode=' + video_data.preferences.thin_mode;
|
||||
var xhr = new XMLHttpRequest();
|
||||
xhr.responseType = 'json';
|
||||
xhr.timeout = 20000;
|
||||
|
|
@ -261,8 +264,8 @@ function get_youtube_comments(timeouts = 0) {
|
|||
<div>{contentHtml}</div> \
|
||||
<hr>'.supplant({
|
||||
contentHtml: xhr.response.contentHtml,
|
||||
redditComments: watch_data.reddit_comments_text,
|
||||
commentsText: watch_data.comments_text.supplant(
|
||||
redditComments: video_data.reddit_comments_text,
|
||||
commentsText: video_data.comments_text.supplant(
|
||||
{ commentCount: number_with_separator(xhr.response.commentCount) }
|
||||
)
|
||||
});
|
||||
|
|
@ -270,7 +273,7 @@ function get_youtube_comments(timeouts = 0) {
|
|||
comments.innerHTML = '';
|
||||
}
|
||||
} else {
|
||||
if (watch_data.preferences[1] === 'youtube') {
|
||||
if (video_data.preferences[1] === 'youtube') {
|
||||
get_youtube_comments(timeouts + 1);
|
||||
} else {
|
||||
comments.innerHTML = '';
|
||||
|
|
@ -295,10 +298,10 @@ function get_youtube_replies(target, load_more) {
|
|||
body.innerHTML =
|
||||
'<h3 style="text-align:center"><div class="loading"><i class="icon ion-ios-refresh"></i></div></h3>';
|
||||
|
||||
var url = '/api/v1/comments/' + watch_data.id +
|
||||
var url = '/api/v1/comments/' + video_data.id +
|
||||
'?format=html' +
|
||||
'&hl=' + watch_data.preferences.locale +
|
||||
'&thin_mode=' + watch_data.preferences.thin_mode +
|
||||
'&hl=' + video_data.preferences.locale +
|
||||
'&thin_mode=' + video_data.preferences.thin_mode +
|
||||
'&continuation=' + continuation;
|
||||
var xhr = new XMLHttpRequest();
|
||||
xhr.responseType = 'json';
|
||||
|
|
@ -319,8 +322,8 @@ function get_youtube_replies(target, load_more) {
|
|||
onclick="hide_youtube_replies(this, \'{hideRepliesText}\', \'{showRepliesText}\')">{hideRepliesText} \
|
||||
</a></p> \
|
||||
<div>{contentHtml}</div>'.supplant({
|
||||
hideRepliesText: watch_data.hide_replies_text,
|
||||
showRepliesText: watch_data.show_replies_text,
|
||||
hideRepliesText: video_data.hide_replies_text,
|
||||
showRepliesText: video_data.show_replies_text,
|
||||
contentHtml: xhr.response.contentHtml
|
||||
});
|
||||
}
|
||||
|
|
@ -336,20 +339,20 @@ function get_youtube_replies(target, load_more) {
|
|||
}
|
||||
}
|
||||
|
||||
if (watch_data.play_next) {
|
||||
if (video_data.play_next) {
|
||||
player.on('ended', function () {
|
||||
var url = new URL('https://example.com/watch?v=' + watch_data.next_video);
|
||||
var url = new URL('https://example.com/watch?v=' + video_data.next_video);
|
||||
|
||||
if (watch_data.params.autoplay || watch_data.params.continue_autoplay) {
|
||||
if (video_data.params.autoplay || video_data.params.continue_autoplay) {
|
||||
url.searchParams.set('autoplay', '1');
|
||||
}
|
||||
|
||||
if (watch_data.params.listen !== watch_data.preferences.listen) {
|
||||
url.searchParams.set('listen', watch_data.params.listen);
|
||||
if (video_data.params.listen !== video_data.preferences.listen) {
|
||||
url.searchParams.set('listen', video_data.params.listen);
|
||||
}
|
||||
|
||||
if (watch_data.params.speed !== watch_data.preferences.speed) {
|
||||
url.searchParams.set('speed', watch_data.params.speed);
|
||||
if (video_data.params.speed !== video_data.preferences.speed) {
|
||||
url.searchParams.set('speed', video_data.params.speed);
|
||||
}
|
||||
|
||||
url.searchParams.set('continue', '1');
|
||||
|
|
@ -357,17 +360,17 @@ if (watch_data.play_next) {
|
|||
});
|
||||
}
|
||||
|
||||
if (watch_data.plid) {
|
||||
get_playlist(watch_data.plid);
|
||||
if (video_data.plid) {
|
||||
get_playlist(video_data.plid);
|
||||
}
|
||||
|
||||
if (watch_data.preferences.comments[0] === 'youtube') {
|
||||
if (video_data.preferences.comments[0] === 'youtube') {
|
||||
get_youtube_comments();
|
||||
} else if (watch_data.preferences.comments[0] === 'reddit') {
|
||||
} else if (video_data.preferences.comments[0] === 'reddit') {
|
||||
get_reddit_comments();
|
||||
} else if (watch_data.preferences.comments[1] === 'youtube') {
|
||||
} else if (video_data.preferences.comments[1] === 'youtube') {
|
||||
get_youtube_comments();
|
||||
} else if (watch_data.preferences.comments[1] === 'reddit') {
|
||||
} else if (video_data.preferences.comments[1] === 'reddit') {
|
||||
get_reddit_comments();
|
||||
} else {
|
||||
comments = document.getElementById('comments');
|
||||
|
|
|
|||
|
|
@ -40,228 +40,11 @@
|
|||
</video>
|
||||
|
||||
<script>
|
||||
var options = {
|
||||
<% if aspect_ratio %>
|
||||
aspectRatio: "<%= aspect_ratio %>",
|
||||
<% end %>
|
||||
preload: "auto",
|
||||
playbackRates: [0.25, 0.5, 0.75, 1.0, 1.25, 1.5, 2.0],
|
||||
controlBar: {
|
||||
children: [
|
||||
"playToggle",
|
||||
"volumePanel",
|
||||
"currentTimeDisplay",
|
||||
"timeDivider",
|
||||
"durationDisplay",
|
||||
"progressControl",
|
||||
"remainingTimeDisplay",
|
||||
"captionsButton",
|
||||
"qualitySelector",
|
||||
"playbackRateMenuButton",
|
||||
"fullscreenToggle"
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
var shareOptions = {
|
||||
socials: ["fbFeed", "tw", "reddit", "email"],
|
||||
|
||||
url: window.location.href,
|
||||
var player_data = {
|
||||
aspect_ratio: '<%= aspect_ratio %>',
|
||||
title: "<%= video.title.dump_unquoted %>",
|
||||
description: "<%= description %>",
|
||||
image: "<%= thumbnail %>",
|
||||
embedCode: "<iframe id='ivplayer' type='text/html' width='640' height='360' \
|
||||
src='<%= host_url %>/embed/<%= video.id %>?<%= host_params %>' frameborder='0'></iframe>"
|
||||
thumbnail: "<%= thumbnail %>"
|
||||
}
|
||||
|
||||
var player = videojs("player", options, function() {
|
||||
this.hotkeys({
|
||||
volumeStep: 0.1,
|
||||
seekStep: 5,
|
||||
enableModifiersForNumbers: false,
|
||||
enableHoverScroll: true,
|
||||
customKeys: {
|
||||
// Toggle play with K Key
|
||||
play: {
|
||||
key: function(e) {
|
||||
return e.which === 75;
|
||||
},
|
||||
handler: function(player, options, e) {
|
||||
if (player.paused()) {
|
||||
player.play();
|
||||
} else {
|
||||
player.pause();
|
||||
}
|
||||
}
|
||||
},
|
||||
// Go backward 10 seconds
|
||||
backward: {
|
||||
key: function(e) {
|
||||
return e.which === 74;
|
||||
},
|
||||
handler: function(player, options, e) {
|
||||
player.currentTime(player.currentTime() - 10);
|
||||
}
|
||||
},
|
||||
// Go forward 10 seconds
|
||||
forward: {
|
||||
key: function(e) {
|
||||
return e.which === 76;
|
||||
},
|
||||
handler: function(player, options, e) {
|
||||
player.currentTime(player.currentTime() + 10);
|
||||
}
|
||||
},
|
||||
// Increase speed
|
||||
increase_speed: {
|
||||
key: function(e) {
|
||||
return (e.which === 190 && e.shiftKey);
|
||||
},
|
||||
handler: function(player, _, e) {
|
||||
size = options.playbackRates.length;
|
||||
index = options.playbackRates.indexOf(player.playbackRate());
|
||||
player.playbackRate(options.playbackRates[(index + 1) % size]);
|
||||
}
|
||||
},
|
||||
// Decrease speed
|
||||
decrease_speed: {
|
||||
key: function(e) {
|
||||
return (e.which === 188 && e.shiftKey);
|
||||
},
|
||||
handler: function(player, _, e) {
|
||||
size = options.playbackRates.length;
|
||||
index = options.playbackRates.indexOf(player.playbackRate());
|
||||
player.playbackRate(options.playbackRates[(size + index - 1) % size]);
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
player.on('error', function(event) {
|
||||
if (player.error().code === 2 || player.error().code === 4) {
|
||||
setInterval(setTimeout(function (event) {
|
||||
console.log('An error occured in the player, reloading...');
|
||||
|
||||
var currentTime = player.currentTime();
|
||||
var playbackRate = player.playbackRate();
|
||||
var paused = player.paused();
|
||||
|
||||
player.load();
|
||||
|
||||
if (currentTime > 0.5) {
|
||||
currentTime -= 0.5;
|
||||
}
|
||||
|
||||
player.currentTime(currentTime);
|
||||
player.playbackRate(playbackRate);
|
||||
|
||||
if (!paused) {
|
||||
player.play();
|
||||
}
|
||||
}, 5000), 5000);
|
||||
}
|
||||
});
|
||||
|
||||
<% if params.video_start > 0 || params.video_end > 0 %>
|
||||
player.markers({
|
||||
onMarkerReached: function(marker) {
|
||||
if (marker.text === 'End') {
|
||||
if (player.loop()) {
|
||||
player.markers.prev('Start');
|
||||
} else {
|
||||
player.pause();
|
||||
}
|
||||
}
|
||||
},
|
||||
markers: [
|
||||
{ time: <%= params.video_start %>, text: 'Start' },
|
||||
<% if params.video_end < 0 %>
|
||||
{ time: <%= video.info["length_seconds"].to_f - 0.5 %>, text: 'End' }
|
||||
<% else %>
|
||||
{ time: <%= params.video_end %>, text: 'End' }
|
||||
<% end %>
|
||||
]
|
||||
});
|
||||
|
||||
player.currentTime(<%= params.video_start %>);
|
||||
<% end %>
|
||||
|
||||
player.volume(<%= params.volume.to_f / 100 %>);
|
||||
player.playbackRate(<%= params.speed %>);
|
||||
|
||||
<% if params.autoplay %>
|
||||
var bpb = player.getChild('bigPlayButton');
|
||||
|
||||
if (bpb) {
|
||||
bpb.hide();
|
||||
|
||||
player.ready(function() {
|
||||
new Promise(function(resolve, reject) {
|
||||
setTimeout(() => resolve(1), 1);
|
||||
}).then(function(result) {
|
||||
var promise = player.play();
|
||||
|
||||
if (promise !== undefined) {
|
||||
promise.then(_ => {
|
||||
}).catch(error => {
|
||||
bpb.show();
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
<% end %>
|
||||
|
||||
<% if !params.listen && params.quality == "dash" %>
|
||||
player.httpSourceSelector();
|
||||
<% end %>
|
||||
|
||||
player.vttThumbnails({
|
||||
src: location.origin + '/api/v1/storyboards/<%= video.id %>?height=90'
|
||||
});
|
||||
|
||||
<% if !params.listen && params.annotations %>
|
||||
var video_container = document.getElementById('player');
|
||||
let xhr = new XMLHttpRequest();
|
||||
xhr.responseType = 'text';
|
||||
xhr.timeout = 60000;
|
||||
xhr.open('GET', '/api/v1/annotations/<%= video.id %>', true);
|
||||
xhr.send();
|
||||
|
||||
xhr.onreadystatechange = function () {
|
||||
if (xhr.readyState === 4) {
|
||||
if (xhr.status === 200) {
|
||||
videojs.registerPlugin('youtubeAnnotationsPlugin', youtubeAnnotationsPlugin);
|
||||
if (!player.paused()) {
|
||||
player.youtubeAnnotationsPlugin({annotationXml: xhr.response, videoContainer: video_container});
|
||||
} else {
|
||||
player.one('play', function(event) {
|
||||
player.youtubeAnnotationsPlugin({annotationXml: xhr.response, videoContainer: video_container});
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener('__ar_annotation_click', e => {
|
||||
const { url, target, seconds } = e.detail;
|
||||
var path = new URL(url);
|
||||
|
||||
if (path.href.startsWith('https://www.youtube.com/watch?') && seconds) {
|
||||
path.search += '&t=' + seconds;
|
||||
}
|
||||
|
||||
path = path.pathname + path.search;
|
||||
|
||||
if (target === 'current') {
|
||||
window.location.href = path;
|
||||
} else if (target === 'new') {
|
||||
window.open(path, '_blank');
|
||||
}
|
||||
});
|
||||
<% end %>
|
||||
|
||||
// Since videojs-share can sometimes be blocked, we try to load it last
|
||||
player.share(shareOptions);
|
||||
</script>
|
||||
<script src="/js/player.js"></script>
|
||||
|
|
|
|||
|
|
@ -23,17 +23,18 @@
|
|||
</head>
|
||||
|
||||
<body>
|
||||
<%= rendered "components/player" %>
|
||||
|
||||
<script>
|
||||
var embed_data = {
|
||||
var video_data = {
|
||||
id: '<%= video.id %>',
|
||||
plid: '<%= plid %>',
|
||||
length_seconds: '<%= video.info["length_seconds"].to_f %>',
|
||||
video_series: <%= video_series.to_json %>,
|
||||
params: <%= params.to_json %>,
|
||||
preferences: <%= preferences.to_json %>
|
||||
}
|
||||
</script>
|
||||
|
||||
<%= rendered "components/player" %>
|
||||
<script src="/js/embed.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -26,6 +26,24 @@
|
|||
<title><%= HTML.escape(video.title) %> - Invidious</title>
|
||||
<% end %>
|
||||
|
||||
<script>
|
||||
var video_data = {
|
||||
id: '<%= video.id %>',
|
||||
plid: '<%= plid %>',
|
||||
length_seconds: '<%= video.info["length_seconds"].to_f %>',
|
||||
play_next: <%= !rvs.empty? && !plid && params.continue %>,
|
||||
next_video: '<%= rvs.select { |rv| rv["id"]? }[0]?.try &.["id"] %>',
|
||||
youtube_comments_text: '<%= translate(locale, "View YouTube comments") %>',
|
||||
reddit_comments_text: '<%= translate(locale, "View Reddit comments") %>',
|
||||
reddit_permalink_text: '<%= translate(locale, "View more comments on Reddit") %>',
|
||||
comments_text: '<%= translate(locale, "View `x` comments", "{commentCount}") %>',
|
||||
hide_replies_text: '<%= translate(locale, "Hide replies") %>',
|
||||
show_replies_text: '<%= translate(locale, "Show replies") %>',
|
||||
params: <%= params.to_json %>,
|
||||
preferences: <%= preferences.to_json %>
|
||||
}
|
||||
</script>
|
||||
|
||||
<div id="player-container" class="h-box">
|
||||
<%= rendered "components/player" %>
|
||||
</div>
|
||||
|
|
@ -224,21 +242,4 @@
|
|||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var watch_data = {
|
||||
id: '<%= video.id %>',
|
||||
plid: '<%= plid %>',
|
||||
play_next: <%= !rvs.empty? && !plid && params.continue %>,
|
||||
next_video: '<%= rvs.select { |rv| rv["id"]? }[0]?.try &.["id"] %>',
|
||||
youtube_comments_text: '<%= translate(locale, "View YouTube comments") %>',
|
||||
reddit_comments_text: '<%= translate(locale, "View Reddit comments") %>',
|
||||
reddit_permalink_text: '<%= translate(locale, "View more comments on Reddit") %>',
|
||||
comments_text: '<%= translate(locale, "View `x` comments", "{commentCount}") %>',
|
||||
hide_replies_text: '<%= translate(locale, "Hide replies") %>',
|
||||
show_replies_text: '<%= translate(locale, "Show replies") %>',
|
||||
params: <%= params.to_json %>,
|
||||
preferences: <%= preferences.to_json %>
|
||||
}
|
||||
</script>
|
||||
<script src="/js/watch.js"></script>
|
||||
|
|
|
|||
Loading…
Reference in a new issue