Skip to content

Commit

Permalink
Merge pull request #22 from PortableProgrammer/feat-consolidate-card-…
Browse files Browse the repository at this point in the history 
…compact-media

Feat: Consolidate Card and Compact media viewers
  • Loading branch information
@oppiliappan
oppiliappan authored Jan 22, 2025
2 parents f983c13 + 7e73b06 commit 71280f0
Show file tree
Hide file tree
Showing 5 changed files with 156 additions and 163 deletions.
137 changes: 57 additions & 80 deletions src/mixins/post.pug
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
4 changes: 4 additions & 0 deletions src/mixins/postUtils.pug
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
-
function isPostMedia(p) {
return isPostImage(p) || isPostGallery(p) || isPostVideo(p);
}
-
function isPostGallery(p) {
return (p.is_gallery && p.is_gallery == true);
Expand Down
Loading

0 comments on commit 71280f0

Please sign in to comment.