diff options
Diffstat (limited to 'src/frontend/tubo')
| -rw-r--r-- | src/frontend/tubo/components/comments.cljs | 10 | ||||
| -rw-r--r-- | src/frontend/tubo/components/navigation.cljs | 2 | ||||
| -rw-r--r-- | src/frontend/tubo/subs.cljs | 5 | ||||
| -rw-r--r-- | src/frontend/tubo/views.cljs | 43 | ||||
| -rw-r--r-- | src/frontend/tubo/views/stream.cljs | 31 |
5 files changed, 48 insertions, 43 deletions
diff --git a/src/frontend/tubo/components/comments.cljs b/src/frontend/tubo/components/comments.cljs index c5c4b68..8a21351 100644 --- a/src/frontend/tubo/components/comments.cljs +++ b/src/frontend/tubo/components/comments.cljs @@ -22,15 +22,17 @@ (when pinned? [:i.fa-solid.fa-thumbtack.mr-2.text-xs]) (when uploader-name - [:div.flex.items-center + [:div.flex.items-stretch [:a {:href (rfe/href :tubo.routes/channel nil {:url uploader-url}) :title uploader-name} - [:h1.text-neutral-800.dark:text-gray-300.font-bold uploader-name]] + [:h1.text-neutral-800.dark:text-gray-300.font-bold.line-clamp-1 uploader-name]] (when stream-position - [:p.mx-1.text-xs (str "at " (util/format-duration stream-position))])]) + [:div.text-neutral-600.dark:text-neutral-300.flex.items-center + [:span.mx-2.mb-1.text-xs {:dangerouslySetInnerHTML {:__html "•"}}] + [:span.text-xs.whitespace-nowrap (util/format-duration stream-position)]])]) (when uploader-verified? [:i.fa-solid.fa-circle-check.ml-2])] [:div.my-2 - [:p {:dangerouslySetInnerHTML {:__html text}}]] + [:p.break-words {:dangerouslySetInnerHTML {:__html text}}]] [:div..flex.items-center.my-2 [:div.mr-4 [:p (util/format-date upload-date)]] diff --git a/src/frontend/tubo/components/navigation.cljs b/src/frontend/tubo/components/navigation.cljs index a48854c..4934990 100644 --- a/src/frontend/tubo/components/navigation.cljs +++ b/src/frontend/tubo/components/navigation.cljs @@ -5,7 +5,7 @@ (defn back-button [service-color] [:div.flex.items-center - [:button.py-4.px-2 + [:button.py-4.pl-2.sm:pl-0 {:on-click #(rf/dispatch [::events/history-back])} [:i.fa-solid.fa-chevron-left {:style {:color service-color}}] diff --git a/src/frontend/tubo/subs.cljs b/src/frontend/tubo/subs.cljs index 9f684e1..622984a 100644 --- a/src/frontend/tubo/subs.cljs +++ b/src/frontend/tubo/subs.cljs @@ -187,11 +187,6 @@ (:show-media-queue db))) (rf/reg-sub - :theme - (fn [db _] - (:theme db))) - -(rf/reg-sub :settings (fn [db _] (:settings db))) diff --git a/src/frontend/tubo/views.cljs b/src/frontend/tubo/views.cljs index 736a60d..8f052ca 100644 --- a/src/frontend/tubo/views.cljs +++ b/src/frontend/tubo/views.cljs @@ -13,20 +13,23 @@ (defonce kiosks (rf/dispatch [::events/get-kiosks 0])) (defn mobile-nav - [show-mobile-nav? service-id services available-kiosks] + [show-mobile-nav? service-id service-color services available-kiosks] [:<> - [:div.w-full.fixed.min-h-screen.right-0.top-0 + [:div.w-full.fixed.min-h-screen.right-0.top-0.transition-all.delay-75.ease-in-out {:class "bg-black/50" - :style {:visibility (when-not show-mobile-nav? "hidden")} + :style {:visibility (when-not show-mobile-nav? "hidden") + :opacity (if show-mobile-nav? "1" "0")} :on-click #(rf/dispatch [::events/toggle-mobile-nav])}] [:div.items-center.fixed.overflow-x-hidden.min-h-screen.w-60.top-0.ease-in-out.delay-75.bg-white.dark:bg-neutral-900 {:class (str "transition-[right] " (if show-mobile-nav? "right-0" "right-[-245px]"))} - [:div.flex.justify-center.py-8.items-center - [:img.mb-1 {:src "/images/tubo.png" :style {:maxHeight "25px" :maxWidth "40px"} - :title "Tubo"}] - [:h3.text-3xl.font-bold.px-4 "Tubo"]] - [:div.relative.flex.flex-col.items-center-justify-center - [:div.w-full.box-border.z-10.ml:text-white + [:div.flex.justify-center.py-8.items-center.text-white {:style {:background service-color}} + [:img.mb-1 + {:src "/images/tubo.png" + :style {:maxHeight "25px" :maxWidth "40px"} + :title "Tubo"}] + [:h3.text-3xl.font-bold.px-4.font-roboto "Tubo"]] + [:div.relative.flex.flex-col.items-center-justify-center.text-white {:style {:background service-color}} + [:div.w-full.box-border.z-10 [:select.border-none.focus:ring-transparent.bg-blend-color-dodge.font-bold.font-nunito.px-5.w-full {:on-change #(rf/dispatch [::events/change-service-kiosk (js/parseInt (.. % -target -value))]) :value service-id @@ -38,19 +41,25 @@ (-> service :info :name)]))]] [:div.flex.absolute.min-h-full.top-0.right-6.items-center.justify-end.z-0 [:i.fa-solid.fa-caret-down]]] - [:div.relative.pb-4 + [:div.relative.py-4 [:ul.flex.font-roboto.flex-col (for [kiosk available-kiosks] [:li.px-5.py-2 {:key kiosk} [:a {:href (rfe/href ::routes/kiosk nil {:serviceId service-id :kioskId kiosk})} - kiosk]])]] + [:i.fa-solid.fa-fire.text-neutral-600.dark:text-neutral-300] + [:span.ml-7 kiosk]]])]] [:div.relative.dark:border-neutral-800.border-gray-300.pt-4 {:class "border-t-[1px]"} [:ul.flex.font-roboto [:li.px-5.py-2 [:a {:href (rfe/href ::routes/settings)} - "Settings"]]]]]]) + [:i.fa-solid.fa-cog.text-neutral-600.dark:text-neutral-300] + [:span.ml-7 "Settings"]]] + [:li.px-5.py-2 + [:a {:href "https://github.com/migalmoreno/tubo" :target "_blank"} + [:i.fa-brands.fa-github] + [:span.ml-7 "Source"]]]]]]]) (defn navbar [{{:keys [serviceId]} :query-params}] @@ -82,14 +91,14 @@ :params {} :query {:q search-query :serviceId service-id}}])))} [:div.relative - [:input.bg-transparent.text-white.border-none.rounded.py-2.pr-6.mx-2.focus:ring-transparent.placeholder-white.box-border.w-40.xs:w-auto + [:input.bg-transparent.text-white.border-none.py-2.pr-6.mx-2.focus:ring-transparent.placeholder-white.w-40.xs:w-auto {:type "text" :ref #(reset! !input %) :default-value @!query :on-change #(let [input (.. % -target -value)] (when-not (empty? input) (rf/dispatch [::events/change-search-query input])) (reset! !query input)) - :placeholder "Search for something"}] + :placeholder "Search"}] [:button.mx-2.text-xs.text-white.absolute.right-0.top-3 {:type "button" :on-click #(when @!input @@ -98,7 +107,7 @@ (.focus @!input)) :class (when (empty? @!query) "invisible")} [:i.fa-solid.fa-circle-xmark]]] - [:div.flex.items-center.px-2.text-white + [:div.flex.items-center.text-white [:button.mx-2 {:type "submit"} [:i.fa-solid.fa-search]] @@ -108,7 +117,7 @@ [:div.cursor-pointer.px-2.ml:hidden.text-white {:on-click #(rf/dispatch [::events/toggle-mobile-nav])} [:i.fa-solid.fa-bars]] - [mobile-nav show-mobile-nav? service-id services available-kiosks] + [mobile-nav show-mobile-nav? service-id service-color services available-kiosks] [:div.hidden.ml:flex.w-full [:div.relative.flex.flex-col.items-center.justify-center.ml:flex-row [:div.w-full.box-border.z-10.ml:text-white @@ -126,7 +135,7 @@ [:div.relative.flex-auto.ml:pl-4 [:ul.flex.font-roboto.flex-col.ml:flex-row.ml:text-white (for [kiosk available-kiosks] - [:li.px-4.py-2 {:key kiosk} + [:li.px-3.py-2 {:key kiosk} [:a {:href (rfe/href ::routes/kiosk nil {:serviceId service-id :kioskId kiosk})} kiosk]])]]]]])))) diff --git a/src/frontend/tubo/views/stream.cljs b/src/frontend/tubo/views/stream.cljs index 8024a13..1727da1 100644 --- a/src/frontend/tubo/views/stream.cljs +++ b/src/frontend/tubo/views/stream.cljs @@ -49,10 +49,10 @@ [:button.px-3.py-1.mx-2 [:a.block.sm:inline-block {:href url} [:i.fa-solid.fa-external-link-alt]] - [:span.mx-3.text-neutral-600.dark:text-neutral-300 "Original"]] + [:span.mx-3 "Original"]] (when stream-format - [:div.relative.flex.flex-col.items-center.justify-center.z-10.mr-2 - [:select.border-none.focus:ring-transparent.dark:bg-blend-color-dodge.pl-4.pr-8.w-full + [:div.relative.flex.flex-col.items-center.justify-center.text-neutral-600.dark:text-neutral-300 + [:select.border-none.focus:ring-transparent.dark:bg-blend-color-dodge.pr-8.w-full.text-ellipsis.text-sm.sm:text-base {:on-change #(rf/dispatch [::events/change-stream-format (.. % -target -value)]) :value id :style {:background "transparent"}} @@ -61,40 +61,39 @@ [:option.dark:bg-neutral-900.border-none {:value id :key i} (str (or resolution "audio-only") " " format (when-not resolution (str " " averageBitrate "kbit/s")))]))] [:div.flex.absolute.min-h-full.top-0.right-4.items-center.justify-end - {:style {:zIndex "-1"}} [:i.fa-solid.fa-caret-down]]])] [:div.flex.flex-col [:div.min-w-full.pb-3 [:h1.text-2xl.font-extrabold.line-clamp-1 name]] [:div.flex.justify-between.py-2 - [:div.flex.items-center.flex-auto + [:div.flex.items-center (when uploader-avatar [:div.relative.w-16.h-16 [:a {:href (rfe/href :tubo.routes/channel nil {:url uploader-url}) :title uploader-name} [:img.rounded-full.object-cover.max-w-full.min-h-full {:src uploader-avatar :alt uploader-name}]]]) - [:div.mx-2 + [:div.mx-3 [:a {:href (rfe/href :tubo.routes/channel nil {:url uploader-url})} uploader-name] (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 + [:div.flex.flex-col.items-end.flex-auto (when view-count - [:div - [:i.fa-solid.fa-eye.text-xs] + [:div.sm:text-base.text-sm.mb-1 + [:i.fa-solid.fa-eye] [:span.ml-2 (.toLocaleString view-count)]]) [:div.flex (when like-count - [:div.items-center - [:i.fa-solid.fa-thumbs-up.text-xs] + [:div.items-center.sm:text-base.text-sm + [:i.fa-solid.fa-thumbs-up] [:span.ml-2 (.toLocaleString like-count)]]) (when dislike-count - [:div.ml-2.items-center - [:i.fa-solid.fa-thumbs-down.text-xs] + [:div.ml-2.items-center.sm:text-base.text-sm + [:i.fa-solid.fa-thumbs-down] [:span.ml-2 dislike-count]])] (when upload-date - [:div - [:i.fa-solid.fa-calendar.mx-2.text-xs] + [:div.sm:text-base.text-sm.mt-1 + [:i.fa-solid.fa-calendar.mx-2] [:span (-> upload-date js/Date.parse @@ -103,7 +102,7 @@ (when (and show-description? description) [:div.py-3.flex.flex-wrap.min-w-full [:div {:dangerouslySetInnerHTML {:__html description} - :class (when (not show-description) "line-clamp-1")}] + :class (when (not show-description) "line-clamp-2")}] [:div.flex.justify-center.font-bold.min-w-full.pt-4.cursor-pointer [:button {:on-click #(rf/dispatch [::events/toggle-stream-layout :show-description])} |