Merge pull request #22 from PortableProgrammer/feat-consolidate-card-compact-media

Feat: Consolidate Card and Compact media viewers

5 files changed, 156 insertions, 163 deletions

diff --git a/src/mixins/post.pug b/src/mixins/post.pug
index c4f3bc5..9021f93 100644
--- a/src/mixins/post.pug
+++ b/src/mixins/post.pug
@@ -6,99 +6,76 @@ mixin post(p, currentUrl)
   - var sortQuery = query && query.sort ? query.sort + (query.t ? '&t=' + query.t : '') : 'hot'
   article(class=`post`)
     div.post-container(class=`${query.view} ${p.stickied?"sticky":""}`)
-      div.post-text(class=`${query.view}`)
-        div.title-container(class=`${query.view}`)
-          a(class=`${query.view}`, href=`/comments/${p.id}?from=${from}&sort=${sortQuery}&view=${viewQuery}`)
-            != p.title
-          span.domain   (#{p.domain})
-        div.info-container 
-          p
-            | #{fmtnum(p.ups)} ↑ 
-            if p.gilded > 0
+      div.post-info
+        div.post-text(class=`${query.view}`)
+          div.title-container(class=`${query.view}`)
+            a(class=`${query.view}`, href=`/comments/${p.id}?from=${from}&sort=${sortQuery}&view=${viewQuery}`)
+              != p.title
+            span.domain   (#{p.domain})
+          div.info-container 
+            p
+              | #{fmtnum(p.ups)} ↑ 
+              if p.gilded > 0
+                |  · 
+                span.gilded
+                  | #{p.gilded} ☆
+              span.post-author
+                |  · 
+                | u/#{p.author} 
               |  · 
-              span.gilded
-                | #{p.gilded} ☆
-            span.post-author
+              | #{timeDifference(Date.now(), p.created * 1000)}
               |  · 
-              | u/#{p.author} 
-            |  · 
-            | #{timeDifference(Date.now(), p.created * 1000)}
-            |  · 
-            a(href=`/r/${p.subreddit}?sort=${sortQuery}&view=${viewQuery}`) r/#{p.subreddit}
-            |  · 
-            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.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')
-              != convertInlineImageLinks(p.selftext_html)
-      div.media-preview(class=`${query.view}`)
-        - var onclick = query.view != "card" ? `toggleDetails('${p.id}')` : ``
-        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) 
-        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)
-        else if isPostVideo(p)
-          - var decodedVideos = decodePostVideoUrls(p)
-          if query.view == "card"
-            video(controls="" muted="" data-dashjs-player="" preload="metadata" poster=decodedVideos[4])
-              // 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} 
-            | ↗
+              a(href=`/r/${p.subreddit}?sort=${sortQuery}&view=${viewQuery}`) r/#{p.subreddit}
+              |  · 
+              a(href=`/comments/${p.id}?from=${from}&sort=${sortQuery}&view=${viewQuery}`) #{fmtnum (p.num_comments)} ↩
+          if (query.view == "card" && !isPostMedia(p) && p.selftext_html)
+            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.card
+                != convertInlineImageLinks(p.selftext_html)
+        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(data-dashjs-player="" playsinline="" autoplay="" muted="" onclick=`toggleDetails('${p.id}')` src=decodedVideos[3] poster=decodedVideos[4] width="100px" height="100px")
+            else if isPostLink(p)
+              a(href=p.url)
+                | ↗
 
-    if query.view == "compact" && (isPostGallery(p) || isPostImage(p) || isPostVideo(p))
-      details(id=`${p.id}`)
+      details(id=`${p.id}` open=(query.view == "card" && (isPostMedia(p) || isPostLink(p))) class=`${query.view}`)
         summary.expand-post expand media
         div.image-viewer
+          if query.view == "card" && (p.spoiler || p.over_18) && isPostMedia(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)
             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")
+                  div.gallery-item-idx
+                    | #{`${item.idx}/${item.total}`}
           else if isPostImage(p)
             a(href=`/media/${p.url}`)
-              img(src=p.url loading="lazy").post-media
+              img(src=p.url loading="lazy")
           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])
