[infra] updated naming for media capabilities hook considering its context

Author: anton-karlovskiy

README.md

@@ -29,7 +29,7 @@ import { useNetworkStatus } from 'react-adaptive-hooks/network';
 import { useSaveData } from 'react-adaptive-hooks/save-data';
 import { useHardwareConcurrency } from 'react-adaptive-hooks/hardware-concurrency';
 import { useMemoryStatus } from 'react-adaptive-hooks/memory';
-import { useMediaCapabilities } from 'react-adaptive-hooks/media-capabilities';
+import { useMediaCapabilitiesDecodingInfo } from 'react-adaptive-hooks/media-capabilities';
 ```
 
 and then use them in your components. Examples for each hook and utility can be found below:
@@ -160,16 +160,16 @@ const { deviceMemory } = useMemoryStatus(initialMemoryStatus);
 
 ### Media Capabilities
 
-`useMediaCapabilities` utility for adapting based on the user's device media capabilities.
+`useMediaCapabilitiesDecodingInfo` utility for adapting based on the user's device media capabilities.
 
 **Use case:** this hook can be used to check if we can play a certain content type. For example, Safari does not support WebM so we want to fallback to MP4 but if Safari at some point does support WebM it will automatically load WebM videos.
 
 ```js
 import React from 'react';
 
-import { useMediaCapabilities } from 'react-adaptive-hooks/media-capabilities';
+import { useMediaCapabilitiesDecodingInfo } from 'react-adaptive-hooks/media-capabilities';
 
