Multi-album support

src/fetchers.ts

@@ -31,9 +31,26 @@ const agent = {
     : httpsGlobalAgent
 };
 
+export const fetchAlbumURL = async (albumID: string): Promise<string> => {
+  // https://imgur.com/a/DfEsrAB
+  const response = await got(`https://imgur.com/a/${albumID}`, { agent });
+  const $ = cheerio.load(response.body);
+  const url = $('head meta[property="og:image"]').attr('content')?.replace(/\/\?.*$/, '');
+  if (!url) {
+    throw new Error('Could not read image url');
+  }
+  return url;
+};
+
+export const fetchAlbum = async (albumID: string): Promise<Comment[]> => {
+  // https://api.imgur.com/post/v1/albums/zk7mdKH?client_id=${CLIENT_ID}&include=media%2Caccount
+  const response = await got(`https://api.imgur.com/post/v1/albums/${albumID}?client_id=${CONFIG.imgur_client_id}&include=media%2Caccount`, { agent });
+  return JSON.parse(response.body);
+}
+
 export const fetchComments = async (galleryID: string): Promise<Comment[]> => {
   // https://api.imgur.com/comment/v1/comments?client_id=${CLIENT_ID}%5Bpost%5D=eq%3Ag1bk7CB&include=account%2Cadconfig&per_page=30&sort=best
-  const response = await got(`https://api.imgur.com/comment/v1/comments?client_id=${CONFIG.imgur_client_id}&filter%5Bpost%5D=eq%3A${galleryID}&include=account%2Cadconfig&per_page=30&sort=best`);
+  const response = await got(`https://api.imgur.com/comment/v1/comments?client_id=${CONFIG.imgur_client_id}&filter%5Bpost%5D=eq%3A${galleryID}&include=account%2Cadconfig&per_page=30&sort=best`, { agent });
   return JSON.parse(response.body).data;
 }
 
@@ -53,16 +70,5 @@ export const fetchGallery = async (galleryID: string): Promise<Gallery> => {
   return postData;
 };
 
-export const fetchAlbumURL = async (albumID: string): Promise<string> => {
-  // https://imgur.com/a/DfEsrAB
-  const response = await got(`https://imgur.com/a/${albumID}`, { agent });
-  const $ = cheerio.load(response.body);
-  const url = $('head meta[property="og:image"]').attr('content')?.replace(/\/\?.*$/, '');
-  if (!url) {
-    throw new Error('Could not read image url');
-  }
-  return url;
-};
-
 export const fetchMedia = async (filename: string): Promise<Response<string>> =>
   await got(`https://i.imgur.com/${filename}`, { agent });

src/handlers.ts

@@ -1,6 +1,6 @@
 import Hapi = require('@hapi/hapi');
 import '@hapi/vision';
-import { fetchAlbumURL, fetchComments, fetchGallery, fetchMedia } from './fetchers';
+import { fetchAlbum, fetchAlbumURL, fetchComments, fetchGallery, fetchMedia } from './fetchers';
 import * as util from './util';
 
 import CONFIG from './config';
@@ -18,12 +18,23 @@ export const handleMedia = async (request: Hapi.Request, h: Hapi.ResponseToolkit
 
 export const handleAlbum = async (request: Hapi.Request, h: Hapi.ResponseToolkit) => {
   // https://imgur.com/a/DfEsrAB
-  const url = await fetchAlbumURL(request.params.albumID);
+  const albumID = request.params.albumID;
-  return h.view('album', {
+  if (CONFIG.disable_comments) {
-    url,
+    const url = await fetchAlbumURL(albumID);
-    title: CONFIG.page_title,
+    return h.view('bare-album', {
-    util,
+      url,
-  });
+      pageTitle: CONFIG.page_title,
+      util,
+    });
+  } else {
+    const album = await fetchAlbum(albumID);
+    return h.view('gallery', {
+      ...album,
+      pageTitle: CONFIG.page_title,
+      util,
+    });
+
+  }
 };
 
 export const handleUser = (request: Hapi.Request, h: Hapi.ResponseToolkit) => {
@@ -45,7 +56,7 @@ export const handleGallery = async (request: Hapi.Request, h: Hapi.ResponseToolk
   return h.view('gallery', {
     ...gallery,
     comments,
-    title: CONFIG.page_title,
+    pageTitle: CONFIG.page_title,
     util,
   });
 };

static/css/styles.css

@@ -137,3 +137,20 @@ svg:not(:root) {
   font-size: 12px;
   line-height: 12px;
 }
+
+.Gallery-ContentWrapper .Gallery-Content--media {
+    max-width: 100%;
+    margin-bottom: 24px;
+    background-color: rgba(0,0,0,.1);
+    min-height: 140px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+}
+
+.Gallery-ContentWrapper .Gallery-Content--mediaContainer {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}

templates/bare-album.pug

@@ -1,6 +1,6 @@
 html
   head
-    title #{title}
+    title #{pageTitle}
     include includes/head.pug
   body
     img(src=util.proxyURL(url), alt='' class='album-img')

templates/gallery.pug

@@ -32,9 +32,16 @@ mixin commentbox(comment)
     div(class='GalleryComment-replies')
       each reply in comment.comments
         +commentbox(reply)
+
+mixin media(m)
+  div(class='Gallery-Content--mediaContainer')
+    div(class='Gallery-Content--media')
+      div(class='imageContainer')
+        img(src=util.proxyURL(m.url))
+
 html
   head
-    title #{title}
+    title #{pageTitle}
     include includes/head.pug
   body
     div(class='Gallery-Content')
@@ -42,24 +49,26 @@ html
         div(class='Gallery-Title')
           span #{title}
         div(class='Gallery-Byline')
-          a(class='author-link' title='View profile of '+account.username, href='/user/'+account.username)
+          if account_id > 0
-            span(class='UserAvatar', title=account.username, style='background-image: url("' + util.proxyURL(account.avatar_url) + '");')
+            a(class='author-link' title='View profile of '+account.username, href='/user/'+account.username)
+              span(class='UserAvatar', title=account.username, style='background-image: url("' + util.proxyURL(account.avatar_url) + '");')
           div(class='Info-Wrapper')
-            div(class='Info')
+            if account_id > 0
-              a(class='author-name' title='View profile of '+account.username, href='/user/'+account.username) #{account.username}
+              div(class='Info')
+                a(class='author-name' title='View profile of '+account.username, href='/user/'+account.username) #{account.username}
             div(class='Meta')
               span #{view_count} Views
               span(class='delimiter') •
               span(title=created_at) #{created_at}
       div(class='Gallery-ContentWrapper')
-        div(class='Gallery-Content--media')
+        each m in media
-          div(class='imageContainer')
+          +media(m)
-            img(src=util.proxyURL(cover.url))
+      if tags
-      div(class='Gallery-Content--tags')
+        div(class='Gallery-Content--tags')
-        each tag in tags
+          each tag in tags
-          a(class='TagPill'
+            a(class='TagPill'
-            style='background: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)) repeat scroll 0% 0%, rgba(0, 0, 0, 0) url("/' + tag.background_id + '_d.jpg?maxwidth=200&fidelity=grand") repeat scroll 0% 0%;'
+              style='background: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)) repeat scroll 0% 0%, rgba(0, 0, 0, 0) url("/' + tag.background_id + '_d.jpg?maxwidth=200&fidelity=grand") repeat scroll 0% 0%;'
-            href='/t/'+tag.tag) #{tag.tag}
+              href='/t/'+tag.tag) #{tag.tag}
     if comments != null
       div(class='CommentsList')
         div(class='CommentsList-headline')