fix(frontend): remove page scroll data from re-frame db

7 files changed, 29 insertions, 23 deletions

diff --git a/src/frontend/tubo/events.cljs b/src/frontend/tubo/events.cljs
index 9c2ab48..aa238d3 100644
--- a/src/frontend/tubo/events.cljs
+++ b/src/frontend/tubo/events.cljs
@@ -51,18 +51,6 @@
    {::history-back! nil}))
 
 (rf/reg-event-db
- ::page-scroll
- (fn [db _]
-   (when (> (.-scrollY js/window) 0)
-     (assoc db :page-scroll
-            (+ (.-scrollY js/window) (.-innerHeight js/window))))))
-
-(rf/reg-event-db
- ::reset-page-scroll
- (fn [db _]
-   (assoc db :page-scroll 0)))
-
-(rf/reg-event-db
  ::toggle-mobile-nav
  (fn [db _]
    (assoc db :show-mobile-nav (not (:show-mobile-nav db)))))
diff --git a/src/frontend/tubo/subs.cljs b/src/frontend/tubo/subs.cljs
index 1740651..1132cdd 100644
--- a/src/frontend/tubo/subs.cljs
+++ b/src/frontend/tubo/subs.cljs
@@ -1,7 +1,32 @@
 (ns tubo.subs
   (:require
+   [reagent.core :as r]
    [re-frame.core :as rf]))
 
+(defonce is-window-visible
+  (let [a (r/atom true)]
+    (.addEventListener js/window "focus" #(reset! a true))
+    (.addEventListener js/window "blur" #(reset! a false))
+    a))
+
+(defonce scroll-distance
+  (let [a (r/atom 0)
+        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))
+
+(rf/reg-sub
+ :is-window-visible
+ (fn [_ _]
+   @is-window-visible))
+
+(rf/reg-sub
+ :scrolled-to-bottom
+ (fn [_ _]
+   (> (+ @scroll-distance 35) (.-scrollHeight js/document.body))))
+
 (rf/reg-sub
  :http-response
  (fn [db _]
diff --git a/src/frontend/tubo/views.cljs b/src/frontend/tubo/views.cljs
index 96bb6f1..d412edf 100644
--- a/src/frontend/tubo/views.cljs
+++ b/src/frontend/tubo/views.cljs
@@ -2,14 +2,11 @@
   (:require
    [reitit.frontend.easy :as rfe]
    [re-frame.core :as rf]
-   [reagent.ratom :as ratom]
    [tubo.components.navigation :as navigation]
    [tubo.components.player :as player]
    [tubo.events :as events]
    [tubo.routes :as routes]))
 
-(defonce scroll-hook (.addEventListener js/window "scroll" #(rf/dispatch [::events/page-scroll])))
-(defonce mobile-touch-hook (.addEventListener js/document.body "touchmove" #(rf/dispatch [::events/page-scroll])))
 (defonce services (rf/dispatch [::events/get-services]))
 (defonce kiosks (rf/dispatch [::events/get-kiosks 0]))
 
diff --git a/src/frontend/tubo/views/channel.cljs b/src/frontend/tubo/views/channel.cljs
index ee5459f..9318c0e 100644
--- a/src/frontend/tubo/views/channel.cljs
+++ b/src/frontend/tubo/views/channel.cljs
@@ -14,8 +14,7 @@
         service-color @(rf/subscribe [:service-color])
         page-loading? @(rf/subscribe [:show-page-loading])
         pagination-loading? @(rf/subscribe [:show-pagination-loading])
-        page-scroll @(rf/subscribe [:page-scroll])
-        scrolled-to-bottom? (= page-scroll (.-scrollHeight js/document.body))]
+        scrolled-to-bottom? @(rf/subscribe [:scrolled-to-bottom])]
     (when scrolled-to-bottom?
       (rf/dispatch [::events/channel-pagination url next-page-url]))
     [:div.flex.flex-col.items-center.px-5.py-2.flex-auto
diff --git a/src/frontend/tubo/views/kiosk.cljs b/src/frontend/tubo/views/kiosk.cljs
index 1c072af..18566c3 100644
--- a/src/frontend/tubo/views/kiosk.cljs
+++ b/src/frontend/tubo/views/kiosk.cljs
@@ -12,8 +12,7 @@
         next-page-url (:url next-page)
         service-color @(rf/subscribe [:service-color])
         page-loading? @(rf/subscribe [:show-page-loading])
-        page-scroll @(rf/subscribe [:page-scroll])
-        scrolled-to-bottom? (= page-scroll (.-scrollHeight js/document.body))]
+        scrolled-to-bottom? @(rf/subscribe [:scrolled-to-bottom])]
     (when scrolled-to-bottom?
       (rf/dispatch [::events/kiosk-pagination serviceId id next-page-url]))
     [:div.flex.flex-col.items-center.px-5.py-2.flex-auto
diff --git a/src/frontend/tubo/views/playlist.cljs b/src/frontend/tubo/views/playlist.cljs
index ed4f90f..a3f3a9d 100644
--- a/src/frontend/tubo/views/playlist.cljs
+++ b/src/frontend/tubo/views/playlist.cljs
@@ -15,8 +15,7 @@
         next-page-url (:url next-page)
         service-color @(rf/subscribe [:service-color])
         page-loading? @(rf/subscribe [:show-page-loading])
-        page-scroll @(rf/subscribe [:page-scroll])
-        scrolled-to-bottom? (= page-scroll (.-scrollHeight js/document.body))]
+        scrolled-to-bottom? @(rf/subscribe [:scrolled-to-bottom])]
     (when scrolled-to-bottom?
       (rf/dispatch [::events/playlist-pagination url next-page-url]))
     [:div.flex.flex-col.items-center.px-5.pt-4.flex-auto
diff --git a/src/frontend/tubo/views/search.cljs b/src/frontend/tubo/views/search.cljs
index 0ff3d16..e08b586 100644
--- a/src/frontend/tubo/views/search.cljs
+++ b/src/frontend/tubo/views/search.cljs
@@ -13,9 +13,8 @@
         services @(rf/subscribe [:services])
         service-id @(rf/subscribe [:service-id])
         service-color @(rf/subscribe [:service-color])
-        page-scroll @(rf/subscribe [:page-scroll])
         page-loading? @(rf/subscribe [:show-page-loading])
-        scrolled-to-bottom? (= page-scroll (.-scrollHeight js/document.body))]
+        scrolled-to-bottom? @(rf/subscribe [:scrolled-to-bottom])]
     (when scrolled-to-bottom?
       (rf/dispatch [::events/search-pagination q serviceId next-page-url]))
     [:div.flex.flex-col.items-center.flex-auto