aboutsummaryrefslogtreecommitdiff
path: root/src/frontend
diff options
context:
space:
mode:
authorMiguel Ángel Moreno <mail@migalmoreno.com>2024-11-23 21:06:19 +0100
committerMiguel Ángel Moreno <mail@migalmoreno.com>2024-11-23 21:07:37 +0100
commit2e30aee2f1a7bd26ffc8a3794a16cd0909122c77 (patch)
tree1dcbf5da88d85403e2af9ba01b9705ea962870a9 /src/frontend
parentd5ce12dfe20a749eb69b234499f613a16b02b772 (diff)
feat: extract channel metadata layout items into reusable components
Diffstat (limited to 'src/frontend')
-rw-r--r--src/frontend/tubo/channel/views.cljs57
1 files changed, 33 insertions, 24 deletions
diff --git a/src/frontend/tubo/channel/views.cljs b/src/frontend/tubo/channel/views.cljs
index 9986ca1..416b787 100644
--- a/src/frontend/tubo/channel/views.cljs
+++ b/src/frontend/tubo/channel/views.cljs
@@ -6,13 +6,41 @@
[tubo.components.items :as items]
[tubo.components.layout :as layout]))
+(defn metadata-popover
+ [_]
+ (let [!menu-active? (r/atom nil)]
+ (fn [{:keys [related-streams]}]
+ (when related-streams
+ [layout/popover-menu !menu-active?
+ [{:label "Add streams to queue"
+ :icon [:i.fa-solid.fa-headphones]
+ :on-click #(rf/dispatch [:queue/add-n related-streams true])}
+ {:label "Add streams to playlist"
+ :icon [:i.fa-solid.fa-plus]
+ :on-click #(rf/dispatch [:modals/open
+ [modals/add-to-bookmark
+ related-streams]])}]]))))
+
+(defn metadata
+ [{:keys [avatar name subscriber-count] :as channel}]
+ [:div.flex.items-center.justify-between
+ [:div.flex.items-center.my-4.mx-2
+ [layout/uploader-avatar
+ {:uploader-avatar avatar :uploader-name name}]
+ [:div.m-4
+ [:h1.text-2xl.line-clamp-1.font-semibold {:title name} name]
+ (when subscriber-count
+ [:div.flex.my-2.items-center
+ [:i.fa-solid.fa-users.text-xs]
+ [:span.mx-2 (.toLocaleString subscriber-count)]])]]
+ [:div.hidden.lg:block
+ [metadata-popover channel]]])
+
(defn channel
[_]
- (let [!menu-active? (r/atom nil)
- !show-description? (r/atom false)]
+ (let [!show-description? (r/atom false)]
(fn [{{:keys [url]} :query-params}]
- (let [{:keys [banner avatar name description subscriber-count next-page
- related-streams]}
+ (let [{:keys [banner description next-page related-streams] :as channel}
@(rf/subscribe [:channel])
next-page-url (:url next-page)
scrolled-to-bottom? @(rf/subscribe [:scrolled-to-bottom])
@@ -25,26 +53,7 @@
[:div.flex.justify-center.h-24
[:img.min-w-full.min-h-full.object-cover {:src banner}]]))
[layout/content-container
- [:div.flex.items-center.justify-between
- [:div.flex.items-center.my-4.mx-2
- [layout/uploader-avatar
- {:uploader-avatar avatar :uploader-name name}]
- [:div.m-4
- [:h1.text-2xl.line-clamp-1.font-semibold {:title name} name]
- (when subscriber-count
- [:div.flex.my-2.items-center
- [:i.fa-solid.fa-users.text-xs]
- [:span.mx-2 (.toLocaleString subscriber-count)]])]]
- (when related-streams
- [layout/popover-menu !menu-active?
- [{:label "Add to queue"
- :icon [:i.fa-solid.fa-headphones]
- :on-click #(rf/dispatch [:queue/add-n related-streams true])}
- {:label "Add to playlist"
- :icon [:i.fa-solid.fa-plus]
- :on-click #(rf/dispatch [:modals/open
- [modals/add-to-bookmark
- related-streams]])}]])]
+ [metadata channel]
(when-not (empty? description)
[layout/show-more-container @!show-description? description
#(reset! !show-description? (not @!show-description?))])