aboutsummaryrefslogtreecommitdiff
path: root/src/frontend/tubo/views/channel.cljs
diff options
context:
space:
mode:
authorMiguel Ángel Moreno <mail@migalmoreno.com>2023-01-17 13:17:40 +0100
committerMiguel Ángel Moreno <mail@migalmoreno.com>2023-01-17 13:17:40 +0100
commit81f03c0b449bec1fa60cf2936bfc3f66a5ad58c1 (patch)
treea2a7aa01f61dd71b511dd3729a9f4b28c35b531f /src/frontend/tubo/views/channel.cljs
parent5e995881dd0c431ae63b1a50c2d03e59962241f1 (diff)
chore: Rename project
Diffstat (limited to 'src/frontend/tubo/views/channel.cljs')
-rw-r--r--src/frontend/tubo/views/channel.cljs41
1 files changed, 41 insertions, 0 deletions
diff --git a/src/frontend/tubo/views/channel.cljs b/src/frontend/tubo/views/channel.cljs
new file mode 100644
index 0000000..ee5459f
--- /dev/null
+++ b/src/frontend/tubo/views/channel.cljs
@@ -0,0 +1,41 @@
+(ns tubo.views.channel
+ (:require
+ [re-frame.core :as rf]
+ [tubo.components.items :as items]
+ [tubo.components.loading :as loading]
+ [tubo.components.navigation :as navigation]
+ [tubo.events :as events]))
+
+(defn channel
+ [{{:keys [url]} :query-params}]
+ (let [{:keys [banner avatar name description subscriber-count
+ related-streams next-page]} @(rf/subscribe [:channel])
+ next-page-url (:url next-page)
+ service-color @(rf/subscribe [:service-color])
+ page-loading? @(rf/subscribe [:show-page-loading])
+ pagination-loading? @(rf/subscribe [:show-pagination-loading])
+ page-scroll @(rf/subscribe [:page-scroll])
+ scrolled-to-bottom? (= page-scroll (.-scrollHeight js/document.body))]
+ (when scrolled-to-bottom?
+ (rf/dispatch [::events/channel-pagination url next-page-url]))
+ [:div.flex.flex-col.items-center.px-5.py-2.flex-auto
+ (if page-loading?
+ [loading/loading-icon service-color "text-5xl"]
+ [:div.flex.flex-col.flex-auto {:class "ml:w-4/5 xl:w-3/5"}
+ [navigation/back-button service-color]
+ (when banner
+ [:div.flex.justify-center
+ [:img {:src banner}]])
+ [:div.flex.items-center.my-4.mx-2
+ (when avatar
+ [:div.relative.w-16.h-16
+ [:img.rounded-full.object-cover.max-w-full.min-h-full {:src avatar :alt name}]])
+ [:div.m-4
+ [:h1.text-xl name]
+ (when subscriber-count
+ [:div.flex.my-2.items-center
+ [:i.fa-solid.fa-users.text-xs]
+ [:span.mx-2 (.toLocaleString subscriber-count)]])]]
+ [:div.my-2
+ [:p description]]
+ [items/related-streams related-streams next-page-url]])]))