diff options
| -rw-r--r-- | src/frontend/tubo/events.cljs | 42 | ||||
| -rw-r--r-- | src/frontend/tubo/views/playlist.cljs | 22 | ||||
| -rw-r--r-- | src/frontend/tubo/views/stream.cljs | 23 |
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])])]]])])) |