diff options
| -rw-r--r-- | src/frontend/tubo/comments/views.cljs | 40 | ||||
| -rw-r--r-- | src/frontend/tubo/layout/views.cljs | 21 | ||||
| -rw-r--r-- | src/frontend/tubo/main_player/views.cljs | 2 | ||||
| -rw-r--r-- | src/frontend/tubo/stream/views.cljs | 137 |
4 files changed, 124 insertions, 76 deletions
diff --git a/src/frontend/tubo/comments/views.cljs b/src/frontend/tubo/comments/views.cljs index 2b1bf7f..b148f46 100644 --- a/src/frontend/tubo/comments/views.cljs +++ b/src/frontend/tubo/comments/views.cljs @@ -70,24 +70,28 @@ {:keys [uploader-name uploader-avatar url]}] (let [pagination-loading? @(rf/subscribe [:show-pagination-loading]) service-color @(rf/subscribe [:service-color])] - [:div.flex.flex-col - [:div - (for [[i {:keys [replies show-replies] :as comment}] - (map-indexed vector comments)] - [:div.flex.flex-col {:key i} - [:div.flex - [comment-item - (assoc comment - :author-name uploader-name - :author-avatar uploader-avatar)]] - (when (and replies show-replies) - [:div {:style {:marginLeft "32px"}} - (for [[i reply] (map-indexed vector (:items replies))] - ^{:key i} - [comment-item - (assoc reply - :author-name uploader-name - :author-avatar uploader-avatar)])])])] + [:div.flex.flex-col.py-4 + (if (empty? comments) + [:div.flex.items-center.flex-auto.flex-col.justify-center.gap-y-4.h-44 + [:i.fa-solid.fa-ghost.text-3xl] + [:p.text-lg "No available comments"]] + [:div + (for [[i {:keys [replies show-replies] :as comment}] + (map-indexed vector comments)] + [:div.flex.flex-col {:key i} + [:div.flex + [comment-item + (assoc comment + :author-name uploader-name + :author-avatar uploader-avatar)]] + (when (and replies show-replies) + [:div {:style {:marginLeft "32px"}} + (for [[i reply] (map-indexed vector (:items replies))] + ^{:key i} + [comment-item + (assoc reply + :author-name uploader-name + :author-avatar uploader-avatar)])])])]) (when (:url next-page) (if pagination-loading? [layout/loading-icon service-color] diff --git a/src/frontend/tubo/layout/views.cljs b/src/frontend/tubo/layout/views.cljs index d50c066..f088eef 100644 --- a/src/frontend/tubo/layout/views.cljs +++ b/src/frontend/tubo/layout/views.cljs @@ -236,3 +236,24 @@ [:div.flex.justify-center.gap-x-6 [primary-button "Go Back" #(rf/dispatch [:navigation/history-go -1])] [secondary-button "Retry" #(rf/dispatch cb)]]]]) + +(defn tabs + [tabs] + (let [!current (r/atom (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.border-transparent + {:class (if selected? :border-white :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/main_player/views.cljs b/src/frontend/tubo/main_player/views.cljs index be4c223..a06164a 100644 --- a/src/frontend/tubo/main_player/views.cljs +++ b/src/frontend/tubo/main_player/views.cljs @@ -30,4 +30,4 @@ [stream/metadata stream] [stream/description stream] [stream/comments stream] - [stream/suggested stream]]])])) + [stream/related-items stream]]])])) diff --git a/src/frontend/tubo/stream/views.cljs b/src/frontend/tubo/stream/views.cljs index c78cfc9..51896f0 100644 --- a/src/frontend/tubo/stream/views.cljs +++ b/src/frontend/tubo/stream/views.cljs @@ -79,80 +79,103 @@ (defn metadata [{:keys [name] :as stream}] [:<> - [:div.flex.items-center.justify-between.my-3 + [:div.flex.items-center.justify-between.mt-3 [:h1.text-lg.sm:text-2xl.font-bold.line-clamp-1 {:title name} name] [:div.hidden.lg:block [metadata-popover stream]]] - [:div.flex.justify-between.py-2.flex-nowrap + [:div.flex.justify-between.py-6.flex-nowrap [metadata-uploader stream] [metadata-stats stream]]]) (defn description - [{:keys [description show-description]}] + [{:keys [description show-description tags]}] (let [show? (:show-description @(rf/subscribe [:settings]))] (when (and show? (seq description)) - [layout/show-more-container show-description description - #(rf/dispatch [(if @(rf/subscribe [:main-player/show]) - :main-player/toggle-layout - :stream/toggle-layout) - :show-description])]))) + [:div + [layout/show-more-container show-description description + #(rf/dispatch [(if @(rf/subscribe [:main-player/show]) + :main-player/toggle-layout + :stream/toggle-layout) + :show-description])] + [:div.flex.gap-2.py-2 + (for [[i tag] (map-indexed vector tags)] + ^{:key i} + [:span.bg-neutral-300.dark:bg-neutral-800.rounded-md.p-2.text-sm + (str "#" tag)])]]))) (defn comments - [{:keys [comments-page show-comments show-comments-loading url] :as stream}] + [{:keys [comments-page show-comments show-comments-loading] :as stream}] (let [show? (:show-comments @(rf/subscribe [:settings])) service-color @(rf/subscribe [:service-color])] - (when (and comments-page (seq (:comments comments-page)) show?) - [layout/accordeon - {:label "Comments" - :on-open #(if show-comments - (rf/dispatch [:stream/toggle-layout :show-comments]) - (if comments-page - (rf/dispatch [:stream/toggle-layout :show-comments]) - (rf/dispatch [:comments/fetch-page url]))) - :open? show-comments - :left-icon "fa-solid fa-comments"} - (if show-comments-loading - [layout/loading-icon service-color "text-2xl"] - (when (and show-comments comments-page) - [comments/comments comments-page stream]))]))) + (when show? + (if show-comments-loading + [layout/loading-icon service-color "text-2xl"] + (when (and show-comments comments-page) + [comments/comments comments-page stream]))))) -(defn suggested +(defn related-items [_] - (let [!menu-active? (r/atom nil)] - (fn [{:keys [related-streams show-related]}] + (let [!menu-active? (r/atom nil) + !layout (r/atom :list)] + (fn [{:keys [related-streams]}] (let [show? (:show-related @(rf/subscribe [:settings]))] (when (and show? (seq related-streams)) - [layout/accordeon - {:label "Suggested" - :on-open #(rf/dispatch [(if @(rf/subscribe [:main-player/show]) - :main-player/toggle-layout - :stream/toggle-layout) - :show-related]) - :open? (not show-related) - :left-icon "fa-solid fa-list" - :right-button [layout/popover-menu !menu-active? - [{:label "Add to queue" - :icon [:i.fa-solid.fa-headphones] - :on-click #(rf/dispatch [:queue/add-n - related-streams true])} - {:label "Add to playlist" - :icon [:i.fa-solid.fa-plus] - :on-click #(rf/dispatch [:modals/open - [modals/add-to-bookmark - related-streams]])}]]} - [items/related-streams related-streams nil]]))))) + [:div + [:div.flex.flex-wrap.items-center.justify-between.mt-8.min-w-full + [:div.flex.gap-2.items-center + [:span.font-semibold.text-xl "Next Up"]] + [:div.flex.gap-4 + [layout/popover-menu !menu-active? + [{:label "Add to queue" + :icon [:i.fa-solid.fa-headphones] + :on-click #(rf/dispatch [:queue/add-n + related-streams + true])} + {:label "Add to playlist" + :icon [:i.fa-solid.fa-plus] + :on-click #(rf/dispatch [:modals/open + [modals/add-to-bookmark + related-streams]])}]] + [items/layout-switcher !layout]] + [items/related-streams related-streams nil !layout]]]))))) (defn stream [] - (let [stream @(rf/subscribe [:stream]) - !player @(rf/subscribe [:main-player]) - page-loading? @(rf/subscribe [:show-page-loading])] - [:<> - (when-not page-loading? - [:div.flex.flex-col.justify-center.items-center.xl:pt-4 - [player/video-player stream !player]]) - [layout/content-container - [metadata stream] - [description stream] - [comments stream] - [suggested stream]]])) + (let [!active-tab (r/atom :comments)] + (fn [] + (let [stream @(rf/subscribe [:stream]) + !player @(rf/subscribe [:main-player]) + page-loading? @(rf/subscribe [:show-page-loading]) + comments-length (-> stream + :comments-page + :comments + count)] + [:<> + (when-not page-loading? + [:div.flex.flex-col.justify-center.items-center.xl:pt-4 + [player/video-player stream !player]]) + [layout/content-container + [metadata stream] + [description stream] + [:div.mt-10 + [layout/tabs + [{:id :comments + :label "Comments" + :label-fn (fn [label] + [:div.flex.gap-3.items-center.justify-center + [:i.fa-solid.fa-comments] + [:span label] + [:span.dark:bg-neutral-800.rounded.px-2 + comments-length]])} + {:id :related-items + :label "Related Items" + :label-fn (fn [label] + [:div.flex.gap-3.items-center.justify-center + [:i.fa-solid.fa-table-list] + [:span label]])}] + :selected-id @!active-tab + :on-change #(reset! !active-tab %)]] + (case @!active-tab + :comments [comments stream] + :related-items [related-items stream] + [comments stream])]])))) |