feat(frontend): add more common player components

3 files changed, 40 insertions, 46 deletions

diff --git a/src/frontend/tubo/components/audio_player.cljs b/src/frontend/tubo/components/audio_player.cljs
index cd2d581..ec8337c 100644
--- a/src/frontend/tubo/components/audio_player.cljs
+++ b/src/frontend/tubo/components/audio_player.cljs
@@ -45,19 +45,7 @@
         loop-playback   @(rf/subscribe [:loop-playback])]
     [:div.flex.flex-col.items-center.ml-auto
      [:div.flex.justify-end
-      [player/button
-       [:div.relative.flex.items-center
-        [:i.fa-solid.fa-repeat
-         {:style {:color (when loop-playback service-color)}}]
-        (when (= loop-playback :stream)
-          [:span.absolute.font-bold
-           {:style {:color     (when loop-playback service-color)
-                    :font-size "6px"
-                    :right     "6px"
-                    :top       "6.5px"}}
-           "1"])]
-       #(rf/dispatch [::events/toggle-loop-playback])
-       :extra-styles "text-sm"]
+      [player/loop-button loop-playback service-color]
       [player/button
        [:i.fa-solid.fa-backward-step]
        #(when (and media-queue (not= media-queue-pos 0))
diff --git a/src/frontend/tubo/components/play_queue.cljs b/src/frontend/tubo/components/play_queue.cljs
index 9ae758a..b4d1dc0 100644
--- a/src/frontend/tubo/components/play_queue.cljs
+++ b/src/frontend/tubo/components/play_queue.cljs
@@ -3,7 +3,7 @@
    [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.components.player :as player]
    [tubo.events :as events]
    [tubo.util :as util]))
@@ -31,17 +31,18 @@
 
 (defn queue
   []
-  (let [show-media-queue           @(rf/subscribe [:show-media-queue])
-        show-audio-player-loading? @(rf/subscribe [:show-audio-player-loading])
-        media-queue                @(rf/subscribe [:media-queue])
-        media-queue-pos            @(rf/subscribe [:media-queue-pos])
+  (let [show-media-queue       @(rf/subscribe [:show-media-queue])
+        loading?               @(rf/subscribe [:show-audio-player-loading])
+        paused?                @(rf/subscribe [:paused])
+        media-queue            @(rf/subscribe [:media-queue])
+        media-queue-pos        @(rf/subscribe [:media-queue-pos])
         {:keys [uploader-name uploader-url
                 name stream url service-color]
-         :as   current-stream}     @(rf/subscribe [:media-queue-stream])
-        !elapsed-time              @(rf/subscribe [:elapsed-time])
-        !player                    @(rf/subscribe [:player])
-        loop-playback              @(rf/subscribe [:loop-playback])
-        player-ready?              (and @!player (> (.-readyState @!player) 0))]
+         :as   current-stream} @(rf/subscribe [:media-queue-stream])
+        !elapsed-time          @(rf/subscribe [:elapsed-time])
+        !player                @(rf/subscribe [:player])
+        loop-playback          @(rf/subscribe [:loop-playback])
+        player-ready?          (and @!player (> (.-readyState @!player) 0))]
     (when (and show-media-queue media-queue)
       [:div.fixed.flex.flex-col.items-center.px-5.py-2.min-w-full.w-full.z-30
        {:style {:minHeight "calc(100dvh - 56px)" :height "calc(100dvh - 56px)"}
@@ -49,8 +50,8 @@
        [:div.flex.justify-between.pl-4.items-center.w-full.shrink-0
         {:class "lg:w-4/5 xl:w-3/5"}
         [:h1.text-2xl.font-bold.py-6 "Play Queue"]
-        [:div.mx-2
-         [:i.fa-solid.fa-close.cursor-pointer
+        [:button.mx-2
+         [:i.fa-solid.fa-close
           {:on-click #(rf/dispatch [::events/toggle-media-queue])}]]]
        [:div.flex.flex-col.sm:p-4.w-full.overflow-y-auto.flex-auto
         {:class "lg:w-4/5 xl:w-3/5"}
@@ -68,19 +69,7 @@
          [player/time-slider !player !elapsed-time service-color]
          [:span.ml-2 (if player-ready? (util/format-duration (.-duration @!player)) "00:00")]]
         [:div.flex.justify-center.items-center
-         [player/button
-          [:div.relative
-           [:i.fa-solid.fa-repeat
-            {:style {:color (when loop-playback service-color)}}]
-           (when (= loop-playback :stream)
-             [:span.absolute.font-bold
-              {:style {:color     (when loop-playback service-color)
-                       :font-size "6px"
-                       :right     "6px"
-                       :top       "6.5px"}}
-              "1"])]
-          #(rf/dispatch [::events/toggle-loop-playback])
-          :show-on-mobile? true]
+         [player/loop-button loop-playback service-color true]
          [player/button
           [:i.fa-solid.fa-backward-step]
           #(when (and media-queue (not= media-queue-pos 0))
@@ -95,14 +84,12 @@
           :extra-styles "text-xl"
           :show-on-mobile? true]
          [player/button
-          (if show-audio-player-loading?
-            [loading/loading-icon service-color "text-3xl"]
-            (if (.-paused @!player)
+          (if (or loading? (not @!player))
+            [layout/loading-icon service-color "text-2xl"]
+            (if paused?
               [:i.fa-solid.fa-play]
               [:i.fa-solid.fa-pause]))
-          #(if (.-paused @!player)
-             (.play @!player)
-             (.pause @!player))
+          #(rf/dispatch [::events/player-paused (not paused?)])
           :extra-styles "text-3xl"
           :show-on-mobile? true]
          [player/button
diff --git a/src/frontend/tubo/components/player.cljs b/src/frontend/tubo/components/player.cljs
index ac721e2..c44a408 100644
--- a/src/frontend/tubo/components/player.cljs
+++ b/src/frontend/tubo/components/player.cljs
@@ -25,6 +25,23 @@
     :on-click on-click-cb}
    icon])
 
+(defn loop-button
+  [loop-playback service-color show-on-mobile?]
+  [button
+   [:div.relative.flex.items-center
+    [:i.fa-solid.fa-repeat
+     {:style {:color (when loop-playback service-color)}}]
+    (when (= loop-playback :stream)
+      [:div.absolute.font-bold
+       {:style {:color     (when loop-playback service-color)
+                :font-size "5.5px"
+                :right     "6px"
+                :top       "-4px"}}
+       "1"])]
+   #(rf/dispatch [::events/toggle-loop-playback])
+   :extra-styles "text-sm"
+   :show-on-mobile? show-on-mobile?])
+
 (defn volume-slider [player volume-level muted? service-color]
   (let [show-slider? (r/atom nil)]
     (fn [player volume-level muted? service-color]
@@ -35,10 +52,12 @@
         (if muted? [:i.fa-solid.fa-volume-xmark] [:i.fa-solid.fa-volume-low])
         #(rf/dispatch [::events/toggle-mute player])]
        (when @show-slider?
-         [:input.rounded-lg.cursor-pointer.focus:outline-none.absolute
+         [:input.rounded-lg.w-24.cursor-pointer.focus:outline-none.absolute
           {:class    "rotate-[270deg]"
            :type     "range"
            :on-input #(rf/dispatch [::events/change-volume-level (.. % -target -value) player])
-           :style    {:accentColor service-color :left "-48px" :bottom "80px" :display (if @show-slider? "block" "none")}
+           :style    {:accentColor service-color
+                      :left "-32.5px"
+                      :bottom "67.5px"}
            :max      100
            :value    volume-level}])])))