feat(frontend): Add further features and address quirks

4 files changed, 142 insertions, 74 deletions

diff --git a/src/frontend/tau/components/comments.cljs b/src/frontend/tau/components/comments.cljs
new file mode 100644
index 0000000..8f9300b
--- /dev/null
+++ b/src/frontend/tau/components/comments.cljs
@@ -0,0 +1,59 @@
+(ns tau.components.comments
+  (:require
+   [re-frame.core :as rf]
+   [reitit.frontend.easy :as rfe]
+   [tau.components.loading :as loading]
+   [tau.events :as events]
+   ["timeago.js" :as timeago]))
+
+(defn comment-item
+  [{:keys [id text uploader-name uploader-avatar uploader-url
+           upload-date uploader-verified? like-count hearted-by-uploader?
+           pinned? replies key]} author-name author-avatar]
+  [:div.flex.my-4
+   (when uploader-avatar
+     [:div.flex.items-center.py-3.box-border.h-12
+      [:div.w-12
+       [:a {:href (rfe/href :tau.routes/channel nil {:url uploader-url}) :title name}
+        [:img.rounded-full.object-cover.min-w-full.min-h-full {:src uploader-avatar}]]]])
+   [:div.ml-2
+    [:div.flex.items-center
+     (when pinned?
+       [:i.fa-solid.fa-thumbtack.mr-2])
+     [:a {:href (rfe/href :tau.routes/channel nil {:url uploader-url}) :title name}
+      [:h1.text-gray-300.font-bold uploader-name]]
+     (when uploader-verified?
+       [:i.fa-solid.fa-circle-check.ml-2])]
+    [:div.my-2
+     [:p text]]
+    [:div..flex.items-center.my-2
+     [:div.mr-4
+      [:p (if (-> upload-date js/Date.parse js/isNaN)
+            upload-date
+            (timeago/format upload-date))]]
+     (when like-count
+       [:div.flex.items-center.my-2
+        [:i.fa-solid.fa-thumbs-up]
+        [:p.mx-1 like-count]])
+     (when hearted-by-uploader?
+       [:div.relative.w-4.h-4.mx-2
+        [:i.fa-solid.fa-heart.absolute.-bottom-1.-right-1.text-xs.text-red-500]
+        [:img.rounded-full.object-covermax-w-full.min-h-full
+         {:src author-avatar :title (str author-name " hearted this comment")}]])]]])
+
+(defn comments
+  [{:keys [comments next-page disabled?]} author-name author-avatar url]
+  (let [pagination-loading? @(rf/subscribe [:show-pagination-loading])
+        service-color @(rf/subscribe [:service-color])]
+    [:div.flex.flex-col
+     [:div
+      (for [[i comment] (map-indexed vector comments)]
+        [comment-item (assoc comment :key i) author-name author-avatar])]
+     (when (:url next-page)
+       (if pagination-loading?
+         (loading/comments-pagination-loading-icon service-color)
+         [:div.flex.items-center.justify-center
+          {:style {:cursor "pointer"}
+           :on-click #(rf/dispatch [::events/comments-pagination url (:url next-page)])}
+          [:i.fa-solid.fa-plus]
+          [:p.px-2 "Show more comments"]]))]))
diff --git a/src/frontend/tau/components/items.cljs b/src/frontend/tau/components/items.cljs
index 5d26749..0a8bad6 100644
--- a/src/frontend/tau/components/items.cljs
+++ b/src/frontend/tau/components/items.cljs
@@ -1,74 +1,80 @@
 (ns tau.components.items
   (:require
-   [reitit.frontend.easy :as rfe]))
+   [reitit.frontend.easy :as rfe]
+   [tau.util :as util]
+   ["timeago.js" :as timeago]))
 
 (defn stream-item
-  [id {:keys [url name thumbnail-url upload-author upload-url
-              upload-avatar upload-date short-description
-              duration view-count uploaded verified?]}]
-  [:div.w-56.h-66.my-2 {:key id}
+  [{:keys [url name thumbnail-url upload-author upload-url
+           upload-avatar upload-date short-description
+           duration view-count uploaded verified? key]}]
+  [:div.w-56.h-66.my-2 {:key key}
    [:div.px-5.py-2.m-2.flex.flex-col.max-w-full.min-h-full.max-h-full
-    [:a.overflow-hidden {:href (rfe/href :tau.routes/stream nil {:url url}) :title name}
-     [:div.flex.py-3.box-border.h-28
-      [:div.relative.min-w-full
-       [:img.rounded.object-cover.max-h-full.min-w-full {:src thumbnail-url}]
-       [:div.rounded.p-2.absolute {:style {:bottom 5 :right 5 :background "rgba(0,0,0,.7)"}}
-        [:p {:style {:fontSize "14px"}}
-         (let [duration (js/Date. (* duration 1000))
-               slice (if (> (.getHours duration) 1)
-                       #(.slice % 11 19)
-                       #(.slice % 14 19))]
-           (-> duration (.toISOString) slice))]]]]
-     [:div.my-2
-      [:h1.line-clamp-2.my-1 name]]
-     [:a {:href (rfe/href :tau.routes/channel nil {:url upload-url}) :title upload-author}
+    [:div.flex.py-2.box-border.h-28
+     [:div.relative.min-w-full
+      [:a.absolute.min-w-full.min-h-full.z-50 {:href (rfe/href :tau.routes/stream nil {:url url}) :title name}]
+      [:img.rounded.object-cover.max-h-full.min-w-full {:src thumbnail-url}]
+      [:div.rounded.p-2.absolute {:style {:bottom 5 :right 5 :background "rgba(0,0,0,.7)" :zIndex "0"}}
+       [:p {:style {:fontSize "14px"}}
+        (if (= duration 0)
+          "LIVE"
+          (util/format-duration duration))]]]]
+    [:div.my-2
+     [:a {:href (rfe/href :tau.routes/stream nil {:url url}) :title name}
+      [:h1.line-clamp-2.my-1 name]]]
+    (when-not (empty? upload-author)
       [:div.flex.items-center.my-2
-       [:h1.line-clamp-1.text-gray-300.font-bold.pr-2 upload-author]
+       [:a {:href (rfe/href :tau.routes/channel nil {:url upload-url}) :title upload-author}
+        [:h1.line-clamp-1.text-gray-300.font-bold.pr-2 upload-author]]
        (when verified?
-         [:i.fa-solid.fa-circle-check])]]
-     [:div.flex.my-1.justify-between
-      [:p (if (-> upload-date js/Date.parse js/isNaN)
-            upload-date
-            (-> upload-date
-                js/Date.parse
-                js/Date.
-                .toDateString))]
-      [:div.flex.items-center.h-full.pl-2
-       [:i.fa-solid.fa-eye.text-xs]
-       [:p.pl-1.5 (.toLocaleString view-count)]]]]]])
+         [:i.fa-solid.fa-circle-check])])
+    [:div.flex.my-1.justify-between
+     [:p (if (-> upload-date js/Date.parse js/isNaN)
+           upload-date
+           (timeago/format upload-date))]
+     (when view-count
+       [:div.flex.items-center.h-full.pl-2
+        [:i.fa-solid.fa-eye.text-xs]
+        [:p.pl-1.5 (util/format-quantity view-count)]])]]])
 
 (defn channel-item
-  [id {:keys [url name thumbnail-url description subscriber-count stream-count verified?]}]
-  [:div.w-56.h-64.my-2 {:key id}
+  [{:keys [url name thumbnail-url description subscriber-count
+           stream-count verified? key]}]
+  [:div.w-56.h-64.my-2 {:key key}
    [:div.px-5.py-2.m-2.flex.flex-col.max-w-full.min-h-full.max-h-full
-    [:a.overflow-hidden {:href (rfe/href :tau.routes/channel nil {:url url}) :title name}
-     [:div.flex.min-w-full.py-3.box-border.h-28
-      [:div.min-w-full
-       [:img.rounded.object-cover.max-h-full.min-w-full {:src thumbnail-url}]]]
-     [:div.overflow-hidden
-      [:div.flex.items-center.my-2
-       [:h1.line-clamp-1.text-gray-300.font-bold.pr-2 name]
-       (when verified?
-         [:i.fa-solid.fa-circle-check])]
-      [:div.flex.items-center
-       [:i.fa-solid.fa-users.text-xs]
-       [:p.mx-2 subscriber-count]]
-      [:div.flex.items-center
-       [:i.fa-solid.fa-video.text-xs]
-       [:p.mx-2 stream-count]]]]]])
+    [:div.flex.min-w-full.py-3.box-border.h-28
+     [:div.relative.min-w-full
+      [:a.absolute.min-w-full.min-h-full {:href (rfe/href :tau.routes/channel nil {:url url}) :title name}]
+      [:img.rounded.object-cover.max-h-full.min-w-full {:src thumbnail-url}]]]
+    [:div.overflow-hidden
+     [:div.flex.items-center.py-2.box-border
+      [:a {:href (rfe/href :tau.routes/channel nil {:url url}) :title name}
+       [:h1.line-clamp-1.text-gray-300.font-bold.pr-2 name]]
+      (when verified?
+        [:i.fa-solid.fa-circle-check])]
+     (when subscriber-count
+       [:div.flex.items-center
+        [:i.fa-solid.fa-users.text-xs]
+        [:p.mx-2 subscriber-count]])
+     (when stream-count
+       [:div.flex.items-center
+        [:i.fa-solid.fa-video.text-xs]
+        [:p.mx-2 stream-count]])]]])
 
 (defn playlist-item
-  [id {:keys [url name thumbnail-url upload-author stream-count]}]
-  [:div.w-56.h-64.my-2 {:key id}
+  [{:keys [url name thumbnail-url upload-author stream-count key]}]
+  [:div.w-56.h-64.my-2 {:key key}
    [:div.px-5.py-2.m-2.flex.flex-col.max-w-full.min-h-full.max-h-full
-    [:a.overflow-hidden {:href (rfe/href :tau.routes/playlist nil {:url url}) :title name}
-     [:div.flex.min-w-full.py-3.box-border.h-28
-      [:div.min-w-full
-       [:img.rounded.object-cover.max-h-full.min-w-full {:src thumbnail-url}]]]
-     [:div.overflow-hidden
-      [:h1.line-clamp-2 name]
-      [:h1.text-gray-300.font-bold upload-author]
-      [:p (condp >= stream-count
-            0 "No streams"
-            1 (str stream-count " stream")
-            (str stream-count " streams"))]]]]])
+    [:div.flex.min-w-full.py-3.box-border.h-28
+     [:div.relative.min-w-full
+      [:a.absolute.min-w-full.min-h-full.z-50 {:href (rfe/href :tau.routes/playlist nil {:url url}) :title name}]
+      [:img.rounded.object-cover.max-h-full.min-w-full {:src thumbnail-url}]]]
+    [:div.overflow-hidden
+     [:div
+      [:a {:href (rfe/href :tau.routes/playlist nil {:url url}) :title name}
+       [:h1.line-clamp-2 name]]]
+     [:div.my-2
+      [:h1.text-gray-300.font-bold upload-author]]
+     [:div.flex.items-center
+      [:i.fa-solid.fa-video.text-xs]
+      [:p.mx-2 stream-count]]]]])
diff --git a/src/frontend/tau/components/loading.cljs b/src/frontend/tau/components/loading.cljs
index 66954a1..9b1fee8 100644
--- a/src/frontend/tau/components/loading.cljs
+++ b/src/frontend/tau/components/loading.cljs
@@ -1,16 +1,20 @@
-(ns tau.components.loading
-  (:require
-   [re-frame.core :as rf]))
+(ns tau.components.loading)
 
 (defn page-loading-icon
   [service-color]
   [:div.w-full.flex.justify-center.items-center.flex-auto
-   [:i.fas.fa-circle-notch.fa-spin.text-8xl
+   [:i.fas.fa-circle-notch.fa-spin.text-5xl
     {:style {:color service-color}}]])
 
-(defn pagination-loading-icon
+(defn items-pagination-loading-icon
   [service-color loading?]
   [:div.w-full.flex.items-center.justify-center.py-4
    {:class (when-not loading? "invisible")}
    [:i.fas.fa-circle-notch.fa-spin.text-2xl
     {:style {:color service-color}}]])
+
+(defn comments-pagination-loading-icon
+  [service-color]
+  [:div.w-full.flex.justify-center.items-center.flex-auto
+   [:i.fas.fa-circle-notch.fa-spin
+    {:style {:color service-color}}]])
diff --git a/src/frontend/tau/components/navigation.cljs b/src/frontend/tau/components/navigation.cljs
index a0d25e2..c8f0b5a 100644
--- a/src/frontend/tau/components/navigation.cljs
+++ b/src/frontend/tau/components/navigation.cljs
@@ -3,11 +3,10 @@
    [re-frame.core :as rf]
    [tau.events :as events]))
 
-(defn back-button []
-  (let [service-color @(rf/subscribe [:service-color])]
-    [:div.flex {:class "w-4/5"}
-     [:button.p-2
-      {:on-click #(rf/dispatch [::events/history-back])}
-      [:i.fa-solid.fa-chevron-left
-       {:style {:color service-color}}]
-      [:span " Back"]]]))
+(defn back-button [service-color]
+  [:div.flex {:class "w-4/5"}
+   [:button.p-2
+    {:on-click #(rf/dispatch [::events/history-back])}
+    [:i.fa-solid.fa-chevron-left
+     {:style {:color service-color}}]
+    [:span " Back"]]])