From 4b6e0808d1b45ac56fe00fd747b80ae1ae3fbdd3 Mon Sep 17 00:00:00 2001
From: squidfunk <martin.donath@squidfunk.com>
Date: Sun, 27 Oct 2019 15:55:10 +0100
Subject: [PATCH] Make UI observables hot

---
 src/assets/javascripts/ui/location/index.ts        | 14 ++++++++++----
 src/assets/javascripts/ui/viewport/_/index.ts      |  7 +++----
 .../javascripts/ui/viewport/breakpoint/index.ts    |  5 +++--
 3 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/src/assets/javascripts/ui/location/index.ts b/src/assets/javascripts/ui/location/index.ts
index d1c19c86d..18521479b 100644
--- a/src/assets/javascripts/ui/location/index.ts
+++ b/src/assets/javascripts/ui/location/index.ts
@@ -21,7 +21,12 @@
  */
 
 import { Observable, fromEvent } from "rxjs"
-import { filter, map, startWith } from "rxjs/operators"
+import {
+  filter,
+  map,
+  shareReplay,
+  startWith
+} from "rxjs/operators"
 
 /* ----------------------------------------------------------------------------
  * Data
@@ -39,12 +44,13 @@ const hash$ = fromEvent<HashChangeEvent>(window, "hashchange")
 /**
  * Create an observable emitting changes in location hashes
  *
- * @return Hash change observable
+ * @return Location hash observable
  */
 export function fromLocationHash(): Observable<string> {
   return hash$.pipe(
-    startWith(document.location.hash),
     map(() => document.location.hash),
-    filter(hash => hash.length > 0)
+    startWith(document.location.hash),
+    filter(hash => hash.length > 0),
+    shareReplay({ bufferSize: 1, refCount: true })
   )
 }
diff --git a/src/assets/javascripts/ui/viewport/_/index.ts b/src/assets/javascripts/ui/viewport/_/index.ts
index 6160b41a2..2d3765e67 100644
--- a/src/assets/javascripts/ui/viewport/_/index.ts
+++ b/src/assets/javascripts/ui/viewport/_/index.ts
@@ -20,9 +20,8 @@
  * IN THE SOFTWARE.
  */
 
-import { equals } from "ramda"
 import { Observable, fromEvent, merge } from "rxjs"
-import { distinctUntilChanged, map, startWith } from "rxjs/operators"
+import { map, shareReplay, startWith } from "rxjs/operators"
 
 /* ----------------------------------------------------------------------------
  * Data
@@ -97,7 +96,7 @@ export function fromViewportOffset(): Observable<ViewportOffset> {
   return merge(scroll$, resize$).pipe(
     map(getViewportOffset),
     startWith(getViewportOffset()),
-    distinctUntilChanged<ViewportOffset>(equals)
+    shareReplay({ bufferSize: 1, refCount: true })
   )
 }
 
@@ -110,6 +109,6 @@ export function fromViewportSize(): Observable<ViewportSize> {
   return resize$.pipe(
     map(getViewportSize),
     startWith(getViewportSize()),
-    distinctUntilChanged<ViewportSize>(equals)
+    shareReplay({ bufferSize: 1, refCount: true })
   )
 }
diff --git a/src/assets/javascripts/ui/viewport/breakpoint/index.ts b/src/assets/javascripts/ui/viewport/breakpoint/index.ts
index 2cce69430..377ca7365 100644
--- a/src/assets/javascripts/ui/viewport/breakpoint/index.ts
+++ b/src/assets/javascripts/ui/viewport/breakpoint/index.ts
@@ -21,7 +21,7 @@
  */
 
 import { Observable, fromEventPattern } from "rxjs"
-import { startWith } from "rxjs/operators"
+import { shareReplay, startWith } from "rxjs/operators"
 
 /* ----------------------------------------------------------------------------
  * Functions
@@ -39,6 +39,7 @@ export function fromMediaQuery(query: string): Observable<boolean> {
   return fromEventPattern<boolean>(next =>
     media.addListener(() => next(media.matches))
   ).pipe(
-    startWith(media.matches)
+    startWith(media.matches),
+    shareReplay({ bufferSize: 1, refCount: true })
   )
 }