diff options
Diffstat (limited to 'src/frontend/tau/views/stream.cljs')
| -rw-r--r-- | src/frontend/tau/views/stream.cljs | 98 |
1 files changed, 76 insertions, 22 deletions
diff --git a/src/frontend/tau/views/stream.cljs b/src/frontend/tau/views/stream.cljs index ccc53eb..47039e6 100644 --- a/src/frontend/tau/views/stream.cljs +++ b/src/frontend/tau/views/stream.cljs @@ -1,27 +1,81 @@ (ns tau.views.stream (:require - [re-frame.core :as rf])) + [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])) (defn stream - [m] - (let [current-stream @(rf/subscribe [:stream]) - stream-type (-> (if (empty? (:video-streams current-stream)) - (:audio-streams current-stream) - (:video-streams current-stream)) + [match] + (let [{:keys [name url video-streams audio-streams view-count + subscriber-count like-count dislike-count + description upload-avatar upload-author + upload-url upload-date related-streams + thumbnail-url] :as stream} @(rf/subscribe [:stream]) + stream-type (-> (if (empty? video-streams) audio-streams video-streams) last - :content)] - [:div.flex.flex-col.justify-center.p-5.items-center - [:div.flex.justify-center.py-2 - [:div.flex.justify-center {:class "w-4/5"} - [:video.min-w-full.h-auto {:src stream-type :controls true}]]] - [:div.flex.text-white - [:button.border.rounded.border-slate-900.p-2.bg-slate-800 - {:on-click #(rf/dispatch [:switch-to-global-player current-stream])} - "Add to global stream"] - [:a {:href (:url current-stream)} - "Open original source"]] - [:div.flex.flex-col.items-center.py-2 {:class "w-4/5"} - [:div.min-w-full.py-2 - [:h1.text-xl.font-extrabold (:name current-stream)]] - [:div.min-w-full.py-2 - [:p (:description current-stream)]]]])) + :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] + [:div.flex.justify-center.relative.my-2 + {:style {:background (str "center / cover no-repeat url('" thumbnail-url"')") + :height "450px"}} + [:video.min-h-full.absolute.bottom-0.object-cover {:src stream-type :controls true :width "100%"}]] + [:div.flex.text-white.flex.w-full.my-1 + [:button.border.rounded.border-black.p-2.bg-stone-800 + {:on-click #(rf/dispatch [::events/switch-to-global-player stream])} + [:i.fa-solid.fa-headphones]] + [:a {:href (:url stream)} + [:button.border.rounded.border-black.p-2.bg-stone-800.mx-2 + [:i.fa-solid.fa-external-link-alt]]]] + [:div.flex.flex-col.py-1 + [:div.min-w-full.py-3 + [:h1.text-xl.font-extrabold name]] + [:div.flex.justify-between.py-2 + [:div.flex.items-center.flex-auto + (when upload-avatar + [:div + [:img.rounded-full {:src upload-avatar :alt upload-author}]]) + [:div.mx-2 + [:a {:href (rfe/href :tau.routes/channel nil {:url upload-url})} upload-author] + (when subscriber-count + [:div.flex.my-2 + [:i.fa-solid.fa-users] + [:p.mx-2 (.toLocaleString subscriber-count)]])]] + [:div + (when view-count + [:p + [:i.fa-solid.fa-eye] + [:span.mx-2 (.toLocaleString view-count)]]) + [:div + (when like-count + [:p + [:i.fa-solid.fa-thumbs-up] + [:span.mx-2 like-count]]) + (when dislike-count + [:p + [:i.fa-solid.fa-thumbs-down] + [:span.mx-2 dislike-count]])] + (when upload-date + [:p (-> upload-date + js/Date.parse + js/Date. + .toDateString)])]] + [:div.min-w-full.py-3 + [:h1 name] + [:p description]] + [:div.py-3 + [:h1.text-lg.bold "Related Results"] + [:div.flex.justify-center.align-center.flex-wrap + (for [[i item] (map-indexed vector related-streams)] + (cond + (:duration item) [items/stream-item i item] + (:subscriber-count item) [items/channel-item i item] + (:stream-count item) [items/playlist-item i item]))]]]])])) |