feat: autoplay for related videos
Add autoplay support for related videos. Move the playlist autoplay code into this shared script. Add the SameSite=Strict attribute to the autoplay cookie due to Firefox soon rejecting cookies which use SameSite=None without the secure attribute. Closes: #50 Signed-off-by: Jesús <heckyel@hyperbola.info>
This commit is contained in:
Umimaso
parent
ff7aae05c4
commit
2d1794889a
@ -345,6 +345,14 @@ label[for=options-toggle-cbox] {
|
|||||||
|
|
||||||
.side-videos { grid-area: side-videos; }
|
.side-videos { grid-area: side-videos; }
|
||||||
|
|
||||||
|
.side-videos .related-autoplay {
|
||||||
|
list-style: none;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(2, auto);
|
||||||
|
justify-content: start;
|
||||||
|
grid-column-gap: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
/* playlist items */
|
/* playlist items */
|
||||||
.side-videos .site-playlist {
|
.side-videos .site-playlist {
|
||||||
border-style: solid;
|
border-style: solid;
|
||||||
|
|||||||
@ -150,124 +150,42 @@
|
|||||||
|
|
||||||
<!-- playlist -->
|
<!-- playlist -->
|
||||||
{% if playlist %}
|
{% if playlist %}
|
||||||
<div class="site-playlist">
|
<div class="site-playlist">
|
||||||
<div class="playlist-header">
|
<div class="playlist-header">
|
||||||
<a href="{{ playlist['url'] }}" title="{{ playlist['title'] }}"><h3>{{ playlist['title'] }}</h3></a>
|
<a href="{{ playlist['url'] }}" title="{{ playlist['title'] }}"><h3>{{ playlist['title'] }}</h3></a>
|
||||||
<ul class="playlist-metadata">
|
<ul class="playlist-metadata">
|
||||||
<li>Autoplay: <input type="checkbox" id="autoplay-toggle"></li>
|
<li>Autoplay: <input type="checkbox" id="autoplay-toggle"></li>
|
||||||
{% if playlist['current_index'] is none %}
|
{% if playlist['current_index'] is none %}
|
||||||
<li>[Error!]/{{ playlist['video_count'] }}</li>
|
<li>[Error!]/{{ playlist['video_count'] }}</li>
|
||||||
{% else %}
|
{% else %}
|
||||||
<li>{{ playlist['current_index']+1 }}/{{ playlist['video_count'] }}</li>
|
<li>{{ playlist['current_index']+1 }}/{{ playlist['video_count'] }}</li>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
<li><a href="{{ playlist['author_url'] }}" title="{{ playlist['author'] }}">{{ playlist['author'] }}</a></li>
|
<li><a href="{{ playlist['author_url'] }}" title="{{ playlist['author'] }}">{{ playlist['author'] }}</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<nav class="playlist-videos">
|
<nav class="playlist-videos">
|
||||||
{% for info in playlist['items'] %}
|
{% for info in playlist['items'] %}
|
||||||
{# non-lazy load for 5 videos surrounding current video #}
|
{# non-lazy load for 5 videos surrounding current video #}
|
||||||
{# for non-js browsers or old such that IntersectionObserver doesn't work #}
|
{# for non-js browsers or old such that IntersectionObserver doesn't work #}
|
||||||
{# -10 is sentinel to not load anything if there's no current_index for some reason #}
|
{# -10 is sentinel to not load anything if there's no current_index for some reason #}
|
||||||
{% if (playlist.get('current_index', -10) - loop.index0)|abs is lt(5) %}
|
{% if (playlist.get('current_index', -10) - loop.index0)|abs is lt(5) %}
|
||||||
{{ common_elements.item(info, include_badges=false, lazy_load=false) }}
|
{{ common_elements.item(info, include_badges=false, lazy_load=false) }}
|
||||||
{% else %}
|
{% else %}
|
||||||
{{ common_elements.item(info, include_badges=false, lazy_load=true) }}
|
{{ common_elements.item(info, include_badges=false, lazy_load=true) }}
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</nav>
|
</nav>
|
||||||
{% if playlist['current_index'] is not none %}
|
{% if playlist['id'] is not none %}
|
||||||
<script>
|
<script>
|
||||||
// @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL-v3-or-Later
|
// @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL-v3-or-Later
|
||||||
(function main() {
|
|
||||||
// from https://stackoverflow.com/a/6969486
|
|
||||||
function escapeRegExp(string) {
|
|
||||||
return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); // $& means the whole matched string
|
|
||||||
}
|
|
||||||
let playability_error = {{ 'true' if playability_error else 'false' }};
|
|
||||||
let playlist_id = {{ playlist['id']|tojson }};
|
|
||||||
playlist_id = escapeRegExp(playlist_id);
|
|
||||||
|
|
||||||
// read cookies on whether to autoplay thru playlist
|
|
||||||
// pain in the ass:
|
|
||||||
// https://developer.mozilla.org/en-US/docs/Web/API/Document/cookie
|
|
||||||
let cookieValue = document.cookie.replace(new RegExp(
|
|
||||||
'(?:(?:^|.*;\\s*)autoplay_' + playlist_id + '\\s*\\=\\s*([^;]*).*$)|^.*$'), '$1');
|
|
||||||
let autoplayEnabled = 0;
|
|
||||||
if(cookieValue.length === 0){
|
|
||||||
autoplayEnabled = 0;
|
|
||||||
} else {
|
|
||||||
autoplayEnabled = Number(cookieValue);
|
|
||||||
}
|
|
||||||
|
|
||||||
// check the checkbox if autoplay is on
|
|
||||||
let checkbox = document.querySelector('#autoplay-toggle');
|
|
||||||
if(autoplayEnabled){
|
|
||||||
checkbox.checked = true;
|
|
||||||
}
|
|
||||||
|
|
||||||
// listen for checkbox to turn autoplay on and off
|
|
||||||
checkbox.addEventListener( 'change', function() {
|
|
||||||
if(this.checked) {
|
|
||||||
autoplayEnabled = 1;
|
|
||||||
document.cookie = 'autoplay_' + playlist_id + '=1';
|
|
||||||
} else {
|
|
||||||
autoplayEnabled = 0;
|
|
||||||
document.cookie = 'autoplay_' + playlist_id + '=0';
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
const vid = document.getElementById('js-video-player');
|
|
||||||
if(!playability_error){
|
|
||||||
if(autoplayEnabled){
|
|
||||||
vid.play();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
let currentIndex = {{ playlist['current_index']|tojson }};
|
|
||||||
{% if playlist['current_index']+1 == playlist['items']|length %}
|
|
||||||
let nextVideoUrl = null;
|
|
||||||
{% else %}
|
|
||||||
let nextVideoUrl = {{ (playlist['items'][playlist['current_index']+1]['url'])|tojson }};
|
|
||||||
{% endif %}
|
|
||||||
let nextVideoDelay = 1000;
|
|
||||||
|
|
||||||
// scroll playlist to proper position
|
|
||||||
let pl = document.querySelector('.playlist-videos');
|
|
||||||
// item height + gap == 100
|
|
||||||
pl.scrollTop = 100*currentIndex;
|
|
||||||
|
|
||||||
// go to next video when video ends
|
|
||||||
// https://stackoverflow.com/a/2880950
|
|
||||||
if(nextVideoUrl){
|
|
||||||
if(playability_error){
|
|
||||||
videoEnded();
|
|
||||||
} else {
|
|
||||||
vid.addEventListener('ended', videoEnded, false);
|
|
||||||
}
|
|
||||||
function nextVideo(){
|
|
||||||
if(autoplayEnabled){
|
|
||||||
window.location.href = nextVideoUrl;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
function videoEnded(e) {
|
|
||||||
window.setTimeout(nextVideo, nextVideoDelay);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}());
|
|
||||||
// @license-end
|
|
||||||
</script>
|
|
||||||
{% endif %}
|
|
||||||
{% if playlist['id'] is not none %}
|
|
||||||
<script>
|
|
||||||
// @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL-v3-or-Later
|
|
||||||
(function main() {
|
|
||||||
// lazy load playlist images
|
// lazy load playlist images
|
||||||
// copied almost verbatim from
|
// copied almost verbatim from
|
||||||
// https://css-tricks.com/tips-for-rolling-your-own-lazy-loading/
|
// https://css-tricks.com/tips-for-rolling-your-own-lazy-loading/
|
||||||
// IntersectionObserver isn't supported in pre-quantum
|
// IntersectionObserver isn't supported in pre-quantum
|
||||||
// firefox versions, but the alternative of making it
|
// firefox versions, but the alternative of making it
|
||||||
// manually is a performance drain, so oh well
|
// manually is a performance drain, so oh well
|
||||||
let observer = new IntersectionObserver(lazyLoad, {
|
var observer = new IntersectionObserver(lazyLoad, {
|
||||||
|
|
||||||
// where in relation to the edge of the viewport, we are observing
|
// where in relation to the edge of the viewport, we are observing
|
||||||
rootMargin: "100px",
|
rootMargin: "100px",
|
||||||
// how much of the element needs to have intersected
|
// how much of the element needs to have intersected
|
||||||
@ -287,15 +205,123 @@
|
|||||||
};
|
};
|
||||||
|
|
||||||
// Tell our observer to observe all img elements with a "lazy" class
|
// Tell our observer to observe all img elements with a "lazy" class
|
||||||
let lazyImages = document.querySelectorAll('img.lazy');
|
var lazyImages = document.querySelectorAll('img.lazy');
|
||||||
lazyImages.forEach(img => {
|
lazyImages.forEach(img => {
|
||||||
observer.observe(img);
|
observer.observe(img);
|
||||||
});
|
});
|
||||||
}());
|
// @license-end
|
||||||
// @license-end
|
</script>
|
||||||
</script>
|
{% endif %}
|
||||||
{% endif %}
|
</div>
|
||||||
</div>
|
{% elif settings.related_videos_mode != 0 %}
|
||||||
|
<li class="related-autoplay">Autoplay: <input type="checkbox" id="autoplay-toggle"></li>
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
{% if settings.related_videos_mode != 0 or playlist %}
|
||||||
|
<script>
|
||||||
|
// @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL-v3-or-Later
|
||||||
|
var playability_error = {{ 'true' if playability_error else 'false' }};
|
||||||
|
{% if playlist and playlist['current_index'] is not none %}
|
||||||
|
{% set isPlaylist = true %}
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
{% if isPlaylist %}
|
||||||
|
// from https://stackoverflow.com/a/6969486
|
||||||
|
function escapeRegExp(string) {
|
||||||
|
return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); // $& means the whole matched string
|
||||||
|
}
|
||||||
|
var playlist_id = {{ playlist['id']|tojson }};
|
||||||
|
playlist_id = escapeRegExp(playlist_id);
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
// read cookies on whether to autoplay
|
||||||
|
// pain in the ass:
|
||||||
|
// https://developer.mozilla.org/en-US/docs/Web/API/Document/cookie
|
||||||
|
{% if isPlaylist %}
|
||||||
|
var cookieValue = document.cookie.replace(new RegExp(
|
||||||
|
'(?:(?:^|.*;\\s*)autoplay_' + playlist_id + '\\s*\\=\\s*([^;]*).*$)|^.*$'), '$1');
|
||||||
|
{% else %}
|
||||||
|
var cookieValue = document.cookie.replace(new RegExp(
|
||||||
|
'(?:(?:^|.*;\\s*)autoplay\\s*\\=\\s*([^;]*).*$)|^.*$'), '$1');
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
var autoplayEnabled = 0;
|
||||||
|
if(cookieValue.length === 0){
|
||||||
|
autoplayEnabled = 0;
|
||||||
|
} else {
|
||||||
|
autoplayEnabled = Number(cookieValue);
|
||||||
|
}
|
||||||
|
|
||||||
|
// check the checkbox if autoplay is on
|
||||||
|
var checkbox = document.querySelector('#autoplay-toggle');
|
||||||
|
if(autoplayEnabled){
|
||||||
|
checkbox.checked = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
// listen for checkbox to turn autoplay on and off
|
||||||
|
var cookie = 'autoplay'
|
||||||
|
{% if isPlaylist %}
|
||||||
|
cookie += '_' + playlist_id;
|
||||||
|
{% endif %}
|
||||||
|
checkbox.addEventListener( 'change', function() {
|
||||||
|
if(this.checked) {
|
||||||
|
autoplayEnabled = 1;
|
||||||
|
document.cookie = cookie + '=1; SameSite=Strict';
|
||||||
|
} else {
|
||||||
|
autoplayEnabled = 0;
|
||||||
|
document.cookie = cookie + '=0; SameSite=Strict';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
if(!playability_error){
|
||||||
|
// play the video if autoplay is on
|
||||||
|
var vid = document.querySelector('video');
|
||||||
|
if(autoplayEnabled){
|
||||||
|
vid.play();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// determine next video url
|
||||||
|
{% if isPlaylist %}
|
||||||
|
var currentIndex = {{ playlist['current_index']|tojson }};
|
||||||
|
{% if playlist['current_index']+1 == playlist['items']|length %}
|
||||||
|
var nextVideoUrl = null;
|
||||||
|
{% else %}
|
||||||
|
var nextVideoUrl = {{ (playlist['items'][playlist['current_index']+1]['url'])|tojson }};
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
// scroll playlist to proper position
|
||||||
|
// item height + gap == 100
|
||||||
|
var pl = document.querySelector('.playlist-videos');
|
||||||
|
pl.scrollTop = 100*currentIndex;
|
||||||
|
{% else %}
|
||||||
|
{% if related|length == 0 %}
|
||||||
|
var nextVideoUrl = null;
|
||||||
|
{% else %}
|
||||||
|
var nextVideoUrl = {{ (related[0]['url'])|tojson }};
|
||||||
|
{% endif %}
|
||||||
|
{% endif %}
|
||||||
|
var nextVideoDelay = 1000;
|
||||||
|
|
||||||
|
// go to next video when video ends
|
||||||
|
// https://stackoverflow.com/a/2880950
|
||||||
|
if (nextVideoUrl) {
|
||||||
|
if(playability_error){
|
||||||
|
videoEnded();
|
||||||
|
} else {
|
||||||
|
vid.addEventListener('ended', videoEnded, false);
|
||||||
|
}
|
||||||
|
function nextVideo(){
|
||||||
|
if(autoplayEnabled){
|
||||||
|
window.location.href = nextVideoUrl;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
function videoEnded(e) {
|
||||||
|
window.setTimeout(nextVideo, nextVideoDelay);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// @license-end
|
||||||
|
</script>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
<!-- /playlist -->
|
<!-- /playlist -->
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user