@micromag/core 0.4.63 → 0.4.65

package/es/hooks.d.ts

@@ -153,12 +153,12 @@ declare const useMediaBuffering: (mediaElement?: any, interval?: number) => {
     buffering: boolean;
 };
 
-declare const useMediaState: (mediaElement?: any, { playing: wantedPlaying, muted: wantedMuted }?: {
+declare const useMediaState: (mediaElement?: HTMLMediaElement | null, { playing: wantedPlaying, muted: wantedMuted }?: {
     playing?: boolean;
     muted?: boolean;
 }) => {
     playing: boolean;
-    muted: any;
+    muted: boolean;
     buffering: boolean;
 };
 
@@ -180,8 +180,8 @@ declare function useMediaLoad(element: any, { preload, shouldLoad }?: {
 
 declare function useMediaProgress(media?: any, options?: any): number;
 
-declare function useMediaReady(element: any, { id }?: {
-    id?: any;
+declare function useMediaReady(element: HTMLMediaElement | null, { id }?: {
+    id?: string | null;
 }): boolean;
 
 declare function useMediaTimestampOffset(element: any, { attributeName }?: {

package/es/hooks.js

@@ -15,12 +15,12 @@ import isArray from 'lodash/isArray';
 import isObject from 'lodash/isObject';
 import raf from 'raf';
 import createDebug from 'debug';
-import isString from 'lodash/isString';
 import { useScreensManager, useFieldsManager, useTracking, useScreen } from '@micromag/core/contexts';
 import isEmpty from 'lodash/isEmpty';
 import { useWindowSize } from '@folklore/hooks';
 import { match } from 'css-mediaquery';
 import dayjs from 'dayjs';
+import isString from 'lodash/isString';
 import { useIntl } from 'react-intl';
 import clamp from 'lodash/clamp';
 
@@ -1358,10 +1358,11 @@ var useMediaState = function useMediaState() {
     wantedPlaying = _ref$playing === void 0 ? false : _ref$playing,
     _ref$muted = _ref.muted,
     wantedMuted = _ref$muted === void 0 ? false : _ref$muted;
+  var src = mediaElement !== null ? mediaElement.currentSrc || mediaElement.src : null;
   var debug = useMemo(function () {
-    var mediaKey = mediaElement !== null && isString(mediaElement.src) ? mediaElement.src.split('/')[mediaElement.src.split('/').length - 1].split('#')[0] || null : null;
+    var mediaKey = src !== null ? src.split('/')[src.split('/').length - 1].split('#')[0] || null : null;
     return createDebug(mediaKey !== null ? "micromag:media:".concat(mediaKey) : 'micromag:media');
-  }, [mediaElement]);
+  }, [src]);
   var _useState = useState(wantedPlaying),
     _useState2 = _slicedToArray(_useState, 2),
     playing = _useState2[0],
@@ -1391,20 +1392,20 @@ var useMediaState = function useMediaState() {
         wantedMuted: wantedMuted
       });
     }
-  }, [mediaElement, debug, wantedPlaying, wantedMuted]);
+  }, [mediaElement, src, debug, wantedPlaying, wantedMuted]);
   useEffect(function () {
     if (mediaElement === null) {
       return function () {};
     }
     function onBufferingEvent(e) {
       // networkstate
-      if (mediaElement.networkState === mediaElement.NETWORK_LOADING) {
+      if (mediaElement !== null && mediaElement.networkState === mediaElement.NETWORK_LOADING) {
         debug('onBufferingEvent: NETWORK_LOADING');
         setBuffering(true);
       }
 
       // readystate
-      if (mediaElement.readyState < mediaElement.HAVE_FUTURE_DATA) {
+      if (mediaElement !== null && mediaElement.readyState < mediaElement.HAVE_FUTURE_DATA) {
         debug('onBufferingEvent: HAVE_FUTURE_DATA');
         setBuffering(true);
       }
@@ -1468,7 +1469,7 @@ var useMediaState = function useMediaState() {
       mediaElement.removeEventListener('ended', onEnded);
       mediaElement.removeEventListener('volumechange', onVolumeChange);
     };
-  }, [mediaElement, debug]);
+  }, [mediaElement, debug, src]);
   return {
     playing: playing,
     muted: muted,
@@ -1773,10 +1774,10 @@ function useMediaReady(element) {
     }
     function updateReady() {
       var currentReady = ready;
-      if (element.readyState > 0 && !ready) {
+      if (element !== null && element.readyState > 0 && !ready) {
         setReady(true);
         currentReady = true;
-      } else if (ready && element.readyState === 0) {
+      } else if (ready && element !== null && element.readyState === 0) {
         setReady(false);
         currentReady = false;
       }
@@ -1784,17 +1785,20 @@ function useMediaReady(element) {
       return currentReady;
     }
     var currentReady = updateReady();
-    if (!currentReady) {
-      element.addEventListener('loadedmetadata', updateReady);
-      element.addEventListener('canplay', updateReady);
-      element.addEventListener('canplaythrough', updateReady);
+    if (currentReady) {
+      return function () {};
     }
+    element.addEventListener('loadstart', updateReady);
+    element.addEventListener('loadeddata', updateReady);
+    element.addEventListener('loadedmetadata', updateReady);
+    element.addEventListener('canplay', updateReady);
+    element.addEventListener('canplaythrough', updateReady);
     return function () {
-      if (!currentReady) {
-        element.removeEventListener('loadedmetadata', updateReady);
-        element.removeEventListener('canplay', updateReady);
-        element.removeEventListener('canplaythrough', updateReady);
-      }
+      element.removeEventListener('loadstart', updateReady);
+      element.removeEventListener('loadeddata', updateReady);
+      element.removeEventListener('loadedmetadata', updateReady);
+      element.removeEventListener('canplay', updateReady);
+      element.removeEventListener('canplaythrough', updateReady);
     };
   }, [element, id]);
   return realReady.current;

package/lib/hooks.js

@@ -17,12 +17,12 @@ var isArray = require('lodash/isArray');
 var isObject = require('lodash/isObject');
 var raf = require('raf');
 var createDebug = require('debug');
-var isString = require('lodash/isString');
 var contexts = require('@micromag/core/contexts');
 var isEmpty = require('lodash/isEmpty');
 var hooks = require('@folklore/hooks');
 var cssMediaquery = require('css-mediaquery');
 var dayjs = require('dayjs');
+var isString = require('lodash/isString');
 var reactIntl = require('react-intl');
 var clamp = require('lodash/clamp');
 
@@ -1360,10 +1360,11 @@ var useMediaState = function useMediaState() {
     wantedPlaying = _ref$playing === void 0 ? false : _ref$playing,
     _ref$muted = _ref.muted,
     wantedMuted = _ref$muted === void 0 ? false : _ref$muted;
+  var src = mediaElement !== null ? mediaElement.currentSrc || mediaElement.src : null;
   var debug = react.useMemo(function () {
-    var mediaKey = mediaElement !== null && isString(mediaElement.src) ? mediaElement.src.split('/')[mediaElement.src.split('/').length - 1].split('#')[0] || null : null;
+    var mediaKey = src !== null ? src.split('/')[src.split('/').length - 1].split('#')[0] || null : null;
     return createDebug(mediaKey !== null ? "micromag:media:".concat(mediaKey) : 'micromag:media');
-  }, [mediaElement]);
+  }, [src]);
   var _useState = react.useState(wantedPlaying),
     _useState2 = _slicedToArray(_useState, 2),
     playing = _useState2[0],
@@ -1393,20 +1394,20 @@ var useMediaState = function useMediaState() {
         wantedMuted: wantedMuted
       });
     }
-  }, [mediaElement, debug, wantedPlaying, wantedMuted]);
+  }, [mediaElement, src, debug, wantedPlaying, wantedMuted]);
   react.useEffect(function () {
     if (mediaElement === null) {
       return function () {};
     }
     function onBufferingEvent(e) {
       // networkstate
-      if (mediaElement.networkState === mediaElement.NETWORK_LOADING) {
+      if (mediaElement !== null && mediaElement.networkState === mediaElement.NETWORK_LOADING) {
         debug('onBufferingEvent: NETWORK_LOADING');
         setBuffering(true);
       }
 
       // readystate
-      if (mediaElement.readyState < mediaElement.HAVE_FUTURE_DATA) {
+      if (mediaElement !== null && mediaElement.readyState < mediaElement.HAVE_FUTURE_DATA) {
         debug('onBufferingEvent: HAVE_FUTURE_DATA');
         setBuffering(true);
       }
@@ -1470,7 +1471,7 @@ var useMediaState = function useMediaState() {
       mediaElement.removeEventListener('ended', onEnded);
       mediaElement.removeEventListener('volumechange', onVolumeChange);
     };
-  }, [mediaElement, debug]);
+  }, [mediaElement, debug, src]);
   return {
     playing: playing,
     muted: muted,
@@ -1775,10 +1776,10 @@ function useMediaReady(element) {
     }
     function updateReady() {
       var currentReady = ready;
-      if (element.readyState > 0 && !ready) {
+      if (element !== null && element.readyState > 0 && !ready) {
         setReady(true);
         currentReady = true;
-      } else if (ready && element.readyState === 0) {
+      } else if (ready && element !== null && element.readyState === 0) {
         setReady(false);
         currentReady = false;
       }
@@ -1786,17 +1787,20 @@ function useMediaReady(element) {
       return currentReady;
     }
     var currentReady = updateReady();
-    if (!currentReady) {
-      element.addEventListener('loadedmetadata', updateReady);
-      element.addEventListener('canplay', updateReady);
-      element.addEventListener('canplaythrough', updateReady);
+    if (currentReady) {
+      return function () {};
     }
+    element.addEventListener('loadstart', updateReady);
+    element.addEventListener('loadeddata', updateReady);
+    element.addEventListener('loadedmetadata', updateReady);
+    element.addEventListener('canplay', updateReady);
+    element.addEventListener('canplaythrough', updateReady);
     return function () {
-      if (!currentReady) {
-        element.removeEventListener('loadedmetadata', updateReady);
-        element.removeEventListener('canplay', updateReady);
-        element.removeEventListener('canplaythrough', updateReady);
-      }
+      element.removeEventListener('loadstart', updateReady);
+      element.removeEventListener('loadeddata', updateReady);
+      element.removeEventListener('loadedmetadata', updateReady);
+      element.removeEventListener('canplay', updateReady);
+      element.removeEventListener('canplaythrough', updateReady);
     };
   }, [element, id]);
   return realReady.current;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/core",
-    "version": "0.4.63",
+    "version": "0.4.65",
     "private": false,
     "description": "",
     "keywords": [
@@ -161,6 +161,6 @@
         "access": "public",
         "registry": "https://registry.npmjs.org/"
     },
-    "gitHead": "0a6df1a5352c067c3296377d26fadb9b71244345",
+    "gitHead": "33460a352e56298ae450392b04c09503ecfeae05",
     "types": "es/index.d.ts"
 }