diff options
| author | Miguel Ángel Moreno <mail@migalmoreno.com> | 2024-02-18 17:21:19 +0100 |
|---|---|---|
| committer | Miguel Ángel Moreno <mail@migalmoreno.com> | 2024-02-18 17:21:19 +0100 |
| commit | a2c45c2747459a97766bff7ec731f2b73a03fed4 (patch) | |
| tree | 9d6769553ff8b4e503b3e14888f957a6e1b4f503 /src/frontend/tubo/views/channel.cljs | |
| parent | 1bc23ed2ac6015690345f2d8dbe14d698073dc2c (diff) | |
feat(frontend): add popover menu components
Diffstat (limited to 'src/frontend/tubo/views/channel.cljs')
| -rw-r--r-- | src/frontend/tubo/views/channel.cljs | 61 |
1 files changed, 32 insertions, 29 deletions
diff --git a/src/frontend/tubo/views/channel.cljs b/src/frontend/tubo/views/channel.cljs index 63668bd..f55653a 100644 --- a/src/frontend/tubo/views/channel.cljs +++ b/src/frontend/tubo/views/channel.cljs @@ -8,32 +8,35 @@ (defn channel [query-params] - (let [!show-description? (r/atom false)] - (fn [{{:keys [url]} :query-params}] - (let [{:keys [banner avatar name description subscriber-count - related-streams next-page - donation-links] :as channel} @(rf/subscribe [:channel]) - next-page-url (:url next-page) - service-color @(rf/subscribe [:service-color]) - scrolled-to-bottom? @(rf/subscribe [:scrolled-to-bottom])] - (when scrolled-to-bottom? - (rf/dispatch [::events/channel-pagination url next-page-url])) - [layout/content-container - (when banner - [:div.flex.justify-center.h-24 - [:img.min-w-full.min-h-full.object-cover.rounded {:src banner}]]) - [:div.flex.items-center.justify-between - [:div.flex.items-center.my-4.mx-2 - [layout/uploader-avatar avatar name] - [:div.m-4 - [:h1.text-2xl.font-nunito-semibold.line-clamp-1 name] - (when subscriber-count - [:div.flex.my-2.items-center - [:i.fa-solid.fa-users.text-xs] - [:span.mx-2 (.toLocaleString subscriber-count)]])]] - [layout/primary-button "Enqueue" - #(rf/dispatch [::events/enqueue-related-streams related-streams service-color]) - "fa-solid fa-headphones"]] - [layout/show-more-container @!show-description? description - #(reset! !show-description? (not @!show-description?))] - [items/related-streams related-streams next-page-url]])))) + (let [!menu-active? (r/atom nil)] + (fn [query-params] + (let [!show-description? (r/atom false)] + (fn [{{:keys [url]} :query-params}] + (let [{:keys [banner avatar name description subscriber-count related-streams next-page] + :as channel} @(rf/subscribe [:channel]) + next-page-url (:url next-page) + service-color @(rf/subscribe [:service-color]) + scrolled-to-bottom? @(rf/subscribe [:scrolled-to-bottom])] + (when scrolled-to-bottom? + (rf/dispatch [::events/channel-pagination url next-page-url])) + [layout/content-container + (when banner + [:div.flex.justify-center.h-24 + [:img.min-w-full.min-h-full.object-cover.rounded {:src banner}]]) + [:div.flex.items-center.justify-between + [:div.flex.items-center.my-4.mx-2 + [layout/uploader-avatar avatar name] + [:div.m-4 + [:h1.text-2xl.font-nunito-semibold.line-clamp-1 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/more-menu !menu-active? + [{:label "Add to queue" + :icon [:i.fa-solid.fa-headphones] + :on-click #(rf/dispatch [::events/enqueue-related-streams related-streams])}]])] + [layout/show-more-container @!show-description? description + #(reset! !show-description? (not @!show-description?))] + [items/related-streams related-streams next-page-url]])))))) |