diff options
Diffstat (limited to 'src/frontend/tubo/components/player.cljs')
| -rw-r--r-- | src/frontend/tubo/components/player.cljs | 74 |
1 files changed, 37 insertions, 37 deletions
diff --git a/src/frontend/tubo/components/player.cljs b/src/frontend/tubo/components/player.cljs index a093826..3d72e48 100644 --- a/src/frontend/tubo/components/player.cljs +++ b/src/frontend/tubo/components/player.cljs @@ -1,8 +1,7 @@ (ns tubo.components.player (:require [reagent.core :as r] - [re-frame.core :as rf] - [tubo.events :as events])) + [re-frame.core :as rf])) (defonce base-slider-classes ["h-2" "cursor-pointer" "appearance-none" "bg-neutral-300" "dark:bg-neutral-600" @@ -39,63 +38,64 @@ "#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] - (let [styles `(~@base-slider-classes - ~@(get-slider-bg-classes service-color) - ~@(get-slider-shadow-classes service-color))] +(defn time-slider [!player !elapsed-time service-color] + (let [styles (concat base-slider-classes + (get-slider-bg-classes service-color) + (get-slider-shadow-classes service-color))] [:input.w-full - {:class (clojure.string/join " " styles) + {:class 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)) + :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}])) + :value @!elapsed-time}])) (defn button - [icon on-click & {:keys [disabled? show-on-mobile? extra-classes]}] + [& {:keys [icon on-click disabled? show-on-mobile? extra-classes]}] [:button.outline-none.focus:ring-transparent.px-2.pt-1 - {:class (let [classes (apply conj (when disabled? ["opacity-50" "cursor-auto"]) - (when-not show-on-mobile? ["hidden" "lg:block"]))] - (apply str (if (> (count extra-classes) 1) (interpose " " (conj classes extra-classes)) (interpose " " classes)))) + {:class (into (into (when disabled? [:opacity-50 :cursor-auto]) + (when-not show-on-mobile? [:hidden :lg:block])) + extra-classes) :on-click on-click} icon]) (defn loop-button - [loop-playback service-color show-on-mobile?] + [loop-playback 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.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" + :icon [:div.relative.flex.items-center + [:i.fa-solid.fa-repeat + {:style {:color (when loop-playback color)}}] + (when (= loop-playback :stream) + [:div.absolute.w-full.h-full.flex.justify-center.items-center.font-bold + {:class "text-[6px]" + :style {:color (when loop-playback color)}} + "1"])] + :on-click #(rf/dispatch [:player/loop]) + :extra-classes [:text-sm] :show-on-mobile? show-on-mobile?]) -(defn volume-slider [player volume-level muted? service-color] +(defn volume-slider + [player volume-level muted? service-color] (let [show-slider? (r/atom nil)] (fn [player volume-level muted? service-color] - (let [styles `("rotate-[270deg]" - ~@base-slider-classes - ~@(get-slider-bg-classes service-color) - ~@(get-slider-shadow-classes service-color))] + (let [styles (concat ["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"] + :icon (if muted? [:i.fa-solid.fa-volume-xmark] [:i.fa-solid.fa-volume-low]) + :on-click #(rf/dispatch [:player/mute (not muted?) 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]) + :on-input #(rf/dispatch [:player/change-volume (.. % -target -value) player]) :max 100 :value volume-level}])])))) |