From 7732d3feccf351acfc478c34646a77f2b08aa3f4 Mon Sep 17 00:00:00 2001 From: Miguel Ángel Moreno Date: Fri, 30 Dec 2022 21:22:13 +0100 Subject: feat(frontend): Use a more general loading icon component --- src/frontend/tau/components/comments.cljs | 2 +- src/frontend/tau/components/loading.cljs | 20 ++++---------------- src/frontend/tau/views/channel.cljs | 4 ++-- src/frontend/tau/views/kiosk.cljs | 2 +- src/frontend/tau/views/playlist.cljs | 4 ++-- src/frontend/tau/views/search.cljs | 2 +- src/frontend/tau/views/stream.cljs | 14 +++++++------- 7 files changed, 18 insertions(+), 30 deletions(-) (limited to 'src') diff --git a/src/frontend/tau/components/comments.cljs b/src/frontend/tau/components/comments.cljs index 8f9300b..044f87a 100644 --- a/src/frontend/tau/components/comments.cljs +++ b/src/frontend/tau/components/comments.cljs @@ -51,7 +51,7 @@ [comment-item (assoc comment :key i) author-name author-avatar])] (when (:url next-page) (if pagination-loading? - (loading/comments-pagination-loading-icon service-color) + (loading/loading-icon service-color) [:div.flex.items-center.justify-center {:style {:cursor "pointer"} :on-click #(rf/dispatch [::events/comments-pagination url (:url next-page)])} diff --git a/src/frontend/tau/components/loading.cljs b/src/frontend/tau/components/loading.cljs index 9b1fee8..40f6db3 100644 --- a/src/frontend/tau/components/loading.cljs +++ b/src/frontend/tau/components/loading.cljs @@ -1,20 +1,8 @@ (ns tau.components.loading) -(defn page-loading-icon - [service-color] - [:div.w-full.flex.justify-center.items-center.flex-auto - [:i.fas.fa-circle-notch.fa-spin.text-5xl - {:style {:color service-color}}]]) - -(defn items-pagination-loading-icon - [service-color loading?] - [:div.w-full.flex.items-center.justify-center.py-4 - {:class (when-not loading? "invisible")} - [:i.fas.fa-circle-notch.fa-spin.text-2xl - {:style {:color service-color}}]]) - -(defn comments-pagination-loading-icon - [service-color] +(defn loading-icon + [service-color & styles] [:div.w-full.flex.justify-center.items-center.flex-auto [:i.fas.fa-circle-notch.fa-spin - {:style {:color service-color}}]]) + {:class (apply str (if (> (count styles) 1) (interpose " " styles) styles)) + :style {:color service-color}}]]) diff --git a/src/frontend/tau/views/channel.cljs b/src/frontend/tau/views/channel.cljs index 78fc6d9..4eefa31 100644 --- a/src/frontend/tau/views/channel.cljs +++ b/src/frontend/tau/views/channel.cljs @@ -20,8 +20,8 @@ (rf/dispatch [::events/channel-pagination url next-page-url])) [:div.flex.flex-col.items-center.px-5.py-2.flex-auto (if page-loading? - [loading/page-loading-icon service-color] - [:div.flex.flex-col {:class "w-4/5"} + [loading/loading-icon service-color "text-5xl"] + [:div.flex.flex-col.flex-auto {:class "ml:w-4/5"} [navigation/back-button service-color] (when banner [:div diff --git a/src/frontend/tau/views/kiosk.cljs b/src/frontend/tau/views/kiosk.cljs index 672430a..824d85b 100644 --- a/src/frontend/tau/views/kiosk.cljs +++ b/src/frontend/tau/views/kiosk.cljs @@ -18,7 +18,7 @@ (rf/dispatch [::events/kiosk-pagination serviceId id next-page-url])) [:div.flex.flex-col.items-center.px-5.py-2.flex-auto (if page-loading? - [loading/page-loading-icon service-color] + [loading/loading-icon service-color "text-5xl"] [:div.flex.flex-col.flex-auto.w-full {:class "lg:w-4/5"} [:div.flex.justify-center.items-center.my-4.mx-2 [:div.m-4 diff --git a/src/frontend/tau/views/playlist.cljs b/src/frontend/tau/views/playlist.cljs index e50158a..756846c 100644 --- a/src/frontend/tau/views/playlist.cljs +++ b/src/frontend/tau/views/playlist.cljs @@ -21,8 +21,8 @@ (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.w-full {:class "lg:w-4/5"} + [loading/loading-icon service-color "text-5xl"] + [:div.flex.flex-col.flex-auto.w-full {:class "ml:w-4/5"} [navigation/back-button service-color] (when banner-url [:div diff --git a/src/frontend/tau/views/search.cljs b/src/frontend/tau/views/search.cljs index 8cb4192..bfb0b20 100644 --- a/src/frontend/tau/views/search.cljs +++ b/src/frontend/tau/views/search.cljs @@ -23,6 +23,6 @@ [:h2 (str "Showing search results for: \"" q "\"")] [:h1 (str "Number of search results: " (count items))]] (if page-loading? - [loading/page-loading-icon service-color] + [loading/loading-icon service-color "text-5xl"] [:div.flex.flex-col.flex-auto.w-full {:class "lg:w-4/5"} [items/related-streams items next-page-url]])])) diff --git a/src/frontend/tau/views/stream.cljs b/src/frontend/tau/views/stream.cljs index 7ef9e85..f7c82a2 100644 --- a/src/frontend/tau/views/stream.cljs +++ b/src/frontend/tau/views/stream.cljs @@ -24,19 +24,19 @@ service-color @(rf/subscribe [:service-color])] [:div.flex.flex-col.items-center.justify-center.text-white.flex-auto (if page-loading? - [loading/page-loading-icon service-color] - [:div.w-full {:class "md:w-4/5 xl:w-3/5"} + [loading/loading-icon service-color "text-5xl"] + [:div.w-full.pb-4 {:class "ml:w-4/5 xl:w-3/5"} [navigation/back-button service-color] [:div.flex.justify-center.relative {:style {:background (str "center / cover no-repeat url('" thumbnail-url"')")} - :class "md:h-[450px] lg:h-[600px]"} + :class "ml:h-[450px] lg:h-[600px]"} [:video.bottom-0.object-cover.max-h-full.min-w-full {:src stream-type :controls true}]] - [:div.px-4.md:p-0 + [:div.px-4.ml:p-0 [: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 - {:uploader-name uploader-author :uploader-url uploader-url + {:uploader-name uploader-name :uploader-url uploader-url :name name :url url :stream stream-type :service-color service-color}])} [:i.fa-solid.fa-headphones]] [:a {:href url} @@ -95,9 +95,9 @@ :style {:cursor "pointer"}}])] [:div (if show-comments-loading - [loading/page-loading-icon service-color] + [loading/loading-icon service-color "text-2xl"] (when (and show-comments comments-page) - [comments/comments comments-page uploader-author uploader-avatar url]))]] + [comments/comments comments-page uploader-name uploader-avatar url]))]] (when-not (empty? related-streams) [:div.py-3 [:div.flex.items-center -- cgit v1.2.3