refactor(frontend): modularize the app into standalone panels

61 files changed, 2597 insertions, 2378 deletions

diff --git a/src/frontend/tubo/bookmarks/events.cljs b/src/frontend/tubo/bookmarks/events.cljs
new file mode 100644
index 0000000..e0f2f2b
--- /dev/null
+++ b/src/frontend/tubo/bookmarks/events.cljs
@@ -0,0 +1,235 @@
+(ns tubo.bookmarks.events
+  (:require
+   [nano-id.core :refer [nano-id]]
+   [promesa.core :as p]
+   [re-frame.core :as rf]
+   [tubo.bookmarks.modals :as modals]))
+
+(rf/reg-event-fx
+ :bookmarks/add
+ [(rf/inject-cofx :store)]
+ (fn [{:keys [db store]} [_ bookmark notify?]]
+   (let [updated-db (update db :bookmarks conj
+                            (if (:id bookmark)
+                              bookmark
+                              (assoc bookmark :id (nano-id))))]
+     {:db    updated-db
+      :store (assoc store :bookmarks (:bookmarks updated-db))
+      :fx    [[:dispatch [:modals/close]]
+              (when notify?
+                [:dispatch [:notifications/add
+                            {:status-text
+                             (str "Added playlist \"" (:name bookmark) "\"")
+                             :failure :success}]])]})))
+
+(rf/reg-event-fx
+ :bookmarks/remove
+ [(rf/inject-cofx :store)]
+ (fn [{:keys [db store]} [_ id notify?]]
+   (let [bookmark   (first (filter #(= (:id %) id) (:bookmarks db)))
+         updated-db (update db :bookmarks
+                            #(into [] (remove (fn [bookmark]
+                                                (= (:id bookmark) id)) %)))]
+     {:db    updated-db
+      :store (assoc store :bookmarks (:bookmarks updated-db))
+      :fx    (if notify?
+               [[:dispatch [:notifications/add
+                            {:status-text
+                             (str "Removed playlist \"" (:name bookmark) "\"")
+                             :failure :success}]]]
+               [])})))
+
+(rf/reg-event-fx
+ :bookmarks/clear
+ (fn [{:keys [db]} _]
+   {:fx (conj (into
+               (map (fn [bookmark]
+                      [:dispatch [:bookmarks/remove (:id bookmark)]])
+                    (rest (:bookmarks db)))
+               (map (fn [item]
+                      [:dispatch [:likes/remove item]])
+                    (:items (first (:bookmarks db)))))
+              [:dispatch [:notifications/add
+                          {:status-text "Cleared all playlists"
+                           :failure     :success}]])}))
+
+(rf/reg-event-fx
+ :likes/add-n
+ (fn [_ [_ items]]
+   {:fx (conj (map (fn [item]
+                     [:dispatch [:likes/add item]]) items)
+              [:dispatch [:notifications/add
+                          {:status-text (str "Added " (count items)
+                                             " items to likes")
+                           :failure     :success}]])}))
+
+(rf/reg-event-fx
+ :likes/add
+ [(rf/inject-cofx :store)]
+ (fn [{:keys [db store]} [_ item notify?]]
+   (when-not (some #(= (:url %) (:url item))
+                   (-> db :bookmarks first :items))
+     (let [updated-db (update-in db [:bookmarks 0 :items]
+                                 #(into [] (conj (into [] %1) %2))
+                                 (assoc item :bookmark-id
+                                        (-> db :bookmarks first :id)))]
+       {:db    updated-db
+        :store (assoc store :bookmarks (:bookmarks updated-db))
+        :fx    (if notify?
+                 [[:dispatch [:notifications/add
+                              {:status-text "Added to favorites"
+                               :failure     :success}]]]
+                 [])}))))
+
+(rf/reg-event-fx
+ :likes/remove
+ [(rf/inject-cofx :store)]
+ (fn [{:keys [db store]} [_ item notify?]]
+   (let [updated-db (update-in db [:bookmarks 0 :items]
+                               (fn [items]
+                                 (remove #(= (:url %) (:url item)) items)))]
+     {:db    updated-db
+      :store (assoc store :bookmarks (:bookmarks updated-db))
+      :fx    (if notify?
+               [[:dispatch [:notifications/add
+                            {:status-text "Removed from favorites"
+                             :failure     :success}]]]
+               [])})))
+
+(rf/reg-event-fx
+ :bookmark/add-n
+ (fn [_ [_ bookmark items]]
+   {:fx (conj (map (fn [item]
+                     [:dispatch [:bookmark/add bookmark item]]) items)
+              [:dispatch [:notifications/add
+                          {:status-text (str "Added " (count items)
+                                             " items to playlist \""
+                                             (:name bookmark) "\"")
+                           :failure     :success}]])}))
+
+(rf/reg-event-fx
+ :bookmark/add
+ [(rf/inject-cofx :store)]
+ (fn [{:keys [db store]} [_ bookmark item notify?]]
+   (let [selected   (first (filter #(= (:id %) (:id bookmark)) (:bookmarks db)))
+         pos        (.indexOf (:bookmarks db) selected)
+         updated-db (if (some #(= (:url %) (:url item)) (:items selected))
+                      db
+                      (update-in db [:bookmarks pos :items]
+                                 #(into [] (conj (into [] %1) %2))
+                                 (assoc item :bookmark-id (:id bookmark))))]
+     {:db    updated-db
+      :store (assoc store :bookmarks (:bookmarks updated-db))
+      :fx    [[:dispatch [:modals/close]]
+              (when notify?
+                [:dispatch [:notifications/add
+                            {:status-text (str "Added to playlist \""
+                                               (:name selected) "\"")
+                             :failure     :success}]])]})))
+
+(rf/reg-event-fx
+ :bookmark/remove
+ [(rf/inject-cofx :store)]
+ (fn [{:keys [db store]} [_ bookmark]]
+   (let [selected   (first (filter #(= (:id %) (:bookmark-id bookmark))
+                                   (:bookmarks db)))
+         pos        (.indexOf (:bookmarks db) selected)
+         updated-db (update-in db [:bookmarks pos :items]
+                               #(remove (fn [item]
+                                          (= (:url item) (:url bookmark)))
+                                        %))]
+     {:db    updated-db
+      :store (assoc store :bookmarks (:bookmarks updated-db))
+      :fx    [[:dispatch [:notifications/add
+                          {:status-text (str "Removed from playlist \""
+                                             (:name selected) "\"")
+                           :failure     :success}]]]})))
+
+(rf/reg-event-fx
+ :bookmarks/add-imported
+ (fn [{:keys [db]} [_ bookmarks]]
+   {:fx (conj (map-indexed (fn [i bookmark]
+                             (if (= i 0)
+                               [:dispatch [:likes/add-n (:items bookmark)]]
+                               [:dispatch [:bookmarks/add bookmark]]))
+                           bookmarks)
+              [:dispatch [:notifications/add
+                          {:status-text "Imported playlists successfully"
+                           :failure     :success}]])}))
+
+(defn fetch-imported-bookmarks-items
+  [bookmarks]
+  (-> #(-> (p/all (map (fn [stream]
+                         (p/then (js/fetch
+                                  (str "/api/v1/streams/"
+                                       (js/encodeURIComponent stream)))
+                                 (fn [res] (.json res))))
+                       (:items %)))
+           (p/then (fn [results]
+                     (assoc % :items results))))
+      (map bookmarks)
+      p/all))
+
+(rf/reg-event-fx
+ :bookmarks/process-import
+ (fn [{:keys [db]} [_ bookmarks]]
+   {:promise
+    {:call         #(-> (fetch-imported-bookmarks-items bookmarks)
+                        (p/then (fn [res]
+                                  (js->clj res :keywordize-keys true))))
+     :on-success-n [[:notifications/clear]
+                    [:bookmarks/add-imported]]}
+    :fx [[:dispatch [:notifications/add
+                     {:status-text "Importing playlists..."
+                      :failure     :success}
+                     false]]]}))
+
+(rf/reg-fx
+ :bookmarks/import!
+ (fn [file]
+   (-> (.text file)
+       (p/then
+        #(let [res (js->clj (.parse js/JSON %) :keywordize-keys true)]
+           (if (= (:format res) "Tubo")
+             (rf/dispatch [:bookmarks/process-import (:playlists res)])
+             (throw (js/Error. "Format not supported")))))
+       (p/catch js/Error
+           (fn [error]
+             (rf/dispatch [:notifications/add
+                           {:status-text (.-message error)
+                            :failure     :error}]))))))
+
+(rf/reg-event-fx
+ :bookmarks/import
+ (fn [{:keys [db]} [_ files]]
+   {:fx (map (fn [file] [:bookmarks/import! file]) files)}))
+
+(rf/reg-event-fx
+ :bookmarks/export
+ (fn [{:keys [db]} [_]]
+   {:file-download
+    {:name      "playlists.json"
+     :mime-type "application/json"
+     :data      (.stringify
+                 js/JSON
+                 (clj->js {:format  "Tubo"
+                           :version 1
+                           :playlists
+                           (map (fn [bookmark]
+                                  {:name  (:name bookmark)
+                                   :items (map :url (:items bookmark))})
+                                (:bookmarks db))}))}
+    :fx [[:dispatch [:notifications/add
+                     {:status-text "Exported playlists"
+                      :failure     :success}]]]}))
+
+(rf/reg-event-fx
+ :bookmarks/fetch-page
+ (fn [_]
+   {:document-title "Bookmarked Playlists"}))
+
+(rf/reg-event-fx
+ :bookmark/fetch-page
+ (fn [{:keys [db]} [_ playlist-id]]
+   (let [playlist (first (filter #(= (:id %) playlist-id) (:bookmarks db)))]
+     {:document-title (:name playlist)})))
diff --git a/src/frontend/tubo/bookmarks/modals.cljs b/src/frontend/tubo/bookmarks/modals.cljs
new file mode 100644
index 0000000..6edc1ce
--- /dev/null
+++ b/src/frontend/tubo/bookmarks/modals.cljs
@@ -0,0 +1,44 @@
+(ns tubo.bookmarks.modals
+  (:require
+   [reagent.core :as r]
+   [re-frame.core :as rf]
+   [reitit.frontend.easy :as rfe]
+   [tubo.components.layout :as layout]
+   [tubo.modals.views :as modals]))
+
+(defn bookmark-item
+  [{:keys [items id name] :as bookmark} item]
+  [:div.flex.w-full.h-24.rounded.px-2.cursor-pointer.hover:bg-gray-100.dark:hover:bg-stone-800
+   {:on-click #(rf/dispatch [(if (vector? item) :bookmark/add-n :bookmark/add) bookmark item])}
+   [:div.w-24
+    [layout/thumbnail (-> items first :thumbnail-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]
+    [:span.text-sm (str (count items) " streams")]]])
+
+(defn add-bookmark
+  [item]
+  (let [!bookmark-name (r/atom "")]
+    (fn []
+      [modals/modal-content "Create New Playlist?"
+       [layout/text-input "Title" :text-input @!bookmark-name
+        #(reset! !bookmark-name (.. % -target -value)) "Playlist name"]
+       [layout/secondary-button "Back"
+        #(rf/dispatch [:modals/close])]
+       [layout/primary-button "Create Playlist"
+        #(rf/dispatch [:bookmarks/add {:name @!bookmark-name} item true])
+        [:i.fa-solid.fa-plus]]])))
+
+(defn add-to-bookmark
+  [item]
+  (let [bookmarks @(rf/subscribe [:bookmarks])]
+    [modals/modal-content "Add to Playlist"
+     [:div.flex-auto
+      [:div.flex.justify-center.items-center.pb-4
+       [layout/primary-button "Create New Playlist"
+        #(rf/dispatch [:modals/open [add-bookmark item]])
+        [:i.fa-solid.fa-plus]]]
+      [:div.flex.flex-col.gap-y-2.pr-2
+       (for [[i bookmark] (map-indexed vector bookmarks)]
+         ^{:key i} [bookmark-item bookmark item])]]]))
diff --git a/src/frontend/tubo/bookmarks/subs.cljs b/src/frontend/tubo/bookmarks/subs.cljs
new file mode 100644
index 0000000..1091cb1
--- /dev/null
+++ b/src/frontend/tubo/bookmarks/subs.cljs
@@ -0,0 +1,8 @@
+(ns tubo.bookmarks.subs
+  (:require
+   [re-frame.core :as rf]))
+
+(rf/reg-sub
+ :bookmarks
+ (fn [db _]
+   (:bookmarks db)))
diff --git a/src/frontend/tubo/bookmarks/views.cljs b/src/frontend/tubo/bookmarks/views.cljs
new file mode 100644
index 0000000..51f2ef5
--- /dev/null
+++ b/src/frontend/tubo/bookmarks/views.cljs
@@ -0,0 +1,66 @@
+(ns tubo.bookmarks.views
+  (:require
+   [reagent.core :as r]
+   [re-frame.core :as rf]
+   [reitit.frontend.easy :as rfe]
+   [tubo.bookmarks.modals :as modals]
+   [tubo.components.items :as items]
+   [tubo.components.layout :as layout]))
+
+(defn bookmarks
+  []
+  (let [!menu-active? (r/atom nil)]
+    (fn []
+      (let [color     @(rf/subscribe [:service-color])
+            bookmarks @(rf/subscribe [:bookmarks])
+            items     (map
+                       #(assoc %
+                               :url (rfe/href :bookmark-page nil {:id (:id %)})
+                               :thumbnail-url (-> % :items first :thumbnail-url)
+                               :stream-count (count (:items %))
+                               :bookmark-id (:id %))
+                       bookmarks)]
+        [layout/content-container
+         [layout/content-header "Bookmarked Playlists"
+          [layout/popover-menu !menu-active?
+           [{:label    "Add New"
+             :icon     [:i.fa-solid.fa-plus]
+             :on-click #(rf/dispatch [:modals/open [modals/add-bookmark]])}
+            [:<>
+             [:input.hidden
+              {:id        "file-selector"
+               :type      "file"
+               :multiple  "multiple"
+               :on-click  #(reset! !menu-active? true)
+               :on-change #(rf/dispatch [:bookmarks/import (.. % -target -files)])}]
+             [:label.whitespace-nowrap.cursor-pointer.w-full.h-full.absolute.right-0.top-0
+              {:for "file-selector"}]
+             [:span.text-xs.w-10.min-w-4.w-4.flex.items-center [:i.fa-solid.fa-file-import]]
+             [:span "Import"]]
+            {:label    "Export"
+             :icon     [:i.fa-solid.fa-file-export]
+             :on-click #(rf/dispatch [:bookmarks/export])}
+            {:label    "Clear All"
+             :icon     [:i.fa-solid.fa-trash]
+             :on-click #(rf/dispatch [:bookmarks/clear])}]]]
+         [items/related-streams items]]))))
+
+(defn bookmark
+  []
+  (let [!menu-active? (r/atom nil)]
+    (fn []
+      (let [bookmarks                    @(rf/subscribe [:bookmarks])
+            service-color                @(rf/subscribe [:service-color])
+            {{:keys [id]} :query-params} @(rf/subscribe [:current-match])
+            {:keys [items name]}         (first (filter #(= (:id %) id) bookmarks))]
+        [layout/content-container
+         [layout/content-header name
+          (when-not (empty? items)
+            [layout/popover-menu !menu-active?
+             [{:label    "Add to queue"
+               :icon     [:i.fa-solid.fa-headphones]
+               :on-click #(rf/dispatch [:queue/add-n items])}
+              {:label    "Add to playlist"
+               :icon     [:i.fa-solid.fa-plus]
+               :on-click #(rf/dispatch [:modals/open [modals/add-to-bookmark items]])}]])]
+         [items/related-streams (map #(assoc % :type "stream" :bookmark-id id) items)]]))))
diff --git a/src/frontend/tubo/channel/events.cljs b/src/frontend/tubo/channel/events.cljs
new file mode 100644
index 0000000..99903d5
--- /dev/null
+++ b/src/frontend/tubo/channel/events.cljs
@@ -0,0 +1,52 @@
+(ns tubo.channel.events
+  (:require
+   [re-frame.core :as rf]
+   [tubo.api :as api]))
+
+(rf/reg-event-fx
+ :channel/fetch
+ (fn [{:keys [db]} [_ uri on-success on-error]]
+   (api/get-request
+    (str "/channels/" (js/encodeURIComponent uri))
+    on-success on-error)))
+
+(rf/reg-event-fx
+ :channel/load-page
+ (fn [{:keys [db]} [_ res]]
+   (let [channel-res (js->clj res :keywordize-keys true)]
+     {:db (assoc db :channel channel-res
+                 :show-page-loading false)
+      :fx [[:dispatch [:services/fetch channel-res]]
+           [:document-title (:name channel-res)]]})))
+
+(rf/reg-event-fx
+ :channel/fetch-page
+ (fn [{:keys [db]} [_ uri]]
+   {:fx [[:dispatch [:channel/fetch uri [:channel/load-page] [:bad-response]]]]
+    :db (assoc db :show-page-loading true)}))
+
+(rf/reg-event-db
+ :channel/load-paginated
+ (fn [db [_ res]]
+   (let [channel-res (js->clj res :keywordize-keys true)]
+     (if (empty? (:related-streams channel-res))
+       (-> db
+           (assoc-in [:channel :next-page] nil)
+           (assoc :show-pagination-loading false))
+       (-> db
+           (update-in [:channel :related-streams] #(apply conj %1 %2)
+                      (:related-streams channel-res))
+           (assoc-in [:channel :next-page] (:next-page channel-res))
+           (assoc :show-pagination-loading false))))))
+
+(rf/reg-event-fx
+ :channel/fetch-paginated
+ (fn [{:keys [db]} [_ uri next-page-url]]
+   (if (empty? next-page-url)
+     {:db (assoc db :show-pagination-loading false)}
+     (assoc
+      (api/get-request
+       (str "/channels/" (js/encodeURIComponent uri) )
+       [:channel/load-paginated] [:bad-response]
+       {:nextPage (js/encodeURIComponent next-page-url)})
+      :db (assoc db :show-pagination-loading true)))))
diff --git a/src/frontend/tubo/channel/subs.cljs b/src/frontend/tubo/channel/subs.cljs
new file mode 100644
index 0000000..8c00d6d
--- /dev/null
+++ b/src/frontend/tubo/channel/subs.cljs
@@ -0,0 +1,8 @@
+(ns tubo.channel.subs
+  (:require
+   [re-frame.core :as rf]))
+
+(rf/reg-sub
+ :channel
+ (fn [db _]
+   (:channel db)))
diff --git a/src/frontend/tubo/channel/views.cljs b/src/frontend/tubo/channel/views.cljs
new file mode 100644
index 0000000..b799ef1
--- /dev/null
+++ b/src/frontend/tubo/channel/views.cljs
@@ -0,0 +1,47 @@
+(ns tubo.channel.views
+  (:require
+   [reagent.core :as r]
+   [re-frame.core :as rf]
+   [tubo.bookmarks.modals :as modals]
+   [tubo.components.items :as items]
+   [tubo.components.layout :as layout]))
+
+(defn channel
+  [query-params]
+  (let [!menu-active? (r/atom nil)
+        !show-description? (r/atom false)]
+    (fn [{{:keys [url]} :query-params}]
+      (let [{:keys [banner avatar name description subscriber-count next-page
+                    related-streams]} @(rf/subscribe [:channel])
+            next-page-url             (:url next-page)
+            service-color             @(rf/subscribe [:service-color])
+            scrolled-to-bottom?       @(rf/subscribe [:scrolled-to-bottom])
+            page-loading?             @(rf/subscribe [:show-page-loading])]
+        (when scrolled-to-bottom?
+          (rf/dispatch [:channel/fetch-paginated url next-page-url]))
+        [:<>
+         (when-not page-loading?
+           (when banner
+             [:div.flex.justify-center.h-24
+              [:img.min-w-full.min-h-full.object-cover {:src banner}]]))
+         [layout/content-container
+          [:div.flex.items-center.justify-between
+           [:div.flex.items-center.my-4.mx-2
+            [layout/uploader-avatar {:uploader-avatar avatar :uploader-name name}]
+            [:div.m-4
+             [:h1.text-2xl.line-clamp-1.font-semibold {:title name} name]
+             (when subscriber-count
+               [:div.flex.my-2.items-center
+                [:i.fa-solid.fa-users.text-xs]
+                [:span.mx-2 (.toLocaleString subscriber-count)]])]]
+           (when related-streams
+             [layout/popover-menu !menu-active?
+              [{:label    "Add to queue"
+                :icon     [:i.fa-solid.fa-headphones]
+                :on-click #(rf/dispatch [:queue/add-n related-streams])}
+               {:label    "Add to playlist"
+                :icon     [:i.fa-solid.fa-plus]
+                :on-click #(rf/dispatch [:modals/open [modals/add-to-bookmark related-streams]])}]])]
+          [layout/show-more-container @!show-description? description
+           #(reset! !show-description? (not @!show-description?))]
+          [items/related-streams related-streams next-page-url]]]))))
diff --git a/src/frontend/tubo/comments/events.cljs b/src/frontend/tubo/comments/events.cljs
new file mode 100644
index 0000000..ab79997
--- /dev/null
+++ b/src/frontend/tubo/comments/events.cljs
@@ -0,0 +1,55 @@
+(ns tubo.comments.events
+  (:require
+   [re-frame.core :as rf]
+   [tubo.api :as api]))
+
+(rf/reg-event-fx
+ :comments/fetch
+ (fn [{:keys [db]} [_ url on-success on-error params]]
+   (api/get-request (str "/comments/" (js/encodeURIComponent url))
+                    on-success on-error params)))
+
+(rf/reg-event-db
+ :comments/load-page
+ (fn [db [_ res]]
+   (-> db
+       (assoc-in [:stream :comments-page] (js->clj res :keywordize-keys true))
+       (assoc-in [:stream :show-comments-loading] false))))
+
+(rf/reg-event-fx
+ :comments/fetch-page
+ (fn [{:keys [db]} [_ url]]
+   {:fx [[:dispatch [:comments/fetch url
+                     [:comments/load-page] [:bad-response]]]]
+    :db (-> db
+            (assoc-in [:stream :show-comments-loading] true)
+            (assoc-in [:stream :show-comments] true))}))
+
+(rf/reg-event-db
+ :comments/toggle-replies
+ (fn [db [_ comment-id]]
+   (update-in db [:stream :comments-page :comments]
+              (fn [comments]
+                (map #(if (= (:id %) comment-id)
+                        (assoc % :show-replies (not (:show-replies %)))
+                        %)
+                     comments)))))
+
+(rf/reg-event-db
+ :comments/load-paginated
+ (fn [db [_ res]]
+   (-> db
+       (update-in [:stream :comments-page :comments] #(apply conj %1 %2)
+                  (:comments (js->clj res :keywordize-keys true)))
+       (assoc-in [:stream :comments-page :next-page]
+                 (:next-page (js->clj res :keywordize-keys true)))
+       (assoc :show-pagination-loading false))))
+
+(rf/reg-event-fx
+ :comments/fetch-paginated
+ (fn [{:keys [db]} [_ url next-page-url]]
+   (if (empty? next-page-url)
+     {:db (assoc db :show-pagination-loading true)
+      :fx [[:dispatch [:comments/fetch url
+                       [:comments/load-paginated] [:bad-response]
+                       {:nextPage (js/encodeURIComponent next-page-url)}]]]})))
diff --git a/src/frontend/tubo/comments/views.cljs b/src/frontend/tubo/comments/views.cljs
new file mode 100644
index 0000000..e9a08a3
--- /dev/null
+++ b/src/frontend/tubo/comments/views.cljs
@@ -0,0 +1,81 @@
+(ns tubo.comments.views
+  (:require
+   [re-frame.core :as rf]
+   [reitit.frontend.easy :as rfe]
+   [tubo.components.layout :as layout]
+   [tubo.utils :as utils]))
+
+(defn comment-top-metadata
+  [{:keys [pinned? uploader-name uploader-url uploader-verified? stream-position]}]
+  [:div.flex.items-center
+   (when pinned?
+     [:i.fa-solid.fa-thumbtack.mr-2.text-xs])
+   (when uploader-name
+     [:div.flex.items-stretch
+      [:a {:href  (rfe/href :channel-page nil {:url uploader-url})
+           :title uploader-name}
+       [:h1.text-neutral-800.dark:text-gray-300.font-bold.line-clamp-1 uploader-name]]
+      (when stream-position
+        [:div.text-neutral-600.dark:text-neutral-300
+         [:span.mx-2.text-xs.whitespace-nowrap (utils/format-duration stream-position)]])])
+   (when uploader-verified?
+     [:i.fa-solid.fa-circle-check.ml-2])])
+
+(defn comment-bottom-metadata
+  [{:keys [upload-date like-count hearted-by-uploader? author-avatar author-name]}]
+  [:div..flex.items-center.my-2
+   [:div.mr-4
+    [:p (utils/format-date-ago upload-date)]]
+   (when (and like-count (> like-count 0))
+     [:div.flex.items-center.my-2
+      [:i.fa-solid.fa-thumbs-up.text-xs]
+      [:p.mx-1 like-count]])
+   (when hearted-by-uploader?
+     [:div.relative.w-4.h-4.mx-2
+      [:i.fa-solid.fa-heart.absolute.-bottom-1.-right-1.text-xs.text-red-500]
+      [:img.rounded-full.object-covermax-w-full.min-h-full
+       {:src author-avatar :title (str author-name " hearted this comment")}]])])
+
+
+(defn comment-item
+  [{:keys [id text replies reply-count show-replies] :as comment}]
+  [:div.flex.gap-x-4.my-4
+   [layout/uploader-avatar comment]
+   [:div
+    [comment-top-metadata comment]
+    [:div.my-2
+     [:p {:dangerouslySetInnerHTML {:__html text} :class "[overflow-wrap:anywhere]"}]]
+    [comment-bottom-metadata comment]
+    [:div.flex.items-center.cursor-pointer
+     {:on-click #(rf/dispatch [:comments/toggle-replies id])}
+     (when replies
+       (if show-replies
+         [:<>
+          [:p.font-bold "Hide replies"]
+          [:i.fa-solid.fa-turn-up.mx-2.text-xs]]
+         [:<>
+          [:p.font-bold (str reply-count (if (= reply-count 1) " reply" " replies"))]
+          [:i.fa-solid.fa-turn-down.mx-2.text-xs]]))]]])
+
+(defn comments
+  [{:keys [comments next-page disabled?]} {: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)])])])]
+     (when (:url next-page)
+       (if pagination-loading?
+         (layout/loading-icon service-color)
+         [:div.flex.justify-center
+          [layout/secondary-button
+           "Show more comments"
+           #(rf/dispatch [:comments/fetch-paginated url (:url next-page)])
+           [:i.fa-solid.fa-plus]]]))]))
diff --git a/src/frontend/tubo/components/audio_player.cljs b/src/frontend/tubo/components/audio_player.cljs
deleted file mode 100644
index 5e46909..0000000
--- a/src/frontend/tubo/components/audio_player.cljs
+++ /dev/null
@@ -1,157 +0,0 @@
-(ns tubo.components.audio-player
-  (:require
-   [goog.object :as gobj]
-   [reagent.core :as r]
-   [reagent.dom :as rdom]
-   [re-frame.core :as rf]
-   [reitit.frontend.easy :as rfe]
-   [tubo.components.layout :as layout]
-   [tubo.components.modals.bookmarks :as bookmarks]
-   [tubo.components.player :as player]
-   [tubo.events :as events]
-   [tubo.utils :as utils]))
-
-(defn audio-source
-  [!player]
-  (let [{:keys [stream]} @(rf/subscribe [:media-queue-stream])
-        media-queue-pos  @(rf/subscribe [:media-queue-pos])]
-    (r/create-class
-     {:display-name "AudioPlayer"
-      :component-did-mount
-      (fn [this]
-        (set! (.-onended (rdom/dom-node this))
-              #(rf/dispatch [::events/change-media-queue-pos (+ media-queue-pos 1)]))
-        (when stream
-          (set! (.-src (rdom/dom-node this)) stream)))
-      :reagent-render
-      (fn [!player]
-        (let [!elapsed-time @(rf/subscribe [:elapsed-time])
-              muted?        @(rf/subscribe [:muted])
-              volume-level  @(rf/subscribe [:volume-level])
-              loop-playback @(rf/subscribe [:loop-playback])]
-          [:audio
-           {:ref            #(reset! !player %)
-            :loop           (= loop-playback :stream)
-            :muted          muted?
-            :on-loaded-data #(rf/dispatch [::events/player-start])
-            :on-time-update #(reset! !elapsed-time (.-currentTime @!player))
-            :on-pause       #(rf/dispatch [::events/change-player-paused true])
-            :on-play        #(rf/dispatch [::events/change-player-paused false])}]))})))
-
-(defn main-controls
-  [service-color]
-  (let [media-queue     @(rf/subscribe [:media-queue])
-        media-queue-pos @(rf/subscribe [:media-queue-pos])
-        loading?        @(rf/subscribe [:show-audio-player-loading])
-        !elapsed-time   @(rf/subscribe [:elapsed-time])
-        !player         @(rf/subscribe [:player])
-        paused?         @(rf/subscribe [:paused])
-        player-ready?   @(rf/subscribe [:player-ready])
-        loop-playback   @(rf/subscribe [:loop-playback])]
-    [:div.flex.flex-col.items-center.ml-auto
-     [:div.flex.justify-end
-      [player/loop-button loop-playback service-color]
-      [player/button
-       [:i.fa-solid.fa-backward-step]
-       #(when (and media-queue (not= media-queue-pos 0))
-          (rf/dispatch [::events/change-media-queue-pos (- media-queue-pos 1)]))
-       :disabled? (not (and media-queue (not= media-queue-pos 0)))]
-      [player/button [:i.fa-solid.fa-backward]
-       #(rf/dispatch [::events/set-player-time (- @!elapsed-time 5)])]
-      [player/button
-       (if (or (not loading?) player-ready?)
-         (if paused?
-           [:i.fa-solid.fa-play]
-           [:i.fa-solid.fa-pause])
-         [layout/loading-icon service-color "lg:text-2xl"])
-       #(rf/dispatch [::events/set-player-paused (not paused?)])
-       :show-on-mobile? true
-       :extra-classes "lg:text-2xl"]
-      [player/button [:i.fa-solid.fa-forward]
-       #(rf/dispatch [::events/set-player-time (+ @!elapsed-time 5)])]
-      [player/button [:i.fa-solid.fa-forward-step]
-       #(when (and media-queue (< (+ media-queue-pos 1) (count media-queue)))
-          (rf/dispatch [::events/change-media-queue-pos (+ media-queue-pos 1)]))
-       :disabled? (not (and media-queue (< (+ media-queue-pos 1) (count media-queue))))]]
-     [:div.hidden.lg:flex.items-center.text-sm
-      [:span.mx-2
-       (if (and @!player @!elapsed-time) (utils/format-duration @!elapsed-time) "00:00")]
-      [:div.w-20.lg:w-64.mx-2.flex.items-center
-       [player/time-slider !player !elapsed-time service-color]]
-      [:span.mx-2
-       (if (and @!player player-ready?) (utils/format-duration (.-duration @!player)) "00:00")]]]))
-
-(defn player
-  []
-  (let [!menu-active? (r/atom nil)]
-    (fn []
-      (let [{:keys
-             [uploader-name uploader-url thumbnail-url
-              name stream url service-id] :as current-stream}
-            @(rf/subscribe [:media-queue-stream])
-            media-queue        @(rf/subscribe [:media-queue])
-            show-audio-player? @(rf/subscribe [:show-audio-player])
-            show-media-queue?  @(rf/subscribe [:show-media-queue])
-            volume-level       @(rf/subscribe [:volume-level])
-            muted?             @(rf/subscribe [:muted])
-            bookmarks          @(rf/subscribe [:bookmarks])
-            !player            @(rf/subscribe [:player])
-            media-queue-pos    @(rf/subscribe [:media-queue-pos])
-            {:keys [theme]}    @(rf/subscribe [:settings])
-            auto-theme         @(rf/subscribe [:auto-theme])
-            service-color      (and service-id (utils/get-service-color service-id))
-            bg-color           (str "rgba(" (if (or (and (= theme "auto") (= auto-theme :dark)) (= theme "dark"))
-                                              "23, 23, 23" "255, 255, 255") ", 0.95)")
-            liked?             (some #(= (:url %) url) (-> bookmarks first :items))]
-        (when show-audio-player?
-          [:div.sticky.bottom-0.z-10.p-3.absolute.box-border.m-0.transition-all.ease-in.delay-0
-           {:style
-            {:visibility         (when show-media-queue? "hidden")
-             :opacity            (if show-media-queue? 0 1)
-             :background-image   (str "linear-gradient(0deg, " bg-color "," bg-color "), url(\"" thumbnail-url "\")")
-             :backgroundSize     "cover"
-             :backgroundPosition "center"
-             :backgroundRepeat   "no-repeat"}}
-           [:div.flex.items-center.justify-between
-            [:div.flex.items-center.lg:flex-1
-             [:div {:style {:height "40px" :width "70px" :maxWidth "70px" :minWidth "70px"}}
-              [:img.min-h-full.max-h-full.object-cover.min-w-full.max-w-full.w-full {:src thumbnail-url}]]
-             [:div.flex.flex-col.px-2
-              [:a.text-xs.line-clamp-1
-               {:href  (rfe/href :tubo.routes/stream nil {:url url})
-                :title name}
-               name]
-              [:a.text-xs.pt-2.text-neutral-600.dark:text-neutral-300.line-clamp-1
-               {:href  (rfe/href :tubo.routes/channel nil {:url uploader-url})
-                :title uploader-name}
-               uploader-name]]
-             [audio-source !player]]
-            [main-controls service-color]
-            [:div.flex.lg:justify-end.lg:flex-1
-             [player/volume-slider !player volume-level muted? service-color]
-             [player/button [:i.fa-solid.fa-list] #(rf/dispatch [::events/show-media-queue true])
-              :show-on-mobile? true
-              :extra-classes "pl-4 pr-3"]
-             [layout/popover-menu !menu-active?
-              [{:label    (if liked? "Remove favorite" "Favorite")
-                :icon     [:i.fa-solid.fa-heart (when liked? {:style {:color service-color}})]
-                :on-click #(rf/dispatch [(if liked? ::events/remove-from-likes ::events/add-to-likes) current-stream])}
-               {:label    "Play radio"
-                :icon     [:i.fa-solid.fa-tower-cell]
-                :on-click #(rf/dispatch [::events/start-stream-radio current-stream])}
-               {:label    "Add current to playlist"
-                :icon     [:i.fa-solid.fa-plus]
-                :on-click #(rf/dispatch [::events/add-bookmark-list-modal
-                                         [bookmarks/add-to-bookmark-list-modal current-stream]])}
-               {:label    "Add queue to playlist"
-                :icon     [:i.fa-solid.fa-list]
-                :on-click #(rf/dispatch [::events/add-bookmark-list-modal
-                                         [bookmarks/add-to-bookmark-list-modal media-queue]])}
-               {:label    "Remove from queue"
-                :icon     [:i.fa-solid.fa-trash]
-                :on-click #(rf/dispatch [::events/remove-from-media-queue media-queue-pos])}
-               {:label    "Close player"
-                :icon     [:i.fa-solid.fa-close]
-                :on-click #(rf/dispatch [::events/dispose-audio-player])}]
-              :menu-styles {:bottom "30px" :top nil :right "30px"}
-              :extra-classes "pt-1 !pl-3 pr-3"]]]])))))
diff --git a/src/frontend/tubo/components/comments.cljs b/src/frontend/tubo/components/comments.cljs
deleted file mode 100644
index 001fdee..0000000
--- a/src/frontend/tubo/components/comments.cljs
+++ /dev/null
@@ -1,78 +0,0 @@
-(ns tubo.components.comments
-  (:require
-   [re-frame.core :as rf]
-   [reitit.frontend.easy :as rfe]
-   [tubo.components.layout :as layout]
-   [tubo.events :as events]
-   [tubo.utils :as utils]))
-
-(defn comment-item
-  [{:keys [id text uploader-name uploader-avatar uploader-url stream-position
-           upload-date uploader-verified? like-count hearted-by-uploader?
-           pinned? replies reply-count key show-replies author-name author-avatar]}]
-  [:div.flex.my-4 {:key key}
-   (when uploader-avatar
-     [:div.flex.items-center.py-3.box-border.h-12
-      (when uploader-url
-        [:div.w-12
-         [:a {:href (rfe/href :tubo.routes/channel nil {:url uploader-url}) :title uploader-name}
-          [:img.rounded-full.object-cover.min-w-full.min-h-full {:src uploader-avatar}]]])])
-   [:div.ml-4
-    [:div.flex.items-center
-     (when pinned?
-       [:i.fa-solid.fa-thumbtack.mr-2.text-xs])
-     (when uploader-name
-       [: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.line-clamp-1 uploader-name]]
-        (when stream-position
-          [:div.text-neutral-600.dark:text-neutral-300
-           [:span.mx-2.text-xs.whitespace-nowrap (utils/format-duration stream-position)]])])
-     (when uploader-verified?
-       [:i.fa-solid.fa-circle-check.ml-2])]
-    [:div.my-2
-     [:p {:dangerouslySetInnerHTML {:__html text} :class "[overflow-wrap:anywhere]"}]]
-    [:div..flex.items-center.my-2
-     [:div.mr-4
-      [:p (utils/format-date-ago upload-date)]]
-     (when (and like-count (> like-count 0))
-       [:div.flex.items-center.my-2
-        [:i.fa-solid.fa-thumbs-up.text-xs]
-        [:p.mx-1 like-count]])
-     (when hearted-by-uploader?
-       [:div.relative.w-4.h-4.mx-2
-        [:i.fa-solid.fa-heart.absolute.-bottom-1.-right-1.text-xs.text-red-500]
-        [:img.rounded-full.object-covermax-w-full.min-h-full
-         {:src author-avatar :title (str author-name " hearted this comment")}]])]
-    [:div.flex.items-center.cursor-pointer
-     {:on-click #(rf/dispatch [::events/toggle-comment-replies id])}
-     (when replies
-       (if show-replies
-         [:<>
-          [:p.font-bold "Hide replies"]
-          [:i.fa-solid.fa-turn-up.mx-2.text-xs]]
-         [:<>
-          [:p.font-bold (str reply-count (if (= reply-count 1) " reply" " replies"))]
-          [:i.fa-solid.fa-turn-down.mx-2.text-xs]]))]]])
-
-(defn comments
-  [{:keys [comments next-page disabled?]} author-name author-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}
-         [comment-item (assoc comment :key i :author-name author-name :author-avatar author-avatar)]
-         (when (and replies show-replies)
-           [:div {:style {:marginLeft "32px"}}
-            (for [[i reply] (map-indexed vector (:items replies))]
-              [comment-item (assoc reply :key i :author-name author-name :author-avatar author-avatar)])])])]
-     (when (:url next-page)
-       (if pagination-loading?
-         (layout/loading-icon service-color)
-         [:div.flex.justify-center
-          [layout/secondary-button
-           "Show more comments"
-           #(rf/dispatch [::events/comments-pagination url (:url next-page)])
-           "fa-solid fa-plus"]]))]))
diff --git a/src/frontend/tubo/components/items.cljs b/src/frontend/tubo/components/items.cljs
index 82641b9..22fd432 100644
--- a/src/frontend/tubo/components/items.cljs
+++ b/src/frontend/tubo/components/items.cljs
@@ -1,100 +1,106 @@
 (ns tubo.components.items
   (:require
-   [reagent.core :as r]
    [re-frame.core :as rf]
+   [reagent.core :as r]
    [reitit.frontend.easy :as rfe]
+   [tubo.bookmarks.modals :as bookmarks]
    [tubo.components.layout :as layout]
-   [tubo.components.modal :as modal]
-   [tubo.components.modals.bookmarks :as bookmarks]
-   [tubo.events :as events]
+   [tubo.modals.views :as modals]
    [tubo.utils :as utils]))
 
-(defn item-content
-  [{:keys [audio-streams video-streams type service-id bookmark-id url] :as item} item-route bookmarks]
-  (let [!menu-active? (r/atom false)]
-    (fn [{:keys [type service-id url name thumbnail-url description subscriber-count
-                 stream-count verified? uploader-name uploader-url
-                 uploader-avatar upload-date short-description view-count
-                 duration audio-streams video-streams bookmark-id] :as item} item-route bookmarks]
-      (let [stream? (or (= type "stream") audio-streams video-streams)
-            liked?  (some #(= (:url %) url) (-> bookmarks first :items))
-            items (if stream?
+(defn item-popover
+  [_ _]
+  (let [!menu-active? (r/atom nil)]
+    (fn [{:keys [service-id audio-streams video-streams type url bookmark-id uploader-url] :as item} bookmarks]
+      (let [liked?  (some #(= (:url %) url) (-> bookmarks first :items))
+            items (if (or (= type "stream") audio-streams video-streams)
                     [{:label    "Add to queue"
                       :icon     [:i.fa-solid.fa-headphones]
-                      :on-click #(rf/dispatch [::events/switch-to-audio-player item])}
+                      :on-click #(rf/dispatch [:player/switch-to-background item])}
                      {:label    "Play radio"
                       :icon     [:i.fa-solid.fa-tower-cell]
-                      :on-click #(rf/dispatch [::events/start-stream-radio item])}
+                      :on-click #(rf/dispatch [:player/start-radio item])}
                      {:label    (if liked? "Remove favorite" "Favorite")
-                      :icon     [:i.fa-solid.fa-heart (when (and liked? service-id) {:style {:color (utils/get-service-color service-id)}})]
-                      :on-click #(rf/dispatch [(if liked? ::events/remove-from-likes ::events/add-to-likes) item true])}
+                      :icon     [:i.fa-solid.fa-heart (when (and liked? service-id)
+                                                        {:style {:color (utils/get-service-color service-id)}})]
+                      :on-click #(rf/dispatch [(if liked? :likes/remove :likes/add) item true])}
                      {:label    "Add to playlist"
                       :icon     [:i.fa-solid.fa-plus]
-                      :on-click #(rf/dispatch [::events/add-bookmark-list-modal
-                                               [bookmarks/add-to-bookmark-list-modal item]])}
+                      :on-click #(rf/dispatch [:modals/open [bookmarks/add-to-bookmark item]])}
                      (when (some #(= (:url %) url) (:items (first (filter #(= (:id %) bookmark-id) bookmarks))))
                        {:label    "Remove from playlist"
                         :icon     [:i.fa-solid.fa-trash]
-                        :on-click #(rf/dispatch [::events/remove-from-bookmark-list item])})]
+                        :on-click #(rf/dispatch [:bookmark/remove item])})
+                     {:label    "Show channel details"
+                      :icon     [:i.fa-solid.fa-user]
+                      :on-click #(rf/dispatch [:navigate
+                                               {:name   :channel-page
+                                                :params {}
+                                                :query  {:url uploader-url}}])}]
                     [(when (and bookmarks (some #(= (:id %) bookmark-id) (rest bookmarks)))
                        {:label    "Remove playlist"
                         :icon     [:i.fa-solid.fa-trash]
-                        :on-click #(rf/dispatch [::events/remove-bookmark-list bookmark-id true])})])]
-        [:<>
-         (when name
-           [:div.flex.items-center.my-2
-            [:a {:href item-route :title name}
-             [:h1.line-clamp-2.my-1 {:class "[overflow-wrap:anywhere]"} name]]
-            (when (and verified? (not uploader-url))
-              [:i.fa-solid.fa-circle-check.pl-2])])
-         [:div.flex.justify-between
-          [:div.flex.items-center.my-2
-           (if uploader-url
-             [:a {:href (rfe/href :tubo.routes/channel nil {:url uploader-url}) :title uploader-name}
-              [:h1.line-clamp-1.text-neutral-800.dark:text-gray-300.font-semibold.pr-2.break-all
-               {:class "[overflow-wrap:anywhere]"}
-               uploader-name]]
-             [:h1.line-clamp-1.text-neutral-800.dark:text-gray-300.font-bold.pr-2
-              {:title uploader-name}
-              uploader-name])
-           (when (and uploader-url verified?)
-             [:i.fa-solid.fa-circle-check])]
-          (when-not (empty? (remove nil? items))
-            [layout/popover-menu !menu-active? items])]
-         (when (and subscriber-count (not stream?))
-           [:div.flex.items-center
-            [:i.fa-solid.fa-users.text-xs]
-            [:p.mx-2 (utils/format-quantity subscriber-count)]])
-         (when stream-count
-           [:div.flex.items-center
-            [:i.fa-solid.fa-video.text-xs]
-            [:p.mx-2 (utils/format-quantity stream-count)]])
-         [:div.flex.my-1.justify-between
-          [:p (utils/format-date-ago upload-date)]
-          (when view-count
-            [:div.flex.items-center.h-full.pl-2
-             [:i.fa-solid.fa-eye.text-xs]
-             [:p.pl-1.5 (utils/format-quantity view-count)]])]]))))
+                        :on-click #(rf/dispatch [:bookmarks/remove bookmark-id true])})])]
+        (when (not-empty (remove nil? items))
+          [layout/popover-menu !menu-active? items])))))
+
+(defn item-content
+  [{:keys [url name uploader-url uploader-name subscriber-count view-count stream-count verified?] :as item} route bookmarks]
+  [:div
+   (when name
+     [:div.flex.items-center.my-2
+      [:a {:href route :title name}
+       [:h1.line-clamp-2.my-1 {:class "[overflow-wrap:anywhere]"} name]]
+      (when (and verified? (not uploader-url))
+        [:i.fa-solid.fa-circle-check.pl-2])])
+   [:div.flex.justify-between
+    [:div.flex.items-center.my-2
+     (conj
+      (when uploader-url
+        [:a {:href  (rfe/href :channel-page nil {:url uploader-url})
+             :title uploader-name
+             :key url}])
+      [:h1.text-neutral-800.dark:text-gray-300.font-semibold.pr-2.line-clamp-1.break-all
+       {:class "[overflow-wrap:anywhere]" :title uploader-name :key url}
+       uploader-name])
+     (when (and uploader-url verified?)
+       [:i.fa-solid.fa-circle-check])]
+    [item-popover item bookmarks]]
+   (when subscriber-count
+     [:div.flex.items-center
+      [:i.fa-solid.fa-users.text-xs]
+      [:span.mx-2 (utils/format-quantity subscriber-count)]])
+   (when stream-count
+     [:div.flex.items-center
+      [:i.fa-solid.fa-video.text-xs]
+      [:span.mx-2 (utils/format-quantity stream-count)]])
+   [:div.flex.my-1.justify-between
+    [:span (utils/format-date-ago (:upload-date item))]
+    (when view-count
+      [:div.flex.items-center.h-full.pl-2
+       [:i.fa-solid.fa-eye.text-xs]
+       [:p.pl-1.5 (utils/format-quantity view-count)]])]])
 
 (defn generic-item
   [{:keys [url name thumbnail-url duration] :as item} bookmarks]
   (let [item-url (case (:type item)
-                   "stream"   (rfe/href :tubo.routes/stream nil {:url url})
-                   "channel"  (rfe/href :tubo.routes/channel nil {:url url})
-                   "playlist" (rfe/href :tubo.routes/playlist nil {:url url})
+                   "stream"   (rfe/href :stream-page nil {:url url})
+                   "channel"  (rfe/href :channel-page nil {:url url})
+                   "playlist" (rfe/href :playlist-page nil {:url url})
                    url)]
     [:div.w-full
      [:div.flex.flex-col.max-w-full.min-h-full.max-h-full
-      [layout/thumbnail thumbnail-url item-url name duration]
+      [layout/thumbnail thumbnail-url item-url name duration
+       :classes [:py-2 :h-44 "xs:h-28"] :rounded? true]
       [item-content item item-url bookmarks]]]))
 
 (defn related-streams
   [related-streams next-page-url]
-  (let [service-color @(rf/subscribe [:service-color])
+  (let [service-color       @(rf/subscribe [:service-color])
         pagination-loading? @(rf/subscribe [:show-pagination-loading])
-        bookmarks @(rf/subscribe [:bookmarks])]
+        bookmarks           @(rf/subscribe [:bookmarks])]
     [:div.flex.flex-col.items-center.flex-auto.my-2.md:my-8
-     [modal/modal]
+     [modals/modal]
      (if (empty? related-streams)
        [:div.flex.items-center.flex-auto.flex-col.justify-center.gap-y-4
         [:i.fa-solid.fa-ghost.text-3xl]
@@ -104,4 +110,4 @@
         (for [[i item] (map-indexed vector related-streams)]
           ^{:key i} [generic-item item bookmarks])])
      (when-not (empty? next-page-url)
-       [layout/loading-icon service-color "text-2xl" (when-not pagination-loading? "invisible")])]))
+       [layout/loading-icon service-color [:text-2xl (when-not pagination-loading? :invisible)]])]))
diff --git a/src/frontend/tubo/components/layout.cljs b/src/frontend/tubo/components/layout.cljs
index a695102..436ff83 100644
--- a/src/frontend/tubo/components/layout.cljs
+++ b/src/frontend/tubo/components/layout.cljs
@@ -1,22 +1,23 @@
 (ns tubo.components.layout
   (:require
-   [reagent.core :as r]
    [re-frame.core :as rf]
-   [tubo.utils :as utils]
-   [svgreq.core :as svgreq]))
+   [reitit.frontend.easy :as rfe]
+   [reagent.core :as r]
+   [svgreq.core :as svgreq]
+   [tubo.utils :as utils]))
 
 (defn thumbnail
-  [thumbnail-url route name duration & {:keys [classes rounded?] :or {classes "h-44 xs:h-28" rounded? true}}]
-  [:div.flex.py-2.box-border {:class classes}
+  [thumbnail-url 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
-      [:img.object-cover.min-h-full.max-h-full.min-w-full {:src thumbnail-url :class (when rounded? "rounded")}]
+      [:img.object-cover.min-h-full.max-h-full.min-w-full {:src thumbnail-url :class (when rounded? :rounded)}]
       [:div.bg-gray-300.flex.min-h-full.min-w-full.justify-center.items-center.rounded
        [:i.fa-solid.fa-image.text-3xl.text-white]])
     (when duration
       [:div.rounded.p-2.absolute {:style {:bottom 5 :right 5 :background "rgba(0,0,0,.7)" :zIndex "0"}}
-       [:p.text-white {:style {:fontSize "14px"}}
+       [:p.text-white.text-md
         (if (= duration 0)
           "LIVE"
           (utils/format-duration duration))]])]])
@@ -28,13 +29,14 @@
    (js-obj "height" width "width" height)))
 
 (defn loading-icon
-  [service-color & styles]
+  [service-color & classes]
   [:div.w-full.flex.justify-center.items-center.flex-auto
    [:i.fas.fa-circle-notch.fa-spin
-    {:class (apply str (if (> (count styles) 1) (interpose " " styles) styles))
+    {:class classes
      :style {:color service-color}}]])
 
-(defn focus-overlay [on-click active? transparent?]
+(defn focus-overlay
+  [on-click active? transparent?]
   [:div.w-full.fixed.min-h-screen.right-0.top-0.transition-all.delay-75.ease-in-out.z-20
    {:class    (when-not transparent? "bg-black")
     :style    {:visibility (when-not active? "hidden")
@@ -48,49 +50,49 @@
     [:div.flex.flex-col.flex-auto.items-center.px-5.py-4
      (if page-loading?
        [loading-icon service-color "text-5xl"]
-       [:div.flex.flex-col.flex-auto.w-full {:class "lg:w-4/5 xl:w-3/5"}
+       [:div.flex.flex-col.flex-auto.w-full {:class ["lg:w-4/5" "xl:w-3/5"]}
         (map-indexed #(with-meta %2 {:key %1}) children)])]))
 
 (defn content-header
   [heading & children]
   [:div.flex.items-center.justify-between.mt-6
-   [:h1.text-3xl.line-clamp-1.mr-6.font-semibold
-    {:title heading}
-    heading]
+   [:h1.text-3xl.line-clamp-1.mr-6.font-semibold {:title heading} heading]
    (map-indexed #(with-meta %2 {:key %1}) children)])
 
 (defn uploader-avatar
-  [source name & url]
-  (let [image [:img.flex-auto.rounded-full.object-cover.max-w-full.min-h-full {:src source :alt name}]]
-    (when source
-      [:div.relative.w-12.xs:w-16.h-12.xs:h-16.flex-auto.flex.items-center.shrink-0
-       (if url
-         [:a.flex-auto.flex.min-h-full.min-w-full.max-h-full.max-w-full {:href url :title name} image]
-         image)])))
+  [{:keys [uploader-avatar uploader-name uploader-url]}]
+  (when uploader-avatar
+    [:div.relative.w-12.xs:w-16.h-12.xs:h-16.flex-auto.flex.items-center.shrink-0
+     (conj
+      (when uploader-url
+        [:a.flex-auto.flex.min-h-full.min-w-full.max-h-full.max-w-full
+         {:href (rfe/href :channel-page nil {:url uploader-url})
+          :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}])]))
+
+(defn button
+  [label on-click left-icon right-icon & {:keys [button-classes label-classes icon-classes]}]
+  [:button.px-4.rounded-3xl.py-1.outline-none.focus:ring-transparent.whitespace-nowrap
+   {:on-click on-click :class button-classes}
+   (when left-icon
+     (conj left-icon {:class (or icon-classes label-classes)}))
+   [:span.mx-2.font-bold.text-sm {:class label-classes} label]
+   (when right-icon
+     (conj right-icon {:class (or icon-classes label-classes)}))])
 
 (defn primary-button
   [label on-click left-icon right-icon]
-  [:button.dark:bg-white.bg-stone-800.px-4.rounded-3xl.py-1.outline-none.focus:ring-transparent.whitespace-nowrap
-   {:on-click on-click}
-   (when left-icon
-     [:i.text-neutral-300.dark:text-neutral-800.text-sm
-      {:class left-icon}])
-   [:span.mx-2.text-neutral-300.dark:text-neutral-900.font-bold.text-sm label]
-   (when right-icon
-     [:i.text-neutral-300.dark:text-neutral-800.text-sm
-      {:class right-icon}])])
+  [button label on-click left-icon right-icon
+   :button-classes ["bg-stone-800" "dark:bg-white"]
+   :label-classes  ["text-neutral-300" "dark:text-neutral-900"]])
 
 (defn secondary-button
   [label on-click left-icon right-icon]
-  [:button.dark:bg-transparent.bg-neutral-100.px-4.rounded-3xl.py-1.border.border-neutral-300.dark:border-stone-700.outline-none.focus:ring-transparent.whitespace-nowrap
-   {:on-click on-click}
-   (when left-icon
-     [:i.text-neutral-500.dark:text-white.text-sm
-      {:class left-icon}])
-   [:span.mx-2.text-neutral-500.dark:text-white.font-bold.text-sm label]
-   (when right-icon
-     [:i.text-neutral-500.dark:text-white.text-sm
-      {:class right-icon}])])
+  [button label on-click left-icon right-icon
+   :button-classes ["bg-neutral-100" "dark:bg-transparent" "border" "border-neutral-300" "dark:border-stone-700"]
+   :label-classes ["text-neutral-500" "dark:text-white"]])
 
 (defn generic-input [label & children]
   [:div.w-full.flex.justify-between.items-center.py-2.gap-x-4
@@ -129,7 +131,7 @@
   (let [content [:<>
                  [:span.text-xs.min-w-4.w-4.flex.justify-center.items-center icon]
                  [:span.whitespace-nowrap label]]
-        classes ["relative ""flex" "items-center" "gap-x-3" "hover:bg-neutral-200"
+        classes ["relative" "flex" "items-center" "gap-x-3" "hover:bg-neutral-200"
                  "dark:hover:bg-stone-800" "py-2" "px-3" "rounded"]]
     (if link
       [:a {:href  (:route link) :target (when (:external? link) "_blank")
@@ -154,7 +156,7 @@
    [focus-overlay #(reset! !menu-active? false) @!menu-active? true]
    [:button.focus:outline-none.relative.pl-4
     {:on-click #(reset! !menu-active? (not @!menu-active?))
-     :class extra-classes}
+     :class    extra-classes}
     [:i.fa-solid.fa-ellipsis-vertical]
     [menu @!menu-active? items menu-styles]]])
 
@@ -167,7 +169,7 @@
        [:i.w-6 {:class left-icon}])
      [:h2.mx-4.text-lg.w-24 label]
      [:i.fa-solid.fa-chevron-up.cursor-pointer.text-sm
-      {:class    (if open? "fa-chevron-up" "fa-chevron-down")
+      {:class    (if open? :fa-chevron-up :fa-chevron-down)
        :on-click on-open}]]
     right-button]
    (when open?
@@ -175,12 +177,11 @@
 
 (defn show-more-container
   [open? text on-open]
-  (let [!text-container (atom nil)
+  (let [!text-container  (atom nil)
         !resize-observer (atom nil)
-        text-clamped? (r/atom nil)]
+        text-clamped?    (r/atom nil)]
     (r/create-class
-     {:display-name "ShowMoreContainer"
-      :component-did-mount
+     {:component-did-mount
       (fn [_]
         (when @!text-container
           (.observe
diff --git a/src/frontend/tubo/components/modal.cljs b/src/frontend/tubo/components/modal.cljs
deleted file mode 100644
index 0624856..0000000
--- a/src/frontend/tubo/components/modal.cljs
+++ /dev/null
@@ -1,33 +0,0 @@
-(ns tubo.components.modal
-  (:require
-   [re-frame.core :as rf]
-   [tubo.components.layout :as layout]))
-
-(defn modal-content
-  [title body & extra-buttons]
-  [:div.bg-white.max-h-full.dark:bg-neutral-900.z-20.p-5.rounded.flex.gap-y-5.flex-col.border.border-neutral-300.dark:border-stone-700.flex-auto.shrink-0
-   [:div.flex.justify-between.shrink-0
-    [:h1.text-xl.font-semibold title]
-    [:button {:on-click #(rf/dispatch [:tubo.events/close-modal])}
-     [:i.fa-solid.fa-close]]]
-   [:div.flex-auto.overflow-y-auto body]
-   [:div.flex.justify-end.gap-x-3.shrink-0
-    (if extra-buttons
-      (map-indexed #(with-meta %2 {:key %1}) extra-buttons)
-      [layout/primary-button "Ok" #(rf/dispatch [:tubo.events/close-modal])])]])
-
-(defn modal-panel
-  [{:keys [child show?]}]
-  [:div.fixed.flex.flex-col.items-center.justify-center.w-full.z-20.top-0
-   {:style {:minHeight "100dvh" :height "100dvh"}}
-   [layout/focus-overlay #(rf/dispatch [:tubo.events/close-modal]) show?]
-   [:div.flex.items-center.justify-center.max-h-full.flex-auto.shrink-0.p-5
-    {:class "w-full sm:w-3/4 md:w-3/5 lg:w-1/2 xl:w-1/3"}
-    child]])
-
-(defn modal
-  []
-  (fn []
-    (let [modal (rf/subscribe [:modal])]
-      (when (:show? @modal)
-        [modal-panel @modal]))))
diff --git a/src/frontend/tubo/components/modals/bookmarks.cljs b/src/frontend/tubo/components/modals/bookmarks.cljs
deleted file mode 100644
index befcfe8..0000000
--- a/src/frontend/tubo/components/modals/bookmarks.cljs
+++ /dev/null
@@ -1,46 +0,0 @@
-(ns tubo.components.modals.bookmarks
-  (:require
-   [reagent.core :as r]
-   [re-frame.core :as rf]
-   [reitit.frontend.easy :as rfe]
-   [tubo.components.modal :as modal]
-   [tubo.components.layout :as layout]))
-
-(defn bookmark-list-item
-  [{:keys [items id name] :as bookmark} item]
-  [:div.flex.w-full.h-24.rounded.cursor-pointer.hover:bg-gray-100.dark:hover:bg-stone-800.px-2
-   {:on-click #(rf/dispatch (if (vector? item)
-                              [:tubo.events/add-related-streams-to-bookmark-list bookmark item]
-                              [:tubo.events/add-to-bookmark-list bookmark item true]))}
-   [:div.w-24
-    [layout/thumbnail (-> items first :thumbnail-url) nil name nil
-     :classes "h-24"]]
-   [:div.flex.flex-col.py-4.px-4
-    [:h1.line-clamp-1.font-bold {:title name} name]
-    [:span.text-sm (str (count items) " streams")]]])
-
-(defn add-bookmark-modal
-  [item]
-  (let [!bookmark-name (r/atom "")]
-    (fn []
-      [modal/modal-content "Create New Playlist?"
-       [layout/text-input "Title" :text-input @!bookmark-name
-        #(reset! !bookmark-name (.. % -target -value)) "Playlist name"]
-       [layout/secondary-button "Back"
-        #(rf/dispatch [:tubo.events/back-to-bookmark-list-modal item])]
-       [layout/primary-button "Create Playlist"
-        #(rf/dispatch [:tubo.events/add-bookmark-list-and-back {:name @!bookmark-name} item])
-        "fa-solid fa-plus"]])))
-
-(defn add-to-bookmark-list-modal
-  [item]
-  (let [bookmarks @(rf/subscribe [:bookmarks])]
-    [modal/modal-content "Add to Playlist"
-     [:div.flex-auto
-      [:div.flex.justify-center.items-center.pb-4
-       [layout/primary-button "Create New Playlist"
-        #(rf/dispatch [:tubo.events/open-modal [add-bookmark-modal item]])
-        "fa-solid fa-plus"]]
-      [:div.flex.flex-col.gap-y-2.pr-2
-       (for [[i bookmark] (map-indexed vector bookmarks)]
-         ^{:key i} [bookmark-list-item bookmark item])]]]))
diff --git a/src/frontend/tubo/components/navigation.cljs b/src/frontend/tubo/components/navigation.cljs
index f30f183..548e344 100644
--- a/src/frontend/tubo/components/navigation.cljs
+++ b/src/frontend/tubo/components/navigation.cljs
@@ -1,180 +1,88 @@
 (ns tubo.components.navigation
   (:require
+   [re-frame.core :as rf]
    [reagent.core :as r]
    [reitit.frontend.easy :as rfe]
-   [re-frame.core :as rf]
    [tubo.components.layout :as layout]
-   [tubo.events :as events]
-   [tubo.routes :as routes]))
-
-(defn search-form []
-  (let [!query (r/atom "")
-        !input (r/atom nil)]
-    (fn []
-      (let [search-query      @(rf/subscribe [:search-query])
-            show-search-form? @(rf/subscribe [:show-search-form])
-            service-id        @(rf/subscribe [:service-id])]
-        [:form.relative.flex.items-center.text-white.ml-4
-         {:class (when-not show-search-form? "hidden")
-          :on-submit
-          (fn [e]
-            (.preventDefault e)
-            (when-not (empty? @!query)
-              (rf/dispatch [::events/navigate
-                            {:name   ::routes/search
-                             :params {}
-                             :query  {:q search-query :serviceId service-id}}])))}
-         [:div.flex
-          [:button.mx-2
-           {:on-click #(rf/dispatch [::events/show-search-form false])
-            :type     "button"}
-           [:i.fa-solid.fa-arrow-left]]
-          [:input.bg-transparent.border-none.py-2.pr-6.mx-2.focus:ring-transparent.placeholder-white.sm:w-96.w-full
-           {:type          "text"
-            :style         {:paddingLeft 0}
-            :ref           #(do (reset! !input %)
-                                (when %
-                                  (.focus %)))
-            :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"}]
-          [:button.mx-4
-           {:type "submit"}
-           [:i.fa-solid.fa-search]]
-          [:button.mx-4.text-xs.absolute.right-8.top-3
-           {:type     "button"
-            :on-click #(when @!input
-                         (set! (.-value @!input) "")
-                         (reset! !query "")
-                         (.focus @!input))
-            :class    (when (empty? @!query) "invisible")}
-           [:i.fa-solid.fa-circle-xmark]]]]))))
-
-(defn services-dropdown [services service-id service-color]
-  [:div.relative.flex.flex-col.items-center-justify-center.text-white.px-2
-   {:style {:background service-color}}
-   [:div.w-full.box-border.z-10.lg:z-0
-    [:select.border-none.focus:ring-transparent.bg-blend-color-dodge.font-bold.w-full
-     {:on-change #(rf/dispatch [::events/change-service-kiosk (js/parseInt (.. % -target -value))])
-      :value     service-id
-      :style     {:background "transparent"}}
-     (when services
-       (for [service services]
-         [:option.text-white.bg-neutral-900.border-none
-          {:value (:id service) :key (:id service)}
-          (-> service :info :name)]))]]
-   [:div.flex.items-center.justify-end.absolute.min-h-full.top-0.right-4.lg:right-0.z-0
-    [:i.fa-solid.fa-caret-down]]])
-
-(defn kiosk-active?
-  [{:keys [kiosk kiosk-id service-id default-service default-kiosk path]}]
-  (or (and (= kiosk-id kiosk))
-      (and (= path "/kiosk")
-           (not kiosk-id)
-           (not= (js/parseInt service-id)
-                 (:service-id default-service))
-           (= default-kiosk kiosk))
-      (and (or (= path "/") (= path "/kiosk"))
-           (not kiosk-id)
-           (= (:default-kiosk default-service) kiosk))))
+   [tubo.kiosks.views :as kiosks]
+   [tubo.search.views :as search]
+   [tubo.services.views :as services]))
 
-(defn kiosks-menu
-  [{:keys [kiosks service-id] :as kiosk-args}]
-  [:ul.flex.items-center.px-4.text-white
-   (for [kiosk kiosks]
-     [:li.px-3 {:key kiosk}
-      [:a {:href  (rfe/href ::routes/kiosk nil {:serviceId service-id
-                                                :kioskId   kiosk})
-           :class (when (kiosk-active? (assoc kiosk-args :kiosk kiosk))
-                    "font-bold")}
-       kiosk]])])
-
-(defn mobile-nav-item [route icon label & {:keys [new-tab? active?]}]
+(defn mobile-nav-item
+  [route icon label & {:keys [new-tab? active?]}]
   [:li.px-5.py-2
    [:a.flex {:href route :target (when new-tab? "_blank")}
     [:div.w-6.flex.justify-center.items-center.mr-4
-     [:i.text-neutral-600.dark:text-neutral-300 {:class icon}]]
+     (conj icon {:class ["text-neutral-600" "dark:text-neutral-300"]})]
     [:span {:class (when active? "font-bold")} label]]])
 
 (defn mobile-nav
-  [show-mobile-nav? service-color services available-kiosks {:keys [service-id] :as kiosk-args}]
+  [show-mobile-nav? service-color services available-kiosks & {:keys [service-id] :as kiosk-args}]
   [:<>
-   [layout/focus-overlay #(rf/dispatch [::events/toggle-mobile-nav]) show-mobile-nav?]
+   [layout/focus-overlay #(rf/dispatch [:toggle-mobile-nav]) show-mobile-nav?]
    [:div.fixed.overflow-x-hidden.min-h-screen.w-60.top-0.ease-in-out.delay-75.bg-white.dark:bg-neutral-900.z-20
-    {:class (str "transition-[right] " (if show-mobile-nav? "right-0" "right-[-245px]"))}
+    {:class ["transition-[right]" (if show-mobile-nav? "right-0" "right-[-245px]")]}
     [:div.flex.justify-center.py-4.items-center.text-white {:style {:background service-color}}
      [layout/logo :height 75 :width 75]
      [:h3.text-3xl.font-bold "Tubo"]]
-    [services-dropdown services service-id service-color]
+    [services/services-dropdown services service-id service-color]
     [:div.relative.py-4
      [:ul.flex.flex-col
-      (for [kiosk available-kiosks]
-        ^{:key kiosk}
-        [mobile-nav-item
-         (rfe/href ::routes/kiosk nil
-                   {:serviceId service-id
-                    :kioskId   kiosk})
-         "fa-solid fa-fire" kiosk
-         :active? (kiosk-active? (assoc kiosk-args :kiosk kiosk))])]]
+      (for [[i kiosk] (map-indexed vector available-kiosks)]
+        ^{:key i} [mobile-nav-item
+                   (rfe/href :kiosk-page nil {:serviceId service-id :kioskId kiosk})
+                   [:i.fa-solid.fa-fire] kiosk
+                   :active? (kiosks/kiosk-active? (assoc kiosk-args :kiosk kiosk))])]]
     [:div.relative.dark:border-neutral-800.border-gray-300.pt-4
      {:class "border-t-[1px]"}
      [:ul.flex.flex-col
-      [mobile-nav-item (rfe/href ::routes/bookmarks) "fa-solid fa-bookmark" "Bookmarks"]
-      [mobile-nav-item (rfe/href ::routes/settings) "fa-solid fa-cog" "Settings"]
-      [mobile-nav-item "https://github.com/migalmoreno/tubo"
-       "fa-brands fa-github" "Source" :new-tab? true]]]]])
+      [mobile-nav-item (rfe/href :bookmarks-page) [:i.fa-solid.fa-bookmark] "Bookmarks"]
+      [mobile-nav-item (rfe/href :settings-page) [:i.fa-solid.fa-cog] "Settings"]]]]])
 
 (defn navbar
-  [{{:keys [serviceId kioskId]} :query-params path :path}]
+  [{{:keys [kioskId]} :query-params path :path}]
   (let [service-id                               @(rf/subscribe [:service-id])
         service-color                            @(rf/subscribe [:service-color])
         services                                 @(rf/subscribe [:services])
-        {:keys [theme default-service]}          @(rf/subscribe [:settings])
-        id                                       (js/parseInt (or serviceId service-id))
         show-mobile-nav?                         @(rf/subscribe [:show-mobile-nav])
         show-search-form?                        @(rf/subscribe [:show-search-form])
+        {:keys [default-service]}                @(rf/subscribe [:settings])
         {:keys [available-kiosks default-kiosk]} @(rf/subscribe [:kiosks])]
     [:nav.sticky.flex.items-center.px-2.h-14.top-0.z-20
      {:style {:background service-color}}
      [:div.flex.flex-auto.items-center
       [:div.ml-2
-       [:a.font-bold
-        {:href (rfe/href ::routes/home)}
+       [:a.font-bold {:href (rfe/href :homepage)}
         [layout/logo :height 35 :width 35]]]
-      [search-form]
+      [search/search-form]
       [:div.flex.flex-auto.justify-end.lg:justify-between
-       {:class (when show-search-form? "hidden")}
+       {:class (when show-search-form? :hidden)}
        [:div.hidden.lg:flex
-        [services-dropdown services service-id service-color]
-        [kiosks-menu
-         {:kiosks          available-kiosks
-          :service-id      service-id
-          :kiosk-id        kioskId
-          :default-service default-service
-          :default-kiosk   default-kiosk
-          :path            path}]]
+        [services/services-dropdown services service-id service-color]
+        [kiosks/kiosks-menu
+         :kiosks available-kiosks
+         :service-id service-id
+         :kiosk-id kioskId
+         :default-service default-service
+         :default-kiosk default-kiosk
+         :path path]]
        [:div.flex.items-center.text-white.justify-end
         (when-not show-search-form?
           [:button.mx-3
-           {:on-click #(rf/dispatch [::events/show-search-form true])}
+           {:on-click #(rf/dispatch [:search/show-form true])}
            [:i.fa-solid.fa-search]])
         [:a.mx-3.hidden.lg:block
-         {:href (rfe/href ::routes/settings)}
+         {:href (rfe/href :settings-page)}
          [:i.fa-solid.fa-cog]]
         [:a.mx-3.hidden.lg:block
-         {:href (rfe/href ::routes/bookmarks)}
+         {:href (rfe/href :bookmarks-page)}
          [:i.fa-solid.fa-bookmark]]
-        [:a.mx-3.hidden.lg:block
-         {:href "https://github.com/migalmoreno/tubo" :target "_blank"}
-         [:i.fa-brands.fa-github]]
         [:button.mx-3.lg:hidden
-         {:on-click #(rf/dispatch [::events/toggle-mobile-nav])}
+         {:on-click #(rf/dispatch [:toggle-mobile-nav])}
          [:i.fa-solid.fa-bars]]]
        [mobile-nav show-mobile-nav? service-color services available-kiosks
-        {:kiosk-id        kioskId
-         :service-id      service-id
-         :default-service default-service
-         :default-kiosk   default-kiosk
-         :path    path}]]]]))
+        :kiosk-id kioskId
+        :service-id service-id
+        :default-service default-service
+        :default-kiosk default-kiosk
+        :path path]]]]))
diff --git a/src/frontend/tubo/components/play_queue.cljs b/src/frontend/tubo/components/play_queue.cljs
deleted file mode 100644
index 9474a2c..0000000
--- a/src/frontend/tubo/components/play_queue.cljs
+++ /dev/null
@@ -1,137 +0,0 @@
-(ns tubo.components.play-queue
-  (:require
-   [reagent.core :as r]
-   [re-frame.core :as rf]
-   [reitit.frontend.easy :as rfe]
-   [tubo.components.modals.bookmarks :as bookmarks]
-   [tubo.components.items :as items]
-   [tubo.components.layout :as layout]
-   [tubo.components.player :as player]
-   [tubo.events :as events]
-   [tubo.utils :as utils]))
-
-(defn play-queue-item
-  [item media-queue-pos i bookmarks]
-  (let [!menu-active? (r/atom false)]
-    (fn [{:keys [service-id uploader-name uploader-url name duration
-                 stream url thumbnail-url] :as item}
-         media-queue-pos i bookmarks]
-      (let [liked?          (some #(= (:url %) url) (-> bookmarks first :items))
-            media-queue-pos @(rf/subscribe [:media-queue-pos])
-            media-queue     @(rf/subscribe [:media-queue])]
-        [:div.relative.w-full
-         {:ref #(when (= media-queue-pos i)
-                  (rf/dispatch [::events/scroll-into-view %]))}
-         [:div.flex.cursor-pointer.py-2
-          {:class    (when (= i media-queue-pos) "bg-neutral-200 dark:bg-stone-800")
-           :on-click #(rf/dispatch [::events/change-media-queue-pos i])}
-          [:div.flex.items-center.justify-center.min-w-20.w-20.xs:min-w-28.xs:w-28
-           [:span.font-bold.text-neutral-400.text-sm
-            (if (= i media-queue-pos) [:i.fa-solid.fa-play] (inc i))]]
-          [:div.w-36
-           [layout/thumbnail thumbnail-url nil name duration :classes "h-16 !p-0" :rounded? false]]
-          [:div.flex.flex-col.pl-4.pr-12.w-full
-           [:h1.line-clamp-1.w-fit {:title name} name]
-           [:div.text-neutral-600.dark:text-neutral-300.text-sm.flex.flex-col.xs:flex-row
-            [:span.line-clamp-1 {:title uploader-name} uploader-name]
-            [:span.px-2.hidden.xs:inline-block {:dangerouslySetInnerHTML {:__html "&bull;"}}]
-            [:span (utils/get-service-name service-id)]]]]
-         [:div.absolute.right-0.top-0.min-h-full.flex.items-center
-          [layout/popover-menu !menu-active?
-           [{:label    (if liked? "Remove favorite" "Favorite")
-             :icon     [:i.fa-solid.fa-heart (when liked? {:style {:color (utils/get-service-color service-id)}})]
-             :on-click #(rf/dispatch [(if liked? ::events/remove-from-likes ::events/add-to-likes) item])}
-            {:label    "Play radio"
-             :icon     [:i.fa-solid.fa-tower-cell]
-             :on-click #(rf/dispatch [::events/start-stream-radio item])}
-            {:label    "Add to playlist"
-             :icon     [:i.fa-solid.fa-plus]
-             :on-click #(rf/dispatch [::events/add-bookmark-list-modal
-                                      [bookmarks/add-to-bookmark-list-modal item]])}
-            {:label    "Remove from queue"
-             :icon     [:i.fa-solid.fa-trash]
-             :on-click #(rf/dispatch [::events/remove-from-media-queue i])}]
-           :menu-styles {:right "40px"}
-           :extra-classes "px-7 py-2"]]]))))
-
-(defn queue
-  []
-  (let [show-media-queue       @(rf/subscribe [:show-media-queue])
-        loading?               @(rf/subscribe [:show-audio-player-loading])
-        paused?                @(rf/subscribe [:paused])
-        media-queue            @(rf/subscribe [:media-queue])
-        media-queue-pos        @(rf/subscribe [:media-queue-pos])
-        {:keys [uploader-name uploader-url name stream url service-id]
-         :as   current-stream} @(rf/subscribe [:media-queue-stream])
-        service-color          (and service-id (utils/get-service-color service-id))
-        !elapsed-time          @(rf/subscribe [:elapsed-time])
-        !player                @(rf/subscribe [:player])
-        loop-playback          @(rf/subscribe [:loop-playback])
-        player-ready?          @(rf/subscribe [:player-ready])
-        bookmarks              @(rf/subscribe [:bookmarks])]
-    [:div.fixed.flex.flex-col.items-center.min-w-full.w-full.z-10.backdrop-blur
-     {:style {:minHeight  "calc(100dvh - 56px)"
-              :height     "calc(100dvh - 56px)"
-              :visibility (when-not show-media-queue "hidden")
-              :opacity    (if show-media-queue 1 0)}
-      :class "dark:bg-neutral-900/90 bg-neutral-100/90 backdrop-blur"}
-     [layout/focus-overlay #(rf/dispatch [::events/show-media-queue false]) show-media-queue true]
-     [:div.z-20.w-full.flex.flex-col.flex-auto.h-full.lg:pt-5
-      {:class "lg:w-4/5 xl:w-3/5"}
-      [:div.flex.flex-col.overflow-y-auto.flex-auto.gap-y-1
-       (for [[i item] (map-indexed vector media-queue)]
-         ^{:key i} [play-queue-item item media-queue-pos i bookmarks])]
-      [:div.flex.flex-col.py-4.shrink-0.px-5
-       [:div.flex.flex-col.py-2
-        [:a.text-md.line-clamp-1.w-fit
-         {:href  (rfe/href :tubo.routes/stream nil {:url url})
-          :title name}
-         name]
-        [:a.text-sm.pt-2.text-neutral-600.dark:text-neutral-300.line-clamp-1.w-fit
-         {:href  (rfe/href :tubo.routes/channel nil {:url uploader-url})
-          :title uploader-name}
-         uploader-name]]
-       [:div.flex.flex-auto.py-2.w-full.items-center.text-sm
-        [:span.mr-4 (if (and @!elapsed-time @!player) (utils/format-duration @!elapsed-time) "00:00")]
-        [player/time-slider !player !elapsed-time service-color]
-        [:span.ml-4 (if (and player-ready? @!player) (utils/format-duration (.-duration @!player)) "00:00")]]
-       [:div.flex.justify-center.items-center
-        [player/loop-button loop-playback service-color true]
-        [player/button
-         [:i.fa-solid.fa-backward-step]
-         #(when (and media-queue (not= media-queue-pos 0))
-            (rf/dispatch [::events/change-media-queue-pos
-                          (- media-queue-pos 1)]))
-         :disabled? (not (and media-queue (not= media-queue-pos 0)))
-         :extra-classes "text-xl"
-         :show-on-mobile? true]
-        [player/button
-         [:i.fa-solid.fa-backward]
-         #(set! (.-currentTime @!player) (- @!elapsed-time 5))
-         :extra-classes "text-xl"
-         :show-on-mobile? true]
-        [player/button
-         (if (or (not loading?) player-ready?)
-           (if paused?
-             [:i.fa-solid.fa-play]
-             [:i.fa-solid.fa-pause])
-           [layout/loading-icon service-color "text-3xl"])
-         #(rf/dispatch [::events/set-player-paused (not paused?)])
-         :extra-classes "text-3xl"
-         :show-on-mobile? true]
-        [player/button
-         [:i.fa-solid.fa-forward]
-         #(set! (.-currentTime @!player) (+ @!elapsed-time 5))
-         :extra-classes "text-xl"
-         :show-on-mobile? true]
-        [player/button
-         [:i.fa-solid.fa-forward-step]
-         #(when (and media-queue (< (+ media-queue-pos 1) (count media-queue)))
-            (rf/dispatch [::events/change-media-queue-pos
-                          (+ media-queue-pos 1)]))
-         :disabled? (not (and media-queue (< (+ media-queue-pos 1) (count media-queue))))
-         :extra-classes "text-xl"
-         :show-on-mobile? true]
-        [player/button [:i.fa-solid.fa-list] #(rf/dispatch [::events/show-media-queue false])
-         :show-on-mobile? true
-         :extra-classes "pl-4 pr-3"]]]]]))
diff --git a/src/frontend/tubo/components/player.cljs b/src/frontend/tubo/components/player.cljs
index a093826..3d72e48 100644
--- a/src/frontend/tubo/components/player.cljs
+++ b/src/frontend/tubo/components/player.cljs
@@ -1,8 +1,7 @@
 (ns tubo.components.player
   (:require
    [reagent.core :as r]
-   [re-frame.core :as rf]
-   [tubo.events :as events]))
+   [re-frame.core :as rf]))
 
 (defonce base-slider-classes
   ["h-2" "cursor-pointer" "appearance-none" "bg-neutral-300" "dark:bg-neutral-600"
@@ -39,63 +38,64 @@
     "#629aa9" ["[&::-webkit-slider-thumb]:bg-[#629aa9]" "[&::-moz-range-thumb]:bg-[#629aa9]"]
     ["[&::-webkit-slider-thumb]:bg-neutral-300" "[&::-moz-range-thumb]:bg-neutral-300"]))
 
-(defn time-slider [player elapsed-time service-color]
-  (let [styles `(~@base-slider-classes
-                 ~@(get-slider-bg-classes service-color)
-                 ~@(get-slider-shadow-classes service-color))]
+(defn time-slider [!player !elapsed-time service-color]
+  (let [styles (concat base-slider-classes
+                       (get-slider-bg-classes service-color)
+                       (get-slider-shadow-classes service-color))]
     [:input.w-full
-     {:class     (clojure.string/join " " styles)
+     {:class     styles
       :type      "range"
-      :on-input  #(reset! elapsed-time (.. % -target -value))
-      :on-change #(and @player (> (.-readyState @player) 0)
-                       (set! (.-currentTime @player) @elapsed-time))
-      :max       (if (and @player (> (.-readyState @player) 0))
-                   (.floor js/Math (.-duration @player))
+      :on-input  #(reset! !elapsed-time (.. % -target -value))
+      :on-change #(and @!player (> (.-readyState @!player) 0)
+                       (set! (.-currentTime @!player) @!elapsed-time))
+      :max       (if (and @!player (> (.-readyState @!player) 0))
+                   (.floor js/Math (.-duration @!player))
                    100)
-      :value     @elapsed-time}]))
+      :value     @!elapsed-time}]))
 
 (defn button
-  [icon on-click & {:keys [disabled? show-on-mobile? extra-classes]}]
+  [& {:keys [icon on-click disabled? show-on-mobile? extra-classes]}]
   [:button.outline-none.focus:ring-transparent.px-2.pt-1
-   {:class    (let [classes (apply conj (when disabled? ["opacity-50" "cursor-auto"])
-                                   (when-not show-on-mobile? ["hidden" "lg:block"]))]
-                (apply str (if (> (count extra-classes) 1) (interpose " " (conj classes extra-classes)) (interpose " " classes))))
+   {:class (into (into (when disabled? [:opacity-50 :cursor-auto])
+                       (when-not show-on-mobile? [:hidden :lg:block]))
+                  extra-classes)
     :on-click on-click}
    icon])
 
 (defn loop-button
-  [loop-playback service-color show-on-mobile?]
+  [loop-playback color show-on-mobile?]
   [button
-   [:div.relative.flex.items-center
-    [:i.fa-solid.fa-repeat
-     {:style {:color (when loop-playback service-color)}}]
-    (when (= loop-playback :stream)
-      [:div.absolute.w-full.h-full.flex.justify-center.items-center.font-bold
-       {:class "text-[6px]"
-        :style {:color     (when loop-playback service-color)}}
-       "1"])]
-   #(rf/dispatch [::events/toggle-loop-playback])
-   :extra-classes "text-sm"
+   :icon [:div.relative.flex.items-center
+          [:i.fa-solid.fa-repeat
+           {:style {:color (when loop-playback color)}}]
+          (when (= loop-playback :stream)
+            [:div.absolute.w-full.h-full.flex.justify-center.items-center.font-bold
+             {:class "text-[6px]"
+              :style {:color (when loop-playback color)}}
+             "1"])]
+   :on-click #(rf/dispatch [:player/loop])
+   :extra-classes [:text-sm]
    :show-on-mobile? show-on-mobile?])
 
-(defn volume-slider [player volume-level muted? service-color]
+(defn volume-slider
+  [player volume-level muted? service-color]
   (let [show-slider? (r/atom nil)]
     (fn [player volume-level muted? service-color]
-      (let [styles `("rotate-[270deg]"
-                     ~@base-slider-classes
-                     ~@(get-slider-bg-classes service-color)
-                     ~@(get-slider-shadow-classes service-color))]
+      (let [styles (concat ["rotate-[270deg]"]
+                           base-slider-classes
+                           (get-slider-bg-classes service-color)
+                           (get-slider-shadow-classes service-color))]
         [:div.relative.flex.flex-col.justify-center.items-center
          {:on-mouse-over #(reset! show-slider? true)
           :on-mouse-out  #(reset! show-slider? false)}
          [button
-          (if muted? [:i.fa-solid.fa-volume-xmark] [:i.fa-solid.fa-volume-low])
-          #(rf/dispatch [::events/toggle-mute player])
-          :extra-classes "pl-3 pr-2"]
+          :icon (if muted? [:i.fa-solid.fa-volume-xmark] [:i.fa-solid.fa-volume-low])
+          :on-click #(rf/dispatch [:player/mute (not muted?) player])
+          :extra-classes [:pl-3 :pr-2]]
          (when @show-slider?
            [:input.absolute.w-24.ml-2.m-1.bottom-16
             {:class    (clojure.string/join " " styles)
              :type     "range"
-             :on-input #(rf/dispatch [::events/change-volume-level (.. % -target -value) player])
+             :on-input #(rf/dispatch [:player/change-volume (.. % -target -value) player])
              :max      100
              :value    volume-level}])]))))
diff --git a/src/frontend/tubo/components/video_player.cljs b/src/frontend/tubo/components/video_player.cljs
deleted file mode 100644
index bb974b3..0000000
--- a/src/frontend/tubo/components/video_player.cljs
+++ /dev/null
@@ -1,39 +0,0 @@
-(ns tubo.components.video-player
-  (:require
-   [re-frame.core :as rf]
-   [reagent.core :as r]
-   [reagent.dom :as rdom]
-   ["video.js" :as videojs]
-   ["videojs-mobile-ui"]
-   ["@silvermine/videojs-quality-selector" :as VideojsQualitySelector]))
-
-(defn player
-  [options]
-  (let [!player         (atom nil)
-        service-color   @(rf/subscribe [:service-color])
-        {:keys [theme]} @(rf/subscribe [:settings])]
-    (r/create-class
-     {:display-name "VideoPlayer"
-      :component-did-mount
-      (fn [^videojs/VideoJsPlayer this]
-        (let [set-bg-color! #(set! (.. (.$ (.getChild ^videojs/VideoJsPlayer @!player "ControlBar") %)
-                                       -style
-                                       -background)
-                                   service-color)]
-          (VideojsQualitySelector videojs)
-          (reset! !player (videojs (rdom/dom-node this) (clj->js options)))
-          (set-bg-color! ".vjs-play-progress")
-          (set-bg-color! ".vjs-volume-level")
-          (set-bg-color! ".vjs-slider-bar")
-          (.ready @!player #(.mobileUi ^videojs/VideoJsPlayer @!player))
-          (.on @!player "play" (fn []
-                                 (.audioPosterMode
-                                  @!player
-                                  (clojure.string/includes?
-                                   (:label (first (filter #(= (:src %) (.src @!player))
-                                                          (:sources options))))
-                                   "audio-only"))))))
-      :component-will-unmount #(when @!player (.dispose @!player))
-      :reagent-render
-      (fn [options]
-        [:video-js.vjs-tubo.vjs-default-skin])})))
diff --git a/src/frontend/tubo/core.cljs b/src/frontend/tubo/core.cljs
index cbc1ad5..2153e50 100644
--- a/src/frontend/tubo/core.cljs
+++ b/src/frontend/tubo/core.cljs
@@ -3,7 +3,7 @@
    ["react-dom/client" :as rdom]
    [reagent.core :as r]
    [re-frame.core :as rf]
-   [tubo.events :as events]
+   [tubo.events]
    [tubo.routes :as routes]
    [tubo.subs]
    [tubo.views :as views]))
@@ -18,5 +18,5 @@
 
 (defn ^:export init
   []
-  (rf/dispatch-sync [::events/initialize-db])
+  (rf/dispatch-sync [:initialize-db])
   (mount-root))
diff --git a/src/frontend/tubo/events.cljs b/src/frontend/tubo/events.cljs
index ed73d4d..decdb23 100644
--- a/src/frontend/tubo/events.cljs
+++ b/src/frontend/tubo/events.cljs
@@ -2,268 +2,129 @@
   (:require
    [akiroz.re-frame.storage :refer [reg-co-fx!]]
    [day8.re-frame.http-fx]
-   [goog.object :as gobj]
    [nano-id.core :refer [nano-id]]
-   [promesa.core :as p]
    [reagent.core :as r]
    [re-frame.core :as rf]
    [re-promise.core]
    [reitit.frontend.easy :as rfe]
    [reitit.frontend.controllers :as rfc]
-   [tubo.api :as api]
-   [tubo.components.modals.bookmarks :as bookmarks]
-   [vimsical.re-frame.cofx.inject :as inject]))
+   [tubo.bookmarks.events]
+   [tubo.channel.events]
+   [tubo.comments.events]
+   [tubo.kiosks.events]
+   [tubo.modals.events]
+   [tubo.notifications.events]
+   [tubo.player.events]
+   [tubo.playlist.events]
+   [tubo.queue.events]
+   [tubo.search.events]
+   [tubo.services.events]
+   [tubo.settings.events]
+   [tubo.stream.events]))
 
 (reg-co-fx! :tubo {:fx :store :cofx :store})
 
 (rf/reg-event-fx
- ::initialize-db
+ :initialize-db
  [(rf/inject-cofx :store)]
  (fn [{:keys [store]} _]
-   (let [{:keys [theme show-comments show-related show-description
-                 media-queue media-queue-pos show-audio-player
-                 loop-playback volume-level muted bookmarks
-                 default-service default-service-kiosk service-id]} store]
+   (let [if-nil #(if (nil? %1) %2 %1)]
      {:db
-      {:search-query      ""
-       :service-id        (if (nil? service-id) 0 service-id)
-       :stream            {}
-       :search-results    []
-       :services          []
-       :paused            true
-       :loop-playback     (if (nil? loop-playback) :playlist loop-playback)
-       :media-queue       (if (nil? media-queue) [] media-queue)
-       :media-queue-pos   (if (nil? media-queue-pos) 0 media-queue-pos)
-       :volume-level      (if (nil? volume-level) 100 volume-level)
-       :bookmarks         (if (nil? bookmarks)
-                            [{:id    (nano-id)
-                              :name  "Liked Streams"
-                              :items []}]
-                              bookmarks)
-       :muted             (if (nil? muted) false muted)
-       :current-match     nil
-       :show-audio-player (if (nil? show-audio-player) false show-audio-player)
+      {:paused                 true
+       :muted                  (:muted store)
+       :queue                  (:queue store)
+       :service-id             (if-nil (:service-id store) 0)
+       :loop-playback          (if-nil (:loop-playback store) :playlist)
+       :queue-pos              (if-nil (:queue-pos store) 0)
+       :volume-level           (if-nil (:volume-level store) 100)
+       :show-background-player (:show-background-player store)
+       :bookmarks
+       (if-nil (:bookmarks store) [{:id (nano-id) :name "Liked Streams"}])
        :settings
-       {:theme            (if (nil? theme) :auto theme)
-        :show-comments    (if (nil? show-comments) true show-comments)
-        :show-related     (if (nil? show-related) true show-related)
-        :show-description (if (nil? show-description) true show-description)
-        :default-service  (if (nil? default-service)
+       {:theme            (if-nil (:theme store) "auto")
+        :show-comments    (if-nil (:show-comments store) true)
+        :show-related     (if-nil (:show-related store) true)
+        :show-description (if-nil (:show-description store) true)
+        :default-service  (if-nil (:default-service store)
                             {:service-id       0
                              :id               "YouTube"
                              :default-kiosk    "Trending"
-                             :available-kiosks ["Trending"]}
-                            default-service)}}})))
+                             :available-kiosks ["Trending"]})}}})))
 
 (rf/reg-fx
- ::scroll-to-top
+ :scroll-to-top
  (fn [_]
    (.scrollTo js/window #js {"top" 0 "behavior" "smooth"})))
 
 (rf/reg-fx
- ::history-go!
- (fn [idx]
-   (.go js/window.history idx)))
-
-(rf/reg-fx
- ::body-overflow!
+ :body-overflow
  (fn [active]
    (set! (.. js/document.body -style -overflow) (if active "hidden" "auto"))))
 
 (rf/reg-fx
- ::scroll-into-view!
- (fn [element]
-   (when element
-     (.scrollIntoView element (js-obj "behavior" "smooth")))))
-
-(rf/reg-fx
- ::document-title!
+ :document-title
  (fn [title]
    (set! (.-title js/document) (str title " - Tubo"))))
 
 (rf/reg-fx
- ::player-volume
- (fn [{:keys [player volume]}]
-   (when (and @player (> (.-readyState @player) 0))
-     (set! (.-volume @player) (/ volume 100)))))
-
-(rf/reg-fx
- ::player-mute
- (fn [{:keys [player muted?]}]
-   (when (and @player (> (.-readyState @player) 0))
-     (set! (.-muted @player) muted?))))
-
-(rf/reg-fx
- ::player-src
- (fn [{:keys [player src current-pos]}]
-   (set! (.-src @player) src)
-   (set! (.-onended @player) #(rf/dispatch [::change-media-queue-pos (inc current-pos)]))))
-
-(rf/reg-fx
- ::player-pause
- (fn [{:keys [paused? player]}]
-   (when (and @player (> (.-readyState @player) 0))
-     (if paused?
-       (.play @player)
-       (.pause @player)))))
-
-(rf/reg-fx
- ::player-current-time
- (fn [{:keys [time player]}]
-   (set! (.-currentTime @player) time)))
-
-(rf/reg-event-db
- ::change-player-paused
- (fn [db [_ val]]
-   (assoc db :paused val)))
-
-(rf/reg-event-fx
- ::set-player-paused
- [(rf/inject-cofx ::inject/sub [:player])]
- (fn [{:keys [db player]} [_ paused?]]
-   {::player-pause {:paused? (not paused?)
-                    :player  player}}))
-
-(rf/reg-event-fx
- ::player-start
- [(rf/inject-cofx ::inject/sub [:player]) (rf/inject-cofx ::inject/sub [:elapsed-time])]
- (fn [{:keys [db player]} _]
-   {:fx [[:dispatch [::change-player-paused true]]
-         [:dispatch [::set-player-paused false]]
-         [::player-volume {:player player :volume (:volume-level db)}]]
-    :db (assoc db :player-ready (and @player (> (.-readyState @player) 0)))}))
+ :scroll-into-view!
+ (fn [element]
+   (when element
+     (.scrollIntoView element (js-obj "behavior" "smooth")))))
 
 (rf/reg-event-fx
- ::set-player-time
- [(rf/inject-cofx ::inject/sub [:player])]
- (fn [{:keys [db player]} [_ time]]
-   {::player-current-time {:time time :player player}}))
-
-(rf/reg-fx
- ::stream-metadata
- (fn [metadata]
-   (when (gobj/containsKey js/navigator "mediaSession")
-     (set! (.-metadata js/navigator.mediaSession) (js/MediaMetadata. (clj->js metadata))))))
+ :scroll-into-view
+ (fn [{:keys [db]} [_ element]]
+   {:scroll-into-view! element}))
 
 (rf/reg-fx
- ::media-session
- (fn [{:keys [current-pos player stream]}]
-   (when (gobj/containsKey js/navigator "mediaSession")
-     (let [updatePositionState
-           #(.setPositionState js/navigator.mediaSession
-                               {:duration     (.-duration @player)
-                                :playbackRate (.-playbackRate @player)
-                                :position     (.-currentTime @player)})]
-       (.setActionHandler js/navigator.mediaSession "play" #(.play @player))
-       (.setActionHandler js/navigator.mediaSession "pause" #(.pause @player))
-       (.setActionHandler js/navigator.mediaSession "previoustrack"
-                          #(rf/dispatch [::change-media-queue-pos (dec current-pos)]))
-       (.setActionHandler js/navigator.mediaSession "nexttrack"
-                          #(rf/dispatch [::change-media-queue-pos (inc current-pos)]))
-       (.setActionHandler js/navigator.mediaSession "seekbackward"
-                          (fn [^js/navigator.MediaSessionActionDetails details]
-                            (set! (.-currentTime @player)
-                                  (- (.-currentTime @player) (or (.-seekOffset details) 10)))
-                            (updatePositionState)))
-       (.setActionHandler js/navigator.mediaSession "seekforward"
-                          (fn [^js/navigator.MediaSessionActionDetails details]
-                            (set! (.-currentTime @player)
-                                  (+ (.-currentTime @player) (or (.-seekOffset details) 10)))
-                            (updatePositionState)))
-       (.setActionHandler js/navigator.mediaSession "seekto"
-                          (fn [^js/navigator.MediaSessionActionDetails details]
-                            (set! (.-currentTime @player) (.-seekTime details))
-                            (updatePositionState)))
-       (.setActionHandler js/navigator.mediaSession "stop"
-                          (fn []
-                            (.pause @player)
-                            (set! (.-currentTime @player) 0)))))))
+ :history-go!
+ (fn [idx]
+   (.go js/window.history idx)))
 
 (rf/reg-event-fx
- ::history-go
+ :history-go
  (fn [_ [_ idx]]
-   {::history-go! idx}))
-
-(rf/reg-event-db
- ::show-search-form
- (fn [db [_ show?]]
-   (when-not (= (-> db :current-match :path) "search")
-     (assoc db :show-search-form show?))))
-
-(rf/reg-event-fx
- ::toggle-mobile-nav
- (fn [{:keys [db]} _]
-   {:db (assoc db :show-mobile-nav (not (:show-mobile-nav db)))
-    ::body-overflow! (not (:show-mobile-nav db))}))
-
-(rf/reg-event-fx
- ::show-media-queue
- (fn [{:keys [db]} [_ show?]]
-   {:db (assoc db :show-media-queue show?)
-    ::body-overflow! show?}))
+   {:history-go! idx}))
 
-(rf/reg-event-fx
- ::scroll-into-view
- (fn [{:keys [db]} [_ element]]
-   {::scroll-into-view! element}))
-
-(rf/reg-event-fx
- ::change-volume-level
- [(rf/inject-cofx :store)]
- (fn [{:keys [db store]} [_ value player]]
-   {:db (assoc db :volume-level value)
-    :store (assoc store :volume-level value)
-    ::player-volume {:player player :volume value}}))
+(rf/reg-fx
+ :navigate!
+ (fn [{:keys [name params query]}]
+   (rfe/push-state name params query)))
 
 (rf/reg-event-fx
- ::toggle-mute
- [(rf/inject-cofx :store)]
- (fn [{:keys [db store]} [_ player]]
-   {:db (assoc db :muted (not (:muted db)))
-    :store (assoc store :muted (not (:muted store)))
-    ::player-mute {:player player :muted? (not (:muted db))}}))
+ :navigate
+ (fn [_ [_ route]]
+   {:navigate! route}))
 
 (rf/reg-event-fx
- ::toggle-loop-playback
- [(rf/inject-cofx :store)]
- (fn [{:keys [db store]} _]
-   (let [loop-state (case (:loop-playback db)
-                      :stream false
-                      :playlist :stream
-                      :playlist)]
-     {:db    (assoc db :loop-playback loop-state)
-      :store (assoc store :loop-playback loop-state)})))
+ :toggle-mobile-nav
+ (fn [{:keys [db]} _]
+   {:db            (assoc db :show-mobile-nav (not (:show-mobile-nav db)))
+    :body-overflow (not (:show-mobile-nav db))}))
 
 (rf/reg-event-fx
- ::navigated
+ :navigated
  (fn [{:keys [db]} [_ new-match]]
-   (let [old-match (:current-match db)
+   (let [old-match   (:current-match db)
          controllers (rfc/apply-controllers (:controllers old-match) new-match)
-         match (assoc new-match :controllers controllers)]
-     {:db (-> db
-              (assoc :current-match match)
-              (assoc :show-mobile-nav false)
-              (assoc :show-pagination-loading false))
-      ::scroll-to-top nil
-      ::body-overflow! false
-      :fx [[:dispatch [::show-media-queue false]]
-           [:dispatch [::get-services]]
-           [:dispatch [::get-kiosks (:service-id db)]]]})))
-
-(rf/reg-event-fx
- ::navigate
- (fn [_ [_ route]]
-   {::navigate! route}))
-
-(rf/reg-fx
- ::navigate!
- (fn [{:keys [name params query]}]
-   (rfe/push-state name params query)))
+         match       (assoc new-match :controllers controllers)]
+     {:db            (-> db
+                         (assoc :current-match match)
+                         (assoc :show-mobile-nav false)
+                         (assoc :show-pagination-loading false))
+      :scroll-to-top nil
+      :body-overflow false
+      :fx            [[:dispatch [:queue/show false]]
+                      [:dispatch [:services/fetch-all
+                                  [:services/load] [:bad-response]]]
+                      [:dispatch [:kiosks/fetch-all (:service-id db)
+                                  [:kiosks/load] [:bad-response]]]]})))
 
 (defonce timeouts! (r/atom {}))
 
 (rf/reg-fx
- ::timeout!
+ :timeout
  (fn [{:keys [id event time]}]
    (when-some [existing (get @timeouts! id)]
      (js/clearTimeout existing)
@@ -273,244 +134,14 @@
             (js/setTimeout #(rf/dispatch event) time)))))
 
 (rf/reg-event-fx
- ::add-notification
- (fn [{:keys [db]} [_ data time]]
-   (let [id (nano-id)
-         updated-db (update db :notifications #(into [] (conj %1 %2)) (assoc data :id id))]
-     {:db updated-db
-      :fx (if (false? time)
-              []
-              [[::timeout! {:id    id
-                            :event [::remove-notification id]
-                            :time  (or time 2000)}]])})))
-
-(rf/reg-event-db
- ::remove-notification
- (fn [db [_ id]]
-   (update db :notifications #(remove (fn [n] (= (:id n) id)) %))))
-
-(rf/reg-event-db
- ::clear-notifications
- (fn [db _]
-   (dissoc db :notifications)))
-
-(rf/reg-event-fx
- ::bad-response
+ :bad-response
  (fn [{:keys [db]} [_ res]]
-   {:fx [[:dispatch [::add-notification res]]]}))
-
-(rf/reg-event-db
- ::change-search-query
- (fn [db [_ res]]
-   (assoc db :search-query res)))
-
-(rf/reg-event-fx
- ::change-service-id
- [(rf/inject-cofx :store)]
- (fn [{:keys [db store]} [_ service-id]]
-   {:db (assoc db :service-id service-id)
-    :store (assoc store :service-id service-id)}))
-
-(rf/reg-event-db
- ::load-paginated-channel-results
- (fn [db [_ res]]
-   (-> db
-       (update-in [:channel :related-streams] #(apply conj %1 %2)
-                  (:related-streams (js->clj res :keywordize-keys true)))
-       (assoc-in [:channel :next-page]
-                 (:next-page (js->clj res :keywordize-keys true)))
-       (assoc :show-pagination-loading false))))
-
-(rf/reg-event-fx
- ::channel-pagination
- (fn [{:keys [db]} [_ uri next-page-url]]
-   (if (empty? next-page-url)
-     {:db (assoc db :show-pagination-loading false)}
-     (assoc
-      (api/get-request
-       (str "/channels/" (js/encodeURIComponent uri) )
-       [::load-paginated-channel-results] [::bad-response]
-       {:nextPage (js/encodeURIComponent next-page-url)})
-      :db (assoc db :show-pagination-loading true)))))
-
-(rf/reg-event-db
- ::load-paginated-playlist-results
- (fn [db [_ res]]
-   (-> db
-       (update-in [:playlist :related-streams] #(apply conj %1 %2)
-                  (:related-streams (js->clj res :keywordize-keys true)))
-       (assoc-in [:playlist :next-page]
-                 (:next-page (js->clj res :keywordize-keys true)))
-       (assoc :show-pagination-loading false))))
-
-(rf/reg-event-fx
- ::playlist-pagination
- (fn [{:keys [db]} [_ uri next-page-url]]
-   (if (empty? next-page-url)
-     {:db (assoc db :show-pagination-loading false)}
-     (assoc
-      (api/get-request
-       (str "/playlists/" (js/encodeURIComponent uri))
-       [::load-paginated-playlist-results] [::bad-response]
-       {:nextPage (js/encodeURIComponent next-page-url)})
-      :db (assoc db :show-pagination-loading true)))))
-
-(rf/reg-event-db
- ::load-paginated-search-results
- (fn [db [_ res]]
-   (let [search-res (js->clj res :keywordize-keys true)]
-     (if (empty? (:items search-res))
-       (-> db
-           (assoc-in [:search-results :next-page] nil)
-           (assoc :show-pagination-loading false))
-       (-> db
-           (update-in [:search-results :items] #(apply conj %1 %2)
-                      (:items search-res))
-           (assoc-in [:search-results :next-page] (:next-page search-res))
-           (assoc :show-pagination-loading false))))))
-
-(rf/reg-event-fx
- ::search-pagination
- (fn [{:keys [db]} [_ query id next-page-url]]
-   (if (empty? next-page-url)
-     {:db (assoc db :show-pagination-loading false)}
-     (assoc
-      (api/get-request
-       (str "/services/" id "/search")
-       [::load-paginated-search-results] [::bad-response]
-       {:q query
-        :nextPage (js/encodeURIComponent next-page-url)})
-      :db (assoc db :show-pagination-loading true)))))
-
-(rf/reg-event-fx
- ::add-to-media-queue
- [(rf/inject-cofx :store)]
- (fn [{:keys [db store]} [_ stream]]
-   (let [updated-db (update db :media-queue conj stream)]
-     {:db    updated-db
-      :store (assoc store :media-queue (:media-queue updated-db))})))
-
-(rf/reg-event-fx
- ::remove-from-media-queue
- [(rf/inject-cofx :store)]
- (fn [{:keys [db store]} [_ pos]]
-   (let [updated-db         (update db :media-queue #(into (subvec % 0 pos) (subvec % (inc pos))))
-         media-queue-pos    (:media-queue-pos db)
-         media-queue-length (count (:media-queue updated-db))]
-     {:db    updated-db
-      :store (assoc store :media-queue (:media-queue updated-db))
-      :fx    (cond
-               (and (not (= media-queue-length 0))
-                    (or (< pos media-queue-pos)
-                        (= pos media-queue-pos)
-                        (= media-queue-pos media-queue-length)))
-               [[:dispatch [::change-media-queue-pos
-                            (cond
-                              (= pos media-queue-length) 0
-                              (= pos media-queue-pos)    pos
-                              :else                      (dec media-queue-pos))]]]
-               (= (count (:media-queue updated-db)) 0)
-               [[:dispatch [::dispose-audio-player]]
-                [:dispatch [::show-media-queue false]]]
-               :else [])})))
-
-(rf/reg-event-fx
- ::change-media-queue-pos
- [(rf/inject-cofx :store)]
- (fn [{:keys [db store]} [_ i]]
-   (let [idx    (if (< i (count (:media-queue db)))
-                  i
-                  (when (= (:loop-playback db) :playlist) 0))
-         stream (get (:media-queue db) idx)]
-     (when stream
-       {:db    (-> db
-                   (assoc :player-ready false)
-                   (assoc :media-queue-pos idx)
-                   (assoc-in [:media-queue idx :stream] ""))
-        :store (assoc store :media-queue-pos idx)
-        :fx    [[:dispatch [::fetch-audio-player-stream (:url stream) idx true]]]}))))
-
-(rf/reg-event-fx
- ::change-media-queue-stream
- [(rf/inject-cofx :store)]
- (fn [{:keys [db store]} [_ src idx]]
-   (let [update-entry #(assoc-in % [:media-queue idx :stream] src)]
-     {:db    (update-entry db)
-      :store (update-entry store)})))
-
-(rf/reg-event-fx
- ::dispose-audio-player
- [(rf/inject-cofx :store)]
- (fn [{:keys [db store]} _]
-   (let [remove-entries
-         (fn [elem]
-           (-> elem
-               (assoc :show-audio-player (not (:show-audio-player elem)))
-               (assoc :player-ready false)
-               (assoc :media-queue [])
-               (assoc :media-queue-pos 0)))]
-     {:db    (remove-entries db)
-      :store (remove-entries store)
-      :fx [[:dispatch [::set-player-paused true]]
-           [:dispatch [::set-player-time 0]]]})))
-
-(rf/reg-event-fx
- ::switch-to-audio-player
- [(rf/inject-cofx :store)]
- (fn [{:keys [db store]} [_ stream]]
-   (let [updated-db (update db :media-queue conj stream)
-         idx        (.indexOf (:media-queue updated-db) stream)]
-     {:db    (-> updated-db
-                 (assoc :show-audio-player true))
-      :store (-> store
-                 (assoc :show-audio-player true)
-                 (assoc :media-queue (:media-queue updated-db)))
-      :fx    [[:dispatch [::fetch-audio-player-stream (:url stream) idx (= (count (:media-queue db)) 0)]]]})))
-
-(rf/reg-event-fx
- ::start-stream-radio
- (fn [{:keys [db]} [_ stream]]
-   {:fx [[:dispatch [::switch-to-audio-player stream]]
-         (when (not= (count (:media-queue db)) 0)
-           [:dispatch [::change-media-queue-pos (count (:media-queue db))]])
-         [:dispatch [::fetch-audio-player-related-streams (:url stream)]]]}))
-
-(rf/reg-event-fx
- ::enqueue-related-streams
- [(rf/inject-cofx :store)]
- (fn [{:keys [db store]} [_ streams]]
-   {:db (assoc db :show-audio-player true)
-    :store (assoc store :show-audio-player true)
-    :fx (conj (map (fn [s] [:dispatch [::add-to-media-queue s]]) streams)
-              [:dispatch [::fetch-audio-player-stream (-> streams first :url)
-                          (count (:media-queue db)) (= (count (:media-queue db)) 0)]])}))
-
-(rf/reg-event-db
- ::modal
- (fn [db [_ data]]
-   (assoc db :modal data)))
-
-(rf/reg-event-fx
- ::close-modal
- (fn [{:keys [db]} _]
-   {:db (assoc db :modal {:show? false :child nil})
-    ::body-overflow! false}))
-
-(rf/reg-event-fx
- ::open-modal
- (fn [_ [_ child]]
-   {:fx [[:dispatch [::modal {:show? true :child child}]]]
-    ::body-overflow! true}))
-
-(rf/reg-event-fx
- ::add-bookmark-list-modal
- (fn [_ [_ child]]
-   {:fx [[:dispatch [::open-modal child]]]}))
+   {:fx [[:dispatch [:notifications/add res]]]}))
 
 (rf/reg-fx
- ::download-file!
+ :file-download
  (fn [{:keys [data name mime-type]}]
-   (let [file (.createObjectURL js/URL (js/Blob. (array data) {:type mime-type}))
+   (let [file  (.createObjectURL js/URL (js/Blob. (array data) {:type mime-type}))
          !link (.createElement js/document "a")]
      (set! (.-href !link) file)
      (set! (.-download !link) name)
@@ -518,543 +149,17 @@
      (.remove !link))))
 
 (rf/reg-event-fx
- ::add-imported-bookmark-list
- (fn [{:keys [db]} [_ index bookmark]]
-   {:fx (if (= index 0)
-          (map (fn [s] [:dispatch [::add-to-likes s]])
-               (:items bookmark))
-          [[:dispatch [::add-bookmark-list bookmark]]])}))
-
-(rf/reg-event-fx
- ::add-streams-to-imported-bookmark-lists
- (fn [{:keys [db]} [_ bookmarks]]
-   {:fx (conj (map-indexed (fn [i b] [:dispatch [::add-imported-bookmark-list i b]]) bookmarks)
-              [:dispatch [::add-notification
-                          {:status-text "Imported playlists successfully"
-                           :failure :success}]])}))
-
-(defn fetch-imported-playlists-streams
-  [bookmarks]
-  (-> #(-> (p/all (map (fn [stream]
-                         (p/then (js/fetch
-                                  (str "/api/v1/streams/" (js/encodeURIComponent stream)))
-                                 (fn [res] (.json res))))
-                       (:items %)))
-           (p/then (fn [results]
-                     (assoc % :items results))))
-      (map bookmarks)
-      p/all))
-
-(rf/reg-event-fx
- ::add-imported-bookmark-lists
- (fn [{:keys [db]} [_ bookmarks]]
-   {:promise {:call #(-> (fetch-imported-playlists-streams bookmarks)
-                         (p/then (fn [res] (js->clj res :keywordize-keys true))))
-              :on-success-n [[::clear-notifications]
-                             [::add-streams-to-imported-bookmark-lists]]}
-    :fx [[:dispatch [::add-notification {:status-text "Importing playlists..." :failure :success} false]]]}))
-
-(rf/reg-fx
- ::import-bookmark-list
- (fn [file]
-   (-> (.text file)
-       (p/then
-        #(let [res (js->clj (.parse js/JSON %) :keywordize-keys true)]
-           (if (= (:format res) "Tubo")
-             (rf/dispatch [::add-imported-bookmark-lists (:playlists res)])
-             (throw (js/Error. "Format not supported")))))
-       (p/catch js/Error
-           (fn [error]
-             (rf/dispatch [::add-notification {:status-text (.-message error) :failure :error}]))))))
-
-(rf/reg-event-fx
- ::import-bookmark-lists
- (fn [{:keys [db]} [_ files]]
-   {:fx (map (fn [file] [::import-bookmark-list file]) files)}))
-
-(rf/reg-event-fx
- ::export-bookmark-lists
- (fn [{:keys [db]} [_]]
-   {::download-file!
-    {:name "playlists.json"
-     :mime-type "application/json"
-     :data (.stringify js/JSON (clj->js {:format "Tubo"
-                                         :version 1
-                                         :playlists
-                                         (map (fn [bookmark]
-                                                {:name  (:name bookmark)
-                                                 :items (map :url (:items bookmark))})
-                                              (:bookmarks db))}))}
-    :fx [[:dispatch [::add-notification {:status-text "Exported playlists" :failure :success}]]]}))
-
-(rf/reg-event-fx
- ::add-bookmark-list
- [(rf/inject-cofx :store)]
- (fn [{:keys [db store]} [_ bookmark notify?]]
-   (let [updated-db (update db :bookmarks conj (if (:id bookmark) bookmark (assoc bookmark :id (nano-id))))]
-     {:db    updated-db
-      :store (assoc store :bookmarks (:bookmarks updated-db))
-      :fx    (conj [[:dispatch [::close-modal]]]
-                (when notify?
-                  [:dispatch [::add-notification {:status-text (str "Added playlist \"" (:name bookmark) "\"")
-                                                  :failure     :success}]]))})))
-
-(rf/reg-event-fx
- ::back-to-bookmark-list-modal
- (fn [_ [_ item]]
-   {:fx [[:dispatch [::open-modal [bookmarks/add-to-bookmark-list-modal item]]]]}))
-
-(rf/reg-event-fx
- ::add-bookmark-list-and-back
- (fn [_ [_ bookmark item]]
-   {:fx [[:dispatch [::add-bookmark-list bookmark true]]
-         [:dispatch [::back-to-bookmark-list-modal item]]]}))
-
-(rf/reg-event-fx
- ::remove-bookmark-list
- [(rf/inject-cofx :store)]
- (fn [{:keys [db store]} [_ id notify?]]
-   (let [bookmark (first (filter #(= (:id %) id) (:bookmarks db)))
-         updated-db (update db :bookmarks
-                            #(into [] (remove (fn [bookmark] (= (:id bookmark) id)) %)))]
-     {:db    updated-db
-      :store (assoc store :bookmarks (:bookmarks updated-db))
-      :fx (if notify?
-            [[:dispatch [::add-notification
-                         {:status-text (str "Removed playlist \"" (:name bookmark) "\"")
-                          :failure     :success}]]]
-            [])})))
-
-(rf/reg-event-fx
- ::clear-bookmark-lists
- (fn [{:keys [db]} _]
-   {:fx (apply merge
-               (map (fn [b] [:dispatch [::remove-bookmark-list (:id b)]]) (rest (:bookmarks db)))
-               (conj
-                (map (fn [s] [:dispatch [::remove-from-likes s]]) (:items (first (:bookmarks db))))
-                [:dispatch [::add-notification
-                            {:status-text "Cleared all playlists"
-                             :failure     :success}]]))}))
-
-(rf/reg-event-fx
- ::add-to-likes
- [(rf/inject-cofx :store)]
- (fn [{:keys [db store]} [_ bookmark notify?]]
-   (when-not (some #(= (:url %) (:url bookmark)) (-> db :bookmarks first :items))
-     (let [updated-db (update-in db [:bookmarks 0 :items] #(into [] (conj (into [] %1) %2))
-                                 (assoc bookmark :bookmark-id (-> db :bookmarks first :id)))]
-       {:db    updated-db
-        :store (assoc store :bookmarks (:bookmarks updated-db))
-        :fx    (if notify?
-                 [[:dispatch [::add-notification {:status-text "Added to favorites" :failure :success}]]]
-                 [])}))))
-
-(rf/reg-event-fx
- ::remove-from-likes
- [(rf/inject-cofx :store)]
- (fn [{:keys [db store]} [_ bookmark notify?]]
-   (let [updated-db (update-in db [:bookmarks 0 :items] #(remove (fn [item] (= (:url item) (:url bookmark))) %))]
-     {:db updated-db
-      :store (assoc store :bookmarks (:bookmarks updated-db))
-      :fx (if notify?
-            [[:dispatch [::add-notification {:status-text "Removed from favorites" :failure :success}]]]
-            [])})))
-
-(rf/reg-event-fx
- ::add-related-streams-to-bookmark-list
- (fn [_ [_ bookmark related-streams]]
-   {:fx (conj (map (fn [s] [:dispatch [::add-to-bookmark-list bookmark s]]) related-streams)
-              [:dispatch [::add-notification
-                          {:status-text (str "Added " (count related-streams)
-                                             " items to playlist \""
-                                             (:name bookmark) "\"")
-                           :failure     :success}]])}))
-
-(rf/reg-event-fx
- ::add-to-bookmark-list
- [(rf/inject-cofx :store)]
- (fn [{:keys [db store]} [_ bookmark item notify?]]
-   (let [bookmark-list (first (filter #(= (:id %) (:id bookmark)) (:bookmarks db)))
-         pos           (.indexOf (:bookmarks db) bookmark-list)
-         updated-db    (if (some #(= (:url %) (:url item)) (:items bookmark-list))
-                         db
-                         (update-in db [:bookmarks pos :items] #(into [] (conj (into [] %1) %2))
-                                    (assoc item :bookmark-id (:id bookmark))))]
-     {:db    updated-db
-      :store (assoc store :bookmarks (:bookmarks updated-db))
-      :fx    (conj
-              [[:dispatch [::close-modal]]]
-              (when notify?
-                [:dispatch [::add-notification {:status-text (str "Added to playlist \"" (:name bookmark-list) "\"")
-                                                :failure     :success}]]))})))
-
-(rf/reg-event-fx
- ::remove-from-bookmark-list
- [(rf/inject-cofx :store)]
- (fn [{:keys [db store]} [_ bookmark]]
-   (let [bookmark-list (first (filter #(= (:id %) (:bookmark-id bookmark)) (:bookmarks db)))
-         pos           (.indexOf (:bookmarks db) bookmark-list)
-         updated-db    (update-in db [:bookmarks pos :items] #(remove (fn [item] (= (:url item) (:url bookmark))) %))]
-     {:db    updated-db
-      :store (assoc store :bookmarks (:bookmarks updated-db))
-      :fx    [[:dispatch [::add-notification {:status-text (str "Removed from playlist \"" (:name bookmark-list) "\"")
-                                              :failure     :success}]]]})))
-
-(rf/reg-event-db
- ::load-services
- (fn [db [_ res]]
-   (assoc db :services (js->clj res :keywordize-keys true))))
-
-(rf/reg-event-fx
- ::set-service-styles
- (fn [{:keys [db]} [_ res]]
-   {:db db
-    :fx [[:dispatch [::change-service-id (:service-id res)]]
-         [:dispatch [::get-kiosks (:service-id res)]]]}))
-
-(rf/reg-event-fx
- ::get-services
- (fn [{:keys [db]} _]
-   (api/get-request "/services" [::load-services] [::bad-response])))
-
-(rf/reg-event-db
- ::load-comments
- (fn [db [_ res]]
-   (-> db
-       (assoc-in [:stream :comments-page] (js->clj res :keywordize-keys true))
-       (assoc-in [:stream :show-comments-loading] false))))
-
-(rf/reg-event-fx
- ::get-comments
- (fn [{:keys [db]} [_ url]]
-   (assoc
-    (api/get-request (str "/comments/" (js/encodeURIComponent url))
-                     [::load-comments] [::bad-response])
-    :db (-> db
-            (assoc-in [:stream :show-comments-loading] true)
-            (assoc-in [:stream :show-comments] true)))))
-
-(rf/reg-event-db
- ::toggle-stream-layout
- (fn [db [_ layout]]
-   (assoc-in db [:stream layout] (not (-> db :stream layout)))))
-
-(rf/reg-event-db
- ::toggle-comment-replies
- (fn [db [_ comment-id]]
-   (update-in db [:stream :comments-page :comments]
-              (fn [comments]
-                (map #(if (= (:id %) comment-id)
-                        (assoc % :show-replies (not (:show-replies %)))
-                        %)
-                     comments)))))
-
-(rf/reg-event-db
- ::load-paginated-comments
- (fn [db [_ res]]
-   (-> db
-       (update-in [:stream :comments-page :comments] #(apply conj %1 %2)
-                  (:comments (js->clj res :keywordize-keys true)))
-       (assoc-in [:stream :comments-page :next-page]
-                 (:next-page (js->clj res :keywordize-keys true)))
-       (assoc :show-pagination-loading false))))
-
-(rf/reg-event-fx
- ::comments-pagination
- (fn [{:keys [db]} [_ url next-page-url]]
-   (if (empty? next-page-url)
-     {:db (assoc db :show-pagination-loading false)}
-     (assoc
-      (api/get-request (str "/comments/" (js/encodeURIComponent url))
-                       [::load-paginated-comments] [::bad-response]
-                       {:nextPage (js/encodeURIComponent next-page-url)})
-      :db (assoc db :show-pagination-loading true)))))
-
-(rf/reg-event-db
- ::load-kiosks
- (fn [db [_ res]]
-   (assoc db :kiosks (js->clj res :keywordize-keys true))))
-
-(rf/reg-event-fx
- ::get-kiosks
- (fn [{:keys [db]} [_ id]]
-   (api/get-request (str "/services/" id "/kiosks")
-                    [::load-kiosks] [::bad-response])))
-
-(rf/reg-event-fx
- ::load-kiosk
- (fn [{:keys [db]} [_ res]]
-   (let [kiosk-res (js->clj res :keywordize-keys true)]
-     {:db (assoc db :kiosk kiosk-res
-                 :show-page-loading false)
-      :fx [[:dispatch [::set-service-styles kiosk-res]]
-           [::document-title! (:id kiosk-res)]]})))
-
-(rf/reg-event-fx
- ::get-default-kiosk-page
- (fn [{:keys [db]} [_ service-id]]
-   (let [default-kiosk-id (when (= (js/parseInt service-id)
-                                   (-> db :settings :default-service :service-id))
-                            (-> db :settings :default-service :default-kiosk))]
-     (if default-kiosk-id
-       {:fx [[:dispatch [::get-kiosk-page service-id default-kiosk-id]]]}
-       (assoc
-        (api/get-request (str "/services/" service-id "/default-kiosk")
-                         [::load-kiosk] [::bad-response])
-        :db (assoc db :show-page-loading true))))))
-
-(rf/reg-event-fx
- ::get-kiosk-page
- (fn [{:keys [db]} [_ service-id kiosk-id]]
-   (if kiosk-id
-     (assoc
-      (api/get-request (str "/services/" service-id "/kiosks/"
-                            (js/encodeURIComponent kiosk-id))
-                       [::load-kiosk] [::bad-response])
-      :db (assoc db :show-page-loading true))
-     {:fx [[:dispatch [::get-default-kiosk-page service-id]]]})))
-
-(rf/reg-event-fx
- ::change-service-kiosk
- (fn [{:keys [db]} [_ service-id]]
-   {:fx [[:dispatch [::change-service-id service-id]]
-         [:dispatch
-          [::navigate {:name :tubo.routes/kiosk
-                       :params {}
-                       :query  {:serviceId service-id}}]]]}))
-
-(rf/reg-event-db
- ::load-paginated-kiosk-results
- (fn [db [_ res]]
-   (-> db
-       (update-in [:kiosk :related-streams] #(apply conj %1 %2)
-                  (:related-streams (js->clj res :keywordize-keys true)))
-       (assoc-in [:kiosk :next-page]
-                 (:next-page (js->clj res :keywordize-keys true)))
-       (assoc :show-pagination-loading false))))
-
-(rf/reg-event-fx
- ::kiosk-pagination
- (fn [{:keys [db]} [_ service-id kiosk-id next-page-url]]
-   (if (empty? next-page-url)
-     {:db (assoc db :show-pagination-loading false)}
-     (assoc
-      (api/get-request
-       (str "/services/" service-id "/kiosks/"
-            (js/encodeURIComponent kiosk-id))
-       [::load-paginated-kiosk-results] [::bad-response]
-       {:nextPage (js/encodeURIComponent next-page-url)})
-      :db (assoc db :show-pagination-loading true)))))
-
-(rf/reg-event-fx
- ::load-homepage
+ :load-homepage
  (fn [{:keys [db]} [_ res]]
    (let [updated-db (assoc db :services (js->clj res :keywordize-keys true))
          service-id (:id (first
                           (filter #(= (-> db :settings :default-service :id)
                                       (-> % :info :name))
                                   (:services updated-db))))]
-     {:fx [[:dispatch [::get-default-kiosk-page service-id]]
-           [:dispatch [::change-service-id service-id]]]})))
-
-(rf/reg-event-fx
- ::get-homepage
- (fn [{:keys [db]} _]
-   (api/get-request "/services" [::load-homepage] [::bad-response])))
-
-(rf/reg-event-fx
- ::load-audio-player-related-streams
- (fn [{:keys [db]} [_ res]]
-   (let [stream-res (js->clj res :keywordize-keys true)]
-     {:fx [[:dispatch [::enqueue-related-streams (:related-streams stream-res)]]]})))
-
-(rf/reg-event-fx
- ::load-audio-player-stream
- [(rf/inject-cofx ::inject/sub [:player])]
- (fn [{:keys [db player]} [_ idx play? res]]
-   (let [stream-res (js->clj res :keywordize-keys true)]
-     {:db (assoc db :show-audio-player-loading false)
-      :fx (apply conj [[:dispatch [::change-media-queue-stream
-                                   (-> stream-res :audio-streams first :content)
-                                   idx]]]
-                 (when play?
-                   [[::player-src {:player      player
-                                   :src         (-> stream-res :audio-streams first :content)
-                                   :current-pos (:media-queue-pos db)}]
-                    [::stream-metadata {:title   (:name stream-res)
-                                        :artist  (:uploader-name stream-res)
-                                        :artwork [{:src (:thumbnail-url stream-res)}]}]
-                    [::media-session {:current-pos (:media-queue-pos db) :player player}]]))})))
-
-(rf/reg-event-fx
- ::load-stream-page
- (fn [{:keys [db]} [_ res]]
-   (let [stream-res (js->clj res :keywordize-keys true)]
-     {:db (assoc db :stream stream-res
-                 :show-page-loading false)
-      :fx [(when (and (-> db :settings :show-comments))
-             [:dispatch [::get-comments (:url stream-res)]])
-           [:dispatch [::set-service-styles stream-res]]
-           [::document-title! (:name stream-res)]]})))
-
-(rf/reg-event-fx
- ::fetch-stream-page
- (fn [{:keys [db]} [_ uri]]
-   (api/get-request (str "/streams/" (js/encodeURIComponent uri))
-                    [::load-stream-page] [::bad-response])))
-
-(rf/reg-event-fx
- ::audio-player-stream-failure
- (fn [{:keys [db]} [_ play? res]]
-   {:db (assoc db
-               :show-audio-player-loading false
-               :player-ready true)
-    :fx [[:dispatch [::bad-response res]]
-         (when play?
-           (if (> (-> db :media-queue count) 1)
-             [:dispatch [::change-media-queue-pos (-> db :media-queue-pos inc)]]
-             [:dispatch [::dispose-audio-player]]))]}))
-
-(rf/reg-event-fx
- ::fetch-audio-player-related-streams
- (fn [{:keys [db]} [_ uri]]
-   (assoc
-    (api/get-request (str "/streams/" (js/encodeURIComponent uri))
-                     [::load-audio-player-related-streams] [::bad-response])
-    :db (assoc db :show-audio-player-loading true))))
-
-(rf/reg-event-fx
- ::fetch-audio-player-stream
- (fn [{:keys [db]} [_ uri idx play?]]
-   (assoc
-    (api/get-request (str "/streams/" (js/encodeURIComponent uri))
-                     [::load-audio-player-stream idx play?]
-                     [::audio-player-stream-failure play?])
-    :db (assoc db :show-audio-player-loading true))))
-
-(rf/reg-event-fx
- ::get-stream-page
- (fn [{:keys [db]} [_ uri]]
-   (assoc
-    (api/get-request (str "/streams/" (js/encodeURIComponent uri))
-                     [::load-stream-page] [::bad-response])
-    :db (assoc db :show-page-loading true))))
-
-(rf/reg-event-fx
- ::load-channel
- (fn [{:keys [db]} [_ res]]
-   (let [channel-res (js->clj res :keywordize-keys true)]
-     {:db (assoc db :channel channel-res
-                 :show-page-loading false)
-      :fx [[:dispatch [::set-service-styles channel-res]]
-           [::document-title! (:name channel-res)]]})))
-
-(rf/reg-event-fx
- ::get-channel-page
- (fn [{:keys [db]} [_ uri]]
-   (assoc
-    (api/get-request
-     (str "/channels/" (js/encodeURIComponent uri))
-     [::load-channel] [::bad-response])
-    :db (assoc db :show-page-loading true))))
-
-(rf/reg-event-fx
- ::load-playlist
- (fn [{:keys [db]} [_ res]]
-   (let [playlist-res (js->clj res :keywordize-keys true)]
-     {:db (assoc db :playlist playlist-res
-                 :show-page-loading false)
-      :fx [[:dispatch [::set-service-styles playlist-res]]
-           [::document-title! (:name playlist-res)]]})))
-
-(rf/reg-event-fx
- ::get-playlist-page
- (fn [{:keys [db]} [_ uri]]
-   (assoc
-    (api/get-request (str "/playlists/" (js/encodeURIComponent uri))
-                     [::load-playlist] [::bad-response])
-    :db (assoc db :show-page-loading true))))
-
-(rf/reg-event-fx
- ::load-search-results
- (fn [{:keys [db]} [_ res]]
-   (let [search-res (js->clj res :keywordize-keys true)]
-     {:db (assoc db :search-results search-res
-                 :show-page-loading false)
-      :fx [[:dispatch [::set-service-styles search-res]]]})))
-
-(rf/reg-event-fx
- ::get-search-page
- (fn [{:keys [db]} [_ service-id query]]
-   (assoc
-    (api/get-request (str "/services/" service-id "/search")
-                     [::load-search-results] [::bad-response]
-                     {:q query})
-    :db (assoc db :show-page-loading true
-               :show-search-form true)
-    :fx [[::document-title! (str "Search for \"" query "\"")]])))
-
-(rf/reg-event-fx
- ::change-setting
- [(rf/inject-cofx :store)]
- (fn [{:keys [db store]} [_ key val]]
-   {:db    (assoc-in db [:settings key] val)
-    :store (assoc store key val)}))
+     {:fx [[:dispatch [:kiosks/fetch-default-page service-id]]
+           [:dispatch [:services/change-id service-id]]]})))
 
 (rf/reg-event-fx
- ::load-settings-kiosks
- [(rf/inject-cofx :store)]
- (fn [{:keys [db store]} [_ service-name service-id res]]
-   (let [kiosks-res    (js->clj res :keywordize-keys true)
-         default-service-kiosk (-> db :settings :default-service :default-kiosk)
-         default-kiosk (if (some #(= % default-service-kiosk) (:available-kiosks kiosks-res))
-                         default-service-kiosk
-                         (:default-kiosk kiosks-res))]
-     {:db    (update-in db [:settings :default-service] assoc
-                        :id service-name
-                        :service-id service-id
-                        :available-kiosks (:available-kiosks kiosks-res)
-                        :default-kiosk default-kiosk)
-      :store (update-in store [:default-service] assoc
-                        :id service-name
-                        :service-id service-id
-                        :available-kiosks (:available-kiosks kiosks-res)
-                        :default-kiosk default-kiosk)})))
-
-(rf/reg-event-fx
- ::change-service-setting
- [(rf/inject-cofx :store)]
- (fn [{:keys [db store]} [_ val]]
-   (let [service-id (-> (filter #(= val (-> % :info :name)) (:services db))
-                        first
-                        :id)]
-     (api/get-request (str "/services/" service-id "/kiosks")
-                      [::load-settings-kiosks val service-id] [::bad-response]))))
-
-(rf/reg-event-fx
- ::change-kiosk-setting
- [(rf/inject-cofx :store)]
- (fn [{:keys [db store]} [_ val]]
-   {:db    (assoc-in db [:settings :default-service :default-kiosk] val)
-    :store (assoc-in store [:default-service :default-kiosk] val)}))
-
-(rf/reg-event-fx
- ::get-settings-page
+ :fetch-homepage
  (fn [{:keys [db]} _]
-   (let [id (-> db :settings :default-service :id)
-         service-id (-> db :settings :default-service :service-id)]
-     (assoc
-      (api/get-request (str "/services/" service-id "/kiosks")
-                       [::load-settings-kiosks id service-id] [::bad-response])
-      ::document-title! "Settings"))))
-
-(rf/reg-event-fx
- ::get-bookmarks-page
- (fn [_]
-   {::document-title! "Bookmarks"}))
-
-(rf/reg-event-fx
- ::get-bookmark-page
- (fn [{:keys [db]} [_ playlist-id]]
-   (let [playlist (first (filter #(= (:id %) playlist-id) (:bookmarks db)))]
-     {::document-title! (:name playlist)})))
+   {:fx [[:dispatch [:services/fetch-all [:load-homepage] [:bad-response]]]]}))
diff --git a/src/frontend/tubo/kiosks/events.cljs b/src/frontend/tubo/kiosks/events.cljs
new file mode 100644
index 0000000..c85fc51
--- /dev/null
+++ b/src/frontend/tubo/kiosks/events.cljs
@@ -0,0 +1,87 @@
+(ns tubo.kiosks.events
+  (:require
+   [re-frame.core :as rf]
+   [tubo.api :as api]))
+
+(rf/reg-event-db
+ :kiosks/load
+ (fn [db [_ res]]
+   (assoc db :kiosks (js->clj res :keywordize-keys true))))
+
+(rf/reg-event-fx
+ :kiosks/fetch
+ (fn [{:keys [db]} [_ service-id kiosk-id on-success on-error params]]
+   (api/get-request (str "/services/" service-id "/kiosks/"
+                         (js/encodeURIComponent kiosk-id))
+                    on-success on-error params)))
+
+(rf/reg-event-fx
+ :kiosks/fetch-default
+ (fn [{:keys [db]} [_ service-id on-success on-error]]
+   (api/get-request (str "/services/" service-id "/default-kiosk")
+                    on-success on-error)))
+
+(rf/reg-event-fx
+ :kiosks/fetch-all
+ (fn [{:keys [db]} [_ id on-success on-error]]
+   (api/get-request (str "/services/" id "/kiosks")
+                    on-success on-error)))
+
+(rf/reg-event-fx
+ :kiosks/load-page
+ (fn [{:keys [db]} [_ res]]
+   (let [kiosk-res (js->clj res :keywordize-keys true)]
+     {:db (assoc db :kiosk kiosk-res
+                 :show-page-loading false)
+      :fx [[:dispatch [:services/fetch kiosk-res]]
+           [:document-title (:id kiosk-res)]]})))
+
+(rf/reg-event-fx
+ :kiosks/fetch-page
+ (fn [{:keys [db]} [_ service-id kiosk-id]]
+   {:db (assoc db :show-page-loading true)
+    :fx [[:dispatch (if kiosk-id
+                      [:kiosks/fetch service-id kiosk-id
+                       [:kiosks/load-page] [:bad-response]]
+                      [:kiosks/fetch-default-page service-id])]]}))
+
+(rf/reg-event-fx
+ :kiosks/fetch-default-page
+ (fn [{:keys [db]} [_ service-id]]
+   (let [default-kiosk-id
+         (when (= (js/parseInt service-id)
+                  (-> db :settings :default-service :service-id))
+           (-> db :settings :default-service :default-kiosk))]
+     {:fx [[:dispatch (if default-kiosk-id
+                        [:kiosks/fetch-page service-id default-kiosk-id]
+                        [:kiosks/fetch-default service-id
+                         [:kiosks/load-page] [:bad-response]])]]})))
+
+(rf/reg-event-fx
+ :kiosks/change-page
+ (fn [{:keys [db]} [_ service-id]]
+   {:fx [[:dispatch [:services/change-id service-id]]
+         [:dispatch
+          [:navigate {:name   :kiosk-page
+                      :params {}
+                      :query  {:serviceId service-id}}]]]}))
+
+(rf/reg-event-db
+ :kiosks/load-paginated
+ (fn [db [_ res]]
+   (-> db
+       (update-in [:kiosk :related-streams] #(into %1 %2)
+                  (:related-streams (js->clj res :keywordize-keys true)))
+       (assoc-in [:kiosk :next-page]
+                 (:next-page (js->clj res :keywordize-keys true)))
+       (assoc :show-pagination-loading false))))
+
+(rf/reg-event-fx
+ :kiosks/fetch-paginated
+ (fn [{:keys [db]} [_ service-id kiosk-id next-page-url]]
+   (if (empty? next-page-url)
+     {:db (assoc db :show-pagination-loading false)}
+     {:db (assoc db :show-pagination-loading true)
+      :fx [[:dispatch [:kiosks/fetch service-id kiosk-id
+                       [:kiosks/load-paginated] [:bad-response]
+                       {:nextPage (js/encodeURIComponent next-page-url)}]]]})))
diff --git a/src/frontend/tubo/kiosks/subs.cljs b/src/frontend/tubo/kiosks/subs.cljs
new file mode 100644
index 0000000..715ab1e
--- /dev/null
+++ b/src/frontend/tubo/kiosks/subs.cljs
@@ -0,0 +1,13 @@
+(ns tubo.kiosks.subs
+  (:require
+   [re-frame.core :as rf]))
+
+(rf/reg-sub
+ :kiosks
+ (fn [db _]
+   (:kiosks db)))
+
+(rf/reg-sub
+ :kiosk
+ (fn [db _]
+   (:kiosk db)))
diff --git a/src/frontend/tubo/kiosks/views.cljs b/src/frontend/tubo/kiosks/views.cljs
new file mode 100644
index 0000000..17e0e76
--- /dev/null
+++ b/src/frontend/tubo/kiosks/views.cljs
@@ -0,0 +1,43 @@
+(ns tubo.kiosks.views
+  (:require
+   [re-frame.core :as rf]
+   [reitit.frontend.easy :as rfe]
+   [tubo.components.items :as items]
+   [tubo.components.layout :as layout]))
+
+(defn kiosk-active?
+  [& {:keys [kiosk kiosk-id service-id default-service default-kiosk path]}]
+  (or (and (= kiosk-id kiosk))
+      (and (= path "/kiosk")
+           (not kiosk-id)
+           (not= (js/parseInt service-id)
+                 (:service-id default-service))
+           (= default-kiosk kiosk))
+      (and (or (= path "/") (= path "/kiosk"))
+           (not kiosk-id)
+           (= (:default-kiosk default-service) kiosk))))
+
+(defn kiosks-menu
+  [& {:keys [kiosks service-id] :as kiosk-args}]
+  [:ul.flex.items-center.px-4.text-white
+   (for [kiosk kiosks]
+     [:li.px-3 {:key kiosk}
+      [:a {:href  (rfe/href :kiosk-page nil {:serviceId service-id
+                                             :kioskId   kiosk})
+           :class (when (kiosk-active? (assoc kiosk-args :kiosk kiosk))
+                    :font-bold)}
+       kiosk]])])
+
+(defn kiosk
+  [{{: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])
+        service-id          (or @(rf/subscribe [:service-id]) serviceId)
+        scrolled-to-bottom? @(rf/subscribe [:scrolled-to-bottom])]
+    (when scrolled-to-bottom?
+      (rf/dispatch [:kiosks/fetch-paginated service-id id next-page-url]))
+    [layout/content-container
+     [layout/content-header id]
+     [items/related-streams related-streams next-page-url]]))
diff --git a/src/frontend/tubo/modals/events.cljs b/src/frontend/tubo/modals/events.cljs
new file mode 100644
index 0000000..4a88a5b
--- /dev/null
+++ b/src/frontend/tubo/modals/events.cljs
@@ -0,0 +1,36 @@
+(ns tubo.modals.events
+  (:require
+   [nano-id.core :refer [nano-id]]
+   [re-frame.core :as rf]))
+
+(rf/reg-event-db
+ :modals/add
+ (fn [db [_ data]]
+   (update db :modals #(into [] (conj (into [] %1) %2)) data)))
+
+(rf/reg-event-db
+ :modals/delete
+ (fn [db [_ id]]
+   (update db :modals #(remove (fn [modal] (= (:id modal) id)) %))))
+
+(rf/reg-event-fx
+ :modals/hide
+ (fn [{:keys [db]} _]
+   {:db (update db :modals
+                #(map-indexed (fn [i modal]
+                                (if (= i (- (count %) 1))
+                                  (assoc modal :show? false :child nil)))
+                              %))
+    :body-overflow false}))
+
+(rf/reg-event-fx
+ :modals/close
+ (fn [{:keys [db]} _]
+   {:fx [[:dispatch [:modals/delete (-> (:modals db) last :id)]]]
+    :body-overflow false}))
+
+(rf/reg-event-fx
+ :modals/open
+ (fn [_ [_ child]]
+   {:fx            [[:dispatch [:modals/add {:show? true :child child :id (nano-id)}]]]
+    :body-overflow true}))
diff --git a/src/frontend/tubo/modals/subs.cljs b/src/frontend/tubo/modals/subs.cljs
new file mode 100644
index 0000000..ea43f63
--- /dev/null
+++ b/src/frontend/tubo/modals/subs.cljs
@@ -0,0 +1,8 @@
+(ns tubo.modals.subs
+  (:require
+   [re-frame.core :as rf]))
+
+(rf/reg-sub
+ :modals
+ (fn [db _]
+   (:modals db)))
diff --git a/src/frontend/tubo/modals/views.cljs b/src/frontend/tubo/modals/views.cljs
new file mode 100644
index 0000000..e4c3aef
--- /dev/null
+++ b/src/frontend/tubo/modals/views.cljs
@@ -0,0 +1,34 @@
+(ns tubo.modals.views
+  (:require
+   [re-frame.core :as rf]
+   [tubo.components.layout :as layout]))
+
+(defn modal-content
+  [title body & extra-buttons]
+  [:div.bg-white.dark:bg-neutral-900.max-h-full.flex.flex-col.flex-auto.shrink-0.gap-y-5.border.border-neutral-300.dark:border-stone-700.rounded.p-5.z-20
+   [:div.flex.justify-between.shrink-0
+    [:h1.text-xl.font-semibold title]
+    [:button {:on-click #(rf/dispatch [:modals/close])}
+     [:i.fa-solid.fa-close]]]
+   [:div.flex-auto.overflow-y-auto body]
+   [:div.flex.justify-end.gap-x-3.shrink-0
+    (if extra-buttons
+      (map-indexed #(with-meta %2 {:key %1}) extra-buttons)
+      [layout/primary-button "Ok" #(rf/dispatch [:modals/close])])]])
+
+(defn modal-panel
+  [{:keys [child show?]}]
+  [:div.fixed.flex.flex-col.items-center.justify-center.w-full.z-20.top-0
+   {:class ["min-h-[100dvh]" "h-[100dvh]"]}
+   [layout/focus-overlay #(rf/dispatch [:modals/close]) show?]
+   [:div.flex.items-center.justify-center.flex-auto.shrink-0.w-full.max-h-full.p-5
+    {:class ["sm:w-3/4" "md:w-3/5" "lg:w-1/2" "xl:w-1/3"]}
+    child]])
+
+(defn modal
+  []
+  (fn []
+    (let [modals @(rf/subscribe [:modals])
+          visible-modal (last (filter :show? modals))]
+      (when visible-modal
+        [modal-panel visible-modal]))))
diff --git a/src/frontend/tubo/notifications/events.cljs b/src/frontend/tubo/notifications/events.cljs
new file mode 100644
index 0000000..2ecbf2e
--- /dev/null
+++ b/src/frontend/tubo/notifications/events.cljs
@@ -0,0 +1,28 @@
+(ns tubo.notifications.events
+  (:require
+   [re-frame.core :as rf]
+   [nano-id.core :refer [nano-id]]))
+
+(rf/reg-event-fx
+ :notifications/add
+ (fn [{:keys [db]} [_ data time]]
+   (let [id (nano-id)
+         updated-db (update db :notifications #(into [] (conj %1 %2))
+                            (assoc data :id id))]
+     {:db updated-db
+      :fx (if (false? time)
+              []
+              [[:timeout {:id    id
+                          :event [:notifications/remove id]
+                          :time  (or time 2000)}]])})))
+
+(rf/reg-event-db
+ :notifications/remove
+ (fn [db [_ id]]
+   (update db :notifications #(remove (fn [notification]
+                                        (= (:id notification) id)) %))))
+
+(rf/reg-event-db
+ :notifications/clear
+ (fn [db _]
+   (dissoc db :notifications)))
diff --git a/src/frontend/tubo/notifications/subs.cljs b/src/frontend/tubo/notifications/subs.cljs
new file mode 100644
index 0000000..f7c9460
--- /dev/null
+++ b/src/frontend/tubo/notifications/subs.cljs
@@ -0,0 +1,8 @@
+(ns tubo.notifications.subs
+  (:require
+   [re-frame.core :as rf]))
+
+(rf/reg-sub
+ :notifications
+ (fn [db _]
+   (:notifications db)))
diff --git a/src/frontend/tubo/components/notification.cljs b/src/frontend/tubo/notifications/views.cljs
index 2f03cd4..b5acf01 100644
--- a/src/frontend/tubo/components/notification.cljs
+++ b/src/frontend/tubo/notifications/views.cljs
@@ -1,19 +1,18 @@
-(ns tubo.components.notification
+(ns tubo.notifications.views
   (:require
-   [re-frame.core :as rf]
-   [tubo.events :as events]))
+   [re-frame.core :as rf]))
 
 (defn notification-content
   [{:keys [failure parse-error status status-text] :as notification}]
   (when notification
-    [:div.py-4.pl-4.pr-8.rounded.backdrop-blur.flex.flex-col.justify-center.shadow.shadow-neutral-700
-     {:class (clojure.string/join
-              "" (case failure
-                   :success ["bg-green-600/90 text-white"]
-                   :error   ["bg-red-600/90 text-white"]
-                   ["bg-neutral-300"]))}
+    [:div.flex.flex-col.justify-center.pl-4.pr-8.py-4.rounded.backdrop-blur.shadow.shadow-neutral-700
+     {:class (case failure
+               :success ["bg-green-600/90" "text-white"]
+               :error   ["bg-red-600/90" "text-white"]
+               ["bg-neutral-300"])}
      [:button.text-lg.absolute.top-1.right-2
-      {:on-click #(rf/dispatch [::events/remove-notification (:id notification)])}
+      {:on-click
+       #(rf/dispatch [:notifications/remove (:id notification)])}
       [:i.fa-solid.fa-close]]
      [:span.font-bold (str (when status (str status ": ")) status-text)]
      (when parse-error
diff --git a/src/frontend/tubo/player/events.cljs b/src/frontend/tubo/player/events.cljs
new file mode 100644
index 0000000..786cb3c
--- /dev/null
+++ b/src/frontend/tubo/player/events.cljs
@@ -0,0 +1,248 @@
+(ns tubo.player.events
+  (:require
+   [tubo.utils :as utils]
+   [goog.object :as gobj]
+   [re-frame.core :as rf]
+   [vimsical.re-frame.cofx.inject :as inject]))
+
+(rf/reg-fx
+ :volume
+ (fn [{:keys [player volume]}]
+   (when (and @player (> (.-readyState @player) 0))
+     (set! (.-volume @player) (/ volume 100)))))
+
+(rf/reg-fx
+ :mute
+ (fn [{:keys [player muted?]}]
+   (when (and @player (> (.-readyState @player) 0))
+     (set! (.-muted @player) muted?))))
+
+(rf/reg-fx
+ :src
+ (fn [{:keys [player src current-pos]}]
+   (set! (.-src @player) src)
+   (set! (.-onended @player)
+         #(rf/dispatch [:queue/change-pos (inc current-pos)]))))
+
+(rf/reg-fx
+ :current-time
+ (fn [{:keys [time player]}]
+   (set! (.-currentTime @player) time)))
+
+(rf/reg-event-fx
+ :player/seek
+ [(rf/inject-cofx ::inject/sub [:player])]
+ (fn [{:keys [db player]} [_ time]]
+   {:current-time {:time time :player player}}))
+
+(rf/reg-fx
+ :pause
+ (fn [{:keys [paused? player]}]
+   (when (and @player (> (.-readyState @player) 0))
+     (if paused?
+       (.play @player)
+       (.pause @player)))))
+
+(rf/reg-event-db
+ :player/set-paused
+ (fn [db [_ val]]
+   (assoc db :paused val)))
+
+(rf/reg-event-fx
+ :player/pause
+ [(rf/inject-cofx ::inject/sub [:player])]
+ (fn [{:keys [db player]} [_ paused?]]
+   {:pause {:paused? (not paused?)
+            :player  player}}))
+
+(rf/reg-event-fx
+ :player/stop
+ (fn [{:keys [db]}]
+   {:fx [[:dispatch [:player/pause true]]
+         [:dispatch [:player/seek 0]]]}))
+
+(rf/reg-event-fx
+ :player/start-in-background
+ [(rf/inject-cofx ::inject/sub [:player])
+  (rf/inject-cofx ::inject/sub [:elapsed-time])]
+ (fn [{:keys [db player]} _]
+   {:fx [[:dispatch [:player/set-paused true]]
+         [:dispatch [:player/pause false]]
+         [:dispatch [:player/change-volume (:volume-level db) player]]]
+    :db (assoc db :player-ready (and @player (> (.-readyState @player) 0)))}))
+
+(rf/reg-fx
+ :audio-poster-mode
+ (fn [{:keys [player options]}]
+   (.audioPosterMode
+    @player
+    (-> (filter #(= (:src %) (.src @player)) (:sources options))
+        first
+        :label
+        (clojure.string/includes? "audio-only")))))
+
+(rf/reg-fx
+ :slider-color
+ (fn [{:keys [player color]}]
+   (doseq [class [".vjs-play-progress" ".vjs-volume-level" ".vjs-slider-bar"]]
+     (set! (.. (.$ (.getChild ^videojs/VideoJsPlayer @player "ControlBar") class) -style -background) color))))
+
+(rf/reg-event-fx
+ :player/start-in-main
+ [(rf/inject-cofx ::inject/sub [:elapsed-time])]
+ (fn [{:keys [db]} [_ !player options service-id]]
+   {:fx [[:audio-poster-mode {:player !player :options options}]
+         [:slider-color {:player !player :color (utils/get-service-color service-id)}]]}))
+
+(rf/reg-fx
+ :media-session-metadata
+ (fn [metadata]
+   (when (gobj/containsKey js/navigator "mediaSession")
+     (set! (.-metadata js/navigator.mediaSession)
+           (js/MediaMetadata. (clj->js metadata))))))
+
+(rf/reg-fx
+ :media-session-handlers
+ (fn [{:keys [current-pos player stream]}]
+   (when (gobj/containsKey js/navigator "mediaSession")
+     (let [current-time (.-currentTime @player)
+           update-position
+           #(.setPositionState js/navigator.mediaSession
+                               {:duration     (.-duration @player)
+                                :playbackRate (.-playbackRate @player)
+                                :position     (.-currentTime @player)})
+           seek #(do (rf/dispatch [:seek %]) (update-position))
+           events
+           {"play"          #(.play @player)
+            "pause"         #(.pause @player)
+            "previoustrack" #(rf/dispatch [:change-queue-pos (dec current-pos)])
+            "nexttrack"     #(rf/dispatch [:change-queue-pos (inc current-pos)])
+            "seekbackward"  (fn [^js/navigator.MediaSessionActionDetails details]
+                              (seek (- current-time (or (.-seekOffset details) 10))))
+            "seekforward"   (fn [^js/navigator.MediaSessionActionDetails details]
+                              (seek (+ current-time (or (.-seekOffset details) 10))))
+            "seekto"        (fn [^js/navigator.MediaSessionActionDetails details]
+                              (seek (.-seekTime details)))
+            "stop"          #(seek 0)}]
+       (doseq [[action cb] events]
+         (.setActionHandler js/navigator.mediaSession action cb))))))
+
+(rf/reg-event-fx
+ :player/change-volume
+ [(rf/inject-cofx :store)]
+ (fn [{:keys [db store]} [_ value player]]
+   {:db     (assoc db :volume-level value)
+    :store  (assoc store :volume-level value)
+    :volume {:player player :volume value}}))
+
+(rf/reg-event-fx
+ :player/mute
+ [(rf/inject-cofx :store)]
+ (fn [{:keys [db store]} [_ value player]]
+   {:db    (assoc db :muted value)
+    :store (assoc store :muted value)
+    :mute  {:player player :muted? value}}))
+
+(rf/reg-event-fx
+ :player/loop
+ [(rf/inject-cofx :store)]
+ (fn [{:keys [db store]} _]
+   (let [loop-state (case (:loop-playback db)
+                      :stream   false
+                      :playlist :stream
+                      :playlist)]
+     {:db    (assoc db :loop-playback loop-state)
+      :store (assoc store :loop-playback loop-state)})))
+
+(rf/reg-event-fx
+ :player/dispose
+ [(rf/inject-cofx :store)]
+ (fn [{:keys [db store]} _]
+   (let [remove-entries
+         (fn [elem]
+           (-> elem
+               (update :show-background-player #(not %))
+               (assoc :player-ready false)
+               (assoc :queue [])
+               (assoc :queue-pos 0)))]
+     {:db    (remove-entries db)
+      :store (remove-entries store)
+      :fx    [[:dispatch [:player/pause true]]
+              [:dispatch [:player/seek 0]]]})))
+
+(rf/reg-event-fx
+ :player/switch-to-background
+ [(rf/inject-cofx :store)]
+ (fn [{:keys [db store]} [_ stream]]
+   (let [updated-db (update db :queue conj stream)
+         idx        (.indexOf (:queue updated-db) stream)]
+     {:db    (-> updated-db
+                 (assoc :show-background-player true))
+      :store (-> store
+                 (assoc :show-background-player true)
+                 (assoc :queue (:queue updated-db)))
+      :fx    [[:dispatch [:player/fetch-stream
+                          (:url stream) idx (= (count (:queue db)) 0)]]]})))
+
+(rf/reg-event-fx
+ :player/load-related-streams
+ (fn [{:keys [db]} [_ res]]
+   (let [{:keys [related-streams]} (js->clj res :keywordize-keys true)]
+     {:fx [[:dispatch [:queue/add-n related-streams]]]})))
+
+(rf/reg-event-fx
+ :player/load-stream
+ [(rf/inject-cofx ::inject/sub [:player])]
+ (fn [{:keys [db player]} [_ idx play? res]]
+   (let [stream-res (js->clj res :keywordize-keys true)]
+     {:db (assoc db :show-background-player-loading false)
+      :fx (apply conj [[:dispatch [:queue/change-stream-source
+                                   (-> stream-res :audio-streams first :content)
+                                   idx]]]
+                 (when play?
+                   [[:src
+                     {:player      player
+                      :src         (-> stream-res :audio-streams first :content)
+                      :current-pos (:queue-pos db)}]
+                    [:media-session-metadata
+                     {:title   (:name stream-res)
+                      :artist  (:uploader-name stream-res)
+                      :artwork [{:src (:thumbnail-url stream-res)}]}]
+                    [:media-session-handlers
+                     {:current-pos (:queue-pos db)
+                      :player player}]]))})))
+
+(rf/reg-event-fx
+ :player/bad-response
+ (fn [{:keys [db]} [_ play? res]]
+   {:db (assoc db
+               :show-background-player-loading false
+               :player-ready true)
+    :fx [[:dispatch [:bad-response res]]
+         (when play?
+           (if (> (-> db :queue count) 1)
+             [:dispatch [:queue/change-pos (-> db :queue-pos inc)]]
+             [:dispatch [:player/dispose]]))]}))
+
+(rf/reg-event-fx
+ :player/fetch-related-streams
+ (fn [{:keys [db]} [_ url]]
+   {:fx [[:dispatch [:stream/fetch url
+                     [:player/load-related-streams]] [:bad-response]]]
+    :db (assoc db :show-background-player-loading true)}))
+
+(rf/reg-event-fx
+ :player/fetch-stream
+ (fn [{:keys [db]} [_ url idx play?]]
+   {:fx [[:dispatch [:stream/fetch url
+                     [:player/load-stream idx play?]
+                     [:player/bad-response play?]]]]
+    :db (assoc db :show-background-player-loading true)}))
+
+(rf/reg-event-fx
+ :player/start-radio
+ (fn [{:keys [db]} [_ stream]]
+   {:fx [[:dispatch [:player/switch-to-background stream]]
+         (when (not= (count (:queue db)) 0)
+           [:dispatch [:queue/change-pos (count (:queue db))]])
+         [:dispatch [:player/fetch-related-streams (:url stream)]]]}))
diff --git a/src/frontend/tubo/player/subs.cljs b/src/frontend/tubo/player/subs.cljs
new file mode 100644
index 0000000..55da360
--- /dev/null
+++ b/src/frontend/tubo/player/subs.cljs
@@ -0,0 +1,52 @@
+(ns tubo.player.subs
+  (:require
+   [re-frame.core :as rf]
+   [reagent.core :as r]))
+
+(defonce !player (atom nil))
+(defonce !elapsed-time (r/atom 0))
+
+(rf/reg-sub
+ :player
+ (fn [db _]
+   !player))
+
+(rf/reg-sub
+ :player-ready
+ (fn [db _]
+   (:player-ready db)))
+
+(rf/reg-sub
+ :show-background-player
+ (fn [db _]
+   (:show-background-player db)))
+
+(rf/reg-sub
+ :show-background-player-loading
+ (fn [db _]
+   (:show-background-player-loading db)))
+
+(rf/reg-sub
+ :loop-playback
+ (fn [db _]
+   (:loop-playback db)))
+
+(rf/reg-sub
+ :paused
+ (fn [db _]
+   (:paused db)))
+
+(rf/reg-sub
+ :volume-level
+ (fn [db _]
+   (:volume-level db)))
+
+(rf/reg-sub
+ :muted
+ (fn [db _]
+   (:muted db)))
+
+(rf/reg-sub
+ :elapsed-time
+ (fn [db _]
+   !elapsed-time))
diff --git a/src/frontend/tubo/player/views.cljs b/src/frontend/tubo/player/views.cljs
new file mode 100644
index 0000000..4fc7994
--- /dev/null
+++ b/src/frontend/tubo/player/views.cljs
@@ -0,0 +1,182 @@
+(ns tubo.player.views
+  (:require
+   [re-frame.core :as rf]
+   [reagent.core :as r]
+   [reagent.dom :as rdom]
+   [reitit.frontend.easy :as rfe]
+   [tubo.bookmarks.modals :as modals]
+   [tubo.components.layout :as layout]
+   [tubo.components.player :as player]
+   [tubo.utils :as utils]
+   ["video.js" :as videojs]
+   ["videojs-mobile-ui"]
+   ["@silvermine/videojs-quality-selector" :as VideojsQualitySelector]))
+
+(defn audio
+  [!player]
+  (let [{:keys [stream]} @(rf/subscribe [:queue-stream])
+        queue-pos        @(rf/subscribe [:queue-pos])]
+    (r/create-class
+     {:component-did-mount
+      (fn [this]
+        (set! (.-onended (rdom/dom-node this))
+              #(rf/dispatch [:queue/change-pos (inc queue-pos)]))
+        (when stream
+          (set! (.-src (rdom/dom-node this)) stream)))
+      :reagent-render
+      (fn [!player]
+        (let [!elapsed-time @(rf/subscribe [:elapsed-time])
+              muted?        @(rf/subscribe [:muted])
+              volume-level  @(rf/subscribe [:volume-level])
+              loop-playback @(rf/subscribe [:loop-playback])]
+          [:audio
+           {:ref            #(reset! !player %)
+            :loop           (= loop-playback :stream)
+            :muted          muted?
+            :on-loaded-data #(rf/dispatch [:player/start-in-background])
+            :on-time-update #(reset! !elapsed-time (.-currentTime @!player))
+            :on-pause       #(rf/dispatch [:player/set-paused true])
+            :on-play        #(rf/dispatch [:player/set-paused false])}]))})))
+
+(defn stream-metadata
+  [{:keys [thumbnail-url 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})
+     name nil :classes [:h-14 :py-2 "w-[70px]"]]]
+   [:div.flex.flex-col.px-2
+    [:a.text-xs.line-clamp-1
+     {:href  (rfe/href :stream-page nil {:url url})
+      :title name}
+     name]
+    [:a.text-xs.pt-2.text-neutral-600.dark:text-neutral-300.line-clamp-1
+     {:href  (rfe/href :channel-page nil {:url uploader-url})
+      :title uploader-name}
+     uploader-name]]])
+
+(defn main-controls
+  [!player color]
+  (let [queue          @(rf/subscribe [:queue])
+        queue-pos      @(rf/subscribe [:queue-pos])
+        loading?       @(rf/subscribe [:show-background-player-loading])
+        !elapsed-time  @(rf/subscribe [:elapsed-time])
+        loop-playback  @(rf/subscribe [:loop-playback])
+        paused?        @(rf/subscribe [:paused])
+        player-ready?  @(rf/subscribe [:player-ready])]
+    [:div.flex.flex-col.items-center.ml-auto
+     [:div.flex.justify-end
+      [player/loop-button loop-playback color]
+      [player/button
+       :icon [:i.fa-solid.fa-backward-step]
+       :on-click #(rf/dispatch [:queue/change-pos (dec queue-pos)])
+       :disabled? (not (and queue (not= queue-pos 0)))]
+      [player/button
+       :icon [:i.fa-solid.fa-backward]
+       :on-click #(rf/dispatch [:player/seek (- @!elapsed-time 5)])]
+      [player/button
+       :icon (if (or (not loading?) player-ready?)
+               (if paused?
+                 [:i.fa-solid.fa-play]
+                 [:i.fa-solid.fa-pause])
+               [layout/loading-icon color "lg:text-2xl"])
+       :on-click #(rf/dispatch [:player/pause (not paused?)])
+       :show-on-mobile? true
+       :extra-classes ["lg:text-2xl"]]
+      [player/button
+       :icon [:i.fa-solid.fa-forward]
+       :on-click #(rf/dispatch [:player/seek (+ @!elapsed-time 5)])]
+      [player/button
+       :icon [:i.fa-solid.fa-forward-step]
+       :on-click #(rf/dispatch [:queue/change-pos (inc queue-pos)])
+       :disabled? (not (and queue (< (inc queue-pos) (count queue))))]]
+     [:div.hidden.lg:flex.items-center.text-sm
+      [:span.mx-2
+       (if @!elapsed-time (utils/format-duration @!elapsed-time) "--:--")]
+      [:div.w-20.lg:w-64.mx-2.flex.items-center
+       [player/time-slider !player !elapsed-time color]]
+      [:span.mx-2
+       (if player-ready? (utils/format-duration (.-duration @!player)) "--:--")]]]))
+
+(defn extra-controls
+  [!player {:keys [url uploader-url] :as stream} color]
+  (let [!menu-active? (r/atom nil)]
+    (fn []
+      (let [muted?    @(rf/subscribe [:muted])
+            volume    @(rf/subscribe [:volume-level])
+            queue     @(rf/subscribe [:queue])
+            queue-pos @(rf/subscribe [:queue-pos])
+            bookmarks @(rf/subscribe [:bookmarks])
+            liked?    (some #(= (:url %) url) (-> bookmarks first :items))
+            bookmark  #(rf/dispatch [:modals/open [modals/add-to-bookmark %]])]
+        [:div.flex.lg:justify-end.lg:flex-1
+         [player/volume-slider !player volume muted? color]
+         [player/button
+          :icon [:i.fa-solid.fa-list]
+          :on-click #(rf/dispatch [:queue/show true])
+          :show-on-mobile? true
+          :extra-classes [:!pl-4 :!pr-3]]
+         [layout/popover-menu !menu-active?
+          [{:label    (if liked? "Remove favorite" "Favorite")
+            :icon     [:i.fa-solid.fa-heart (when liked? {:style {:color color}})]
+            :on-click #(rf/dispatch [(if liked? :likes/remove :likes/add) stream])}
+           {:label    "Play radio"
+            :icon     [:i.fa-solid.fa-tower-cell]
+            :on-click #(rf/dispatch [:player/start-radio stream])}
+           {:label    "Add current to playlist"
+            :icon     [:i.fa-solid.fa-plus]
+            :on-click #(bookmark stream)}
+           {:label    "Add queue to playlist"
+            :icon     [:i.fa-solid.fa-list]
+            :on-click #(bookmark queue)}
+           {:label    "Remove from queue"
+            :icon     [:i.fa-solid.fa-trash]
+            :on-click #(rf/dispatch [:queue/remove queue-pos])}
+           {:label    "Show channel details"
+            :icon     [:i.fa-solid.fa-user]
+            :on-click #(rf/dispatch [:navigate
+                                     {:name   :channel-page
+                                      :params {}
+                                      :query  {:url uploader-url}}])}
+           {:label    "Close player"
+            :icon     [:i.fa-solid.fa-close]
+            :on-click #(rf/dispatch [:player/dispose])}]
+          :menu-styles {:bottom "30px" :top nil :right "10px"}
+          :extra-classes [:pt-1 :!pl-4 :px-3]]]))))
+
+(defn background-player
+  []
+  (let [!player      @(rf/subscribe [:player])
+        stream       @(rf/subscribe [:queue-stream])
+        show-player? @(rf/subscribe [:show-background-player])
+        show-queue?  @(rf/subscribe [:show-queue])
+        dark-theme?  @(rf/subscribe [:dark-theme])
+        color        (-> stream :service-id utils/get-service-color)
+        bg-color     (str "rgba(" (if dark-theme? "23,23,23" "255,255,255") ",0.95)")
+        bg-image     (str "linear-gradient(" bg-color "," bg-color "),url(" (:thumbnail-url stream) ")")]
+    (when show-player?
+      [:div.sticky.absolute.left-0.bottom-0.z-10.p-3.transition-all.ease-in
+       {:style
+        {:visibility          (when show-queue? "hidden")
+         :opacity             (if show-queue? 0 1)
+         :background-image    bg-image
+         :background-size     "cover"
+         :background-position "center"
+         :background-repeat   "no-repeat"}}
+       [:div.flex.items-center.justify-between
+        [audio !player]
+        [stream-metadata stream]
+        [main-controls !player color]
+        [extra-controls !player stream color]]])))
+
+(defn main-player
+  [options service-id]
+  (let [!player (atom nil)]
+    (r/create-class
+     {:component-did-mount
+      (fn [^videojs/VideoJsPlayer this]
+        (VideojsQualitySelector videojs)
+        (reset! !player (videojs (rdom/dom-node this) (clj->js options)))
+        (.on @!player "ready" #(.mobileUi ^videojs/VideoJsPlayer @!player))
+        (.on @!player "play" #(rf/dispatch [:player/start-in-main !player options service-id])))
+      :component-will-unmount #(when @!player (.dispose @!player))
+      :reagent-render         (fn [options] [:video-js.vjs-tubo])})))
diff --git a/src/frontend/tubo/playlist/events.cljs b/src/frontend/tubo/playlist/events.cljs
new file mode 100644
index 0000000..730950e
--- /dev/null
+++ b/src/frontend/tubo/playlist/events.cljs
@@ -0,0 +1,46 @@
+(ns tubo.playlist.events
+  (:require
+   [re-frame.core :as rf]
+   [tubo.api :as api]))
+
+(rf/reg-event-fx
+ :playlist/fetch
+ (fn [{:keys [db]} [_ url on-success on-error params]]
+   (api/get-request (str "/playlists/" (js/encodeURIComponent url))
+                    on-success on-error params)))
+
+(rf/reg-event-db
+ :playlist/load-paginated
+ (fn [db [_ res]]
+   (-> db
+       (update-in [:playlist :related-streams] #(apply conj %1 %2)
+                  (:related-streams (js->clj res :keywordize-keys true)))
+       (assoc-in [:playlist :next-page]
+                 (:next-page (js->clj res :keywordize-keys true)))
+       (assoc :show-pagination-loading false))))
+
+(rf/reg-event-fx
+ :playlist/fetch-paginated
+ (fn [{:keys [db]} [_ url next-page-url]]
+   (if (empty? next-page-url)
+     {:db (assoc db :show-pagination-loading false)}
+     {:fx [[:dispatch [:playlist/fetch url
+                       [:playlist/load-paginated] [:bad-response]
+                       {:nextPage (js/encodeURIComponent next-page-url)}]]]
+      :db (assoc db :show-pagination-loading true)})))
+
+(rf/reg-event-fx
+ :playlist/load-page
+ (fn [{:keys [db]} [_ res]]
+   (let [playlist-res (js->clj res :keywordize-keys true)]
+     {:db (assoc db :playlist playlist-res
+                 :show-page-loading false)
+      :fx [[:dispatch [:services/fetch playlist-res]]
+           [:document-title (:name playlist-res)]]})))
+
+(rf/reg-event-fx
+ :playlist/fetch-page
+ (fn [{:keys [db]} [_ url]]
+   {:fx [[:dispatch [:playlist/fetch url
+                     [:playlist/load-page] [:bad-response]]]]
+    :db (assoc db :show-page-loading true)}))
diff --git a/src/frontend/tubo/playlist/subs.cljs b/src/frontend/tubo/playlist/subs.cljs
new file mode 100644
index 0000000..495e86d
--- /dev/null
+++ b/src/frontend/tubo/playlist/subs.cljs
@@ -0,0 +1,8 @@
+(ns tubo.playlist.subs
+  (:require
+   [re-frame.core :as rf]))
+
+(rf/reg-sub
+ :playlist
+ (fn [db _]
+   (:playlist db)))
diff --git a/src/frontend/tubo/views/playlist.cljs b/src/frontend/tubo/playlist/views.cljs
index b11e1e6..737fab4 100644
--- a/src/frontend/tubo/views/playlist.cljs
+++ b/src/frontend/tubo/playlist/views.cljs
@@ -1,43 +1,40 @@
-(ns tubo.views.playlist

-  (:require

-   [reagent.core :as r]

-   [re-frame.core :as rf]

-   [reitit.frontend.easy :as rfe]

-   [tubo.components.items :as items]

-   [tubo.components.layout :as layout]

-   [tubo.components.modals.bookmarks :as bookmarks]

-   [tubo.events :as events]))

-

-(defn playlist

-  [{{:keys [url]} :query-params}]

-  (let [!menu-active? (r/atom nil)]

-    (fn []

-      (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)

-            scrolled-to-bottom?       @(rf/subscribe [:scrolled-to-bottom])]

-        (when scrolled-to-bottom?

-          (rf/dispatch [::events/playlist-pagination url next-page-url]))

-        [layout/content-container

-         [:div.flex.flex-col.justify-center

-          [layout/content-header name

-           (when related-streams

-             [layout/popover-menu !menu-active?

-              [{:label    "Add to queue"

-                :icon     [:i.fa-solid.fa-headphones]

-                :on-click #(rf/dispatch [::events/enqueue-related-streams related-streams])}

-               {:label    "Add to playlist"

-                :icon     [:i.fa-solid.fa-plus]

-                :on-click #(rf/dispatch [::events/add-bookmark-list-modal

-                                         [bookmarks/add-to-bookmark-list-modal related-streams]])}]])]

-          [:div.flex.items-center.justify-between.my-4.gap-x-4

-           [:div.flex.items-center

-            [layout/uploader-avatar uploader-avatar uploader-name uploader-url]

-            [:a.line-clamp-1.ml-2

-             {:href  (rfe/href :tubo.routes/channel nil {:url uploader-url})

-              :title uploader-name}

-             uploader-name]]

-           [:span.text-sm.whitespace-nowrap (str stream-count " streams")]]]

-         [items/related-streams related-streams next-page-url]]))))

+(ns tubo.playlist.views
+  (:require
+   [reagent.core :as r]
+   [re-frame.core :as rf]
+   [reitit.frontend.easy :as rfe]
+   [tubo.bookmarks.modals :as modals]
+   [tubo.components.items :as items]
+   [tubo.components.layout :as layout]))
+
+(defn playlist
+  [{{:keys [url]} :query-params}]
+  (let [!menu-active? (r/atom nil)]
+    (fn []
+      (let [{:keys [id name playlist-type thumbnail-url banner-url next-page
+                    uploader-name uploader-url related-streams
+                    stream-count]} @(rf/subscribe [:playlist])
+            next-page-url          (:url next-page)
+            scrolled-to-bottom?    @(rf/subscribe [:scrolled-to-bottom])]
+        (when scrolled-to-bottom?
+          (rf/dispatch [:playlist/fetch-paginated url next-page-url]))
+        [layout/content-container
+         [:div.flex.flex-col.justify-center
+          [layout/content-header name
+           (when related-streams
+             [layout/popover-menu !menu-active?
+              [{:label    "Add to queue"
+                :icon     [:i.fa-solid.fa-headphones]
+                :on-click #(rf/dispatch [:queue/add-n related-streams])}
+               {:label    "Add to playlist"
+                :icon     [:i.fa-solid.fa-plus]
+                :on-click #(rf/dispatch [:modals/open [modals/add-to-bookmark related-streams]])}]])]
+          [:div.flex.items-center.justify-between.my-4.gap-x-4
+           [:div.flex.items-center
+            [layout/uploader-avatar playlist]
+            [:a.line-clamp-1.ml-2
+             {:href  (rfe/href :channel-page nil {:url uploader-url})
+              :title uploader-name}
+             uploader-name]]
+           [:span.text-sm.whitespace-nowrap (str stream-count " streams")]]]
+         [items/related-streams related-streams next-page-url]]))))
diff --git a/src/frontend/tubo/queue/events.cljs b/src/frontend/tubo/queue/events.cljs
new file mode 100644
index 0000000..296dc37
--- /dev/null
+++ b/src/frontend/tubo/queue/events.cljs
@@ -0,0 +1,75 @@
+(ns tubo.queue.events
+  (:require
+   [re-frame.core :as rf]))
+
+(rf/reg-event-fx
+ :queue/show
+ (fn [{:keys [db]} [_ show?]]
+   {:db            (assoc db :show-queue show?)
+    :body-overflow show?}))
+
+(rf/reg-event-fx
+ :queue/add
+ [(rf/inject-cofx :store)]
+ (fn [{:keys [db store]} [_ stream]]
+   (let [updated-db (update db :queue conj stream)]
+     {:db    updated-db
+      :store (assoc store :queue (:queue updated-db))})))
+
+(rf/reg-event-fx
+ :queue/add-n
+ [(rf/inject-cofx :store)]
+ (fn [{:keys [db store]} [_ streams]]
+   {:db    (assoc db :show-background-player true)
+    :store (assoc store :show-background-player true)
+    :fx    (conj (map (fn [stream] [:dispatch [:queue/add stream]]) streams)
+              [:dispatch [:player/fetch-stream (-> streams first :url)
+                          (count (:queue db)) (= (count (:queue db)) 0)]])}))
+
+(rf/reg-event-fx
+ :queue/remove
+ [(rf/inject-cofx :store)]
+ (fn [{:keys [db store]} [_ pos]]
+   (let [updated-db   (update db :queue #(into (subvec % 0 pos) (subvec % (inc pos))))
+         queue-pos    (:queue-pos db)
+         queue-length (count (:queue updated-db))]
+     {:db    updated-db
+      :store (assoc store :queue (:queue updated-db))
+      :fx    (cond
+               (and (not (= queue-length 0))
+                    (or (< pos queue-pos)
+                        (= pos queue-pos)
+                        (= queue-pos queue-length)))
+               [[:dispatch [:queue/change-pos
+                            (cond
+                              (= pos queue-length) 0
+                              (= pos queue-pos)    pos
+                              :else                (dec queue-pos))]]]
+               (= (count (:queue updated-db)) 0)
+               [[:dispatch [:player/dispose]]
+                [:dispatch [:queue/show false]]]
+               :else [])})))
+
+(rf/reg-event-fx
+ :queue/change-pos
+ [(rf/inject-cofx :store)]
+ (fn [{:keys [db store]} [_ i]]
+   (let [idx    (if (< i (count (:queue db)))
+                  i
+                  (when (= (:loop-playback db) :playlist) 0))
+         stream (get (:queue db) idx)]
+     (when stream
+       {:db    (-> db
+                   (assoc :player-ready false)
+                   (assoc :queue-pos idx)
+                   (assoc-in [:queue idx :stream] ""))
+        :store (assoc store :queue-pos idx)
+        :fx    [[:dispatch [:player/fetch-stream (:url stream) idx true]]]}))))
+
+(rf/reg-event-fx
+ :queue/change-stream-source
+ [(rf/inject-cofx :store)]
+ (fn [{:keys [db store]} [_ src idx]]
+   (let [update-entry #(assoc-in % [:queue idx :stream] src)]
+     {:db    (update-entry db)
+      :store (update-entry store)})))
diff --git a/src/frontend/tubo/queue/subs.cljs b/src/frontend/tubo/queue/subs.cljs
new file mode 100644
index 0000000..f173ff7
--- /dev/null
+++ b/src/frontend/tubo/queue/subs.cljs
@@ -0,0 +1,25 @@
+(ns tubo.queue.subs
+  (:require
+   [re-frame.core :as rf]))
+
+(rf/reg-sub
+ :queue
+ (fn [db _]
+   (:queue db)))
+
+(rf/reg-sub
+ :queue-pos
+ (fn [db _]
+   (:queue-pos db)))
+
+(rf/reg-sub
+ :show-queue
+ (fn [db _]
+   (:show-queue db)))
+
+(rf/reg-sub
+ :queue-stream
+ (fn [_]
+   [(rf/subscribe [:queue]) (rf/subscribe [:queue-pos])])
+ (fn [[queue pos] _]
+   (and (not-empty queue) (< pos (count queue)) (nth queue pos))))
diff --git a/src/frontend/tubo/queue/views.cljs b/src/frontend/tubo/queue/views.cljs
new file mode 100644
index 0000000..d519da7
--- /dev/null
+++ b/src/frontend/tubo/queue/views.cljs
@@ -0,0 +1,152 @@
+(ns tubo.queue.views
+  (:require
+   [reagent.core :as r]
+   [re-frame.core :as rf]
+   [reitit.frontend.easy :as rfe]
+   [tubo.bookmarks.modals :as modals]
+   [tubo.components.items :as items]
+   [tubo.components.layout :as layout]
+   [tubo.components.player :as player]
+   [tubo.utils :as utils]))
+
+(defn item-metadata
+  [{:keys [uploader-name name service-id duration thumbnail-url]} queue-pos i]
+  [:div.flex.cursor-pointer.py-2
+   {:class    (when (= i queue-pos) ["bg-neutral-200" "dark:bg-stone-800"])
+    :on-click #(rf/dispatch [:queue/change-pos i])}
+   [:div.flex.items-center.justify-center.min-w-20.w-20.xs:min-w-28.xs:w-28
+    [:span.font-bold.text-neutral-400.text-sm
+     (if (= i queue-pos) [:i.fa-solid.fa-play] (inc i))]]
+   [:div.w-36
+    [layout/thumbnail thumbnail-url nil name duration :classes "h-16"]]
+   [:div.flex.flex-col.pl-4.pr-12.w-full
+    [:h1.line-clamp-1.w-fit {:title name} name]
+    [:div.text-neutral-600.dark:text-neutral-300.text-sm.flex.flex-col.xs:flex-row
+     [:span.line-clamp-1 {:title uploader-name} uploader-name]
+     [:span.px-2.hidden.xs:inline-block
+      {:dangerouslySetInnerHTML {:__html "&bull;"}}]
+     [:span (utils/get-service-name service-id)]]]])
+
+(defn popover
+  [{:keys [url service-id uploader-url] :as item} i menu-active? bookmarks]
+  (let [liked? (some #(= (:url %) url) (-> bookmarks first :items))]
+    [:div.absolute.right-0.top-0.min-h-full.flex.items-center
+     [layout/popover-menu menu-active?
+      [{:label    (if liked? "Remove favorite" "Favorite")
+        :icon     [:i.fa-solid.fa-heart (when liked? {:style {:color (utils/get-service-color service-id)}})]
+        :on-click #(rf/dispatch [(if liked? :likes/remove :likes/add) item])}
+       {:label    "Play radio"
+        :icon     [:i.fa-solid.fa-tower-cell]
+        :on-click #(rf/dispatch [:player/start-radio item])}
+       {:label    "Add to playlist"
+        :icon     [:i.fa-solid.fa-plus]
+        :on-click #(rf/dispatch [:modals/open [modals/add-to-bookmark item]])}
+       {:label    "Remove from queue"
+        :icon     [:i.fa-solid.fa-trash]
+        :on-click #(rf/dispatch [:queue/remove i])}
+       {:label    "Show channel details"
+        :icon     [:i.fa-solid.fa-user]
+        :on-click #(rf/dispatch [:navigate
+                                 {:name   :channel-page
+                                  :params {}
+                                  :query  {:url uploader-url}}])}]
+      :menu-styles {:right "40px"}
+      :extra-classes [:px-7 :py-2]]]))
+
+(defn queue-item
+  [item queue-pos i bookmarks]
+  (let [!menu-active? (r/atom false)]
+    (fn [item queue-pos i bookmarks]
+      [:div.relative.w-full
+       {:ref #(when (= queue-pos i) (rf/dispatch [:scroll-into-view %]))}
+       [item-metadata item queue-pos i]
+       [popover item i !menu-active? bookmarks]])))
+
+(defn queue-metadata
+  [{:keys [url name uploader-url uploader-name]}]
+  [:div.flex.flex-col.py-2
+   [:a.text-md.line-clamp-1.w-fit
+    {:href  (rfe/href :stream-page nil {:url url})
+     :title name}
+    name]
+   [:a.text-sm.pt-2.text-neutral-600.dark:text-neutral-300.line-clamp-1.w-fit
+    {:href  (rfe/href :channel-page nil {:url uploader-url})
+     :title uploader-name}
+    uploader-name]])
+
+(defn main-controls
+  [{:keys [service-id]} queue queue-pos]
+  (let [loop-playback @(rf/subscribe [:loop-playback])
+        service-color (and service-id (utils/get-service-color service-id))
+        !player       @(rf/subscribe [:player])
+        loading?       @(rf/subscribe [:show-background-player-loading])
+        player-ready? @(rf/subscribe [:player-ready])
+        paused?       @(rf/subscribe [:paused])
+        !elapsed-time @(rf/subscribe [:elapsed-time])
+        queue         @(rf/subscribe [:queue])
+        queue-pos     @(rf/subscribe [:queue-pos])]
+    [:<>
+     [:div.flex.flex-auto.py-2.w-full.items-center.text-sm
+      [:span.mr-4 (if @!elapsed-time (utils/format-duration @!elapsed-time) "--:--")]
+      [player/time-slider !player !elapsed-time service-color]
+      [:span.ml-4 (if player-ready? (utils/format-duration (.-duration @!player)) "--:--")]]
+     [:div.flex.justify-center.items-center
+      [player/loop-button loop-playback service-color true]
+      [player/button
+       :icon [:i.fa-solid.fa-backward-step]
+       :on-click #(rf/dispatch [:queue/change-pos (dec queue-pos)])
+       :disabled? (not (and queue (not= queue-pos 0)))
+       :extra-classes [:text-xl]
+       :show-on-mobile? true]
+      [player/button
+       :icon [:i.fa-solid.fa-backward]
+       :on-click #(rf/dispatch [:player/seek (- @!elapsed-time 5)])
+       :extra-classes [:text-xl]
+       :show-on-mobile? true]
+      [player/button
+       :icon (if (or (not loading?) player-ready?)
+               (if paused?
+                 [:i.fa-solid.fa-play]
+                 [:i.fa-solid.fa-pause])
+               [layout/loading-icon service-color :text-3xl])
+       :on-click #(rf/dispatch [:player/pause (not paused?)])
+       :extra-classes [:text-3xl]
+       :show-on-mobile? true]
+      [player/button
+       :icon [:i.fa-solid.fa-forward]
+       :on-click #(rf/dispatch [:player/seek (+ @!elapsed-time 5)])
+       :extra-classes [:text-xl]
+       :show-on-mobile? true]
+      [player/button
+       :icon [:i.fa-solid.fa-forward-step]
+       :on-click #(rf/dispatch [:queue/change-pos (inc queue-pos)])
+       :disabled? (not (and queue (< (inc queue-pos) (count queue))))
+       :extra-classes [:text-xl]
+       :show-on-mobile? true]
+      [player/button
+       :icon [:i.fa-solid.fa-list]
+       :on-click #(rf/dispatch [:queue/show false])
+       :show-on-mobile? true
+       :extra-classes [:pl-4 :pr-3]]]]))
+
+(defn queue
+  []
+  (let [show-queue    @(rf/subscribe [:show-queue])
+        stream        @(rf/subscribe [:queue-stream])
+        bookmarks     @(rf/subscribe [:bookmarks])
+        queue-pos     @(rf/subscribe [:queue-pos])
+        queue         @(rf/subscribe [:queue])]
+    [:div.fixed.flex.flex-col.items-center.min-w-full.w-full.z-10.backdrop-blur
+     {:class ["dark:bg-neutral-900/90" "bg-neutral-100/90"
+              "min-h-[calc(100dvh-56px)]" "h-[calc(100dvh-56px)]"
+              (when-not show-queue "hidden")
+              (if show-queue "opacity-1" "opacity-0")]}
+     [layout/focus-overlay #(rf/dispatch [:queue/show false]) show-queue true]
+     [:div.z-20.w-full.flex.flex-col.flex-auto.h-full.lg:pt-5
+      {:class ["lg:w-4/5" "xl:w-3/5"]}
+      [:div.flex.flex-col.overflow-y-auto.flex-auto.gap-y-1
+       (for [[i item] (map-indexed vector queue)]
+         ^{:key i} [queue-item item queue-pos i bookmarks])]
+      [:div.flex.flex-col.py-4.shrink-0.px-5
+       [queue-metadata stream]
+       [main-controls stream queue queue-pos]]]]))
diff --git a/src/frontend/tubo/routes.cljs b/src/frontend/tubo/routes.cljs
index 337a6d6..d721429 100644
--- a/src/frontend/tubo/routes.cljs
+++ b/src/frontend/tubo/routes.cljs
@@ -3,62 +3,61 @@
    [reitit.frontend :as ref]
    [reitit.frontend.easy :as rfe]
    [re-frame.core :as rf]
-   [tubo.events :as events]
-   [tubo.views.channel :as channel]
-   [tubo.views.kiosk :as kiosk]
-   [tubo.views.playlist :as playlist]
-   [tubo.views.bookmarks :as bookmarks]
-   [tubo.views.search :as search]
-   [tubo.views.settings :as settings]
-   [tubo.views.stream :as stream]))
+   [tubo.channel.views :as channel]
+   [tubo.kiosks.views :as kiosk]
+   [tubo.playlist.views :as playlist]
+   [tubo.bookmarks.views :as bookmarks]
+   [tubo.search.views :as search]
+   [tubo.settings.views :as settings]
+   [tubo.stream.views :as stream]))
 
 (def router
   (ref/router
-   [["/" {:view kiosk/kiosk
-          :name ::home
-          :controllers [{:start #(rf/dispatch [::events/get-homepage])}]}]
-    ["/search" {:view search/search
-                :name ::search
+   [["/" {:view        kiosk/kiosk
+          :name        :homepage
+          :controllers [{:start #(rf/dispatch [:fetch-homepage])}]}]
+    ["/search" {:view        search/search
+                :name        :search-page
                 :controllers [{:parameters {:query [:q :serviceId]}
-                               :start (fn [{{:keys [serviceId q]} :query}]
-                                        (rf/dispatch [::events/get-search-page serviceId q]))
-                               :stop #(rf/dispatch [::events/show-search-form false])}]}]
-    ["/stream" {:view stream/stream
-                :name ::stream
+                               :start      (fn [{{:keys [serviceId q]} :query}]
+                                             (rf/dispatch [:search/fetch-page serviceId q]))
+                               :stop       #(rf/dispatch [:search/show-form false])}]}]
+    ["/stream" {:view        stream/stream
+                :name        :stream-page
                 :controllers [{:parameters {:query [:url]}
-                               :start (fn [{{:keys [url]} :query}]
-                                        (rf/dispatch [::events/get-stream-page url]))}]}]
-    ["/channel" {:view channel/channel
-                 :name ::channel
+                               :start      (fn [{{:keys [url]} :query}]
+                                             (rf/dispatch [:stream/fetch-page url]))}]}]
+    ["/channel" {:view        channel/channel
+                 :name        :channel-page
                  :controllers [{:parameters {:query [:url]}
-                                :start (fn [{{:keys [url]} :query}]
-                                         (rf/dispatch [::events/get-channel-page url]))}]}]
-    ["/playlist" {:view playlist/playlist
-                  :name ::playlist
+                                :start      (fn [{{:keys [url]} :query}]
+                                              (rf/dispatch [:channel/fetch-page url]))}]}]
+    ["/playlist" {:view        playlist/playlist
+                  :name        :playlist-page
                   :controllers [{:parameters {:query [:url]}
-                                 :start (fn [{{:keys [url]} :query}]
-                                          (rf/dispatch [::events/get-playlist-page url]))}]}]
-    ["/kiosk" {:view kiosk/kiosk
-               :name ::kiosk
+                                 :start      (fn [{{:keys [url]} :query}]
+                                               (rf/dispatch [:playlist/fetch-page url]))}]}]
+    ["/kiosk" {:view        kiosk/kiosk
+               :name        :kiosk-page
                :controllers [{:parameters {:query [:kioskId :serviceId]}
-                              :start (fn [{{:keys [serviceId kioskId]} :query}]
-                                       (rf/dispatch [::events/get-kiosk-page serviceId kioskId]))}]}]
-    ["/settings" {:view settings/settings-page
-                  :name ::settings
-                  :controllers [{:start #(rf/dispatch [::events/get-settings-page])}]}]
-    ["/bookmark" {:view bookmarks/bookmark-page
-                  :name ::bookmark
+                              :start      (fn [{{:keys [serviceId kioskId]} :query}]
+                                            (rf/dispatch [:kiosks/fetch-page serviceId kioskId]))}]}]
+    ["/settings" {:view        settings/settings
+                  :name        :settings-page
+                  :controllers [{:start #(rf/dispatch [:settings/fetch-page])}]}]
+    ["/bookmark" {:view        bookmarks/bookmark
+                  :name        :bookmark-page
                   :controllers [{:parameters {:query [:id]}
-                                 :start (fn [{{:keys [id]} :query}]
-                                          (rf/dispatch [::events/get-bookmark-page id]))}]}]
-    ["/bookmarks" {:view bookmarks/bookmarks-page
-                   :name ::bookmarks
-                   :controllers [{:start #(rf/dispatch [::events/get-bookmarks-page])}]}]]))
+                                 :start      (fn [{{:keys [id]} :query}]
+                                               (rf/dispatch [:bookmark/fetch-page id]))}]}]
+    ["/bookmarks" {:view        bookmarks/bookmarks
+                   :name        :bookmarks-page
+                   :controllers [{:start #(rf/dispatch [:bookmarks/fetch-page])}]}]]))
 
 (defn on-navigate
   [new-match]
   (when new-match
-    (rf/dispatch [::events/navigated new-match])))
+    (rf/dispatch [:navigated new-match])))
 
 (defn start-routes!
   []
diff --git a/src/frontend/tubo/search/events.cljs b/src/frontend/tubo/search/events.cljs
new file mode 100644
index 0000000..e09e5b3
--- /dev/null
+++ b/src/frontend/tubo/search/events.cljs
@@ -0,0 +1,64 @@
+(ns tubo.search.events
+  (:require
+   [re-frame.core :as rf]
+   [tubo.api :as api]))
+
+(rf/reg-event-fx
+ :search/fetch
+ (fn [{:keys  [db]} [_ service-id on-success on-error params]]
+   (api/get-request (str "/services/" service-id "/search")
+                    on-success on-error params)))
+
+(rf/reg-event-fx
+ :search/load-page
+ (fn [{:keys [db]} [_ res]]
+   (let [search-res (js->clj res :keywordize-keys true)]
+     {:db (assoc db :search-results search-res
+                 :show-page-loading false)
+      :fx [[:dispatch [:services/fetch search-res]]]})))
+
+(rf/reg-event-fx
+ :search/fetch-page
+ (fn [{:keys [db]} [_ service-id query]]
+   {:db (assoc db
+               :show-page-loading true
+               :show-search-form true)
+    :fx [[:dispatch [:search/fetch service-id
+                     [:search/load-page] [:bad-response] {:q query}]]
+         [:document-title (str "Search for \"" query "\"")]]}))
+
+(rf/reg-event-db
+ :search/load-paginated
+ (fn [db [_ res]]
+   (let [search-res (js->clj res :keywordize-keys true)]
+     (if (empty? (:items search-res))
+       (-> db
+           (assoc-in [:search-results :next-page] nil)
+           (assoc :show-pagination-loading false))
+       (-> db
+           (update-in [:search-results :items] #(apply conj %1 %2)
+                      (:items search-res))
+           (assoc-in [:search-results :next-page] (:next-page search-res))
+           (assoc :show-pagination-loading false))))))
+
+(rf/reg-event-fx
+ :search/fetch-paginated
+ (fn [{:keys [db]} [_ query id next-page-url]]
+   (if (empty? next-page-url)
+     {:db (assoc db :show-pagination-loading false)}
+     {:fx [[:dispatch [:search/fetch id
+                       [:search/load-paginated] [:bad-response]
+                       {:q        query
+                        :nextPage (js/encodeURIComponent next-page-url)}]]]
+      :db (assoc db :show-pagination-loading true)})))
+
+(rf/reg-event-db
+ :search/show-form
+ (fn [db [_ show?]]
+   (when-not (= (-> db :current-match :path) "search")
+     (assoc db :show-search-form show?))))
+
+(rf/reg-event-db
+ :search/change-query
+ (fn [db [_ res]]
+   (assoc db :search-query res)))
diff --git a/src/frontend/tubo/search/subs.cljs b/src/frontend/tubo/search/subs.cljs
new file mode 100644
index 0000000..59c69f5
--- /dev/null
+++ b/src/frontend/tubo/search/subs.cljs
@@ -0,0 +1,18 @@
+(ns tubo.search.subs
+  (:require
+   [re-frame.core :as rf]))
+
+(rf/reg-sub
+ :search-results
+ (fn [db _]
+   (:search-results db)))
+
+(rf/reg-sub
+ :search-query
+ (fn [db _]
+   (:search-query db)))
+
+(rf/reg-sub
+ :show-search-form
+ (fn [db _]
+   (:show-search-form db)))
diff --git a/src/frontend/tubo/search/views.cljs b/src/frontend/tubo/search/views.cljs
new file mode 100644
index 0000000..58764f9
--- /dev/null
+++ b/src/frontend/tubo/search/views.cljs
@@ -0,0 +1,61 @@
+(ns tubo.search.views
+  (:require
+   [re-frame.core :as rf]
+   [reagent.core :as r]
+   [reitit.frontend.easy :as rfe]
+   [tubo.components.items :as items]
+   [tubo.components.layout :as layout]))
+
+(defn search-form []
+  (let [!query (r/atom "")
+        !input (r/atom nil)]
+    (fn []
+      (let [search-query      @(rf/subscribe [:search-query])
+            show-search-form? @(rf/subscribe [:show-search-form])
+            service-id        @(rf/subscribe [:service-id])]
+        [:form.relative.flex.items-center.text-white.ml-4
+         {:class (when-not show-search-form? "hidden")
+          :on-submit #(do (.preventDefault %)
+                          (when-not (empty? @!query)
+                            (rf/dispatch [:navigate
+                                          {:name   :search-page
+                                           :params {}
+                                           :query  {:q         search-query
+                                                    :serviceId service-id}}])))}
+         [:div.flex
+          [:button.mx-2
+           {:on-click #(rf/dispatch [:search/show-form false]) :type "button"}
+           [:i.fa-solid.fa-arrow-left]]
+          [:input.w-full.sm:w-96.bg-transparent.py-2.pl-0.pr-6.mx-2.border-none.focus:ring-transparent.placeholder-white
+           {:type          "text"
+            :ref           #(do (reset! !input %)
+                                (when %
+                                  (.focus %)))
+            :default-value @!query
+            :on-change     #(let [input (.. % -target -value)]
+                              (when-not (empty? input)
+                                (rf/dispatch [:search/change-query input]))
+                              (reset! !query input))
+            :placeholder   "Search"}]
+          [:button.mx-4 {:type "submit"} [:i.fa-solid.fa-search]]
+          [:button.mx-4.text-xs.absolute.right-8.top-3
+           {:type     "button"
+            :on-click #(when @!input
+                         (set! (.-value @!input) "")
+                         (reset! !query "")
+                         (.focus @!input))
+            :class    (when (empty? @!query) :invisible)}
+           [:i.fa-solid.fa-circle-xmark]]]]))))
+
+(defn search
+  [{{:keys [q serviceId]} :query-params}]
+  (let [{:keys [items next-page]
+         :as   search-results} @(rf/subscribe [:search-results])
+        next-page-url          (:url next-page)
+        services               @(rf/subscribe [:services])
+        service-id             (or @(rf/subscribe [:service-id]) serviceId)
+        scrolled-to-bottom?    @(rf/subscribe [:scrolled-to-bottom])]
+    (when scrolled-to-bottom?
+      (rf/dispatch [:search/fetch-paginated q service-id next-page-url]))
+    [layout/content-container
+     [items/related-streams items next-page-url]]))
diff --git a/src/frontend/tubo/services/events.cljs b/src/frontend/tubo/services/events.cljs
new file mode 100644
index 0000000..7fb1789
--- /dev/null
+++ b/src/frontend/tubo/services/events.cljs
@@ -0,0 +1,29 @@
+(ns tubo.services.events
+  (:require
+   [re-frame.core :as rf]
+   [tubo.api :as api]))
+
+(rf/reg-event-fx
+ :services/fetch
+ (fn [{:keys [db]} [_ {:keys [service-id]}]]
+   {:db db
+    :fx [[:dispatch [:services/change-id service-id]]
+         [:dispatch [:kiosks/fetch-all service-id
+                     [:kiosks/load] [:bad-response]]]]}))
+
+(rf/reg-event-fx
+ :services/change-id
+ [(rf/inject-cofx :store)]
+ (fn [{:keys [db store]} [_ service-id]]
+   {:db    (assoc db :service-id service-id)
+    :store (assoc store :service-id service-id)}))
+
+(rf/reg-event-fx
+ :services/fetch-all
+ (fn [{:keys [db]} [_ on-success on-error]]
+   (api/get-request "/services" on-success on-error)))
+
+(rf/reg-event-db
+ :services/load
+ (fn [db [_ res]]
+   (assoc db :services (js->clj res :keywordize-keys true))))
diff --git a/src/frontend/tubo/services/subs.cljs b/src/frontend/tubo/services/subs.cljs
new file mode 100644
index 0000000..84363d0
--- /dev/null
+++ b/src/frontend/tubo/services/subs.cljs
@@ -0,0 +1,28 @@
+(ns tubo.services.subs
+  (:require
+   [re-frame.core :as rf]
+   [tubo.utils :as utils]))
+
+(rf/reg-sub
+ :service-id
+ (fn [db _]
+   (:service-id db)))
+
+(rf/reg-sub
+ :service-color
+ (fn [_]
+   (rf/subscribe [:service-id]))
+ (fn [id _]
+   (and id (utils/get-service-color id))))
+
+(rf/reg-sub
+ :service-name
+ (fn [_]
+   (rf/subscribe [:service-id]))
+ (fn [id _]
+   (and id (utils/get-service-name id))))
+
+(rf/reg-sub
+ :services
+ (fn [db _]
+   (:services db)))
diff --git a/src/frontend/tubo/services/views.cljs b/src/frontend/tubo/services/views.cljs
new file mode 100644
index 0000000..b27dca0
--- /dev/null
+++ b/src/frontend/tubo/services/views.cljs
@@ -0,0 +1,20 @@
+(ns tubo.services.views
+  (:require
+   [re-frame.core :as rf]))
+
+(defn services-dropdown
+  [services service-id service-color]
+  [:div.relative.flex.flex-col.items-center-justify-center.text-white.px-2
+   {:style {:background service-color}}
+   [:div.w-full.box-border.z-10.lg:z-0
+    [:select.border-none.focus:ring-transparent.bg-blend-color-dodge.font-bold.w-full
+     {:on-change #(rf/dispatch [:kiosks/change-page (js/parseInt (.. % -target -value))])
+      :value     service-id
+      :style     {:background :transparent}}
+     (when services
+       (for [[i service] (map-indexed vector services)]
+         ^{:key i} [:option.text-white.bg-neutral-900.border-none
+                    {:value (:id service)}
+                    (-> service :info :name)]))]]
+   [:div.flex.items-center.justify-end.absolute.min-h-full.top-0.right-4.lg:right-0.z-0
+    [:i.fa-solid.fa-caret-down]]])
diff --git a/src/frontend/tubo/settings/events.cljs b/src/frontend/tubo/settings/events.cljs
new file mode 100644
index 0000000..e2a5643
--- /dev/null
+++ b/src/frontend/tubo/settings/events.cljs
@@ -0,0 +1,60 @@
+(ns tubo.settings.events
+  (:require
+   [re-frame.core :as rf]
+   [tubo.api :as api]))
+
+(rf/reg-event-fx
+ :settings/change
+ [(rf/inject-cofx :store)]
+ (fn [{:keys [db store]} [_ key val]]
+   {:db    (assoc-in db [:settings key] val)
+    :store (assoc store key val)}))
+
+(rf/reg-event-fx
+ :settings/load-kiosks
+ [(rf/inject-cofx :store)]
+ (fn [{:keys [db store]} [_ service-name service-id res]]
+   (let [kiosks-res            (js->clj res :keywordize-keys true)
+         default-service-kiosk (-> db :settings :default-service :default-kiosk)
+         default-kiosk         (if (some #(= % default-service-kiosk)
+                                         (:available-kiosks kiosks-res))
+                                 default-service-kiosk
+                                 (:default-kiosk kiosks-res))]
+     {:db    (update-in db [:settings :default-service] assoc
+                        :id service-name
+                        :service-id service-id
+                        :available-kiosks (:available-kiosks kiosks-res)
+                        :default-kiosk default-kiosk)
+      :store (update-in store [:default-service] assoc
+                        :id service-name
+                        :service-id service-id
+                        :available-kiosks (:available-kiosks kiosks-res)
+                        :default-kiosk default-kiosk)})))
+
+(rf/reg-event-fx
+ :settings/change-service
+ [(rf/inject-cofx :store)]
+ (fn [{:keys [db store]} [_ val]]
+   (let [service-id (-> (filter #(= val (-> % :info :name)) (:services db))
+                        first
+                        :id)]
+     (api/get-request (str "/services/" service-id "/kiosks")
+                      [:settings/load-kiosks val service-id]
+                      [:bad-response]))))
+
+(rf/reg-event-fx
+ :settings/change-kiosk
+ [(rf/inject-cofx :store)]
+ (fn [{:keys [db store]} [_ val]]
+   {:db    (assoc-in db [:settings :default-service :default-kiosk] val)
+    :store (assoc-in store [:default-service :default-kiosk] val)}))
+
+(rf/reg-event-fx
+ :settings/fetch-page
+ (fn [{:keys [db]} _]
+   (let [id         (-> db :settings :default-service :id)
+         service-id (-> db :settings :default-service :service-id)]
+     (assoc
+      (api/get-request (str "/services/" service-id "/kiosks")
+                       [:settings/load-kiosks id service-id] [:bad-response])
+      :document-title "Settings"))))
diff --git a/src/frontend/tubo/settings/subs.cljs b/src/frontend/tubo/settings/subs.cljs
new file mode 100644
index 0000000..d6aaadf
--- /dev/null
+++ b/src/frontend/tubo/settings/subs.cljs
@@ -0,0 +1,8 @@
+(ns tubo.settings.subs
+  (:require
+   [re-frame.core :as rf]))
+
+(rf/reg-sub
+ :settings
+ (fn [db _]
+   (:settings db)))
diff --git a/src/frontend/tubo/settings/views.cljs b/src/frontend/tubo/settings/views.cljs
new file mode 100644
index 0000000..ef1a1c5
--- /dev/null
+++ b/src/frontend/tubo/settings/views.cljs
@@ -0,0 +1,35 @@
+(ns tubo.settings.views
+  (:require
+   [re-frame.core :as rf]
+   [tubo.components.layout :as layout]))
+
+(defn boolean-input
+  [label key value]
+  [layout/boolean-input label key value
+   #(rf/dispatch [:settings/change key (not value)])])
+
+(defn select-input
+  [label key value options on-change]
+  [layout/select-input label key value options
+   (or on-change
+       #(rf/dispatch [:settings/change key (.. % -target -value)]))])
+
+(defn settings
+  []
+  (let [{:keys [theme themes show-comments show-related show-description
+                default-service]} @(rf/subscribe [:settings])
+        service-color             @(rf/subscribe [:service-color])
+        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 (..  % -target -value)])]
+      [select-input "Default kiosk" :default-service
+       (:default-kiosk default-service) (:available-kiosks default-service)
+       #(rf/dispatch [:settings/change (..  % -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]]]))
diff --git a/src/frontend/tubo/stream/events.cljs b/src/frontend/tubo/stream/events.cljs
new file mode 100644
index 0000000..77737d2
--- /dev/null
+++ b/src/frontend/tubo/stream/events.cljs
@@ -0,0 +1,32 @@
+(ns tubo.stream.events
+  (:require
+   [re-frame.core :as rf]
+   [tubo.api :as api]))
+
+(rf/reg-event-fx
+ :stream/fetch
+ (fn [{:keys [db]} [_ url on-success on-error]]
+   (api/get-request (str "/streams/" (js/encodeURIComponent url))
+                    on-success on-error)))
+
+(rf/reg-event-fx
+ :stream/load-page
+ (fn [{:keys [db]} [_ res]]
+   (let [stream-res (js->clj res :keywordize-keys true)]
+     {:db (assoc db :stream stream-res
+                 :show-page-loading false)
+      :fx [(when (and (-> db :settings :show-comments))
+             [:dispatch [:comments/fetch-page (:url stream-res)]])
+           [:dispatch [:services/fetch stream-res]]
+           [:document-title (:name stream-res)]]})))
+
+(rf/reg-event-fx
+ :stream/fetch-page
+ (fn [{:keys [db]} [_ url]]
+   {:fx [[:dispatch [:stream/fetch url [:stream/load-page] [:bad-response]]]]
+    :db (assoc db :show-page-loading true)}))
+
+(rf/reg-event-db
+ :stream/toggle-layout
+ (fn [db [_ layout]]
+   (assoc-in db [:stream layout] (not (-> db :stream layout)))))
diff --git a/src/frontend/tubo/stream/subs.cljs b/src/frontend/tubo/stream/subs.cljs
new file mode 100644
index 0000000..d7d549b
--- /dev/null
+++ b/src/frontend/tubo/stream/subs.cljs
@@ -0,0 +1,8 @@
+(ns tubo.stream.subs
+  (:require
+   [re-frame.core :as rf]))
+
+(rf/reg-sub
+ :stream
+ (fn [db _]
+   (:stream db)))
diff --git a/src/frontend/tubo/stream/views.cljs b/src/frontend/tubo/stream/views.cljs
new file mode 100644
index 0000000..83b04e6
--- /dev/null
+++ b/src/frontend/tubo/stream/views.cljs
@@ -0,0 +1,174 @@
+(ns tubo.stream.views
+  (:require
+   [reagent.core :as r]
+   [re-frame.core :as rf]
+   [reitit.frontend.easy :as rfe]
+   [tubo.bookmarks.modals :as modals]
+   [tubo.comments.views :as comments]
+   [tubo.components.items :as items]
+   [tubo.components.layout :as layout]
+   [tubo.player.views :as player]
+   [tubo.utils :as utils]))
+
+(def player-elements
+  ["PlayToggle" "ProgressControl" "VolumePanel" "CurrentTimeDisplay"
+   "TimeDivider" "DurationDisplay" "Spacer" "QualitySelector"
+   "PlaybackRateMenuButton" "FullscreenToggle"])
+
+(defn get-player-sources
+  [available-streams]
+  (reverse (map (fn [{:keys [content format resolution averageBitrate]}]
+                  {:src   content
+                   :type  "video/mp4"
+                   :label (str (or resolution "audio-only") " "
+                               format
+                               (when-not resolution
+                                 (str " " averageBitrate "kbit/s")))})
+                available-streams)))
+
+(defn player
+  [{:keys [thumbnail-url audio-streams video-streams service-id]}]
+  (let [page-loading? @(rf/subscribe [:show-page-loading])]
+    (when-not page-loading?
+      [:div.flex.flex-col.flex-auto.items-center.xl:py-6.!pb-0
+       [:div.flex.flex-col.flex-auto.w-full {:class ["xl:w-3/5"]}
+        [:div.flex.justify-center.relative
+         {:class "h-[300px] md:h-[450px] lg:h-[600px]"}
+         [player/main-player
+          {:sources       (get-player-sources (into audio-streams video-streams))
+           :poster        thumbnail-url
+           :controls      true
+           :controlBar    {:children player-elements}
+           :preload       "metadata"
+           :responsive    true
+           :fill          true
+           :playbackRates [0.5 1 1.5 2]}
+          service-id]]]])))
+
+(defn metadata-popover
+  [_]
+  (let [!menu-active? (r/atom nil)]
+    (fn [{:keys [service-id url] :as stream}]
+      (let [bookmarks @(rf/subscribe [:bookmarks])
+            liked?    (some #(= (:url %) url) (-> bookmarks first :items))]
+        [layout/popover-menu !menu-active?
+         [{:label    "Add to queue"
+           :icon     [:i.fa-solid.fa-headphones]
+           :on-click #(rf/dispatch [:player/switch-to-background stream])}
+          {:label    "Play radio"
+           :icon     [:i.fa-solid.fa-tower-cell]
+           :on-click #(rf/dispatch [:player/start-radio stream])}
+          {:label    (if liked? "Remove favorite" "Favorite")
+           :icon     (if liked?
+                       [:i.fa-solid.fa-heart
+                        {:style {:color (utils/get-service-color service-id)}}]
+                       [:i.fa-solid.fa-heart])
+           :on-click #(rf/dispatch [(if liked? :likes/remove :likes/add) stream true])}
+          {:label "Original"
+           :link  {:route url :external? true}
+           :icon  [:i.fa-solid.fa-external-link-alt]}
+          {:label    "Add to playlist"
+           :icon     [:i.fa-solid.fa-plus]
+           :on-click #(rf/dispatch [:modals/open [modals/add-to-bookmark stream]])}]]))))
+
+(defn metadata-uploader
+  [{:keys [uploader-url uploader-name subscriber-count] :as stream}]
+  [:div.flex.items-center
+   [layout/uploader-avatar stream]
+   [:div.mx-3
+    [:a.line-clamp-1.font-semibold
+     {:href  (rfe/href :channel-page nil {:url uploader-url})
+      :title uploader-name}
+     uploader-name]
+    (when subscriber-count
+      [:div.flex.my-2.items-center
+       [:i.fa-solid.fa-users.text-xs]
+       [:p.mx-2 (utils/format-quantity subscriber-count)]])]])
+
+(defn metadata-stats
+  [{:keys [view-count like-count dislike-count upload-date]}]
+  [:div.flex.flex-col.items-end.flex-auto.justify-center
+   (when view-count
+     [: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.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.sm:text-base.text-sm
+       [:i.fa-solid.fa-thumbs-down]
+       [:span.ml-2 dislike-count]])]
+   (when upload-date
+     [:div.sm:text-base.text-sm.mt-1.whitespace-nowrap
+      [:i.fa-solid.fa-calendar]
+      [:span.ml-2 (utils/format-date-string upload-date)]])])
+
+(defn metadata
+  [{:keys [name] :as stream}]
+  [:<>
+   [:div.flex.items-center.justify-between.pt-4.my-3
+    [:h1.text-lg.sm:text-2xl.font-bold.line-clamp-1 {:title name} name]
+    [metadata-popover stream]]
+   [:div.flex.justify-between.py-2.flex-nowrap
+    [metadata-uploader stream]
+    [metadata-stats stream]]])
+
+(defn description
+  [{:keys [description show-description]}]
+  (let [show? (:show-description @(rf/subscribe [:settings]))]
+    (when (and show? (not (empty? description)))
+      [layout/show-more-container show-description description
+       #(rf/dispatch [:stream/toggle-layout :show-description])])))
+
+(defn comments
+  [{:keys [comments-page show-comments show-comments-loading url] :as stream}]
+  (let [show?         (:show-comments @(rf/subscribe [:settings]))
+        service-color @(rf/subscribe [:service-color])]
+    (when (and comments-page (not (empty? (: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]))])))
+
+(defn suggested
+  [_]
+  (let [!menu-active? (r/atom nil)]
+    (fn [{:keys [related-streams show-related]}]
+      (let [show? (:show-related @(rf/subscribe [:settings]))]
+        (when (and show? (not (empty? related-streams)))
+          [layout/accordeon
+           {:label        "Suggested"
+            :on-open      #(rf/dispatch [: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])}
+                            {: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]])))))
+
+(defn stream
+  []
+  (let [stream @(rf/subscribe [:stream])]
+    [:<>
+     [player stream]
+     [layout/content-container
+      [metadata stream]
+      [description stream]
+      [comments stream]
+      [suggested stream]]]))
diff --git a/src/frontend/tubo/subs.cljs b/src/frontend/tubo/subs.cljs
index dd9ad89..2dea707 100644
--- a/src/frontend/tubo/subs.cljs
+++ b/src/frontend/tubo/subs.cljs
@@ -2,7 +2,19 @@
   (:require
    [reagent.core :as r]
    [re-frame.core :as rf]
-   [tubo.utils :as utils]))
+   [tubo.utils :as utils]
+   [tubo.bookmarks.subs]
+   [tubo.channel.subs]
+   [tubo.kiosks.subs]
+   [tubo.modals.subs]
+   [tubo.notifications.subs]
+   [tubo.player.subs]
+   [tubo.playlist.subs]
+   [tubo.queue.subs]
+   [tubo.search.subs]
+   [tubo.services.subs]
+   [tubo.settings.subs]
+   [tubo.stream.subs]))
 
 (defonce !is-window-visible
   (let [a (r/atom true)]
@@ -12,22 +24,24 @@
 
 (defonce !scroll-distance
   (let [a (r/atom 0)
-        compute-scroll-distance #(when (> (.-scrollY js/window) 0)
-                                   (reset! a (+ (.-scrollY js/window) (.-innerHeight js/window))))]
+        compute-scroll-distance
+        #(when (> (.-scrollY js/window) 0)
+           (reset! a (+ (.-scrollY js/window) (.-innerHeight js/window))))]
     (.addEventListener js/window "scroll" compute-scroll-distance)
     (.addEventListener js/window "touchmove" compute-scroll-distance)
     a))
 
 (defonce !auto-theme
   (let [theme (r/atom (when (and (.-matchMedia js/window)
-                                 (.-matches (.matchMedia js/window "(prefers-color-scheme: dark)")))
-                        :dark))]
-    (.addEventListener (.matchMedia js/window "(prefers-color-scheme: dark)") "change"
-                       #(reset! theme (if (.-matches %) :dark :light)))
+                                 (.-matches
+                                  (.matchMedia js/window
+                                               "(prefers-color-scheme: dark)")))
+                        "dark"))]
+    (.addEventListener (.matchMedia js/window "(prefers-color-scheme: dark)")
+                       "change"
+                       #(reset! theme (if (.-matches %) "dark" "light")))
     theme))
 
-(defonce !elapsed-time (r/atom 0))
-(defonce !player (atom nil))
 
 (rf/reg-sub
  :is-window-visible
@@ -40,113 +54,11 @@
    (> (+ @!scroll-distance 35) (.-scrollHeight js/document.body))))
 
 (rf/reg-sub
- :elapsed-time
- (fn [db _]
-   !elapsed-time))
-
-(rf/reg-sub
- :player
- (fn [db _]
-   !player))
-
-(rf/reg-sub
- :auto-theme
- (fn [db _]
-   @!auto-theme))
-
-(rf/reg-sub
- :player-ready
- (fn [db _]
-   (:player-ready db)))
-
-(rf/reg-sub
- :paused
- (fn [db _]
-   (:paused db)))
-
-(rf/reg-sub
- :volume-level
- (fn [db _]
-   (:volume-level db)))
-
-(rf/reg-sub
- :muted
- (fn [db _]
-   (:muted db)))
-
-(rf/reg-sub
- :http-response
- (fn [db _]
-   (:http-response db)))
-
-(rf/reg-sub
- :search-results
- (fn [db _]
-   (:search-results db)))
-
-(rf/reg-sub
- :notifications
- (fn [db _]
-   (:notifications db)))
-
-(rf/reg-sub
- :modal
- (fn [db _]
-   (:modal db)))
-
-(rf/reg-sub
- :stream
- (fn [db _]
-   (:stream db)))
-
-(rf/reg-sub
- :playlist
- (fn [db _]
-   (:playlist db)))
-
-(rf/reg-sub
- :channel
- (fn [db _]
-   (:channel db)))
-
-(rf/reg-sub
- :search-query
- (fn [db _]
-   (:search-query db)))
-
-(rf/reg-sub
- :service-id
- (fn [db _]
-   (:service-id db)))
-
-(rf/reg-sub
- :service-color
- (fn [_]
-   (rf/subscribe [:service-id]))
- (fn [id _]
-   (utils/get-service-color id)))
-
-(rf/reg-sub
- :service-name
+ :dark-theme
  (fn [_]
-   (rf/subscribe [:service-id]))
- (fn [id _]
-   (utils/get-service-name id)))
-
-(rf/reg-sub
- :services
- (fn [db _]
-   (:services db)))
-
-(rf/reg-sub
- :kiosks
- (fn [db _]
-   (:kiosks db)))
-
-(rf/reg-sub
- :kiosk
- (fn [db _]
-   (:kiosk db)))
+   (rf/subscribe [:settings]))
+ (fn [{:keys [theme]} _]
+   (or (and (= theme "auto") (= @!auto-theme "dark")) (= theme "dark"))))
 
 (rf/reg-sub
  :current-match
@@ -159,38 +71,6 @@
    (:page-scroll db)))
 
 (rf/reg-sub
- :media-queue
- (fn [db _]
-   (:media-queue db)))
-
-(rf/reg-sub
- :media-queue-pos
- (fn [db _]
-   (:media-queue-pos db)))
-
-(rf/reg-sub
- :media-queue-stream
- (fn [_]
-   [(rf/subscribe [:media-queue]) (rf/subscribe [:media-queue-pos])])
- (fn [[queue pos] _]
-   (and (not-empty queue) (< pos (count queue)) (nth queue pos))))
-
-(rf/reg-sub
- :bookmarks
- (fn [db _]
-   (:bookmarks db)))
-
-(rf/reg-sub
- :show-audio-player
- (fn [db _]
-   (:show-audio-player db)))
-
-(rf/reg-sub
- :show-audio-player-loading
- (fn [db _]
-   (:show-audio-player-loading db)))
-
-(rf/reg-sub
  :show-page-loading
  (fn [db _]
    (:show-page-loading db)))
@@ -204,23 +84,3 @@
  :show-mobile-nav
  (fn [db _]
    (:show-mobile-nav db)))
-
-(rf/reg-sub
- :show-search-form
- (fn [db _]
-   (:show-search-form db)))
-
-(rf/reg-sub
- :show-media-queue
- (fn [db _]
-   (:show-media-queue db)))
-
-(rf/reg-sub
- :settings
- (fn [db _]
-   (:settings db)))
-
-(rf/reg-sub
- :loop-playback
- (fn [db _]
-   (:loop-playback db)))
diff --git a/src/frontend/tubo/utils.cljs b/src/frontend/tubo/utils.cljs
index 643031c..58bb3e5 100644
--- a/src/frontend/tubo/utils.cljs
+++ b/src/frontend/tubo/utils.cljs
@@ -4,21 +4,23 @@
 
 (defn get-service-color
   [id]
-  (case id
-    0 "#cc0000"
-    1 "#ff7700"
-    2 "#333333"
-    3 "#F2690D"
-    4 "#629aa9"))
+  (when id
+    (case id
+      0 "#cc0000"
+      1 "#ff7700"
+      2 "#333333"
+      3 "#F2690D"
+      4 "#629aa9")))
 
 (defn get-service-name
   [id]
-  (case id
-    0 "YouTube"
-    1 "SoundCloud"
-    2 "media.ccc.de"
-    3 "PeerTube"
-    4 "Bandcamp"))
+  (when id
+    (case id
+      0 "YouTube"
+      1 "SoundCloud"
+      2 "media.ccc.de"
+      3 "PeerTube"
+      4 "Bandcamp")))
 
 (defn format-date-string
   [date]
diff --git a/src/frontend/tubo/views.cljs b/src/frontend/tubo/views.cljs
index aabd7b6..12fbe54 100644
--- a/src/frontend/tubo/views.cljs
+++ b/src/frontend/tubo/views.cljs
@@ -1,23 +1,21 @@
 (ns tubo.views
   (:require
    [re-frame.core :as rf]
-   [tubo.components.audio-player :as player]
    [tubo.components.navigation :as navigation]
-   [tubo.components.notification :as notification]
-   [tubo.components.play-queue :as queue]
-   [tubo.events :as events]))
+   [tubo.notifications.views :as notifications]
+   [tubo.player.views :as player]
+   [tubo.queue.views :as queue]))
 
 (defn app
   []
-  (let [current-match   @(rf/subscribe [:current-match])
-        auto-theme      @(rf/subscribe [:auto-theme])
-        {:keys [theme]} @(rf/subscribe [:settings])]
-    [:div {:class (when (or (and (= theme "auto") (= auto-theme :dark)) (= theme "dark")) "dark")}
-     [:div.min-h-screen.flex.flex-col.h-full.dark:text-white.bg-neutral-100.dark:bg-neutral-900.relative.font-nunito-sans
+  (let [current-match @(rf/subscribe [:current-match])
+        dark-theme?   @(rf/subscribe [:dark-theme])]
+    [:div {:class (when dark-theme? :dark)}
+     [:div.font-nunito-sans.min-h-screen.h-full.relative.flex.flex-col.dark:text-white.bg-neutral-100.dark:bg-neutral-900
       [navigation/navbar current-match]
-      [notification/notifications-panel]
+      [notifications/notifications-panel]
       [:div.flex.flex-col.flex-auto.justify-between.relative
        (when-let [view (-> current-match :data :view)]
          [view current-match])
        [queue/queue]
-       [player/player]]]]))
+       [player/background-player]]]]))
diff --git a/src/frontend/tubo/views/bookmarks.cljs b/src/frontend/tubo/views/bookmarks.cljs
deleted file mode 100644
index cf827bb..0000000
--- a/src/frontend/tubo/views/bookmarks.cljs
+++ /dev/null
@@ -1,79 +0,0 @@
-(ns tubo.views.bookmarks
-  (:require
-   [reagent.core :as r]
-   [re-frame.core :as rf]
-   [reitit.frontend.easy :as rfe]
-   [tubo.components.items :as items]
-   [tubo.components.layout :as layout]
-   [tubo.components.modal :as modal]
-   [tubo.components.modals.bookmarks :as bookmarks]
-   [tubo.events :as events]))
-
-(defn add-bookmark-modal
-  []
-  (let [!bookmark-name (r/atom "")]
-    (fn []
-      [modal/modal-content "Create New Playlist?"
-       [layout/text-input "Title" :text-input @!bookmark-name
-        #(reset! !bookmark-name (.. % -target -value)) "Playlist name"]
-       [layout/secondary-button "Cancel"
-        #(rf/dispatch [::events/close-modal])]
-       [layout/primary-button "Create Playlist"
-        #(rf/dispatch [::events/add-bookmark-list {:name @!bookmark-name} true])]])))
-
-(defn bookmarks-page
-  []
-  (let [!menu-active? (r/atom nil)]
-    (fn []
-      (let [service-color @(rf/subscribe [:service-color])
-            bookmarks     @(rf/subscribe [:bookmarks])
-            items         (map #(assoc %
-                                       :url (rfe/href :tubo.routes/bookmark nil {:id (:id %)})
-                                       :thumbnail-url (-> % :items first :thumbnail-url)
-                                       :stream-count (count (:items %))
-                                       :bookmark-id (:id %)) bookmarks)]
-        [layout/content-container
-         [layout/content-header "Bookmarks"
-          [layout/popover-menu !menu-active?
-           [{:label    "Add New"
-             :icon     [:i.fa-solid.fa-plus]
-             :on-click #(rf/dispatch [::events/open-modal [add-bookmark-modal]])}
-            [:<>
-             [:input.hidden
-              {:id        "file-selector"
-               :type      "file"
-               :multiple  "multiple"
-               :on-click  #(reset! !menu-active? true)
-               :on-change #(rf/dispatch [::events/import-bookmark-lists (.. % -target -files)])}]
-             [:label.whitespace-nowrap.cursor-pointer.w-full.h-full.absolute.right-0.top-0
-              {:for "file-selector"}]
-             [:span.text-xs.w-10.min-w-4.w-4.flex.items-center [:i.fa-solid.fa-file-import]]
-             [:span "Import"]]
-            {:label    "Export"
-             :icon     [:i.fa-solid.fa-file-export]
-             :on-click #(rf/dispatch [::events/export-bookmark-lists])}
-            {:label    "Clear All"
-             :icon     [:i.fa-solid.fa-trash]
-             :on-click #(rf/dispatch [::events/clear-bookmark-lists])}]]]
-         [items/related-streams items]]))))
-
-(defn bookmark-page
-  []
-  (let [!menu-active? (r/atom nil)]
-    (fn []
-      (let [bookmarks                    @(rf/subscribe [:bookmarks])
-            service-color                @(rf/subscribe [:service-color])
-            {{:keys [id]} :query-params} @(rf/subscribe [:current-match])
-            {:keys [items name]}         (first (filter #(= (:id %) id) bookmarks))]
-        [layout/content-container
-         [layout/content-header name
-          (when-not (empty? items)
-            [layout/popover-menu !menu-active?
-             [{:label    "Add to queue"
-               :icon     [:i.fa-solid.fa-headphones]
-               :on-click #(rf/dispatch [::events/enqueue-related-streams items])}
-              {:label    "Add to playlist"
-               :icon     [:i.fa-solid.fa-plus]
-               :on-click #(rf/dispatch [::events/add-bookmark-list-modal
-                                        [bookmarks/add-to-bookmark-list-modal items]])}]])]
-         [items/related-streams (map #(assoc % :type "stream" :bookmark-id id) items)]]))))
diff --git a/src/frontend/tubo/views/channel.cljs b/src/frontend/tubo/views/channel.cljs
deleted file mode 100644
index 3b99b52..0000000
--- a/src/frontend/tubo/views/channel.cljs
+++ /dev/null
@@ -1,47 +0,0 @@
-(ns tubo.views.channel
-  (:require
-   [reagent.core :as r]
-   [re-frame.core :as rf]
-   [tubo.components.items :as items]
-   [tubo.components.layout :as layout]
-   [tubo.components.modals.bookmarks :as bookmarks]
-   [tubo.events :as events]))
-
-(defn channel
-  [query-params]
-  (let [!menu-active? (r/atom nil)]
-    (fn [query-params]
-      (let [!show-description? (r/atom false)]
-        (fn [{{:keys [url]} :query-params}]
-          (let [{:keys [banner avatar name description subscriber-count related-streams next-page]
-                 :as   channel}     @(rf/subscribe [:channel])
-                next-page-url       (:url next-page)
-                service-color       @(rf/subscribe [:service-color])
-                scrolled-to-bottom? @(rf/subscribe [:scrolled-to-bottom])]
-            (when scrolled-to-bottom?
-              (rf/dispatch [::events/channel-pagination url next-page-url]))
-            [layout/content-container
-             (when banner
-               [:div.flex.justify-center.h-24
-                [:img.min-w-full.min-h-full.object-cover.rounded {:src banner}]])
-             [:div.flex.items-center.justify-between
-              [:div.flex.items-center.my-4.mx-2
-               [layout/uploader-avatar avatar name]
-               [:div.m-4
-                [:h1.text-2xl.line-clamp-1.font-semibold {:title name} name]
-                (when subscriber-count
-                  [:div.flex.my-2.items-center
-                   [:i.fa-solid.fa-users.text-xs]
-                   [:span.mx-2 (.toLocaleString subscriber-count)]])]]
-              (when related-streams
-                [layout/popover-menu !menu-active?
-                 [{:label    "Add to queue"
-                   :icon     [:i.fa-solid.fa-headphones]
-                   :on-click #(rf/dispatch [::events/enqueue-related-streams related-streams])}
-                  {:label    "Add to playlist"
-                   :icon     [:i.fa-solid.fa-plus]
-                   :on-click #(rf/dispatch [::events/add-bookmark-list-modal
-                                            [bookmarks/add-to-bookmark-list-modal related-streams]])}]])]
-             [layout/show-more-container @!show-description? description
-              #(reset! !show-description? (not @!show-description?))]
-             [items/related-streams related-streams next-page-url]]))))))
diff --git a/src/frontend/tubo/views/kiosk.cljs b/src/frontend/tubo/views/kiosk.cljs
deleted file mode 100644
index 7e534bf..0000000
--- a/src/frontend/tubo/views/kiosk.cljs
+++ /dev/null
@@ -1,20 +0,0 @@
-(ns tubo.views.kiosk
-  (:require
-   [re-frame.core :as rf]
-   [tubo.components.items :as items]
-   [tubo.components.layout :as layout]
-   [tubo.events :as events]))
-
-(defn kiosk
-  [{{: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])
-        service-id          (or @(rf/subscribe [:service-id]) serviceId)
-        scrolled-to-bottom? @(rf/subscribe [:scrolled-to-bottom])]
-    (when scrolled-to-bottom?
-      (rf/dispatch [::events/kiosk-pagination service-id id next-page-url]))
-    [layout/content-container
-     [layout/content-header id]
-     [items/related-streams related-streams next-page-url]]))
diff --git a/src/frontend/tubo/views/search.cljs b/src/frontend/tubo/views/search.cljs
deleted file mode 100644
index 8133e03..0000000
--- a/src/frontend/tubo/views/search.cljs
+++ /dev/null
@@ -1,20 +0,0 @@
-(ns tubo.views.search
-  (:require
-   [re-frame.core :as rf]
-   [reitit.frontend.easy :as rfe]
-   [tubo.components.items :as items]
-   [tubo.components.layout :as layout]
-   [tubo.events :as events]))
-
-(defn search
-  [{{:keys [q serviceId]} :query-params}]
-  (let [{:keys [items next-page]
-         :as   search-results} @(rf/subscribe [:search-results])
-        next-page-url          (:url next-page)
-        services               @(rf/subscribe [:services])
-        service-id             (or @(rf/subscribe [:service-id]) serviceId)
-        scrolled-to-bottom?    @(rf/subscribe [:scrolled-to-bottom])]
-    (when scrolled-to-bottom?
-      (rf/dispatch [::events/search-pagination q service-id next-page-url]))
-    [layout/content-container
-     [items/related-streams items next-page-url]]))
diff --git a/src/frontend/tubo/views/settings.cljs b/src/frontend/tubo/views/settings.cljs
deleted file mode 100644
index a5352e5..0000000
--- a/src/frontend/tubo/views/settings.cljs
+++ /dev/null
@@ -1,33 +0,0 @@
-(ns tubo.views.settings
-  (:require
-   [re-frame.core :as rf]
-   [tubo.components.layout :as layout]
-   [tubo.events :as events]))
-
-(defn boolean-input
-  [label key value]
-  [layout/boolean-input label key value #(rf/dispatch [::events/change-setting key (not value)])])
-
-(defn select-input
-  [label key value options on-change]
-  [layout/select-input label key value options
-   (or on-change #(rf/dispatch [::events/change-setting key (.. % -target -value)]))])
-
-(defn settings-page []
-  (let [{:keys [theme themes show-comments show-related
-                show-description default-service]} @(rf/subscribe [:settings])
-        service-color                              @(rf/subscribe [:service-color])
-        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 [::events/change-service-setting (..  % -target -value)])]
-      [select-input "Default kiosk" :default-service
-       (:default-kiosk default-service) (:available-kiosks default-service)
-       #(rf/dispatch [::events/change-kiosk-setting (..  % -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]]]))
diff --git a/src/frontend/tubo/views/stream.cljs b/src/frontend/tubo/views/stream.cljs
deleted file mode 100644
index f2bb780..0000000
--- a/src/frontend/tubo/views/stream.cljs
+++ /dev/null
@@ -1,145 +0,0 @@
-(ns tubo.views.stream
-  (:require
-   [reagent.core :as r]
-   [re-frame.core :as rf]
-   [reitit.frontend.easy :as rfe]
-   [tubo.events :as events]
-   [tubo.components.items :as items]
-   [tubo.components.layout :as layout]
-   [tubo.components.comments :as comments]
-   [tubo.components.modals.bookmarks :as bookmarks]
-   [tubo.components.video-player :as player]
-   [tubo.utils :as utils]))
-
-(defn stream
-  [match]
-  (let [!stream-menu-active? (r/atom nil)
-        !suggested-menu-active? (r/atom nil)]
-    (fn []
-      (let [{:keys [name url video-streams audio-streams view-count
-                    subscriber-count like-count dislike-count
-                    description uploader-avatar uploader-name
-                    uploader-url upload-date related-streams
-                    thumbnail-url show-comments-loading comments-page
-                    show-comments show-related show-description service-id]
-             :as   stream}    @(rf/subscribe [:stream])
-            {show-comments?    :show-comments
-             show-related?     :show-related
-             show-description? :show-description}
-            @(rf/subscribe [:settings])
-            available-streams (apply conj audio-streams video-streams)
-            page-loading?     @(rf/subscribe [:show-page-loading])
-            service-color     @(rf/subscribe [:service-color])
-            bookmarks         @(rf/subscribe [:bookmarks])
-            liked?            (some #(= (:url %) url) (-> bookmarks first :items))
-            sources           (reverse (map (fn [{:keys [content format resolution averageBitrate]}]
-                                              {:src   content
-                                               :type  "video/mp4"
-                                               :label (str (or resolution "audio-only") " "
-                                                           format
-                                                           (when-not resolution
-                                                             (str " " averageBitrate "kbit/s")))})
-                                            available-streams))
-            player-elements   ["PlayToggle" "ProgressControl" "VolumePanel" "CurrentTimeDisplay"
-                               "TimeDivider" "DurationDisplay" "Spacer" "PlaybackRateMenuButton"
-                               "QualitySelector" "FullscreenToggle"]]
-        [layout/content-container
-         [:div.flex.justify-center.relative
-          {:class "h-[300px] md:h-[450px] lg:h-[600px]"}
-          [player/player
-           {:sources       sources
-            :poster        thumbnail-url
-            :controls      true
-            :controlBar    {:children player-elements}
-            :preload       "metadata"
-            :responsive    true
-            :fill          true
-            :playbackRates [0.5 1 1.5 2]}]]
-         [:div
-          [:div.flex.flex-col
-           [:div.flex.items-center.justify-between.pt-4.my-3
-            [:div.flex-auto
-             [:h1.text-lg.sm:text-2xl.font-bold.line-clamp-1 {:title name} name]]
-            [:div.flex.flex-auto.justify-end.items-center
-             [layout/popover-menu !stream-menu-active?
-              [{:label    "Add to queue"
-                :icon     [:i.fa-solid.fa-headphones]
-                :on-click #(rf/dispatch [::events/switch-to-audio-player stream])}
-               {:label    "Play radio"
-                :icon     [:i.fa-solid.fa-tower-cell]
-                :on-click #(rf/dispatch [::events/start-stream-radio stream])}
-               {:label    (if liked? "Remove favorite" "Favorite")
-                :icon     (if liked?
-                            [:i.fa-solid.fa-heart {:style {:color (utils/get-service-color service-id)}}]
-                            [:i.fa-solid.fa-heart])
-                :on-click #(rf/dispatch [(if liked? ::events/remove-from-likes ::events/add-to-likes) stream])}
-               {:label "Original"
-                :link  {:route url :external? true}
-                :icon  [:i.fa-solid.fa-external-link-alt]}
-               {:label    "Add to playlist"
-                :icon     [:i.fa-solid.fa-plus]
-                :on-click #(rf/dispatch [::events/add-bookmark-list-modal
-                                         [bookmarks/add-to-bookmark-list-modal stream]])}]]]]
-           [:div.flex.justify-between.py-2.flex-nowrap
-            [:div.flex.items-center
-             [layout/uploader-avatar uploader-avatar uploader-name
-              (rfe/href :tubo.routes/channel nil {:url uploader-url})]
-             [:div.mx-3
-              [:a.line-clamp-1.font-semibold
-               {:href  (rfe/href :tubo.routes/channel nil {:url uploader-url})
-                :title uploader-name}
-               uploader-name]
-              (when subscriber-count
-                [:div.flex.my-2.items-center
-                 [:i.fa-solid.fa-users.text-xs]
-                 [:p.mx-2 (utils/format-quantity subscriber-count)]])]]
-            [:div.flex.flex-col.items-end.flex-auto.justify-center
-             (when view-count
-               [: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.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.sm:text-base.text-sm
-                 [:i.fa-solid.fa-thumbs-down]
-                 [:span.ml-2 dislike-count]])]
-             (when upload-date
-               [:div.sm:text-base.text-sm.mt-1.whitespace-nowrap
-                [:i.fa-solid.fa-calendar]
-                [:span.ml-2 (utils/format-date-string upload-date)]])]]
-           (when (and show-description? (not (empty? description)))
-             [layout/show-more-container show-description description
-              #(rf/dispatch [::events/toggle-stream-layout :show-description])])
-           (when (and comments-page (not (empty? (:comments comments-page))) show-comments?)
-             [layout/accordeon
-              {:label     "Comments"
-               :on-open   #(if show-comments
-                             (rf/dispatch [::events/toggle-stream-layout :show-comments])
-                             (if comments-page
-                               (rf/dispatch [::events/toggle-stream-layout :show-comments])
-                               (rf/dispatch [::events/get-comments 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 uploader-name uploader-avatar url]))])
-           (when (and show-related? (not (empty? related-streams)))
-             [layout/accordeon
-              {:label        "Suggested"
-               :on-open      #(rf/dispatch [::events/toggle-stream-layout :show-related])
-               :open?        (not show-related)
-               :left-icon    "fa-solid fa-list"
-               :right-button [layout/popover-menu !suggested-menu-active?
-                              [{:label    "Add to queue"
-                                :icon     [:i.fa-solid.fa-headphones]
-                                :on-click #(rf/dispatch [::events/enqueue-related-streams related-streams])}
-                               {:label    "Add to playlist"
-                                :icon     [:i.fa-solid.fa-plus]
-                                :on-click #(rf/dispatch [::events/add-bookmark-list-modal
-                                                         [bookmarks/add-to-bookmark-list-modal related-streams]])}]]}
-              [items/related-streams related-streams nil]])]]]))))