fix(core): only emit changed events from MediaObserver (#1377)

Author: CaerusKaru

projects/libs/flex-layout/core/match-media/mock/mock-match-media.ts

@@ -40,8 +40,7 @@ export class MockMatchMedia extends MatchMedia {
   }
 
   /** Feature to support manual, simulated activation of a mediaQuery. */
-  activate(mediaQuery: string, useOverlaps = false): boolean {
-    useOverlaps = useOverlaps || this.useOverlaps;
+  activate(mediaQuery: string, useOverlaps = this.useOverlaps): boolean {
     mediaQuery = this._validateQuery(mediaQuery);
 
     if (useOverlaps || !this.isActive(mediaQuery)) {
@@ -55,9 +54,9 @@ export class MockMatchMedia extends MatchMedia {
   }
 
   /** Converts an optional mediaQuery alias to a specific, valid mediaQuery */
-  _validateQuery(queryOrAlias: string) {
+  _validateQuery(queryOrAlias: string): string {
     const bp = this._breakpoints.findByAlias(queryOrAlias);
-    return (bp && bp.mediaQuery) || queryOrAlias;
+    return bp?.mediaQuery ?? queryOrAlias;
   }
 
   /**
@@ -67,36 +66,36 @@ export class MockMatchMedia extends MatchMedia {
   private _activateWithOverlaps(mediaQuery: string, useOverlaps: boolean): boolean {
     if (useOverlaps) {
       const bp = this._breakpoints.findByQuery(mediaQuery);
-      const alias = bp ? bp.alias : 'unknown';
+      const alias = bp?.alias ?? 'unknown';
 
       // Simulate activation of overlapping lt-<XXX> ranges
       switch (alias) {
-        case 'lg'   :
+        case 'lg':
           this._activateByAlias(['lt-xl']);
           break;
-        case 'md'   :
+        case 'md':
           this._activateByAlias(['lt-xl', 'lt-lg']);
           break;
-        case 'sm'   :
+        case 'sm':
           this._activateByAlias(['lt-xl', 'lt-lg', 'lt-md']);
           break;
-        case 'xs'   :
+        case 'xs':
           this._activateByAlias(['lt-xl', 'lt-lg', 'lt-md', 'lt-sm']);
           break;
       }
 
       // Simulate activation of overlapping gt-<xxxx> mediaQuery ranges
       switch (alias) {
-        case 'xl'   :
+        case 'xl':
           this._activateByAlias(['gt-lg', 'gt-md', 'gt-sm', 'gt-xs']);
           break;
-        case 'lg'   :
+        case 'lg':
           this._activateByAlias(['gt-md', 'gt-sm', 'gt-xs']);
           break;
-        case 'md'   :
+        case 'md':
           this._activateByAlias(['gt-sm', 'gt-xs']);
           break;
-        case 'sm'   :
+        case 'sm':
           this._activateByAlias(['gt-xs']);
           break;
       }
@@ -112,7 +111,7 @@ export class MockMatchMedia extends MatchMedia {
   private _activateByAlias(aliases: string[]) {
     const activate = (alias: string) => {
       const bp = this._breakpoints.findByAlias(alias);
-      this._activateByQuery(bp ? bp.mediaQuery : alias);
+      this._activateByQuery(bp?.mediaQuery ?? alias);
     };
     aliases.forEach(activate);
   }

projects/libs/flex-layout/core/media-marshaller/media-marshaller.ts

@@ -135,7 +135,7 @@ export class MediaMarshaller {
     if (bpMap) {
       const values = this.getActivatedValues(bpMap, key);
       if (values) {
-        return values.get(key) !== undefined ?? false;
+        return values.get(key) !== undefined || false;
       }
     }
     return false;

projects/libs/flex-layout/core/media-observer/media-observer.spec.ts

@@ -23,8 +23,8 @@ describe('media-observer', () => {
   let media$: Observable<MediaChange>;
   let mediaObserver: MediaObserver;
   let mediaController: MockMatchMedia;
-  const activateQuery = (alias: string) => {
-      mediaController.activate(alias);
+  const activateQuery = (alias: string, useOverlaps?: boolean) => {
+      mediaController.activate(alias, useOverlaps);
       tick(100);  // Since MediaObserver has 50ms debounceTime
   };
 
@@ -101,6 +101,27 @@ describe('media-observer', () => {
       subscription.unsubscribe();
     }));
 
+    it('only gets one substantive update per media change set', fakeAsync(() => {
+      let count = 0;
+      const subscription = mediaObserver.asObservable()
+        .subscribe(_changes => {
+          count += 1;
+        });
+
+      // Not a duplicate. This is intentional.
+      activateQuery('sm', true);
+      activateQuery('sm', true);
+      expect(count).toEqual(1);
+
+      activateQuery('md', true);
+      expect(count).toEqual(2);
+
+      activateQuery('xl', true);
+      expect(count).toEqual(3);
+
+      subscription.unsubscribe();
+    }));
+
     it('can subscribe to built-in mediaQueries',  fakeAsync(() => {
       let current: MediaChange = new MediaChange(true);
       let subscription = media$.subscribe((change: MediaChange) => {

projects/libs/flex-layout/core/media-observer/media-observer.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 import {Injectable, OnDestroy} from '@angular/core';
-import {Subject, asapScheduler, Observable, of} from 'rxjs';
+import {Subject, asapScheduler, Observable, of, distinctUntilChanged} from 'rxjs';
 import {debounceTime, filter, map, switchMap, takeUntil} from 'rxjs/operators';
 
 import {mergeAlias} from '../add-alias';
@@ -153,9 +153,20 @@ export class MediaObserver implements OnDestroy {
     const excludeOverlaps = (changes: MediaChange[]) => {
       return !this.filterOverlaps ? changes : changes.filter(change => {
         const bp = this.breakpoints.findByQuery(change.mediaQuery);
-        return !bp ? true : !bp.overlapping;
+        return bp?.overlapping ?? true;
       });
     };
+    const ignoreDuplicates = (previous: MediaChange[], current: MediaChange[]): boolean => {
+      if (previous.length !== current.length) {
+        return false;
+      }
+
+      const previousMqs = previous.map(mc => mc.mediaQuery);
+      const currentMqs = new Set(current.map(mc => mc.mediaQuery));
+      const difference = new Set(previousMqs.filter(mq => !currentMqs.has(mq)));
+
+      return difference.size === 0;
+    };
 
     /**
      */
@@ -167,6 +178,7 @@ export class MediaObserver implements OnDestroy {
             switchMap(_ => of(this.findAllActivations())),
             map(excludeOverlaps),
             filter(hasChanges),
+            distinctUntilChanged(ignoreDuplicates),
             takeUntil(this.destroyed$)
         );
   }
@@ -177,7 +189,7 @@ export class MediaObserver implements OnDestroy {
    */
   private findAllActivations(): MediaChange[] {
     const mergeMQAlias = (change: MediaChange) => {
-      let bp: OptionalBreakPoint = this.breakpoints.findByQuery(change.mediaQuery);
+      const bp: OptionalBreakPoint = this.breakpoints.findByQuery(change.mediaQuery);
       return mergeAlias(change, bp);
     };
     const replaceWithPrintAlias = (change: MediaChange) => {
@@ -199,9 +211,9 @@ export class MediaObserver implements OnDestroy {
 /**
  * Find associated breakpoint (if any)
  */
-function toMediaQuery(query: string, locator: BreakPointRegistry) {
-  const bp = locator.findByAlias(query) || locator.findByQuery(query);
-  return bp ? bp.mediaQuery : null;
+function toMediaQuery(query: string, locator: BreakPointRegistry): string | null {
+  const bp = locator.findByAlias(query) ?? locator.findByQuery(query);
+  return bp?.mediaQuery ?? null;
 }
 
 /**