+            - var decodedVideos = decodePostVideoUrls(p)
+            video(data-dashjs-player="" playsinline="" controls="" muted="" preload="metadata" src=decodedVideos[1] poster=decodedVideos[4])
+          else if isPostLink(p)
+            a(href=p.url)
+              | #{p.domain} ↗
+        if (query.view == "compact")
           button(onclick=`toggleDetails('${p.id}')`)
               | close
diff --git a/src/mixins/postUtils.pug b/src/mixins/postUtils.pug
index b96ff1e..7eef9b2 100644
--- a/src/mixins/postUtils.pug
+++ b/src/mixins/postUtils.pug
@@ -1,4 +1,8 @@
 -
+  function isPostMedia(p) {
+    return isPostImage(p) || isPostGallery(p) || isPostVideo(p);
+  }
+-
   function isPostGallery(p) {
     return (p.is_gallery && p.is_gallery == true);
   }
diff --git a/src/public/styles.css b/src/public/styles.css
index d9f6a40..580dbf9 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: 2vmin;
+  --border-radius-media: 1.5vmin;
+  --border-radius-preview: 1vmin;
 
   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,13 +168,16 @@ nav {
 
 .post-container.card {
   border: 1px solid var(--bg-color-muted);
-  border-radius: 8px;
+  border-radius: var(--border-radius-card);
   display: block;
 }
 
 .post-text.card {
   padding: 0.9rem;
-  padding-top: 0.3rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  overflow-wrap: break-word;
+  max-width: 95%;
 }
 
 .self-text-overflow.card {
@@ -186,6 +188,7 @@ nav {
   overflow: hidden;
   overflow-wrap: break-word;
   display: block;
+  max-width: 98%;
 }
 
 .self-text.card {
@@ -198,37 +201,21 @@ nav {
   text-overflow: ellipsis;
 }
 
-.media-preview.card {
+.image-viewer {
   position: relative;
-  padding: 0.3rem;
-  padding-bottom: 0.3rem;
+  margin: 0.9rem;
 }
 
-.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 +234,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,17 +281,14 @@ summary::before {
   object-fit: cover;
   width: 4rem;
   height: 4rem;
+  border-radius: var(--border-radius-preview);
 }
 
-.media-preview.card {
-  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-height: 50vh;
   max-width: 95%;
 
   display: block;
@@ -317,21 +301,27 @@ summary::before {
   object-fit: fill;
 }
 
-.media-preview.card a {
-  font-size: 1.5rem;
-  padding: unset;
-  padding-left: 1rem;
+.image-viewer.main-content img,
+.image-viewer.main-content video {
+  max-height: 70vh;
+}
+
+.image-viewer.main-content a {
+  margin: unset;
 }
 
-.media-preview.card a:has(img) {
+.image-viewer a:has(img) {
   font-size: 0rem;
   padding: unset;
+  margin: unset;
 }
 
-.media-preview a {
-  font-size: 2rem;
+.media-preview a,
+.image-viewer a {
+  font-size: 1.5rem;
   text-decoration: none;
-  padding: 1rem;
+  padding: unset;
+  margin: 1rem;
 }
 
 .media-maximized {
@@ -372,6 +362,11 @@ form {
 }
 
 @media (min-width: 768px) {
+  :root {
+    --border-radius-card: 1vmin;
+    --border-radius-media: 1vmin;
+    --border-radius-preview: 0.5vmin;  
+  }
   .post, .comments-container, .hero, .header, .footer {
     flex: 1 1 90%;
     width: 90%;
@@ -382,19 +377,21 @@ form {
     width: 5rem;
     height: 5rem;
   }
-  .media-preview.card img,
-  .media-preview.card video
+  .image-viewer img,
+  .image-viewer video
   {
-    max-height: 50vh;
+    max-height: 45vh;
   }
-  .media-preview.card a {
+  .image-viewer a {
     font-size: 1rem;
     margin: 0.7rem;
     padding: initial;
   }
-  .self-text.card {
-    -webkit-line-clamp: 4;
-    line-clamp: 4;
+  .post-text.card {
+    max-width: 100%;
+  }
+  .self-text-overflow.card {
+    max-width: 100%;
   }
   .post-author {
     display: inline
@@ -414,6 +411,11 @@ form {
 }
 
 @media (min-width: 1080px) {
+  :root {
+    --border-radius-card: 0.5vmin;
+    --border-radius-media: 0.5vmin;
+    --border-radius-preview: 0.3vmin;
+  }
   .post, .comments-container, .hero, .header, .footer {
     flex: 1 1 60%;
     width: 60%;
@@ -424,23 +426,23 @@ form {
     width: 5rem;
     height: 5rem;
   }
-  .media-preview.card img,
-  .media-preview.card video
+  .image-viewer img,
+  .image-viewer video
   {
-    max-height: 30vh;
+    max-height: 35vh;
   }
   .media-preview a {
     font-size: 2rem;
     padding: 2rem;
   }
-  .media-preview.card a {
+  .image-viewer a {
     font-size: 1rem;
-    margin: 0.5rem;
+    margin: 1rem;
     padding: initial;
   }
   .self-text.card {
-    -webkit-line-clamp: 6;
-    line-clamp: 6;
+    -webkit-line-clamp: 4;
+    line-clamp: 4;
   }
   .post-author {
     display: inline
@@ -464,10 +466,10 @@ form {
     flex: 1 1 40%;
     width: 40%;
   }
-  .media-preview.card img,
-  .media-preview.card video
+  .image-viewer img,
+  .image-viewer video
   {
-    max-height: 20vh;
+    max-height: 30vh;
   }
   .sort-opts,
   .view-opts {
@@ -494,7 +496,7 @@ form {
   margin-top: 10px;
 }
 
-.post-container {
+.post-info {
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -648,16 +650,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 img {
-    width: auto;
-    max-height: 500px;
+.gallery-item-idx {
+  text-align: center;
 }
 
 .post-title {
diff --git a/src/views/comments.pug b/src/views/comments.pug
index 1caf65a..1265609 100644
--- a/src/views/comments.pug
+++ b/src/views/comments.pug
@@ -47,23 +47,24 @@ html
         h2.post-title
           != post.title
 
-        if isPostGallery(post)
-          div.gallery
-            each item in postGalleryItems(post)
-              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(post)
-          a(href=`/media/${post.url}`)
-            img(src=post.url).post-media
-        else if isPostVideo(post)
-          - var url = post.secure_media.reddit_video.dash_url
-          video(controls data-dashjs-player src=`${url}`).post-media
-        else if isPostLink(post)
-          a(href=post.url)
-            | #{post.url}
+        div.image-viewer.main-content
+          if isPostGallery(post)
+            div.gallery
+              each item in postGalleryItems(post)
+                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(post)
+            a(href=`/media/${post.url}`)
+              img(src=post.url).post-media
+          else if isPostVideo(post)
+            - var url = post.secure_media.reddit_video.dash_url
+            video(controls data-dashjs-player src=`${url}`).post-media
+          else if isPostLink(post)
+            a(href=post.url)
+              | #{post.domain} ↗
 
         if post.selftext_html
           div.self-text
diff --git a/src/views/media.pug b/src/views/media.pug
index e945704..3a59542 100644
--- a/src/views/media.pug
+++ b/src/views/media.pug
@@ -3,13 +3,18 @@ doctype html
 html
   +head("home")
   script(type='text/javascript').
-    function toggleZoom() {
+    function toggleZoom(event) {
+      const percentX = event.offsetX / event.target.width;
+      const percentY = event.offsetY / event.target.height;
       Array.from(document.getElementsByClassName('media-maximized')).forEach(element => element.classList.toggle('zoom'));
+      const moveClientX = (event.target.width * percentX) + event.target.offsetLeft - (event.view.visualViewport.width / 2)
+      const moveClientY = (event.target.height * percentY) + event.target.offsetTop - (event.view.visualViewport.height / 2);
+      event.target.parentElement.scrollTo(moveClientX, moveClientY);
     }
 
   body.media-maximized
     div.media-maximized.container
       if kind == 'img'
-        img(src=url onclick=`toggleZoom()`).media-maximized
+        img(src=url onclick=`toggleZoom(event)`).media-maximized
       else
         video(src=url controls).media-maximized