feat(frontend): add common player components

4 files changed, 134 insertions, 115 deletions

diff --git a/src/frontend/tubo/components/audio_player.cljs b/src/frontend/tubo/components/audio_player.cljs
index ae4c4e4..4ecf9c8 100644
--- a/src/frontend/tubo/components/audio_player.cljs
+++ b/src/frontend/tubo/components/audio_player.cljs
@@ -4,6 +4,7 @@
    [re-frame.core :as rf]
    [reitit.frontend.easy :as rfe]
    [tubo.components.loading :as loading]
+   [tubo.components.player :as player]
    [tubo.events :as events]
    [tubo.util :as util]))
 
@@ -55,77 +56,59 @@
                                   (set! (.-src @!player) (:stream (nth media-queue idx)))
                                   (.play @!player))))}]]
         [:div.flex
-         [:button:focus:ring-transparent.mx-2.cursor-pointer
-          {:on-click #(rf/dispatch [::events/toggle-media-queue])}
-          [:i.fa-solid.fa-list]]
-         [:button.hidden.ml:block.focus:outline-none.mx-2
-          {:class    (when-not (and media-queue (not= media-queue-pos 0))
-                       "opacity-50 cursor-auto")
-           :on-click #(when (and media-queue (not= media-queue-pos 0))
-                        (rf/dispatch [::events/change-media-queue-pos
-                                      (- media-queue-pos 1)]))}
-          [:i.fa-solid.fa-backward-step]]
-         [:button.hidden.ml:block.focus:outline-none.mx-2
-          {:on-click #(set! (.-currentTime @!player) (- @!elapsed-time 5))}
-          [:i.fa-solid.fa-backward]]
-         [:button.focus:outline-none.mx-2
-          {:on-click #(if (.-paused @!player)
-                        (.play @!player)
-                        (.pause @!player))}
+         [player/button [:i.fa-solid.fa-list] #(rf/dispatch [::events/toggle-media-queue])
+          :show-on-mobile? true]
+         [player/button
+          [:i.fa-solid.fa-backward-step]
+          #(when (and media-queue (not= media-queue-pos 0))
+             (rf/dispatch [::events/change-media-queue-pos
+                           (- media-queue-pos 1)]))
+          :disabled? (not (and media-queue (not= media-queue-pos 0)))]
+         [player/button [:i.fa-solid.fa-backward] #(set! (.-currentTime @!player) (- @!elapsed-time 5))]
+         [player/button
           (if @!player
             (if show-audio-player-loading?
               [loading/loading-icon service-color "text-1xl"]
               (if (.-paused @!player)
                 [:i.fa-solid.fa-play]
                 [:i.fa-solid.fa-pause]))
-            [:i.fa-solid.fa-play])]
-         [:button.hidden.ml:block.focus:outline-none.mx-2
-          {:on-click #(set! (.-currentTime @!player) (+ @!elapsed-time 5))}
-          [:i.fa-solid.fa-forward]]
-         [:button.hidden.ml:block.focus:ring-transparent.mx-2
-          {:class    (when-not (and media-queue (< (+ media-queue-pos 1) (count media-queue)))
-                       "opacity-50 cursor-auto")
-           :on-click #(when (and media-queue (< (+ media-queue-pos 1) (count media-queue)))
-                        (rf/dispatch [::events/change-media-queue-pos
-                                      (+ media-queue-pos 1)]))}
-          [:i.fa-solid.fa-forward-step]]
-         [:div.flex.items-center
-          [:span.hidden.ml:block.mx-2 (if @!elapsed-time (util/format-duration @!elapsed-time) "00:00")]
-          [:input.hidden.ml:block.mx-2.w-20.ml:w-56.bg-gray-200.rounded-lg.cursor-pointer.focus:outline-none.h-1
-           {: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}]
-          [:span.hidden.ml:block.mx-2
+            [:i.fa-solid.fa-play])
+          #(if (.-paused @!player)
+             (.play @!player)
+             (.pause @!player))
+          :show-on-mobile? true]
+         [player/button [:i.fa-solid.fa-forward] #(set! (.-currentTime @!player) (+ @!elapsed-time 5))]
+         [player/button [:i.fa-solid.fa-forward-step]
+          #(when (and media-queue (< (+ media-queue-pos 1) (count media-queue)))
+             (rf/dispatch [::events/change-media-queue-pos
+                           (+ media-queue-pos 1)]))
+          :disabled? (not (and media-queue (< (+ media-queue-pos 1) (count media-queue))))]
+         [:div.hidden.lg:flex.items-center
+          [:span.mx-2 (if @!elapsed-time (util/format-duration @!elapsed-time) "00:00")]
+          [:div.w-20.lg:w-56.mx-2
+           [player/time-slider !player !elapsed-time service-color]]
+          [:span.mx-2
            (if player-ready? (util/format-duration (.-duration @!player)) "00:00")]
-          [:button.hidden.ml:flex.focus:ring-transparent.mx-2
-           {:on-click #(rf/dispatch [::events/toggle-loop-file])}
-           [:i.fa-solid.fa-repeat
-            {:style {:color (when loop-file? service-color)}}]]
-          [:button.hidden.ml:flex.focus:ring-transparent.mx-2
-           {:on-click #(rf/dispatch [::events/toggle-loop-playlist])}
-           [:i.fa-solid.fa-retweet
-            {:style {:color (when loop-playlist? service-color)}}]]
-          [:div.hidden.ml:flex.items-center
-           [:button.focus:outline-none.mx-2
-            {:on-click #(rf/dispatch [::events/toggle-mute @!player])}
-            (if (or (and @!player muted?))
-              [:i.fa-solid.fa-volume-xmark]
-              [:i.fa-solid.fa-volume-low])]
-           [:input.w-20.bg-gray-200.rounded-lg.cursor-pointer.focus:outline-none.h-1.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}]]]
-         [:div.mx-2
-          [:i.fa-solid.fa-close.cursor-pointer
-           {:on-click (fn []
-                        (rf/dispatch [::events/toggle-audio-player])
-                        (.pause @!player)
-                        (set! (.-currentTime @!player) 0))}]]]]])))
+          [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])]
+          [:div.hidden.lg:flex.items-center
+           [player/button
+            (if (or (and @!player muted?)) [:i.fa-solid.fa-volume-xmark] [:i.fa-solid.fa-volume-low])
+            #(rf/dispatch [::events/toggle-mute @!player])]
+           [player/volume-slider !player volume-level service-color]]]
+         [player/button [:i.fa-solid.fa-close]
+          (fn []
+            (rf/dispatch [::events/toggle-audio-player])
+            (.pause @!player)
+            (set! (.-currentTime @!player) 0))
+          :show-on-mobile? true]]]])))
diff --git a/src/frontend/tubo/components/play_queue.cljs b/src/frontend/tubo/components/play_queue.cljs
index bf9f433..19a49a3 100644
--- a/src/frontend/tubo/components/play_queue.cljs
+++ b/src/frontend/tubo/components/play_queue.cljs
@@ -4,6 +4,7 @@
    [reitit.frontend.easy :as rfe]
    [tubo.components.items :as items]
    [tubo.components.loading :as loading]
