From c3b4e2d87a2031c3499e49f47c39c7119adeb170 Mon Sep 17 00:00:00 2001 From: Miguel Ángel Moreno Date: Fri, 30 Dec 2022 01:01:26 +0100 Subject: feat(frontend): Add basic global player --- src/frontend/tau/components/player.cljs | 21 +++++++++++++++++++++ src/frontend/tau/events.cljs | 14 ++++++++++++-- src/frontend/tau/views.cljs | 8 ++++---- src/frontend/tau/views/player.cljs | 11 ----------- src/frontend/tau/views/stream.cljs | 6 ++++-- 5 files changed, 41 insertions(+), 19 deletions(-) create mode 100644 src/frontend/tau/components/player.cljs delete mode 100644 src/frontend/tau/views/player.cljs diff --git a/src/frontend/tau/components/player.cljs b/src/frontend/tau/components/player.cljs new file mode 100644 index 0000000..b7ba099 --- /dev/null +++ b/src/frontend/tau/components/player.cljs @@ -0,0 +1,21 @@ +(ns tau.components.player + (:require + [re-frame.core :as rf] + [reitit.frontend.easy :as rfe] + [tau.events :as events])) + +(defn global-player + [] + (let [{:keys [uploader-name uploader-url name stream url service-color]} @(rf/subscribe [:global-stream]) + show-global-player? @(rf/subscribe [:show-global-player])] + (when show-global-player? + [:div.sticky.bottom-0.z-50.bg-neutral-900.p-5.absolute + {:style {:borderColor service-color :borderTopWidth "2px" :borderStyle "solid"}} + [:div.flex.items-center.justify-between + [:div.flex.flex-col + [:a.text-xs + {:href (rfe/href :tau.router/stream nil {:url url})} name] + [:a.text-xs.text-gray-300 + {:href (rfe/href :tau.router/channel nil {:url uploader-url})} uploader-name]] + [:audio {:src stream :controls true}] + [:i.fa-solid.fa-close.cursor-pointer {:on-click #(rf/dispatch [::events/toggle-global-player])}]]]))) diff --git a/src/frontend/tau/events.cljs b/src/frontend/tau/events.cljs index ed01467..24da7d0 100644 --- a/src/frontend/tau/events.cljs +++ b/src/frontend/tau/events.cljs @@ -155,11 +155,21 @@ :nextPage (js/encodeURIComponent next-page-url)}) :db (assoc db :show-pagination-loading true))))) +(rf/reg-event-db + ::change-global-stream + (fn [db [_ global-stream]] + (assoc db :global-stream global-stream))) + +(rf/reg-event-db + ::toggle-global-player + (fn [db _] + (assoc db :show-global-player (not (:show-global-player db))))) + (rf/reg-event-fx ::switch-to-global-player - (fn [{:keys [db]} [_ res]] + (fn [{:keys [db]} [_ global-stream]] {:db (assoc db :show-global-player true) - :fx [[:dispatch [::change-global-search res]]]})) + :fx [[:dispatch [::change-global-stream global-stream]]]})) (rf/reg-event-db ::load-services diff --git a/src/frontend/tau/views.cljs b/src/frontend/tau/views.cljs index 4f89fef..3201687 100644 --- a/src/frontend/tau/views.cljs +++ b/src/frontend/tau/views.cljs @@ -4,9 +4,9 @@ [re-frame.core :as rf] [reagent.ratom :as ratom] [tau.components.navigation :as navigation] + [tau.components.player :as player] [tau.events :as events] - [tau.routes :as routes] - [tau.views.player :as player])) + [tau.routes :as routes])) (defonce scroll-hook (.addEventListener js/window "scroll" #(rf/dispatch [::events/page-scroll]))) (defonce services (rf/dispatch [::events/get-services])) @@ -82,5 +82,5 @@ [:div.flex.flex-col.justify-between.relative.font-nunito {:class "min-h-[calc(100vh-58px)]"} (when-let [view (-> current-match :data :view)] [view current-match]) - [player/global-player] - [footer]]])) + [footer] + [player/global-player]]])) diff --git a/src/frontend/tau/views/player.cljs b/src/frontend/tau/views/player.cljs deleted file mode 100644 index 732e542..0000000 --- a/src/frontend/tau/views/player.cljs +++ /dev/null @@ -1,11 +0,0 @@ -(ns tau.views.player - (:require - [re-frame.core :as rf])) - -(defn global-player - [] - (let [global-stream @(rf/subscribe [:global-stream]) - show-global-player? @(rf/subscribe [:show-global-player])] - [:div - [:audio {:src global-stream - :class (when-not show-global-player? "hidden")}]])) diff --git a/src/frontend/tau/views/stream.cljs b/src/frontend/tau/views/stream.cljs index 033b2da..7ef9e85 100644 --- a/src/frontend/tau/views/stream.cljs +++ b/src/frontend/tau/views/stream.cljs @@ -16,7 +16,7 @@ description uploader-avatar uploader-author uploader-url upload-date related-streams thumbnail-url show-comments-loading comments-page - show-comments] :as stream} @(rf/subscribe [:stream]) + show-comments service-id] :as stream} @(rf/subscribe [:stream]) stream-type (-> (if (empty? video-streams) audio-streams video-streams) last :content) @@ -35,7 +35,9 @@ [:div.px-4.md:p-0 [:div.flex.flex.w-full.mt-3.justify-center [:button.border.rounded.border-black.px-3.py-1.bg-stone-800 - {:on-click #(rf/dispatch [::events/switch-to-global-player stream])} + {:on-click #(rf/dispatch [::events/switch-to-global-player + {:uploader-name uploader-author :uploader-url uploader-url + :name name :url url :stream stream-type :service-color service-color}])} [:i.fa-solid.fa-headphones]] [:a {:href url} [:button.border.rounded.border-black.px-3.py-1.bg-stone-800.mx-2 -- cgit v1.2.3