@micromag/element-video 0.3.150 → 0.3.156

package/es/index.js

@@ -1,27 +1,26 @@
-import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 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, useEffect, useRef } from 'react';
+import React, { useMemo, useRef, useEffect, useCallback } from 'react';
 import { PropTypes } from '@micromag/core';
-import { useUserInteracted } from '@micromag/core/contexts';
-import { useMediaThumbnail, useMediaApi } from '@micromag/core/hooks';
+import { useMediaThumbnail, useMediaCurrentTime, useMediaDuration, useMediaReady, useMediaLoad, useProgressSteps } from '@micromag/core/hooks';
 import { getMediaFilesAsArray } from '@micromag/core/utils';
 
 var styles = {"container":"micromag-element-video-container","withSize":"micromag-element-video-withSize","video":"micromag-element-video-video"};
 
-var _excluded = ["ref"];
 var propTypes = {
   media: PropTypes.videoMedia,
-  thumbnailFile: PropTypes$1.string,
+  thumbnail: PropTypes$1.oneOf([PropTypes$1.string, PropTypes.imageMedia]),
   width: PropTypes$1.number,
   height: PropTypes$1.number,
-  apiRef: PropTypes$1.oneOfType([PropTypes$1.func, PropTypes$1.shape({
+  mediaRef: PropTypes$1.oneOfType([PropTypes$1.func, PropTypes$1.shape({
     current: PropTypes$1.any
   })]),
-  initialMuted: PropTypes$1.oneOf(['auto', true, false]),
+  muted: PropTypes$1.bool,
   autoPlay: PropTypes$1.bool,
+  paused: PropTypes$1.bool,
   loop: PropTypes$1.bool,
   playsInline: PropTypes$1.bool,
   preload: PropTypes$1.oneOf(['auto', 'metadata', 'none', null]),
@@ -30,15 +29,14 @@ var propTypes = {
   className: PropTypes$1.string,
   onReady: PropTypes$1.func,
   onPlay: PropTypes$1.func,
-  onCanPlay: PropTypes$1.func,
   onPause: PropTypes$1.func,
   onEnded: PropTypes$1.func,
   onSeeked: PropTypes$1.func,
   onTimeUpdate: PropTypes$1.func,
   onProgressStep: PropTypes$1.func,
-  onDurationChanged: PropTypes$1.func,
-  onVolumeChanged: PropTypes$1.func,
-  onSuspended: PropTypes$1.func,
+  onDurationChange: PropTypes$1.func,
+  onVolumeChange: PropTypes$1.func,
+  onSuspend: PropTypes$1.func,
   focusable: PropTypes$1.bool,
   supportedMimes: PropTypes$1.arrayOf(PropTypes$1.string),
   withPoster: PropTypes$1.bool // onPosterLoaded: PropTypes.func,
@@ -46,12 +44,13 @@ var propTypes = {
 };
 var defaultProps = {
   media: null,
-  thumbnailFile: null,
+  thumbnail: null,
   width: null,
   height: null,
-  apiRef: null,
-  initialMuted: 'auto',
+  mediaRef: null,
+  muted: false,
   autoPlay: false,
+  paused: false,
   loop: false,
   playsInline: true,
   preload: 'auto',
@@ -60,15 +59,14 @@ var defaultProps = {
   className: null,
   onReady: null,
   onPlay: null,
-  onCanPlay: null,
   onPause: null,
   onEnded: null,
   onSeeked: null,
   onTimeUpdate: null,
   onProgressStep: null,
-  onDurationChanged: null,
-  onVolumeChanged: null,
-  onSuspended: null,
+  onDurationChange: null,
+  onVolumeChange: null,
+  onSuspend: null,
   focusable: true,
   supportedMimes: ['video/mp4', 'video/webm', 'video/ogg'],
   withPoster: false
@@ -78,12 +76,13 @@ var Video = function Video(_ref) {
   var _ref7;
 
   var media = _ref.media,
-      thumbnailFile = _ref.thumbnailFile,
+      thumbnail = _ref.thumbnail,
       width = _ref.width,
       height = _ref.height,
-      apiRef = _ref.apiRef,
-      initialMuted = _ref.initialMuted,
+      mediaRef = _ref.mediaRef,
+      muted = _ref.muted,
       autoPlay = _ref.autoPlay,
+      paused = _ref.paused,
       loop = _ref.loop,
       playsInline = _ref.playsInline,
       preload = _ref.preload,
@@ -92,15 +91,14 @@ var Video = function Video(_ref) {
       className = _ref.className,
       onReady = _ref.onReady,
       onPlay = _ref.onPlay,
-      onCanPlay = _ref.onCanPlay,
       onPause = _ref.onPause,
       onEnded = _ref.onEnded,
       onSeeked = _ref.onSeeked,
       onTimeUpdate = _ref.onTimeUpdate,
       onProgressStep = _ref.onProgressStep,
-      onDurationChanged = _ref.onDurationChanged,
-      onVolumeChanged = _ref.onVolumeChanged,
-      onSuspended = _ref.onSuspended,
+      customOnDurationChange = _ref.onDurationChange,
+      customOnVolumeChange = _ref.onVolumeChange,
+      onSuspend = _ref.onSuspend,
       focusable = _ref.focusable,
       supportedMimes = _ref.supportedMimes,
       withPoster = _ref.withPoster;
@@ -117,12 +115,31 @@ var Video = function Video(_ref) {
       _ref3$description = _ref3.description,
       description = _ref3$description === void 0 ? null : _ref3$description,
       _ref3$mime = _ref3.mime,
-      mediaMime = _ref3$mime === void 0 ? null : _ref3$mime;
+      mediaMime = _ref3$mime === void 0 ? null : _ref3$mime,
+      _ref3$has_audio = _ref3.has_audio,
+      hasAudio = _ref3$has_audio === void 0 ? null : _ref3$has_audio;
 
   var filesArray = useMemo(function () {
     return getMediaFilesAsArray(files);
   }, [files]);
-  var thumbnailUrl = useMediaThumbnail(media, thumbnailFile); // Get source files with supported mimes
+  var finalThumbnail = useMediaThumbnail(media, thumbnail);
+
+  var _ref9 = useRef(null);
+
+  var currentTime = useMediaCurrentTime(_ref9.current, {
+    id: mediaUrl,
+    disabled: paused || onProgressStep === null
+  });
+  var duration = useMediaDuration(_ref9.current, {
+    id: mediaUrl
+  });
+  var ready = useMediaReady(_ref9.current, {
+    id: mediaUrl
+  });
+  useMediaLoad(_ref9.current, {
+    preload: preload,
+    shouldLoad: shouldLoad
+  }); // Get source files with supported mimes
 
   var sourceFiles = useMemo(function () {
     if (filesArray.length === 0) {
@@ -169,70 +186,68 @@ var Video = function Video(_ref) {
 
   var originalFileIsImage = originalType === 'image' || originalMime !== null && originalMime.indexOf('image/') === 0;
   var isImageWithoutSourceFile = originalFileIsImage && (sourceFiles === null || sourceFiles.length === 0);
-  var userInteracted = useUserInteracted();
-  var finalInitialMuted = initialMuted === true || initialMuted === 'auto' && autoPlay && !userInteracted;
-
-  var _useMediaApi = useMediaApi({
-    url: !isImageWithoutSourceFile ? mediaUrl : null,
-    initialMuted: finalInitialMuted,
-    onPlay: onPlay,
-    onCanPlay: onCanPlay,
-    onPause: onPause,
-    onEnded: onEnded,
-    onSeeked: onSeeked,
-    onTimeUpdate: onTimeUpdate,
-    onProgressStep: onProgressStep,
-    onDurationChanged: onDurationChanged,
-    onVolumeChanged: onVolumeChanged,
-    onSuspended: onSuspended
-  }),
-      ref = _useMediaApi.ref,
-      api = _objectWithoutProperties(_useMediaApi, _excluded);
-
-  if (apiRef !== null) {
-    apiRef.current = api;
-    apiRef.current.mediaRef = ref;
-  }
-
-  var muted = api.muted,
-      dataReady = api.dataReady,
-      play = api.play,
-      pause = api.pause,
-      unMute = api.unMute;
-  useEffect(function () {
-    if (dataReady && onReady !== null) {
-      onReady();
-    }
-  }, [dataReady, onReady]);
   var withSize = width !== null && height !== null;
   useEffect(function () {
-    if (autoPlay) {
-      play();
+    if (duration > 0 && customOnDurationChange !== null) {
+      customOnDurationChange(duration);
+    }
+  }, [duration, customOnDurationChange]);
+  var onVolumeChange = useCallback(function () {
+    var _ref$current = _ref9.current,
+        element = _ref$current === void 0 ? null : _ref$current;
 
-      if (initialMuted === 'auto' && muted && userInteracted) {
-        unMute();
-      }
-    } else {
-      pause();
+    if (element === null) {
+      return;
+    }
+
+    if (customOnVolumeChange !== null) {
+      customOnVolumeChange(element.volume);
     }
-  }, [autoPlay]); // Ensure load if preload value change over time
+  }, [customOnVolumeChange]); // Ensure load if preload value change over time
 
   var firstPreloadRef = useRef(preload);
   var firstShouldLoadRef = useRef(shouldLoad);
   var hasLoadedRef = useRef(preload !== 'none' && preload !== 'metadata' && shouldLoad);
   useEffect(function () {
-    var _ref$current = ref.current,
-        videoElement = _ref$current === void 0 ? null : _ref$current;
+    var _ref$current2 = _ref9.current,
+        element = _ref$current2 === void 0 ? null : _ref$current2;
     var canLoad = preload !== 'none' && preload !== 'metadata' && shouldLoad; // @todo
 
     var preloadHasChanged = firstPreloadRef.current !== preload;
     var shouldLoadHasChanged = firstShouldLoadRef.current !== shouldLoad;
 
-    if (canLoad && (preloadHasChanged || shouldLoadHasChanged) && !hasLoadedRef.current && videoElement !== null && typeof videoElement.load !== 'undefined') {
+    if (canLoad && (preloadHasChanged || shouldLoadHasChanged) && !hasLoadedRef.current && element !== null && typeof element.load !== 'undefined') {
       hasLoadedRef.current = true;
-      videoElement.load();
+      element.load();
     }
   }, [shouldLoad, preload]);
+  useEffect(function () {
+    if (ready && onReady !== null) {
+      onReady();
+    }
+  }, [ready, onReady]);
+  useEffect(function () {
+    var _ref$current3 = _ref9.current,
+        element = _ref$current3 === void 0 ? null : _ref$current3;
+
+    if (element === null) {
+      return;
+    }
+
+    var isPaused = element.paused;
+
+    if (paused && !isPaused) {
+      element.pause();
+    } else if (!paused && isPaused) {
+      element.play();
+    }
+  }, [paused]);
+  useProgressSteps({
+    currentTime: currentTime,
+    duration: duration,
+    disabled: paused,
+    onStep: onProgressStep
+  });
   return /*#__PURE__*/React.createElement("div", {
     className: classNames([styles.container, (_ref7 = {}, _defineProperty(_ref7, className, className !== null), _defineProperty(_ref7, styles.withSize, withSize), _ref7)]),
     style: withSize ? {
@@ -245,17 +260,33 @@ var Video = function Video(_ref) {
     className: styles.video
   }) : null, !isImageWithoutSourceFile ? /*#__PURE__*/React.createElement("video", {
     key: mediaUrl,
-    ref: ref,
+    ref: function ref(newRef) {
+      _ref9.current = newRef;
+
+      if (mediaRef !== null && isFunction(mediaRef)) {
+        mediaRef(newRef);
+      } else if (mediaRef !== null) {
+        mediaRef.current = newRef;
+      }
+    },
     src: sourceFiles === null || sourceFiles.length === 0 ? mediaUrl : null,
-    autoPlay: autoPlay,
+    autoPlay: autoPlay && !paused,
     loop: loop,
     muted: muted,
-    poster: shouldLoad && withPoster ? thumbnailUrl : null,
+    poster: shouldLoad && withPoster && finalThumbnail !== null ? finalThumbnail.url || null : null,
     preload: shouldLoad ? preload : 'none',
     playsInline: playsInline,
     crossOrigin: withoutCors ? 'anonymous' : null,
     tabIndex: focusable ? '0' : '-1',
-    className: classNames(styles.video)
+    className: classNames(styles.video),
+    onPlay: onPlay,
+    onPause: onPause,
+    onEnded: onEnded,
+    onSeeked: onSeeked,
+    onVolumeChange: onVolumeChange,
+    onTimeUpdate: onTimeUpdate,
+    onSuspend: onSuspend,
+    "data-has-audio": hasAudio
   }, (sourceFiles || []).map(function (_ref8) {
     var sourceUrl = _ref8.url,
         sourceMime = _ref8.mime;
@@ -271,7 +302,7 @@ Video.propTypes = propTypes;
 Video.defaultProps = defaultProps;
 var Video$1 = /*#__PURE__*/React.forwardRef(function (props, ref) {
   return /*#__PURE__*/React.createElement(Video, Object.assign({
-    apiRef: ref
+    mediaRef: ref
   }, props));
 });
 

package/lib/index.js

@@ -1,38 +1,37 @@
 'use strict';
 
-var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
 var classNames = require('classnames');
+var isFunction = require('lodash/isFunction');
 var PropTypes = require('prop-types');
 var React = require('react');
 var core = require('@micromag/core');
-var contexts = require('@micromag/core/contexts');
 var hooks = require('@micromag/core/hooks');
 var utils = require('@micromag/core/utils');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
 var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
 var _objectSpread__default = /*#__PURE__*/_interopDefaultLegacy(_objectSpread);
 var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
+var isFunction__default = /*#__PURE__*/_interopDefaultLegacy(isFunction);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 var styles = {"container":"micromag-element-video-container","withSize":"micromag-element-video-withSize","video":"micromag-element-video-video"};
 
-var _excluded = ["ref"];
 var propTypes = {
   media: core.PropTypes.videoMedia,
-  thumbnailFile: PropTypes__default["default"].string,
+  thumbnail: PropTypes__default["default"].oneOf([PropTypes__default["default"].string, core.PropTypes.imageMedia]),
   width: PropTypes__default["default"].number,
   height: PropTypes__default["default"].number,
-  apiRef: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].shape({
+  mediaRef: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].shape({
     current: PropTypes__default["default"].any
   })]),
-  initialMuted: PropTypes__default["default"].oneOf(['auto', true, false]),
+  muted: PropTypes__default["default"].bool,
   autoPlay: PropTypes__default["default"].bool,
+  paused: PropTypes__default["default"].bool,
   loop: PropTypes__default["default"].bool,
   playsInline: PropTypes__default["default"].bool,
   preload: PropTypes__default["default"].oneOf(['auto', 'metadata', 'none', null]),
@@ -41,15 +40,14 @@ var propTypes = {
   className: PropTypes__default["default"].string,
   onReady: PropTypes__default["default"].func,
   onPlay: PropTypes__default["default"].func,
-  onCanPlay: PropTypes__default["default"].func,
   onPause: PropTypes__default["default"].func,
   onEnded: PropTypes__default["default"].func,
   onSeeked: PropTypes__default["default"].func,
   onTimeUpdate: PropTypes__default["default"].func,
   onProgressStep: PropTypes__default["default"].func,
-  onDurationChanged: PropTypes__default["default"].func,
-  onVolumeChanged: PropTypes__default["default"].func,
-  onSuspended: PropTypes__default["default"].func,
+  onDurationChange: PropTypes__default["default"].func,
+  onVolumeChange: PropTypes__default["default"].func,
+  onSuspend: 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,
@@ -57,12 +55,13 @@ var propTypes = {
 };
 var defaultProps = {
   media: null,
-  thumbnailFile: null,
+  thumbnail: null,
   width: null,
   height: null,
-  apiRef: null,
-  initialMuted: 'auto',
+  mediaRef: null,
+  muted: false,
   autoPlay: false,
+  paused: false,
   loop: false,
   playsInline: true,
   preload: 'auto',
@@ -71,15 +70,14 @@ var defaultProps = {
   className: null,
   onReady: null,
   onPlay: null,
-  onCanPlay: null,
   onPause: null,
   onEnded: null,
   onSeeked: null,
   onTimeUpdate: null,
   onProgressStep: null,
-  onDurationChanged: null,
-  onVolumeChanged: null,
-  onSuspended: null,
+  onDurationChange: null,
+  onVolumeChange: null,
+  onSuspend: null,
   focusable: true,
   supportedMimes: ['video/mp4', 'video/webm', 'video/ogg'],
   withPoster: false
@@ -89,12 +87,13 @@ var Video = function Video(_ref) {
   var _ref7;
 
   var media = _ref.media,
-      thumbnailFile = _ref.thumbnailFile,
+      thumbnail = _ref.thumbnail,
       width = _ref.width,
       height = _ref.height,
-      apiRef = _ref.apiRef,
-      initialMuted = _ref.initialMuted,
+      mediaRef = _ref.mediaRef,
+      muted = _ref.muted,
       autoPlay = _ref.autoPlay,
+      paused = _ref.paused,
       loop = _ref.loop,
       playsInline = _ref.playsInline,
       preload = _ref.preload,
@@ -103,15 +102,14 @@ var Video = function Video(_ref) {
       className = _ref.className,
       onReady = _ref.onReady,
       onPlay = _ref.onPlay,
-      onCanPlay = _ref.onCanPlay,
       onPause = _ref.onPause,
       onEnded = _ref.onEnded,
       onSeeked = _ref.onSeeked,
       onTimeUpdate = _ref.onTimeUpdate,
       onProgressStep = _ref.onProgressStep,
-      onDurationChanged = _ref.onDurationChanged,
-      onVolumeChanged = _ref.onVolumeChanged,
-      onSuspended = _ref.onSuspended,
+      customOnDurationChange = _ref.onDurationChange,
+      customOnVolumeChange = _ref.onVolumeChange,
+      onSuspend = _ref.onSuspend,
       focusable = _ref.focusable,
       supportedMimes = _ref.supportedMimes,
       withPoster = _ref.withPoster;
@@ -128,12 +126,31 @@ var Video = function Video(_ref) {
       _ref3$description = _ref3.description,
       description = _ref3$description === void 0 ? null : _ref3$description,
       _ref3$mime = _ref3.mime,
-      mediaMime = _ref3$mime === void 0 ? null : _ref3$mime;
+      mediaMime = _ref3$mime === void 0 ? null : _ref3$mime,
+      _ref3$has_audio = _ref3.has_audio,
+      hasAudio = _ref3$has_audio === void 0 ? null : _ref3$has_audio;
 
   var filesArray = React.useMemo(function () {
     return utils.getMediaFilesAsArray(files);
   }, [files]);
-  var thumbnailUrl = hooks.useMediaThumbnail(media, thumbnailFile); // Get source files with supported mimes
+  var finalThumbnail = hooks.useMediaThumbnail(media, thumbnail);
+
+  var _ref9 = React.useRef(null);
+
+  var currentTime = hooks.useMediaCurrentTime(_ref9.current, {
+    id: mediaUrl,
+    disabled: paused || onProgressStep === null
+  });
+  var duration = hooks.useMediaDuration(_ref9.current, {
+    id: mediaUrl
+  });
+  var ready = hooks.useMediaReady(_ref9.current, {
+    id: mediaUrl
+  });
+  hooks.useMediaLoad(_ref9.current, {
+    preload: preload,
+    shouldLoad: shouldLoad
+  }); // Get source files with supported mimes
 
   var sourceFiles = React.useMemo(function () {
     if (filesArray.length === 0) {
@@ -180,70 +197,68 @@ var Video = function Video(_ref) {
 
   var originalFileIsImage = originalType === 'image' || originalMime !== null && originalMime.indexOf('image/') === 0;
   var isImageWithoutSourceFile = originalFileIsImage && (sourceFiles === null || sourceFiles.length === 0);
-  var userInteracted = contexts.useUserInteracted();
-  var finalInitialMuted = initialMuted === true || initialMuted === 'auto' && autoPlay && !userInteracted;
-
-  var _useMediaApi = hooks.useMediaApi({
-    url: !isImageWithoutSourceFile ? mediaUrl : null,
-    initialMuted: finalInitialMuted,
-    onPlay: onPlay,
-    onCanPlay: onCanPlay,
-    onPause: onPause,
-    onEnded: onEnded,
-    onSeeked: onSeeked,
-    onTimeUpdate: onTimeUpdate,
-    onProgressStep: onProgressStep,
-    onDurationChanged: onDurationChanged,
-    onVolumeChanged: onVolumeChanged,
-    onSuspended: onSuspended
-  }),
-      ref = _useMediaApi.ref,
-      api = _objectWithoutProperties__default["default"](_useMediaApi, _excluded);
-
-  if (apiRef !== null) {
-    apiRef.current = api;
-    apiRef.current.mediaRef = ref;
-  }
-
-  var muted = api.muted,
-      dataReady = api.dataReady,
-      play = api.play,
-      pause = api.pause,
-      unMute = api.unMute;
-  React.useEffect(function () {
-    if (dataReady && onReady !== null) {
-      onReady();
-    }
-  }, [dataReady, onReady]);
   var withSize = width !== null && height !== null;
   React.useEffect(function () {
-    if (autoPlay) {
-      play();
+    if (duration > 0 && customOnDurationChange !== null) {
+      customOnDurationChange(duration);
+    }
+  }, [duration, customOnDurationChange]);
+  var onVolumeChange = React.useCallback(function () {
+    var _ref$current = _ref9.current,
+        element = _ref$current === void 0 ? null : _ref$current;
 
-      if (initialMuted === 'auto' && muted && userInteracted) {
-        unMute();
-      }
-    } else {
-      pause();
+    if (element === null) {
+      return;
+    }
+
+    if (customOnVolumeChange !== null) {
+      customOnVolumeChange(element.volume);
     }
-  }, [autoPlay]); // Ensure load if preload value change over time
+  }, [customOnVolumeChange]); // Ensure load if preload value change over time
 
   var firstPreloadRef = React.useRef(preload);
   var firstShouldLoadRef = React.useRef(shouldLoad);
   var hasLoadedRef = React.useRef(preload !== 'none' && preload !== 'metadata' && shouldLoad);
   React.useEffect(function () {
-    var _ref$current = ref.current,
-        videoElement = _ref$current === void 0 ? null : _ref$current;
+    var _ref$current2 = _ref9.current,
+        element = _ref$current2 === void 0 ? null : _ref$current2;
     var canLoad = preload !== 'none' && preload !== 'metadata' && shouldLoad; // @todo
 
     var preloadHasChanged = firstPreloadRef.current !== preload;
     var shouldLoadHasChanged = firstShouldLoadRef.current !== shouldLoad;
 
-    if (canLoad && (preloadHasChanged || shouldLoadHasChanged) && !hasLoadedRef.current && videoElement !== null && typeof videoElement.load !== 'undefined') {
+    if (canLoad && (preloadHasChanged || shouldLoadHasChanged) && !hasLoadedRef.current && element !== null && typeof element.load !== 'undefined') {
       hasLoadedRef.current = true;
-      videoElement.load();
+      element.load();
     }
   }, [shouldLoad, preload]);
+  React.useEffect(function () {
+    if (ready && onReady !== null) {
+      onReady();
+    }
+  }, [ready, onReady]);
+  React.useEffect(function () {
+    var _ref$current3 = _ref9.current,
+        element = _ref$current3 === void 0 ? null : _ref$current3;
+
+    if (element === null) {
+      return;
+    }
+
+    var isPaused = element.paused;
+
+    if (paused && !isPaused) {
+      element.pause();
+    } else if (!paused && isPaused) {
+      element.play();
+    }
+  }, [paused]);
+  hooks.useProgressSteps({
+    currentTime: currentTime,
+    duration: duration,
+    disabled: paused,
+    onStep: onProgressStep
+  });
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: classNames__default["default"]([styles.container, (_ref7 = {}, _defineProperty__default["default"](_ref7, className, className !== null), _defineProperty__default["default"](_ref7, styles.withSize, withSize), _ref7)]),
     style: withSize ? {
@@ -256,17 +271,33 @@ var Video = function Video(_ref) {
     className: styles.video
   }) : null, !isImageWithoutSourceFile ? /*#__PURE__*/React__default["default"].createElement("video", {
     key: mediaUrl,
-    ref: ref,
+    ref: function ref(newRef) {
+      _ref9.current = newRef;
+
+      if (mediaRef !== null && isFunction__default["default"](mediaRef)) {
+        mediaRef(newRef);
+      } else if (mediaRef !== null) {
+        mediaRef.current = newRef;
+      }
+    },
     src: sourceFiles === null || sourceFiles.length === 0 ? mediaUrl : null,
-    autoPlay: autoPlay,
+    autoPlay: autoPlay && !paused,
     loop: loop,
     muted: muted,
-    poster: shouldLoad && withPoster ? thumbnailUrl : null,
+    poster: shouldLoad && withPoster && finalThumbnail !== null ? finalThumbnail.url || null : null,
     preload: shouldLoad ? preload : 'none',
     playsInline: playsInline,
     crossOrigin: withoutCors ? 'anonymous' : null,
     tabIndex: focusable ? '0' : '-1',
-    className: classNames__default["default"](styles.video)
+    className: classNames__default["default"](styles.video),
+    onPlay: onPlay,
+    onPause: onPause,
+    onEnded: onEnded,
+    onSeeked: onSeeked,
+    onVolumeChange: onVolumeChange,
+    onTimeUpdate: onTimeUpdate,
+    onSuspend: onSuspend,
+    "data-has-audio": hasAudio
   }, (sourceFiles || []).map(function (_ref8) {
     var sourceUrl = _ref8.url,
         sourceMime = _ref8.mime;
@@ -282,7 +313,7 @@ Video.propTypes = propTypes;
 Video.defaultProps = defaultProps;
 var Video$1 = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
   return /*#__PURE__*/React__default["default"].createElement(Video, Object.assign({
-    apiRef: ref
+    mediaRef: ref
   }, props));
 });
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/element-video",
-    "version": "0.3.150",
+    "version": "0.3.156",
     "description": "",
     "keywords": [
         "javascript"
@@ -52,10 +52,11 @@
         "@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.150",
-        "@micromag/element-closed-captions": "^0.3.150",
-        "@micromag/element-media-controls": "^0.3.150",
+        "@micromag/core": "^0.3.156",
+        "@micromag/element-closed-captions": "^0.3.156",
+        "@micromag/element-media-controls": "^0.3.156",
         "classnames": "^2.2.6",
+        "lodash": "^4.17.21",
         "prop-types": "^15.7.2",
         "react-intl": "^5.12.1",
         "uuid": "^8.3.2"
@@ -63,5 +64,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "c9441be7a115a52416883e404feeca422af4f2da"
+    "gitHead": "026d0eb445367f824d3d07a04a0fa90cc00d49f2"
 }