From 83ab88264880b13e2d0826ee0af8a6f17b18c33e Mon Sep 17 00:00:00 2001 From: PortableProgrammer Date: Fri, 10 Jan 2025 20:37:49 +0000 Subject: Feat: Consolidate/port Card and Compact media viewers --- src/mixins/post.pug | 93 ++++++++++++++++++++------------------------------- src/public/styles.css | 70 ++++++++++++++++++-------------------- 2 files changed, 69 insertions(+), 94 deletions(-) (limited to 'src') diff --git a/src/mixins/post.pug b/src/mixins/post.pug index c4f3bc5..30310a8 100644 --- a/src/mixins/post.pug +++ b/src/mixins/post.pug @@ -28,77 +28,58 @@ mixin post(p, currentUrl) |  ·  a(href=`/comments/${p.id}?from=${from}&sort=${sortQuery}&view=${viewQuery}`) #{fmtnum (p.num_comments)} ↩ if (query.view == "card" && !isPostGallery(p) && !isPostImage(p) && !isPostVideo(p) && p.selftext_html) - div.self-text-overflow(class='card') - if query.view == "card" && (p.spoiler || p.over_18) + div.self-text-overflow.card + if p.spoiler || p.over_18 div.spoiler(id=`spoiler_${p.id}`, onclick=`javascript:document.getElementById('spoiler_${p.id}').style.display = 'none';`) h2 != p.over_18 ? 'nsfw' : 'spoiler' - div.self-text(class='card') + div.self-text.card != convertInlineImageLinks(p.selftext_html) - div.media-preview(class=`${query.view}`) - - var onclick = query.view != "card" ? `toggleDetails('${p.id}')` : `` + if query.view != "card" + div.media-preview + - var onclick = `toggleDetails('${p.id}')` + if isPostGallery(p) + - var item = (p.over_18 ? `/nsfw.svg` : p.spoiler ? `/spoiler.svg` : postGalleryItems(p)[0].url) + img(src=item onclick=onclick) + else if isPostImage(p) + - var url = postThumbnail(p) + img(src=url onclick=onclick) + else if isPostVideo(p) + - var decodedVideos = decodePostVideoUrls(p) + video(autoplay="" muted="" data-dashjs-player="" onclick=`toggleDetails('${p.id}')` poster=decodedVideos[4] width="100px" height="100px") + // Scrubber + source(src=decodedVideos[3]) + else if isPostLink(p) + a(href=p.url) + | ↗ + + details(id=`${p.id}` open=(query.view == "card" && (isPostGallery(p) || isPostImage(p) || isPostVideo(p)))) + summary.expand-post expand media + div.image-viewer if query.view == "card" && (p.spoiler || p.over_18) && (isPostGallery(p) || isPostImage(p) || isPostVideo(p)) div.spoiler(id=`spoiler_${p.id}`, onclick=`javascript:document.getElementById('spoiler_${p.id}').style.display = 'none';`) h2 != p.over_18 ? 'nsfw' : 'spoiler' if isPostGallery(p) - - var item = postGalleryItems(p)[0] - if query.view == "card" - div.gallery(class=`${query.view}`) - each item in postGalleryItems(p) - div.gallery-item(class=`${query.view}`) - a(href=`/media/${item.url}`) - img(src=item.url loading="lazy") - div.gallery-item-idx(class=`${query.view}`) - | #{`${item.idx}/${item.total}`} - else - img(src=item.url onclick=onclick) + div.gallery + each item in postGalleryItems(p) + div.gallery-item + a(href=`/media/${item.url}`) + img(src=item.url loading="lazy") + div.gallery-item-idx + | #{`${item.idx}/${item.total}`} else if isPostImage(p) - - var url = query.view == "card" ? p.url : postThumbnail(p) - #{query.view == "card" ? "a href=/media/" + url : span} - img(src=url onclick=onclick) + a(href=`/media/${p.url}`) + img(src=p.url loading="lazy") else if isPostVideo(p) - var decodedVideos = decodePostVideoUrls(p) - if query.view == "card" - video(controls="" muted="" data-dashjs-player="" preload="metadata" poster=decodedVideos[4]) + video(controls="" muted="" data-dashjs-player="" preload="metadata" playsinline="" poster=decodedVideos[4] objectfit="contain" loading="lazy") // HLS source(src=decodedVideos[0]) // Dash source(src=decodedVideos[1]) // Fallback source(src=decodedVideos[2]) - else - video(autoplay="" muted="" data-dashjs-player="" onclick=`toggleDetails('${p.id}')` width="100px" height="100px") - // Scrubber - source(src=decodedVideos[3]) - else if isPostLink(p) - a(href=p.url) - if (query.view == 'card') - | #{p.domain} - | ↗ - - if query.view == "compact" && (isPostGallery(p) || isPostImage(p) || isPostVideo(p)) - details(id=`${p.id}`) - summary.expand-post expand media - div.image-viewer - if isPostGallery(p) - div.gallery - each item in postGalleryItems(p) - div.gallery-item - div.gallery-item-idx - | #{`${item.idx}/${item.total}`} - a(href=`/media/${item.url}`) - img(src=item.url loading="lazy") - else if isPostImage(p) - a(href=`/media/${p.url}`) - img(src=p.url loading="lazy").post-media - else if isPostVideo(p) - video(controls="" muted="" data-dashjs-player="" preload="metadata" playsinline="" poster=decodedVideos[4] objectfit="contain" loading="lazy").post-media - //HLS - source(src=decodedVideos[0]) - // Dash - source(src=decodedVideos[1]) - // Fallback - source(src=decodedVideos[2]) - button(onclick=`toggleDetails('${p.id}')`) - | close + if (query.view == "compact") + button(onclick=`toggleDetails('${p.id}')`) + | close diff --git a/src/public/styles.css b/src/public/styles.css index d9f6a40..8bfdc72 100644 --- a/src/public/styles.css +++ b/src/public/styles.css @@ -11,6 +11,9 @@ --link-visited-color: #999; --accent: var(--link-color); --error-text-color: red; + --border-radius-card: 8px; + --border-radius-media: 6px; + --border-radius-preview: 4px; font-family: Inter, sans-serif; font-feature-settings: 'ss01' 1, 'kern' 1, 'liga' 1, 'cv05' 1, 'dlig' 1, 'ss01' 1, 'ss07' 1, 'ss08' 1; @@ -47,10 +50,6 @@ body { color: var(--text-color); } -body:has(details.card[open]) { - overflow: hidden; -} - body.media-maximized { /* Fix for Safari User Agent stylesheet */ margin: 0; @@ -169,7 +168,7 @@ nav { .post-container.card { border: 1px solid var(--bg-color-muted); - border-radius: 8px; + border-radius: var(--border-radius-card); display: block; } @@ -198,37 +197,22 @@ nav { text-overflow: ellipsis; } -.media-preview.card { +.image-viewer { position: relative; padding: 0.3rem; padding-bottom: 0.3rem; } -.media-preview.card > img { +.image-viewer > img { cursor: pointer; } -.gallery.card { - align-items: center; - scroll-snap-type: both mandatory; -} - -.gallery-item.card { - max-width: 100%; - width: 100%; - scroll-snap-align: center; -} - -.gallery-item-idx.card { - text-align: center; -} - .spoiler { background-color: rbga(var(--bg-color-muted), 0.2); /* Safari on iOS <= 17 */ -webkit-backdrop-filter: blur(3rem); backdrop-filter: blur(3rem); - border-radius: 4px; + border-radius: var(--border-radius-preview); position: absolute; top: 0; @@ -247,7 +231,7 @@ nav { z-index: 10; } -.gallery-item-idx.card, +.gallery-item-idx, .spoiler > h2 { text-shadow: 0.1rem 0.1rem 1rem var(--bg-color-muted); } @@ -294,15 +278,16 @@ summary::before { object-fit: cover; width: 4rem; height: 4rem; + border-radius: var(--border-radius-preview); } -.media-preview.card { +.image-viewer { padding: unset; } -.media-preview.card img, -.media-preview.card video { - border-radius: 6px; +.image-viewer img, +.image-viewer video { + border-radius: var(--border-radius-media); max-height: 40vh; max-width: 95%; @@ -317,13 +302,13 @@ summary::before { object-fit: fill; } -.media-preview.card a { +.image-viewer a { font-size: 1.5rem; padding: unset; padding-left: 1rem; } -.media-preview.card a:has(img) { +.image-viewer a:has(img) { font-size: 0rem; padding: unset; } @@ -382,12 +367,12 @@ form { width: 5rem; height: 5rem; } - .media-preview.card img, - .media-preview.card video + .image-viewer img, + .image-viewer video { max-height: 50vh; } - .media-preview.card a { + .image-viewer a { font-size: 1rem; margin: 0.7rem; padding: initial; @@ -424,8 +409,8 @@ form { width: 5rem; height: 5rem; } - .media-preview.card img, - .media-preview.card video + .image-viewer img, + .image-viewer video { max-height: 30vh; } @@ -433,7 +418,7 @@ form { font-size: 2rem; padding: 2rem; } - .media-preview.card a { + .image-viewer a { font-size: 1rem; margin: 0.5rem; padding: initial; @@ -464,8 +449,8 @@ form { flex: 1 1 40%; width: 40%; } - .media-preview.card img, - .media-preview.card video + .image-viewer img, + .image-viewer video { max-height: 20vh; } @@ -648,11 +633,20 @@ a { overflow-x: auto; position: relative; padding: 5px; + align-items: center; + scroll-snap-type: both mandatory; } .gallery-item { flex: 0 0 auto; margin-right: 10px; + max-width: 100%; + width: 100%; + scroll-snap-align: center; +} + +.gallery-item-idx { + text-align: center; } .gallery img { -- cgit v1.2.3