fix(ObservableMedia): startup should propagate lastReplay value properly #313

ThomasBurleson · 2017-06-10T17:19:48Z

ObservableMedia only dispatches notifications for activated, non-overlapping breakpoints.
If the MatchMedia lastReplay value is an overlapping breakpoint
(e.g. lt-md, gt-lg) then that value will be filtered by ObservableMedia
and not be emitted to subscribers.

MatchMedia breakpoints registration was not correct
- overlapping breakpoints were registered in the wrong order
- non-overlapping breakpoints should be registered last; so the BehaviorSubject's last replay value should be an non-overlapping breakpoint range.
Optimize stylesheet injection to group n mediaQuerys in a single stylesheet

Fixes #245, #275, #303.

See working plunker: https://plnkr.co/edit/yylQr2IdbGy2Yr00srrN?p=preview

andrewseguin · 2017-06-13T17:41:51Z

src/demo-app/app/shared/media-query-status.ts

@@ -31,7 +31,9 @@ export class MediaQueryStatus implements OnDestroy {
  private _watcher : Subscription;
  activeMediaQuery : string;

-  constructor(media$ : ObservableMedia) { this.watchMediaQueries(media$); }
+  constructor(media$ : ObservableMedia) {
+    this.watchMediaQueries(media$);


What's the $ for in the variable name? If it's for private but cannot be marked as such for Angular reasons, we use an underscore to preface the variable

The $ suffix is a community convention to indicate a variable reference that is actually an observable to future value(S)... originally seen in use by Andre Stalz (2 yrs ago).

I believe this is used consistently throughout the library.

andrewseguin · 2017-06-13T17:42:08Z

src/lib/media-query/breakpoints/break-point-registry.ts

@@ -30,6 +30,20 @@ export class BreakPointRegistry {
  }

  /**
+   * Accessor to sorted list used for


Can combine the two lines into one

So I do not mind these comments. It is my hope however that reviewers will focus mostly on content and less on format.

Tried to give focus to both equally :) My understanding is that we'll want to review this library with the same rigor we give to Material, and we're often strict about even the small things just to maintain quality (even in comments). Apologies if it seems pedantic, just wanting to make sure I'm fair to all PRs

Understood. Thanks for helping review these. Much appreciated.

andrewseguin · 2017-06-13T17:42:42Z

src/lib/media-query/breakpoints/break-point-registry.ts

+   *       so the non-overlaps will trigger the MatchMedia:BehaviorSubject last!
+   *       And the largest, non-overlap, matching breakpoint should be the lastReplay value
+   */
+  get sortedItems(): BreakPoint[ ] {


Remove space between [ ]

andrewseguin · 2017-06-13T17:42:56Z

src/lib/media-query/breakpoints/break-point-registry.ts

+   *       And the largest, non-overlap, matching breakpoint should be the lastReplay value
+   */
+  get sortedItems(): BreakPoint[ ] {
+    let overlaps = this._registry.filter(it=>it.overlapping === true);


Add spaces around =>

Yes. Will fix with style Linter tool.

andrewseguin · 2017-06-13T17:43:27Z

src/lib/media-query/match-media.spec.ts

    let current: MediaChange, activated;
    let query1 = "screen and (min-width: 610px) and (max-width: 620px)";
    let query2 = "(min-width: 730px) and (max-width: 950px)";

-    matchMedia.registerQuery(query1);
-    matchMedia.registerQuery(query2);
+    matchMedia.registerQuery([query1,query2]);


Add space after ,

andrewseguin · 2017-06-13T17:50:20Z

src/lib/media-query/match-media.ts

-          this._source.next(change);
-        });
-      };
+  registerQuery(mediaQuery: string | Array<string>) {


use string[]

ObservableMedia only dispatches notifications for activated, non-overlapping breakpoints. If the MatchMedia lastReplay value is an *overlapping* breakpoint (e.g. `lt-md`, `gt-lg`) then that value will be filtered by ObservableMedia and not be emitted to subscribers. * MatchMedia breakpoints registration was not correct * overlapping breakpoints were registered in the wrong order * non-overlapping breakpoints should be registered last; so the BehaviorSubject's last replay value should be an non-overlapping breakpoint range. * Optimize stylesheet injection to group `n` mediaQuerys in a single stylesheet > See working plunker: https://plnkr.co/edit/yylQr2IdbGy2Yr00srrN?p=preview Fixes #245, #275, #303

ThomasBurleson · 2017-06-13T18:04:15Z

Updated. Thx @andrewseguin.

bogacg · 2017-12-12T14:37:58Z

Please re-check this issue. I think we still have problem when used with --prod flag with latest Angular-CLI (1.6)

ThomasBurleson · 2017-12-14T14:05:53Z

@bogacg - Would you mind opening a new issue and perhaps provide a StackBlitz or zip that demonstrates this issue ?

Note the latest source/nightly builds have been upgraded to Angular 5.1 and RxJS 5.5.

angular-automatic-lock-bot · 2019-09-05T23:02:21Z

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}

googlebot added the cla: yes label Jun 10, 2017

ThomasBurleson added this to the v2.0.0-beta.9 milestone Jun 10, 2017

ThomasBurleson added the pr: needs presubmit label Jun 10, 2017

This was referenced Jun 10, 2017

Initial value of ObservableMedia not received #245

Closed

ObservableMedia does not emit when largest viewport is active #275

Closed

ThomasBurleson force-pushed the thomas/fix-issue-245 branch 2 times, most recently from a58bcb4 to d9177cb Compare June 12, 2017 03:55

ThomasBurleson mentioned this pull request Jun 12, 2017

Disable fx-query-test #303

Closed

ThomasBurleson force-pushed the thomas/fix-issue-245 branch 2 times, most recently from 277654d to 314bc9b Compare June 12, 2017 04:06

kara assigned mmalerba Jun 12, 2017

kara added pr: needs review and removed pr: needs presubmit labels Jun 12, 2017

kara assigned andrewseguin and unassigned mmalerba Jun 12, 2017

andrewseguin reviewed Jun 13, 2017

View reviewed changes

ThomasBurleson force-pushed the thomas/fix-issue-245 branch from 314bc9b to 062d342 Compare June 13, 2017 18:03

ThomasBurleson force-pushed the thomas/fix-issue-245 branch from 062d342 to 9cd1514 Compare June 13, 2017 18:04

andrewseguin added pr: lgtm This PR has been approved by the reviewer pr: merge ready This PR is ready for the caretaker to presubmit and merge and removed pr: needs review labels Jun 13, 2017

kara added pr: needs presubmit pr: merge ready This PR is ready for the caretaker to presubmit and merge and removed pr: merge ready This PR is ready for the caretaker to presubmit and merge pr: needs presubmit labels Jun 13, 2017

kara merged commit 00ac57a into master Jun 13, 2017

ThomasBurleson deleted the thomas/fix-issue-245 branch August 7, 2017 22:36

angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 5, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(ObservableMedia): startup should propagate lastReplay value properly #313

fix(ObservableMedia): startup should propagate lastReplay value properly #313

ThomasBurleson commented Jun 10, 2017 •

edited

Loading

andrewseguin Jun 13, 2017

ThomasBurleson Jun 13, 2017 •

edited

Loading

andrewseguin Jun 13, 2017

ThomasBurleson Jun 13, 2017 •

edited

Loading

andrewseguin Jun 13, 2017

ThomasBurleson Jun 13, 2017

andrewseguin Jun 13, 2017

ThomasBurleson Jun 13, 2017

andrewseguin Jun 13, 2017

ThomasBurleson Jun 13, 2017

andrewseguin Jun 13, 2017

ThomasBurleson Jun 13, 2017

andrewseguin Jun 13, 2017

ThomasBurleson Jun 13, 2017

ThomasBurleson commented Jun 13, 2017 •

edited

Loading

bogacg commented Dec 12, 2017

ThomasBurleson commented Dec 14, 2017 •

edited

Loading

angular-automatic-lock-bot bot commented Sep 5, 2019

fix(ObservableMedia): startup should propagate lastReplay value properly #313

fix(ObservableMedia): startup should propagate lastReplay value properly #313

Conversation

ThomasBurleson commented Jun 10, 2017 • edited Loading

Choose a reason for hiding this comment

ThomasBurleson Jun 13, 2017 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ThomasBurleson Jun 13, 2017 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ThomasBurleson commented Jun 13, 2017 • edited Loading

bogacg commented Dec 12, 2017

ThomasBurleson commented Dec 14, 2017 • edited Loading

angular-automatic-lock-bot bot commented Sep 5, 2019

ThomasBurleson commented Jun 10, 2017 •

edited

Loading

ThomasBurleson Jun 13, 2017 •

edited

Loading

ThomasBurleson Jun 13, 2017 •

edited

Loading

ThomasBurleson commented Jun 13, 2017 •

edited

Loading

ThomasBurleson commented Dec 14, 2017 •

edited

Loading