diff options
Diffstat (limited to 'src/frontend')
| -rw-r--r-- | src/frontend/tau/events.cljs | 19 | ||||
| -rw-r--r-- | src/frontend/tau/subs.cljs | 5 | ||||
| -rw-r--r-- | src/frontend/tau/views/stream.cljs | 33 |
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 |