-const webmMediaConfig = {
+const webmMediaDecodingConfig = {
   type: 'file', // 'record', 'transmission', or 'media-source'
   video: {
     contentType: 'video/webm;codecs=vp8', // valid content type
@@ -180,15 +180,15 @@ const webmMediaConfig = {
   }
 };
 
-const initialMediaCapabilities = {showWarning: true};
+const initialMediaCapabilitiesInfo = {showWarning: true};
 
 const MyComponent = ({ videoSources }) => {
-  const { mediaCapabilities } = useMediaCapabilities(webmMediaConfig, initialMediaCapabilities);
+  const { mediaCapabilitiesInfo } = useMediaCapabilitiesDecodingInfo(webmMediaDecodingConfig, initialMediaCapabilitiesInfo);
 
   return (
     <div>
-      <video src={mediaCapabilities.supported ? videoSources.webm : videoSources.mp4} controls>...</video>
-      { mediaCapabilities.showWarning && (
+      <video src={mediaCapabilitiesInfo.supported ? videoSources.webm : videoSources.mp4} controls>...</video>
+      { mediaCapabilitiesInfo.showWarning && (
         <div class='muted'>
           Defaulted to mp4.  
           Couldn't test webm support,  
@@ -200,7 +200,7 @@ const MyComponent = ({ videoSources }) => {
 };
 ```
 
-This hook accepts a [media configuration](https://developer.mozilla.org/en-US/docs/Web/API/MediaConfiguration) object argument and an optional `initialMediaCapabilities` object argument, which can be used to provide a `mediaCapabilities` state value when the user's browser does not support the relevant [Media Capabilities API](https://developer.mozilla.org/en-US/docs/Web/API/Media_Capabilities_API) or no media configuration was given.
+This utility accepts a [MediaDecodingConfiguration](https://developer.mozilla.org/en-US/docs/Web/API/MediaDecodingConfiguration) object argument and an optional `initialMediaCapabilitiesInfo` object argument, which can be used to provide a `mediaCapabilitiesInfo` state value when the user's browser does not support the relevant [Media Capabilities API](https://developer.mozilla.org/en-US/docs/Web/API/Media_Capabilities_API) or no media configuration was given.
 
 ### Adaptive Code-loading & Code-splitting
 

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 { useMediaCapabilitiesDecodingInfo } from './media-capabilities';

media-capabilities/index.js

@@ -16,22 +16,22 @@
 
 const supported = typeof window !== 'undefined' && 'mediaCapabilities' in navigator;
 
-const useMediaCapabilities = (mediaConfig, initialMediaCapabilities = {}) => {
-  let mediaCapabilities = {
+const useMediaCapabilitiesDecodingInfo = (mediaDecodingConfig, initialMediaCapabilitiesInfo = {}) => {
+  let mediaCapabilitiesInfo = {
     supported,
-    hasMediaConfig: !!mediaConfig
+    hasMediaDecodingConfig: !!mediaDecodingConfig
   };
 
-  mediaCapabilities = (mediaCapabilities.supported && mediaCapabilities.hasMediaConfig)
-    ? navigator.mediaCapabilities.decodingInfo(mediaConfig)
+  mediaCapabilitiesInfo = (mediaCapabilitiesInfo.supported && mediaCapabilitiesInfo.hasMediaDecodingConfig)
+    ? navigator.mediaCapabilities.decodingInfo(mediaDecodingConfig)
     : {
-      ...mediaCapabilities,
-      ...initialMediaCapabilities
+      ...mediaCapabilitiesInfo,
+      ...initialMediaCapabilitiesInfo
     };
 
-  return {mediaCapabilities};
+  return {mediaCapabilitiesInfo};
 };
 
 export {
-  useMediaCapabilities
+  useMediaCapabilitiesDecodingInfo
 };

media-capabilities/media-capabilities.test.js

@@ -16,7 +16,7 @@
 
 import { renderHook } from '@testing-library/react-hooks';
 
-const mediaConfig = {
+const mediaDecodingConfig = {
   type: 'file',
   audio: {
     contentType: 'audio/mp3',
@@ -39,65 +39,65 @@ afterEach(function() {
   jest.resetModules();
 });
 
-describe('useMediaCapabilities', () => {
+describe('useMediaCapabilitiesDecodingInfo', () => {
   const navigator = window.navigator;
 
   afterEach(() => {
     if (!window.navigator) window.navigator = navigator;
   });
 
   test('should return supported flag on unsupported platforms', () => {
-    const { useMediaCapabilities } = require('./');
-    const { result } = renderHook(() => useMediaCapabilities(mediaConfig));
+    const { useMediaCapabilitiesDecodingInfo } = require('./');
+    const { result } = renderHook(() => useMediaCapabilitiesDecodingInfo(mediaDecodingConfig));
 
-    expect(result.current.mediaCapabilities).toEqual({hasMediaConfig: true, supported: false});
+    expect(result.current.mediaCapabilitiesInfo).toEqual({hasMediaDecodingConfig: true, supported: false});
   });
 
-  test('should return supported and hasMediaConfig flags on unsupported platforms and no config given', () => {
-    const { useMediaCapabilities } = require('./');
-    const { result } = renderHook(() => useMediaCapabilities());
+  test('should return supported and hasMediaDecodingConfig flags on unsupported platforms and no config given', () => {
+    const { useMediaCapabilitiesDecodingInfo } = require('./');
+    const { result } = renderHook(() => useMediaCapabilitiesDecodingInfo());
 
-    expect(result.current.mediaCapabilities).toEqual({hasMediaConfig: false, supported: false});
+    expect(result.current.mediaCapabilitiesInfo).toEqual({hasMediaDecodingConfig: false, supported: false});
   });
 
-  test('should return initialMediaCapabilities for unsupported', () => {
-    const initialMediaCapabilities = {
+  test('should return initialMediaCapabilitiesInfo for unsupported', () => {
+    const initialMediaCapabilitiesInfo = {
       supported: true,
       smooth: false,
       powerEfficient: true
     };
-    const { useMediaCapabilities } = require('./');
-    const { result } = renderHook(() => useMediaCapabilities(mediaConfig, initialMediaCapabilities));
+    const { useMediaCapabilitiesDecodingInfo } = require('./');
+    const { result } = renderHook(() => useMediaCapabilitiesDecodingInfo(mediaDecodingConfig, initialMediaCapabilitiesInfo));
 
-    expect(result.current.mediaCapabilities.supported).toBe(true);
-    expect(result.current.mediaCapabilities.smooth).toEqual(false);
-    expect(result.current.mediaCapabilities.powerEfficient).toEqual(true);
+    expect(result.current.mediaCapabilitiesInfo.supported).toBe(true);
+    expect(result.current.mediaCapabilitiesInfo.smooth).toEqual(false);
+    expect(result.current.mediaCapabilitiesInfo.powerEfficient).toEqual(true);
   });
 
-  test('should return hasMediaConfig flag when no config given', () => {
+  test('should return hasMediaDecodingConfig flag when no config given', () => {
     Object.defineProperty(window.navigator, 'mediaCapabilities', {
       value: true,
       configurable: true,
       writable: true
     });
-    const { useMediaCapabilities } = require('./');
-    const { result } = renderHook(() => useMediaCapabilities());
+    const { useMediaCapabilitiesDecodingInfo } = require('./');
+    const { result } = renderHook(() => useMediaCapabilitiesDecodingInfo());
 
-    expect(result.current.mediaCapabilities).toEqual({hasMediaConfig: false, supported: true});
+    expect(result.current.mediaCapabilitiesInfo).toEqual({hasMediaDecodingConfig: false, supported: true});
   });
 
-  test('should return MediaDecodingConfiguration for given media configuration', () => {
+  test('should return MediaCapabilitiesInfo for given media decoding configuration', () => {
     Object.defineProperty(window.navigator, 'mediaCapabilities', {
       value: {
-        decodingInfo: mediaConfig => mediaCapabilitiesMapper[mediaConfig.audio.contentType]
+        decodingInfo: mediaDecodingConfig => mediaCapabilitiesMapper[mediaDecodingConfig.audio.contentType]
       },
       configurable: true,
       writable: true
     });
-    const { useMediaCapabilities } = require('./');
-    const { result } = renderHook(() => useMediaCapabilities(mediaConfig));
+    const { useMediaCapabilitiesDecodingInfo } = require('./');
+    const { result } = renderHook(() => useMediaCapabilitiesDecodingInfo(mediaDecodingConfig));
 
-    expect(result.current.mediaCapabilities).toEqual({
+    expect(result.current.mediaCapabilitiesInfo).toEqual({
       powerEfficient: true,
       smooth: true,
       supported: true