Treat empty but idle video state as not loading

src/DefaultPlayer/DefaultPlayer.js

@@ -122,17 +122,26 @@ DefaultPlayer.propTypes = {
     video: PropTypes.object.isRequired
 };
 
+function isLoading(readyState, networkState, userAgent) {
+  if (readyState == 0 && networkState == 1) {
+    // If nothing fetched but idle likely preload=none so not loading.
+    return false;
+  }
+  // TODO: This is not pretty. Doing device detection to remove spinner on iOS
+  // devices for a quick and dirty win. We should see if we can use the same
+  // readyState check safely across all browsers.
+  const readyEnough = /iPad|iPhone|iPod/.test(userAgent) ? 1 : 4;
+  return readyState < readyEnough;
+}
+
 const connectedPlayer = videoConnect(
     DefaultPlayer,
     ({ networkState, readyState, error, ...restState }) => ({
         video: {
             readyState,
             networkState,
+            loading: isLoading(readyState, networkState, navigator.userAgent),
             error: error || networkState === 3,
-            // TODO: This is not pretty. Doing device detection to remove
-            // spinner on iOS devices for a quick and dirty win. We should see if
-            // we can use the same readyState check safely across all browsers.
-            loading: readyState < (/iPad|iPhone|iPod/.test(navigator.userAgent) ? 1 : 4),
             percentagePlayed: getPercentagePlayed(restState),
             percentageBuffered: getPercentageBuffered(restState),
             ...restState
@@ -151,6 +160,7 @@ const connectedPlayer = videoConnect(
 
 export {
     connectedPlayer as default,
+    isLoading,
     DefaultPlayer,
     Time,
     Seek,

src/DefaultPlayer/DefaultPlayer.test.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { shallow } from 'enzyme';
-import { DefaultPlayer } from './DefaultPlayer';
+import { DefaultPlayer, isLoading } from './DefaultPlayer';
 import styles from './DefaultPlayer.css';
 import Time from './Time/Time';
 import Seek from './Seek/Seek';
@@ -106,3 +106,32 @@ describe('DefaultPlayer', () => {
             .toBeFalsy();
     });
 });
+
+describe('isLoading', () => {
+    // https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/readyState
+    const HAVE_NOTHING = 0;
+    const HAVE_CURRENT_DATA = 2;
+    const HAVE_ENOUGH_DATA = 4;
+    // https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/networkState
+    const NETWORK_EMPTY = 0;
+    const NETWORK_IDLE = 1;
+    const NETWORK_LOADING = 2;
+
+    it('is true when empty', () => {
+      expect(isLoading(HAVE_NOTHING, NETWORK_EMPTY, 'Mozilla')).toBe(true);
+    });
+    it('is false when nothing and idle', () => {
+      expect(isLoading(HAVE_NOTHING, NETWORK_IDLE, 'Mozilla')).toBe(false);
+    });
+    it('depends on UA when current', () => {
+      expect(isLoading(HAVE_CURRENT_DATA, NETWORK_IDLE, 'Mozilla')).toBe(true);
+      expect(isLoading(HAVE_CURRENT_DATA, NETWORK_LOADING, 'Mozilla')).toBe(true);
+      expect(isLoading(HAVE_CURRENT_DATA, NETWORK_IDLE, 'iPad')).toBe(false);
+      expect(isLoading(HAVE_CURRENT_DATA, NETWORK_LOADING, 'iPad')).toBe(false);
+    });
+    it('is false when enough', () => {
+      expect(isLoading(HAVE_ENOUGH_DATA, NETWORK_IDLE, 'Mozilla')).toBe(false);
+      expect(isLoading(HAVE_ENOUGH_DATA, NETWORK_LOADING, 'Mozilla')).toBe(false);
+      expect(isLoading(HAVE_ENOUGH_DATA, NETWORK_IDLE, 'iPad')).toBe(false);
+    });
+});