Feat: Consolidate/port Card and Compact media viewers

2 files changed, 69 insertions, 94 deletions

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 {