feat(frontend): add support for enqueueing suggested streams

3 files changed, 54 insertions, 33 deletions

diff --git a/src/frontend/tubo/events.cljs b/src/frontend/tubo/events.cljs
index 2d5b549..157c509 100644
--- a/src/frontend/tubo/events.cljs
+++ b/src/frontend/tubo/events.cljs
@@ -191,11 +191,12 @@
 (rf/reg-event-fx
  ::add-to-media-queue
   [(rf/inject-cofx :store)]
- (fn [{:keys [db store]} [_ stream]]
-   (let [updated-db (update db :media-queue conj stream)]
-     {:db updated-db
-      :store (assoc store :media-queue (:media-queue updated-db))
-      :fx [[:dispatch [::fetch-audio-player-stream (:url stream)]]]})))
+  (fn [{:keys [db store]} [_ stream]]
+    (let [updated-db (update db :media-queue conj stream)
+          idx (.indexOf (:media-queue updated-db) stream)]
+      {:db    updated-db
+       :store (assoc store :media-queue (:media-queue updated-db))
+       :fx    [[:dispatch [::fetch-audio-player-stream (:url stream) idx]]]})))
 
 (rf/reg-event-fx
  ::change-media-queue-pos
@@ -207,10 +208,8 @@
 (rf/reg-event-fx
  ::change-media-queue-stream
  [(rf/inject-cofx :store)]
- (fn [{:keys [db store]} [_ src]]
-   (let [idx (- (count (:media-queue db)) 1)
-         update-entry
-         (fn [elem] (assoc-in elem [:media-queue idx :stream] src))]
+ (fn [{:keys [db store]} [_ src idx]]
+   (let [update-entry #(assoc-in % [:media-queue idx :stream] src)]
      (when-not (-> db :media-queue (nth idx) :stream)
        {:db (update-entry db)
         :store (update-entry store)}))))
@@ -231,10 +230,22 @@
 (rf/reg-event-fx
  ::switch-to-audio-player
  [(rf/inject-cofx :store)]
- (fn [{:keys [db store]} [_ stream]]
+ (fn [{:keys [db store]} [_ stream service-color]]
    {:db (assoc db :show-audio-player true)
     :store (assoc store :show-audio-player true)
-    :fx [[:dispatch [::add-to-media-queue stream]]]}))
+    :fx [[:dispatch [::add-to-media-queue (conj stream {:service-color service-color})]]]}))
+
+(rf/reg-event-fx
+ ::enqueue-related-streams
+ [(rf/inject-cofx :store)]
+ (fn [{:keys [db store]} [_ streams service-color]]
+   {:db (assoc db :show-audio-player true)
+    :store (assoc store :show-audio-player true)
+    :fx (into [] (map #(identity [:dispatch
+                                  [::add-to-media-queue
+                                   (conj {:service-color service-color} %)]])
+                      streams))}))
+
 
 (rf/reg-event-db
  ::load-services
@@ -378,11 +389,12 @@
 
 (rf/reg-event-fx
  ::load-audio-player-stream
- (fn [{:keys [db]} [_ res]]
+ (fn [{:keys [db]} [_ idx res]]
    (let [stream-res (js->clj res :keywordize-keys true)]
      {:db (assoc db :show-audio-player-loading false)
       :fx [[:dispatch [::change-media-queue-stream
-                       (-> stream-res :audio-streams first :content)]]]})))
+                       (-> stream-res :audio-streams first :content)
+                       idx]]]})))
 
 (rf/reg-event-fx
  ::load-stream-page
@@ -403,10 +415,10 @@
 
 (rf/reg-event-fx
  ::fetch-audio-player-stream
- (fn [{:keys [db]} [_ uri]]
+ (fn [{:keys [db]} [_ uri idx]]
    (assoc
     (api/get-request (str "/api/streams/" (js/encodeURIComponent uri))
-                     [::load-audio-player-stream] [::bad-response])
+                     [::load-audio-player-stream idx] [::bad-response])
     :db (assoc db :show-audio-player-loading true))))
 
 (rf/reg-event-fx
diff --git a/src/frontend/tubo/views/playlist.cljs b/src/frontend/tubo/views/playlist.cljs
index a3f3a9d..9eaccdf 100644
--- a/src/frontend/tubo/views/playlist.cljs
+++ b/src/frontend/tubo/views/playlist.cljs
@@ -26,14 +26,20 @@
         (when banner-url
           [:div
            [:img {:src banner-url}]])
-        [:div.flex.items-center.justify-center.my-4.mx-2
-         [:div.flex.flex-col.justify-center.items-center
-          [:h1.text-2xl.font-bold name]
-          [:div.flex.items-center.pt-4
-           [:span.mr-2 "By"]
-           [:div.flex.items-center.py-3.box-border.h-12
+        [:div.flex.flex-col.justify-center.my-4.mx-2
+         [:h1.text-2xl.font-bold.mb-4.line-clamp-1 {:title name} name]
+         [:div.flex.items-center.justify-between
+          [:div.flex.items-center.my-4.mr-2
+           [:div.flex.items-center.py-3.pr-3.box-border.h-12
             [:div.w-12
              [:a {:href (rfe/href :tubo.routes/channel nil {:url uploader-url}) :title uploader-name}
-              [:img.rounded-full.object-cover.min-h-full.min-w-full {:src uploader-avatar :alt uploader-name}]]]]]
-          [:p.pt-4 (str stream-count " streams")]]]
+              [:img.rounded-full.object-cover.min-h-full.min-w-full {:src uploader-avatar :alt uploader-name}]]]]
+           [:a {:href (rfe/href :tubo.routes/channel nil {:url uploader-url}) :title uploader-name}
+            uploader-name]]
+          [:span.ml-2 (str stream-count " streams")]]
+         [:div.flex.flex.w-full.my-4.justify-center
+          [:button.px-3.py-1.mx-2
+           {:on-click #(rf/dispatch [::events/enqueue-related-streams related-streams service-color])}
+           [:i.fa-solid.fa-headphones]
+           [:span.mx-3.text-neutral-600.dark:text-neutral-300 "Background"]]]]
         [items/related-streams related-streams next-page-url]])]))
