invidious/assets/js/player.js

505 lines
14 KiB
JavaScript
Raw Normal View History

var player_data = JSON.parse(document.getElementById('player_data').innerHTML);
var video_data = JSON.parse(document.getElementById('video_data').innerHTML);
2019-05-06 18:23:14 +02:00
var options = {
2019-06-08 02:56:41 +02:00
preload: 'auto',
liveui: true,
2019-07-14 17:08:46 +02:00
playbackRates: [0.25, 0.5, 0.75, 1.0, 1.25, 1.5, 1.75, 2.0],
2019-05-06 18:23:14 +02:00
controlBar: {
children: [
2019-06-08 02:56:41 +02:00
'playToggle',
'volumePanel',
'currentTimeDisplay',
'timeDivider',
'durationDisplay',
'progressControl',
'remainingTimeDisplay',
'captionsButton',
'qualitySelector',
'playbackRateMenuButton',
'fullscreenToggle'
2019-05-06 18:23:14 +02:00
]
}
}
if (player_data.aspect_ratio) {
options.aspectRatio = player_data.aspect_ratio;
}
var embed_url = new URL(location);
embed_url.searchParams.delete('v');
2019-06-05 18:10:23 +02:00
short_url = location.origin + '/' + video_data.id + embed_url.search;
2019-05-06 18:23:14 +02:00
embed_url = location.origin + '/embed/' + video_data.id + embed_url.search;
var shareOptions = {
2019-06-08 02:56:41 +02:00
socials: ['fbFeed', 'tw', 'reddit', 'email'],
2019-05-06 18:23:14 +02:00
2019-06-05 18:10:23 +02:00
url: short_url,
2019-05-06 18:23:14 +02:00
title: player_data.title,
description: player_data.description,
image: player_data.thumbnail,
2020-02-01 19:25:03 +01:00
embedCode: "<iframe id='ivplayer' width='640' height='360' src='" + embed_url + "' style='border:none;'></iframe>"
2019-05-06 18:23:14 +02:00
}
var player = videojs('player', options);
2019-05-06 18:23:14 +02:00
2019-06-08 17:52:47 +02:00
if (location.pathname.startsWith('/embed/')) {
player.overlay({
overlays: [{
start: 'loadstart',
2019-06-16 21:49:00 +02:00
content: '<h1><a rel="noopener" target="_blank" href="' + location.origin + '/watch?v=' + video_data.id + '">' + player_data.title + '</a></h1>',
2019-06-08 17:52:47 +02:00
end: 'playing',
align: 'top'
}, {
start: 'pause',
2019-06-16 21:49:00 +02:00
content: '<h1><a rel="noopener" target="_blank" href="' + location.origin + '/watch?v=' + video_data.id + '">' + player_data.title + '</a></h1>',
2019-06-08 17:52:47 +02:00
end: 'playing',
align: 'top'
}]
});
}
2019-05-06 18:23:14 +02:00
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);
player.on('waiting', function () {
if (player.playbackRate() > 1 && player.liveTracker.isLive() && player.liveTracker.atLiveEdge()) {
console.log('Player has caught up to source, resetting playbackRate.')
player.playbackRate(1);
}
});
2019-06-08 17:18:45 +02:00
if (video_data.premiere_timestamp && Math.round(new Date() / 1000) < video_data.premiere_timestamp) {
player.getChild('bigPlayButton').hide();
}
2019-05-06 18:23:14 +02:00
if (video_data.params.autoplay) {
var bpb = player.getChild('bigPlayButton');
2019-06-08 17:18:45 +02:00
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();
});
}
2019-05-06 18:23:14 +02:00
});
2019-06-08 17:18:45 +02:00
});
2019-05-06 18:23:14 +02:00
}
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
2019-05-09 15:36:36 +02:00
if (!video_data.params.listen && video_data.params.annotations) {
2019-10-18 18:44:11 +02:00
window.addEventListener('load', function (e) {
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.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
videojs.registerPlugin('youtubeAnnotationsPlugin', youtubeAnnotationsPlugin);
if (!player.paused()) {
2019-05-06 18:23:14 +02:00
player.youtubeAnnotationsPlugin({ annotationXml: xhr.response, videoContainer: video_container });
2019-10-18 18:44:11 +02:00
} else {
player.one('play', function (event) {
player.youtubeAnnotationsPlugin({ annotationXml: xhr.response, videoContainer: video_container });
});
}
2019-05-06 18:23:14 +02:00
}
}
}
2019-10-18 18:44:11 +02:00
window.addEventListener('__ar_annotation_click', e => {
const { url, target, seconds } = e.detail;
var path = new URL(url);
2019-05-06 18:23:14 +02:00
2019-10-18 18:44:11 +02:00
if (path.href.startsWith('https://www.youtube.com/watch?') && seconds) {
path.search += '&t=' + seconds;
}
2019-05-06 18:23:14 +02:00
2019-10-18 18:44:11 +02:00
path = path.pathname + path.search;
2019-05-06 18:23:14 +02:00
2019-10-18 18:44:11 +02:00
if (target === 'current') {
window.location.href = path;
} else if (target === 'new') {
window.open(path, '_blank');
}
});
2019-06-15 17:08:06 +02:00
2019-10-18 18:44:11 +02:00
xhr.send();
});
2019-05-06 18:23:14 +02:00
}
function increase_volume(delta) {
const curVolume = player.volume();
let newVolume = curVolume + delta;
if (newVolume > 1) {
newVolume = 1;
} else if (newVolume < 0) {
newVolume = 0;
}
player.volume(newVolume);
}
function toggle_muted() {
const isMuted = player.muted();
player.muted(!isMuted);
}
function skip_seconds(delta) {
const duration = player.duration();
const curTime = player.currentTime();
let newTime = curTime + delta;
if (newTime > duration) {
newTime = duration;
} else if (newTime < 0) {
newTime = 0;
}
player.currentTime(newTime);
}
function set_time_percent(percent) {
const duration = player.duration();
const newTime = duration * (percent / 100);
player.currentTime(newTime);
}
function play() {
player.play();
}
function pause() {
player.pause();
}
function stop() {
player.pause();
player.currentTime(0);
}
function toggle_play() {
if (player.paused()) {
play();
} else {
pause();
}
}
2019-10-18 18:44:11 +02:00
const toggle_captions = (function () {
let toggledTrack = null;
2019-10-18 18:44:11 +02:00
const onChange = function (e) {
toggledTrack = null;
};
2019-10-18 18:44:11 +02:00
const bindChange = function (onOrOff) {
player.textTracks()[onOrOff]('change', onChange);
};
// Wrapper function to ignore our own emitted events and only listen
// to events emitted by Video.js on click on the captions menu items.
2019-10-18 18:44:11 +02:00
const setMode = function (track, mode) {
bindChange('off');
track.mode = mode;
2019-10-18 18:44:11 +02:00
window.setTimeout(function () {
bindChange('on');
}, 0);
};
bindChange('on');
2019-10-18 18:44:11 +02:00
return function () {
if (toggledTrack !== null) {
if (toggledTrack.mode !== 'showing') {
setMode(toggledTrack, 'showing');
} else {
setMode(toggledTrack, 'disabled');
}
toggledTrack = null;
return;
}
// Used as a fallback if no captions are currently active.
// TODO: Make this more intelligent by e.g. relying on browser language.
let fallbackCaptionsTrack = null;
const tracks = player.textTracks();
for (let i = 0; i < tracks.length; i++) {
const track = tracks[i];
if (track.kind !== 'captions') {
continue;
}
if (fallbackCaptionsTrack === null) {
fallbackCaptionsTrack = track;
}
if (track.mode === 'showing') {
setMode(track, 'disabled');
toggledTrack = track;
return;
}
}
// Fallback if no captions are currently active.
if (fallbackCaptionsTrack !== null) {
setMode(fallbackCaptionsTrack, 'showing');
toggledTrack = fallbackCaptionsTrack;
}
};
})();
function toggle_fullscreen() {
if (player.isFullscreen()) {
player.exitFullscreen();
} else {
player.requestFullscreen();
}
}
function increase_playback_rate(steps) {
const maxIndex = options.playbackRates.length - 1;
const curIndex = options.playbackRates.indexOf(player.playbackRate());
let newIndex = curIndex + steps;
if (newIndex > maxIndex) {
newIndex = maxIndex;
} else if (newIndex < 0) {
newIndex = 0;
}
player.playbackRate(options.playbackRates[newIndex]);
}
window.addEventListener('keydown', e => {
if (e.target.tagName.toLowerCase() === 'input') {
// Ignore input when focus is on certain elements, e.g. form fields.
return;
}
// See https://github.com/ctd1500/videojs-hotkeys/blob/bb4a158b2e214ccab87c2e7b95f42bc45c6bfd87/videojs.hotkeys.js#L310-L313
const isPlayerFocused = false
|| e.target === document.querySelector('.video-js')
|| e.target === document.querySelector('.vjs-tech')
|| e.target === document.querySelector('.iframeblocker')
|| e.target === document.querySelector('.vjs-control-bar')
2019-10-18 18:44:11 +02:00
;
let action = null;
const code = e.keyCode;
const decoratedKey =
e.key
2019-10-18 18:44:11 +02:00
+ (e.altKey ? '+alt' : '')
+ (e.ctrlKey ? '+ctrl' : '')
+ (e.metaKey ? '+meta' : '')
2019-10-18 18:44:11 +02:00
;
switch (decoratedKey) {
2019-10-18 18:44:11 +02:00
case ' ':
case 'k':
case 'MediaPlayPause':
2019-10-18 18:44:11 +02:00
action = toggle_play;
break;
case 'MediaPlay':
action = play;
break;
case 'MediaPause':
action = pause;
break;
case 'MediaStop':
action = stop;
break;
2019-10-18 18:44:11 +02:00
case 'ArrowUp':
if (isPlayerFocused) {
action = increase_volume.bind(this, 0.1);
}
break;
case 'ArrowDown':
if (isPlayerFocused) {
action = increase_volume.bind(this, -0.1);
}
break;
case 'm':
action = toggle_muted;
break;
case 'ArrowRight':
case 'MediaFastForward':
2019-10-18 18:44:11 +02:00
action = skip_seconds.bind(this, 5);
break;
case 'ArrowLeft':
case 'MediaTrackPrevious':
2019-10-18 18:44:11 +02:00
action = skip_seconds.bind(this, -5);
break;
case 'l':
action = skip_seconds.bind(this, 10);
break;
case 'j':
action = skip_seconds.bind(this, -10);
break;
case '0':
case '1':
case '2':
case '3':
case '4':
case '5':
case '6':
case '7':
case '8':
case '9':
const percent = (code - 48) * 10;
action = set_time_percent.bind(this, percent);
break;
case 'c':
action = toggle_captions;
break;
case 'f':
action = toggle_fullscreen;
break;
case 'N':
case 'MediaTrackNext':
2019-10-18 18:44:11 +02:00
action = next_video;
break;
case 'P':
case 'MediaTrackPrevious':
2019-10-18 18:44:11 +02:00
// TODO: Add support to play back previous video.
break;
case '.':
// TODO: Add support for next-frame-stepping.
break;
case ',':
// TODO: Add support for previous-frame-stepping.
break;
case '>':
action = increase_playback_rate.bind(this, 1);
break;
case '<':
action = increase_playback_rate.bind(this, -1);
break;
default:
console.info('Unhandled key down event: %s:', decoratedKey, e);
break;
}
if (action) {
e.preventDefault();
action();
}
}, false);
// Add support for controlling the player volume by scrolling over it. Adapted from
// https://github.com/ctd1500/videojs-hotkeys/blob/bb4a158b2e214ccab87c2e7b95f42bc45c6bfd87/videojs.hotkeys.js#L292-L328
2019-10-18 18:44:11 +02:00
(function () {
const volumeStep = 0.05;
const enableVolumeScroll = true;
const enableHoverScroll = true;
const doc = document;
const pEl = document.getElementById('player');
var volumeHover = false;
var volumeSelector = pEl.querySelector('.vjs-volume-menu-button') || pEl.querySelector('.vjs-volume-panel');
if (volumeSelector != null) {
2019-10-18 18:44:11 +02:00
volumeSelector.onmouseover = function () { volumeHover = true; };
volumeSelector.onmouseout = function () { volumeHover = false; };
}
var mouseScroll = function mouseScroll(event) {
2019-10-18 18:44:11 +02:00
var activeEl = doc.activeElement;
if (enableHoverScroll) {
// If we leave this undefined then it can match non-existent elements below
activeEl = 0;
}
// When controls are disabled, hotkeys will be disabled as well
if (player.controls()) {
if (volumeHover) {
if (enableVolumeScroll) {
event = window.event || event;
var delta = Math.max(-1, Math.min(1, (event.wheelDelta || -event.detail)));
event.preventDefault();
if (delta == 1) {
increase_volume(volumeStep);
} else if (delta == -1) {
increase_volume(-volumeStep);
}
}
}
}
};
player.on('mousewheel', mouseScroll);
player.on("DOMMouseScroll", mouseScroll);
}());
2019-05-06 18:23:14 +02:00
// Since videojs-share can sometimes be blocked, we defer it until last
player.share(shareOptions);