diff --git a/README.md b/README.md index ab0a299..315740b 100644 --- a/README.md +++ b/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 (
- - { mediaCapabilities.showWarning && ( + + { mediaCapabilitiesInfo.showWarning && (
Defaulted to mp4. Couldn't test webm support, @@ -200,7 +200,9 @@ 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. +`mediaCapabilitiesInfo` value contains the three Boolean properties `supported`, `smooth`, and `powerEfficient`, which describe whether decoding the media described would be supported, smooth, and powerefficient. + +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 @@ -304,7 +306,8 @@ import { useNetworkStatus, useSaveData, useHardwareConcurrency, - useMemoryStatus + useMemoryStatus, + useMediaCapabilitiesDecodingInfo } from 'react-adaptive-hooks/dist/index.umd.js'; ``` diff --git a/index.js b/index.js index 907ffe9..cdd1995 100644 --- a/index.js +++ b/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'; diff --git a/media-capabilities/index.js b/media-capabilities/index.js index 097b4e0..a595884 100644 --- a/media-capabilities/index.js +++ b/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 }; diff --git a/media-capabilities/media-capabilities.test.js b/media-capabilities/media-capabilities.test.js index 52fa6eb..391aba7 100644 --- a/media-capabilities/media-capabilities.test.js +++ b/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,7 +39,7 @@ afterEach(function() { jest.resetModules(); }); -describe('useMediaCapabilities', () => { +describe('useMediaCapabilitiesDecodingInfo', () => { const navigator = window.navigator; afterEach(() => { @@ -47,57 +47,57 @@ describe('useMediaCapabilities', () => { }); 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 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 diff --git a/package.json b/package.json index f7aab96..3258d3d 100644 --- a/package.json +++ b/package.json @@ -34,4 +34,4 @@ "react", "performance" ] -} \ No newline at end of file +}