diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/frontend/tau/components/items.cljs | 139 |
1 files changed, 66 insertions, 73 deletions
diff --git a/src/frontend/tau/components/items.cljs b/src/frontend/tau/components/items.cljs index 38e96e9..c5ed293 100644 --- a/src/frontend/tau/components/items.cljs +++ b/src/frontend/tau/components/items.cljs @@ -3,98 +3,91 @@ [re-frame.core :as rf] [reitit.frontend.easy :as rfe] [tau.components.loading :as loading] - [tau.util :as util] - ["timeago.js" :as timeago])) + [tau.util :as util])) -(defn stream-item - [{:keys [url name thumbnail-url upload-author upload-url - upload-avatar upload-date short-description - duration view-count uploaded verified? key]}] - [:div.w-56.h-66.my-2 {:key key} - [:div.px-5.py-2.m-2.flex.flex-col.max-w-full.min-h-full.max-h-full - [:div.flex.py-2.box-border.h-28 - [:div.relative.min-w-full - [:a.absolute.min-w-full.min-h-full.z-10 {:href (rfe/href :tau.routes/stream nil {:url url}) :title name}] - [:img.rounded.object-cover.max-h-full.min-w-full {:src thumbnail-url}] +(defn thumbnail + [thumbnail-url route url name duration] + [:div.flex.py-2.box-border.h-44.xs:h-28 + [:div.relative.min-w-full + [:a.absolute.min-w-full.min-h-full.z-10 {:href route :title name}] + [:img.rounded.object-cover.max-h-full.min-w-full {:src thumbnail-url}] + (when duration [:div.rounded.p-2.absolute {:style {:bottom 5 :right 5 :background "rgba(0,0,0,.7)" :zIndex "0"}} [:p {:style {:fontSize "14px"}} (if (= duration 0) "LIVE" - (util/format-duration duration))]]]] - [:div.my-2 - [:a {:href (rfe/href :tau.routes/stream nil {:url url}) :title name} - [:h1.line-clamp-2.my-1 name]]] - (when-not (empty? upload-author) - [:div.flex.items-center.my-2 - [:a {:href (rfe/href :tau.routes/channel nil {:url upload-url}) :title upload-author} - [:h1.line-clamp-1.text-gray-300.font-bold.pr-2 upload-author]] - (when verified? - [:i.fa-solid.fa-circle-check])]) - [:div.flex.my-1.justify-between - [:p (if (-> upload-date js/Date.parse js/isNaN) - upload-date - (timeago/format upload-date))] - (when view-count - [:div.flex.items-center.h-full.pl-2 - [:i.fa-solid.fa-eye.text-xs] - [:p.pl-1.5 (util/format-quantity view-count)]])]]]) + (util/format-duration duration))]])]]) -(defn channel-item +(defn item-content [{:keys [url name thumbnail-url description subscriber-count - stream-count verified? key]}] - [:div.w-56.h-64.my-2 {:key key} - [:div.px-5.py-2.m-2.flex.flex-col.max-w-full.min-h-full.max-h-full - [:div.flex.min-w-full.py-3.box-border.h-28 - [:div.relative.min-w-full - [:a.absolute.min-w-full.min-h-full {:href (rfe/href :tau.routes/channel nil {:url url}) :title name}] - [:img.rounded.object-cover.max-h-full.min-w-full {:src thumbnail-url}]]] - [:div.overflow-hidden - [:div.flex.items-center.py-2.box-border - [:a {:href (rfe/href :tau.routes/channel nil {:url url}) :title name} - [:h1.line-clamp-1.text-gray-300.font-bold.pr-2 name]] + stream-count verified? key uploader-name uploader-url + uploader-avatar upload-date short-description view-count]} item-route] + [:<> + (when name + [:div.my-2 + [:a {:href item-route :title name} + [:h1.line-clamp-2.my-1 name]]]) + (when-not (empty? uploader-name) + [:div.flex.items-center.my-2 + (if uploader-url + [:a {:href (rfe/href :tau.routes/channel nil {:url uploader-url}) :title uploader-name} + [:h1.line-clamp-1.text-gray-300.font-bold.pr-2 uploader-name]] + [:h1.line-clamp-1.text-gray-300.font-bold.pr-2 uploader-name]) (when verified? - [:i.fa-solid.fa-circle-check])] - (when subscriber-count - [:div.flex.items-center - [:i.fa-solid.fa-users.text-xs] - [:p.mx-2 subscriber-count]]) - (when stream-count - [:div.flex.items-center - [:i.fa-solid.fa-video.text-xs] - [:p.mx-2 stream-count]])]]]) + [:i.fa-solid.fa-circle-check])]) + (when subscriber-count + [:div.flex.items-center + [:i.fa-solid.fa-users.text-xs] + [:p.mx-2 subscriber-count]]) + (when stream-count + [:div.flex.items-center + [:i.fa-solid.fa-video.text-xs] + [:p.mx-2 stream-count]]) + [:div.flex.my-1.justify-between + [:p (util/format-date upload-date)] + (when view-count + [:div.flex.items-center.h-full.pl-2 + [:i.fa-solid.fa-eye.text-xs] + [:p.pl-1.5 (util/format-quantity view-count)]])]]) + +(defn stream-item + [{:keys [url name thumbnail-url duration] :as item}] + [:<> + [thumbnail thumbnail-url (rfe/href :tau.routes/stream nil {:url url}) url name duration] + [item-content item (rfe/href :tau.routes/stream nil {:url url})]]) + +(defn channel-item + [{:keys [url name thumbnail-url] :as item}] + [:<> + [thumbnail thumbnail-url (rfe/href :tau.routes/channel nil {:url url}) url name nil] + [item-content item (rfe/href :tau.routes/channel nil {:url url})]]) (defn playlist-item - [{:keys [url name thumbnail-url upload-author stream-count key]}] - [:div.w-56.h-64.my-2 {:key key} + [{:keys [url name thumbnail-url] :as item}] + [:<> + [thumbnail thumbnail-url (rfe/href :tau.routes/playlist nil {:url url}) url name nil] + [item-content item (rfe/href :tau.routes/playlist nil {:url url})]]) + +(defn generic-item + [item] + [:div.w-full.xs:w-56.h-80.xs:h-72.my-2 {:key key} [:div.px-5.py-2.m-2.flex.flex-col.max-w-full.min-h-full.max-h-full - [:div.flex.min-w-full.py-3.box-border.h-28 - [:div.relative.min-w-full - [:a.absolute.min-w-full.min-h-full.z-10 {:href (rfe/href :tau.routes/playlist nil {:url url}) :title name}] - [:img.rounded.object-cover.max-h-full.min-w-full {:src thumbnail-url}]]] - [:div.overflow-hidden - [:div - [:a {:href (rfe/href :tau.routes/playlist nil {:url url}) :title name} - [:h1.line-clamp-2 name]]] - [:div.my-2 - [:h1.text-gray-300.font-bold upload-author]] - [:div.flex.items-center - [:i.fa-solid.fa-video.text-xs] - [:p.mx-2 stream-count]]]]]) + (case (:type item) + "stream" [stream-item item] + "channel" [channel-item item] + "playlist" [playlist-item item])]]) (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 + [:div.flex.flex-col.justify-center.items-center.flex-auto.my-2.md:my-8 (if (empty? related-streams) - [:div + [:div.flex.items-center [: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]))]) + [generic-item keyed-item])]) (when-not (empty? next-page-url) - [loading/items-pagination-loading-icon service-color pagination-loading?])])) + [loading/loading-icon service-color "text-2xl" (when-not pagination-loading? "invisible")])])) |