feat(frontend): use the highest resolution thumbnails and avatars

9 files changed, 92 insertions, 61 deletions

diff --git a/src/frontend/tubo/bg_player/events.cljs b/src/frontend/tubo/bg_player/events.cljs
index 7a0f22b..297f0f0 100644
--- a/src/frontend/tubo/bg_player/events.cljs
+++ b/src/frontend/tubo/bg_player/events.cljs
@@ -144,7 +144,10 @@
                       [[:media-session-metadata
                         {:title   (:name stream-res)
                          :artist  (:uploader-name stream-res)
-                         :artwork [{:src (:thumbnail-url stream-res)}]}]
+                         :artwork [{:src (-> stream-res
+                                             :thumbnails
+                                             last
+                                             :url)}]}]
                        [:media-session-handlers
                         {:current-pos idx
                          :player      bg-player}]]))})))
diff --git a/src/frontend/tubo/bg_player/views.cljs b/src/frontend/tubo/bg_player/views.cljs
index 5ac7df0..b7b4c4c 100644
--- a/src/frontend/tubo/bg_player/views.cljs
+++ b/src/frontend/tubo/bg_player/views.cljs
@@ -135,10 +135,13 @@
              :value    volume-level}])]))))
 
 (defn metadata
-  [{:keys [thumbnail-url url name uploader-url uploader-name]}]
+  [{:keys [thumbnails url name uploader-url uploader-name]}]
   [:div.flex.items-center.lg:flex-1
    [:div
-    [layout/thumbnail thumbnail-url (rfe/href :stream-page nil {:url url})
+    [layout/thumbnail
+     (-> thumbnails
+         last
+         :url) (rfe/href :stream-page nil {:url url})
      name nil :classes [:h-14 :py-2 "w-[70px]"]]]
    [:div.flex.flex-col.pl-2.pr-4
     [:a.text-xs.line-clamp-1
@@ -298,7 +301,9 @@
                           ","
                           bg-color
                           "),url("
-                          (:thumbnail-url stream)
+                          (-> stream
+                              last
+                              :thumbnails)
                           ")")]
     (when show-player?
       [:div.sticky.absolute.left-0.bottom-0.z-10.p-3.transition-all.ease-in.relative
diff --git a/src/frontend/tubo/bookmarks/modals.cljs b/src/frontend/tubo/bookmarks/modals.cljs
index 89d82be..d4bce78 100644
--- a/src/frontend/tubo/bookmarks/modals.cljs
+++ b/src/frontend/tubo/bookmarks/modals.cljs
@@ -14,7 +14,9 @@
     [layout/thumbnail
      (-> items
          first
-         :thumbnail-url) nil name nil
+         :thumbnails
+         last
+         :url) nil name nil
      :classes [:h-24 :py-2] :rounded? true]]
    [:div.flex.flex-col.py-4.px-4
     [:h1.line-clamp-1.font-bold {:title name} name]
diff --git a/src/frontend/tubo/bookmarks/views.cljs b/src/frontend/tubo/bookmarks/views.cljs
index 6f71e84..c1e55f8 100644
--- a/src/frontend/tubo/bookmarks/views.cljs
+++ b/src/frontend/tubo/bookmarks/views.cljs
@@ -15,15 +15,15 @@
       (let [bookmarks @(rf/subscribe [:bookmarks])
             items     (map
                        #(assoc %
-                               :stream-count  (count (:items %))
-                               :bookmark-id   (:id %)
-                               :url           (rfe/href :bookmark-page
-                                                        nil
-                                                        {:id (:id %)})
-                               :thumbnail-url (-> %
-                                                  :items
-                                                  first
-                                                  :thumbnail-url))
+                               :stream-count (count (:items %))
+                               :bookmark-id  (:id %)
+                               :url          (rfe/href :bookmark-page
+                                                       nil
+                                                       {:id (:id %)})
+                               :thumbnails   (-> %
+                                                 :items
+                                                 first
+                                                 :thumbnails))
                        bookmarks)]
         [layout/content-container
          [layout/content-header "Bookmarks"
diff --git a/src/frontend/tubo/channel/views.cljs b/src/frontend/tubo/channel/views.cljs
index 1b5da62..7ca26e4 100644
--- a/src/frontend/tubo/channel/views.cljs
+++ b/src/frontend/tubo/channel/views.cljs
@@ -23,12 +23,13 @@
                                      related-streams]])}]]))))
 
 (defn metadata
-  [{:keys [avatar name subscriber-count] :as channel}]
+  [{:keys [avatars name subscriber-count] :as channel}]
   [:div.flex.items-center.justify-between
-   [:div.flex.items-center.my-4.mx-2
+   [:div.flex.items-center.my-4.gap-x-4
     [layout/uploader-avatar
-     {:uploader-avatar avatar :uploader-name name}]
-    [:div.m-4
+     {:uploader-avatars avatars
+      :uploader-name    name}]
+    [:div
      [:h1.text-2xl.line-clamp-1.font-semibold {:title name} name]
      (when subscriber-count
        [:div.flex.items-center.text-neutral-600.dark:text-neutral-400.text-sm
@@ -42,7 +43,7 @@
   (let [!show-description? (r/atom false)
         !layout            (r/atom (:items-layout @(rf/subscribe [:settings])))]
     (fn [{{:keys [url]} :query-params}]
-      (let [{:keys [banner description next-page related-streams] :as channel}
+      (let [{:keys [banners description next-page related-streams] :as channel}
             @(rf/subscribe [:channel])
             next-page-url (:url next-page)
             scrolled-to-bottom? @(rf/subscribe [:scrolled-to-bottom])
@@ -51,9 +52,12 @@
           (rf/dispatch [:channel/fetch-paginated url next-page-url]))
         [:<>
          (when-not page-loading?
-           (when banner
+           (when banners
              [:div.flex.justify-center.h-24
-              [:img.min-w-full.min-h-full.object-cover {:src banner}]]))
+              [:img.min-w-full.min-h-full.object-cover
+               {:src (-> banners
+                         last
+                         :url)}]]))
          [layout/content-container
           [metadata channel]
           (when-not (empty? description)
diff --git a/src/frontend/tubo/items/views.cljs b/src/frontend/tubo/items/views.cljs
index 58f462e..ec4f7c8 100644
--- a/src/frontend/tubo/items/views.cljs
+++ b/src/frontend/tubo/items/views.cljs
@@ -60,11 +60,14 @@
 
 (defn grid-item-content
   [{:keys [url name uploader-url uploader-name subscriber-count view-count
-           stream-count verified? thumbnail-url duration]
+           stream-count verified? thumbnails duration]
     :as   item} route bookmarks]
   [:div.w-full
    [:div.flex.flex-col.max-w-full.min-h-full.max-h-full
-    [layout/thumbnail thumbnail-url route name duration
+    [layout/thumbnail
+     (-> thumbnails
+         last
+         :url) route name duration
      :classes [:py-2 :h-44 "xs:h-28"] :rounded? true]
     [:div
      (when name
@@ -104,11 +107,14 @@
 
 (defn list-item-content
   [{:keys [url name uploader-url uploader-name subscriber-count view-count
-           stream-count verified? thumbnail-url duration upload-date]
+           stream-count verified? thumbnails duration upload-date]
     :as   item} route bookmarks]
   [:div.w-full
    [:div.flex.gap-x-3.xs:gap-x-5
-    [layout/thumbnail thumbnail-url route name duration
+    [layout/thumbnail
+     (-> thumbnails
+         last
+         :url) route name duration
      :classes
      [:py-2 :h-28 "sm:h-36" "min-w-[130px]" "max-w-[130px]" "sm:min-w-[250px]"
       "sm:max-w-[250px]"] :rounded?
@@ -155,8 +161,9 @@
              [:div.flex.items-center.h-full
               [:p
                (str (utils/format-quantity subscriber-count) " subscribers")]]
-             [:span.px-2.hidden.xs:inline-block
-              {:dangerouslySetInnerHTML {:__html "&bull;"}}]])
+             (when stream-count
+               [:span.px-2.hidden.xs:inline-block
+                {:dangerouslySetInnerHTML {:__html "&bull;"}}])])
           (when stream-count
             [:span
              (str (utils/format-quantity stream-count) " streams")])])]]]]])
diff --git a/src/frontend/tubo/layout/views.cljs b/src/frontend/tubo/layout/views.cljs
index abc6027..4f8aeb0 100644
--- a/src/frontend/tubo/layout/views.cljs
+++ b/src/frontend/tubo/layout/views.cljs
@@ -8,13 +8,13 @@
    [tubo.utils :as utils]))
 
 (defn thumbnail
-  [thumbnail-url route name duration & {:keys [classes rounded?]}]
+  [thumbnail route name duration & {:keys [classes rounded?]}]
   [:div.flex.box-border {:class classes}
    [:div.relative.min-w-full
     [:a.absolute.min-w-full.min-h-full.z-10 {:href route :title name}]
-    (if thumbnail-url
+    (if thumbnail
       [:img.object-cover.min-h-full.max-h-full.min-w-full
-       {:src thumbnail-url :class (when rounded? :rounded)}]
+       {:src thumbnail :class (when rounded? :rounded)}]
       [:div.bg-neutral-300.flex.min-h-full.min-w-full.justify-center.items-center.rounded
        [:i.fa-solid.fa-image.text-3xl.text-white]])
     (when duration
@@ -63,9 +63,9 @@
    (map-indexed #(with-meta %2 {:key %1}) children)])
 
 (defn uploader-avatar
-  [{:keys [uploader-avatar uploader-name uploader-url]}
+  [{:keys [uploader-avatars uploader-name uploader-url]}
    & {:keys [classes] :or {classes ["w-12" "xs:w-16" "h-12" "xs:h-16"]}}]
-  (when uploader-avatar
+  (when (seq uploader-avatars)
     [:div.relative.flex-auto.flex.items-center.shrink-0.grow-0 {:class classes}
      (conj
       (when uploader-url
@@ -74,7 +74,11 @@
           :title uploader-name
           :key   uploader-url}])
       [:img.flex-auto.rounded-full.object-cover.max-w-full.min-h-full
-       {:src uploader-avatar :alt uploader-name :key uploader-name}])]))
+       {:src (-> uploader-avatars
+                 last
+                 :url)
+        :alt uploader-name
+        :key uploader-name}])]))
 
 (defn button
   [label on-click left-icon right-icon &
@@ -226,8 +230,8 @@
 (defn error
   [{:keys [_failure parse-error status status-text]} cb]
   [:div.flex.flex-auto.h-full.items-center.justify-center.p-8
-   [:div.flex.flex-col.gap-y-8.border-border-neutral-300.rounded.dark:border-neutral-700.bg-neutral-300.dark:bg-neutral-800.p-8
-    [:div.flex.items-center.gap-2.text-xl
+   [:div.flex.flex-col.gap-y-8.border-border-neutral-300.rounded.dark:border-neutral-700
+    [:div.flex.items-center.gap-x-4.text-xl
      [:i.fa-solid.fa-circle-exclamation]
      [:h3.font-bold
       (str status " " status-text)]]
@@ -239,24 +243,25 @@
 
 (defn tabs
   [tabs]
-  (let [!current (r/atom (nth tabs 0))]
+  (let [!current (r/atom (and (seq tabs) (nth tabs 0)))]
     (fn [tabs & {:keys [on-change]}]
       [:div
        (into
-        [:ul.w-full.flex.justify-center.items-center]
-        (for [[i tab] (map-indexed vector tabs)]
-          (let [selected? (= (:id tab) (:id @!current))]
-            (when tab
-              [:li.flex-auto.flex.justify-center.items-center.font-semibold.border-b-2
-               {:class (if selected?
-                         "border-neutral-700 dark:border-neutral-100"
-                         "!border-transparent")
-                :key   i}
-               [:button.flex-auto.py-4
-                {:on-click (when (not selected?)
-                             (fn []
-                               (reset! !current tab)
-                               (on-change (:id @!current))))}
-                (if (:label-fn tab)
-                  ((:label-fn tab) (:label tab))
-                  (:label tab))]]))))])))
+        [:ul.w-full.flex.gap-x-4.justify-center.items-center]
+        (when (seq tabs)
+          (for [[i tab] (map-indexed vector tabs)]
+            (let [selected? (= (:id tab) (:id @!current))]
+              (when tab
+                [:li.flex-auto.flex.justify-center.items-center.font-semibold.border-b-2
+                 {:class (if selected?
+                           "border-neutral-700 dark:border-neutral-100"
+                           "!border-transparent")
+                  :key   i}
+                 [:button.flex-auto.py-4
+                  {:on-click (when (not selected?)
+                               (fn []
+                                 (reset! !current tab)
+                                 (on-change (:id @!current))))}
+                  (if (:label-fn tab)
+                    ((:label-fn tab) (:label tab))
+                    (:label tab))]])))))])))
diff --git a/src/frontend/tubo/player/views.cljs b/src/frontend/tubo/player/views.cljs
index 2a5e02c..2a58bf6 100644
--- a/src/frontend/tubo/player/views.cljs
+++ b/src/frontend/tubo/player/views.cljs
@@ -21,7 +21,7 @@
     (r/create-class
      {:component-will-unmount #(rf/dispatch [:main-player/ready false])
       :reagent-render
-      (fn [{:keys [video-streams audio-streams thumbnail-url]}
+      (fn [{:keys [video-streams audio-streams thumbnails]}
            !player]
         (let [show-main-player? @(rf/subscribe [:main-player/show])
               service-color     @(rf/subscribe [:service-color])]
@@ -34,12 +34,14 @@
                      "height"                  "100%"
                      "width"                   "100%"}}
             [:video
-             {:style          {"max-height" "100%"
-                               "min-height" "100%"
-                               "min-width"  "100%"
-                               "max-width"  "100%"}
+             {:style          {"maxHeight" "100%"
+                               "minHeight" "100%"
+                               "minWidth"  "100%"
+                               "maxWidth"  "100%"}
               :ref            #(reset! !player %)
-              :poster         thumbnail-url
+              :poster         (-> thumbnails
+                                  last
+                                  :url)
               :loop           (when show-main-player?
                                 (= @(rf/subscribe [:player/loop]) :stream))
               :on-can-play    #(rf/dispatch [:main-player/ready true])
diff --git a/src/frontend/tubo/queue/views.cljs b/src/frontend/tubo/queue/views.cljs
index 10a011b..192e028 100644
--- a/src/frontend/tubo/queue/views.cljs
+++ b/src/frontend/tubo/queue/views.cljs
@@ -9,7 +9,7 @@
    [tubo.utils :as utils]))
 
 (defn item-metadata
-  [{:keys [uploader-name name service-id duration thumbnail-url]} queue-pos i]
+  [{:keys [uploader-name name service-id duration thumbnails]} queue-pos i]
   [:div.flex.cursor-pointer.py-2
    {:class    (when (= i queue-pos) ["bg-neutral-200" "dark:bg-neutral-800"])
     :on-click #(rf/dispatch [:queue/change-pos i])}
@@ -17,7 +17,10 @@
     [:span.font-bold.text-neutral-400.text-sm
      (if (= i queue-pos) [:i.fa-solid.fa-play] (inc i))]]
    [:div.flex.items-center.shrink-0.grow-0
-    [layout/thumbnail thumbnail-url nil name duration :classes
+    [layout/thumbnail
+     (-> thumbnails
+         last
+         :url) nil name duration :classes
      ["h-12" "xs:h-16" "w-16" "xs:w-24" "md:w-32"]]]
    [:div.flex.flex-col.pl-4.pr-12.w-full
     [:h1.line-clamp-1.w-fit.text-sm.xs:text-lg {:title name} name]