[fix] improved useMediaCapabilities hook (#48)

* doc: improved code styling in readme

* infra: uninstalled react-dom

* chore: cleaned up

* infra: extracted supported from hook in useMediaCapabilities

* doc: cleaned code snippet for useMediaCapabilities in README

Author: anton-karlovskiy

README.md

@@ -170,35 +170,31 @@ import React from 'react';
 import { useMediaCapabilities } from 'react-adaptive-hooks/media-capabilities';
 
 const webmMediaConfig = {
-  type : 'file', // 'record', 'transmission', or 'media-source'
-  video : {
-    contentType : 'video/webm;codecs=vp8', // valid content type
-    width : 800,     // width of the video
-    height : 600,    // height of the video
-    bitrate : 10000, // number of bits used to encode 1s of video
-    framerate : 30   // number of frames making up that 1s.
+  type: 'file', // 'record', 'transmission', or 'media-source'
+  video: {
+    contentType: 'video/webm;codecs=vp8', // valid content type
+    width: 800, // width of the video
+    height: 600, // height of the video
+    bitrate: 10000, // number of bits used to encode 1s of video
+    framerate: 30 // number of frames making up that 1s.
   }
 };
 
-const initialDecodingInfo = { showWarning: true }
+const initialMediaCapabilities = {showWarning: true};
 
 const MyComponent = ({ videoSources }) => {
-  const { mediaCapabilities } = useMediaCapabilities(webmMediaConfig, initialDecodingInfo);
+  const { mediaCapabilities } = useMediaCapabilities(webmMediaConfig, initialMediaCapabilities);
 
   return (
     <div>
-      {
-        mediaCapabilities.supported
-          ? <video src={videoSources.webm} controls>...</video>
-          : <video src={videoSources.mp4}  controls>...</video>
-      }
-      {
-        mediaCapabilities.showWarning &&
-          <div class="muted">
-            Defaulted to mp4.
-            Couldn't test webm support, either the media capabilities api is unavailable or no media configuration was given.
-          </div>
-      }
+      <video src={mediaCapabilities.supported ? videoSources.webm : videoSources.mp4} controls>...</video>
+      { mediaCapabilities.showWarning && (
+        <div class='muted'>
+          Defaulted to mp4.  
+          Couldn't test webm support,  
+          either the media capabilities api is unavailable or no media configuration was given.
+        </div>
+      ) }
     </div>
   );
 };
@@ -304,7 +300,12 @@ The built version of this package uses ESM (native JS modules) by default, but i
 
 * Use a UMD build as in the following code-snippet: ([example project](https://glitch.com/edit/#!/anton-karlovskiy-next-show-adaptive-loading?path=utils/hooks.js:19:91))
 ```
-import { useNetworkStatus, useSaveData, useHardwareConcurrency, useMemoryStatus } from 'react-adaptive-hooks/dist/index.umd.js';
+import {
+  useNetworkStatus,
+  useSaveData,
+  useHardwareConcurrency,
+  useMemoryStatus
+} from 'react-adaptive-hooks/dist/index.umd.js';
 ```
 
 ## Browser Support

index.js

@@ -2,4 +2,4 @@ export { useNetworkStatus } from './network';
 export { useSaveData } from './save-data';
 export { useMemoryStatus } from './memory';
 export { useHardwareConcurrency } from './hardware-concurrency';
-export { useMediaCapabilities } from './media-capabilities'
+export { useMediaCapabilities } from './media-capabilities';

media-capabilities/index.js

@@ -14,22 +14,24 @@
  * limitations under the License.
  */
 
+const supported = typeof window !== 'undefined' && 'mediaCapabilities' in navigator;
+
 const useMediaCapabilities = (mediaConfig, initialMediaCapabilities = {}) => {
-    let mediaCapabilities = {
-        supported: typeof window !== 'undefined' && 'mediaCapabilities' in navigator,
-        hasMediaConfig: !!mediaConfig
-    }
+  let mediaCapabilities = {
+    supported,
+    hasMediaConfig: !!mediaConfig
+  };
 
-    mediaCapabilities = (mediaCapabilities.supported && mediaCapabilities.hasMediaConfig) ?
-        navigator.mediaCapabilities.decodingInfo(mediaConfig) :
-        {
-            ...mediaCapabilities,
-            ...initialMediaCapabilities
-        }
+  mediaCapabilities = (mediaCapabilities.supported && mediaCapabilities.hasMediaConfig)
+    ? navigator.mediaCapabilities.decodingInfo(mediaConfig)
+    : {
+      ...mediaCapabilities,
+      ...initialMediaCapabilities
+    };
 
-    return { mediaCapabilities };
+  return {mediaCapabilities};
 };
 
 export {
-    useMediaCapabilities
-};
+  useMediaCapabilities
+};

media-capabilities/media-capabilities.test.js

@@ -16,80 +16,91 @@
 
 import { renderHook } from '@testing-library/react-hooks';
 
-import { useMediaCapabilities } from './';
-
 const mediaConfig = {
-    type: 'file',
-    audio: {
-        contentType: 'audio/mp3',
-        channels: 2,
-        bitrate: 132700,
-        samplerate: 5200
-    }
+  type: 'file',
+  audio: {
+    contentType: 'audio/mp3',
+    channels: 2,
+    bitrate: 132700,
+    samplerate: 5200
+  }
 };
 
 const mediaCapabilitiesMapper = {
-    'audio/mp3': {
-        powerEfficient: true,
-        smooth: true,
-        supported: true
-    }
-}
+  'audio/mp3': {
+    powerEfficient: true,
+    smooth: true,
+    supported: true
+  }
+};
+
+afterEach(function() {
+  // Reload hook for every test
+  jest.resetModules();
+});
 
 describe('useMediaCapabilities', () => {
-    test('should return supported flag on unsupported platforms', () => {
-        const { result } = renderHook(() => useMediaCapabilities(mediaConfig));
+  const navigator = window.navigator;
 
-        expect(result.current.mediaCapabilities).toEqual({ hasMediaConfig: true, supported: false });
-    });
+  afterEach(() => {
+    if (!window.navigator) window.navigator = navigator;
+  });
 
-    test('should return supported and hasMediaConfig flags on unsupported platforms and no config given', () => {
-        const { result } = renderHook(() => useMediaCapabilities());
-        
-        expect(result.current.mediaCapabilities).toEqual({ hasMediaConfig: false, supported: false });
-    });
+  test('should return supported flag on unsupported platforms', () => {
+    const { useMediaCapabilities } = require('./');
+    const { result } = renderHook(() => useMediaCapabilities(mediaConfig));
 
-    test('should return initialMediaCapabilities for unsupported', () => {
-        const initialMediaCapabilities = {
-            supported: true,
-            smooth: false,
-            powerEfficient: true
-        };
+    expect(result.current.mediaCapabilities).toEqual({hasMediaConfig: true, supported: false});
+  });
 
-        const { result } = renderHook(() => useMediaCapabilities(mediaConfig, initialMediaCapabilities));
+  test('should return supported and hasMediaConfig flags on unsupported platforms and no config given', () => {
+    const { useMediaCapabilities } = require('./');
+    const { result } = renderHook(() => useMediaCapabilities());
+    
+    expect(result.current.mediaCapabilities).toEqual({hasMediaConfig: false, supported: false});
+  });
 
-        expect(result.current.mediaCapabilities.supported).toBe(true);
-        expect(result.current.mediaCapabilities.smooth).toEqual(false);
-        expect(result.current.mediaCapabilities.powerEfficient).toEqual(true);
-    });
+  test('should return initialMediaCapabilities for unsupported', () => {
+    const initialMediaCapabilities = {
+      supported: true,
+      smooth: false,
+      powerEfficient: true
+    };
+    const { useMediaCapabilities } = require('./');
+    const { result } = renderHook(() => useMediaCapabilities(mediaConfig, initialMediaCapabilities));
+
+    expect(result.current.mediaCapabilities.supported).toBe(true);
+    expect(result.current.mediaCapabilities.smooth).toEqual(false);
+    expect(result.current.mediaCapabilities.powerEfficient).toEqual(true);
+  });
 
-    test('should return hasMediaConfig flag when no config given', () => {
-        Object.defineProperty(window.navigator, 'mediaCapabilities', {
-            value: true,
-            configurable: true,
-            writable: true
-        });
-        
-        const { result } = renderHook(() => useMediaCapabilities());
-        
-        expect(result.current.mediaCapabilities).toEqual({ hasMediaConfig: false, supported: true });
+  test('should return hasMediaConfig flag when no config given', () => {
+    Object.defineProperty(window.navigator, 'mediaCapabilities', {
+      value: true,
+      configurable: true,
+      writable: true
     });
+    const { useMediaCapabilities } = require('./');
+    const { result } = renderHook(() => useMediaCapabilities());
 
-    test('should return MediaDecodingConfiguration for given media configuration', () => {
-        Object.defineProperty(window.navigator, 'mediaCapabilities', {
-            value: {
-                decodingInfo: (mediaConfig) => mediaCapabilitiesMapper[mediaConfig.audio.contentType]
-            },
-            configurable: true,
-            writable: true
-        });
-
-        const { result } = renderHook(() => useMediaCapabilities(mediaConfig));
+    expect(result.current.mediaCapabilities).toEqual({hasMediaConfig: false, supported: true});
+  });
+  
+  test('should return MediaDecodingConfiguration for given media configuration', () => {
+    Object.defineProperty(window.navigator, 'mediaCapabilities', {
+      value: {
+        decodingInfo: mediaConfig => mediaCapabilitiesMapper[mediaConfig.audio.contentType]
+      },
+      configurable: true,
+      writable: true
+    });
+    const { useMediaCapabilities } = require('./');
+    const { result } = renderHook(() => useMediaCapabilities(mediaConfig));
 
-        expect(result.current.mediaCapabilities).toEqual({
-            powerEfficient: true,
-            smooth: true,
-            supported: true
-        });
+    expect(result.current.mediaCapabilities).toEqual({
+      powerEfficient: true,
+      smooth: true,
+      supported: true
     });
+  });
 });