diff options
Diffstat (limited to 'src/frontend/tau/views')
| -rw-r--r-- | src/frontend/tau/views/stream.cljs | 33 |
1 files changed, 23 insertions, 10 deletions
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 |