improvements to media preview, and galleries

6 files changed, 80 insertions, 17 deletions

diff --git a/src/geddit.js b/src/geddit.js
index 825c3a9..93477e7 100644
--- a/src/geddit.js
+++ b/src/geddit.js
@@ -14,7 +14,7 @@ class Geddit {
 
     async getSubmissions(sort = null, subreddit = null, options = {}) {
         let params = {
-            limit: 25,
+            limit: 50,
             include_over_18: true,
         }
 
diff --git a/src/mixins/post.pug b/src/mixins/post.pug
index cbe2365..fc765ab 100644
--- a/src/mixins/post.pug
+++ b/src/mixins/post.pug
@@ -15,12 +15,40 @@ mixin post(p)
           div.info-item 
             a(href=`/comments/${p.id}`) #{fmtnum (p.num_comments)} #{fmttxt(p.num_comments, 'comment')} 
       div.media-preview
-        if p.post_hint == "image" || p.post_hint == "link"
+        if p.is_gallery && p.is_gallery == true
+          if p.gallery_data
+            if p.gallery_data.items
+              - var item = p.gallery_data.items[0]
+              - var url = `https://i.redd.it/${item.media_id}.jpg`
+              img(src=url width='100px' height='100px' onclick=`toggleDetails('${p.id}')`) 
+        else if p.post_hint == "image" || p.post_hint == "link"
           if p.thumbnail && p.thumbnail != "self" || p.thumbnail != "default"
-            a(href=p.url)
-              img(src=p.thumbnail width='100px' height='100px') 
+            img(src=p.thumbnail width='100px' height='100px' onclick=`toggleDetails('${p.id}')`) 
         else if p.post_hint == "hosted:video"
           - var url = p.secure_media.reddit_video.dash_url
-          a(href=url)
-            video(src=url controls data-dashjs-player="" width='100px' height='100px')
+          video(src=url data-dashjs-player width='100px' height='100px' onclick=`toggleDetails('${p.id}')`)
+
+    if p.is_gallery && p.is_gallery == true
+      if p.gallery_data
+        if p.gallery_data.items
+          details(id=`${p.id}`)
+            summary expand gallery
+            each item in p.gallery_data.items
+              - var url = `https://i.redd.it/${item.media_id}.jpg`
+              a(href=`/media/${url}`)
+                  img(src=url).post-media
+            button(onclick=`toggleDetails('${p.id}')`) close
+    if (p.post_hint == "image" || p.post_hint == "link") && p.thumbnail && p.thumbnail != "self" && p.thumbnail != "default"
+      details(id=`${p.id}`)
+        summary expand image
+        a(href=`/media/${p.url}`)
+          img(src=p.url).post-media
+        button(onclick=`toggleDetails('${p.id}')`) close
+    else if p.post_hint == "hosted:video"
+      details(id=`${p.id}`)
+        summary expand video
+        - var url = p.secure_media.reddit_video.dash_url
+        a(href=url)
+          video(src=url controls data-dashjs-player).post-media
+        button(onclick=`toggleDetails('${p.id}')`) close
 
diff --git a/src/public/styles.css b/src/public/styles.css
index 385b341..0d0998d 100644
--- a/src/public/styles.css
+++ b/src/public/styles.css
@@ -60,7 +60,7 @@ nav {
 @media (min-width: 768px) {
   .post, .comments-container, .hero, .header {
     flex: 1 1 65%;
-    width: 65%;
+    width: 75%;
   }
   .info-container, .comment-info-container {
     font-size: 0.8rem;
@@ -121,6 +121,10 @@ nav {
   margin-left: auto;
 }
 
+.media-preview img {
+  object-fit: cover;
+}
+
 .post-media {
   display: block;
   margin: 0 auto;
@@ -143,10 +147,6 @@ nav {
   color: #999;
 }
 
-.comment-info-container {
-  margin-bottom: -12px;
-}
-
 hr {
   border 1px solid #000;
 }
@@ -171,3 +171,15 @@ pre {
 code {
   overflow-x: auto;
 }
+
+p {
+  margin-top: 5px;
+}
+
+.comment-body {
+  text-align: left;
+}
+
+summary {
+  display: none;
+}
diff --git a/src/routes/index.js b/src/routes/index.js
index f43ee6f..867a223 100644
--- a/src/routes/index.js
+++ b/src/routes/index.js
@@ -11,10 +11,14 @@ router.get('/', async (req, res) => {
 });
 
 // GET /r/:id
-router.get('/r/:subreddit', async (req, res) => {
+router.get('/r/:subreddit/:sort?', async (req, res) => {
   var subreddit = req.params.subreddit;
+  var query = req.query;
+  var sort = req.params.sort ? req.params.sort : 'hot';
+  var options = req.query;
 
-  var postsReq = G.getSubmissions(`r/${subreddit}`);
+  // var postsReq = G.getSubmissions(sort, `r/${subreddit}`, options);
+  var postsReq = G.getSubmissions(sort, `${subreddit}`, options);
   var aboutReq = G.getSubreddit(`${subreddit}`);
 
   var [posts, about] = await Promise.all([postsReq, aboutReq]);
@@ -36,6 +40,17 @@ router.get('/subs', async (req, res) => {
   res.render('subs');
 });
 
+// GET /media
+router.get('/media/*', async (req, res) => {
+  var url = req.params[0];
+  console.log(`making request to ${url}`);
+  return await fetch(url, {
+    headers: {
+      Accept: "*/*",
+    }
+  });
+});
+
 module.exports = router;
 
 function unescape_submission(response) {
diff --git a/src/views/comments.pug b/src/views/comments.pug
index 2b2b76e..7bd1f9e 100644
--- a/src/views/comments.pug
+++ b/src/views/comments.pug
@@ -10,8 +10,7 @@ html
   body
     main#content
       div.hero
-        a(href=`/r/${post.subreddit}`)
-          h4 ← r/#{post.subreddit}
+        h4 r/#{post.subreddit}
         h2 #{post.title}
 
         if post.post_hint == 'image'
diff --git a/src/views/index.pug b/src/views/index.pug
index 8bbef65..9ac34a4 100644
--- a/src/views/index.pug
+++ b/src/views/index.pug
@@ -27,6 +27,13 @@ html
       b.appendChild(button);
     }
 
+    function toggleDetails(details_id) {
+      var detailsElement = document.getElementById(details_id);
+      if (detailsElement) {
+        detailsElement.open = !detailsElement.open;
+      }
+    }
+
     document.addEventListener('DOMContentLoaded', ()=>updateButton("#{subreddit}"));
   body
     main#content
@@ -44,8 +51,10 @@ html
         if about
           p #{about.public_description}
         div#button-container
+        a(href=`/r/${subreddit}`)
 
-      each child in posts.posts
-        +post(child.data)
+      if posts
+        each child in posts.posts
+          +post(child.data)
 
     script(src='https://unpkg.com/[email protected]')