feat: extract channel metadata layout items into reusable components

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?))])