diff options
| -rw-r--r-- | src/frontend/tubo/components/play_queue.cljs | 69 |
1 files changed, 36 insertions, 33 deletions
diff --git a/src/frontend/tubo/components/play_queue.cljs b/src/frontend/tubo/components/play_queue.cljs index 19a49a3..9ae758a 100644 --- a/src/frontend/tubo/components/play_queue.cljs +++ b/src/frontend/tubo/components/play_queue.cljs @@ -8,53 +8,56 @@ [tubo.events :as events] [tubo.util :as util])) +(defn play-queue-item + [{:keys [uploader-name uploader-url name duration + stream url service-color thumbnail-url]} media-queue-pos i] + (let [service-name (case service-color + "#cc0000" "YouTube" + "#ff7700" "SoundCloud" + "#333333" "media.ccc.de" + "#F2690D" "PeerTube" + "#629aa9" "Bandcamp")] + [:div.flex.w-full.h-24.rounded.px-2.cursor-pointer.my-2 + {:class (when (= i media-queue-pos) "bg-[#f0f0f0] dark:bg-stone-800") + :on-click #(rf/dispatch [::events/change-media-queue-pos i])} + [:div.w-56 + [items/thumbnail thumbnail-url nil url name duration {:classes "h-24"}]] + [:div.flex.flex-col.px-4.py-2.w-full + [:h1.line-clamp-1 name] + [:div.text-neutral-600.dark:text-neutral-300.text-sm.flex.flex-col.xs:flex-row + [:span.line-clamp-1 uploader-name] + [:span.px-2.hidden.xs:inline-block {:dangerouslySetInnerHTML {:__html "•"}}] + [:span service-name]]]])) + (defn queue [] - (let [show-media-queue @(rf/subscribe [:show-media-queue]) + (let [show-media-queue @(rf/subscribe [:show-media-queue]) show-audio-player-loading? @(rf/subscribe [:show-audio-player-loading]) - media-queue @(rf/subscribe [:media-queue]) - media-queue-pos @(rf/subscribe [:media-queue-pos]) + media-queue @(rf/subscribe [:media-queue]) + media-queue-pos @(rf/subscribe [:media-queue-pos]) {:keys [uploader-name uploader-url - name stream url service-color] :as current-stream} @(rf/subscribe [:media-queue-stream]) - !elapsed-time @(rf/subscribe [:elapsed-time]) - !player @(rf/subscribe [:player]) - loop-file? @(rf/subscribe [:loop-file]) - loop-playlist? @(rf/subscribe [:loop-playlist]) - player-ready? (and @!player (> (.-readyState @!player) 0))] + name stream url service-color] + :as current-stream} @(rf/subscribe [:media-queue-stream]) + !elapsed-time @(rf/subscribe [:elapsed-time]) + !player @(rf/subscribe [:player]) + loop-playback @(rf/subscribe [:loop-playback]) + player-ready? (and @!player (> (.-readyState @!player) 0))] (when (and show-media-queue media-queue) [:div.fixed.flex.flex-col.items-center.px-5.py-2.min-w-full.w-full.z-30 - {:style {:minHeight "calc(100vh - 56px)" :height "calc(100vh - 56px)"} + {:style {:minHeight "calc(100dvh - 56px)" :height "calc(100dvh - 56px)"} :class "dark:bg-neutral-900/90 bg-white/90 backdrop-blur"} [:div.flex.justify-between.pl-4.items-center.w-full.shrink-0 - {:class "ml:w-4/5 xl:w-3/5"} + {:class "lg:w-4/5 xl:w-3/5"} [:h1.text-2xl.font-bold.py-6 "Play Queue"] [:div.mx-2 [:i.fa-solid.fa-close.cursor-pointer {:on-click #(rf/dispatch [::events/toggle-media-queue])}]]] [:div.flex.flex-col.sm:p-4.w-full.overflow-y-auto.flex-auto - {:class "ml:w-4/5 xl:w-3/5"} - (for [[i {:keys [uploader-name uploader-url name duration - stream url service-color thumbnail-url]}] (map-indexed vector media-queue)] - (let [service-name (case service-color - "#cc0000" "YouTube" - "#ff7700" "SoundCloud" - "#333333" "media.ccc.de" - "#F2690D" "PeerTube" - "#629aa9" "Bandcamp")] - [:div.flex.w-full.h-24.rounded.px-2.cursor-pointer.my-2 - {:key i - :class (when (= i media-queue-pos) "bg-[#f0f0f0] dark:bg-stone-800") - :on-click #(rf/dispatch [::events/change-media-queue-pos i])} - [:div.w-56 - [items/thumbnail thumbnail-url nil url name duration {:classes "h-24"}]] - [:div.flex.flex-col.px-4.py-2.w-full - [:h1.line-clamp-1 name] - [:div.text-neutral-600.dark:text-neutral-300.text-sm.flex.flex-col.xs:flex-row - [:span.line-clamp-1 uploader-name] - [:span.px-2.hidden.xs:inline-block {:dangerouslySetInnerHTML {:__html "•"}}] - [:span service-name]]]]))] + {:class "lg:w-4/5 xl:w-3/5"} + (for [[i item] (map-indexed vector media-queue)] + ^{:key i} [play-queue-item item media-queue-pos i])] [:div.flex.flex-col.p-4.w-full.shrink-0 - {:class "ml:w-4/5 xl:w-3/5"} + {:class "lg:w-4/5 xl:w-3/5"} [:div.flex.flex-col.w-full.py-2 [:a.text-md.line-clamp-1 {:href (rfe/href :tubo.routes/stream nil {:url url})} name] |