# [MatchMedia](https://www.youtube.com/watch?v=vvieEwYX02c)

## React hook

*Используется для определения типа устройства*

> See also [useMatchMedia hook src](https://codesandbox.io/s/use-match-media-o9kwlj)

<Alert type='info' header='$ yarn add' text='[use-match-media-hook](https://github.com/jepser/use-match-media)' />

### Source
```js
import { useState, useLayoutEffect } from "react";

const queries = [
  "(max-width: 766px)",
  "(min-width: 767px) and (max-width: 1199px)",
  "(min-width: 1200px)"
];

export const useMatchMedia = () => {
  const mediaQueryLists = queries.map((query) => window.matchMedia(query));
  const getValues = () => mediaQueryLists.map((list) => list.matches);
  const [values, setValues] = useState(getValues);

  useLayoutEffect(() => {
    const handler = () => setValues(getValues);

    mediaQueryLists.forEach((list) =>
      list.addEventListener("change", handler));

    return () =>
      mediaQueryLists.forEach((list) =>
        list.removeEventListener("change", handler)
      );
  }, []);

  return ["isMobile", "isTablet", "isDesktop"].reduce(
    (acc, screen, index) => ({
      ...acc,
      [screen]: values[index]
    }),
    {}
  );
};
```

### Usage
```jsx
import { useMatchMedia } from "./hooks";
import "./styles.css";

export default function App() {
  const { isMobile, isTablet, isDesktop } = useMatchMedia();

  console.log(isMobile);

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      {isMobile && <h2>Hello from mobile</h2>}
      {isTablet && <h2>Hello from tablet</h2>}
      {isDesktop && <h2>Hello from desktop</h2>}
    </div>
  );
}
```

<YoutubePlayer videoId='vvieEwYX02c' />

## Web API
https://developer.mozilla.org/ru/docs/Web/API/Window/matchMedia

```js
if (window.matchMedia("(min-width: 400px)").matches) {
  /* the viewport is at least 400 pixels wide */
} else {
  /* the viewport is less than 400 pixels wide */
}
```

#reactHook | useMatchMedia #jsVanilla #webAPI

https://www.youtube.com/watch?v=2Z1YIXgEucA&t=2275s

[sobes](https://www.youtube.com/watch?v=2zVAkqcUI4o&t=257s)

#js #microTasks #eventLoop #webAPI

https://busy-lace-heather.glitch.me/

```js
// Schedules the next memory measurement using setTimeout with
// a randomized interval.
function scheduleMeasurement() {
  if (!performance.measureUserAgentSpecificMemory) {
    console.log(
      "performance.measureUserAgentSpecificMemory() is not available. " +
        "Currently only Chrome 85.0.4178.0+ supports it as an Origin Trial."
    );
    return;
  }
  const interval = measurementInterval();
  console.log(
    "Scheduling memory measurement in " +
      Math.round(interval / 1000) +
      " seconds."
  );
  setTimeout(performMeasurement, interval);
}

// Start measurements after page load on the main window.
window.onload = function() {
  scheduleMeasurement();
};

// Computes a random interval in milliseconds such that on
// average there is one measurement every five minutes.
// See https://bit.ly/3bR0hys for an explanation of the math.
function measurementInterval() {
  const MEAN_INTERVAL_IN_MS = 5 * 60 * 1000;
  return -Math.log(Math.random()) * MEAN_INTERVAL_IN_MS;
}

// Invokes the API, records the result, and schedules
// the next measurement.
async function performMeasurement() {
  // 1. Invoke performance.measureUserAgentSpecificMemory().
  let result;
  try {
    result = await performance.measureUserAgentSpecificMemory();
  } catch (error) {
    if (error instanceof DOMException && error.name === "SecurityError") {
      console.log("The context is not secure.");
      console.log(
        "Make sure that Site Isolation is enabled in Chrome " +
          "and that the page is not embedded as an iframe."
      );
      return;
    }
    // Rethrow other errors.
    throw error;
  }
  // 2. Record the result.
  console.log("Memory usage:", result);
  // 3. Schedule the next measurement.
  scheduleMeasurement();
}
```

#jsVanilla #webAPI Memory stat exp

`service-bus.js`

```js
// --- LOADER
const fullscreenLayoutElmId = 'fullscreen-loader-layout'

const loader = document.createElement('div')
loader.id = fullscreenLayoutElmId
loader.classList.add('sp-none')
loader.style.animation = 'fadein 0.3s linear'

const spinner = document.createElement('div')
spinner.classList.add('nw-loader')
loader.appendChild(spinner)

const body = document.getElementsByTagName('body')[0]
body.appendChild(loader)

window.addEventListener(
  'fullscreen-loader.disable',
  function () {
    const targetBox = document.getElementById(fullscreenLayoutElmId)
    if (!!targetBox) targetBox.classList.toggle('sp-none', true)
  }
)
window.addEventListener(
  'fullscreen-loader.enable',
  function () {
    const targetBox = document.getElementById(fullscreenLayoutElmId)
    if (!!targetBox) targetBox.classList.toggle('sp-none', false)
  }
)
// ---

// USAGE:
window.dispatchEvent(new Event('fullscreen-loader.enable'))
```

```css
#fullscreen-loader-layout {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(255, 255, 255, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;

  transition: 0.2s;
  pointer-events: none;
  animation: fadein 0.2s;
}
```

#jsVanilla #webAPI | #serviceBus #fullscreenLoader

`service-bus.js`

```js
// -- IS BROWSER TAB ACTIVE
document.addEventListener("visibilitychange", function() {
  // If false - than browser tab is active
  console.log(document.hidden);
});
// --
```

#jsVanilla #webAPI | Is browser tab active #serviceBus

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#options

#webAPI Intl.NumberFormat()

https://developers.google.com/web/updates/2016/01/urlsearchparams

```js
var s = new URLSearchParams('https://dev.api.site.ru/payservice?payment_id=49026638&payment_hash=c074236d90efdb5be946ba3869620e84')
const paymentHash = s.get('payment_hash')
const paymentId = s.get('payment_id')
```

[polyfill](https://github.com/WebReflection/url-search-params/blob/master/build/url-search-params.max.js)

webAPI

#reactHook | useMatchMedia #jsVanilla #webAPI

#js #microTasks #eventLoop #webAPI

#jsVanilla #webAPI Memory stat exp

#jsVanilla #webAPI | #serviceBus #fullscreenLoader

#jsVanilla #webAPI | Is browser tab active #serviceBus

#webAPI Intl.NumberFormat()

URLSearchParams #polyfill #webAPI

#webAPI XMLHttpRequest ActiveXObject

#react | Scroll into view (scrollTo) #webAPI

#webAPI | Devices #webRTC

#IntersectionObserver #webAPI