From 8258620eab20b4a53e6cc921d884b0aa886b8565 Mon Sep 17 00:00:00 2001 From: Miguel Ángel Moreno Date: Tue, 23 Jan 2024 13:03:54 +0100 Subject: feat(frontend): move loading icon to layout components --- src/frontend/tubo/components/audio_player.cljs | 19 +++++++------------ src/frontend/tubo/components/comments.cljs | 3 +-- src/frontend/tubo/components/items.cljs | 4 ++-- src/frontend/tubo/components/layout.cljs | 12 +++++++++--- src/frontend/tubo/components/loading.cljs | 8 -------- src/frontend/tubo/views/channel.cljs | 3 --- src/frontend/tubo/views/kiosk.cljs | 1 - src/frontend/tubo/views/playlist.cljs | 1 - src/frontend/tubo/views/search.cljs | 1 - src/frontend/tubo/views/stream.cljs | 3 +-- 10 files changed, 20 insertions(+), 35 deletions(-) delete mode 100644 src/frontend/tubo/components/loading.cljs diff --git a/src/frontend/tubo/components/audio_player.cljs b/src/frontend/tubo/components/audio_player.cljs index f688e50..cd2d581 100644 --- a/src/frontend/tubo/components/audio_player.cljs +++ b/src/frontend/tubo/components/audio_player.cljs @@ -5,7 +5,7 @@ [reagent.dom :as rdom] [re-frame.core :as rf] [reitit.frontend.easy :as rfe] - [tubo.components.loading :as loading] + [tubo.components.layout :as layout] [tubo.components.player :as player] [tubo.events :as events] [tubo.util :as util])) @@ -66,17 +66,12 @@ [player/button [:i.fa-solid.fa-backward] #(rf/dispatch [::events/set-player-time (- @!elapsed-time 5)])] [player/button - (if @!player - (if loading? - [loading/loading-icon service-color "text-2xl"] - (if paused? - [:i.fa-solid.fa-play - {:on-click #(rf/dispatch [::events/player-paused false])}] - [:i.fa-solid.fa-pause - {:on-click #(rf/dispatch [::events/player-paused true])}])) - [:i.fa-solid.fa-play - {:on-click #(rf/dispatch [::events/player-paused true])}]) - nil + (if (or loading? (not @!player)) + [layout/loading-icon service-color "text-2xl"] + (if paused? + [:i.fa-solid.fa-play] + [:i.fa-solid.fa-pause])) + #(rf/dispatch [::events/player-paused (not paused?)]) :show-on-mobile? true :extra-styles "lg:text-2xl"] [player/button [:i.fa-solid.fa-forward] diff --git a/src/frontend/tubo/components/comments.cljs b/src/frontend/tubo/components/comments.cljs index 5990534..4a94e07 100644 --- a/src/frontend/tubo/components/comments.cljs +++ b/src/frontend/tubo/components/comments.cljs @@ -3,7 +3,6 @@ [re-frame.core :as rf] [reitit.frontend.easy :as rfe] [tubo.components.layout :as layout] - [tubo.components.loading :as loading] [tubo.events :as events] [tubo.util :as util])) @@ -71,7 +70,7 @@ [comment-item (assoc reply :key i :author-name author-name :author-avatar author-avatar)])])])] (when (:url next-page) (if pagination-loading? - (loading/loading-icon service-color) + (layout/loading-icon service-color) [:div.flex.justify-center [layout/secondary-button "Show more comments" diff --git a/src/frontend/tubo/components/items.cljs b/src/frontend/tubo/components/items.cljs index 91040c7..e1cdfe9 100644 --- a/src/frontend/tubo/components/items.cljs +++ b/src/frontend/tubo/components/items.cljs @@ -2,7 +2,7 @@ (:require [re-frame.core :as rf] [reitit.frontend.easy :as rfe] - [tubo.components.loading :as loading] + [tubo.components.layout :as layout] [tubo.events :as events] [tubo.util :as util])) @@ -107,4 +107,4 @@ (for [[i item] (map-indexed vector related-streams)] ^{:key i} [generic-item item service-color bookmarks])]) (when-not (empty? next-page-url) - [loading/loading-icon service-color "text-2xl" (when-not pagination-loading? "invisible")])])) + [layout/loading-icon service-color "text-2xl" (when-not pagination-loading? "invisible")])])) diff --git a/src/frontend/tubo/components/layout.cljs b/src/frontend/tubo/components/layout.cljs index 51847b8..59c695c 100644 --- a/src/frontend/tubo/components/layout.cljs +++ b/src/frontend/tubo/components/layout.cljs @@ -1,7 +1,6 @@ (ns tubo.components.layout (:require - [re-frame.core :as rf] - [tubo.components.loading :as loading])) + [re-frame.core :as rf])) (defn logo [] [:img.mb-1 @@ -9,6 +8,13 @@ :style {:maxHeight "25px" :maxWidth "40px"} :title "Tubo"}]) +(defn loading-icon + [service-color & styles] + [:div.w-full.flex.justify-center.items-center.flex-auto + [:i.fas.fa-circle-notch.fa-spin + {:class (apply str (if (> (count styles) 1) (interpose " " styles) styles)) + :style {:color service-color}}]]) + (defn focus-overlay [on-click-cb active?] [:div.w-full.fixed.min-h-screen.right-0.top-0.transition-all.delay-75.ease-in-out {:class "bg-black/50" @@ -22,7 +28,7 @@ service-color @(rf/subscribe [:service-color])] [:div.flex.flex-col.flex-auto.items-center.px-5.py-4 (if page-loading? - [loading/loading-icon service-color "text-5xl"] + [loading-icon service-color "text-5xl"] [:div.flex.flex-col.flex-auto.w-full {:class "lg:w-4/5 xl:w-3/5"} (map-indexed #(with-meta %2 {:key %1}) children)])])) diff --git a/src/frontend/tubo/components/loading.cljs b/src/frontend/tubo/components/loading.cljs deleted file mode 100644 index 08c37de..0000000 --- a/src/frontend/tubo/components/loading.cljs +++ /dev/null @@ -1,8 +0,0 @@ -(ns tubo.components.loading) - -(defn loading-icon - [service-color & styles] - [:div.w-full.flex.justify-center.items-center.flex-auto - [:i.fas.fa-circle-notch.fa-spin - {:class (apply str (if (> (count styles) 1) (interpose " " styles) styles)) - :style {:color service-color}}]]) diff --git a/src/frontend/tubo/views/channel.cljs b/src/frontend/tubo/views/channel.cljs index 643acaf..00dc12f 100644 --- a/src/frontend/tubo/views/channel.cljs +++ b/src/frontend/tubo/views/channel.cljs @@ -3,7 +3,6 @@ [re-frame.core :as rf] [tubo.components.items :as items] [tubo.components.layout :as layout] - [tubo.components.loading :as loading] [tubo.events :as events])) (defn channel @@ -12,8 +11,6 @@ related-streams next-page]} @(rf/subscribe [:channel]) 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]) scrolled-to-bottom? @(rf/subscribe [:scrolled-to-bottom])] (when scrolled-to-bottom? (rf/dispatch [::events/channel-pagination url next-page-url])) diff --git a/src/frontend/tubo/views/kiosk.cljs b/src/frontend/tubo/views/kiosk.cljs index f30bea6..ed6cd09 100644 --- a/src/frontend/tubo/views/kiosk.cljs +++ b/src/frontend/tubo/views/kiosk.cljs @@ -3,7 +3,6 @@ [re-frame.core :as rf] [tubo.components.items :as items] [tubo.components.layout :as layout] - [tubo.components.loading :as loading] [tubo.events :as events])) (defn kiosk diff --git a/src/frontend/tubo/views/playlist.cljs b/src/frontend/tubo/views/playlist.cljs index fc92a35..0f2325a 100644 --- a/src/frontend/tubo/views/playlist.cljs +++ b/src/frontend/tubo/views/playlist.cljs @@ -4,7 +4,6 @@ [reitit.frontend.easy :as rfe] [tubo.components.items :as items] [tubo.components.layout :as layout] - [tubo.components.loading :as loading] [tubo.events :as events])) (defn playlist diff --git a/src/frontend/tubo/views/search.cljs b/src/frontend/tubo/views/search.cljs index 551fbfb..aab6dc7 100644 --- a/src/frontend/tubo/views/search.cljs +++ b/src/frontend/tubo/views/search.cljs @@ -3,7 +3,6 @@ [re-frame.core :as rf] [reitit.frontend.easy :as rfe] [tubo.components.items :as items] - [tubo.components.loading :as loading] [tubo.components.layout :as layout] [tubo.events :as events])) diff --git a/src/frontend/tubo/views/stream.cljs b/src/frontend/tubo/views/stream.cljs index 4f9bf4f..3f096fb 100644 --- a/src/frontend/tubo/views/stream.cljs +++ b/src/frontend/tubo/views/stream.cljs @@ -5,7 +5,6 @@ [tubo.events :as events] [tubo.components.items :as items] [tubo.components.layout :as layout] - [tubo.components.loading :as loading] [tubo.components.comments :as comments] [tubo.components.video-player :as player] [tubo.util :as util])) @@ -124,7 +123,7 @@ (rf/dispatch [::events/toggle-stream-layout :show-comments]) (rf/dispatch [::events/get-comments url]))}])] (if show-comments-loading - [loading/loading-icon service-color "text-2xl"] + [layout/loading-icon service-color "text-2xl"] (when (and show-comments comments-page) [comments/comments comments-page uploader-name uploader-avatar url]))]) (when (and show-related? (not (empty? related-streams))) -- cgit v1.2.3