Add new media grid and gallery views

Fixes #199
Fixes #1342

src/views/general.nim

@@ -50,7 +50,7 @@ proc renderHead*(prefs: Prefs; cfg: Config; req: Request; titleText=""; desc="";
   let opensearchUrl = getUrlPrefix(cfg) & "/opensearch"
 
   buildHtml(head):
-    link(rel="stylesheet", type="text/css", href="/css/style.css?v=29")
+    link(rel="stylesheet", type="text/css", href="/css/style.css?v=30")
     link(rel="stylesheet", type="text/css", href="/css/fontello.css?v=4")
 
     if theme.len > 0:

src/views/profile.nim

@@ -102,17 +102,22 @@ proc renderProtected(username: string): VNode =
 
 proc renderProfile*(profile: var Profile; prefs: Prefs; path: string): VNode =
   profile.tweets.query.fromUser = @[profile.user.username]
+  let
+    isGalleryView = profile.tweets.query.kind == media and
+      profile.tweets.query.view == "gallery"
+    viewClass = if isGalleryView: " media-only" else: ""
 
-  buildHtml(tdiv(class="profile-tabs")):
-    if not prefs.hideBanner:
+  buildHtml(tdiv(class=("profile-tabs" & viewClass))):
+    if not isGalleryView and not prefs.hideBanner:
       tdiv(class="profile-banner"):
         renderBanner(profile.user.banner)
 
-    let sticky = if prefs.stickyProfile: " sticky" else: ""
-    tdiv(class=("profile-tab" & sticky)):
-      renderUserCard(profile.user, prefs)
-      if profile.photoRail.len > 0:
-        renderPhotoRail(profile)
+    if not isGalleryView:
+      let sticky = if prefs.stickyProfile: " sticky" else: ""
+      tdiv(class=("profile-tab" & sticky)):
+        renderUserCard(profile.user, prefs)
+        if profile.photoRail.len > 0:
+          renderPhotoRail(profile)
 
     if profile.user.protected:
       renderProtected(profile.user.username)

src/views/search.nim

@@ -39,6 +39,19 @@ proc renderProfileTabs*(query: Query; username: string): VNode =
     li(class=query.getTabClass(tweets)):
       a(href=(link & "/search")): text "Search"
 
+proc renderMediaViewTabs*(query: Query; username: string): VNode =
+  let currentView = if query.view.len > 0: query.view else: "timeline"
+  let base = "/" & username & "/media?view="
+  func cls(view: string): string =
+    if currentView == view: "tab-item active" else: "tab-item"
+  buildHtml(ul(class="tab media-view-tabs")):
+    li(class=cls("timeline")):
+      a(href=(base & "timeline")): text "Timeline"
+    li(class=cls("grid")):
+      a(href=(base & "grid")): text "Grid"
+    li(class=cls("gallery")):
+      a(href=(base & "gallery")): text "Gallery"
+
 proc renderSearchTabs*(query: Query): VNode =
   var q = query
   buildHtml(ul(class="tab")):
@@ -95,7 +108,10 @@ proc renderTweetSearch*(results: Timeline; prefs: Prefs; path: string;
         text query.fromUser.join(" | ")
 
     if query.fromUser.len > 0:
-      renderProfileTabs(query, query.fromUser.join(","))
+      if query.kind != media or query.view != "gallery":
+        renderProfileTabs(query, query.fromUser.join(","))
+      if query.kind == media and query.fromUser.len == 1:
+        renderMediaViewTabs(query, query.fromUser[0])
 
     if query.fromUser.len == 0 or query.kind == tweets:
       tdiv(class="timeline-header"):

src/views/timeline.nim

@@ -5,6 +5,15 @@ import karax/[karaxdsl, vdom]
 import ".."/[types, query, formatters]
 import tweet, renderutils
 
+proc timelineViewClass(query: Query): string =
+  if query.kind != media:
+    return "timeline"
+
+  case query.view
+  of "grid": "timeline media-grid-view"
+  of "gallery": "timeline media-gallery-view"
+  else: "timeline"
+
 proc getQuery(query: Query): string =
   if query.kind != posts:
     result = genQueryUrl(query)
@@ -105,9 +114,22 @@ proc renderTimelineUsers*(results: Result[User]; prefs: Prefs; path=""): VNode =
     else:
       renderNoMore()
 
+proc filterThreads(threads: seq[Tweets]; prefs: Prefs): seq[Tweets] =
+  var retweets: seq[int64]
+  for thread in threads:
+    if thread.len == 1:
+      let tweet = thread[0]
+      let retweetId = if tweet.retweet.isSome: get(tweet.retweet).id else: 0
+      if retweetId in retweets or tweet.id in retweets or
+         tweet.pinned and prefs.hidePins:
+        continue
+      if retweetId != 0 and tweet.retweet.isSome:
+        retweets &= retweetId
+    result.add(thread)
+
 proc renderTimelineTweets*(results: Timeline; prefs: Prefs; path: string;
                            pinned=none(Tweet)): VNode =
-  buildHtml(tdiv(class="timeline")):
+  buildHtml(tdiv(class=results.query.timelineViewClass)):
     if not results.beginning:
       renderNewer(results.query, parseUri(path).path)
 
@@ -121,23 +143,17 @@ proc renderTimelineTweets*(results: Timeline; prefs: Prefs; path: string;
       else:
         renderNoneFound()
     else:
-      var retweets: seq[int64]
+      let filtered = filterThreads(results.content, prefs)
 
-      for thread in results.content:
-        if thread.len == 1:
-          let
-            tweet = thread[0]
-            retweetId = if tweet.retweet.isSome: get(tweet.retweet).id else: 0
-
-          if retweetId in retweets or tweet.id in retweets or
-             tweet.pinned and prefs.hidePins:
-            continue
-
-          if retweetId != 0 and tweet.retweet.isSome:
-            retweets &= retweetId
-          renderTweet(tweet, prefs, path)
-        else:
-          renderThread(thread, prefs, path)
+      if results.query.view == "gallery":
+        tdiv(class=if prefs.compactGallery: "gallery-masonry compact" else: "gallery-masonry"):
+          for thread in filtered:
+            if thread.len == 1: renderTweet(thread[0], prefs, path)
+            else: renderThread(thread, prefs, path)
+      else:
+        for thread in filtered:
+          if thread.len == 1: renderTweet(thread[0], prefs, path)
+          else: renderThread(thread, prefs, path)
 
       var cursor = getSearchMaxId(results, path)
       if cursor.len > 0: