@micromag/element-video 0.3.166 → 0.3.170

package/es/index.js

@@ -1,9 +1,10 @@
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import classNames from 'classnames';
 import isFunction from 'lodash/isFunction';
 import PropTypes$1 from 'prop-types';
-import React, { useMemo, useRef, useEffect, useCallback } from 'react';
+import React, { useMemo, useRef, useEffect, useCallback, useState } from 'react';
 import { PropTypes } from '@micromag/core';
 import { useMediaThumbnail, useMediaCurrentTime, useMediaDuration, useMediaReady, useMediaLoad, useProgressSteps } from '@micromag/core/hooks';
 import { getMediaFilesAsArray } from '@micromag/core/utils';
@@ -90,7 +91,7 @@ var Video = function Video(_ref) {
       withoutCors = _ref.withoutCors,
       className = _ref.className,
       onReady = _ref.onReady,
-      onPlay = _ref.onPlay,
+      customOnPlay = _ref.onPlay,
       onPause = _ref.onPause,
       onEnded = _ref.onEnded,
       onSeeked = _ref.onSeeked,
@@ -98,7 +99,7 @@ var Video = function Video(_ref) {
       onProgressStep = _ref.onProgressStep,
       customOnDurationChange = _ref.onDurationChange,
       customOnVolumeChange = _ref.onVolumeChange,
-      onSuspend = _ref.onSuspend,
+      customOnSuspend = _ref.onSuspend,
       focusable = _ref.focusable,
       supportedMimes = _ref.supportedMimes,
       withPoster = _ref.withPoster;
@@ -203,7 +204,34 @@ var Video = function Video(_ref) {
     if (customOnVolumeChange !== null) {
       customOnVolumeChange(element.volume);
     }
-  }, [customOnVolumeChange]); // Ensure load if preload value change over time
+  }, [customOnVolumeChange]);
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isSuspended = _useState2[0],
+      setIsSuspended = _useState2[1];
+
+  var onPlay = useCallback(function (e) {
+    if (isSuspended) {
+      setIsSuspended(false);
+    }
+
+    if (customOnPlay !== null) {
+      customOnPlay(e);
+    }
+  }, [isSuspended, setIsSuspended, customOnPlay]);
+  var onPlaying = useCallback(function () {
+    if (isSuspended) {
+      setIsSuspended(false);
+    }
+  }, [isSuspended, setIsSuspended]);
+  var onSuspend = useCallback(function (e) {
+    setIsSuspended(true);
+
+    if (customOnSuspend !== null) {
+      customOnSuspend(e);
+    }
+  }, [setIsSuspended, customOnSuspend]); // Ensure load if preload value change over time
 
   var firstPreloadRef = useRef(preload);
   var firstShouldLoadRef = useRef(shouldLoad);
