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 | 47 |
3 files changed, 156 insertions, 37 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 13562974..e478fb8f 100644 --- a/assets/js/player.js +++ b/assets/js/player.js @@ -35,21 +35,11 @@ if (player_data.aspect_ratio) { var embed_url = new URL(location); embed_url.searchParams.delete('v'); -short_url = location.origin + '/' + video_data.id + embed_url.search; +var 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'], - - url: short_url, - title: player_data.title, - description: player_data.description, - image: player_data.thumbnail, - embedCode: "<iframe id='ivplayer' width='640' height='360' src='" + embed_url + "' style='border:none;'></iframe>" -} - videojs.Vhs.xhr.beforeRequest = function(options) { if (options.uri.indexOf('videoplayback') === -1 && options.uri.indexOf('local=true') === -1) { options.uri = options.uri + '?local=true'; @@ -59,6 +49,37 @@ videojs.Vhs.xhr.beforeRequest = function(options) { var player = videojs('player', options); +/** + * Function for add time argument to url + * @param {String} url + * @returns urlWithTimeArg + */ +function addCurrentTimeToURL(url) { + var urlUsed = new URL(url); + urlUsed.searchParams.delete('start'); + var currentTime = Math.ceil(player.currentTime()); + if (currentTime > 0) + urlUsed.searchParams.set('t', currentTime); + else if (urlUsed.searchParams.has('t')) + urlUsed.searchParams.delete('t'); + return urlUsed; +} + +var shareOptions = { + socials: ['fbFeed', 'tw', 'reddit', 'email'], + + get url() { + return addCurrentTimeToURL(short_url); + }, + title: player_data.title, + description: player_data.description, + image: player_data.thumbnail, + get embedCode() { + return "<iframe id='ivplayer' width='640' height='360' src='" + + addCurrentTimeToURL(embed_url) + "' style='border:none;'></iframe>"; + } +}; + const storage = (() => { try { if (localStorage.length !== -1) return localStorage; } catch (e) { console.info('No storage available: ' + e); } @@ -716,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); } }); }); |