feat: refine queue container and player styles in main player

src/frontend/tubo/main_player/views.cljs

@@ -5,7 +5,8 @@
    [tubo.layout.views :as layout]
    [tubo.player.views :as player]
    [tubo.queue.views :as queue]
-   [tubo.stream.views :as stream]))
+   [tubo.stream.views :as stream]
+   [tubo.utils :as utils]))
 
 (defn player-args
   [!player]
@@ -27,7 +28,9 @@
         stream        @(rf/subscribe [:queue/current])
         show-player?  @(rf/subscribe [:main-player/show])
         loop-playback @(rf/subscribe [:player/loop])
-        service-color @(rf/subscribe [:service-color])
+        color         (-> stream
+                          :service-id
+                          utils/get-service-color)
         shuffled      @(rf/subscribe [:player/shuffled])]
     [:div.fixed.w-full.bg-neutral-100.dark:bg-neutral-900.overflow-auto.z-10.transition-all.ease-in-out
      {:class ["h-[calc(100%-56px)]"
@@ -39,17 +42,17 @@
           #(rf/dispatch [:main-player/set-stream stream pos])]]
         [:div.flex.flex-col.w-full.p-4
          {:class ["lg:w-4/5" "xl:w-3/5"]}
-         [:div.border.border-neutral-700.rounded-md
-          [:div.p-5.flex.items-center.justify-between.bg-neutral-800.rounded-t-md.border-b.border-neutral-700
+         [:div.bg-neutral-200.dark:bg-neutral-950
+          [:div.p-5.flex.items-center.justify-between.rounded-t-md
            [:div.flex.flex-col
             [:h4.font-bold.text-lg "Queue"]
-            [:span.text-xs.text-neutral-400.dark:text-neutral-500
-             (str pos "/" (count queue))]]
+            [:span.text-xs.text-neutral-600.dark:text-neutral-500
+             (str (inc pos) "/" (count queue))]]
            [:div.flex.items-center
             [:div.px-4
-             [player/loop-button loop-playback service-color true]]
+             [player/loop-button loop-playback color true]]
             [:div.pl-4.pr-5
-             [player/shuffle-button shuffled service-color true]]
+             [player/shuffle-button shuffled color true]]
             [bg-player/popover stream]]]
           [:div.flex.flex-col.gap-y-1.w-full.h-fit.max-h-64.overflow-y-auto.relative.scroll-smooth
            (for [[i item] (map-indexed vector queue)]

src/frontend/tubo/player/views.cljs

@@ -20,7 +20,8 @@
      MediaSettingsMenu
      MediaSettingsMenuButton
      MediaSettingsMenuItem
-     MediaRenditionMenu)]))
+     MediaRenditionMenu)]
+   [tubo.utils :as utils]))
 
 (defn button
   [& {:keys [icon on-click disabled? show-on-mobile? extra-classes]}]
@@ -58,11 +59,11 @@
 
 (defn video-player
   [_ _ _ on-mount]
-  (let [service-color @(rf/subscribe [:service-color])]
-    (r/create-class
-     {:component-did-mount on-mount
-      :reagent-render
-      (fn [{:keys [thumbnails subtitles]} !player video-args]
+  (r/create-class
+   {:component-did-mount on-mount
+    :reagent-render
+    (fn [{:keys [thumbnails subtitles service-id]} !player video-args]
+      (let [service-color (utils/get-service-color service-id)]
         [:div
          {:class "w-full h-80 md:h-[450px] lg:h-[600px]"}
          [:> MediaController
@@ -162,4 +163,4 @@
            [:span.control-spacer.grow]
            [:> MediaSettingsMenuButton]
            [:> MediaPipButton]
-           [:> MediaFullscreenButton]]]])})))
+           [:> MediaFullscreenButton]]]]))}))

src/frontend/tubo/queue/views.cljs

@@ -11,7 +11,7 @@
 (defn item-metadata
   [{:keys [uploader-name name service-id duration thumbnails]} queue-pos i]
   [:div.flex.cursor-pointer.py-2
-   {:class    (when (= i queue-pos) ["bg-neutral-200" "dark:bg-neutral-800"])
+   {:class    (when (= i queue-pos) ["bg-neutral-300" "dark:bg-neutral-800"])
     :on-click #(rf/dispatch [:queue/change-pos i])}
    [:div.flex.items-center.justify-center.min-w-16.w-16.xs:min-w-28.xs:w-28
     [:span.font-bold.text-neutral-400.text-sm