diff options
Diffstat (limited to 'assets')
| -rw-r--r-- | assets/css/darktheme.css | 37 | ||||
| -rw-r--r-- | assets/css/default.css | 151 | ||||
| -rw-r--r-- | assets/css/lighttheme.css | 16 | ||||
| -rw-r--r-- | assets/css/videojs-vtt-thumbnails-fix.css | 3 | ||||
| -rw-r--r-- | assets/js/embed.js | 9 | ||||
| -rw-r--r-- | assets/js/player.js | 41 | ||||
| -rw-r--r-- | assets/js/themes.js | 15 | ||||
| -rw-r--r-- | assets/js/watch.js | 9 |
8 files changed, 207 insertions, 74 deletions
diff --git a/assets/css/darktheme.css b/assets/css/darktheme.css deleted file mode 100644 index 92da15b6..00000000 --- a/assets/css/darktheme.css +++ /dev/null @@ -1,37 +0,0 @@ -a:hover, -a:active { - color: rgb(0, 182, 240); -} - -a { - color: #a0a0a0; - text-decoration: none; -} - -body { - background-color: rgba(35, 35, 35, 1); - color: #f0f0f0; -} - -.pure-form legend { - color: #f0f0f0; -} - -.pure-menu-heading { - color: #f0f0f0; -} - -input, -select, -textarea { - color: rgba(35, 35, 35, 1); -} - -.pure-form input[type="file"] { - color: #f0f0f0; -} - -.navbar > .searchbar input { - background-color: inherit; - color: inherit; -} diff --git a/assets/css/default.css b/assets/css/default.css index b7a77be6..e403e606 100644 --- a/assets/css/default.css +++ b/assets/css/default.css @@ -20,7 +20,7 @@ body { height: auto; } -.channel-owner { +body a.channel-owner { background-color: #008bec; color: #fff; border-radius: 9px; @@ -101,15 +101,19 @@ div { padding-right: 10px; } +body a.pure-button { + color: rgba(0,0,0,.8); +} + button.pure-button-primary, -a.pure-button-primary, +body a.pure-button-primary, .channel-owner:hover { background-color: #a0a0a0; color: rgba(35, 35, 35, 1); } button.pure-button-primary:hover, -a.pure-button-primary:hover { +body a.pure-button-primary:hover { background-color: rgba(0, 182, 240, 1); color: #fff; } @@ -282,7 +286,7 @@ input[type="search"]::-webkit-search-cancel-button { text-align: center; } -.footer a { +body .footer a { color: inherit; text-decoration: underline; } @@ -485,3 +489,142 @@ video.video-js { margin-top: -0.81666em; margin-left: -1.5em; } + +/* + * Light theme + */ + +.light-theme a:hover, +.light-theme a:active { + color: #075A9E !important; +} + +.light-theme a.pure-button-primary:hover { + color: #fff !important; +} + +.light-theme a { + color: #335d7a; + text-decoration: none; +} + +/* All links that do not fit with the default color goes here */ +.light-theme a:not([data-id]) > .icon, +.light-theme .pure-u-lg-1-5 > .h-box > a[href^="/watch?"], +.light-theme .playlist-restricted > ol > li > a { + color: #303030; +} + +.light-theme .pure-menu-heading { + color: #565d64; +} + +@media (prefers-color-scheme: light) { + .no-theme a:hover, + .no-theme a:active { + color: #075A9E !important; + } + + .no-theme a.pure-button-primary:hover { + color: #fff !important; + } + + .no-theme a { + color: #335d7a; + text-decoration: none; + } + + /* All links that do not fit with the default color goes here */ + .no-theme a:not([data-id]) > .icon, + .no-theme .pure-u-lg-1-5 > .h-box > a[href^="/watch?"], + .no-theme .playlist-restricted > ol > li > a { + color: #303030; + } + + .light-theme .pure-menu-heading { + color: #565d64; + } +} + +/* + * Dark theme + */ + +.dark-theme a:hover, +.dark-theme a:active { + color: rgb(0, 182, 240); +} + +.dark-theme a { + color: #a0a0a0; + text-decoration: none; +} + +body.dark-theme { + background-color: rgba(35, 35, 35, 1); + color: #f0f0f0; +} + +.dark-theme .pure-form legend { + color: #f0f0f0; +} + +.dark-theme .pure-menu-heading { + color: #f0f0f0; +} + +.dark-theme input, +.dark-theme select, +.dark-theme textarea { + color: rgba(35, 35, 35, 1); +} + +.dark-theme .pure-form input[type="file"] { + color: #f0f0f0; +} + +.dark-theme .navbar > .searchbar input { + background-color: inherit; + color: inherit; +} + +@media (prefers-color-scheme: dark) { + .no-theme a:hover, + .no-theme a:active { + color: rgb(0, 182, 240); + } + + .no-theme a { + color: #a0a0a0; + text-decoration: none; + } + + body.no-theme { + background-color: rgba(35, 35, 35, 1); + color: #f0f0f0; + } + + .no-theme .pure-form legend { + color: #f0f0f0; + } + + .no-theme .pure-menu-heading { + color: #f0f0f0; + } + + .no-theme input, + .no-theme select, + .no-theme textarea { + color: rgba(35, 35, 35, 1); + } + + .no-theme .pure-form input[type="file"] { + color: #f0f0f0; + } + + .no-theme .navbar > .searchbar input { + background-color: inherit; + color: inherit; + } +} + diff --git a/assets/css/lighttheme.css b/assets/css/lighttheme.css deleted file mode 100644 index 73706bb7..00000000 --- a/assets/css/lighttheme.css +++ /dev/null @@ -1,16 +0,0 @@ -a:hover, -a:active { - color: #167ac6 !important; -} - -a { - color: #61809b; - text-decoration: none; -} - -/* All links that do not fit with the default color goes here */ -a:not([data-id]) > .icon, -.pure-u-lg-1-5 > .h-box > a[href^="/watch?"], -.playlist-restricted > ol > li > a { - color: #303030; -} diff --git a/assets/css/videojs-vtt-thumbnails-fix.css b/assets/css/videojs-vtt-thumbnails-fix.css deleted file mode 100644 index 8b62cf0c..00000000 --- a/assets/css/videojs-vtt-thumbnails-fix.css +++ /dev/null @@ -1,3 +0,0 @@ -.video-js .vjs-vtt-thumbnail-display { - max-width: 158px; -} diff --git a/assets/js/embed.js b/assets/js/embed.js index 99d2fc53..9d0be0ea 100644 --- a/assets/js/embed.js +++ b/assets/js/embed.js @@ -31,6 +31,11 @@ function get_playlist(plid, retries) { player.on('ended', function () { var url = new URL('https://example.com/embed/' + xhr.response.nextVideo); + url.searchParams.set('list', plid); + if (!plid.startsWith('RD')) { + url.searchParams.set('index', xhr.response.index); + } + if (video_data.params.autoplay || video_data.params.continue_autoplay) { url.searchParams.set('autoplay', '1'); } @@ -47,10 +52,6 @@ function get_playlist(plid, retries) { url.searchParams.set('local', video_data.params.local); } - url.searchParams.set('list', plid); - if (!plid.startsWith('RD')) { - url.searchParams.set('index', xhr.response.index); - } location.assign(url.pathname + url.search); }); } diff --git a/assets/js/player.js b/assets/js/player.js index f79fbbf3..fcba43d8 100644 --- a/assets/js/player.js +++ b/assets/js/player.js @@ -41,8 +41,16 @@ var shareOptions = { embedCode: "<iframe id='ivplayer' width='640' height='360' src='" + embed_url + "' style='border:none;'></iframe>" } +videojs.Hls.xhr.beforeRequest = function(options) { + if (options.uri.indexOf('local=true') === -1) { + options.uri = options.uri + '?local=true'; + } + return options; +}; + var player = videojs('player', options); + if (location.pathname.startsWith('/embed/')) { player.overlay({ overlays: [{ @@ -146,6 +154,35 @@ if (video_data.params.autoplay) { if (!video_data.params.listen && video_data.params.quality === 'dash') { player.httpSourceSelector(); + + if (video_data.params.quality_dash != "auto") { + player.ready(() => { + player.on("loadedmetadata", () => { + const qualityLevels = Array.from(player.qualityLevels()).sort((a, b) => a.height - b.height); + let targetQualityLevel; + switch (video_data.params.quality_dash) { + case "best": + targetQualityLevel = qualityLevels.length - 1; + break; + case "worst": + targetQualityLevel = 0; + break; + default: + const targetHeight = Number.parseInt(video_data.params.quality_dash, 10); + for (let i = 0; i < qualityLevels.length; i++) { + if (qualityLevels[i].height <= targetHeight) { + targetQualityLevel = i; + } else { + break; + } + } + } + for (let i = 0; i < qualityLevels.length; i++) { + qualityLevels[i].enabled = (i == targetQualityLevel); + } + }); + }); + } } player.vttThumbnails({ @@ -502,4 +539,6 @@ window.addEventListener('keydown', e => { }()); // Since videojs-share can sometimes be blocked, we defer it until last -player.share(shareOptions); +if (player.share) { + player.share(shareOptions); +} diff --git a/assets/js/themes.js b/assets/js/themes.js index c600073d..543b849e 100644 --- a/assets/js/themes.js +++ b/assets/js/themes.js @@ -2,7 +2,7 @@ var toggle_theme = document.getElementById('toggle_theme'); toggle_theme.href = 'javascript:void(0);'; toggle_theme.addEventListener('click', function () { - var dark_mode = document.getElementById('dark_theme').media === 'none'; + var dark_mode = document.body.classList.contains("light-theme"); var url = '/toggle_theme?redirect=false'; var xhr = new XMLHttpRequest(); @@ -22,7 +22,7 @@ window.addEventListener('storage', function (e) { } }); -window.addEventListener('load', function () { +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); @@ -50,13 +50,18 @@ function scheme_switch (e) { } function set_mode (bool) { - document.getElementById('dark_theme').media = !bool ? 'none' : ''; - document.getElementById('light_theme').media = bool ? 'none' : ''; - 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 { + // light toggle_theme.children[0].setAttribute('class', 'icon ion-ios-moon'); + document.body.classList.remove('no-theme'); + document.body.classList.remove('dark-theme'); + document.body.classList.add('light-theme'); } } diff --git a/assets/js/watch.js b/assets/js/watch.js index e9ad2ddc..05530f3d 100644 --- a/assets/js/watch.js +++ b/assets/js/watch.js @@ -154,6 +154,11 @@ function get_playlist(plid, retries) { player.on('ended', function () { var url = new URL('https://example.com/watch?v=' + xhr.response.nextVideo); + url.searchParams.set('list', plid); + if (!plid.startsWith('RD')) { + url.searchParams.set('index', xhr.response.index); + } + if (video_data.params.autoplay || video_data.params.continue_autoplay) { url.searchParams.set('autoplay', '1'); } @@ -170,10 +175,6 @@ function get_playlist(plid, retries) { url.searchParams.set('local', video_data.params.local); } - url.searchParams.set('list', plid); - if (!plid.startsWith('RD')) { - url.searchParams.set('index', xhr.response.index); - } location.assign(url.pathname + url.search); }); } |
