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