feat(frontend): Add support for stream format selection

3 files changed, 43 insertions, 14 deletions

diff --git a/src/frontend/tau/events.cljs b/src/frontend/tau/events.cljs
index 12404dc..dace6f5 100644
--- a/src/frontend/tau/events.cljs
+++ b/src/frontend/tau/events.cljs
@@ -309,11 +309,12 @@
        {:nextPage (js/encodeURIComponent next-page-url)})
       :db (assoc db :show-pagination-loading true)))))
 
-(rf/reg-event-db
+(rf/reg-event-fx
  ::load-stream
- (fn [db [_ res]]
-   (assoc db :stream (js->clj res :keywordize-keys true)
-          :show-page-loading false)))
+ (fn [{:keys [db]} [_ res]]
+   {:db (assoc db :stream (js->clj res :keywordize-keys true)
+               :show-page-loading false)
+    :fx [[:dispatch [::change-stream-format nil]]]}))
 
 (rf/reg-event-fx
  ::get-stream
@@ -324,6 +325,16 @@
     :db (assoc db :show-page-loading true))))
 
 (rf/reg-event-db
+ ::change-stream-format
+ (fn [{:keys [stream] :as db} [_ format-id]]
+   (let [{:keys [audio-streams video-streams]} stream]
+     (if format-id
+       (assoc db :stream-format
+              (first (filter #(= format-id (:id %)) (apply conj audio-streams video-streams))))
+       (assoc db :stream-format (-> (if (empty? video-streams) audio-streams video-streams)
+                                    last))))))
+
+(rf/reg-event-db
  ::load-channel
  (fn [db [_ res]]
    (assoc db :channel (js->clj res :keywordize-keys true)
diff --git a/src/frontend/tau/subs.cljs b/src/frontend/tau/subs.cljs
index 047e93c..41bbb67 100644
--- a/src/frontend/tau/subs.cljs
+++ b/src/frontend/tau/subs.cljs
@@ -18,6 +18,11 @@
    (:stream db)))
 
 (rf/reg-sub
+ :stream-format
+ (fn [db _]
+   (:stream-format db)))
+
+(rf/reg-sub
  :playlist
  (fn [db _]
    (:playlist db)))
diff --git a/src/frontend/tau/views/stream.cljs b/src/frontend/tau/views/stream.cljs
index 312d670..78a1b1e 100644
--- a/src/frontend/tau/views/stream.cljs
+++ b/src/frontend/tau/views/stream.cljs
@@ -17,30 +17,43 @@
                 uploader-url upload-date related-streams
                 thumbnail-url show-comments-loading comments-page
                 show-comments service-id] :as stream} @(rf/subscribe [:stream])
-        stream-type (-> (if (empty? video-streams) audio-streams video-streams)
-                        last
-                        :content)
+        available-streams (apply conj audio-streams video-streams)
+        {:keys [content id] :as stream-format} @(rf/subscribe [:stream-format])
         page-loading? @(rf/subscribe [:show-page-loading])
         service-color @(rf/subscribe [:service-color])]
     [:div.flex.flex-col.items-center.justify-center.text-white.flex-auto
      (if page-loading?
        [loading/loading-icon service-color "text-5xl"]
-       [:div.w-full.pb-4 {:class "ml:w-4/5 xl:w-3/5"}
+       [:div.w-full.pb-4.relative {:class "ml:w-4/5 xl:w-3/5"}
         [navigation/back-button service-color]
         [:div.flex.justify-center.relative
          {:style {:background (str "center / cover no-repeat url('" thumbnail-url"')")}
           :class "ml:h-[450px] lg:h-[600px]"}
-         [:video.bottom-0.object-cover.max-h-full.min-w-full
-          {:src stream-type :controls true}]]
+         [:video.bottom-0.object-cover.min-h-full.max-h-full.min-w-full
+          {:src content :controls true}
+          "This browser can't play the stream format."]]
         [:div.px-4.ml:p-0
-         [:div.flex.flex.w-full.mt-3.justify-center
+         [:div.flex.flex.w-full.mt-3
+          (when stream-format
+            [:div.relative.flex.bg-stone-800.flex-col.items-center.justify-center.z-10.mr-2.border.rounded.border-black
+             [:select.border-none.focus:ring-transparent.bg-blend-color-dodge.pl-4.pr-8.w-full
+              {:on-change #(rf/dispatch [::events/change-stream-format (.. % -target -value)])
+               :value id
+               :style {:background "transparent"}}
+              (when available-streams
+                (for [[i {:keys [id format resolution averageBitrate]}] (map-indexed vector available-streams)]
+                  [:option.bg-neutral-900.border-none {:value id :key i}
+                   (str (or resolution "audio-only") " " format (when-not resolution (str " " averageBitrate "kbit/s")))]))]
+             [:div.flex.absolute.min-h-full.top-0.right-4.items-center.justify-end
+              {:style {:zIndex "-1"}}
+              [:i.fa-solid.fa-caret-down]]])
           [:button.border.rounded.border-black.px-3.py-1.bg-stone-800
            {:on-click #(rf/dispatch [::events/switch-to-global-player
                                      {:uploader-name uploader-name :uploader-url uploader-url
-                                      :name name :url url :stream stream-type :service-color service-color}])}
+                                      :name name :url url :stream content :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
+          [:button.border.rounded.border-black.px-3.py-1.bg-stone-800.mx-2
+           [:a {:href url}
             [:i.fa-solid.fa-external-link-alt]]]]
          [:div.flex.flex-col.py-1.comments
           [:div.min-w-full.py-3