feat: improve player readiness guards

3 files changed, 16 insertions, 9 deletions

diff --git a/src/frontend/tubo/components/audio_player.cljs b/src/frontend/tubo/components/audio_player.cljs
index b97ed23..5569a2a 100644
--- a/src/frontend/tubo/components/audio_player.cljs
+++ b/src/frontend/tubo/components/audio_player.cljs
@@ -26,7 +26,6 @@
       :reagent-render
       (fn [!player]
         (let [!elapsed-time @(rf/subscribe [:elapsed-time])
-              player-ready? (and @!player (> (.-readyState @!player) 0))
               muted?        @(rf/subscribe [:muted])
               volume-level  @(rf/subscribe [:volume-level])
               loop-playback @(rf/subscribe [:loop-playback])]
@@ -47,7 +46,7 @@
         !elapsed-time   @(rf/subscribe [:elapsed-time])
         !player         @(rf/subscribe [:player])
         paused?         @(rf/subscribe [:paused])
-        player-ready?   (and @!player (> (.-readyState @!player) 0))
+        player-ready?   @(rf/subscribe [:player-ready])
         loop-playback   @(rf/subscribe [:loop-playback])]
     [:div.flex.flex-col.items-center.ml-auto
      [:div.flex.justify-end
@@ -60,7 +59,7 @@
       [player/button [:i.fa-solid.fa-backward]
        #(rf/dispatch [::events/set-player-time (- @!elapsed-time 5)])]
       [player/button
-       (if (or loading? (not @!player))
+       (if (or loading? (not player-ready?))
          [layout/loading-icon service-color "lg:text-2xl"]
          (if paused?
            [:i.fa-solid.fa-play]
@@ -74,13 +73,13 @@
        #(when (and media-queue (< (+ media-queue-pos 1) (count media-queue)))
           (rf/dispatch [::events/change-media-queue-pos (+ media-queue-pos 1)]))
        :disabled? (not (and media-queue (< (+ media-queue-pos 1) (count media-queue))))]]
-     [:div.hidden.lg:flex.items-center
-      [:span.mx-2.text-sm
-       (if @!elapsed-time (utils/format-duration @!elapsed-time) "00:00")]
+     [:div.hidden.lg:flex.items-center.text-sm
+      [:span.mx-2
+       (if (and @!player @!elapsed-time) (utils/format-duration @!elapsed-time) "00:00")]
       [:div.w-20.lg:w-64.mx-2.flex.items-center
        [player/time-slider !player !elapsed-time service-color]]
-      [:span.mx-2.text-sm
-       (if player-ready? (utils/format-duration (.-duration @!player)) "00:00")]]]))
+      [:span.mx-2
+       (if (and @!player player-ready?) (utils/format-duration (.-duration @!player)) "00:00")]]]))
 
 (defn player
   []
diff --git a/src/frontend/tubo/events.cljs b/src/frontend/tubo/events.cljs
index efe7eda..5b06707 100644
--- a/src/frontend/tubo/events.cljs
+++ b/src/frontend/tubo/events.cljs
@@ -121,7 +121,8 @@
  (fn [{:keys [db player]} _]
    {:fx [[:dispatch [::change-player-paused true]]
          [:dispatch [::set-player-paused false]]
-         [::player-volume {:player player :volume (:volume-level db)}]]}))
+         [::player-volume {:player player :volume (:volume-level db)}]]
+    :db (assoc db :player-ready (and @player (> (.-readyState @player) 0)))}))
 
 (rf/reg-event-fx
  ::set-player-time
@@ -348,6 +349,7 @@
          stream (get (:media-queue db) idx)]
      (when stream
        {:db    (-> db
+                   (assoc :player-ready false)
                    (assoc :media-queue-pos idx)
                    (assoc-in [:media-queue idx :stream] ""))
         :store (assoc store :media-queue-pos idx)
@@ -369,6 +371,7 @@
          (fn [elem]
            (-> elem
                (assoc :show-audio-player (not (:show-audio-player elem)))
+               (assoc :player-ready false)
                (assoc :media-queue [])
                (assoc :media-queue-pos 0)))]
      {:db    (remove-entries db)
diff --git a/src/frontend/tubo/subs.cljs b/src/frontend/tubo/subs.cljs
index 5b421fe..9a82d6a 100644
--- a/src/frontend/tubo/subs.cljs
+++ b/src/frontend/tubo/subs.cljs
@@ -42,6 +42,11 @@
    !player))
 
 (rf/reg-sub
+ :player-ready
+ (fn [db _]
+   (:player-ready db)))
+
+(rf/reg-sub
  :paused
  (fn [db _]
    (:paused db)))