aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
authorMiguel Ángel Moreno <mail@migalmoreno.com>2024-12-01 22:44:22 +0100
committerMiguel Ángel Moreno <mail@migalmoreno.com>2024-12-01 22:44:22 +0100
commitcc53d7f0454ef28981174a0e035b2f67e1fc0035 (patch)
tree59acfb30ef830aeaee351e7972de55982354572e /src
parent2c6abb32cae188bf6d47bc3f77f3cee88d309e86 (diff)
feat: add tabs in settings page and add items layout setting
Diffstat (limited to 'src')
-rw-r--r--src/frontend/tubo/channel/views.cljs2
-rw-r--r--src/frontend/tubo/events.cljs1
-rw-r--r--src/frontend/tubo/items/views.cljs22
-rw-r--r--src/frontend/tubo/kiosks/views.cljs2
-rw-r--r--src/frontend/tubo/playlist/views.cljs2
-rw-r--r--src/frontend/tubo/search/views.cljs2
-rw-r--r--src/frontend/tubo/settings/views.cljs61
-rw-r--r--src/frontend/tubo/stream/views.cljs2
8 files changed, 59 insertions, 35 deletions
diff --git a/src/frontend/tubo/channel/views.cljs b/src/frontend/tubo/channel/views.cljs
index bd033f7..71c58cd 100644
--- a/src/frontend/tubo/channel/views.cljs
+++ b/src/frontend/tubo/channel/views.cljs
@@ -39,7 +39,7 @@
(defn channel
[_]
(let [!show-description? (r/atom false)
- !layout (r/atom :list)]
+ !layout (r/atom (:items-layout @(rf/subscribe [:settings])))]
(fn [{{:keys [url]} :query-params}]
(let [{:keys [banner description next-page related-streams] :as channel}
@(rf/subscribe [:channel])
diff --git a/src/frontend/tubo/events.cljs b/src/frontend/tubo/events.cljs
index 31ecc8c..c4f3c1d 100644
--- a/src/frontend/tubo/events.cljs
+++ b/src/frontend/tubo/events.cljs
@@ -49,6 +49,7 @@
:show-description (if-nil (:show-description
store)
true)
+ :items-layout :list
:default-service (if-nil
(:default-service store)
{:service-id 0
diff --git a/src/frontend/tubo/items/views.cljs b/src/frontend/tubo/items/views.cljs
index 7470d65..c89f481 100644
--- a/src/frontend/tubo/items/views.cljs
+++ b/src/frontend/tubo/items/views.cljs
@@ -175,7 +175,7 @@
[:div.flex.items-center.flex-auto.flex-col.justify-center.gap-y-4
[:i.fa-solid.fa-ghost.text-3xl]
[:p.text-lg "No available streams"]]
- (if (and !layout (= @!layout :grid))
+ (if (and !layout (= @!layout "grid"))
[:div.grid.w-full.gap-x-10.gap-y-6
{:class "xs:grid-cols-[repeat(auto-fill,_minmax(165px,_1fr))]"}
(for [[i item] (map-indexed vector related-streams)]
@@ -188,14 +188,16 @@
(defn layout-switcher
[!layout]
- [:div.gap-x-6.text-lg.flex.justify-end
- [:button
- {:on-click #(reset! !layout :list)
+ [:div.gap-x-5.text-lg.flex.items-center.justify-end
+ [:button.flex.items-center
+ {:on-click #(reset! !layout "list")
:title "Switch to list layout"}
- [:i.fa-solid.fa-list
- {:class (when-not (= @!layout :list) :text-neutral-500)}]]
- [:button
- {:on-click #(reset! !layout :grid)
+ [:i.fa-solid.fa-list.text-sm
+ {:class (when-not (= @!layout "list")
+ ["dark:text-neutral-500" "text-neutral-400"])}]]
+ [:button.flex.items-center
+ {:on-click #(reset! !layout "grid")
:title "Switch to grid layout"}
- [:i.fa-solid.fa-grip
- {:class (when-not (= @!layout :grid) :text-neutral-500)}]]])
+ [:i.fa-solid.fa-grip.text-base
+ {:class (when-not (= @!layout "grid")
+ ["dark:text-neutral-500" "text-neutral-400"])}]]])
diff --git a/src/frontend/tubo/kiosks/views.cljs b/src/frontend/tubo/kiosks/views.cljs
index fd9b07e..3ad3f42 100644
--- a/src/frontend/tubo/kiosks/views.cljs
+++ b/src/frontend/tubo/kiosks/views.cljs
@@ -34,7 +34,7 @@
(defn kiosk
[_]
- (let [!layout (r/atom :list)]
+ (let [!layout (r/atom (:items-layout @(rf/subscribe [:settings])))]
(fn [{{:keys [serviceId]} :query-params}]
(let [{:keys [id related-streams next-page]}
@(rf/subscribe [:kiosk])
diff --git a/src/frontend/tubo/playlist/views.cljs b/src/frontend/tubo/playlist/views.cljs
index 065a3e0..78174d6 100644
--- a/src/frontend/tubo/playlist/views.cljs
+++ b/src/frontend/tubo/playlist/views.cljs
@@ -24,7 +24,7 @@
(defn playlist
[_]
- (let [!layout (r/atom :list)]
+ (let [!layout (r/atom (:items-layout @(rf/subscribe [:settings])))]
(fn [{{:keys [url]} :query-params}]
(let [{:keys [name next-page uploader-name uploader-url related-streams
stream-count]
diff --git a/src/frontend/tubo/search/views.cljs b/src/frontend/tubo/search/views.cljs
index 5896d01..4cfe90e 100644
--- a/src/frontend/tubo/search/views.cljs
+++ b/src/frontend/tubo/search/views.cljs
@@ -7,7 +7,7 @@
(defn search
[_]
- (let [!layout (r/atom :list)]
+ (let [!layout (r/atom (:items-layout @(rf/subscribe [:settings])))]
(fn [{{:keys [q serviceId]} :query-params}]
(let [{:keys [items next-page]} @(rf/subscribe [:search/results])
next-page-url (:url next-page)
diff --git a/src/frontend/tubo/settings/views.cljs b/src/frontend/tubo/settings/views.cljs
index 51520bb..1e95e92 100644
--- a/src/frontend/tubo/settings/views.cljs
+++ b/src/frontend/tubo/settings/views.cljs
@@ -1,6 +1,7 @@
(ns tubo.settings.views
(:require
[re-frame.core :as rf]
+ [reagent.core :as r]
[tubo.layout.views :as layout]))
(defn boolean-input
@@ -14,25 +15,45 @@
(or on-change
#(rf/dispatch [:settings/change key (.. % -target -value)]))])
+(defn general-settings
+ [{:keys [theme default-service items-layout]}]
+ (let [services @(rf/subscribe [:services])]
+ [:<>
+ [select-input "Theme" :theme theme #{:auto :light :dark}]
+ [select-input "Default service" :default-service (:id default-service)
+ (map #(-> %
+ :info
+ :name)
+ services)
+ #(rf/dispatch [:settings/change-service (.. % -target -value)])]
+ [select-input "Default kiosk" :default-service
+ (:default-kiosk default-service) (:available-kiosks default-service)
+ #(rf/dispatch [:settings/change-kiosk (.. % -target -value)])]
+ [select-input "Items Layout" :items-layout items-layout #{:grid :list}]]))
+
+(defn stream-settings
+ [{:keys [show-description show-comments show-related]}]
+ [:<>
+ [boolean-input "Show description" :show-description show-description]
+ [boolean-input "Show comments" :show-comments show-comments]
+ [boolean-input "Show related videos" :show-related show-related]])
+
(defn settings
[]
- (let [{:keys [theme show-comments show-related show-description
- default-service]}
- @(rf/subscribe [:settings])
- services @(rf/subscribe [:services])]
- [layout/content-container
- [layout/content-header "Settings"]
- [:form.flex.flex-wrap.py-4
- [select-input "Theme" :theme theme #{:auto :light :dark}]
- [select-input "Default service" :default-service (:id default-service)
- (map #(-> %
- :info
- :name)
- services)
- #(rf/dispatch [:settings/change-service (.. % -target -value)])]
- [select-input "Default kiosk" :default-service
- (:default-kiosk default-service) (:available-kiosks default-service)
- #(rf/dispatch [:settings/change-kiosk (.. % -target -value)])]
- [boolean-input "Show description" :show-description show-description]
- [boolean-input "Show comments" :show-comments show-comments]
- [boolean-input "Show related videos" :show-related show-related]]]))
+ (let [!active-tab (r/atom :general)]
+ (fn []
+ (let [settings @(rf/subscribe [:settings])]
+ [layout/content-container
+ [layout/content-header "Settings"]
+ [layout/tabs
+ [{:id :general
+ :label "General"}
+ {:id :stream
+ :label "Stream"}]
+ :selected-id @!active-tab
+ :on-change #(reset! !active-tab %)]
+ [:form.flex.flex-wrap.py-4
+ (case @!active-tab
+ :general [general-settings settings]
+ :stream [stream-settings settings]
+ [general-settings settings])]]))))
diff --git a/src/frontend/tubo/stream/views.cljs b/src/frontend/tubo/stream/views.cljs
index 7e03f40..63184b4 100644
--- a/src/frontend/tubo/stream/views.cljs
+++ b/src/frontend/tubo/stream/views.cljs
@@ -116,7 +116,7 @@
(defn related-items
[_]
(let [!menu-active? (r/atom nil)
- !layout (r/atom :list)]
+ !layout (r/atom (:items-layout @(rf/subscribe [:settings])))]
(fn [{:keys [related-streams]}]
(let [show? (:show-related @(rf/subscribe [:settings]))]
(when (and show? (seq related-streams))