diff options
Diffstat (limited to 'assets')
| -rw-r--r-- | assets/css/default.css | 29 | ||||
| -rw-r--r-- | assets/css/search.css | 117 | ||||
| -rw-r--r-- | assets/js/player.js | 66 |
3 files changed, 186 insertions, 26 deletions
diff --git a/assets/css/default.css b/assets/css/default.css index 8b2b3578..49069c92 100644 --- a/assets/css/default.css +++ b/assets/css/default.css @@ -15,6 +15,11 @@ body { background-color: rgb(255, 0, 0, 0.5); } +.underlined { + border-bottom: 1px solid; + margin-bottom: 20px; +} + .channel-profile > * { font-size: 1.17em; font-weight: bold; @@ -475,30 +480,6 @@ body.dark-theme { } } -#filters { - display: inline; - margin-top: 15px; -} - -#filters > div { - display: inline-block; -} - -#filters > summary { - display: block; - margin-bottom: 15px; -} - -#filters > summary::before { - content: "[ + ]"; - font-size: 1.5em; -} - -#filters[open] > summary::before { - content: "[ - ]"; - font-size: 1.5em; -} - /*With commit d9528f5 all contents of the page is now within a flexbox. However, the hr element is rendered improperly within one. See https://stackoverflow.com/a/34372979 for more info */ diff --git a/assets/css/search.css b/assets/css/search.css new file mode 100644 index 00000000..a5996362 --- /dev/null +++ b/assets/css/search.css @@ -0,0 +1,117 @@ +summary { + /* This should hide the marker */ + display: block; + + font-size: 1.17em; + font-weight: bold; + margin: 0 auto 10px auto; +} + +summary::-webkit-details-marker, +summary::marker { display: none; } + +summary:before { + border-radius: 5px; + content: "[ + ]"; + margin: -2px 10px 0 10px; + padding: 1px 0 3px 0; + text-align: center; + width: 40px; +} + +details[open] > summary:before { content: "[ ‒ ]"; } + + +#filters-box { + padding: 10px 20px 20px 10px; + margin: 10px 15px; +} +#filters-flex { + display: flex; + flex-wrap: wrap; + flex-direction: row; + align-items: flex-start; + align-content: flex-start; + justify-content: flex-start; +} + + +fieldset, legend { + display: contents !important; + border: none !important; + margin: 0 !important; + padding: 0 !important; +} + + +.filter-column { + display: inline-block; + display: inline-flex; + width: max-content; + min-width: max-content; + max-width: 16em; + margin: 15px; + flex-grow: 2; + flex-basis: auto; + flex-direction: column; +} +.filter-name, .filter-options { + display: block; + padding: 5px 10px; + margin: 0; + text-align: start; +} + +.filter-options div { margin: 6px 0; } +.filter-options div * { vertical-align: middle; } +.filter-options label { margin: 0 10px; } + + +#filters-apply { text-align: end; } + +/* Error message */ + +.no-results-error { + text-align: center; + line-height: 180%; + font-size: 110%; + padding: 15px 15px 125px 15px; +} + +/* Responsive rules */ + +@media only screen and (max-width: 800px) { + summary { font-size: 1.30em; } + #filters-box { + margin: 10px 0 0 0; + padding: 0; + } + #filters-apply { + text-align: center; + padding: 15px; + } +} + +/* Light theme */ + +.light-theme #filters-box { + background: #dfdfdf; +} + +@media (prefers-color-scheme: light) { + .no-theme #filters-box { + background: #dfdfdf; + } +} + +/* Dark theme */ + +.dark-theme #filters-box { + background: #373737; +} + +@media (prefers-color-scheme: dark) { + .no-theme #filters-box { + background: #373737; + } +} diff --git a/assets/js/player.js b/assets/js/player.js index a1a2cd16..e478fb8f 100644 --- a/assets/js/player.js +++ b/assets/js/player.js @@ -200,6 +200,68 @@ if (video_data.params.video_start > 0 || video_data.params.video_end > 0) { player.volume(video_data.params.volume / 100); player.playbackRate(video_data.params.speed); +/** + * Method for getting the contents of a cookie + * + * @param {String} name Name of cookie + * @returns cookieValue + */ +function getCookieValue(name) { + var value = document.cookie.split(";").filter(item => item.includes(name + "=")); + + return (value != null && value.length >= 1) + ? value[0].substring((name + "=").length, value[0].length) + : null; +} + +/** + * Method for updating the "PREFS" cookie (or creating it if missing) + * + * @param {number} newVolume New volume defined (null if unchanged) + * @param {number} newSpeed New speed defined (null if unchanged) + */ +function updateCookie(newVolume, newSpeed) { + var volumeValue = newVolume != null ? newVolume : video_data.params.volume; + var speedValue = newSpeed != null ? newSpeed : video_data.params.speed; + + var cookieValue = getCookieValue('PREFS'); + var cookieData; + + if (cookieValue != null) { + var cookieJson = JSON.parse(decodeURIComponent(cookieValue)); + cookieJson.volume = volumeValue; + cookieJson.speed = speedValue; + cookieData = encodeURIComponent(JSON.stringify(cookieJson)); + } else { + cookieData = encodeURIComponent(JSON.stringify({ 'volume': volumeValue, 'speed': speedValue })); + } + + // Set expiration in 2 year + var date = new Date(); + date.setTime(date.getTime() + 63115200); + + var ipRegex = /^((\d+\.){3}\d+|[A-Fa-f0-9]*:[A-Fa-f0-9:]*:[A-Fa-f0-9:]+)$/; + var domainUsed = window.location.hostname; + + // 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') + domainUsed = '.' + window.location.hostname; + + document.cookie = 'PREFS=' + cookieData + '; SameSite=Strict; path=/; domain=' + + domainUsed + '; expires=' + date.toGMTString() + ';'; + + video_data.params.volume = volumeValue; + video_data.params.speed = speedValue; +} + +player.on('ratechange', function () { + updateCookie(null, player.playbackRate()); +}); + +player.on('volumechange', function () { + updateCookie(Math.ceil(player.volume() * 100), null); +}); + player.on('waiting', function () { if (player.playbackRate() > 1 && player.liveTracker.isLive() && player.liveTracker.atLiveEdge()) { console.log('Player has caught up to source, resetting playbackRate.') @@ -675,8 +737,8 @@ if (player_data.preferred_caption_found) { if (navigator.vendor == "Apple Computer, Inc." && video_data.params.listen) { player.on('loadedmetadata', function () { player.on('timeupdate', function () { - if (player.remainingTime() < player.duration() / 2) { - player.currentTime(player.duration() + 1); + if (player.remainingTime() < player.duration() / 2 && player.remainingTime() >= 2) { + player.currentTime(player.duration() - 1); } }); }); |