feat(frontend): Modularize components and add pagination

3 files changed, 103 insertions, 0 deletions

diff --git a/src/frontend/tau/components/items.cljs b/src/frontend/tau/components/items.cljs
new file mode 100644
index 0000000..5d26749
--- /dev/null
+++ b/src/frontend/tau/components/items.cljs
@@ -0,0 +1,74 @@
+(ns tau.components.items
+  (:require
+   [reitit.frontend.easy :as rfe]))
+
+(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}
+   [: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.items-center.my-2
+       [: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)]]]]]])
+
+(defn channel-item
+  [id {:keys [url name thumbnail-url description subscriber-count stream-count verified?]}]
+  [:div.w-56.h-64.my-2 {:key id}
+   [: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]]]]]])
+
+(defn playlist-item
+  [id {:keys [url name thumbnail-url upload-author stream-count]}]
+  [:div.w-56.h-64.my-2 {:key id}
+   [: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"))]]]]])
diff --git a/src/frontend/tau/components/loading.cljs b/src/frontend/tau/components/loading.cljs
new file mode 100644
index 0000000..66954a1
--- /dev/null
+++ b/src/frontend/tau/components/loading.cljs
@@ -0,0 +1,16 @@
+(ns tau.components.loading
+  (:require
+   [re-frame.core :as rf]))
+
+(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
+    {:style {:color service-color}}]])
+
+(defn 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}}]])
diff --git a/src/frontend/tau/components/navigation.cljs b/src/frontend/tau/components/navigation.cljs
new file mode 100644
index 0000000..a0d25e2
--- /dev/null
+++ b/src/frontend/tau/components/navigation.cljs
@@ -0,0 +1,13 @@
+(ns tau.components.navigation
+  (:require
+   [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"]]]))