diff options
Diffstat (limited to 'src/frontend/tubo')
| -rw-r--r-- | src/frontend/tubo/components/audio_player.cljs | 14 | ||||
| -rw-r--r-- | src/frontend/tubo/components/play_queue.cljs | 49 | ||||
| -rw-r--r-- | src/frontend/tubo/components/player.cljs | 23 |
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}])]))) |