fix: handle undefined mediaDevices

[OBe95]

Description

Fix: useMediaDevices(): TypeError: Cannot read property 'addEventListener' of undefined

Type of change

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as before)

Checklist

• Read the Contributing Guide
• Perform a code self-review
• [-] Comment the code, particularly in hard-to-understand areas
• [-] Add documentation
• [-] Add hook's story at Storybook
• [-] Cover changes with tests
• Ensure the test suite passes (yarn test)
• [-] Provide 100% tests coverage
• Make sure code lints (yarn lint). Fix it with yarn lint:fix in case of failure.
• [-] Make sure types are fine (yarn lint:types).

[streamich]

Thanks for adding this fix. One thing I'm concerned about is that change regarding error swallowing.

[xobotyi]

Not sure if these functions should be touched at all. With your changes in some cases handler bind will silently fail and development or debug will be much harder. Better to have error in that case.

You should leave only changes in src/useMediaDevices.ts, update the PR and ill merge it.

[xobotyi]

As you forbid to make changes in your fork repo it should be like so:

useMediaDevices:

import { useEffect, useState } from 'react';
import { noop, off, on } from './util';

const useMediaDevices = () => {
  const [state, setState] = useState({});

  useEffect(() => {
    if (!navigator.mediaDevices) return;

    let mounted = true;

    const onChange = () => {
      navigator.mediaDevices
        .enumerateDevices()
        .then(devices => {
          mounted &&
            setState({
              devices: devices.map(({ deviceId, groupId, kind, label }) => ({ deviceId, groupId, kind, label })),
            });
        })
        .catch(noop);
    };

    on(navigator.mediaDevices, 'devicechange', onChange);
    onChange();

    return () => {
      mounted = false;
      off(navigator.mediaDevices, 'devicechange', onChange);
    };
  }, []);

  return state;
};

export default useMediaDevices;

util

export const isClient = typeof window === 'object';

export const on = (obj: any, ...args: any[]) => obj.addEventListener(...args);

export const off = (obj: any, ...args: any[]) => obj.removeEventListener(...args);

export const noop = () => {};

[xobotyi]

@streamich maybe make a breaking change and change the returning signature?
I dont see any reason to return object with a single property.

[streamich]

🎉 This PR is included in version 13.22.5 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