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

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