feat(frontend): Modularize related streams and add responsive styles

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?])]))

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}}]

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]])]))

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]])]))

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]])]))

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]])]))

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]])]]])]))