diff options
Diffstat (limited to 'src/frontend/tubo/components/player.cljs')
| -rw-r--r-- | src/frontend/tubo/components/player.cljs | 29 |
1 files changed, 20 insertions, 9 deletions
diff --git a/src/frontend/tubo/components/player.cljs b/src/frontend/tubo/components/player.cljs index c851da8..ac721e2 100644 --- a/src/frontend/tubo/components/player.cljs +++ b/src/frontend/tubo/components/player.cljs @@ -1,5 +1,6 @@ (ns tubo.components.player (:require + [reagent.core :as r] [re-frame.core :as rf] [tubo.events :as events])) @@ -15,19 +16,29 @@ 100) :value @elapsed-time}]) -(defn volume-slider [player volume-level service-color] - [:input.w-20.bg-gray-200.rounded-lg.cursor-pointer.focus:outline-none.range-sm.mx-2 - {:type "range" - :on-input #(rf/dispatch [::events/change-volume-level (.. % -target -value) @player]) - :style {:accentColor service-color} - :max 100 - :value volume-level}]) - (defn button [icon on-click-cb & {:keys [disabled? show-on-mobile? extra-styles]}] - [:button.outline-none.focus:ring-transparent.mx-2 + [:button.outline-none.focus:ring-transparent.px-2.pt-1 {:class (let [styles (apply conj (when disabled? ["opacity-50" "cursor-auto"]) (when-not show-on-mobile? ["hidden" "lg:block"]))] (apply str (if (> (count extra-styles) 1) (interpose " " (conj styles extra-styles)) (interpose " " styles)))) :on-click on-click-cb} icon]) + +(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])] + (when @show-slider? + [:input.rounded-lg.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")} + :max 100 + :value volume-level}])]))) |