aboutsummaryrefslogtreecommitdiff
path: root/src/frontend/tau/views/stream.cljs
blob: 4894a01ca25bce154499e2fb25638a91f3c82215 (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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
(ns tau.views.stream
  (:require
   [re-frame.core :as rf]
   [reitit.frontend.easy :as rfe]
   [tau.events :as events]
   [tau.components.items :as items]
   [tau.components.loading :as loading]
   [tau.components.navigation :as navigation]
   [tau.components.comments :as comments]
   [tau.util :as util]))

(defn stream
  [match]
  (let [{:keys [name url video-streams audio-streams view-count
                subscriber-count like-count dislike-count
                description uploader-avatar uploader-author
                uploader-url upload-date related-streams
                thumbnail-url show-comments-loading comments-page
                show-comments] :as stream} @(rf/subscribe [:stream])
        stream-type (-> (if (empty? video-streams) audio-streams video-streams)
                        last
                        :content)
        page-loading? @(rf/subscribe [:show-page-loading])
        service-color @(rf/subscribe [:service-color])]
    [:div.flex.flex-col.p-5.items-center.justify-center.text-white.flex-auto
     (if page-loading?
       [loading/page-loading-icon service-color]
       [:div {:class "w-4/5"}
        [navigation/back-button service-color]
        [:div.flex.justify-center.relative.my-2
         {:style {:background (str "center / cover no-repeat url('" thumbnail-url"')")
                  :height "450px"}}
         [:video.bottom-0.object-cover.max-h-full.min-w-full
          {:src stream-type :controls true}]]
        [:div.flex.flex.w-full.mt-3.justify-center
         [:button.border.rounded.border-black.px-3.py-1.bg-stone-800
          {:on-click #(rf/dispatch [::events/switch-to-global-player stream])}
          [:i.fa-solid.fa-headphones]]
         [:a {:href url}
          [:button.border.rounded.border-black.px-3.py-1.bg-stone-800.mx-2
           [:i.fa-solid.fa-external-link-alt]]]]
        [:div.flex.flex-col.py-1.comments
         [:div.min-w-full.py-3
          [:h1.text-2xl.font-extrabold name]]
         [:div.flex.justify-between.py-2
          [:div.flex.items-center.flex-auto
           (when uploader-avatar
             [:div.relative.w-16.h-16
              [:a {:href (rfe/href :tau.routes/channel nil {:url uploader-url}) :title uploader-author}
               [:img.rounded-full.object-cover.max-w-full.min-h-full {:src uploader-avatar :alt uploader-author}]]])
           [:div.mx-2
            [:a {:href (rfe/href :tau.routes/channel nil {:url uploader-url})} uploader-author]
            (when subscriber-count
              [:div.flex.my-2.items-center
               [:i.fa-solid.fa-users.text-xs]
               [:p.mx-2 (util/format-quantity subscriber-count)]])]]
          [:div.flex.flex-col.items-end
           (when view-count
             [:div
              [:i.fa-solid.fa-eye.text-xs]
              [:span.ml-2 (.toLocaleString view-count)]])
           [:div.flex
            (when like-count
              [:div.items-center
               [:i.fa-solid.fa-thumbs-up.text-xs]
               [:span.ml-2 (.toLocaleString like-count)]])
            (when dislike-count
              [:div.ml-2.items-center
               [:i.fa-solid.fa-thumbs-down.text-xs]
               [:span.ml-2 dislike-count]])]
           (when upload-date
             [:div
              [:i.fa-solid.fa-calendar.mx-2.text-xs]
              [:span
               (-> upload-date
                   js/Date.parse
                   js/Date.
                   .toDateString)]])]]
         [:div.min-w-full.py-3
          [:h1 name]
          [:div {:dangerouslySetInnerHTML {:__html description}}]]
         [:div.py-3
          [:div.flex.items-center
           [:i.fa-solid.fa-comments]
           [:p.px-2 "Comments"]
           (if show-comments
             [:i.fa-solid.fa-chevron-up {:on-click #(rf/dispatch [::events/toggle-comments])
                                           :style {:cursor "pointer"}}]
             [:i.fa-solid.fa-chevron-down {:on-click #(if show-comments
                                                        (rf/dispatch [::events/toggle-comments])
                                                        (rf/dispatch [::events/get-comments url]))
                                           :style {:cursor "pointer"}}])]
          [:div
           (if show-comments-loading
             [loading/page-loading-icon service-color]
             (when (and show-comments comments-page)
               [comments/comments comments-page uploader-author uploader-avatar url]))]]
         (when-not (empty? related-streams)
           [:div.py-3
            [:div.flex.items-center
             [:i.fa-solid.fa-list]
             [:h1.px-2.text-lg.bold "Related Results"]]
            [:div.flex.justify-center.align-center.flex-wrap
             (for [[i item] (map-indexed vector related-streams)]
               (case (:type item)
                 "stream" [items/stream-item (assoc item :key i)]
                 "channel" [items/channel-item (assoc item :key i)]
                 "playlist" [items/playlist-item (assoc item :key i)]))]])]])]))