async mediaCapabilities

Author: wingleung

media-capabilities/index.js

@@ -13,23 +13,35 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import { useState, useEffect } from 'react';
+
+const supported = typeof window !== 'undefined' && 'mediaCapabilities' in navigator;
 
 const useMediaCapabilities = (mediaConfig, initialMediaCapabilities = {}) => {
-    let mediaCapabilities = {
-        supported: typeof window !== 'undefined' && 'mediaCapabilities' in navigator,
-        hasMediaConfig: !!mediaConfig
-    }
+  initialMediaCapabilities = {
+    supported,
+    ...initialMediaCapabilities
+  };
+
+  const [mediaCapabilities, setMediaCapabilities] = useState(initialMediaCapabilities);
 
-    mediaCapabilities = (mediaCapabilities.supported && mediaCapabilities.hasMediaConfig) ?
-        navigator.mediaCapabilities.decodingInfo(mediaConfig) :
-        {
-            ...mediaCapabilities,
-            ...initialMediaCapabilities
-        }
+  const updateMediaCapabilities = mediaCapabilities => {
+    setMediaCapabilities(mediaCapabilities);
+  };
+
+  useEffect(() => {
+    if (supported && !!mediaConfig) {
+      navigator
+        .mediaCapabilities
+        .decodingInfo(mediaConfig)
+        .then(updateMediaCapabilities);
+    }
+  })
 
-    return { mediaCapabilities };
+  return {
+    ...mediaCapabilities,
+    updateMediaCapabilities
+  };
 };
 
-export {
-    useMediaCapabilities
-};
+export { useMediaCapabilities };

media-capabilities/media-capabilities.test.js

@@ -14,9 +14,7 @@
  * limitations under the License.
  */
 
-import { renderHook } from '@testing-library/react-hooks';
-
-import { useMediaCapabilities } from './';
+import { renderHook, act } from '@testing-library/react-hooks';
 
 const mediaConfig = {
     type: 'file',
@@ -38,58 +36,84 @@ const mediaCapabilitiesMapper = {
 
 describe('useMediaCapabilities', () => {
     test('should return supported flag on unsupported platforms', () => {
-        const { result } = renderHook(() => useMediaCapabilities(mediaConfig));
-
-        expect(result.current.mediaCapabilities).toEqual({ hasMediaConfig: true, supported: false });
+        jest.isolateModules(() => {
+            const { useMediaCapabilities } = require('./');
+            const { result } = renderHook(() => useMediaCapabilities(mediaConfig));
+            
+            expect(result.current.supported).toEqual(false);
+        })
     });
-
+    
     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 });
+        jest.isolateModules(() => {
+            const { useMediaCapabilities } = require('./');
+            const { result } = renderHook(() => useMediaCapabilities());
+            
+            expect(result.current.supported).toEqual(false);
+        })
     });
-
+    
     test('should return initialMediaCapabilities for unsupported', () => {
-        const initialMediaCapabilities = {
-            supported: true,
-            smooth: false,
-            powerEfficient: true
-        };
-
-        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);
+        jest.isolateModules(() => {
+            const initialMediaCapabilities = {
+                supported: true,
+                smooth: false,
+                powerEfficient: true
+            };
+            
+            const { useMediaCapabilities } = require('./');
+            const { result } = renderHook(() => useMediaCapabilities(mediaConfig, initialMediaCapabilities));
+            
+            expect(result.current.supported).toBe(true);
+            expect(result.current.smooth).toEqual(false);
+            expect(result.current.powerEfficient).toEqual(true);
+        });
     });
-
+    
     test('should return hasMediaConfig flag when no config given', () => {
-        Object.defineProperty(window.navigator, 'mediaCapabilities', {
-            value: true,
-            configurable: true,
-            writable: true
+        jest.isolateModules(() => {
+            global.navigator.mediaCapabilities = true
+            
+            const { useMediaCapabilities } = require('./');
+            const { result } = renderHook(() => useMediaCapabilities());
+            
+            expect(result.current.supported).toEqual(true);
         });
-        
-        const { result } = renderHook(() => useMediaCapabilities());
-        
-        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
-        });
+        jest.isolateModules(() => {
+            global.navigator.mediaCapabilities = {
+                decodingInfo: (mediaConfig) => new Promise(resolve => resolve(mediaCapabilitiesMapper[mediaConfig.audio.contentType]))
+            };
+            
+            const { useMediaCapabilities } = require('./');
+            const { result, waitForNextUpdate } = renderHook(() => useMediaCapabilities(mediaConfig));
 
-        const { result } = renderHook(() => useMediaCapabilities(mediaConfig));
-
-        expect(result.current.mediaCapabilities).toEqual({
-            powerEfficient: true,
-            smooth: true,
-            supported: true
+            waitForNextUpdate().then(() => {
+                expect(result.current.powerEfficient).toEqual(true);
+                expect(result.current.smooth).toEqual(true);
+                expect(result.current.supported).toEqual(true);
+            });
         });
     });
+
+    test('should update the mediaCapabilities state', () => {
+        jest.isolateModules(() => {
+            const { useMediaCapabilities } = require('./');
+            const { result } = renderHook(() => useMediaCapabilities());
+            
+            const mockMediaCapabilitiesStatus = {
+                powerEfficient: false,
+                smooth: false,
+                supported: false
+            };
+            
+            act(() => result.current.updateMediaCapabilities(mockMediaCapabilitiesStatus));
+            
+            expect(result.current.powerEfficient).toEqual(mockMediaCapabilitiesStatus.powerEfficient);
+            expect(result.current.smooth).toEqual(mockMediaCapabilitiesStatus.smooth);
+            expect(result.current.supported).toEqual(mockMediaCapabilitiesStatus.supported);
+        });
+    })
 });