aboutsummaryrefslogtreecommitdiff
path: root/src/frontend/tubo/views/channel.cljs
blob: 3b99b52488b4646f04e975532f847b75d739b298 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
(ns tubo.views.channel
  (:require
   [reagent.core :as r]
   [re-frame.core :as rf]
   [tubo.components.items :as items]
   [tubo.components.layout :as layout]
   [tubo.components.modals.bookmarks :as bookmarks]
   [tubo.events :as events]))

(defn channel
  [query-params]
  (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.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 [::events/enqueue-related-streams related-streams])}
                  {:label    "Add to playlist"
                   :icon     [:i.fa-solid.fa-plus]
                   :on-click #(rf/dispatch [::events/add-bookmark-list-modal
                                            [bookmarks/add-to-bookmark-list-modal related-streams]])}]])]
             [layout/show-more-container @!show-description? description
              #(reset! !show-description? (not @!show-description?))]
             [items/related-streams related-streams next-page-url]]))))))