feat(frontend): split and improve media queue view styles

1 files changed, 36 insertions, 33 deletions

diff --git a/src/frontend/tubo/components/play_queue.cljs b/src/frontend/tubo/components/play_queue.cljs
index 19a49a3..9ae758a 100644
--- a/src/frontend/tubo/components/play_queue.cljs
+++ b/src/frontend/tubo/components/play_queue.cljs
@@ -8,53 +8,56 @@
    [tubo.events :as events]
    [tubo.util :as util]))
 
+(defn play-queue-item
+  [{:keys [uploader-name uploader-url name duration
+           stream url service-color thumbnail-url]} media-queue-pos i]
+  (let [service-name (case service-color
+                       "#cc0000" "YouTube"
+                       "#ff7700" "SoundCloud"
+                       "#333333" "media.ccc.de"
+                       "#F2690D" "PeerTube"
+                       "#629aa9" "Bandcamp")]
+    [:div.flex.w-full.h-24.rounded.px-2.cursor-pointer.my-2
+     {:class    (when (= i media-queue-pos) "bg-[#f0f0f0] dark:bg-stone-800")
+      :on-click #(rf/dispatch [::events/change-media-queue-pos i])}
+     [:div.w-56
+      [items/thumbnail thumbnail-url nil url name duration {:classes "h-24"}]]
+     [:div.flex.flex-col.px-4.py-2.w-full
+      [:h1.line-clamp-1 name]
+      [:div.text-neutral-600.dark:text-neutral-300.text-sm.flex.flex-col.xs:flex-row
+       [:span.line-clamp-1 uploader-name]
+       [:span.px-2.hidden.xs:inline-block {:dangerouslySetInnerHTML {:__html "•"}}]
+       [:span service-name]]]]))
+
 (defn queue
   []
-  (let [show-media-queue @(rf/subscribe [:show-media-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])
+        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-file? @(rf/subscribe [:loop-file])
-        loop-playlist? @(rf/subscribe [:loop-playlist])
-        player-ready? (and @!player (> (.-readyState @!player) 0))]
+                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))]
     (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(100vh - 56px)" :height "calc(100vh - 56px)"}
+       {:style {:minHeight "calc(100dvh - 56px)" :height "calc(100dvh - 56px)"}
         :class "dark:bg-neutral-900/90 bg-white/90 backdrop-blur"}
        [:div.flex.justify-between.pl-4.items-center.w-full.shrink-0
-        {:class "ml:w-4/5 xl:w-3/5"}
+        {: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
           {:on-click #(rf/dispatch [::events/toggle-media-queue])}]]]
        [:div.flex.flex-col.sm:p-4.w-full.overflow-y-auto.flex-auto
-        {:class "ml:w-4/5 xl:w-3/5"}
-        (for [[i {:keys [uploader-name uploader-url name duration
-                         stream url service-color thumbnail-url]}] (map-indexed vector media-queue)]
-          (let [service-name (case service-color
-                               "#cc0000" "YouTube"
-                               "#ff7700" "SoundCloud"
-                               "#333333" "media.ccc.de"
-                               "#F2690D" "PeerTube"
-                               "#629aa9" "Bandcamp")]
-            [:div.flex.w-full.h-24.rounded.px-2.cursor-pointer.my-2
-             {:key      i
-              :class    (when (= i media-queue-pos) "bg-[#f0f0f0] dark:bg-stone-800")
-              :on-click #(rf/dispatch [::events/change-media-queue-pos i])}
-             [:div.w-56
-              [items/thumbnail thumbnail-url nil url name duration {:classes "h-24"}]]
-             [:div.flex.flex-col.px-4.py-2.w-full
-              [:h1.line-clamp-1 name]
-              [:div.text-neutral-600.dark:text-neutral-300.text-sm.flex.flex-col.xs:flex-row
-               [:span.line-clamp-1 uploader-name]
-               [:span.px-2.hidden.xs:inline-block {:dangerouslySetInnerHTML {:__html "•"}}]
-               [:span service-name]]]]))]
+        {:class "lg:w-4/5 xl:w-3/5"}
+        (for [[i item] (map-indexed vector media-queue)]
+          ^{:key i} [play-queue-item item media-queue-pos i])]
        [:div.flex.flex-col.p-4.w-full.shrink-0
-        {:class "ml:w-4/5 xl:w-3/5"}
+        {:class "lg:w-4/5 xl:w-3/5"}
         [:div.flex.flex-col.w-full.py-2
          [:a.text-md.line-clamp-1
           {:href (rfe/href :tubo.routes/stream nil {:url url})} name]