Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: handle undefined mediaDevices #830

Merged
merged 3 commits into from
Feb 4, 2020

Conversation

OBe95
Copy link
Contributor

@OBe95 OBe95 commented Dec 11, 2019

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).

Copy link
Owner

@streamich streamich left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

src/util.ts Outdated Show resolved Hide resolved
src/util.ts Outdated
@@ -1,5 1,5 @@
export const isClient = typeof window === 'object';

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

@xobotyi xobotyi Jan 30, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 xobotyi self-assigned this Jan 30, 2020
@xobotyi
Copy link
Contributor

xobotyi commented Jan 30, 2020

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

@streamich streamich merged commit 70fc33f into streamich:master Feb 4, 2020
@streamich
Copy link
Owner

🎉 This PR is included in version 13.22.5 🎉

The release is available on:

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

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