feat(frontend): Add further features and address quirks

6 files changed, 176 insertions, 81 deletions

diff --git a/src/frontend/tau/views/channel.cljs b/src/frontend/tau/views/channel.cljs
index abdbb54..db8c221 100644
--- a/src/frontend/tau/views/channel.cljs
+++ b/src/frontend/tau/views/channel.cljs
@@ -12,30 +12,35 @@
                 related-streams next-page]} @(rf/subscribe [:channel])
         next-page-url (:url next-page)
         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])
+        page-scroll @(rf/subscribe [:page-scroll])
         scrolled-to-bottom? (= page-scroll (.-scrollHeight js/document.body))]
     (when scrolled-to-bottom?
-      (rf/dispatch [::events/scroll-channel-pagination url next-page-url]))
-    [:div.flex.flex-col.items-center.px-5.py-2.text-white.flex-auto
+      (rf/dispatch [::events/channel-pagination url next-page-url]))
+    [: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"}
-        [navigation/back-button]
-        [:div [:img {:src banner}]]
+        [navigation/back-button service-color]
+        (when banner
+          [:div
+           [:img {:src banner}]])
         [:div.flex.items-center.my-4.mx-2
-         [:div
-          [:img.rounded-full {:src avatar}]]
+         (when avatar
+           [:div.relative.w-16.h-16
+            [:img.rounded-full.object-cover.max-w-full.min-h-full {:src avatar :alt name}]])
          [:div.m-4
           [:h1.text-xl name]
-          [:div.flex.my-2.items-center
-           [:i.fa-solid.fa-users]
-           [:span.mx-2 subscriber-count]]]]
+          (when subscriber-count
+            [:div.flex.my-2.items-center
+             [:i.fa-solid.fa-users.text-xs]
+             [:span.mx-2 (.toLocaleString subscriber-count)]])]]
         [:div.my-2
          [:p description]]
-        [:div.flex.justify-center.align-center.flex-wrap.my-2
-         (for [[i result] (map-indexed vector related-streams)]
-           [items/stream-item i result])]
+        [: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/pagination-loading-icon service-color pagination-loading?])])]))
+           [loading/items-pagination-loading-icon service-color pagination-loading?])])]))
diff --git a/src/frontend/tau/views/home.cljs b/src/frontend/tau/views/home.cljs
deleted file mode 100644
index 00d2e1e..0000000
--- a/src/frontend/tau/views/home.cljs
+++ /dev/null
@@ -1,7 +0,0 @@
-(ns tau.views.home)
-
-(defn home-page
-  [match]
-  [:div.flex.justify-center.content-center.flex-col.text-center.text-white.text-lg.flex-auto
-   [:p.text-5xl.p-5 "Welcome to Tau"]
-   [:p.text-2xl "A web front-end for Newpipe"]])
diff --git a/src/frontend/tau/views/kiosk.cljs b/src/frontend/tau/views/kiosk.cljs
index 70caacf..6aea258 100644
--- a/src/frontend/tau/views/kiosk.cljs
+++ b/src/frontend/tau/views/kiosk.cljs
@@ -1,9 +1,35 @@
 (ns tau.views.kiosk
   (:require
-   [re-frame.core :as rf]))
+   [re-frame.core :as rf]
+   [tau.components.items :as items]
+   [tau.components.loading :as loading]
+   [tau.components.navigation :as navigation]
+   [tau.events :as events]))
 
 (defn kiosk
-  [match]
-  (let [{:keys [id url related-streams]} @(rf/subscribe [:kiosk])]
-    [:div
-     [:h1 id]]))
+  [{{:keys [serviceId kioskId]} :query-params}]
+  (let [{:keys [id url related-streams next-page]} @(rf/subscribe [:kiosk])
+        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?
+      (rf/dispatch [::events/kiosk-pagination serviceId id next-page-url]))
+    [:div.flex.flex-col.items-center.px-5.py-2.flex-auto
+     (if page-loading?
+       [loading/page-loading-icon service-color]
+       [:div
+        [: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?])])]))
diff --git a/src/frontend/tau/views/playlist.cljs b/src/frontend/tau/views/playlist.cljs
index b82cc24..48f18e4 100644
--- a/src/frontend/tau/views/playlist.cljs
+++ b/src/frontend/tau/views/playlist.cljs
@@ -1,5 +1,48 @@
-(ns tau.views.playlist)
+(ns tau.views.playlist
+  (:require
+   [re-frame.core :as rf]
+   [reitit.frontend.easy :as rfe]
+   [tau.components.items :as items]
+   [tau.components.loading :as loading]
+   [tau.components.navigation :as navigation]
+   [tau.events :as events]))
 
 (defn playlist
-  [match]
-  [:div])
+  [{{:keys [url]} :query-params}]
+  (let [{:keys [id name playlist-type thumbnail-url banner-url
+                uploader-name uploader-url uploader-avatar stream-count
+                next-page related-streams]} @(rf/subscribe [:playlist])
+        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?
+      (rf/dispatch [::events/playlist-pagination url next-page-url]))
+    [: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
+        [navigation/back-button service-color]
+        (when banner-url
+          [:div
+           [:img {:src banner-url}]])
+        [:div.flex.items-center.justify-center.my-4.mx-2
+         [:div.flex.flex-col.justify-center.items-center
+          [:h1.text-2xl.font-bold name]
+          [:div.flex.items-center.pt-4
+           [:span.mr-2 "By"]
+           [:div.flex.items-center.py-3.box-border.h-12
+            [:div.w-12
+             [: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?])])])]))
diff --git a/src/frontend/tau/views/search.cljs b/src/frontend/tau/views/search.cljs
index 69f1353..b6bc75d 100644
--- a/src/frontend/tau/views/search.cljs
+++ b/src/frontend/tau/views/search.cljs
@@ -18,19 +18,20 @@
         pagination-loading? @(rf/subscribe [:show-pagination-loading])
         scrolled-to-bottom? (= page-scroll (.-scrollHeight js/document.body))]
     (when scrolled-to-bottom?
-      (rf/dispatch [::events/scroll-search-pagination q serviceId next-page-url]))
+      (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.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]
-       [:div.flex.flex-col
-        [:div.flex.justify-center.align-center.flex-wrap.flex-auto
-         (for [[i item] (map-indexed vector items)]
-           (cond
-             (:duration item) [items/stream-item i item]
-             (:subscriber-count item) [items/channel-item i item]
-             (:stream-count item) [items/playlist-item i item]))
-         (when-not (empty? next-page-url)
-           [loading/pagination-loading-icon service-color pagination-loading?])]])]))
+       (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?])]]))]))
diff --git a/src/frontend/tau/views/stream.cljs b/src/frontend/tau/views/stream.cljs
index 47039e6..4894a01 100644
--- a/src/frontend/tau/views/stream.cljs
+++ b/src/frontend/tau/views/stream.cljs
@@ -5,15 +5,18 @@
    [tau.events :as events]
    [tau.components.items :as items]
    [tau.components.loading :as loading]
