Skip to content

Commit 71280f0

Browse files
oppiliappanoppiliappan
authored
Merge pull request oppiliappan#22 from PortableProgrammer/feat-consolidate-card-compact-media
Feat: Consolidate Card and Compact media viewers
2 parents f983c13 + 7e73b06 commit 71280f0

File tree

5 files changed

+156
-163
lines changed

5 files changed

+156
-163
lines changed

‎src/mixins/post.pug

+57-80
Original file line numberDiff line numberDiff line change
@@ -6,99 +6,76 @@ mixin post(p, currentUrl)
66
- var sortQuery = query && query.sort ? query.sort + (query.t ? '&t=' + query.t : '') : 'hot'
77
article(class=`post`)
88
div.post-container(class=`${query.view} ${p.stickied?"sticky":""}`)
9-
div.post-text(class=`${query.view}`)
10-
div.title-container(class=`${query.view}`)
11-
a(class=`${query.view}`, href=`/comments/${p.id}?from=${from}&sort=${sortQuery}&view=${viewQuery}`)
12-
!= p.title
13-
span.domain (#{p.domain})
14-
div.info-container
15-
p
16-
| #{fmtnum(p.ups)} ↑
17-
if p.gilded > 0
9+
div.post-info
10+
div.post-text(class=`${query.view}`)
11+
div.title-container(class=`${query.view}`)
12+
a(class=`${query.view}`, href=`/comments/${p.id}?from=${from}&sort=${sortQuery}&view=${viewQuery}`)
13+
!= p.title
14+
span.domain (#{p.domain})
15+
div.info-container
16+
p
17+
| #{fmtnum(p.ups)} ↑
18+
if p.gilded > 0
19+
|  · 
20+
span.gilded
21+
| #{p.gilded} ☆
22+
span.post-author
23+
|  · 
24+
| u/#{p.author}
1825
|  · 
19-
span.gilded
20-
| #{p.gilded} ☆
21-
span.post-author
26+
| #{timeDifference(Date.now(), p.created * 1000)}
2227
|  · 
23-
| u/#{p.author}
24-
|  · 
25-
| #{timeDifference(Date.now(), p.created * 1000)}
26-
|  · 
27-
a(href=`/r/${p.subreddit}?sort=${sortQuery}&view=${viewQuery}`) r/#{p.subreddit}
28-
|  · 
29-
a(href=`/comments/${p.id}?from=${from}&sort=${sortQuery}&view=${viewQuery}`) #{fmtnum (p.num_comments)} ↩
30-
if (query.view == "card" && !isPostGallery(p) && !isPostImage(p) && !isPostVideo(p) && p.selftext_html)
31-
div.self-text-overflow(class='card')
32-
if query.view == "card" && (p.spoiler || p.over_18)
33-
div.spoiler(id=`spoiler_${p.id}`, onclick=`javascript:document.getElementById('spoiler_${p.id}').style.display = 'none';`)
34-
h2
35-
!= p.over_18 ? 'nsfw' : 'spoiler'
36-
div.self-text(class='card')
37-
!= convertInlineImageLinks(p.selftext_html)
38-
div.media-preview(class=`${query.view}`)
39-
- var onclick = query.view != "card" ? `toggleDetails('${p.id}')` : ``
40-
if query.view == "card" && (p.spoiler || p.over_18) && (isPostGallery(p) || isPostImage(p) || isPostVideo(p))
41-
div.spoiler(id=`spoiler_${p.id}`, onclick=`javascript:document.getElementById('spoiler_${p.id}').style.display = 'none';`)
42-
h2
43-
!= p.over_18 ? 'nsfw' : 'spoiler'
44-
if isPostGallery(p)
45-
- var item = postGalleryItems(p)[0]
46-
if query.view == "card"
47-
div.gallery(class=`${query.view}`)
48-
each item in postGalleryItems(p)
49-
div.gallery-item(class=`${query.view}`)
50-
a(href=`/media/${item.url}`)
51-
img(src=item.url loading="lazy")
52-
div.gallery-item-idx(class=`${query.view}`)
53-
| #{`${item.idx}/${item.total}`}
54-
else
55-
img(src=item.url onclick=onclick)
56-
else if isPostImage(p)
57-
- var url = query.view == "card" ? p.url : postThumbnail(p)
58-
#{query.view == "card" ? "a href=/media/" + url : span}
59-
img(src=url onclick=onclick)
60-
else if isPostVideo(p)
61-
- var decodedVideos = decodePostVideoUrls(p)
62-
if query.view == "card"
63-
video(controls="" muted="" data-dashjs-player="" preload="metadata" poster=decodedVideos[4])
64-
// HLS
65-
source(src=decodedVideos[0])
66-
// Dash
67-
source(src=decodedVideos[1])
68-
// Fallback
69-
source(src=decodedVideos[2])
70-
else
71-
video(autoplay="" muted="" data-dashjs-player="" onclick=`toggleDetails('${p.id}')` width="100px" height="100px")
72-
// Scrubber
73-
source(src=decodedVideos[3])
74-
else if isPostLink(p)
75-
a(href=p.url)
76-
if (query.view == 'card')
77-
| #{p.domain}
78-
| ↗
28+
a(href=`/r/${p.subreddit}?sort=${sortQuery}&view=${viewQuery}`) r/#{p.subreddit}
29+
|  · 
30+
a(href=`/comments/${p.id}?from=${from}&sort=${sortQuery}&view=${viewQuery}`) #{fmtnum (p.num_comments)} ↩
31+
if (query.view == "card" && !isPostMedia(p) && p.selftext_html)
32+
div.self-text-overflow.card
33+
if p.spoiler || p.over_18
34+
div.spoiler(id=`spoiler_${p.id}`, onclick=`javascript:document.getElementById('spoiler_${p.id}').style.display = 'none';`)
35+
h2
36+
!= p.over_18 ? 'nsfw' : 'spoiler'
37+
div.self-text.card
38+
!= convertInlineImageLinks(p.selftext_html)
39+
if query.view != "card"
40+
div.media-preview
41+
- var onclick = `toggleDetails('${p.id}')`
42+
if isPostGallery(p)
43+
- var item = (p.over_18 ? `/nsfw.svg` : p.spoiler ? `/spoiler.svg` : postGalleryItems(p)[0].url)
44+
img(src=item onclick=onclick)
45+
else if isPostImage(p)
46+
- var url = postThumbnail(p)
47+
img(src=url onclick=onclick)
48+
else if isPostVideo(p)
49+
- var decodedVideos = decodePostVideoUrls(p)
50+
video(data-dashjs-player="" playsinline="" autoplay="" muted="" onclick=`toggleDetails('${p.id}')` src=decodedVideos[3] poster=decodedVideos[4] width="100px" height="100px")
51+
else if isPostLink(p)
52+
a(href=p.url)
53+
| ↗
7954

80-
if query.view == "compact" && (isPostGallery(p) || isPostImage(p) || isPostVideo(p))
81-
details(id=`${p.id}`)
55+
details(id=`${p.id}` open=(query.view == "card" && (isPostMedia(p) || isPostLink(p))) class=`${query.view}`)
8256
summary.expand-post expand media
8357
div.image-viewer
58+
if query.view == "card" && (p.spoiler || p.over_18) && isPostMedia(p)
59+
div.spoiler(id=`spoiler_${p.id}`, onclick=`javascript:document.getElementById('spoiler_${p.id}').style.display = 'none';`)
60+
h2
61+
!= p.over_18 ? 'nsfw' : 'spoiler'
8462
if isPostGallery(p)
8563
div.gallery
8664
each item in postGalleryItems(p)
8765
div.gallery-item
88-
div.gallery-item-idx
89-
| #{`${item.idx}/${item.total}`}
9066
a(href=`/media/${item.url}`)
9167
img(src=item.url loading="lazy")
68+
div.gallery-item-idx
69+
| #{`${item.idx}/${item.total}`}
9270
else if isPostImage(p)
9371
a(href=`/media/${p.url}`)
94-
img(src=p.url loading="lazy").post-media
72+
img(src=p.url loading="lazy")
9573
else if isPostVideo(p)
96-
video(controls="" muted="" data-dashjs-player="" preload="metadata" playsinline="" poster=decodedVideos[4] objectfit="contain" loading="lazy").post-media
97-
//HLS
98-
source(src=decodedVideos[0])
99-
// Dash
100-
source(src=decodedVideos[1])
101-
// Fallback
102-
source(src=decodedVideos[2])
74+
- var decodedVideos = decodePostVideoUrls(p)
75+
video(data-dashjs-player="" playsinline="" controls="" muted="" preload="metadata" src=decodedVideos[1] poster=decodedVideos[4])
76+
else if isPostLink(p)
77+
a(href=p.url)
78+
| #{p.domain} ↗
79+
if (query.view == "compact")
10380
button(onclick=`toggleDetails('${p.id}')`)
10481
| close

‎src/mixins/postUtils.pug

+4
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
-
2+
function isPostMedia(p) {
3+
return isPostImage(p) || isPostGallery(p) || isPostVideo(p);
4+
}
15
-
26
function isPostGallery(p) {
37
return (p.is_gallery && p.is_gallery == true);

0 commit comments

Comments
 (0)