@micromag/element-video 0.3.168 → 0.3.172

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';
@@ -37,6 +38,7 @@ var propTypes = {
   onDurationChange: PropTypes$1.func,
   onVolumeChange: PropTypes$1.func,
   onSuspend: PropTypes$1.func,
+  onSuspended: PropTypes$1.func,
   focusable: PropTypes$1.bool,
   supportedMimes: PropTypes$1.arrayOf(PropTypes$1.string),
   withPoster: PropTypes$1.bool // onPosterLoaded: PropTypes.func,
@@ -67,6 +69,7 @@ var defaultProps = {
   onDurationChange: null,
   onVolumeChange: null,
   onSuspend: null,
+  onSuspended: null,
   focusable: true,
   supportedMimes: ['video/mp4', 'video/webm', 'video/ogg'],
   withPoster: false
@@ -90,7 +93,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 +101,8 @@ var Video = function Video(_ref) {
       onProgressStep = _ref.onProgressStep,
       customOnDurationChange = _ref.onDurationChange,
       customOnVolumeChange = _ref.onVolumeChange,
-      onSuspend = _ref.onSuspend,
+      customOnSuspend = _ref.onSuspend,
+      onSuspended = _ref.onSuspended,
       focusable = _ref.focusable,
       supportedMimes = _ref.supportedMimes,
       withPoster = _ref.withPoster;
@@ -203,7 +207,40 @@ var Video = function Video(_ref) {
     if (customOnVolumeChange !== null) {
       customOnVolumeChange(element.volume);
     }
-  }, [customOnVolumeChange]); // Ensure load if preload value change over time
+  }, [customOnVolumeChange]); // Manage suspend
+
+  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) {
+    if (e.currentTarget.paused && !paused && !isSuspended) {
+      setIsSuspended(true);
+
+      if (onSuspended !== null) {
+        onSuspended();
+      }
+    }
+
+    if (customOnSuspend !== null) {
+      customOnSuspend(e);
+    }
+  }, [isSuspended, paused, setIsSuspended, customOnSuspend, onSuspended]); // Ensure load if preload value change over time
 
   var firstPreloadRef = useRef(preload);
   var firstShouldLoadRef = useRef(shouldLoad);
@@ -280,13 +317,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);
@@ -48,6 +50,7 @@ var propTypes = {
   onDurationChange: PropTypes__default["default"].func,
   onVolumeChange: PropTypes__default["default"].func,
   onSuspend: PropTypes__default["default"].func,
+  onSuspended: PropTypes__default["default"].func,
   focusable: PropTypes__default["default"].bool,
   supportedMimes: PropTypes__default["default"].arrayOf(PropTypes__default["default"].string),
   withPoster: PropTypes__default["default"].bool // onPosterLoaded: PropTypes.func,
@@ -78,6 +81,7 @@ var defaultProps = {
   onDurationChange: null,
   onVolumeChange: null,
   onSuspend: null,
+  onSuspended: null,
   focusable: true,
   supportedMimes: ['video/mp4', 'video/webm', 'video/ogg'],
   withPoster: false
@@ -101,7 +105,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 +113,8 @@ var Video = function Video(_ref) {
       onProgressStep = _ref.onProgressStep,
       customOnDurationChange = _ref.onDurationChange,
       customOnVolumeChange = _ref.onVolumeChange,
-      onSuspend = _ref.onSuspend,
+      customOnSuspend = _ref.onSuspend,
+      onSuspended = _ref.onSuspended,
       focusable = _ref.focusable,
       supportedMimes = _ref.supportedMimes,
       withPoster = _ref.withPoster;
@@ -214,7 +219,40 @@ var Video = function Video(_ref) {
     if (customOnVolumeChange !== null) {
       customOnVolumeChange(element.volume);
     }
-  }, [customOnVolumeChange]); // Ensure load if preload value change over time
+  }, [customOnVolumeChange]); // Manage suspend
+
+  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) {
+    if (e.currentTarget.paused && !paused && !isSuspended) {
+      setIsSuspended(true);
+
+      if (onSuspended !== null) {
+        onSuspended();
+      }
+    }
+
+    if (customOnSuspend !== null) {
+      customOnSuspend(e);
+    }
+  }, [isSuspended, paused, setIsSuspended, customOnSuspend, onSuspended]); // Ensure load if preload value change over time
 
   var firstPreloadRef = React.useRef(preload);
   var firstShouldLoadRef = React.useRef(shouldLoad);
@@ -291,13 +329,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.168",
+    "version": "0.3.172",
     "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.168",
-        "@micromag/element-closed-captions": "^0.3.168",
-        "@micromag/element-media-controls": "^0.3.168",
+        "@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": "b1010cb410363b9350053a07784b0255c4d09027"
+    "gitHead": "2756b1548b925177e47e054ef31e0968b253b095"
 }