-   [tau.components.navigation :as navigation]))
+   [tau.components.navigation :as navigation]
+   [tau.components.comments :as comments]
+   [tau.util :as util]))
 
 (defn stream
   [match]
   (let [{:keys [name url video-streams audio-streams view-count
                 subscriber-count like-count dislike-count
-                description upload-avatar upload-author
-                upload-url upload-date related-streams
-                thumbnail-url] :as stream} @(rf/subscribe [:stream])
+                description uploader-avatar uploader-author
+                uploader-url upload-date related-streams
+                thumbnail-url show-comments-loading comments-page
+                show-comments] :as stream} @(rf/subscribe [:stream])
         stream-type (-> (if (empty? video-streams) audio-streams video-streams)
                         last
                         :content)
@@ -23,59 +26,83 @@
      (if page-loading?
        [loading/page-loading-icon service-color]
        [:div {:class "w-4/5"}
-        [navigation/back-button]
+        [navigation/back-button service-color]
         [:div.flex.justify-center.relative.my-2
          {:style {:background (str "center / cover no-repeat url('" thumbnail-url"')")
                   :height "450px"}}
-         [:video.min-h-full.absolute.bottom-0.object-cover {:src stream-type :controls true :width "100%"}]]
-        [:div.flex.text-white.flex.w-full.my-1
-         [:button.border.rounded.border-black.p-2.bg-stone-800
+         [: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 stream)}
-          [:button.border.rounded.border-black.p-2.bg-stone-800.mx-2
+         [: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
+        [:div.flex.flex-col.py-1.comments
          [:div.min-w-full.py-3
-          [:h1.text-xl.font-extrabold name]]
+          [:h1.text-2xl.font-extrabold name]]
          [:div.flex.justify-between.py-2
           [:div.flex.items-center.flex-auto
-           (when upload-avatar
-             [:div
-              [:img.rounded-full {:src upload-avatar :alt upload-author}]])
+           (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 upload-url})} upload-author]
+            [:a {:href (rfe/href :tau.routes/channel nil {:url uploader-url})} uploader-author]
             (when subscriber-count
-              [:div.flex.my-2
-               [:i.fa-solid.fa-users]
-               [:p.mx-2 (.toLocaleString subscriber-count)]])]]
-          [:div
+              [: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
-             [:p
-              [:i.fa-solid.fa-eye]
-              [:span.mx-2 (.toLocaleString view-count)]])
-           [:div
+             [:div
+              [:i.fa-solid.fa-eye.text-xs]
+              [:span.ml-2 (.toLocaleString view-count)]])
+           [:div.flex
             (when like-count
-              [:p
-               [:i.fa-solid.fa-thumbs-up]
-               [:span.mx-2 like-count]])
+              [:div.items-center
+               [:i.fa-solid.fa-thumbs-up.text-xs]
+               [:span.ml-2 (.toLocaleString like-count)]])
             (when dislike-count
-              [:p
-               [:i.fa-solid.fa-thumbs-down]
-               [:span.mx-2 dislike-count]])]
+              [:div.ml-2.items-center
+               [:i.fa-solid.fa-thumbs-down.text-xs]
+               [:span.ml-2 dislike-count]])]
            (when upload-date
-             [:p (-> upload-date
-                     js/Date.parse
-                     js/Date.
-                     .toDateString)])]]
+             [: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]
-          [:p description]]
+          [:div {:dangerouslySetInnerHTML {:__html description}}]]
          [:div.py-3
-          [:h1.text-lg.bold "Related Results"]
-          [:div.flex.justify-center.align-center.flex-wrap
-           (for [[i item] (map-indexed vector related-streams)]
-             (cond
-               (:duration item) [items/stream-item i item]
-               (:subscriber-count item) [items/channel-item i item]
-               (:stream-count item) [items/playlist-item i item]))]]]])]))
+          [: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)]))]])]])]))