diff options
Diffstat (limited to 'src/frontend')
| -rw-r--r-- | src/frontend/tau/components/items.cljs | 20 | ||||
| -rw-r--r-- | src/frontend/tau/components/navigation.cljs | 4 | ||||
| -rw-r--r-- | src/frontend/tau/views/channel.cljs | 9 | ||||
| -rw-r--r-- | src/frontend/tau/views/kiosk.cljs | 13 | ||||
| -rw-r--r-- | src/frontend/tau/views/playlist.cljs | 12 | ||||
| -rw-r--r-- | src/frontend/tau/views/search.cljs | 15 | ||||
| -rw-r--r-- | src/frontend/tau/views/stream.cljs | 154 |
7 files changed, 106 insertions, 121 deletions
diff --git a/src/frontend/tau/components/items.cljs b/src/frontend/tau/components/items.cljs index 0a8bad6..fdff1ab 100644 --- a/src/frontend/tau/components/items.cljs +++ b/src/frontend/tau/components/items.cljs @@ -1,6 +1,8 @@ (ns tau.components.items (:require + [re-frame.core :as rf] [reitit.frontend.easy :as rfe] + [tau.components.loading :as loading] [tau.util :as util] ["timeago.js" :as timeago])) @@ -78,3 +80,21 @@ [:div.flex.items-center [:i.fa-solid.fa-video.text-xs] [:p.mx-2 stream-count]]]]]) + +(defn related-streams + [related-streams next-page-url] + (let [service-color @(rf/subscribe [:service-color]) + pagination-loading? @(rf/subscribe [:show-pagination-loading])] + [:div.flex.flex-col.justify-center.items-center.flex-auto + (if (empty? related-streams) + [:div + [:p "No available streams"]] + [:div.flex.justify-center.flex-wrap + (for [[i item] (map-indexed vector related-streams) + :let [keyed-item (assoc item :key i)]] + (case (:type item) + "stream" [stream-item keyed-item] + "channel" [channel-item keyed-item] + "playlist" [playlist-item keyed-item]))]) + (when-not (empty? next-page-url) + [loading/items-pagination-loading-icon service-color pagination-loading?])])) diff --git a/src/frontend/tau/components/navigation.cljs b/src/frontend/tau/components/navigation.cljs index c8f0b5a..ba38ea4 100644 --- a/src/frontend/tau/components/navigation.cljs +++ b/src/frontend/tau/components/navigation.cljs @@ -4,8 +4,8 @@ [tau.events :as events])) (defn back-button [service-color] - [:div.flex {:class "w-4/5"} - [:button.p-2 + [:div.flex.items-center {:class "w-4/5"} + [:button.py-4 {:on-click #(rf/dispatch [::events/history-back])} [:i.fa-solid.fa-chevron-left {:style {:color service-color}}] diff --git a/src/frontend/tau/views/channel.cljs b/src/frontend/tau/views/channel.cljs index db8c221..78fc6d9 100644 --- a/src/frontend/tau/views/channel.cljs +++ b/src/frontend/tau/views/channel.cljs @@ -21,7 +21,7 @@ [: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"} + [:div.flex.flex-col {:class "w-4/5"} [navigation/back-button service-color] (when banner [:div @@ -38,9 +38,4 @@ [:span.mx-2 (.toLocaleString subscriber-count)]])]] [:div.my-2 [:p description]] - [: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/items-pagination-loading-icon service-color pagination-loading?])])])) + [items/related-streams related-streams next-page-url]])])) diff --git a/src/frontend/tau/views/kiosk.cljs b/src/frontend/tau/views/kiosk.cljs index 6aea258..672430a 100644 --- a/src/frontend/tau/views/kiosk.cljs +++ b/src/frontend/tau/views/kiosk.cljs @@ -12,7 +12,6 @@ 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? @@ -20,16 +19,8 @@ [:div.flex.flex-col.items-center.px-5.py-2.flex-auto (if page-loading? [loading/page-loading-icon service-color] - [:div + [:div.flex.flex-col.flex-auto.w-full {:class "lg:w-4/5"} [: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?])])])) + [items/related-streams related-streams next-page-url]])])) diff --git a/src/frontend/tau/views/playlist.cljs b/src/frontend/tau/views/playlist.cljs index 48f18e4..e50158a 100644 --- a/src/frontend/tau/views/playlist.cljs +++ b/src/frontend/tau/views/playlist.cljs @@ -15,7 +15,6 @@ 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? @@ -23,7 +22,7 @@ [: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 + [:div.flex.flex-col.flex-auto.w-full {:class "lg:w-4/5"} [navigation/back-button service-color] (when banner-url [:div @@ -38,11 +37,4 @@ [: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?])])])])) + [items/related-streams related-streams next-page-url]])])) diff --git a/src/frontend/tau/views/search.cljs b/src/frontend/tau/views/search.cljs index b6bc75d..8cb4192 100644 --- a/src/frontend/tau/views/search.cljs +++ b/src/frontend/tau/views/search.cljs @@ -15,23 +15,14 @@ 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]) scrolled-to-bottom? (= page-scroll (.-scrollHeight js/document.body))] (when scrolled-to-bottom? (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.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] - (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?])]]))])) + [:div.flex.flex-col.flex-auto.w-full {:class "lg:w-4/5"} + [items/related-streams items next-page-url]])])) diff --git a/src/frontend/tau/views/stream.cljs b/src/frontend/tau/views/stream.cljs index 4894a01..033b2da 100644 --- a/src/frontend/tau/views/stream.cljs +++ b/src/frontend/tau/views/stream.cljs @@ -22,87 +22,83 @@ :content) page-loading? @(rf/subscribe [:show-page-loading]) service-color @(rf/subscribe [:service-color])] - [:div.flex.flex-col.p-5.items-center.justify-center.text-white.flex-auto + [:div.flex.flex-col.items-center.justify-center.text-white.flex-auto (if page-loading? [loading/page-loading-icon service-color] - [:div {:class "w-4/5"} + [:div.w-full {:class "md:w-4/5 xl:w-3/5"} [navigation/back-button service-color] - [:div.flex.justify-center.relative.my-2 - {:style {:background (str "center / cover no-repeat url('" thumbnail-url"')") - :height "450px"}} + [:div.flex.justify-center.relative + {:style {:background (str "center / cover no-repeat url('" thumbnail-url"')")} + :class "md:h-[450px] lg:h-[600px]"} [: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} - [: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.comments - [:div.min-w-full.py-3 - [:h1.text-2xl.font-extrabold name]] - [:div.flex.justify-between.py-2 - [:div.flex.items-center.flex-auto - (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 uploader-url})} uploader-author] - (when subscriber-count - [: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 - [:div - [:i.fa-solid.fa-eye.text-xs] - [:span.ml-2 (.toLocaleString view-count)]]) - [:div.flex - (when like-count - [:div.items-center - [:i.fa-solid.fa-thumbs-up.text-xs] - [:span.ml-2 (.toLocaleString like-count)]]) - (when dislike-count - [:div.ml-2.items-center - [:i.fa-solid.fa-thumbs-down.text-xs] - [:span.ml-2 dislike-count]])] - (when upload-date - [: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] - [:div {:dangerouslySetInnerHTML {:__html description}}]] - [:div.py-3 - [: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)]))]])]])])) + [:div.px-4.md:p-0 + [: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} + [: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.comments + [:div.min-w-full.py-3 + [:h1.text-2xl.font-extrabold name]] + [:div.flex.justify-between.py-2 + [:div.flex.items-center.flex-auto + (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 uploader-url})} uploader-author] + (when subscriber-count + [: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 + [:div + [:i.fa-solid.fa-eye.text-xs] + [:span.ml-2 (.toLocaleString view-count)]]) + [:div.flex + (when like-count + [:div.items-center + [:i.fa-solid.fa-thumbs-up.text-xs] + [:span.ml-2 (.toLocaleString like-count)]]) + (when dislike-count + [:div.ml-2.items-center + [:i.fa-solid.fa-thumbs-down.text-xs] + [:span.ml-2 dislike-count]])] + (when upload-date + [: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] + [:div {:dangerouslySetInnerHTML {:__html description}}]] + [:div.py-3 + [: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 (or show-comments comments-page) + (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"]] + [items/related-streams related-streams nil]])]]])])) |