diff options
author | Miguel Ángel Moreno <mail@migalmoreno.com> | 2022-12-29 02:26:20 +0100 |
---|---|---|
committer | Miguel Ángel Moreno <mail@migalmoreno.com> | 2022-12-29 02:26:20 +0100 |
commit | 8c46de38348c421c0c9f102d604fcfc18807c0bb (patch) | |
tree | 3174b4392ca3eadd24c1da06929830b220764e38 /src/frontend/tau/views/playlist.cljs | |
parent | dfcc61063822dfb0fe699896da312249e93d5439 (diff) |
feat(frontend): Add further features and address quirks
Diffstat (limited to 'src/frontend/tau/views/playlist.cljs')
-rw-r--r-- | src/frontend/tau/views/playlist.cljs | 49 |
1 files changed, 46 insertions, 3 deletions
diff --git a/src/frontend/tau/views/playlist.cljs b/src/frontend/tau/views/playlist.cljs index b82cc24..48f18e4 100644 --- a/src/frontend/tau/views/playlist.cljs +++ b/src/frontend/tau/views/playlist.cljs @@ -1,5 +1,48 @@ -(ns tau.views.playlist) +(ns tau.views.playlist + (:require + [re-frame.core :as rf] + [reitit.frontend.easy :as rfe] + [tau.components.items :as items] + [tau.components.loading :as loading] + [tau.components.navigation :as navigation] + [tau.events :as events])) (defn playlist - [match] - [:div]) + [{{:keys [url]} :query-params}] + (let [{:keys [id name playlist-type thumbnail-url banner-url + uploader-name uploader-url uploader-avatar stream-count + next-page related-streams]} @(rf/subscribe [:playlist]) + next-page-url (:url next-page) + service-color @(rf/subscribe [:service-color]) + page-loading? @(rf/subscribe [:show-page-loading]) + pagination-loading? @(rf/subscribe [:show-pagination-loading]) + page-scroll @(rf/subscribe [:page-scroll]) + scrolled-to-bottom? (= page-scroll (.-scrollHeight js/document.body))] + (when scrolled-to-bottom? + (rf/dispatch [::events/playlist-pagination url next-page-url])) + [:div.flex.flex-col.items-center.px-5.pt-4.flex-auto + (if page-loading? + [loading/page-loading-icon service-color] + [:div.flex.flex-col.flex-auto + [navigation/back-button service-color] + (when banner-url + [:div + [:img {:src banner-url}]]) + [:div.flex.items-center.justify-center.my-4.mx-2 + [:div.flex.flex-col.justify-center.items-center + [:h1.text-2xl.font-bold name] + [:div.flex.items-center.pt-4 + [:span.mr-2 "By"] + [:div.flex.items-center.py-3.box-border.h-12 + [:div.w-12 + [:a {:href (rfe/href :tau.routes/channel nil {:url uploader-url}) :title uploader-name} + [:img.rounded-full.object-cover.min-h-full.min-w-full {:src uploader-avatar :alt uploader-name}]]]]] + [:p.pt-4 (str stream-count " streams")]]] + (if (empty? related-streams) + [:div.flex.flex-auto.justify-center.items-center + [:p.text-2xl "No streams available"]] + [:div.flex.justify-center.align-center.flex-wrap.my-2 + (for [[i result] (map-indexed vector related-streams)] + [items/stream-item (assoc result :key i)]) + (when-not (empty? next-page-url) + [loading/items-pagination-loading-icon service-color pagination-loading?])])])])) |