diff --git a/src/frontend/tubo/views/stream.cljs b/src/frontend/tubo/views/stream.cljs
index 91b59dd..8024a13 100644
--- a/src/frontend/tubo/views/stream.cljs
+++ b/src/frontend/tubo/views/stream.cljs
@@ -42,10 +42,8 @@
             content])]
         [:div.px-4.ml:p-0.overflow-x-hidden
          [:div.flex.flex.w-full.my-4.justify-center
-          [:button.px-3.py-1.mx-2
-           {:on-click #(rf/dispatch [::events/switch-to-audio-player
-                                     {:uploader-name uploader-name :uploader-url uploader-url
-                                      :name name :url url :stream content :service-color service-color}])}
+          [:button.sm:px-2.py-1.text-sm.sm:text-base.text-neutral-600.dark:text-neutral-300
+           {:on-click #(rf/dispatch [::events/switch-to-audio-player stream service-color])}
            [:i.fa-solid.fa-headphones]
            [:span.mx-3.text-neutral-600.dark:text-neutral-300 "Background"]]
           [:button.px-3.py-1.mx-2
@@ -129,11 +127,16 @@
                   [comments/comments comments-page uploader-name uploader-avatar url]))]])
           (when (and show-related? (not (empty? related-streams)))
             [:div.py-6
-             [:div.flex.items-center
-              [:i.fa-solid.fa-list]
-              [:h1.px-2.text-lg.bold "Related Results"]
-              [:i.fa-solid.fa-chevron-up.cursor-pointer
-               {:class    (if (not show-related) "fa-chevron-up" "fa-chevron-down")
-                :on-click #(rf/dispatch [::events/toggle-stream-layout :show-related])}]]
+             [:div.flex.justify-between
+              [:div.flex.items-center.text-sm.sm:text-base
+               [:i.fa-solid.fa-list]
+               [:h1.px-2.text-lg.bold "Suggested"]
+               [:i.fa-solid.fa-chevron-up.cursor-pointer
+                {:class    (if (not show-related) "fa-chevron-up" "fa-chevron-down")
+                 :on-click #(rf/dispatch [::events/toggle-stream-layout :show-related])}]]
+              [:button
+               {:on-click #(rf/dispatch [::events/enqueue-related-streams related-streams service-color])}
+               [:i.fa-solid.fa-headphones]
+               [:span.mx-2.text-neutral-600.dark:text-neutral-300 "Background"]]]
              (when (not show-related)
                [items/related-streams related-streams nil])])]]])]))