mirror of
https://github.com/iv-org/invidious.git
synced 2024-09-10 11:32:30 +00:00
Merge pull request #3084 from AHOHNMYC/js-helpers-polyfills
JS refactoring part 2: helper functions, poyfills
This commit is contained in:
commit
2313ca8f72
249
assets/js/_helpers.js
Normal file
249
assets/js/_helpers.js
Normal file
@ -0,0 +1,249 @@
|
|||||||
|
'use strict';
|
||||||
|
// Contains only auxiliary methods
|
||||||
|
// May be included and executed unlimited number of times without any consequences
|
||||||
|
|
||||||
|
// Polyfills for IE11
|
||||||
|
Array.prototype.find = Array.prototype.find || function (condition) {
|
||||||
|
return this.filter(condition)[0];
|
||||||
|
};
|
||||||
|
Array.from = Array.from || function (source) {
|
||||||
|
return Array.prototype.slice.call(source);
|
||||||
|
};
|
||||||
|
NodeList.prototype.forEach = NodeList.prototype.forEach || function (callback) {
|
||||||
|
Array.from(this).forEach(callback);
|
||||||
|
};
|
||||||
|
String.prototype.includes = String.prototype.includes || function (searchString) {
|
||||||
|
return this.indexOf(searchString) >= 0;
|
||||||
|
};
|
||||||
|
String.prototype.startsWith = String.prototype.startsWith || function (prefix) {
|
||||||
|
return this.substr(0, prefix.length) === prefix;
|
||||||
|
};
|
||||||
|
Math.sign = Math.sign || function(x) {
|
||||||
|
x = +x;
|
||||||
|
if (!x) return x; // 0 and NaN
|
||||||
|
return x > 0 ? 1 : -1;
|
||||||
|
};
|
||||||
|
if (!window.hasOwnProperty('HTMLDetailsElement') && !window.hasOwnProperty('mockHTMLDetailsElement')) {
|
||||||
|
window.mockHTMLDetailsElement = true;
|
||||||
|
const style = 'details:not([open]) > :not(summary) {display: none}';
|
||||||
|
document.head.appendChild(document.createElement('style')).textContent = style;
|
||||||
|
|
||||||
|
addEventListener('click', function (e) {
|
||||||
|
if (e.target.nodeName !== 'SUMMARY') return;
|
||||||
|
const details = e.target.parentElement;
|
||||||
|
if (details.hasAttribute('open'))
|
||||||
|
details.removeAttribute('open');
|
||||||
|
else
|
||||||
|
details.setAttribute('open', '');
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Monstrous global variable for handy code
|
||||||
|
// Includes: clamp, xhr, storage.{get,set,remove}
|
||||||
|
window.helpers = window.helpers || {
|
||||||
|
/**
|
||||||
|
* https://en.wikipedia.org/wiki/Clamping_(graphics)
|
||||||
|
* @param {Number} num Source number
|
||||||
|
* @param {Number} min Low border
|
||||||
|
* @param {Number} max High border
|
||||||
|
* @returns {Number} Clamped value
|
||||||
|
*/
|
||||||
|
clamp: function (num, min, max) {
|
||||||
|
if (max < min) {
|
||||||
|
var t = max; max = min; min = t; // swap max and min
|
||||||
|
}
|
||||||
|
|
||||||
|
if (max < num)
|
||||||
|
return max;
|
||||||
|
if (min > num)
|
||||||
|
return min;
|
||||||
|
return num;
|
||||||
|
},
|
||||||
|
|
||||||
|
/** @private */
|
||||||
|
_xhr: function (method, url, options, callbacks) {
|
||||||
|
const xhr = new XMLHttpRequest();
|
||||||
|
xhr.open(method, url);
|
||||||
|
|
||||||
|
// Default options
|
||||||
|
xhr.responseType = 'json';
|
||||||
|
xhr.timeout = 10000;
|
||||||
|
// Default options redefining
|
||||||
|
if (options.responseType)
|
||||||
|
xhr.responseType = options.responseType;
|
||||||
|
if (options.timeout)
|
||||||
|
xhr.timeout = options.timeout;
|
||||||
|
|
||||||
|
if (method === 'POST')
|
||||||
|
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
|
||||||
|
|
||||||
|
// better than onreadystatechange because of 404 codes https://stackoverflow.com/a/36182963
|
||||||
|
xhr.onloadend = function () {
|
||||||
|
if (xhr.status === 200) {
|
||||||
|
if (callbacks.on200) {
|
||||||
|
// fix for IE11. It doesn't convert response to JSON
|
||||||
|
if (xhr.responseType === '' && typeof(xhr.response) === 'string')
|
||||||
|
callbacks.on200(JSON.parse(xhr.response));
|
||||||
|
else
|
||||||
|
callbacks.on200(xhr.response);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
// handled by onerror
|
||||||
|
if (xhr.status === 0) return;
|
||||||
|
|
||||||
|
if (callbacks.onNon200)
|
||||||
|
callbacks.onNon200(xhr);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
xhr.ontimeout = function () {
|
||||||
|
if (callbacks.onTimeout)
|
||||||
|
callbacks.onTimeout(xhr);
|
||||||
|
};
|
||||||
|
|
||||||
|
xhr.onerror = function () {
|
||||||
|
if (callbacks.onError)
|
||||||
|
callbacks.onError(xhr);
|
||||||
|
};
|
||||||
|
|
||||||
|
if (options.payload)
|
||||||
|
xhr.send(options.payload);
|
||||||
|
else
|
||||||
|
xhr.send();
|
||||||
|
},
|
||||||
|
/** @private */
|
||||||
|
_xhrRetry: function(method, url, options, callbacks) {
|
||||||
|
if (options.retries <= 0) {
|
||||||
|
console.warn('Failed to pull', options.entity_name);
|
||||||
|
if (callbacks.onTotalFail)
|
||||||
|
callbacks.onTotalFail();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
helpers._xhr(method, url, options, callbacks);
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* @callback callbackXhrOn200
|
||||||
|
* @param {Object} response - xhr.response
|
||||||
|
*/
|
||||||
|
/**
|
||||||
|
* @callback callbackXhrError
|
||||||
|
* @param {XMLHttpRequest} xhr
|
||||||
|
*/
|
||||||
|
/**
|
||||||
|
* @param {'GET'|'POST'} method - 'GET' or 'POST'
|
||||||
|
* @param {String} url - URL to send request to
|
||||||
|
* @param {Object} options - other XHR options
|
||||||
|
* @param {XMLHttpRequestBodyInit} [options.payload=null] - payload for POST-requests
|
||||||
|
* @param {'arraybuffer'|'blob'|'document'|'json'|'text'} [options.responseType=json]
|
||||||
|
* @param {Number} [options.timeout=10000]
|
||||||
|
* @param {Number} [options.retries=1]
|
||||||
|
* @param {String} [options.entity_name='unknown'] - string to log
|
||||||
|
* @param {Number} [options.retry_timeout=1000]
|
||||||
|
* @param {Object} callbacks - functions to execute on events fired
|
||||||
|
* @param {callbackXhrOn200} [callbacks.on200]
|
||||||
|
* @param {callbackXhrError} [callbacks.onNon200]
|
||||||
|
* @param {callbackXhrError} [callbacks.onTimeout]
|
||||||
|
* @param {callbackXhrError} [callbacks.onError]
|
||||||
|
* @param {callbackXhrError} [callbacks.onTotalFail] - if failed after all retries
|
||||||
|
*/
|
||||||
|
xhr: function(method, url, options, callbacks) {
|
||||||
|
if (!options.retries || options.retries <= 1) {
|
||||||
|
helpers._xhr(method, url, options, callbacks);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!options.entity_name) options.entity_name = 'unknown';
|
||||||
|
if (!options.retry_timeout) options.retry_timeout = 1000;
|
||||||
|
const retries_total = options.retries;
|
||||||
|
let currentTry = 1;
|
||||||
|
|
||||||
|
const retry = function () {
|
||||||
|
console.warn('Pulling ' + options.entity_name + ' failed... ' + (currentTry++) + '/' + retries_total);
|
||||||
|
setTimeout(function () {
|
||||||
|
options.retries--;
|
||||||
|
helpers._xhrRetry(method, url, options, callbacks);
|
||||||
|
}, options.retry_timeout);
|
||||||
|
};
|
||||||
|
|
||||||
|
// Pack retry() call into error handlers
|
||||||
|
callbacks._onError = callbacks.onError;
|
||||||
|
callbacks.onError = function (xhr) {
|
||||||
|
if (callbacks._onError)
|
||||||
|
callbacks._onError(xhr);
|
||||||
|
retry();
|
||||||
|
};
|
||||||
|
callbacks._onTimeout = callbacks.onTimeout;
|
||||||
|
callbacks.onTimeout = function (xhr) {
|
||||||
|
if (callbacks._onTimeout)
|
||||||
|
callbacks._onTimeout(xhr);
|
||||||
|
retry();
|
||||||
|
};
|
||||||
|
|
||||||
|
helpers._xhrRetry(method, url, options, callbacks);
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @typedef {Object} invidiousStorage
|
||||||
|
* @property {(key:String) => Object} get
|
||||||
|
* @property {(key:String, value:Object)} set
|
||||||
|
* @property {(key:String)} remove
|
||||||
|
*/
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Universal storage, stores and returns JS objects. Uses inside localStorage or cookies
|
||||||
|
* @type {invidiousStorage}
|
||||||
|
*/
|
||||||
|
storage: (function () {
|
||||||
|
// access to localStorage throws exception in Tor Browser, so try is needed
|
||||||
|
let localStorageIsUsable = false;
|
||||||
|
try{localStorageIsUsable = !!localStorage.setItem;}catch(e){}
|
||||||
|
|
||||||
|
if (localStorageIsUsable) {
|
||||||
|
return {
|
||||||
|
get: function (key) {
|
||||||
|
if (!localStorage[key]) return;
|
||||||
|
try {
|
||||||
|
return JSON.parse(decodeURIComponent(localStorage[key]));
|
||||||
|
} catch(e) {
|
||||||
|
// Erase non parsable value
|
||||||
|
helpers.storage.remove(key);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
set: function (key, value) { localStorage[key] = encodeURIComponent(JSON.stringify(value)); },
|
||||||
|
remove: function (key) { localStorage.removeItem(key); }
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
// TODO: fire 'storage' event for cookies
|
||||||
|
console.info('Storage: localStorage is disabled or unaccessible. Cookies used as fallback');
|
||||||
|
return {
|
||||||
|
get: function (key) {
|
||||||
|
const cookiePrefix = key + '=';
|
||||||
|
function findCallback(cookie) {return cookie.startsWith(cookiePrefix);}
|
||||||
|
const matchedCookie = document.cookie.split('; ').find(findCallback);
|
||||||
|
if (matchedCookie) {
|
||||||
|
const cookieBody = matchedCookie.replace(cookiePrefix, '');
|
||||||
|
if (cookieBody.length === 0) return;
|
||||||
|
try {
|
||||||
|
return JSON.parse(decodeURIComponent(cookieBody));
|
||||||
|
} catch(e) {
|
||||||
|
// Erase non parsable value
|
||||||
|
helpers.storage.remove(key);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
set: function (key, value) {
|
||||||
|
const cookie_data = encodeURIComponent(JSON.stringify(value));
|
||||||
|
|
||||||
|
// Set expiration in 2 year
|
||||||
|
const date = new Date();
|
||||||
|
date.setFullYear(date.getFullYear()+2);
|
||||||
|
|
||||||
|
document.cookie = key + '=' + cookie_data + '; expires=' + date.toGMTString();
|
||||||
|
},
|
||||||
|
remove: function (key) {
|
||||||
|
document.cookie = key + '=; Max-Age=0';
|
||||||
|
}
|
||||||
|
};
|
||||||
|
})()
|
||||||
|
};
|
@ -1,13 +1,6 @@
|
|||||||
'use strict';
|
'use strict';
|
||||||
var community_data = JSON.parse(document.getElementById('community_data').textContent);
|
var community_data = JSON.parse(document.getElementById('community_data').textContent);
|
||||||
|
|
||||||
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;
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
function hide_youtube_replies(event) {
|
function hide_youtube_replies(event) {
|
||||||
var target = event.target;
|
var target = event.target;
|
||||||
|
|
||||||
@ -38,13 +31,6 @@ function show_youtube_replies(event) {
|
|||||||
target.setAttribute('data-sub-text', sub_text);
|
target.setAttribute('data-sub-text', sub_text);
|
||||||
}
|
}
|
||||||
|
|
||||||
function number_with_separator(val) {
|
|
||||||
while (/(\d+)(\d{3})/.test(val.toString())) {
|
|
||||||
val = val.toString().replace(/(\d+)(\d{3})/, '$1' + ',' + '$2');
|
|
||||||
}
|
|
||||||
return val;
|
|
||||||
}
|
|
||||||
|
|
||||||
function get_youtube_replies(target, load_more) {
|
function get_youtube_replies(target, load_more) {
|
||||||
var continuation = target.getAttribute('data-continuation');
|
var continuation = target.getAttribute('data-continuation');
|
||||||
|
|
||||||
@ -58,18 +44,13 @@ function get_youtube_replies(target, load_more) {
|
|||||||
'&hl=' + community_data.preferences.locale +
|
'&hl=' + community_data.preferences.locale +
|
||||||
'&thin_mode=' + community_data.preferences.thin_mode +
|
'&thin_mode=' + community_data.preferences.thin_mode +
|
||||||
'&continuation=' + continuation;
|
'&continuation=' + continuation;
|
||||||
var xhr = new XMLHttpRequest();
|
|
||||||
xhr.responseType = 'json';
|
|
||||||
xhr.timeout = 10000;
|
|
||||||
xhr.open('GET', url, true);
|
|
||||||
|
|
||||||
xhr.onreadystatechange = function () {
|
helpers.xhr('GET', url, {}, {
|
||||||
if (xhr.readyState === 4) {
|
on200: function (response) {
|
||||||
if (xhr.status === 200) {
|
|
||||||
if (load_more) {
|
if (load_more) {
|
||||||
body = body.parentNode.parentNode;
|
body = body.parentNode.parentNode;
|
||||||
body.removeChild(body.lastElementChild);
|
body.removeChild(body.lastElementChild);
|
||||||
body.innerHTML += xhr.response.contentHtml;
|
body.innerHTML += response.contentHtml;
|
||||||
} else {
|
} else {
|
||||||
body.removeChild(body.lastElementChild);
|
body.removeChild(body.lastElementChild);
|
||||||
|
|
||||||
@ -81,24 +62,21 @@ function get_youtube_replies(target, load_more) {
|
|||||||
a.onclick = hide_youtube_replies;
|
a.onclick = hide_youtube_replies;
|
||||||
a.setAttribute('data-sub-text', community_data.hide_replies_text);
|
a.setAttribute('data-sub-text', community_data.hide_replies_text);
|
||||||
a.setAttribute('data-inner-text', community_data.show_replies_text);
|
a.setAttribute('data-inner-text', community_data.show_replies_text);
|
||||||
a.innerText = community_data.hide_replies_text;
|
a.textContent = community_data.hide_replies_text;
|
||||||
|
|
||||||
var div = document.createElement('div');
|
var div = document.createElement('div');
|
||||||
div.innerHTML = xhr.response.contentHtml;
|
div.innerHTML = response.contentHtml;
|
||||||
|
|
||||||
body.appendChild(p);
|
body.appendChild(p);
|
||||||
body.appendChild(div);
|
body.appendChild(div);
|
||||||
}
|
}
|
||||||
} else {
|
},
|
||||||
|
onNon200: function (xhr) {
|
||||||
|
body.innerHTML = fallback;
|
||||||
|
},
|
||||||
|
onTimeout: function (xhr) {
|
||||||
|
console.warn('Pulling comments failed');
|
||||||
body.innerHTML = fallback;
|
body.innerHTML = fallback;
|
||||||
}
|
}
|
||||||
}
|
});
|
||||||
};
|
|
||||||
|
|
||||||
xhr.ontimeout = function () {
|
|
||||||
console.warn('Pulling comments failed.');
|
|
||||||
body.innerHTML = fallback;
|
|
||||||
};
|
|
||||||
|
|
||||||
xhr.send();
|
|
||||||
}
|
}
|
||||||
|
@ -1,14 +1,7 @@
|
|||||||
'use strict';
|
'use strict';
|
||||||
var video_data = JSON.parse(document.getElementById('video_data').textContent);
|
var video_data = JSON.parse(document.getElementById('video_data').textContent);
|
||||||
|
|
||||||
function get_playlist(plid, retries) {
|
function get_playlist(plid) {
|
||||||
if (retries === undefined) retries = 5;
|
|
||||||
|
|
||||||
if (retries <= 0) {
|
|
||||||
console.warn('Failed to pull playlist');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
var plid_url;
|
var plid_url;
|
||||||
if (plid.startsWith('RD')) {
|
if (plid.startsWith('RD')) {
|
||||||
plid_url = '/api/v1/mixes/' + plid +
|
plid_url = '/api/v1/mixes/' + plid +
|
||||||
@ -21,85 +14,49 @@ function get_playlist(plid, retries) {
|
|||||||
'&format=html&hl=' + video_data.preferences.locale;
|
'&format=html&hl=' + video_data.preferences.locale;
|
||||||
}
|
}
|
||||||
|
|
||||||
var xhr = new XMLHttpRequest();
|
helpers.xhr('GET', plid_url, {retries: 5, entity_name: 'playlist'}, {
|
||||||
xhr.responseType = 'json';
|
on200: function (response) {
|
||||||
xhr.timeout = 10000;
|
if (!response.nextVideo)
|
||||||
xhr.open('GET', plid_url, true);
|
return;
|
||||||
|
|
||||||
xhr.onreadystatechange = function () {
|
|
||||||
if (xhr.readyState === 4) {
|
|
||||||
if (xhr.status === 200) {
|
|
||||||
if (xhr.response.nextVideo) {
|
|
||||||
player.on('ended', function () {
|
player.on('ended', function () {
|
||||||
var url = new URL('https://example.com/embed/' + xhr.response.nextVideo);
|
var url = new URL('https://example.com/embed/' + response.nextVideo);
|
||||||
|
|
||||||
url.searchParams.set('list', plid);
|
url.searchParams.set('list', plid);
|
||||||
if (!plid.startsWith('RD')) {
|
if (!plid.startsWith('RD'))
|
||||||
url.searchParams.set('index', xhr.response.index);
|
url.searchParams.set('index', response.index);
|
||||||
}
|
if (video_data.params.autoplay || video_data.params.continue_autoplay)
|
||||||
|
|
||||||
if (video_data.params.autoplay || video_data.params.continue_autoplay) {
|
|
||||||
url.searchParams.set('autoplay', '1');
|
url.searchParams.set('autoplay', '1');
|
||||||
}
|
if (video_data.params.listen !== video_data.preferences.listen)
|
||||||
|
|
||||||
if (video_data.params.listen !== video_data.preferences.listen) {
|
|
||||||
url.searchParams.set('listen', video_data.params.listen);
|
url.searchParams.set('listen', video_data.params.listen);
|
||||||
}
|
if (video_data.params.speed !== video_data.preferences.speed)
|
||||||
|
|
||||||
if (video_data.params.speed !== video_data.preferences.speed) {
|
|
||||||
url.searchParams.set('speed', video_data.params.speed);
|
url.searchParams.set('speed', video_data.params.speed);
|
||||||
}
|
if (video_data.params.local !== video_data.preferences.local)
|
||||||
|
|
||||||
if (video_data.params.local !== video_data.preferences.local) {
|
|
||||||
url.searchParams.set('local', video_data.params.local);
|
url.searchParams.set('local', video_data.params.local);
|
||||||
}
|
|
||||||
|
|
||||||
location.assign(url.pathname + url.search);
|
location.assign(url.pathname + url.search);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
});
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
xhr.onerror = function () {
|
|
||||||
console.warn('Pulling playlist failed... ' + retries + '/5');
|
|
||||||
setTimeout(function () { get_playlist(plid, retries - 1); }, 1000);
|
|
||||||
};
|
|
||||||
|
|
||||||
xhr.ontimeout = function () {
|
|
||||||
console.warn('Pulling playlist failed... ' + retries + '/5');
|
|
||||||
get_playlist(plid, retries - 1);
|
|
||||||
};
|
|
||||||
|
|
||||||
xhr.send();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
window.addEventListener('load', function (e) {
|
addEventListener('load', function (e) {
|
||||||
if (video_data.plid) {
|
if (video_data.plid) {
|
||||||
get_playlist(video_data.plid);
|
get_playlist(video_data.plid);
|
||||||
} else if (video_data.video_series) {
|
} else if (video_data.video_series) {
|
||||||
player.on('ended', function () {
|
player.on('ended', function () {
|
||||||
var url = new URL('https://example.com/embed/' + video_data.video_series.shift());
|
var url = new URL('https://example.com/embed/' + video_data.video_series.shift());
|
||||||
|
|
||||||
if (video_data.params.autoplay || video_data.params.continue_autoplay) {
|
if (video_data.params.autoplay || video_data.params.continue_autoplay)
|
||||||
url.searchParams.set('autoplay', '1');
|
url.searchParams.set('autoplay', '1');
|
||||||
}
|
if (video_data.params.listen !== video_data.preferences.listen)
|
||||||
|
|
||||||
if (video_data.params.listen !== video_data.preferences.listen) {
|
|
||||||
url.searchParams.set('listen', video_data.params.listen);
|
url.searchParams.set('listen', video_data.params.listen);
|
||||||
}
|
if (video_data.params.speed !== video_data.preferences.speed)
|
||||||
|
|
||||||
if (video_data.params.speed !== video_data.preferences.speed) {
|
|
||||||
url.searchParams.set('speed', video_data.params.speed);
|
url.searchParams.set('speed', video_data.params.speed);
|
||||||
}
|
if (video_data.params.local !== video_data.preferences.local)
|
||||||
|
|
||||||
if (video_data.params.local !== video_data.preferences.local) {
|
|
||||||
url.searchParams.set('local', video_data.params.local);
|
url.searchParams.set('local', video_data.params.local);
|
||||||
}
|
if (video_data.video_series.length !== 0)
|
||||||
|
|
||||||
if (video_data.video_series.length !== 0) {
|
|
||||||
url.searchParams.set('playlist', video_data.video_series.join(','));
|
url.searchParams.set('playlist', video_data.video_series.join(','));
|
||||||
}
|
|
||||||
|
|
||||||
location.assign(url.pathname + url.search);
|
location.assign(url.pathname + url.search);
|
||||||
});
|
});
|
||||||
|
@ -1,8 +1,6 @@
|
|||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
(function () {
|
(function () {
|
||||||
var n2a = function (n) { return Array.prototype.slice.call(n); };
|
|
||||||
|
|
||||||
var video_player = document.getElementById('player_html5_api');
|
var video_player = document.getElementById('player_html5_api');
|
||||||
if (video_player) {
|
if (video_player) {
|
||||||
video_player.onmouseenter = function () { video_player['data-title'] = video_player['title']; video_player['title'] = ''; };
|
video_player.onmouseenter = function () { video_player['data-title'] = video_player['title']; video_player['title'] = ''; };
|
||||||
@ -11,8 +9,8 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
// For dynamically inserted elements
|
// For dynamically inserted elements
|
||||||
document.addEventListener('click', function (e) {
|
addEventListener('click', function (e) {
|
||||||
if (!e || !e.target) { return; }
|
if (!e || !e.target) return;
|
||||||
|
|
||||||
var t = e.target;
|
var t = e.target;
|
||||||
var handler_name = t.getAttribute('data-onclick');
|
var handler_name = t.getAttribute('data-onclick');
|
||||||
@ -29,6 +27,7 @@
|
|||||||
get_youtube_replies(t, load_more, load_replies);
|
get_youtube_replies(t, load_more, load_replies);
|
||||||
break;
|
break;
|
||||||
case 'toggle_parent':
|
case 'toggle_parent':
|
||||||
|
e.preventDefault();
|
||||||
toggle_parent(t);
|
toggle_parent(t);
|
||||||
break;
|
break;
|
||||||
default:
|
default:
|
||||||
@ -36,118 +35,98 @@
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
n2a(document.querySelectorAll('[data-mouse="switch_classes"]')).forEach(function (e) {
|
document.querySelectorAll('[data-mouse="switch_classes"]').forEach(function (el) {
|
||||||
var classes = e.getAttribute('data-switch-classes').split(',');
|
var classes = el.getAttribute('data-switch-classes').split(',');
|
||||||
var ec = classes[0];
|
var classOnEnter = classes[0];
|
||||||
var lc = classes[1];
|
var classOnLeave = classes[1];
|
||||||
var onoff = function (on, off) {
|
function toggle_classes(toAdd, toRemove) {
|
||||||
var cs = e.getAttribute('class');
|
el.classList.add(toAdd);
|
||||||
cs = cs.split(off).join(on);
|
el.classList.remove(toRemove);
|
||||||
e.setAttribute('class', cs);
|
|
||||||
};
|
|
||||||
e.onmouseenter = function () { onoff(ec, lc); };
|
|
||||||
e.onmouseleave = function () { onoff(lc, ec); };
|
|
||||||
});
|
|
||||||
|
|
||||||
n2a(document.querySelectorAll('[data-onsubmit="return_false"]')).forEach(function (e) {
|
|
||||||
e.onsubmit = function () { return false; };
|
|
||||||
});
|
|
||||||
|
|
||||||
n2a(document.querySelectorAll('[data-onclick="mark_watched"]')).forEach(function (e) {
|
|
||||||
e.onclick = function () { mark_watched(e); };
|
|
||||||
});
|
|
||||||
n2a(document.querySelectorAll('[data-onclick="mark_unwatched"]')).forEach(function (e) {
|
|
||||||
e.onclick = function () { mark_unwatched(e); };
|
|
||||||
});
|
|
||||||
n2a(document.querySelectorAll('[data-onclick="add_playlist_video"]')).forEach(function (e) {
|
|
||||||
e.onclick = function () { add_playlist_video(e); };
|
|
||||||
});
|
|
||||||
n2a(document.querySelectorAll('[data-onclick="add_playlist_item"]')).forEach(function (e) {
|
|
||||||
e.onclick = function () { add_playlist_item(e); };
|
|
||||||
});
|
|
||||||
n2a(document.querySelectorAll('[data-onclick="remove_playlist_item"]')).forEach(function (e) {
|
|
||||||
e.onclick = function () { remove_playlist_item(e); };
|
|
||||||
});
|
|
||||||
n2a(document.querySelectorAll('[data-onclick="revoke_token"]')).forEach(function (e) {
|
|
||||||
e.onclick = function () { revoke_token(e); };
|
|
||||||
});
|
|
||||||
n2a(document.querySelectorAll('[data-onclick="remove_subscription"]')).forEach(function (e) {
|
|
||||||
e.onclick = function () { remove_subscription(e); };
|
|
||||||
});
|
|
||||||
n2a(document.querySelectorAll('[data-onclick="notification_requestPermission"]')).forEach(function (e) {
|
|
||||||
e.onclick = function () { Notification.requestPermission(); };
|
|
||||||
});
|
|
||||||
|
|
||||||
n2a(document.querySelectorAll('[data-onrange="update_volume_value"]')).forEach(function (e) {
|
|
||||||
var cb = function () { update_volume_value(e); };
|
|
||||||
e.oninput = cb;
|
|
||||||
e.onchange = cb;
|
|
||||||
});
|
|
||||||
|
|
||||||
function update_volume_value(element) {
|
|
||||||
document.getElementById('volume-value').innerText = element.value;
|
|
||||||
}
|
}
|
||||||
|
el.onmouseenter = function () { toggle_classes(classOnEnter, classOnLeave); };
|
||||||
|
el.onmouseleave = function () { toggle_classes(classOnLeave, classOnEnter); };
|
||||||
|
});
|
||||||
|
|
||||||
|
document.querySelectorAll('[data-onsubmit="return_false"]').forEach(function (el) {
|
||||||
|
el.onsubmit = function () { return false; };
|
||||||
|
});
|
||||||
|
|
||||||
|
document.querySelectorAll('[data-onclick="mark_watched"]').forEach(function (el) {
|
||||||
|
el.onclick = function () { mark_watched(el); };
|
||||||
|
});
|
||||||
|
document.querySelectorAll('[data-onclick="mark_unwatched"]').forEach(function (el) {
|
||||||
|
el.onclick = function () { mark_unwatched(el); };
|
||||||
|
});
|
||||||
|
document.querySelectorAll('[data-onclick="add_playlist_video"]').forEach(function (el) {
|
||||||
|
el.onclick = function () { add_playlist_video(el); };
|
||||||
|
});
|
||||||
|
document.querySelectorAll('[data-onclick="add_playlist_item"]').forEach(function (el) {
|
||||||
|
el.onclick = function () { add_playlist_item(el); };
|
||||||
|
});
|
||||||
|
document.querySelectorAll('[data-onclick="remove_playlist_item"]').forEach(function (el) {
|
||||||
|
el.onclick = function () { remove_playlist_item(el); };
|
||||||
|
});
|
||||||
|
document.querySelectorAll('[data-onclick="revoke_token"]').forEach(function (el) {
|
||||||
|
el.onclick = function () { revoke_token(el); };
|
||||||
|
});
|
||||||
|
document.querySelectorAll('[data-onclick="remove_subscription"]').forEach(function (el) {
|
||||||
|
el.onclick = function () { remove_subscription(el); };
|
||||||
|
});
|
||||||
|
document.querySelectorAll('[data-onclick="notification_requestPermission"]').forEach(function (el) {
|
||||||
|
el.onclick = function () { Notification.requestPermission(); };
|
||||||
|
});
|
||||||
|
|
||||||
|
document.querySelectorAll('[data-onrange="update_volume_value"]').forEach(function (el) {
|
||||||
|
function update_volume_value() {
|
||||||
|
document.getElementById('volume-value').textContent = el.value;
|
||||||
|
}
|
||||||
|
el.oninput = update_volume_value;
|
||||||
|
el.onchange = update_volume_value;
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
function revoke_token(target) {
|
function revoke_token(target) {
|
||||||
var row = target.parentNode.parentNode.parentNode.parentNode.parentNode;
|
var row = target.parentNode.parentNode.parentNode.parentNode.parentNode;
|
||||||
row.style.display = 'none';
|
row.style.display = 'none';
|
||||||
var count = document.getElementById('count');
|
var count = document.getElementById('count');
|
||||||
count.innerText = count.innerText - 1;
|
count.textContent--;
|
||||||
|
|
||||||
var referer = window.encodeURIComponent(document.location.href);
|
|
||||||
var url = '/token_ajax?action_revoke_token=1&redirect=false' +
|
var url = '/token_ajax?action_revoke_token=1&redirect=false' +
|
||||||
'&referer=' + referer +
|
'&referer=' + encodeURIComponent(location.href) +
|
||||||
'&session=' + target.getAttribute('data-session');
|
'&session=' + target.getAttribute('data-session');
|
||||||
var xhr = new XMLHttpRequest();
|
|
||||||
xhr.responseType = 'json';
|
|
||||||
xhr.timeout = 10000;
|
|
||||||
xhr.open('POST', url, true);
|
|
||||||
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
|
|
||||||
|
|
||||||
xhr.onreadystatechange = function () {
|
var payload = 'csrf_token=' + target.parentNode.querySelector('input[name="csrf_token"]').value;
|
||||||
if (xhr.readyState === 4) {
|
|
||||||
if (xhr.status !== 200) {
|
helpers.xhr('POST', url, {payload: payload}, {
|
||||||
count.innerText = parseInt(count.innerText) + 1;
|
onNon200: function (xhr) {
|
||||||
|
count.textContent++;
|
||||||
row.style.display = '';
|
row.style.display = '';
|
||||||
}
|
}
|
||||||
}
|
});
|
||||||
};
|
|
||||||
|
|
||||||
var csrf_token = target.parentNode.querySelector('input[name="csrf_token"]').value;
|
|
||||||
xhr.send('csrf_token=' + csrf_token);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function remove_subscription(target) {
|
function remove_subscription(target) {
|
||||||
var row = target.parentNode.parentNode.parentNode.parentNode.parentNode;
|
var row = target.parentNode.parentNode.parentNode.parentNode.parentNode;
|
||||||
row.style.display = 'none';
|
row.style.display = 'none';
|
||||||
var count = document.getElementById('count');
|
var count = document.getElementById('count');
|
||||||
count.innerText = count.innerText - 1;
|
count.textContent--;
|
||||||
|
|
||||||
var referer = window.encodeURIComponent(document.location.href);
|
|
||||||
var url = '/subscription_ajax?action_remove_subscriptions=1&redirect=false' +
|
var url = '/subscription_ajax?action_remove_subscriptions=1&redirect=false' +
|
||||||
'&referer=' + referer +
|
'&referer=' + encodeURIComponent(location.href) +
|
||||||
'&c=' + target.getAttribute('data-ucid');
|
'&c=' + target.getAttribute('data-ucid');
|
||||||
var xhr = new XMLHttpRequest();
|
|
||||||
xhr.responseType = 'json';
|
|
||||||
xhr.timeout = 10000;
|
|
||||||
xhr.open('POST', url, true);
|
|
||||||
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
|
|
||||||
|
|
||||||
xhr.onreadystatechange = function () {
|
var payload = 'csrf_token=' + target.parentNode.querySelector('input[name="csrf_token"]').value;
|
||||||
if (xhr.readyState === 4) {
|
|
||||||
if (xhr.status !== 200) {
|
helpers.xhr('POST', url, {payload: payload}, {
|
||||||
count.innerText = parseInt(count.innerText) + 1;
|
onNon200: function (xhr) {
|
||||||
|
count.textContent++;
|
||||||
row.style.display = '';
|
row.style.display = '';
|
||||||
}
|
}
|
||||||
}
|
});
|
||||||
};
|
|
||||||
|
|
||||||
var csrf_token = target.parentNode.querySelector('input[name="csrf_token"]').value;
|
|
||||||
xhr.send('csrf_token=' + csrf_token);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Handle keypresses
|
// Handle keypresses
|
||||||
window.addEventListener('keydown', function (event) {
|
addEventListener('keydown', function (event) {
|
||||||
// Ignore modifier keys
|
// Ignore modifier keys
|
||||||
if (event.ctrlKey || event.metaKey) return;
|
if (event.ctrlKey || event.metaKey) return;
|
||||||
|
|
||||||
|
@ -1,43 +1,26 @@
|
|||||||
'use strict';
|
'use strict';
|
||||||
var notification_data = JSON.parse(document.getElementById('notification_data').textContent);
|
var notification_data = JSON.parse(document.getElementById('notification_data').textContent);
|
||||||
|
|
||||||
|
/** Boolean meaning 'some tab have stream' */
|
||||||
|
const STORAGE_KEY_STREAM = 'stream';
|
||||||
|
/** Number of notifications. May be increased or reset */
|
||||||
|
const STORAGE_KEY_NOTIF_COUNT = 'notification_count';
|
||||||
|
|
||||||
var notifications, delivered;
|
var notifications, delivered;
|
||||||
|
var notifications_mock = { close: function () { } };
|
||||||
|
|
||||||
function get_subscriptions(callback, retries) {
|
function get_subscriptions() {
|
||||||
if (retries === undefined) retries = 5;
|
helpers.xhr('GET', '/api/v1/auth/subscriptions?fields=authorId', {
|
||||||
|
retries: 5,
|
||||||
if (retries <= 0) {
|
entity_name: 'subscriptions'
|
||||||
return;
|
}, {
|
||||||
}
|
on200: create_notification_stream
|
||||||
|
});
|
||||||
var xhr = new XMLHttpRequest();
|
|
||||||
xhr.responseType = 'json';
|
|
||||||
xhr.timeout = 10000;
|
|
||||||
xhr.open('GET', '/api/v1/auth/subscriptions?fields=authorId', true);
|
|
||||||
|
|
||||||
xhr.onreadystatechange = function () {
|
|
||||||
if (xhr.readyState === 4) {
|
|
||||||
if (xhr.status === 200) {
|
|
||||||
var subscriptions = xhr.response;
|
|
||||||
callback(subscriptions);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
xhr.onerror = function () {
|
|
||||||
console.warn('Pulling subscriptions failed... ' + retries + '/5');
|
|
||||||
setTimeout(function () { get_subscriptions(callback, retries - 1); }, 1000);
|
|
||||||
};
|
|
||||||
|
|
||||||
xhr.ontimeout = function () {
|
|
||||||
console.warn('Pulling subscriptions failed... ' + retries + '/5');
|
|
||||||
get_subscriptions(callback, retries - 1);
|
|
||||||
};
|
|
||||||
|
|
||||||
xhr.send();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function create_notification_stream(subscriptions) {
|
function create_notification_stream(subscriptions) {
|
||||||
|
// sse.js can't be replaced to EventSource in place as it lack support of payload and headers
|
||||||
|
// see https://developer.mozilla.org/en-US/docs/Web/API/EventSource/EventSource
|
||||||
notifications = new SSE(
|
notifications = new SSE(
|
||||||
'/api/v1/auth/notifications?fields=videoId,title,author,authorId,publishedText,published,authorThumbnails,liveNow', {
|
'/api/v1/auth/notifications?fields=videoId,title,author,authorId,publishedText,published,authorThumbnails,liveNow', {
|
||||||
withCredentials: true,
|
withCredentials: true,
|
||||||
@ -49,96 +32,100 @@ function create_notification_stream(subscriptions) {
|
|||||||
var start_time = Math.round(new Date() / 1000);
|
var start_time = Math.round(new Date() / 1000);
|
||||||
|
|
||||||
notifications.onmessage = function (event) {
|
notifications.onmessage = function (event) {
|
||||||
if (!event.id) {
|
if (!event.id) return;
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
var notification = JSON.parse(event.data);
|
var notification = JSON.parse(event.data);
|
||||||
console.info('Got notification:', notification);
|
console.info('Got notification:', notification);
|
||||||
|
|
||||||
if (start_time < notification.published && !delivered.includes(notification.videoId)) {
|
// Ignore not actual and delivered notifications
|
||||||
if (Notification.permission === 'granted') {
|
if (start_time > notification.published || delivered.includes(notification.videoId)) return;
|
||||||
var system_notification =
|
|
||||||
new Notification((notification.liveNow ? notification_data.live_now_text : notification_data.upload_text).replace('`x`', notification.author), {
|
|
||||||
body: notification.title,
|
|
||||||
icon: '/ggpht' + new URL(notification.authorThumbnails[2].url).pathname,
|
|
||||||
img: '/ggpht' + new URL(notification.authorThumbnails[4].url).pathname,
|
|
||||||
tag: notification.videoId
|
|
||||||
});
|
|
||||||
|
|
||||||
system_notification.onclick = function (event) {
|
|
||||||
window.open('/watch?v=' + event.currentTarget.tag, '_blank');
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
delivered.push(notification.videoId);
|
delivered.push(notification.videoId);
|
||||||
localStorage.setItem('notification_count', parseInt(localStorage.getItem('notification_count') || '0') + 1);
|
|
||||||
var notification_ticker = document.getElementById('notification_ticker');
|
|
||||||
|
|
||||||
if (parseInt(localStorage.getItem('notification_count')) > 0) {
|
let notification_count = helpers.storage.get(STORAGE_KEY_NOTIF_COUNT) || 0;
|
||||||
notification_ticker.innerHTML =
|
notification_count++;
|
||||||
'<span id="notification_count">' + localStorage.getItem('notification_count') + '</span> <i class="icon ion-ios-notifications"></i>';
|
helpers.storage.set(STORAGE_KEY_NOTIF_COUNT, notification_count);
|
||||||
} else {
|
|
||||||
notification_ticker.innerHTML =
|
update_ticker_count();
|
||||||
'<i class="icon ion-ios-notifications-outline"></i>';
|
|
||||||
}
|
// permission for notifications handled on settings page. JS handler is in handlers.js
|
||||||
|
if (window.Notification && Notification.permission === 'granted') {
|
||||||
|
var notification_text = notification.liveNow ? notification_data.live_now_text : notification_data.upload_text;
|
||||||
|
notification_text = notification_text.replace('`x`', notification.author);
|
||||||
|
|
||||||
|
var system_notification = new Notification(notification_text, {
|
||||||
|
body: notification.title,
|
||||||
|
icon: '/ggpht' + new URL(notification.authorThumbnails[2].url).pathname,
|
||||||
|
img: '/ggpht' + new URL(notification.authorThumbnails[4].url).pathname
|
||||||
|
});
|
||||||
|
|
||||||
|
system_notification.onclick = function (e) {
|
||||||
|
open('/watch?v=' + notification.videoId, '_blank');
|
||||||
|
};
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
notifications.addEventListener('error', handle_notification_error);
|
notifications.addEventListener('error', function (e) {
|
||||||
|
console.warn('Something went wrong with notifications, trying to reconnect...');
|
||||||
|
notifications = notifications_mock;
|
||||||
|
setTimeout(get_subscriptions, 1000);
|
||||||
|
});
|
||||||
|
|
||||||
notifications.stream();
|
notifications.stream();
|
||||||
}
|
}
|
||||||
|
|
||||||
function handle_notification_error(event) {
|
function update_ticker_count() {
|
||||||
console.warn('Something went wrong with notifications, trying to reconnect...');
|
|
||||||
notifications = { close: function () { } };
|
|
||||||
setTimeout(function () { get_subscriptions(create_notification_stream); }, 1000);
|
|
||||||
}
|
|
||||||
|
|
||||||
window.addEventListener('load', function (e) {
|
|
||||||
localStorage.setItem('notification_count', document.getElementById('notification_count') ? document.getElementById('notification_count').innerText : '0');
|
|
||||||
|
|
||||||
if (localStorage.getItem('stream')) {
|
|
||||||
localStorage.removeItem('stream');
|
|
||||||
} else {
|
|
||||||
setTimeout(function () {
|
|
||||||
if (!localStorage.getItem('stream')) {
|
|
||||||
notifications = { close: function () { } };
|
|
||||||
localStorage.setItem('stream', true);
|
|
||||||
get_subscriptions(create_notification_stream);
|
|
||||||
}
|
|
||||||
}, Math.random() * 1000 + 50);
|
|
||||||
}
|
|
||||||
|
|
||||||
window.addEventListener('storage', function (e) {
|
|
||||||
if (e.key === 'stream' && !e.newValue) {
|
|
||||||
if (notifications) {
|
|
||||||
localStorage.setItem('stream', true);
|
|
||||||
} else {
|
|
||||||
setTimeout(function () {
|
|
||||||
if (!localStorage.getItem('stream')) {
|
|
||||||
notifications = { close: function () { } };
|
|
||||||
localStorage.setItem('stream', true);
|
|
||||||
get_subscriptions(create_notification_stream);
|
|
||||||
}
|
|
||||||
}, Math.random() * 1000 + 50);
|
|
||||||
}
|
|
||||||
} else if (e.key === 'notification_count') {
|
|
||||||
var notification_ticker = document.getElementById('notification_ticker');
|
var notification_ticker = document.getElementById('notification_ticker');
|
||||||
|
|
||||||
if (parseInt(e.newValue) > 0) {
|
const notification_count = helpers.storage.get(STORAGE_KEY_STREAM);
|
||||||
|
if (notification_count > 0) {
|
||||||
notification_ticker.innerHTML =
|
notification_ticker.innerHTML =
|
||||||
'<span id="notification_count">' + e.newValue + '</span> <i class="icon ion-ios-notifications"></i>';
|
'<span id="notification_count">' + notification_count + '</span> <i class="icon ion-ios-notifications"></i>';
|
||||||
} else {
|
} else {
|
||||||
notification_ticker.innerHTML =
|
notification_ticker.innerHTML =
|
||||||
'<i class="icon ion-ios-notifications-outline"></i>';
|
'<i class="icon ion-ios-notifications-outline"></i>';
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function start_stream_if_needed() {
|
||||||
|
// random wait for other tabs set 'stream' flag
|
||||||
|
setTimeout(function () {
|
||||||
|
if (!helpers.storage.get(STORAGE_KEY_STREAM)) {
|
||||||
|
// if no one set 'stream', set it by yourself and start stream
|
||||||
|
helpers.storage.set(STORAGE_KEY_STREAM, true);
|
||||||
|
notifications = notifications_mock;
|
||||||
|
get_subscriptions();
|
||||||
|
}
|
||||||
|
}, Math.random() * 1000 + 50); // [0.050 .. 1.050) second
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
addEventListener('storage', function (e) {
|
||||||
|
if (e.key === STORAGE_KEY_NOTIF_COUNT)
|
||||||
|
update_ticker_count();
|
||||||
|
|
||||||
|
// if 'stream' key was removed
|
||||||
|
if (e.key === STORAGE_KEY_STREAM && !helpers.storage.get(STORAGE_KEY_STREAM)) {
|
||||||
|
if (notifications) {
|
||||||
|
// restore it if we have active stream
|
||||||
|
helpers.storage.set(STORAGE_KEY_STREAM, true);
|
||||||
|
} else {
|
||||||
|
start_stream_if_needed();
|
||||||
|
}
|
||||||
}
|
}
|
||||||
});
|
|
||||||
});
|
});
|
||||||
|
|
||||||
window.addEventListener('unload', function (e) {
|
addEventListener('load', function () {
|
||||||
if (notifications) {
|
var notification_count_el = document.getElementById('notification_count');
|
||||||
localStorage.removeItem('stream');
|
var notification_count = notification_count_el ? parseInt(notification_count_el.textContent) : 0;
|
||||||
}
|
helpers.storage.set(STORAGE_KEY_NOTIF_COUNT, notification_count);
|
||||||
|
|
||||||
|
if (helpers.storage.get(STORAGE_KEY_STREAM))
|
||||||
|
helpers.storage.remove(STORAGE_KEY_STREAM);
|
||||||
|
start_stream_if_needed();
|
||||||
|
});
|
||||||
|
|
||||||
|
addEventListener('unload', function () {
|
||||||
|
// let chance to other tabs to be a streamer via firing 'storage' event
|
||||||
|
if (notifications) helpers.storage.remove(STORAGE_KEY_STREAM);
|
||||||
});
|
});
|
||||||
|
@ -42,27 +42,37 @@ embed_url = location.origin + '/embed/' + video_data.id + embed_url.search;
|
|||||||
var save_player_pos_key = 'save_player_pos';
|
var save_player_pos_key = 'save_player_pos';
|
||||||
|
|
||||||
videojs.Vhs.xhr.beforeRequest = function(options) {
|
videojs.Vhs.xhr.beforeRequest = function(options) {
|
||||||
if (options.uri.indexOf('videoplayback') === -1 && options.uri.indexOf('local=true') === -1) {
|
// set local if requested not videoplayback
|
||||||
options.uri = options.uri + '?local=true';
|
if (!options.uri.includes('videoplayback')) {
|
||||||
|
if (!options.uri.includes('local=true'))
|
||||||
|
options.uri += '?local=true';
|
||||||
}
|
}
|
||||||
return options;
|
return options;
|
||||||
};
|
};
|
||||||
|
|
||||||
var player = videojs('player', options);
|
var player = videojs('player', options);
|
||||||
|
|
||||||
player.on('error', () => {
|
player.on('error', function () {
|
||||||
if (video_data.params.quality !== 'dash') {
|
if (video_data.params.quality === 'dash') return;
|
||||||
if (!player.currentSrc().includes("local=true") && !video_data.local_disabled) {
|
|
||||||
var currentSources = player.currentSources();
|
|
||||||
for (var i = 0; i < currentSources.length; i++) {
|
|
||||||
currentSources[i]["src"] += "&local=true"
|
|
||||||
}
|
|
||||||
player.src(currentSources)
|
|
||||||
}
|
|
||||||
else if (player.error().code === 2 || player.error().code === 4) {
|
|
||||||
setTimeout(function (event) {
|
|
||||||
console.log('An error occurred in the player, reloading...');
|
|
||||||
|
|
||||||
|
var localNotDisabled = (
|
||||||
|
!player.currentSrc().includes('local=true') && !video_data.local_disabled
|
||||||
|
);
|
||||||
|
var reloadMakesSense = (
|
||||||
|
player.error().code === MediaError.MEDIA_ERR_NETWORK ||
|
||||||
|
player.error().code === MediaError.MEDIA_ERR_SRC_NOT_SUPPORTED
|
||||||
|
);
|
||||||
|
|
||||||
|
if (localNotDisabled) {
|
||||||
|
// add local=true to all current sources
|
||||||
|
player.src(player.currentSources().map(function (source) {
|
||||||
|
source.src += '&local=true';
|
||||||
|
}));
|
||||||
|
} else if (reloadMakesSense) {
|
||||||
|
setTimeout(function () {
|
||||||
|
console.warn('An error occurred in the player, reloading...');
|
||||||
|
|
||||||
|
// After load() all parameters are reset. Save them
|
||||||
var currentTime = player.currentTime();
|
var currentTime = player.currentTime();
|
||||||
var playbackRate = player.playbackRate();
|
var playbackRate = player.playbackRate();
|
||||||
var paused = player.paused();
|
var paused = player.paused();
|
||||||
@ -73,14 +83,12 @@ player.on('error', () => {
|
|||||||
|
|
||||||
player.currentTime(currentTime);
|
player.currentTime(currentTime);
|
||||||
player.playbackRate(playbackRate);
|
player.playbackRate(playbackRate);
|
||||||
|
|
||||||
if (!paused) player.play();
|
if (!paused) player.play();
|
||||||
}, 10000);
|
}, 5000);
|
||||||
}
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
if (video_data.params.quality == 'dash') {
|
if (video_data.params.quality === 'dash') {
|
||||||
player.reloadSourceOnError({
|
player.reloadSourceOnError({
|
||||||
errorInterval: 10
|
errorInterval: 10
|
||||||
});
|
});
|
||||||
@ -89,7 +97,7 @@ if (video_data.params.quality == 'dash') {
|
|||||||
/**
|
/**
|
||||||
* Function for add time argument to url
|
* Function for add time argument to url
|
||||||
* @param {String} url
|
* @param {String} url
|
||||||
* @returns urlWithTimeArg
|
* @returns {URL} urlWithTimeArg
|
||||||
*/
|
*/
|
||||||
function addCurrentTimeToURL(url) {
|
function addCurrentTimeToURL(url) {
|
||||||
var urlUsed = new URL(url);
|
var urlUsed = new URL(url);
|
||||||
@ -112,18 +120,12 @@ var shareOptions = {
|
|||||||
description: player_data.description,
|
description: player_data.description,
|
||||||
image: player_data.thumbnail,
|
image: player_data.thumbnail,
|
||||||
get embedCode() {
|
get embedCode() {
|
||||||
return '<iframe id="ivplayer" width="640" height="360" src="' +
|
// Single quotes inside here required. HTML inserted as is into value attribute of input
|
||||||
addCurrentTimeToURL(embed_url) + '" style="border:none;"></iframe>';
|
return "<iframe id='ivplayer' width='640' height='360' src='" +
|
||||||
|
addCurrentTimeToURL(embed_url) + "' style='border:none;'></iframe>";
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const storage = (function () {
|
|
||||||
try { if (localStorage.length !== -1) return localStorage; }
|
|
||||||
catch (e) { console.info('No storage available: ' + e); }
|
|
||||||
|
|
||||||
return undefined;
|
|
||||||
})();
|
|
||||||
|
|
||||||
if (location.pathname.startsWith('/embed/')) {
|
if (location.pathname.startsWith('/embed/')) {
|
||||||
var overlay_content = '<h1><a rel="noopener" target="_blank" href="' + location.origin + '/watch?v=' + video_data.id + '">' + player_data.title + '</a></h1>';
|
var overlay_content = '<h1><a rel="noopener" target="_blank" href="' + location.origin + '/watch?v=' + video_data.id + '">' + player_data.title + '</a></h1>';
|
||||||
player.overlay({
|
player.overlay({
|
||||||
@ -162,7 +164,7 @@ if (isMobile()) {
|
|||||||
buttons.forEach(function (child) {primary_control_bar.removeChild(child);});
|
buttons.forEach(function (child) {primary_control_bar.removeChild(child);});
|
||||||
|
|
||||||
var operations_bar_element = operations_bar.el();
|
var operations_bar_element = operations_bar.el();
|
||||||
operations_bar_element.className += ' mobile-operations-bar';
|
operations_bar_element.classList.add('mobile-operations-bar');
|
||||||
player.addChild(operations_bar);
|
player.addChild(operations_bar);
|
||||||
|
|
||||||
// Playback menu doesn't work when it's initialized outside of the primary control bar
|
// Playback menu doesn't work when it's initialized outside of the primary control bar
|
||||||
@ -220,14 +222,14 @@ player.playbackRate(video_data.params.speed);
|
|||||||
* Method for getting the contents of a cookie
|
* Method for getting the contents of a cookie
|
||||||
*
|
*
|
||||||
* @param {String} name Name of cookie
|
* @param {String} name Name of cookie
|
||||||
* @returns cookieValue
|
* @returns {String|null} cookieValue
|
||||||
*/
|
*/
|
||||||
function getCookieValue(name) {
|
function getCookieValue(name) {
|
||||||
var value = document.cookie.split(';').filter(function (item) {return item.includes(name + '=');});
|
var cookiePrefix = name + '=';
|
||||||
|
var matchedCookie = document.cookie.split(';').find(function (item) {return item.includes(cookiePrefix);});
|
||||||
return (value.length >= 1)
|
if (matchedCookie)
|
||||||
? value[0].substring((name + '=').length, value[0].length)
|
return matchedCookie.replace(cookiePrefix, '');
|
||||||
: null;
|
return null;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@ -257,11 +259,11 @@ function updateCookie(newVolume, newSpeed) {
|
|||||||
date.setTime(date.getTime() + 63115200);
|
date.setTime(date.getTime() + 63115200);
|
||||||
|
|
||||||
var ipRegex = /^((\d+\.){3}\d+|[A-Fa-f0-9]*:[A-Fa-f0-9:]*:[A-Fa-f0-9:]+)$/;
|
var ipRegex = /^((\d+\.){3}\d+|[A-Fa-f0-9]*:[A-Fa-f0-9:]*:[A-Fa-f0-9:]+)$/;
|
||||||
var domainUsed = window.location.hostname;
|
var domainUsed = location.hostname;
|
||||||
|
|
||||||
// Fix for a bug in FF where the leading dot in the FQDN is not ignored
|
// Fix for a bug in FF where the leading dot in the FQDN is not ignored
|
||||||
if (domainUsed.charAt(0) !== '.' && !ipRegex.test(domainUsed) && domainUsed !== 'localhost')
|
if (domainUsed.charAt(0) !== '.' && !ipRegex.test(domainUsed) && domainUsed !== 'localhost')
|
||||||
domainUsed = '.' + window.location.hostname;
|
domainUsed = '.' + location.hostname;
|
||||||
|
|
||||||
document.cookie = 'PREFS=' + cookieData + '; SameSite=Strict; path=/; domain=' +
|
document.cookie = 'PREFS=' + cookieData + '; SameSite=Strict; path=/; domain=' +
|
||||||
domainUsed + '; expires=' + date.toGMTString() + ';';
|
domainUsed + '; expires=' + date.toGMTString() + ';';
|
||||||
@ -280,7 +282,7 @@ player.on('volumechange', function () {
|
|||||||
|
|
||||||
player.on('waiting', function () {
|
player.on('waiting', function () {
|
||||||
if (player.playbackRate() > 1 && player.liveTracker.isLive() && player.liveTracker.atLiveEdge()) {
|
if (player.playbackRate() > 1 && player.liveTracker.isLive() && player.liveTracker.atLiveEdge()) {
|
||||||
console.info('Player has caught up to source, resetting playbackRate.');
|
console.info('Player has caught up to source, resetting playbackRate');
|
||||||
player.playbackRate(1);
|
player.playbackRate(1);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
@ -292,12 +294,12 @@ if (video_data.premiere_timestamp && Math.round(new Date() / 1000) < video_data.
|
|||||||
if (video_data.params.save_player_pos) {
|
if (video_data.params.save_player_pos) {
|
||||||
const url = new URL(location);
|
const url = new URL(location);
|
||||||
const hasTimeParam = url.searchParams.has('t');
|
const hasTimeParam = url.searchParams.has('t');
|
||||||
const remeberedTime = get_video_time();
|
const rememberedTime = get_video_time();
|
||||||
let lastUpdated = 0;
|
let lastUpdated = 0;
|
||||||
|
|
||||||
if(!hasTimeParam) set_seconds_after_start(remeberedTime);
|
if(!hasTimeParam) set_seconds_after_start(rememberedTime);
|
||||||
|
|
||||||
const updateTime = function () {
|
player.on('timeupdate', function () {
|
||||||
const raw = player.currentTime();
|
const raw = player.currentTime();
|
||||||
const time = Math.floor(raw);
|
const time = Math.floor(raw);
|
||||||
|
|
||||||
@ -305,9 +307,7 @@ if (video_data.params.save_player_pos) {
|
|||||||
save_video_time(time);
|
save_video_time(time);
|
||||||
lastUpdated = time;
|
lastUpdated = time;
|
||||||
}
|
}
|
||||||
};
|
});
|
||||||
|
|
||||||
player.on('timeupdate', updateTime);
|
|
||||||
}
|
}
|
||||||
else remove_all_video_times();
|
else remove_all_video_times();
|
||||||
|
|
||||||
@ -347,53 +347,31 @@ if (!video_data.params.listen && video_data.params.quality === 'dash') {
|
|||||||
targetQualityLevel = 0;
|
targetQualityLevel = 0;
|
||||||
break;
|
break;
|
||||||
default:
|
default:
|
||||||
const targetHeight = Number.parseInt(video_data.params.quality_dash, 10);
|
const targetHeight = parseInt(video_data.params.quality_dash);
|
||||||
for (let i = 0; i < qualityLevels.length; i++) {
|
for (let i = 0; i < qualityLevels.length; i++) {
|
||||||
if (qualityLevels[i].height <= targetHeight) {
|
if (qualityLevels[i].height <= targetHeight)
|
||||||
targetQualityLevel = i;
|
targetQualityLevel = i;
|
||||||
} else {
|
else
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
qualityLevels.forEach(function (level, index) {
|
||||||
for (let i = 0; i < qualityLevels.length; i++) {
|
level.enabled = (index === targetQualityLevel);
|
||||||
qualityLevels[i].enabled = (i === targetQualityLevel);
|
});
|
||||||
}
|
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
player.vttThumbnails({
|
player.vttThumbnails({
|
||||||
src: location.origin + '/api/v1/storyboards/' + video_data.id + '?height=90',
|
src: '/api/v1/storyboards/' + video_data.id + '?height=90',
|
||||||
showTimestamp: true
|
showTimestamp: true
|
||||||
});
|
});
|
||||||
|
|
||||||
// Enable annotations
|
// Enable annotations
|
||||||
if (!video_data.params.listen && video_data.params.annotations) {
|
if (!video_data.params.listen && video_data.params.annotations) {
|
||||||
window.addEventListener('load', function (e) {
|
addEventListener('load', function (e) {
|
||||||
var video_container = document.getElementById('player');
|
addEventListener('__ar_annotation_click', function (e) {
|
||||||
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()) {
|
|
||||||
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', function (e) {
|
|
||||||
const url = e.detail.url,
|
const url = e.detail.url,
|
||||||
target = e.detail.target,
|
target = e.detail.target,
|
||||||
seconds = e.detail.seconds;
|
seconds = e.detail.seconds;
|
||||||
@ -406,41 +384,48 @@ if (!video_data.params.listen && video_data.params.annotations) {
|
|||||||
path = path.pathname + path.search;
|
path = path.pathname + path.search;
|
||||||
|
|
||||||
if (target === 'current') {
|
if (target === 'current') {
|
||||||
window.location.href = path;
|
location.href = path;
|
||||||
} else if (target === 'new') {
|
} else if (target === 'new') {
|
||||||
window.open(path, '_blank');
|
open(path, '_blank');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
helpers.xhr('GET', '/api/v1/annotations/' + video_data.id, {
|
||||||
|
responseType: 'text',
|
||||||
|
timeout: 60000
|
||||||
|
}, {
|
||||||
|
on200: function (response) {
|
||||||
|
var video_container = document.getElementById('player');
|
||||||
|
videojs.registerPlugin('youtubeAnnotationsPlugin', youtubeAnnotationsPlugin);
|
||||||
|
if (player.paused()) {
|
||||||
|
player.one('play', function (event) {
|
||||||
|
player.youtubeAnnotationsPlugin({ annotationXml: response, videoContainer: video_container });
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
player.youtubeAnnotationsPlugin({ annotationXml: response, videoContainer: video_container });
|
||||||
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
xhr.send();
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
function increase_volume(delta) {
|
function change_volume(delta) {
|
||||||
const curVolume = player.volume();
|
const curVolume = player.volume();
|
||||||
let newVolume = curVolume + delta;
|
let newVolume = curVolume + delta;
|
||||||
if (newVolume > 1) {
|
newVolume = helpers.clamp(newVolume, 0, 1);
|
||||||
newVolume = 1;
|
|
||||||
} else if (newVolume < 0) {
|
|
||||||
newVolume = 0;
|
|
||||||
}
|
|
||||||
player.volume(newVolume);
|
player.volume(newVolume);
|
||||||
}
|
}
|
||||||
|
|
||||||
function toggle_muted() {
|
function toggle_muted() {
|
||||||
const isMuted = player.muted();
|
player.muted(!player.muted());
|
||||||
player.muted(!isMuted);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function skip_seconds(delta) {
|
function skip_seconds(delta) {
|
||||||
const duration = player.duration();
|
const duration = player.duration();
|
||||||
const curTime = player.currentTime();
|
const curTime = player.currentTime();
|
||||||
let newTime = curTime + delta;
|
let newTime = curTime + delta;
|
||||||
if (newTime > duration) {
|
newTime = helpers.clamp(newTime, 0, duration);
|
||||||
newTime = duration;
|
|
||||||
} else if (newTime < 0) {
|
|
||||||
newTime = 0;
|
|
||||||
}
|
|
||||||
player.currentTime(newTime);
|
player.currentTime(newTime);
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -450,57 +435,21 @@ function set_seconds_after_start(delta) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function save_video_time(seconds) {
|
function save_video_time(seconds) {
|
||||||
const videoId = video_data.id;
|
|
||||||
const all_video_times = get_all_video_times();
|
const all_video_times = get_all_video_times();
|
||||||
|
all_video_times[video_data.id] = seconds;
|
||||||
all_video_times[videoId] = seconds;
|
helpers.storage.set(save_player_pos_key, all_video_times);
|
||||||
|
|
||||||
set_all_video_times(all_video_times);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function get_video_time() {
|
function get_video_time() {
|
||||||
try {
|
return get_all_video_times()[video_data.id] || 0;
|
||||||
const videoId = video_data.id;
|
|
||||||
const all_video_times = get_all_video_times();
|
|
||||||
const timestamp = all_video_times[videoId];
|
|
||||||
|
|
||||||
return timestamp || 0;
|
|
||||||
}
|
|
||||||
catch (e) {
|
|
||||||
return 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function set_all_video_times(times) {
|
|
||||||
if (storage) {
|
|
||||||
if (times) {
|
|
||||||
try {
|
|
||||||
storage.setItem(save_player_pos_key, JSON.stringify(times));
|
|
||||||
} catch (e) {
|
|
||||||
console.warn('set_all_video_times: ' + e);
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
storage.removeItem(save_player_pos_key);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function get_all_video_times() {
|
function get_all_video_times() {
|
||||||
if (storage) {
|
return helpers.storage.get(save_player_pos_key) || {};
|
||||||
const raw = storage.getItem(save_player_pos_key);
|
|
||||||
if (raw !== null) {
|
|
||||||
try {
|
|
||||||
return JSON.parse(raw);
|
|
||||||
} catch (e) {
|
|
||||||
console.warn('get_all_video_times: ' + e);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return {};
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function remove_all_video_times() {
|
function remove_all_video_times() {
|
||||||
set_all_video_times(null);
|
helpers.storage.remove(save_player_pos_key);
|
||||||
}
|
}
|
||||||
|
|
||||||
function set_time_percent(percent) {
|
function set_time_percent(percent) {
|
||||||
@ -516,21 +465,23 @@ function toggle_play() { player.paused() ? play() : pause(); }
|
|||||||
|
|
||||||
const toggle_captions = (function () {
|
const toggle_captions = (function () {
|
||||||
let toggledTrack = null;
|
let toggledTrack = null;
|
||||||
const onChange = function (e) {
|
|
||||||
|
function bindChange(onOrOff) {
|
||||||
|
player.textTracks()[onOrOff]('change', function (e) {
|
||||||
toggledTrack = null;
|
toggledTrack = null;
|
||||||
};
|
});
|
||||||
const bindChange = function (onOrOff) {
|
}
|
||||||
player.textTracks()[onOrOff]('change', onChange);
|
|
||||||
};
|
|
||||||
// Wrapper function to ignore our own emitted events and only listen
|
// Wrapper function to ignore our own emitted events and only listen
|
||||||
// to events emitted by Video.js on click on the captions menu items.
|
// to events emitted by Video.js on click on the captions menu items.
|
||||||
const setMode = function (track, mode) {
|
function setMode(track, mode) {
|
||||||
bindChange('off');
|
bindChange('off');
|
||||||
track.mode = mode;
|
track.mode = mode;
|
||||||
window.setTimeout(function () {
|
setTimeout(function () {
|
||||||
bindChange('on');
|
bindChange('on');
|
||||||
}, 0);
|
}, 0);
|
||||||
};
|
}
|
||||||
|
|
||||||
bindChange('on');
|
bindChange('on');
|
||||||
return function () {
|
return function () {
|
||||||
if (toggledTrack !== null) {
|
if (toggledTrack !== null) {
|
||||||
@ -578,15 +529,11 @@ function increase_playback_rate(steps) {
|
|||||||
const maxIndex = options.playbackRates.length - 1;
|
const maxIndex = options.playbackRates.length - 1;
|
||||||
const curIndex = options.playbackRates.indexOf(player.playbackRate());
|
const curIndex = options.playbackRates.indexOf(player.playbackRate());
|
||||||
let newIndex = curIndex + steps;
|
let newIndex = curIndex + steps;
|
||||||
if (newIndex > maxIndex) {
|
newIndex = helpers.clamp(newIndex, 0, maxIndex);
|
||||||
newIndex = maxIndex;
|
|
||||||
} else if (newIndex < 0) {
|
|
||||||
newIndex = 0;
|
|
||||||
}
|
|
||||||
player.playbackRate(options.playbackRates[newIndex]);
|
player.playbackRate(options.playbackRates[newIndex]);
|
||||||
}
|
}
|
||||||
|
|
||||||
window.addEventListener('keydown', function (e) {
|
addEventListener('keydown', function (e) {
|
||||||
if (e.target.tagName.toLowerCase() === 'input') {
|
if (e.target.tagName.toLowerCase() === 'input') {
|
||||||
// Ignore input when focus is on certain elements, e.g. form fields.
|
// Ignore input when focus is on certain elements, e.g. form fields.
|
||||||
return;
|
return;
|
||||||
@ -619,10 +566,10 @@ window.addEventListener('keydown', function (e) {
|
|||||||
case 'MediaStop': action = stop; break;
|
case 'MediaStop': action = stop; break;
|
||||||
|
|
||||||
case 'ArrowUp':
|
case 'ArrowUp':
|
||||||
if (isPlayerFocused) action = increase_volume.bind(this, 0.1);
|
if (isPlayerFocused) action = change_volume.bind(this, 0.1);
|
||||||
break;
|
break;
|
||||||
case 'ArrowDown':
|
case 'ArrowDown':
|
||||||
if (isPlayerFocused) action = increase_volume.bind(this, -0.1);
|
if (isPlayerFocused) action = change_volume.bind(this, -0.1);
|
||||||
break;
|
break;
|
||||||
|
|
||||||
case 'm':
|
case 'm':
|
||||||
@ -673,12 +620,11 @@ window.addEventListener('keydown', function (e) {
|
|||||||
// TODO: Add support to play back previous video.
|
// TODO: Add support to play back previous video.
|
||||||
break;
|
break;
|
||||||
|
|
||||||
case '.':
|
// TODO: More precise step. Now FPS is taken equal to 29.97
|
||||||
// TODO: Add support for next-frame-stepping.
|
// Common FPS: https://forum.videohelp.com/threads/81868#post323588
|
||||||
break;
|
// Possible solution is new HTMLVideoElement.requestVideoFrameCallback() https://wicg.github.io/video-rvfc/
|
||||||
case ',':
|
case ',': action = function () { pause(); skip_seconds(-1/29.97); }; break;
|
||||||
// TODO: Add support for previous-frame-stepping.
|
case '.': action = function () { pause(); skip_seconds( 1/29.97); }; break;
|
||||||
break;
|
|
||||||
|
|
||||||
case '>': action = increase_playback_rate.bind(this, 1); break;
|
case '>': action = increase_playback_rate.bind(this, 1); break;
|
||||||
case '<': action = increase_playback_rate.bind(this, -1); break;
|
case '<': action = increase_playback_rate.bind(this, -1); break;
|
||||||
@ -697,10 +643,6 @@ window.addEventListener('keydown', function (e) {
|
|||||||
// Add support for controlling the player volume by scrolling over it. Adapted from
|
// 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
|
// https://github.com/ctd1500/videojs-hotkeys/blob/bb4a158b2e214ccab87c2e7b95f42bc45c6bfd87/videojs.hotkeys.js#L292-L328
|
||||||
(function () {
|
(function () {
|
||||||
const volumeStep = 0.05;
|
|
||||||
const enableVolumeScroll = true;
|
|
||||||
const enableHoverScroll = true;
|
|
||||||
const doc = document;
|
|
||||||
const pEl = document.getElementById('player');
|
const pEl = document.getElementById('player');
|
||||||
|
|
||||||
var volumeHover = false;
|
var volumeHover = false;
|
||||||
@ -710,39 +652,23 @@ window.addEventListener('keydown', function (e) {
|
|||||||
volumeSelector.onmouseout = function () { volumeHover = false; };
|
volumeSelector.onmouseout = function () { volumeHover = false; };
|
||||||
}
|
}
|
||||||
|
|
||||||
var mouseScroll = function mouseScroll(event) {
|
function mouseScroll(event) {
|
||||||
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
|
// When controls are disabled, hotkeys will be disabled as well
|
||||||
if (player.controls()) {
|
if (!player.controls() || !volumeHover) return;
|
||||||
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) {
|
event.preventDefault();
|
||||||
increase_volume(volumeStep);
|
var wheelMove = event.wheelDelta || -event.detail;
|
||||||
} else if (delta === -1) {
|
var volumeSign = Math.sign(wheelMove);
|
||||||
increase_volume(-volumeStep);
|
|
||||||
|
change_volume(volumeSign * 0.05); // decrease/increase by 5%
|
||||||
}
|
}
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
player.on('mousewheel', mouseScroll);
|
player.on('mousewheel', mouseScroll);
|
||||||
player.on('DOMMouseScroll', mouseScroll);
|
player.on('DOMMouseScroll', mouseScroll);
|
||||||
}());
|
}());
|
||||||
|
|
||||||
// Since videojs-share can sometimes be blocked, we defer it until last
|
// Since videojs-share can sometimes be blocked, we defer it until last
|
||||||
if (player.share) {
|
if (player.share) player.share(shareOptions);
|
||||||
player.share(shareOptions);
|
|
||||||
}
|
|
||||||
|
|
||||||
// show the preferred caption by default
|
// show the preferred caption by default
|
||||||
if (player_data.preferred_caption_found) {
|
if (player_data.preferred_caption_found) {
|
||||||
@ -763,7 +689,7 @@ if (navigator.vendor === 'Apple Computer, Inc.' && video_data.params.listen) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
// Watch on Invidious link
|
// Watch on Invidious link
|
||||||
if (window.location.pathname.startsWith('/embed/')) {
|
if (location.pathname.startsWith('/embed/')) {
|
||||||
const Button = videojs.getComponent('Button');
|
const Button = videojs.getComponent('Button');
|
||||||
let watch_on_invidious_button = new Button(player);
|
let watch_on_invidious_button = new Button(player);
|
||||||
|
|
||||||
@ -778,3 +704,11 @@ if (window.location.pathname.startsWith('/embed/')) {
|
|||||||
var cb = player.getChild('ControlBar');
|
var cb = player.getChild('ControlBar');
|
||||||
cb.addChild(watch_on_invidious_button);
|
cb.addChild(watch_on_invidious_button);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
addEventListener('DOMContentLoaded', function () {
|
||||||
|
// Save time during redirection on another instance
|
||||||
|
const changeInstanceLink = document.querySelector('#watch-on-another-invidious-instance > a');
|
||||||
|
if (changeInstanceLink) changeInstanceLink.addEventListener('click', function () {
|
||||||
|
changeInstanceLink.href = addCurrentTimeToURL(changeInstanceLink.href);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
@ -1,5 +1,6 @@
|
|||||||
'use strict';
|
'use strict';
|
||||||
var playlist_data = JSON.parse(document.getElementById('playlist_data').textContent);
|
var playlist_data = JSON.parse(document.getElementById('playlist_data').textContent);
|
||||||
|
var payload = 'csrf_token=' + playlist_data.csrf_token;
|
||||||
|
|
||||||
function add_playlist_video(target) {
|
function add_playlist_video(target) {
|
||||||
var select = target.parentNode.children[0].children[1];
|
var select = target.parentNode.children[0].children[1];
|
||||||
@ -8,21 +9,12 @@ function add_playlist_video(target) {
|
|||||||
var url = '/playlist_ajax?action_add_video=1&redirect=false' +
|
var url = '/playlist_ajax?action_add_video=1&redirect=false' +
|
||||||
'&video_id=' + target.getAttribute('data-id') +
|
'&video_id=' + target.getAttribute('data-id') +
|
||||||
'&playlist_id=' + option.getAttribute('data-plid');
|
'&playlist_id=' + option.getAttribute('data-plid');
|
||||||
var xhr = new XMLHttpRequest();
|
|
||||||
xhr.responseType = 'json';
|
|
||||||
xhr.timeout = 10000;
|
|
||||||
xhr.open('POST', url, true);
|
|
||||||
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
|
|
||||||
|
|
||||||
xhr.onreadystatechange = function () {
|
helpers.xhr('POST', url, {payload: payload}, {
|
||||||
if (xhr.readyState === 4) {
|
on200: function (response) {
|
||||||
if (xhr.status === 200) {
|
option.textContent = '✓' + option.textContent;
|
||||||
option.innerText = '✓' + option.innerText;
|
|
||||||
}
|
}
|
||||||
}
|
});
|
||||||
};
|
|
||||||
|
|
||||||
xhr.send('csrf_token=' + playlist_data.csrf_token);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function add_playlist_item(target) {
|
function add_playlist_item(target) {
|
||||||
@ -32,21 +24,12 @@ function add_playlist_item(target) {
|
|||||||
var url = '/playlist_ajax?action_add_video=1&redirect=false' +
|
var url = '/playlist_ajax?action_add_video=1&redirect=false' +
|
||||||
'&video_id=' + target.getAttribute('data-id') +
|
'&video_id=' + target.getAttribute('data-id') +
|
||||||
'&playlist_id=' + target.getAttribute('data-plid');
|
'&playlist_id=' + target.getAttribute('data-plid');
|
||||||
var xhr = new XMLHttpRequest();
|
|
||||||
xhr.responseType = 'json';
|
|
||||||
xhr.timeout = 10000;
|
|
||||||
xhr.open('POST', url, true);
|
|
||||||
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
|
|
||||||
|
|
||||||
xhr.onreadystatechange = function () {
|
helpers.xhr('POST', url, {payload: payload}, {
|
||||||
if (xhr.readyState === 4) {
|
onNon200: function (xhr) {
|
||||||
if (xhr.status !== 200) {
|
|
||||||
tile.style.display = '';
|
tile.style.display = '';
|
||||||
}
|
}
|
||||||
}
|
});
|
||||||
};
|
|
||||||
|
|
||||||
xhr.send('csrf_token=' + playlist_data.csrf_token);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function remove_playlist_item(target) {
|
function remove_playlist_item(target) {
|
||||||
@ -56,19 +39,10 @@ function remove_playlist_item(target) {
|
|||||||
var url = '/playlist_ajax?action_remove_video=1&redirect=false' +
|
var url = '/playlist_ajax?action_remove_video=1&redirect=false' +
|
||||||
'&set_video_id=' + target.getAttribute('data-index') +
|
'&set_video_id=' + target.getAttribute('data-index') +
|
||||||
'&playlist_id=' + target.getAttribute('data-plid');
|
'&playlist_id=' + target.getAttribute('data-plid');
|
||||||
var xhr = new XMLHttpRequest();
|
|
||||||
xhr.responseType = 'json';
|
|
||||||
xhr.timeout = 10000;
|
|
||||||
xhr.open('POST', url, true);
|
|
||||||
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
|
|
||||||
|
|
||||||
xhr.onreadystatechange = function () {
|
helpers.xhr('POST', url, {payload: payload}, {
|
||||||
if (xhr.readyState === 4) {
|
onNon200: function (xhr) {
|
||||||
if (xhr.status !== 200) {
|
|
||||||
tile.style.display = '';
|
tile.style.display = '';
|
||||||
}
|
}
|
||||||
}
|
});
|
||||||
};
|
|
||||||
|
|
||||||
xhr.send('csrf_token=' + playlist_data.csrf_token);
|
|
||||||
}
|
}
|
||||||
|
@ -1,8 +1,9 @@
|
|||||||
'use strict';
|
'use strict';
|
||||||
var subscribe_data = JSON.parse(document.getElementById('subscribe_data').textContent);
|
var subscribe_data = JSON.parse(document.getElementById('subscribe_data').textContent);
|
||||||
|
var payload = 'csrf_token=' + subscribe_data.csrf_token;
|
||||||
|
|
||||||
var subscribe_button = document.getElementById('subscribe');
|
var subscribe_button = document.getElementById('subscribe');
|
||||||
subscribe_button.parentNode['action'] = 'javascript:void(0)';
|
subscribe_button.parentNode.action = 'javascript:void(0)';
|
||||||
|
|
||||||
if (subscribe_button.getAttribute('data-type') === 'subscribe') {
|
if (subscribe_button.getAttribute('data-type') === 'subscribe') {
|
||||||
subscribe_button.onclick = subscribe;
|
subscribe_button.onclick = subscribe;
|
||||||
@ -10,87 +11,34 @@ if (subscribe_button.getAttribute('data-type') === 'subscribe') {
|
|||||||
subscribe_button.onclick = unsubscribe;
|
subscribe_button.onclick = unsubscribe;
|
||||||
}
|
}
|
||||||
|
|
||||||
function subscribe(retries) {
|
function subscribe() {
|
||||||
if (retries === undefined) retries = 5;
|
|
||||||
|
|
||||||
if (retries <= 0) {
|
|
||||||
console.warn('Failed to subscribe.');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
var url = '/subscription_ajax?action_create_subscription_to_channel=1&redirect=false' +
|
|
||||||
'&c=' + subscribe_data.ucid;
|
|
||||||
var xhr = new XMLHttpRequest();
|
|
||||||
xhr.responseType = 'json';
|
|
||||||
xhr.timeout = 10000;
|
|
||||||
xhr.open('POST', url, true);
|
|
||||||
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
|
|
||||||
|
|
||||||
var fallback = subscribe_button.innerHTML;
|
var fallback = subscribe_button.innerHTML;
|
||||||
subscribe_button.onclick = unsubscribe;
|
subscribe_button.onclick = unsubscribe;
|
||||||
subscribe_button.innerHTML = '<b>' + subscribe_data.unsubscribe_text + ' | ' + subscribe_data.sub_count_text + '</b>';
|
subscribe_button.innerHTML = '<b>' + subscribe_data.unsubscribe_text + ' | ' + subscribe_data.sub_count_text + '</b>';
|
||||||
|
|
||||||
xhr.onreadystatechange = function () {
|
var url = '/subscription_ajax?action_create_subscription_to_channel=1&redirect=false' +
|
||||||
if (xhr.readyState === 4) {
|
'&c=' + subscribe_data.ucid;
|
||||||
if (xhr.status !== 200) {
|
|
||||||
|
helpers.xhr('POST', url, {payload: payload, retries: 5, entity_name: 'subscribe request'}, {
|
||||||
|
onNon200: function (xhr) {
|
||||||
subscribe_button.onclick = subscribe;
|
subscribe_button.onclick = subscribe;
|
||||||
subscribe_button.innerHTML = fallback;
|
subscribe_button.innerHTML = fallback;
|
||||||
}
|
}
|
||||||
}
|
});
|
||||||
};
|
|
||||||
|
|
||||||
xhr.onerror = function () {
|
|
||||||
console.warn('Subscribing failed... ' + retries + '/5');
|
|
||||||
setTimeout(function () { subscribe(retries - 1); }, 1000);
|
|
||||||
};
|
|
||||||
|
|
||||||
xhr.ontimeout = function () {
|
|
||||||
console.warn('Subscribing failed... ' + retries + '/5');
|
|
||||||
subscribe(retries - 1);
|
|
||||||
};
|
|
||||||
|
|
||||||
xhr.send('csrf_token=' + subscribe_data.csrf_token);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function unsubscribe(retries) {
|
function unsubscribe() {
|
||||||
if (retries === undefined)
|
|
||||||
retries = 5;
|
|
||||||
|
|
||||||
if (retries <= 0) {
|
|
||||||
console.warn('Failed to subscribe');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
var url = '/subscription_ajax?action_remove_subscriptions=1&redirect=false' +
|
|
||||||
'&c=' + subscribe_data.ucid;
|
|
||||||
var xhr = new XMLHttpRequest();
|
|
||||||
xhr.responseType = 'json';
|
|
||||||
xhr.timeout = 10000;
|
|
||||||
xhr.open('POST', url, true);
|
|
||||||
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
|
|
||||||
|
|
||||||
var fallback = subscribe_button.innerHTML;
|
var fallback = subscribe_button.innerHTML;
|
||||||
subscribe_button.onclick = subscribe;
|
subscribe_button.onclick = subscribe;
|
||||||
subscribe_button.innerHTML = '<b>' + subscribe_data.subscribe_text + ' | ' + subscribe_data.sub_count_text + '</b>';
|
subscribe_button.innerHTML = '<b>' + subscribe_data.subscribe_text + ' | ' + subscribe_data.sub_count_text + '</b>';
|
||||||
|
|
||||||
xhr.onreadystatechange = function () {
|
var url = '/subscription_ajax?action_remove_subscriptions=1&redirect=false' +
|
||||||
if (xhr.readyState === 4) {
|
'&c=' + subscribe_data.ucid;
|
||||||
if (xhr.status !== 200) {
|
|
||||||
|
helpers.xhr('POST', url, {payload: payload, retries: 5, entity_name: 'unsubscribe request'}, {
|
||||||
|
onNon200: function (xhr) {
|
||||||
subscribe_button.onclick = unsubscribe;
|
subscribe_button.onclick = unsubscribe;
|
||||||
subscribe_button.innerHTML = fallback;
|
subscribe_button.innerHTML = fallback;
|
||||||
}
|
}
|
||||||
}
|
});
|
||||||
};
|
|
||||||
|
|
||||||
xhr.onerror = function () {
|
|
||||||
console.warn('Unsubscribing failed... ' + retries + '/5');
|
|
||||||
setTimeout(function () { unsubscribe(retries - 1); }, 1000);
|
|
||||||
};
|
|
||||||
|
|
||||||
xhr.ontimeout = function () {
|
|
||||||
console.warn('Unsubscribing failed... ' + retries + '/5');
|
|
||||||
unsubscribe(retries - 1);
|
|
||||||
};
|
|
||||||
|
|
||||||
xhr.send('csrf_token=' + subscribe_data.csrf_token);
|
|
||||||
}
|
}
|
||||||
|
@ -1,90 +1,44 @@
|
|||||||
'use strict';
|
'use strict';
|
||||||
var toggle_theme = document.getElementById('toggle_theme');
|
var toggle_theme = document.getElementById('toggle_theme');
|
||||||
toggle_theme.href = 'javascript:void(0);';
|
toggle_theme.href = 'javascript:void(0)';
|
||||||
|
|
||||||
|
const STORAGE_KEY_THEME = 'dark_mode';
|
||||||
|
const THEME_DARK = 'dark';
|
||||||
|
const THEME_LIGHT = 'light';
|
||||||
|
|
||||||
|
// TODO: theme state controlled by system
|
||||||
toggle_theme.addEventListener('click', function () {
|
toggle_theme.addEventListener('click', function () {
|
||||||
var dark_mode = document.body.classList.contains('light-theme');
|
const isDarkTheme = helpers.storage.get(STORAGE_KEY_THEME) === THEME_DARK;
|
||||||
|
const newTheme = isDarkTheme ? THEME_LIGHT : THEME_DARK;
|
||||||
var url = '/toggle_theme?redirect=false';
|
setTheme(newTheme);
|
||||||
var xhr = new XMLHttpRequest();
|
helpers.storage.set(STORAGE_KEY_THEME, newTheme);
|
||||||
xhr.responseType = 'json';
|
helpers.xhr('GET', '/toggle_theme?redirect=false', {}, {});
|
||||||
xhr.timeout = 10000;
|
|
||||||
xhr.open('GET', url, true);
|
|
||||||
|
|
||||||
set_mode(dark_mode);
|
|
||||||
try {
|
|
||||||
window.localStorage.setItem('dark_mode', dark_mode ? 'dark' : 'light');
|
|
||||||
} catch (e) {}
|
|
||||||
|
|
||||||
xhr.send();
|
|
||||||
});
|
});
|
||||||
|
|
||||||
window.addEventListener('storage', function (e) {
|
/** @param {THEME_DARK|THEME_LIGHT} theme */
|
||||||
if (e.key === 'dark_mode') {
|
function setTheme(theme) {
|
||||||
update_mode(e.newValue);
|
// By default body element has .no-theme class that uses OS theme via CSS @media rules
|
||||||
}
|
// It rewrites using hard className below
|
||||||
});
|
if (theme === THEME_DARK) {
|
||||||
|
toggle_theme.children[0].className = 'icon ion-ios-sunny';
|
||||||
window.addEventListener('DOMContentLoaded', function () {
|
document.body.className = 'dark-theme';
|
||||||
const dark_mode = document.getElementById('dark_mode_pref').textContent;
|
|
||||||
try {
|
|
||||||
// Update localStorage if dark mode preference changed on preferences page
|
|
||||||
window.localStorage.setItem('dark_mode', dark_mode);
|
|
||||||
} catch (e) {}
|
|
||||||
update_mode(dark_mode);
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
var darkScheme = window.matchMedia('(prefers-color-scheme: dark)');
|
|
||||||
var lightScheme = window.matchMedia('(prefers-color-scheme: light)');
|
|
||||||
|
|
||||||
darkScheme.addListener(scheme_switch);
|
|
||||||
lightScheme.addListener(scheme_switch);
|
|
||||||
|
|
||||||
function scheme_switch (e) {
|
|
||||||
// ignore this method if we have a preference set
|
|
||||||
try {
|
|
||||||
if (localStorage.getItem('dark_mode')) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
} catch (exception) {}
|
|
||||||
if (e.matches) {
|
|
||||||
if (e.media.includes('dark')) {
|
|
||||||
set_mode(true);
|
|
||||||
} else if (e.media.includes('light')) {
|
|
||||||
set_mode(false);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function set_mode (bool) {
|
|
||||||
if (bool) {
|
|
||||||
// dark
|
|
||||||
toggle_theme.children[0].setAttribute('class', 'icon ion-ios-sunny');
|
|
||||||
document.body.classList.remove('no-theme');
|
|
||||||
document.body.classList.remove('light-theme');
|
|
||||||
document.body.classList.add('dark-theme');
|
|
||||||
} else {
|
} else {
|
||||||
// light
|
toggle_theme.children[0].className = 'icon ion-ios-moon';
|
||||||
toggle_theme.children[0].setAttribute('class', 'icon ion-ios-moon');
|
document.body.className = 'light-theme';
|
||||||
document.body.classList.remove('no-theme');
|
|
||||||
document.body.classList.remove('dark-theme');
|
|
||||||
document.body.classList.add('light-theme');
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function update_mode (mode) {
|
// Handles theme change event caused by other tab
|
||||||
if (mode === 'true' /* for backwards compatibility */ || mode === 'dark') {
|
addEventListener('storage', function (e) {
|
||||||
// If preference for dark mode indicated
|
if (e.key === STORAGE_KEY_THEME)
|
||||||
set_mode(true);
|
setTheme(helpers.storage.get(STORAGE_KEY_THEME));
|
||||||
|
});
|
||||||
|
|
||||||
|
// Set theme from preferences on page load
|
||||||
|
addEventListener('DOMContentLoaded', function () {
|
||||||
|
const prefTheme = document.getElementById('dark_mode_pref').textContent;
|
||||||
|
if (prefTheme) {
|
||||||
|
setTheme(prefTheme);
|
||||||
|
helpers.storage.set(STORAGE_KEY_THEME, prefTheme);
|
||||||
}
|
}
|
||||||
else if (mode === 'false' /* for backwards compatibility */ || mode === 'light') {
|
});
|
||||||
// If preference for light mode indicated
|
|
||||||
set_mode(false);
|
|
||||||
}
|
|
||||||
else if (document.getElementById('dark_mode_pref').textContent === '' && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
|
||||||
// If no preference indicated here and no preference indicated on the preferences page (backend), but the browser tells us that the operating system has a dark theme
|
|
||||||
set_mode(true);
|
|
||||||
}
|
|
||||||
// else do nothing, falling back to the mode defined by the `dark_mode` preference on the preferences page (backend)
|
|
||||||
}
|
|
||||||
|
@ -1,5 +1,7 @@
|
|||||||
'use strict';
|
'use strict';
|
||||||
var video_data = JSON.parse(document.getElementById('video_data').textContent);
|
var video_data = JSON.parse(document.getElementById('video_data').textContent);
|
||||||
|
var spinnerHTML = '<h3 style="text-align:center"><div class="loading"><i class="icon ion-ios-refresh"></i></div></h3>';
|
||||||
|
var spinnerHTMLwithHR = spinnerHTML + '<hr>';
|
||||||
|
|
||||||
String.prototype.supplant = function (o) {
|
String.prototype.supplant = function (o) {
|
||||||
return this.replace(/{([^{}]*)}/g, function (a, b) {
|
return this.replace(/{([^{}]*)}/g, function (a, b) {
|
||||||
@ -10,24 +12,24 @@ String.prototype.supplant = function (o) {
|
|||||||
|
|
||||||
function toggle_parent(target) {
|
function toggle_parent(target) {
|
||||||
var body = target.parentNode.parentNode.children[1];
|
var body = target.parentNode.parentNode.children[1];
|
||||||
if (body.style.display === null || body.style.display === '') {
|
if (body.style.display === 'none') {
|
||||||
target.textContent = '[ + ]';
|
|
||||||
body.style.display = 'none';
|
|
||||||
} else {
|
|
||||||
target.textContent = '[ − ]';
|
target.textContent = '[ − ]';
|
||||||
body.style.display = '';
|
body.style.display = '';
|
||||||
|
} else {
|
||||||
|
target.textContent = '[ + ]';
|
||||||
|
body.style.display = 'none';
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function toggle_comments(event) {
|
function toggle_comments(event) {
|
||||||
var target = event.target;
|
var target = event.target;
|
||||||
var body = target.parentNode.parentNode.parentNode.children[1];
|
var body = target.parentNode.parentNode.parentNode.children[1];
|
||||||
if (body.style.display === null || body.style.display === '') {
|
if (body.style.display === 'none') {
|
||||||
target.textContent = '[ + ]';
|
|
||||||
body.style.display = 'none';
|
|
||||||
} else {
|
|
||||||
target.textContent = '[ − ]';
|
target.textContent = '[ − ]';
|
||||||
body.style.display = '';
|
body.style.display = '';
|
||||||
|
} else {
|
||||||
|
target.textContent = '[ + ]';
|
||||||
|
body.style.display = 'none';
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -79,56 +81,31 @@ if (continue_button) {
|
|||||||
function next_video() {
|
function next_video() {
|
||||||
var url = new URL('https://example.com/watch?v=' + video_data.next_video);
|
var url = new URL('https://example.com/watch?v=' + video_data.next_video);
|
||||||
|
|
||||||
if (video_data.params.autoplay || video_data.params.continue_autoplay) {
|
if (video_data.params.autoplay || video_data.params.continue_autoplay)
|
||||||
url.searchParams.set('autoplay', '1');
|
url.searchParams.set('autoplay', '1');
|
||||||
}
|
if (video_data.params.listen !== video_data.preferences.listen)
|
||||||
|
|
||||||
if (video_data.params.listen !== video_data.preferences.listen) {
|
|
||||||
url.searchParams.set('listen', video_data.params.listen);
|
url.searchParams.set('listen', video_data.params.listen);
|
||||||
}
|
if (video_data.params.speed !== video_data.preferences.speed)
|
||||||
|
|
||||||
if (video_data.params.speed !== video_data.preferences.speed) {
|
|
||||||
url.searchParams.set('speed', video_data.params.speed);
|
url.searchParams.set('speed', video_data.params.speed);
|
||||||
}
|
if (video_data.params.local !== video_data.preferences.local)
|
||||||
|
|
||||||
if (video_data.params.local !== video_data.preferences.local) {
|
|
||||||
url.searchParams.set('local', video_data.params.local);
|
url.searchParams.set('local', video_data.params.local);
|
||||||
}
|
|
||||||
|
|
||||||
url.searchParams.set('continue', '1');
|
url.searchParams.set('continue', '1');
|
||||||
|
|
||||||
location.assign(url.pathname + url.search);
|
location.assign(url.pathname + url.search);
|
||||||
}
|
}
|
||||||
|
|
||||||
function continue_autoplay(event) {
|
function continue_autoplay(event) {
|
||||||
if (event.target.checked) {
|
if (event.target.checked) {
|
||||||
player.on('ended', function () {
|
player.on('ended', next_video);
|
||||||
next_video();
|
|
||||||
});
|
|
||||||
} else {
|
} else {
|
||||||
player.off('ended');
|
player.off('ended');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function number_with_separator(val) {
|
function get_playlist(plid) {
|
||||||
while (/(\d+)(\d{3})/.test(val.toString())) {
|
|
||||||
val = val.toString().replace(/(\d+)(\d{3})/, '$1' + ',' + '$2');
|
|
||||||
}
|
|
||||||
return val;
|
|
||||||
}
|
|
||||||
|
|
||||||
function get_playlist(plid, retries) {
|
|
||||||
if (retries === undefined) retries = 5;
|
|
||||||
var playlist = document.getElementById('playlist');
|
var playlist = document.getElementById('playlist');
|
||||||
|
|
||||||
if (retries <= 0) {
|
playlist.innerHTML = spinnerHTMLwithHR;
|
||||||
console.warn('Failed to pull playlist');
|
|
||||||
playlist.innerHTML = '';
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
playlist.innerHTML = ' \
|
|
||||||
<h3 style="text-align:center"><div class="loading"><i class="icon ion-ios-refresh"></i></div></h3> \
|
|
||||||
<hr>';
|
|
||||||
|
|
||||||
var plid_url;
|
var plid_url;
|
||||||
if (plid.startsWith('RD')) {
|
if (plid.startsWith('RD')) {
|
||||||
@ -142,99 +119,62 @@ function get_playlist(plid, retries) {
|
|||||||
'&format=html&hl=' + video_data.preferences.locale;
|
'&format=html&hl=' + video_data.preferences.locale;
|
||||||
}
|
}
|
||||||
|
|
||||||
var xhr = new XMLHttpRequest();
|
helpers.xhr('GET', plid_url, {retries: 5, entity_name: 'playlist'}, {
|
||||||
xhr.responseType = 'json';
|
on200: function (response) {
|
||||||
xhr.timeout = 10000;
|
playlist.innerHTML = response.playlistHtml;
|
||||||
xhr.open('GET', plid_url, true);
|
|
||||||
|
|
||||||
xhr.onreadystatechange = function () {
|
if (!response.nextVideo) return;
|
||||||
if (xhr.readyState === 4) {
|
|
||||||
if (xhr.status === 200) {
|
var nextVideo = document.getElementById(response.nextVideo);
|
||||||
playlist.innerHTML = xhr.response.playlistHtml;
|
|
||||||
var nextVideo = document.getElementById(xhr.response.nextVideo);
|
|
||||||
nextVideo.parentNode.parentNode.scrollTop = nextVideo.offsetTop;
|
nextVideo.parentNode.parentNode.scrollTop = nextVideo.offsetTop;
|
||||||
|
|
||||||
if (xhr.response.nextVideo) {
|
|
||||||
player.on('ended', function () {
|
player.on('ended', function () {
|
||||||
var url = new URL('https://example.com/watch?v=' + xhr.response.nextVideo);
|
var url = new URL('https://example.com/watch?v=' + response.nextVideo);
|
||||||
|
|
||||||
url.searchParams.set('list', plid);
|
url.searchParams.set('list', plid);
|
||||||
if (!plid.startsWith('RD')) {
|
if (!plid.startsWith('RD'))
|
||||||
url.searchParams.set('index', xhr.response.index);
|
url.searchParams.set('index', response.index);
|
||||||
}
|
if (video_data.params.autoplay || video_data.params.continue_autoplay)
|
||||||
|
|
||||||
if (video_data.params.autoplay || video_data.params.continue_autoplay) {
|
|
||||||
url.searchParams.set('autoplay', '1');
|
url.searchParams.set('autoplay', '1');
|
||||||
}
|
if (video_data.params.listen !== video_data.preferences.listen)
|
||||||
|
|
||||||
if (video_data.params.listen !== video_data.preferences.listen) {
|
|
||||||
url.searchParams.set('listen', video_data.params.listen);
|
url.searchParams.set('listen', video_data.params.listen);
|
||||||
}
|
if (video_data.params.speed !== video_data.preferences.speed)
|
||||||
|
|
||||||
if (video_data.params.speed !== video_data.preferences.speed) {
|
|
||||||
url.searchParams.set('speed', video_data.params.speed);
|
url.searchParams.set('speed', video_data.params.speed);
|
||||||
}
|
if (video_data.params.local !== video_data.preferences.local)
|
||||||
|
|
||||||
if (video_data.params.local !== video_data.preferences.local) {
|
|
||||||
url.searchParams.set('local', video_data.params.local);
|
url.searchParams.set('local', video_data.params.local);
|
||||||
}
|
|
||||||
|
|
||||||
location.assign(url.pathname + url.search);
|
location.assign(url.pathname + url.search);
|
||||||
});
|
});
|
||||||
}
|
},
|
||||||
} else {
|
onNon200: function (xhr) {
|
||||||
playlist.innerHTML = '';
|
playlist.innerHTML = '';
|
||||||
document.getElementById('continue').style.display = '';
|
document.getElementById('continue').style.display = '';
|
||||||
|
},
|
||||||
|
onError: function (xhr) {
|
||||||
|
playlist.innerHTML = spinnerHTMLwithHR;
|
||||||
|
},
|
||||||
|
onTimeout: function (xhr) {
|
||||||
|
playlist.innerHTML = spinnerHTMLwithHR;
|
||||||
}
|
}
|
||||||
}
|
});
|
||||||
};
|
|
||||||
|
|
||||||
xhr.onerror = function () {
|
|
||||||
playlist = document.getElementById('playlist');
|
|
||||||
playlist.innerHTML =
|
|
||||||
'<h3 style="text-align:center"><div class="loading"><i class="icon ion-ios-refresh"></i></div></h3><hr>';
|
|
||||||
|
|
||||||
console.warn('Pulling playlist timed out... ' + retries + '/5');
|
|
||||||
setTimeout(function () { get_playlist(plid, retries - 1); }, 1000);
|
|
||||||
};
|
|
||||||
|
|
||||||
xhr.ontimeout = function () {
|
|
||||||
playlist = document.getElementById('playlist');
|
|
||||||
playlist.innerHTML =
|
|
||||||
'<h3 style="text-align:center"><div class="loading"><i class="icon ion-ios-refresh"></i></div></h3><hr>';
|
|
||||||
|
|
||||||
console.warn('Pulling playlist timed out... ' + retries + '/5');
|
|
||||||
get_playlist(plid, retries - 1);
|
|
||||||
};
|
|
||||||
|
|
||||||
xhr.send();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function get_reddit_comments(retries) {
|
function get_reddit_comments() {
|
||||||
if (retries === undefined) retries = 5;
|
|
||||||
var comments = document.getElementById('comments');
|
var comments = document.getElementById('comments');
|
||||||
|
|
||||||
if (retries <= 0) {
|
|
||||||
console.warn('Failed to pull comments');
|
|
||||||
comments.innerHTML = '';
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
var fallback = comments.innerHTML;
|
var fallback = comments.innerHTML;
|
||||||
comments.innerHTML =
|
comments.innerHTML = spinnerHTML;
|
||||||
'<h3 style="text-align:center"><div class="loading"><i class="icon ion-ios-refresh"></i></div></h3>';
|
|
||||||
|
|
||||||
var url = '/api/v1/comments/' + video_data.id +
|
var url = '/api/v1/comments/' + video_data.id +
|
||||||
'?source=reddit&format=html' +
|
'?source=reddit&format=html' +
|
||||||
'&hl=' + video_data.preferences.locale;
|
'&hl=' + video_data.preferences.locale;
|
||||||
var xhr = new XMLHttpRequest();
|
|
||||||
xhr.responseType = 'json';
|
|
||||||
xhr.timeout = 10000;
|
|
||||||
xhr.open('GET', url, true);
|
|
||||||
|
|
||||||
xhr.onreadystatechange = function () {
|
var onNon200 = function (xhr) { comments.innerHTML = fallback; };
|
||||||
if (xhr.readyState === 4) {
|
if (video_data.params.comments[1] === 'youtube')
|
||||||
if (xhr.status === 200) {
|
onNon200 = function (xhr) {};
|
||||||
|
|
||||||
|
helpers.xhr('GET', url, {retries: 5, entity_name: ''}, {
|
||||||
|
on200: function (response) {
|
||||||
comments.innerHTML = ' \
|
comments.innerHTML = ' \
|
||||||
<div> \
|
<div> \
|
||||||
<h3> \
|
<h3> \
|
||||||
@ -254,65 +194,37 @@ function get_reddit_comments(retries) {
|
|||||||
</div> \
|
</div> \
|
||||||
<div>{contentHtml}</div> \
|
<div>{contentHtml}</div> \
|
||||||
<hr>'.supplant({
|
<hr>'.supplant({
|
||||||
title: xhr.response.title,
|
title: response.title,
|
||||||
youtubeCommentsText: video_data.youtube_comments_text,
|
youtubeCommentsText: video_data.youtube_comments_text,
|
||||||
redditPermalinkText: video_data.reddit_permalink_text,
|
redditPermalinkText: video_data.reddit_permalink_text,
|
||||||
permalink: xhr.response.permalink,
|
permalink: response.permalink,
|
||||||
contentHtml: xhr.response.contentHtml
|
contentHtml: response.contentHtml
|
||||||
});
|
});
|
||||||
|
|
||||||
comments.children[0].children[0].children[0].onclick = toggle_comments;
|
comments.children[0].children[0].children[0].onclick = toggle_comments;
|
||||||
comments.children[0].children[1].children[0].onclick = swap_comments;
|
comments.children[0].children[1].children[0].onclick = swap_comments;
|
||||||
} else {
|
},
|
||||||
if (video_data.params.comments[1] === 'youtube') {
|
onNon200: onNon200, // declared above
|
||||||
console.warn('Pulling comments failed... ' + retries + '/5');
|
});
|
||||||
setTimeout(function () { get_youtube_comments(retries - 1); }, 1000);
|
|
||||||
} else {
|
|
||||||
comments.innerHTML = fallback;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
xhr.onerror = function () {
|
|
||||||
console.warn('Pulling comments failed... ' + retries + '/5');
|
|
||||||
setTimeout(function () { get_reddit_comments(retries - 1); }, 1000);
|
|
||||||
};
|
|
||||||
|
|
||||||
xhr.ontimeout = function () {
|
|
||||||
console.warn('Pulling comments failed... ' + retries + '/5');
|
|
||||||
get_reddit_comments(retries - 1);
|
|
||||||
};
|
|
||||||
|
|
||||||
xhr.send();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function get_youtube_comments(retries) {
|
function get_youtube_comments() {
|
||||||
if (retries === undefined) retries = 5;
|
|
||||||
var comments = document.getElementById('comments');
|
var comments = document.getElementById('comments');
|
||||||
|
|
||||||
if (retries <= 0) {
|
|
||||||
console.warn('Failed to pull comments');
|
|
||||||
comments.innerHTML = '';
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
var fallback = comments.innerHTML;
|
var fallback = comments.innerHTML;
|
||||||
comments.innerHTML =
|
comments.innerHTML = spinnerHTML;
|
||||||
'<h3 style="text-align:center"><div class="loading"><i class="icon ion-ios-refresh"></i></div></h3>';
|
|
||||||
|
|
||||||
var url = '/api/v1/comments/' + video_data.id +
|
var url = '/api/v1/comments/' + video_data.id +
|
||||||
'?format=html' +
|
'?format=html' +
|
||||||
'&hl=' + video_data.preferences.locale +
|
'&hl=' + video_data.preferences.locale +
|
||||||
'&thin_mode=' + video_data.preferences.thin_mode;
|
'&thin_mode=' + video_data.preferences.thin_mode;
|
||||||
var xhr = new XMLHttpRequest();
|
|
||||||
xhr.responseType = 'json';
|
|
||||||
xhr.timeout = 10000;
|
|
||||||
xhr.open('GET', url, true);
|
|
||||||
|
|
||||||
xhr.onreadystatechange = function () {
|
var onNon200 = function (xhr) { comments.innerHTML = fallback; };
|
||||||
if (xhr.readyState === 4) {
|
if (video_data.params.comments[1] === 'youtube')
|
||||||
if (xhr.status === 200) {
|
onNon200 = function (xhr) {};
|
||||||
|
|
||||||
|
helpers.xhr('GET', url, {retries: 5, entity_name: 'comments'}, {
|
||||||
|
on200: function (response) {
|
||||||
comments.innerHTML = ' \
|
comments.innerHTML = ' \
|
||||||
<div> \
|
<div> \
|
||||||
<h3> \
|
<h3> \
|
||||||
@ -327,40 +239,28 @@ function get_youtube_comments(retries) {
|
|||||||
</div> \
|
</div> \
|
||||||
<div>{contentHtml}</div> \
|
<div>{contentHtml}</div> \
|
||||||
<hr>'.supplant({
|
<hr>'.supplant({
|
||||||
contentHtml: xhr.response.contentHtml,
|
contentHtml: response.contentHtml,
|
||||||
redditComments: video_data.reddit_comments_text,
|
redditComments: video_data.reddit_comments_text,
|
||||||
commentsText: video_data.comments_text.supplant(
|
commentsText: video_data.comments_text.supplant({
|
||||||
{ commentCount: number_with_separator(xhr.response.commentCount) }
|
// toLocaleString correctly splits number with local thousands separator. e.g.:
|
||||||
)
|
// '1,234,567.89' for user with English locale
|
||||||
|
// '1 234 567,89' for user with Russian locale
|
||||||
|
// '1.234.567,89' for user with Portuguese locale
|
||||||
|
commentCount: response.commentCount.toLocaleString()
|
||||||
|
})
|
||||||
});
|
});
|
||||||
|
|
||||||
comments.children[0].children[0].children[0].onclick = toggle_comments;
|
comments.children[0].children[0].children[0].onclick = toggle_comments;
|
||||||
comments.children[0].children[1].children[0].onclick = swap_comments;
|
comments.children[0].children[1].children[0].onclick = swap_comments;
|
||||||
} else {
|
},
|
||||||
if (video_data.params.comments[1] === 'youtube') {
|
onNon200: onNon200, // declared above
|
||||||
setTimeout(function () { get_youtube_comments(retries - 1); }, 1000);
|
onError: function (xhr) {
|
||||||
} else {
|
comments.innerHTML = spinnerHTML;
|
||||||
comments.innerHTML = '';
|
},
|
||||||
|
onTimeout: function (xhr) {
|
||||||
|
comments.innerHTML = spinnerHTML;
|
||||||
}
|
}
|
||||||
}
|
});
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
xhr.onerror = function () {
|
|
||||||
comments.innerHTML =
|
|
||||||
'<h3 style="text-align:center"><div class="loading"><i class="icon ion-ios-refresh"></i></div></h3>';
|
|
||||||
console.warn('Pulling comments failed... ' + retries + '/5');
|
|
||||||
setTimeout(function () { get_youtube_comments(retries - 1); }, 1000);
|
|
||||||
};
|
|
||||||
|
|
||||||
xhr.ontimeout = function () {
|
|
||||||
comments.innerHTML =
|
|
||||||
'<h3 style="text-align:center"><div class="loading"><i class="icon ion-ios-refresh"></i></div></h3>';
|
|
||||||
console.warn('Pulling comments failed... ' + retries + '/5');
|
|
||||||
get_youtube_comments(retries - 1);
|
|
||||||
};
|
|
||||||
|
|
||||||
xhr.send();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function get_youtube_replies(target, load_more, load_replies) {
|
function get_youtube_replies(target, load_more, load_replies) {
|
||||||
@ -368,29 +268,21 @@ function get_youtube_replies(target, load_more, load_replies) {
|
|||||||
|
|
||||||
var body = target.parentNode.parentNode;
|
var body = target.parentNode.parentNode;
|
||||||
var fallback = body.innerHTML;
|
var fallback = body.innerHTML;
|
||||||
body.innerHTML =
|
body.innerHTML = spinnerHTML;
|
||||||
'<h3 style="text-align:center"><div class="loading"><i class="icon ion-ios-refresh"></i></div></h3>';
|
|
||||||
|
|
||||||
var url = '/api/v1/comments/' + video_data.id +
|
var url = '/api/v1/comments/' + video_data.id +
|
||||||
'?format=html' +
|
'?format=html' +
|
||||||
'&hl=' + video_data.preferences.locale +
|
'&hl=' + video_data.preferences.locale +
|
||||||
'&thin_mode=' + video_data.preferences.thin_mode +
|
'&thin_mode=' + video_data.preferences.thin_mode +
|
||||||
'&continuation=' + continuation;
|
'&continuation=' + continuation;
|
||||||
if (load_replies) {
|
if (load_replies) url += '&action=action_get_comment_replies';
|
||||||
url += '&action=action_get_comment_replies';
|
|
||||||
}
|
|
||||||
var xhr = new XMLHttpRequest();
|
|
||||||
xhr.responseType = 'json';
|
|
||||||
xhr.timeout = 10000;
|
|
||||||
xhr.open('GET', url, true);
|
|
||||||
|
|
||||||
xhr.onreadystatechange = function () {
|
helpers.xhr('GET', url, {}, {
|
||||||
if (xhr.readyState === 4) {
|
on200: function (response) {
|
||||||
if (xhr.status === 200) {
|
|
||||||
if (load_more) {
|
if (load_more) {
|
||||||
body = body.parentNode.parentNode;
|
body = body.parentNode.parentNode;
|
||||||
body.removeChild(body.lastElementChild);
|
body.removeChild(body.lastElementChild);
|
||||||
body.innerHTML += xhr.response.contentHtml;
|
body.innerHTML += response.contentHtml;
|
||||||
} else {
|
} else {
|
||||||
body.removeChild(body.lastElementChild);
|
body.removeChild(body.lastElementChild);
|
||||||
|
|
||||||
@ -402,57 +294,46 @@ function get_youtube_replies(target, load_more, load_replies) {
|
|||||||
a.onclick = hide_youtube_replies;
|
a.onclick = hide_youtube_replies;
|
||||||
a.setAttribute('data-sub-text', video_data.hide_replies_text);
|
a.setAttribute('data-sub-text', video_data.hide_replies_text);
|
||||||
a.setAttribute('data-inner-text', video_data.show_replies_text);
|
a.setAttribute('data-inner-text', video_data.show_replies_text);
|
||||||
a.innerText = video_data.hide_replies_text;
|
a.textContent = video_data.hide_replies_text;
|
||||||
|
|
||||||
var div = document.createElement('div');
|
var div = document.createElement('div');
|
||||||
div.innerHTML = xhr.response.contentHtml;
|
div.innerHTML = response.contentHtml;
|
||||||
|
|
||||||
body.appendChild(p);
|
body.appendChild(p);
|
||||||
body.appendChild(div);
|
body.appendChild(div);
|
||||||
}
|
}
|
||||||
} else {
|
},
|
||||||
|
onNon200: function (xhr) {
|
||||||
|
body.innerHTML = fallback;
|
||||||
|
},
|
||||||
|
onTimeout: function (xhr) {
|
||||||
|
console.warn('Pulling comments failed');
|
||||||
body.innerHTML = fallback;
|
body.innerHTML = fallback;
|
||||||
}
|
}
|
||||||
}
|
});
|
||||||
};
|
|
||||||
|
|
||||||
xhr.ontimeout = function () {
|
|
||||||
console.warn('Pulling comments failed.');
|
|
||||||
body.innerHTML = fallback;
|
|
||||||
};
|
|
||||||
|
|
||||||
xhr.send();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
if (video_data.play_next) {
|
if (video_data.play_next) {
|
||||||
player.on('ended', function () {
|
player.on('ended', function () {
|
||||||
var url = new URL('https://example.com/watch?v=' + video_data.next_video);
|
var url = new URL('https://example.com/watch?v=' + video_data.next_video);
|
||||||
|
|
||||||
if (video_data.params.autoplay || video_data.params.continue_autoplay) {
|
if (video_data.params.autoplay || video_data.params.continue_autoplay)
|
||||||
url.searchParams.set('autoplay', '1');
|
url.searchParams.set('autoplay', '1');
|
||||||
}
|
if (video_data.params.listen !== video_data.preferences.listen)
|
||||||
|
|
||||||
if (video_data.params.listen !== video_data.preferences.listen) {
|
|
||||||
url.searchParams.set('listen', video_data.params.listen);
|
url.searchParams.set('listen', video_data.params.listen);
|
||||||
}
|
if (video_data.params.speed !== video_data.preferences.speed)
|
||||||
|
|
||||||
if (video_data.params.speed !== video_data.preferences.speed) {
|
|
||||||
url.searchParams.set('speed', video_data.params.speed);
|
url.searchParams.set('speed', video_data.params.speed);
|
||||||
}
|
if (video_data.params.local !== video_data.preferences.local)
|
||||||
|
|
||||||
if (video_data.params.local !== video_data.preferences.local) {
|
|
||||||
url.searchParams.set('local', video_data.params.local);
|
url.searchParams.set('local', video_data.params.local);
|
||||||
}
|
|
||||||
|
|
||||||
url.searchParams.set('continue', '1');
|
url.searchParams.set('continue', '1');
|
||||||
|
|
||||||
location.assign(url.pathname + url.search);
|
location.assign(url.pathname + url.search);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
window.addEventListener('load', function (e) {
|
addEventListener('load', function (e) {
|
||||||
if (video_data.plid) {
|
if (video_data.plid)
|
||||||
get_playlist(video_data.plid);
|
get_playlist(video_data.plid);
|
||||||
}
|
|
||||||
|
|
||||||
if (video_data.params.comments[0] === 'youtube') {
|
if (video_data.params.comments[0] === 'youtube') {
|
||||||
get_youtube_comments();
|
get_youtube_comments();
|
||||||
|
@ -1,5 +1,6 @@
|
|||||||
'use strict';
|
'use strict';
|
||||||
var watched_data = JSON.parse(document.getElementById('watched_data').textContent);
|
var watched_data = JSON.parse(document.getElementById('watched_data').textContent);
|
||||||
|
var payload = 'csrf_token=' + watched_data.csrf_token;
|
||||||
|
|
||||||
function mark_watched(target) {
|
function mark_watched(target) {
|
||||||
var tile = target.parentNode.parentNode.parentNode.parentNode.parentNode;
|
var tile = target.parentNode.parentNode.parentNode.parentNode.parentNode;
|
||||||
@ -7,45 +8,27 @@ function mark_watched(target) {
|
|||||||
|
|
||||||
var url = '/watch_ajax?action_mark_watched=1&redirect=false' +
|
var url = '/watch_ajax?action_mark_watched=1&redirect=false' +
|
||||||
'&id=' + target.getAttribute('data-id');
|
'&id=' + target.getAttribute('data-id');
|
||||||
var xhr = new XMLHttpRequest();
|
|
||||||
xhr.responseType = 'json';
|
|
||||||
xhr.timeout = 10000;
|
|
||||||
xhr.open('POST', url, true);
|
|
||||||
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
|
|
||||||
|
|
||||||
xhr.onreadystatechange = function () {
|
helpers.xhr('POST', url, {payload: payload}, {
|
||||||
if (xhr.readyState === 4) {
|
onNon200: function (xhr) {
|
||||||
if (xhr.status !== 200) {
|
|
||||||
tile.style.display = '';
|
tile.style.display = '';
|
||||||
}
|
}
|
||||||
}
|
});
|
||||||
};
|
|
||||||
|
|
||||||
xhr.send('csrf_token=' + watched_data.csrf_token);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function mark_unwatched(target) {
|
function mark_unwatched(target) {
|
||||||
var tile = target.parentNode.parentNode.parentNode.parentNode.parentNode;
|
var tile = target.parentNode.parentNode.parentNode.parentNode.parentNode;
|
||||||
tile.style.display = 'none';
|
tile.style.display = 'none';
|
||||||
var count = document.getElementById('count');
|
var count = document.getElementById('count');
|
||||||
count.innerText = count.innerText - 1;
|
count.textContent--;
|
||||||
|
|
||||||
var url = '/watch_ajax?action_mark_unwatched=1&redirect=false' +
|
var url = '/watch_ajax?action_mark_unwatched=1&redirect=false' +
|
||||||
'&id=' + target.getAttribute('data-id');
|
'&id=' + target.getAttribute('data-id');
|
||||||
var xhr = new XMLHttpRequest();
|
|
||||||
xhr.responseType = 'json';
|
|
||||||
xhr.timeout = 10000;
|
|
||||||
xhr.open('POST', url, true);
|
|
||||||
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
|
|
||||||
|
|
||||||
xhr.onreadystatechange = function () {
|
helpers.xhr('POST', url, {payload: payload}, {
|
||||||
if (xhr.readyState === 4) {
|
onNon200: function (xhr) {
|
||||||
if (xhr.status !== 200) {
|
count.textContent++;
|
||||||
count.innerText = count.innerText - 1 + 2;
|
|
||||||
tile.style.display = '';
|
tile.style.display = '';
|
||||||
}
|
}
|
||||||
}
|
});
|
||||||
};
|
|
||||||
|
|
||||||
xhr.send('csrf_token=' + watched_data.csrf_token);
|
|
||||||
}
|
}
|
||||||
|
@ -481,7 +481,7 @@ def template_reddit_comments(root, locale)
|
|||||||
|
|
||||||
html << <<-END_HTML
|
html << <<-END_HTML
|
||||||
<p>
|
<p>
|
||||||
<a href="javascript:void(0)" data-onclick="toggle_parent">[ - ]</a>
|
<a href="javascript:void(0)" data-onclick="toggle_parent">[ − ]</a>
|
||||||
<b><a href="https://www.reddit.com/user/#{child.author}">#{child.author}</a></b>
|
<b><a href="https://www.reddit.com/user/#{child.author}">#{child.author}</a></b>
|
||||||
#{translate_count(locale, "comments_points_count", child.score, NumberFormatting::Separator)}
|
#{translate_count(locale, "comments_points_count", child.score, NumberFormatting::Separator)}
|
||||||
<span title="#{child.created_utc.to_s(translate(locale, "%a %B %-d %T %Y UTC"))}">#{translate(locale, "`x` ago", recode_date(child.created_utc, locale))}</span>
|
<span title="#{child.created_utc.to_s(translate(locale, "%a %B %-d %T %Y UTC"))}">#{translate(locale, "`x` ago", recode_date(child.created_utc, locale))}</span>
|
||||||
|
@ -9,6 +9,20 @@
|
|||||||
<body>
|
<body>
|
||||||
<h1><%= translate(locale, "JavaScript license information") %></h1>
|
<h1><%= translate(locale, "JavaScript license information") %></h1>
|
||||||
<table id="jslicense-labels1">
|
<table id="jslicense-labels1">
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<a href="/js/_helpers.js?v=<%= ASSET_COMMIT %>">_helpers.js</a>
|
||||||
|
</td>
|
||||||
|
|
||||||
|
<td>
|
||||||
|
<a href="https://www.gnu.org/licenses/agpl-3.0.html">AGPL-3.0</a>
|
||||||
|
</td>
|
||||||
|
|
||||||
|
<td>
|
||||||
|
<a href="/js/_helpers.js?v=<%= ASSET_COMMIT %>"><%= translate(locale, "source") %></a>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
<tr>
|
<tr>
|
||||||
<td>
|
<td>
|
||||||
<a href="/js/community.js?v=<%= ASSET_COMMIT %>">community.js</a>
|
<a href="/js/community.js?v=<%= ASSET_COMMIT %>">community.js</a>
|
||||||
|
@ -17,6 +17,7 @@
|
|||||||
<link rel="stylesheet" href="/css/grids-responsive-min.css?v=<%= ASSET_COMMIT %>">
|
<link rel="stylesheet" href="/css/grids-responsive-min.css?v=<%= ASSET_COMMIT %>">
|
||||||
<link rel="stylesheet" href="/css/ionicons.min.css?v=<%= ASSET_COMMIT %>">
|
<link rel="stylesheet" href="/css/ionicons.min.css?v=<%= ASSET_COMMIT %>">
|
||||||
<link rel="stylesheet" href="/css/default.css?v=<%= ASSET_COMMIT %>">
|
<link rel="stylesheet" href="/css/default.css?v=<%= ASSET_COMMIT %>">
|
||||||
|
<script src="/js/_helpers.js?v=<%= ASSET_COMMIT %>"></script>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<%
|
<%
|
||||||
|
@ -278,6 +278,7 @@ we're going to need to do it here in order to allow for translations.
|
|||||||
</div>
|
</div>
|
||||||
<% end %>
|
<% end %>
|
||||||
<p style="width:100%"><%= rv["title"] %></p>
|
<p style="width:100%"><%= rv["title"] %></p>
|
||||||
|
</a>
|
||||||
<h5 class="pure-g">
|
<h5 class="pure-g">
|
||||||
<div class="pure-u-14-24">
|
<div class="pure-u-14-24">
|
||||||
<% if rv["ucid"]? %>
|
<% if rv["ucid"]? %>
|
||||||
@ -295,7 +296,6 @@ we're going to need to do it here in order to allow for translations.
|
|||||||
%></b>
|
%></b>
|
||||||
</div>
|
</div>
|
||||||
</h5>
|
</h5>
|
||||||
</a>
|
|
||||||
<% end %>
|
<% end %>
|
||||||
<% end %>
|
<% end %>
|
||||||
</div>
|
</div>
|
||||||
|
Loading…
Reference in New Issue
Block a user