feat: refine audio player styles

1 files changed, 69 insertions, 32 deletions

diff --git a/src/frontend/tubo/components/player.cljs b/src/frontend/tubo/components/player.cljs
index 57b2928..a093826 100644
--- a/src/frontend/tubo/components/player.cljs
+++ b/src/frontend/tubo/components/player.cljs
@@ -4,17 +4,55 @@
    [re-frame.core :as rf]
    [tubo.events :as events]))
 
+(defonce base-slider-classes
+  ["h-2" "cursor-pointer" "appearance-none" "bg-neutral-300" "dark:bg-neutral-600"
+   "rounded-full" "overflow-hidden" "focus:outline-none"
+   "[&::-webkit-slider-thumb]:appearance-none"
+   "[&::-webkit-slider-thumb]:border-0"
+   "[&::-webkit-slider-thumb]:rounded-full"
+   "[&::-webkit-slider-thumb]:h-2"
+   "[&::-webkit-slider-thumb]:w-2"
+   "[&::-webkit-slider-thumb]:shadow-[-405px_0_0_400px]"
+   "[&::-moz-range-thumb]:border-0"
+   "[&::-moz-range-thumb]:rounded-full"
+   "[&::-moz-range-thumb]:h-2"
+   "[&::-moz-range-thumb]:w-2"
+   "[&::-moz-range-thumb]:shadow-[-405px_0_0_400px]"])
+
+(defn get-slider-shadow-classes
+  [service-color]
+  (case service-color
+    "#cc0000" ["[&::-webkit-slider-thumb]:shadow-[#cc0000]" "[&::-moz-range-thumb]:shadow-[#cc0000]"]
+    "#ff7700" ["[&::-webkit-slider-thumb]:shadow-[#ff7700]" "[&::-moz-range-thumb]:shadow-[#ff7700]"]
+    "#333333" ["[&::-webkit-slider-thumb]:shadow-[#333333]" "[&::-moz-range-thumb]:shadow-[#333333]"]
+    "#F2690D" ["[&::-webkit-slider-thumb]:shadow-[#F2690D]" "[&::-moz-range-thumb]:shadow-[#F2690D]"]
+    "#629aa9" ["[&::-webkit-slider-thumb]:shadow-[#629aa9]" "[&::-moz-range-thumb]:shadow-[#629aa9]"]
+    ["[&::-webkit-slider-thumb]:shadow-neutral-300" "[&::-moz-range-thumb]:shadow-neutral-300"]))
+
+(defn get-slider-bg-classes
+  [service-color]
+  (case service-color
+    "#cc0000" ["[&::-webkit-slider-thumb]:bg-[#cc0000]" "[&::-moz-range-thumb]:bg-[#cc0000]"]
+    "#ff7700" ["[&::-webkit-slider-thumb]:bg-[#ff7700]" "[&::-moz-range-thumb]:bg-[#ff7700]"]
+    "#333333" ["[&::-webkit-slider-thumb]:bg-[#333333]" "[&::-moz-range-thumb]:bg-[#333333]"]
+    "#F2690D" ["[&::-webkit-slider-thumb]:bg-[#F2690D]" "[&::-moz-range-thumb]:bg-[#F2690D]"]
+    "#629aa9" ["[&::-webkit-slider-thumb]:bg-[#629aa9]" "[&::-moz-range-thumb]:bg-[#629aa9]"]
+    ["[&::-webkit-slider-thumb]:bg-neutral-300" "[&::-moz-range-thumb]:bg-neutral-300"]))
+
 (defn time-slider [player elapsed-time service-color]
-  [:input.bg-gray-200.rounded-lg.cursor-pointer.focus:outline-none.w-full
-   {:type      "range"
-    :on-input  #(reset! elapsed-time (.. % -target -value))
-    :on-change #(and @player (> (.-readyState @player) 0)
-                     (set! (.-currentTime @player) @elapsed-time))
-    :style     {:accentColor service-color}
-    :max       (if (and @player (> (.-readyState @player) 0))
-                 (.floor js/Math (.-duration @player))
-                 100)
-    :value     @elapsed-time}])
+  (let [styles `(~@base-slider-classes
+                 ~@(get-slider-bg-classes service-color)
+                 ~@(get-slider-shadow-classes service-color))]
+    [:input.w-full
+     {:class     (clojure.string/join " " styles)
+      :type      "range"
+      :on-input  #(reset! elapsed-time (.. % -target -value))
+      :on-change #(and @player (> (.-readyState @player) 0)
+                       (set! (.-currentTime @player) @elapsed-time))
+      :max       (if (and @player (> (.-readyState @player) 0))
+                   (.floor js/Math (.-duration @player))
+                   100)
+      :value     @elapsed-time}]))
 
 (defn button
   [icon on-click & {:keys [disabled? show-on-mobile? extra-classes]}]
@@ -32,11 +70,9 @@
     [: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"}}
+      [:div.absolute.w-full.h-full.flex.justify-center.items-center.font-bold
+       {:class "text-[6px]"
+        :style {:color     (when loop-playback service-color)}}
        "1"])]
    #(rf/dispatch [::events/toggle-loop-playback])
    :extra-classes "text-sm"
@@ -45,20 +81,21 @@
 (defn volume-slider [player volume-level muted? service-color]
   (let [show-slider? (r/atom nil)]
     (fn [player volume-level muted? service-color]
-      [:div.relative.flex.items-center
-       {:on-mouse-over #(reset! show-slider? true)
-        :on-mouse-out #(reset! show-slider? false)}
-       [button
-        (if muted? [:i.fa-solid.fa-volume-xmark] [:i.fa-solid.fa-volume-low])
-        #(rf/dispatch [::events/toggle-mute player])
-        :extra-classes "pl-3 pr-2"]
-       (when @show-slider?
-         [: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 "-29px"
-                      :bottom "63px"}
-           :max      100
-           :value    volume-level}])])))
+      (let [styles `("rotate-[270deg]"
+                     ~@base-slider-classes
+                     ~@(get-slider-bg-classes service-color)
+                     ~@(get-slider-shadow-classes service-color))]
+        [:div.relative.flex.flex-col.justify-center.items-center
+         {:on-mouse-over #(reset! show-slider? true)
+          :on-mouse-out  #(reset! show-slider? false)}
+         [button
+          (if muted? [:i.fa-solid.fa-volume-xmark] [:i.fa-solid.fa-volume-low])
+          #(rf/dispatch [::events/toggle-mute player])
+          :extra-classes "pl-3 pr-2"]
+         (when @show-slider?
+           [:input.absolute.w-24.ml-2.m-1.bottom-16
+            {:class    (clojure.string/join " " styles)
+             :type     "range"
+             :on-input #(rf/dispatch [::events/change-volume-level (.. % -target -value) player])
+             :max      100
+             :value    volume-level}])]))))