selfhostable, read-only reddit client
improvements to media preview, and galleries
+80
-17
+1
-1
src/geddit.js
+1
-1
src/geddit.js
+33
-5
src/mixins/post.pug
+33
-5
src/mixins/post.pug
···
15
15
div.info-item
16
16
a(href=`/comments/${p.id}`) #{fmtnum (p.num_comments)} #{fmttxt(p.num_comments, 'comment')}
17
17
div.media-preview
18
-
if p.post_hint == "image" || p.post_hint == "link"
18
+
if p.is_gallery && p.is_gallery == true
19
+
if p.gallery_data
20
+
if p.gallery_data.items
21
+
- var item = p.gallery_data.items[0]
22
+
- var url = `https://i.redd.it/${item.media_id}.jpg`
23
+
img(src=url width='100px' height='100px' onclick=`toggleDetails('${p.id}')`)
24
+
else if p.post_hint == "image" || p.post_hint == "link"
19
25
if p.thumbnail && p.thumbnail != "self" || p.thumbnail != "default"
20
-
a(href=p.url)
21
-
img(src=p.thumbnail width='100px' height='100px')
26
+
img(src=p.thumbnail width='100px' height='100px' onclick=`toggleDetails('${p.id}')`)
22
27
else if p.post_hint == "hosted:video"
23
28
- var url = p.secure_media.reddit_video.dash_url
24
-
a(href=url)
25
-
video(src=url controls data-dashjs-player="" width='100px' height='100px')
29
+
video(src=url data-dashjs-player width='100px' height='100px' onclick=`toggleDetails('${p.id}')`)
30
+
31
+
if p.is_gallery && p.is_gallery == true
32
+
if p.gallery_data
33
+
if p.gallery_data.items
34
+
details(id=`${p.id}`)
35
+
summary expand gallery
36
+
each item in p.gallery_data.items
37
+
- var url = `https://i.redd.it/${item.media_id}.jpg`
38
+
a(href=`/media/${url}`)
39
+
img(src=url).post-media
40
+
button(onclick=`toggleDetails('${p.id}')`) close
41
+
if (p.post_hint == "image" || p.post_hint == "link") && p.thumbnail && p.thumbnail != "self" && p.thumbnail != "default"
42
+
details(id=`${p.id}`)
43
+
summary expand image
44
+
a(href=`/media/${p.url}`)
45
+
img(src=p.url).post-media
46
+
button(onclick=`toggleDetails('${p.id}')`) close
47
+
else if p.post_hint == "hosted:video"
48
+
details(id=`${p.id}`)
49
+
summary expand video
50
+
- var url = p.secure_media.reddit_video.dash_url
51
+
a(href=url)
52
+
video(src=url controls data-dashjs-player).post-media
53
+
button(onclick=`toggleDetails('${p.id}')`) close
26
54
+17
-5
src/public/styles.css
+17
-5
src/public/styles.css
···
60
60
@media (min-width: 768px) {
61
61
.post, .comments-container, .hero, .header {
62
62
flex: 1 1 65%;
63
-
width: 65%;
63
+
width: 75%;
64
64
}
65
65
.info-container, .comment-info-container {
66
66
font-size: 0.8rem;
···
121
121
margin-left: auto;
122
122
}
123
123
124
+
.media-preview img {
125
+
object-fit: cover;
126
+
}
127
+
124
128
.post-media {
125
129
display: block;
126
130
margin: 0 auto;
···
141
145
142
146
.title-container > a:visited {
143
147
color: #999;
144
-
}
145
-
146
-
.comment-info-container {
147
-
margin-bottom: -12px;
148
148
}
149
149
150
150
hr {
···
171
171
code {
172
172
overflow-x: auto;
173
173
}
174
+
175
+
p {
176
+
margin-top: 5px;
177
+
}
178
+
179
+
.comment-body {
180
+
text-align: left;
181
+
}
182
+
183
+
summary {
184
+
display: none;
185
+
}
+17
-2
src/routes/index.js
+17
-2
src/routes/index.js
···
11
11
});
12
12
13
13
// GET /r/:id
14
-
router.get('/r/:subreddit', async (req, res) => {
14
+
router.get('/r/:subreddit/:sort?', async (req, res) => {
15
15
var subreddit = req.params.subreddit;
16
+
var query = req.query;
17
+
var sort = req.params.sort ? req.params.sort : 'hot';
18
+
var options = req.query;
16
19
17
-
var postsReq = G.getSubmissions(`r/${subreddit}`);
20
+
// var postsReq = G.getSubmissions(sort, `r/${subreddit}`, options);
21
+
var postsReq = G.getSubmissions(sort, `${subreddit}`, options);
18
22
var aboutReq = G.getSubreddit(`${subreddit}`);
19
23
20
24
var [posts, about] = await Promise.all([postsReq, aboutReq]);
···
34
38
// GET /subs
35
39
router.get('/subs', async (req, res) => {
36
40
res.render('subs');
41
+
});
42
+
43
+
// GET /media
44
+
router.get('/media/*', async (req, res) => {
45
+
var url = req.params[0];
46
+
console.log(`making request to ${url}`);
47
+
return await fetch(url, {
48
+
headers: {
49
+
Accept: "*/*",
50
+
}
51
+
});
37
52
});
38
53
39
54
module.exports = router;
+1
-2
src/views/comments.pug
+1
-2
src/views/comments.pug
+11
-2
src/views/index.pug
+11
-2
src/views/index.pug
···
27
27
b.appendChild(button);
28
28
}
29
29
30
+
function toggleDetails(details_id) {
31
+
var detailsElement = document.getElementById(details_id);
32
+
if (detailsElement) {
33
+
detailsElement.open = !detailsElement.open;
34
+
}
35
+
}
36
+
30
37
document.addEventListener('DOMContentLoaded', ()=>updateButton("#{subreddit}"));
31
38
body
32
39
main#content
···
44
51
if about
45
52
p #{about.public_description}
46
53
div#button-container
54
+
a(href=`/r/${subreddit}`)
47
55
48
-
each child in posts.posts
49
-
+post(child.data)
56
+
if posts
57
+
each child in posts.posts
58
+
+post(child.data)
50
59
51
60
script(src='https://unpkg.com/htmx.org@1.9.10')