feat(frontend): Add basic global player

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])}]]])))

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

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]]]))

src/frontend/tau/views/player.cljs

@@ -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")}]]))

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