+   [tubo.components.player :as player]
    [tubo.events :as events]
    [tubo.util :as util]))
 
@@ -60,55 +61,57 @@
          [:a.text-sm.pt-2.text-neutral-600.dark:text-neutral-300.line-clamp-1
           {:href (rfe/href :tubo.routes/channel nil {:url uploader-url})} uploader-name]]
         [:div.flex.flex-auto.py-2.w-full.items-center
-         [:span (if @!elapsed-time (util/format-duration @!elapsed-time) "00:00")]
-         [:input.mx-2.bg-gray-200.rounded-lg.cursor-pointer.focus:outline-none.w-full.h-1
-          {:type      "range"
-           :on-input  #(reset! !elapsed-time (.. % -target -value))
-           :on-change #(when player-ready?
-                         (set! (.-currentTime @!player) @!elapsed-time))
-           :style     {:accentColor service-color}
-           :max       (if player-ready?
-                        (.floor js/Math (.-duration @!player))
-                        100)
-           :value     @!elapsed-time}]
-         [:span (if player-ready?
-                  (util/format-duration (.-duration @!player))
-                  "00:00")]]
+         [:span.mr-2 (if @!elapsed-time (util/format-duration @!elapsed-time) "00:00")]
+         [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
-         [:button.focus:ring-transparent.mx-2
-               {:on-click #(rf/dispatch [::events/toggle-loop-file])}
-               [:i.fa-solid.fa-repeat
-                {:style {:color (when loop-file? service-color)}}]]
-         [:button.focus:outline-none.mx-2.text-xl
-          {:class    (when-not (and media-queue (not= media-queue-pos 0))
-                       "opacity-50 cursor-auto")
-           :on-click #(when (and media-queue (not= media-queue-pos 0))
-                        (rf/dispatch [::events/change-media-queue-pos
-                                      (- media-queue-pos 1)]))}
-          [:i.fa-solid.fa-backward-step]]
-         [:button.focus:outline-none.mx-2.text-xl
-          {:on-click #(set! (.-currentTime @!player) (- @!elapsed-time 5))}
-          [:i.fa-solid.fa-backward]]
-         [:button.focus:outline-none.mx-2.text-3xl
-          {:on-click #(if (.-paused @!player)
-                        (.play @!player)
-                        (.pause @!player))}
+         [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/button
+          [:i.fa-solid.fa-backward-step]
+          #(when (and media-queue (not= media-queue-pos 0))
+             (rf/dispatch [::events/change-media-queue-pos
+                           (- media-queue-pos 1)]))
+          :disabled? (not (and media-queue (not= media-queue-pos 0)))
+          :extra-styles "text-xl"
+          :show-on-mobile? true]
+         [player/button
+          [:i.fa-solid.fa-backward]
+          #(set! (.-currentTime @!player) (- @!elapsed-time 5))
+          :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)
               [:i.fa-solid.fa-play]
-              [:i.fa-solid.fa-pause]))]
-         [:button.focus:outline-none.mx-2.text-xl
-          {:on-click #(set! (.-currentTime @!player) (+ @!elapsed-time 5))}
-          [:i.fa-solid.fa-forward]]
-         [:button.focus:ring-transparent.mx-2.text-xl
-          {:class    (when-not (and media-queue (< (+ media-queue-pos 1) (count media-queue)))
-                       "opacity-50 cursor-auto")
-           :on-click #(when (and media-queue (< (+ media-queue-pos 1) (count media-queue)))
-                        (rf/dispatch [::events/change-media-queue-pos
-                                      (+ media-queue-pos 1)]))}
-          [:i.fa-solid.fa-forward-step]]
-         [:button.focus:ring-transparent.mx-2
-          {:on-click #(rf/dispatch [::events/toggle-loop-playlist])}
-          [:i.fa-solid.fa-retweet
-           {:style {:color (when loop-playlist? service-color)}}]]]]])))
+              [:i.fa-solid.fa-pause]))
+          #(if (.-paused @!player)
+             (.play @!player)
+             (.pause @!player))
+          :extra-styles "text-3xl"
+          :show-on-mobile? true]
+         [player/button
+          [:i.fa-solid.fa-forward]
+          #(set! (.-currentTime @!player) (+ @!elapsed-time 5))
+          :extra-styles "text-xl"
+          :show-on-mobile? true]
+         [player/button
+          [:i.fa-solid.fa-forward-step]
+          #(when (and media-queue (< (+ media-queue-pos 1) (count media-queue)))
+             (rf/dispatch [::events/change-media-queue-pos
+                           (+ media-queue-pos 1)]))
+          :disabled? (not (and media-queue (< (+ media-queue-pos 1) (count media-queue))))
+          :extra-styles "text-xl"
+          :show-on-mobile? true]]]])))
diff --git a/src/frontend/tubo/components/player.cljs b/src/frontend/tubo/components/player.cljs
new file mode 100644
index 0000000..c851da8
--- /dev/null
+++ b/src/frontend/tubo/components/player.cljs
@@ -0,0 +1,33 @@
+(ns tubo.components.player
+  (:require
+   [re-frame.core :as rf]
+   [tubo.events :as events]))
+
+(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}])
+
+(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
+   {: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])
diff --git a/src/frontend/tubo/components/video_player.cljs b/src/frontend/tubo/components/video_player.cljs
index 0dd21d5..c94579a 100644
--- a/src/frontend/tubo/components/video_player.cljs
+++ b/src/frontend/tubo/components/video_player.cljs
@@ -8,7 +8,7 @@
   [options url]
   (let [!player (atom nil)]
     (r/create-class
-     {:display-name "StreamPlayer"
+     {:display-name "VideoPlayer"
       :component-did-mount
       (fn [this]
         (reset! !player (videojs (rdom/dom-node this) (clj->js options))))