diff options
Diffstat (limited to 'assets')
| -rw-r--r-- | assets/css/default.css | 43 | ||||
| -rw-r--r-- | assets/css/player.css | 4 | ||||
| -rw-r--r-- | assets/js/handlers.js | 12 | ||||
| -rw-r--r-- | assets/js/player.js | 97 | ||||
| -rw-r--r-- | assets/js/themes.js | 21 | ||||
| -rw-r--r-- | assets/js/watch.js | 2 | ||||
| -rw-r--r-- | assets/robots.txt | 4 |
7 files changed, 152 insertions, 31 deletions
diff --git a/assets/css/default.css b/assets/css/default.css index ce6c30c9..8b2b3578 100644 --- a/assets/css/default.css +++ b/assets/css/default.css @@ -19,6 +19,7 @@ body { font-size: 1.17em; font-weight: bold; vertical-align: middle; + border-radius: 50%; } .channel-profile > img { @@ -191,20 +192,24 @@ img.thumbnail { display: inline; } -.searchbar .pure-form input[type="search"] { - margin-bottom: 1px; +.searchbar .pure-form fieldset { padding: 0; } - border-top: 0; - border-left: 0; - border-right: 0; - border-bottom: 1px solid #ccc; - border-radius: 0; +.searchbar input[type="search"] { + width: 100%; + margin: 1px; - padding: initial 0; + border: 1px solid; + border-color: #0000 #0000 #CCC #0000; + border-radius: 0; - box-shadow: none; + box-shadow: none; + -webkit-appearance: none; +} - -webkit-appearance: none; +.searchbar input[type="search"]:focus { + margin: 0 0 0.5px 0; + border: 2px solid; + border-color: #0000 #0000 #FED #0000; } /* https://stackoverflow.com/a/55170420 */ @@ -216,16 +221,6 @@ input[type="search"]::-webkit-search-cancel-button { background-size: 14px; } -.searchbar .pure-form fieldset { - padding: 0; -} - -/* attract focus to the searchbar by adding a subtle transition */ -.searchbar .pure-form input[type="search"]:focus { - margin-bottom: 0px; - border-bottom: 2px solid #aaa; -} - .user-field { display: flex; flex-direction: row; @@ -314,6 +309,11 @@ footer a { text-decoration: underline; } +footer span { + margin: 4px 0; + display: block; +} + /* keyframes */ @keyframes spin { @@ -540,7 +540,8 @@ p, } #descriptionWrapper { - max-width: 600px; + max-width: 600px; + white-space: pre-wrap; } /* Center the "invidious" logo on the search page */ diff --git a/assets/css/player.css b/assets/css/player.css index 656fb48c..120fd2f8 100644 --- a/assets/css/player.css +++ b/assets/css/player.css @@ -218,6 +218,10 @@ video.video-js { #player-container { position: relative; + padding-left: 0; + padding-right: 0; + margin-left: 1em; + margin-right: 1em; padding-bottom: 82vh; height: 0; } diff --git a/assets/js/handlers.js b/assets/js/handlers.js index 1498f39a..a417fcca 100644 --- a/assets/js/handlers.js +++ b/assets/js/handlers.js @@ -142,4 +142,16 @@ var csrf_token = target.parentNode.querySelector('input[name="csrf_token"]').value; xhr.send('csrf_token=' + csrf_token); } + + // Handle keypresses + window.addEventListener('keydown', (event) => { + // Ignore modifier keys + if (event.ctrlKey || event.metaKey) { return; } + + // Focus search bar on '/' + if (event.key == "/") { + document.getElementById('searchbox').focus(); + event.preventDefault(); + } + }); })(); diff --git a/assets/js/player.js b/assets/js/player.js index a461c53d..5ff55eb3 100644 --- a/assets/js/player.js +++ b/assets/js/player.js @@ -38,6 +38,8 @@ embed_url.searchParams.delete('v'); short_url = location.origin + '/' + video_data.id + embed_url.search; embed_url = location.origin + '/embed/' + video_data.id + embed_url.search; +var save_player_pos_key = "save_player_pos"; + var shareOptions = { socials: ['fbFeed', 'tw', 'reddit', 'email'], @@ -57,6 +59,16 @@ videojs.Hls.xhr.beforeRequest = function(options) { var player = videojs('player', options); +const storage = (() => { + try { + if (localStorage.length !== -1) { + return localStorage; + } + } catch (e) { + console.info('No storage available: ' + e); + } + return undefined; +})(); if (location.pathname.startsWith('/embed/')) { player.overlay({ @@ -199,6 +211,32 @@ if (video_data.premiere_timestamp && Math.round(new Date() / 1000) < video_data. player.getChild('bigPlayButton').hide(); } +if (video_data.params.save_player_pos) { + const url = new URL(location); + const hasTimeParam = url.searchParams.has("t"); + const remeberedTime = get_video_time(); + let lastUpdated = 0; + + if(!hasTimeParam) { + set_seconds_after_start(remeberedTime); + } + + const updateTime = () => { + const raw = player.currentTime(); + const time = Math.floor(raw); + + if(lastUpdated !== time && raw <= video_data.length_seconds - 15) { + save_video_time(time); + lastUpdated = time; + } + }; + + player.on("timeupdate", updateTime); +} +else { + remove_all_video_times(); +} + if (video_data.params.autoplay) { var bpb = player.getChild('bigPlayButton'); bpb.hide(); @@ -330,6 +368,65 @@ function skip_seconds(delta) { player.currentTime(newTime); } +function set_seconds_after_start(delta) { + const start = video_data.params.video_start; + player.currentTime(start + delta); +} + +function save_video_time(seconds) { + const videoId = video_data.id; + const all_video_times = get_all_video_times(); + + all_video_times[videoId] = seconds; + + set_all_video_times(all_video_times); +} + +function get_video_time() { + try { + const videoId = video_data.id; + const all_video_times = get_all_video_times(); + const timestamp = all_video_times[videoId]; + + return timestamp || 0; + } + catch { + 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.debug('set_all_video_times: ' + e); + } + } else { + storage.removeItem(save_player_pos_key); + } + } +} + +function get_all_video_times() { + if (storage) { + const raw = storage.getItem(save_player_pos_key); + if (raw !== null) { + try { + return JSON.parse(raw); + } catch (e) { + console.debug('get_all_video_times: ' + e); + } + } + } + return {}; +} + +function remove_all_video_times() { + set_all_video_times(null); +} + function set_time_percent(percent) { const duration = player.duration(); const newTime = duration * (percent / 100); diff --git a/assets/js/themes.js b/assets/js/themes.js index 543b849e..470f10bf 100644 --- a/assets/js/themes.js +++ b/assets/js/themes.js @@ -11,7 +11,9 @@ toggle_theme.addEventListener('click', function () { xhr.open('GET', url, true); set_mode(dark_mode); - window.localStorage.setItem('dark_mode', dark_mode ? 'dark' : 'light'); + try { + window.localStorage.setItem('dark_mode', dark_mode ? 'dark' : 'light'); + } catch {} xhr.send(); }); @@ -23,9 +25,12 @@ window.addEventListener('storage', function (e) { }); window.addEventListener('DOMContentLoaded', function () { - window.localStorage.setItem('dark_mode', document.getElementById('dark_mode_pref').textContent); - // Update localStorage if dark mode preference changed on preferences page - update_mode(window.localStorage.dark_mode); + 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 {} + update_mode(dark_mode); }); @@ -37,9 +42,11 @@ lightScheme.addListener(scheme_switch); function scheme_switch (e) { // ignore this method if we have a preference set - if (localStorage.getItem('dark_mode')) { - return; - } + try { + if (localStorage.getItem('dark_mode')) { + return; + } + } catch {} if (e.matches) { if (e.media.includes("dark")) { set_mode(true); diff --git a/assets/js/watch.js b/assets/js/watch.js index 3909edd4..1579abf4 100644 --- a/assets/js/watch.js +++ b/assets/js/watch.js @@ -149,6 +149,8 @@ function get_playlist(plid, retries) { if (xhr.readyState == 4) { if (xhr.status == 200) { playlist.innerHTML = xhr.response.playlistHtml; + var nextVideo = document.getElementById(xhr.response.nextVideo); + nextVideo.parentNode.parentNode.scrollTop = nextVideo.offsetTop; if (xhr.response.nextVideo) { player.on('ended', function () { diff --git a/assets/robots.txt b/assets/robots.txt index b7e8f5a9..1f53798b 100644 --- a/assets/robots.txt +++ b/assets/robots.txt @@ -1,4 +1,2 @@ User-agent: * -Disallow: /search -Disallow: /login -Disallow: /watch
\ No newline at end of file +Disallow: / |