@@ -280,13 +308,15 @@ var Video = function Video(_ref) {
     tabIndex: focusable ? '0' : '-1',
     className: classNames(styles.video),
     onPlay: onPlay,
+    onPlaying: onPlaying,
     onPause: onPause,
     onEnded: onEnded,
     onSeeked: onSeeked,
     onVolumeChange: onVolumeChange,
     onTimeUpdate: onTimeUpdate,
     onSuspend: onSuspend,
-    "data-has-audio": hasAudio
+    "data-has-audio": hasAudio,
+    "data-is-suspended": isSuspended
   }, (sourceFiles || []).map(function (_ref8) {
     var sourceUrl = _ref8.url,
         sourceMime = _ref8.mime;

package/lib/index.js

@@ -1,5 +1,6 @@
 'use strict';
 
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
 var classNames = require('classnames');
@@ -12,6 +13,7 @@ var utils = require('@micromag/core/utils');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
+var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
 var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
 var _objectSpread__default = /*#__PURE__*/_interopDefaultLegacy(_objectSpread);
 var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
@@ -101,7 +103,7 @@ var Video = function Video(_ref) {
       withoutCors = _ref.withoutCors,
       className = _ref.className,
       onReady = _ref.onReady,
-      onPlay = _ref.onPlay,
+      customOnPlay = _ref.onPlay,
       onPause = _ref.onPause,
       onEnded = _ref.onEnded,
       onSeeked = _ref.onSeeked,
@@ -109,7 +111,7 @@ var Video = function Video(_ref) {
       onProgressStep = _ref.onProgressStep,
       customOnDurationChange = _ref.onDurationChange,
       customOnVolumeChange = _ref.onVolumeChange,
-      onSuspend = _ref.onSuspend,
+      customOnSuspend = _ref.onSuspend,
       focusable = _ref.focusable,
       supportedMimes = _ref.supportedMimes,
       withPoster = _ref.withPoster;
@@ -214,7 +216,34 @@ var Video = function Video(_ref) {
     if (customOnVolumeChange !== null) {
       customOnVolumeChange(element.volume);
     }
-  }, [customOnVolumeChange]); // Ensure load if preload value change over time
+  }, [customOnVolumeChange]);
+
+  var _useState = React.useState(false),
+      _useState2 = _slicedToArray__default["default"](_useState, 2),
+      isSuspended = _useState2[0],
+      setIsSuspended = _useState2[1];
+
+  var onPlay = React.useCallback(function (e) {
+    if (isSuspended) {
+      setIsSuspended(false);
+    }
+
+    if (customOnPlay !== null) {
+      customOnPlay(e);
+    }
+  }, [isSuspended, setIsSuspended, customOnPlay]);
+  var onPlaying = React.useCallback(function () {
+    if (isSuspended) {
+      setIsSuspended(false);
+    }
+  }, [isSuspended, setIsSuspended]);
+  var onSuspend = React.useCallback(function (e) {
+    setIsSuspended(true);
+
+    if (customOnSuspend !== null) {
+      customOnSuspend(e);
+    }
+  }, [setIsSuspended, customOnSuspend]); // Ensure load if preload value change over time
 
   var firstPreloadRef = React.useRef(preload);
   var firstShouldLoadRef = React.useRef(shouldLoad);
@@ -291,13 +320,15 @@ var Video = function Video(_ref) {
     tabIndex: focusable ? '0' : '-1',
     className: classNames__default["default"](styles.video),
     onPlay: onPlay,
+    onPlaying: onPlaying,
     onPause: onPause,
     onEnded: onEnded,
     onSeeked: onSeeked,
     onVolumeChange: onVolumeChange,
     onTimeUpdate: onTimeUpdate,
     onSuspend: onSuspend,
-    "data-has-audio": hasAudio
+    "data-has-audio": hasAudio,
+    "data-is-suspended": isSuspended
   }, (sourceFiles || []).map(function (_ref8) {
     var sourceUrl = _ref8.url,
         sourceMime = _ref8.mime;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/element-video",
-    "version": "0.3.166",
+    "version": "0.3.170",
     "description": "",
     "keywords": [
         "javascript"
@@ -52,9 +52,9 @@
         "@fortawesome/fontawesome-svg-core": "^1.2.32",
         "@fortawesome/free-solid-svg-icons": "^5.15.1",
         "@fortawesome/react-fontawesome": "^0.1.13",
-        "@micromag/core": "^0.3.166",
-        "@micromag/element-closed-captions": "^0.3.166",
-        "@micromag/element-media-controls": "^0.3.166",
+        "@micromag/core": "^0.3.169",
+        "@micromag/element-closed-captions": "^0.3.169",
+        "@micromag/element-media-controls": "^0.3.169",
         "classnames": "^2.2.6",
         "lodash": "^4.17.21",
         "prop-types": "^15.7.2",
@@ -64,5 +64,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "8e9777e36990e941b73a3cdb989e31872981de74"
+    "gitHead": "2aa04370d70f3bc7ee3992cad30b0877b23f5a20"
 }