diff options
Diffstat (limited to 'src/frontend/tau/views')
| -rw-r--r-- | src/frontend/tau/views/channel.cljs | 33 | ||||
| -rw-r--r-- | src/frontend/tau/views/home.cljs | 7 | ||||
| -rw-r--r-- | src/frontend/tau/views/kiosk.cljs | 36 | ||||
| -rw-r--r-- | src/frontend/tau/views/playlist.cljs | 49 | ||||
| -rw-r--r-- | src/frontend/tau/views/search.cljs | 21 | ||||
| -rw-r--r-- | src/frontend/tau/views/stream.cljs | 111 |
6 files changed, 176 insertions, 81 deletions
diff --git a/src/frontend/tau/views/channel.cljs b/src/frontend/tau/views/channel.cljs index abdbb54..db8c221 100644 --- a/src/frontend/tau/views/channel.cljs +++ b/src/frontend/tau/views/channel.cljs @@ -12,30 +12,35 @@ related-streams next-page]} @(rf/subscribe [:channel]) next-page-url (:url next-page) service-color @(rf/subscribe [:service-color]) - page-scroll @(rf/subscribe [:page-scroll]) page-loading? @(rf/subscribe [:show-page-loading]) pagination-loading? @(rf/subscribe [:show-pagination-loading]) + page-scroll @(rf/subscribe [:page-scroll]) scrolled-to-bottom? (= page-scroll (.-scrollHeight js/document.body))] (when scrolled-to-bottom? - (rf/dispatch [::events/scroll-channel-pagination url next-page-url])) - [:div.flex.flex-col.items-center.px-5.py-2.text-white.flex-auto + (rf/dispatch [::events/channel-pagination url next-page-url])) + [:div.flex.flex-col.items-center.px-5.py-2.flex-auto (if page-loading? [loading/page-loading-icon service-color] [:div {:class "w-4/5"} - [navigation/back-button] - [:div [:img {:src banner}]] + [navigation/back-button service-color] + (when banner + [:div + [:img {:src banner}]]) [:div.flex.items-center.my-4.mx-2 - [:div - [:img.rounded-full {:src avatar}]] + (when avatar + [:div.relative.w-16.h-16 + [:img.rounded-full.object-cover.max-w-full.min-h-full {:src avatar :alt name}]]) [:div.m-4 [:h1.text-xl name] - [:div.flex.my-2.items-center - [:i.fa-solid.fa-users] - [:span.mx-2 subscriber-count]]]] + (when subscriber-count + [:div.flex.my-2.items-center + [:i.fa-solid.fa-users.text-xs] + [:span.mx-2 (.toLocaleString subscriber-count)]])]] [:div.my-2 [:p description]] - [:div.flex.justify-center.align-center.flex-wrap.my-2 - (for [[i result] (map-indexed vector related-streams)] - [items/stream-item i result])] + [:div.flex.justify-center.items-center.align-center + [:div.flex.justify-start.flex-wrap + (for [[i result] (map-indexed vector related-streams)] + [items/stream-item (assoc result :key i)])]] (when-not (empty? next-page-url) - [loading/pagination-loading-icon service-color pagination-loading?])])])) + [loading/items-pagination-loading-icon service-color pagination-loading?])])])) diff --git a/src/frontend/tau/views/home.cljs b/src/frontend/tau/views/home.cljs deleted file mode 100644 index 00d2e1e..0000000 --- a/src/frontend/tau/views/home.cljs +++ /dev/null @@ -1,7 +0,0 @@ -(ns tau.views.home) - -(defn home-page - [match] - [:div.flex.justify-center.content-center.flex-col.text-center.text-white.text-lg.flex-auto - [:p.text-5xl.p-5 "Welcome to Tau"] - [:p.text-2xl "A web front-end for Newpipe"]]) diff --git a/src/frontend/tau/views/kiosk.cljs b/src/frontend/tau/views/kiosk.cljs index 70caacf..6aea258 100644 --- a/src/frontend/tau/views/kiosk.cljs +++ b/src/frontend/tau/views/kiosk.cljs @@ -1,9 +1,35 @@ (ns tau.views.kiosk (:require - [re-frame.core :as rf])) + [re-frame.core :as rf] + [tau.components.items :as items] + [tau.components.loading :as loading] + [tau.components.navigation :as navigation] + [tau.events :as events])) (defn kiosk - [match] - (let [{:keys [id url related-streams]} @(rf/subscribe [:kiosk])] - [:div - [:h1 id]])) + [{{:keys [serviceId kioskId]} :query-params}] + (let [{:keys [id url related-streams next-page]} @(rf/subscribe [:kiosk]) + next-page-url (:url next-page) + service-color @(rf/subscribe [:service-color]) + page-loading? @(rf/subscribe [:show-page-loading]) + pagination-loading? @(rf/subscribe [:show-pagination-loading]) + page-scroll @(rf/subscribe [:page-scroll]) + scrolled-to-bottom? (= page-scroll (.-scrollHeight js/document.body))] + (when scrolled-to-bottom? + (rf/dispatch [::events/kiosk-pagination serviceId id next-page-url])) + [:div.flex.flex-col.items-center.px-5.py-2.flex-auto + (if page-loading? + [loading/page-loading-icon service-color] + [:div + [:div.flex.justify-center.items-center.my-4.mx-2 + [:div.m-4 + [:h1.text-2xl id]]] + [:div.flex.justify-center.items-center.align-center + [:div.flex.justify-start.flex-wrap + (for [[i item] (map-indexed vector related-streams)] + (case (:type item) + "stream" [items/stream-item (assoc item :key i)] + "channel" [items/channel-item (assoc item :key i)] + "playlist" [items/playlist-item (assoc item :key i)]))]] + (when-not (empty? next-page-url) + [loading/items-pagination-loading-icon service-color pagination-loading?])])])) diff --git a/src/frontend/tau/views/playlist.cljs b/src/frontend/tau/views/playlist.cljs index b82cc24..48f18e4 100644 --- a/src/frontend/tau/views/playlist.cljs +++ b/src/frontend/tau/views/playlist.cljs @@ -1,5 +1,48 @@ -(ns tau.views.playlist) +(ns tau.views.playlist + (:require + [re-frame.core :as rf] + [reitit.frontend.easy :as rfe] + [tau.components.items :as items] + [tau.components.loading :as loading] + [tau.components.navigation :as navigation] + [tau.events :as events])) (defn playlist - [match] - [:div]) + [{{:keys [url]} :query-params}] + (let [{:keys [id name playlist-type thumbnail-url banner-url + uploader-name uploader-url uploader-avatar stream-count + next-page related-streams]} @(rf/subscribe [:playlist]) + next-page-url (:url next-page) + service-color @(rf/subscribe [:service-color]) + page-loading? @(rf/subscribe [:show-page-loading]) + pagination-loading? @(rf/subscribe [:show-pagination-loading]) + page-scroll @(rf/subscribe [:page-scroll]) + scrolled-to-bottom? (= page-scroll (.-scrollHeight js/document.body))] + (when scrolled-to-bottom? + (rf/dispatch [::events/playlist-pagination url next-page-url])) + [:div.flex.flex-col.items-center.px-5.pt-4.flex-auto + (if page-loading? + [loading/page-loading-icon service-color] + [:div.flex.flex-col.flex-auto + [navigation/back-button service-color] + (when banner-url + [:div + [:img {:src banner-url}]]) + [:div.flex.items-center.justify-center.my-4.mx-2 + [:div.flex.flex-col.justify-center.items-center + [:h1.text-2xl.font-bold name] + [:div.flex.items-center.pt-4 + [:span.mr-2 "By"] + [:div.flex.items-center.py-3.box-border.h-12 + [:div.w-12 + [:a {:href (rfe/href :tau.routes/channel nil {:url uploader-url}) :title uploader-name} + [:img.rounded-full.object-cover.min-h-full.min-w-full {:src uploader-avatar :alt uploader-name}]]]]] + [:p.pt-4 (str stream-count " streams")]]] + (if (empty? related-streams) + [:div.flex.flex-auto.justify-center.items-center + [:p.text-2xl "No streams available"]] + [:div.flex.justify-center.align-center.flex-wrap.my-2 + (for [[i result] (map-indexed vector related-streams)] + [items/stream-item (assoc result :key i)]) + (when-not (empty? next-page-url) + [loading/items-pagination-loading-icon service-color pagination-loading?])])])])) diff --git a/src/frontend/tau/views/search.cljs b/src/frontend/tau/views/search.cljs index 69f1353..b6bc75d 100644 --- a/src/frontend/tau/views/search.cljs +++ b/src/frontend/tau/views/search.cljs @@ -18,19 +18,20 @@ pagination-loading? @(rf/subscribe [:show-pagination-loading]) scrolled-to-bottom? (= page-scroll (.-scrollHeight js/document.body))] (when scrolled-to-bottom? - (rf/dispatch [::events/scroll-search-pagination q serviceId next-page-url])) + (rf/dispatch [::events/search-pagination q serviceId next-page-url])) [:div.flex.flex-col.text-gray-300.h-box-border.flex-auto [:div.flex.flex-col.items-center.w-full.pt-4.flex-initial [:h2 (str "Showing search results for: \"" q "\"")] [:h1 (str "Number of search results: " (count items))]] (if page-loading? [loading/page-loading-icon service-color] - [:div.flex.flex-col - [:div.flex.justify-center.align-center.flex-wrap.flex-auto - (for [[i item] (map-indexed vector items)] - (cond - (:duration item) [items/stream-item i item] - (:subscriber-count item) [items/channel-item i item] - (:stream-count item) [items/playlist-item i item])) - (when-not (empty? next-page-url) - [loading/pagination-loading-icon service-color pagination-loading?])]])])) + (when items + [:div.flex.flex-col + [:div.flex.justify-center.align-center.flex-wrap.flex-auto + (for [[i item] (map-indexed vector items)] + (case (:type item) + "stream" [items/stream-item (assoc item :key i)] + "channel" [items/channel-item (assoc item :key i)] + "playlist" [items/playlist-item (assoc item :key i)])) + (when-not (empty? next-page-url) + [loading/items-pagination-loading-icon service-color pagination-loading?])]]))])) diff --git a/src/frontend/tau/views/stream.cljs b/src/frontend/tau/views/stream.cljs index 47039e6..4894a01 100644 --- a/src/frontend/tau/views/stream.cljs +++ b/src/frontend/tau/views/stream.cljs @@ -5,15 +5,18 @@ [tau.events :as events] [tau.components.items :as items] [tau.components.loading :as loading] - [tau.components.navigation :as navigation])) + [tau.components.navigation :as navigation] + [tau.components.comments :as comments] + [tau.util :as util])) (defn stream [match] (let [{:keys [name url video-streams audio-streams view-count subscriber-count like-count dislike-count - description upload-avatar upload-author - upload-url upload-date related-streams - thumbnail-url] :as stream} @(rf/subscribe [:stream]) + 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]) stream-type (-> (if (empty? video-streams) audio-streams video-streams) last :content) @@ -23,59 +26,83 @@ (if page-loading? [loading/page-loading-icon service-color] [:div {:class "w-4/5"} - [navigation/back-button] + [navigation/back-button service-color] [:div.flex.justify-center.relative.my-2 {:style {:background (str "center / cover no-repeat url('" thumbnail-url"')") :height "450px"}} - [:video.min-h-full.absolute.bottom-0.object-cover {:src stream-type :controls true :width "100%"}]] - [:div.flex.text-white.flex.w-full.my-1 - [:button.border.rounded.border-black.p-2.bg-stone-800 + [:video.bottom-0.object-cover.max-h-full.min-w-full + {:src stream-type :controls true}]] + [: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])} [:i.fa-solid.fa-headphones]] - [:a {:href (:url stream)} - [:button.border.rounded.border-black.p-2.bg-stone-800.mx-2 + [:a {:href url} + [:button.border.rounded.border-black.px-3.py-1.bg-stone-800.mx-2 [:i.fa-solid.fa-external-link-alt]]]] - [:div.flex.flex-col.py-1 + [:div.flex.flex-col.py-1.comments [:div.min-w-full.py-3 - [:h1.text-xl.font-extrabold name]] + [:h1.text-2xl.font-extrabold name]] [:div.flex.justify-between.py-2 [:div.flex.items-center.flex-auto - (when upload-avatar - [:div - [:img.rounded-full {:src upload-avatar :alt upload-author}]]) + (when uploader-avatar + [:div.relative.w-16.h-16 + [:a {:href (rfe/href :tau.routes/channel nil {:url uploader-url}) :title uploader-author} + [:img.rounded-full.object-cover.max-w-full.min-h-full {:src uploader-avatar :alt uploader-author}]]]) [:div.mx-2 - [:a {:href (rfe/href :tau.routes/channel nil {:url upload-url})} upload-author] + [:a {:href (rfe/href :tau.routes/channel nil {:url uploader-url})} uploader-author] (when subscriber-count - [:div.flex.my-2 - [:i.fa-solid.fa-users] - [:p.mx-2 (.toLocaleString subscriber-count)]])]] - [:div + [:div.flex.my-2.items-center + [:i.fa-solid.fa-users.text-xs] + [:p.mx-2 (util/format-quantity subscriber-count)]])]] + [:div.flex.flex-col.items-end (when view-count - [:p - [:i.fa-solid.fa-eye] - [:span.mx-2 (.toLocaleString view-count)]]) - [:div + [:div + [:i.fa-solid.fa-eye.text-xs] + [:span.ml-2 (.toLocaleString view-count)]]) + [:div.flex (when like-count - [:p - [:i.fa-solid.fa-thumbs-up] - [:span.mx-2 like-count]]) + [:div.items-center + [:i.fa-solid.fa-thumbs-up.text-xs] + [:span.ml-2 (.toLocaleString like-count)]]) (when dislike-count - [:p - [:i.fa-solid.fa-thumbs-down] - [:span.mx-2 dislike-count]])] + [:div.ml-2.items-center + [:i.fa-solid.fa-thumbs-down.text-xs] + [:span.ml-2 dislike-count]])] (when upload-date - [:p (-> upload-date - js/Date.parse - js/Date. - .toDateString)])]] + [:div + [:i.fa-solid.fa-calendar.mx-2.text-xs] + [:span + (-> upload-date + js/Date.parse + js/Date. + .toDateString)]])]] [:div.min-w-full.py-3 [:h1 name] - [:p description]] + [:div {:dangerouslySetInnerHTML {:__html description}}]] [:div.py-3 - [:h1.text-lg.bold "Related Results"] - [:div.flex.justify-center.align-center.flex-wrap - (for [[i item] (map-indexed vector related-streams)] - (cond - (:duration item) [items/stream-item i item] - (:subscriber-count item) [items/channel-item i item] - (:stream-count item) [items/playlist-item i item]))]]]])])) + [:div.flex.items-center + [:i.fa-solid.fa-comments] + [:p.px-2 "Comments"] + (if show-comments + [:i.fa-solid.fa-chevron-up {:on-click #(rf/dispatch [::events/toggle-comments]) + :style {:cursor "pointer"}}] + [:i.fa-solid.fa-chevron-down {:on-click #(if show-comments + (rf/dispatch [::events/toggle-comments]) + (rf/dispatch [::events/get-comments url])) + :style {:cursor "pointer"}}])] + [:div + (if show-comments-loading + [loading/page-loading-icon service-color] + (when (and show-comments comments-page) + [comments/comments comments-page uploader-author uploader-avatar url]))]] + (when-not (empty? related-streams) + [:div.py-3 + [:div.flex.items-center + [:i.fa-solid.fa-list] + [:h1.px-2.text-lg.bold "Related Results"]] + [:div.flex.justify-center.align-center.flex-wrap + (for [[i item] (map-indexed vector related-streams)] + (case (:type item) + "stream" [items/stream-item (assoc item :key i)] + "channel" [items/channel-item (assoc item :key i)] + "playlist" [items/playlist-item (assoc item :key i)]))]])]])])) |