@micromag/element-video 0.3.541 → 0.3.569

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/element-video",
-    "version": "0.3.541",
+    "version": "0.3.569",
     "private": false,
     "description": "",
     "keywords": [
@@ -30,11 +30,10 @@
         }
     ],
     "license": "ISC",
-    "main": "lib/index.js",
+    "type": "module",
     "module": "es/index.js",
     "exports": {
         ".": {
-            "require": "./lib/index.js",
             "import": "./es/index.js"
         },
         "./assets/css/styles": "./assets/css/styles.css",
@@ -60,8 +59,8 @@
     },
     "dependencies": {
         "@babel/runtime": "^7.13.10",
-        "@micromag/core": "^0.3.541",
-        "@micromag/element-closed-captions": "^0.3.541",
+        "@micromag/core": "^0.3.569",
+        "@micromag/element-closed-captions": "^0.3.569",
         "classnames": "^2.2.6",
         "lodash": "^4.17.21",
         "prop-types": "^15.7.2",
@@ -72,5 +71,5 @@
         "access": "public",
         "registry": "https://registry.npmjs.org/"
     },
-    "gitHead": "6c04a7e327b5fbc096785c11320b3fbd3c5751c8"
+    "gitHead": "ceb71f23a32ab8df4a1563a1e5cd5598e539de4d"
 }

package/lib/index.js

@@ -1,337 +0,0 @@
-'use strict';
-
-var _defineProperty = require('@babel/runtime/helpers/defineProperty');
-var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
-var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
-var classNames = require('classnames');
-var isFunction = require('lodash/isFunction');
-var PropTypes = require('prop-types');
-var React = require('react');
-var core = require('@micromag/core');
-var components = require('@micromag/core/components');
-var hooks = require('@micromag/core/hooks');
-var utils = require('@micromag/core/utils');
-
-var styles = {"container":"micromag-element-video-container","withSize":"micromag-element-video-withSize","media":"micromag-element-video-media","spinner":"micromag-element-video-spinner"};
-
-var propTypes = {
-  media: core.PropTypes.videoMedia,
-  thumbnail: PropTypes.oneOf([PropTypes.string, core.PropTypes.imageMedia]),
-  width: PropTypes.number,
-  height: PropTypes.number,
-  mediaRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
-    current: PropTypes.any
-  })]),
-  muted: PropTypes.bool,
-  autoPlay: PropTypes.bool,
-  paused: PropTypes.bool,
-  loop: PropTypes.bool,
-  playsInline: PropTypes.bool,
-  preload: PropTypes.oneOf(['auto', 'metadata', 'none', null]),
-  disablePictureInPicture: PropTypes.bool,
-  shouldLoad: PropTypes.bool,
-  withoutCors: PropTypes.bool,
-  className: PropTypes.string,
-  innerClassName: PropTypes.string,
-  onReady: PropTypes.func,
-  onPlay: PropTypes.func,
-  onPause: PropTypes.func,
-  onEnded: PropTypes.func,
-  onSeeked: PropTypes.func,
-  onTimeUpdate: PropTypes.func,
-  onProgressStep: PropTypes.func,
-  onDurationChange: PropTypes.func,
-  onVolumeChange: PropTypes.func,
-  onSuspend: PropTypes.func,
-  onSuspended: PropTypes.func,
-  onPlayError: PropTypes.func,
-  focusable: PropTypes.bool,
-  withPoster: PropTypes.bool,
-  withLoading: PropTypes.bool
-};
-var defaultProps = {
-  media: null,
-  thumbnail: null,
-  width: null,
-  height: null,
-  mediaRef: null,
-  muted: false,
-  autoPlay: false,
-  paused: false,
-  loop: false,
-  playsInline: true,
-  preload: 'auto',
-  disablePictureInPicture: true,
-  shouldLoad: true,
-  withoutCors: false,
-  className: null,
-  innerClassName: null,
-  onReady: null,
-  onPlay: null,
-  onPause: null,
-  onEnded: null,
-  onSeeked: null,
-  onTimeUpdate: null,
-  onProgressStep: null,
-  onDurationChange: null,
-  onVolumeChange: null,
-  onSuspend: null,
-  onSuspended: null,
-  onPlayError: null,
-  focusable: true,
-  withPoster: false,
-  withLoading: false
-};
-var Video = function Video(_ref) {
-  var media = _ref.media,
-    thumbnail = _ref.thumbnail,
-    width = _ref.width,
-    height = _ref.height,
-    mediaRef = _ref.mediaRef,
-    muted = _ref.muted,
-    autoPlay = _ref.autoPlay,
-    paused = _ref.paused,
-    loop = _ref.loop,
-    playsInline = _ref.playsInline,
-    preload = _ref.preload,
-    shouldLoad = _ref.shouldLoad,
-    withoutCors = _ref.withoutCors,
-    className = _ref.className,
-    innerClassName = _ref.innerClassName,
-    onReady = _ref.onReady,
-    customOnPlay = _ref.onPlay,
-    onPause = _ref.onPause,
-    onEnded = _ref.onEnded,
-    onSeeked = _ref.onSeeked,
-    onTimeUpdate = _ref.onTimeUpdate,
-    onProgressStep = _ref.onProgressStep,
-    customOnDurationChange = _ref.onDurationChange,
-    customOnVolumeChange = _ref.onVolumeChange,
-    customOnSuspend = _ref.onSuspend,
-    onSuspended = _ref.onSuspended,
-    onPlayError = _ref.onPlayError,
-    focusable = _ref.focusable,
-    withPoster = _ref.withPoster,
-    withLoading = _ref.withLoading,
-    disablePictureInPicture = _ref.disablePictureInPicture;
-  var _ref2 = media || {},
-    _ref2$url = _ref2.url,
-    mediaUrl = _ref2$url === void 0 ? null : _ref2$url,
-    _ref2$files = _ref2.files,
-    files = _ref2$files === void 0 ? null : _ref2$files,
-    _ref2$metadata = _ref2.metadata,
-    metadata = _ref2$metadata === void 0 ? null : _ref2$metadata;
-  var _ref3 = metadata || {},
-    _ref3$description = _ref3.description,
-    description = _ref3$description === void 0 ? null : _ref3$description,
-    _ref3$mime = _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 finalThumbnail = hooks.useMediaThumbnail(media, thumbnail);
-  var _ref11 = React.useRef(null);
-  var currentTime = hooks.useMediaCurrentTime(_ref11.current, {
-    id: mediaUrl,
-    disabled: paused || onProgressStep === null
-  });
-  var duration = hooks.useMediaDuration(_ref11.current, {
-    id: mediaUrl
-  });
-  var _useState = React.useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    showLoading = _useState2[0],
-    setShowLoading = _useState2[1];
-  var ready = hooks.useMediaReady(_ref11.current, {
-    id: mediaUrl
-  });
-  React.useEffect(function () {
-    var id = null;
-    setShowLoading(false);
-    if (mediaUrl && withLoading) {
-      id = setTimeout(function () {
-        setShowLoading(true);
-      }, 2000);
-    }
-    return function () {
-      clearTimeout(id);
-    };
-  }, [mediaUrl, withLoading]);
-  var sourceFiles = React.useMemo(function () {
-    if (filesArray.length === 0) {
-      return null;
-    }
-    var supportedMimes = utils.getVideoSupportedMimes();
-    if (supportedMimes.length === 0) {
-      return null;
-    }
-    var sourceFilesMap = filesArray.filter(function (file) {
-      var _file$mime = file.mime,
-        mime = _file$mime === void 0 ? "video/".concat(file.id === 'h264' ? 'mp4' : file.id) : _file$mime;
-      return supportedMimes.indexOf(mime) !== -1;
-    }).reduce(function (filesMap, file) {
-      var _file$mime2 = file.mime,
-        mime = _file$mime2 === void 0 ? "video/".concat(file.id === 'h264' ? 'mp4' : file.id) : _file$mime2;
-      var currentMimeFile = filesMap[mime] || null;
-      var _ref4 = currentMimeFile || {},
-        _ref4$id = _ref4.id,
-        currentMimeId = _ref4$id === void 0 ? null : _ref4$id;
-      return currentMimeFile === null || currentMimeId !== 'original' ? _objectSpread(_objectSpread({}, filesMap), {}, _defineProperty({}, mime, file)) : filesMap;
-    }, {});
-    return Object.keys(sourceFilesMap).map(function (mime) {
-      return sourceFilesMap[mime];
-    });
-  }, [filesArray]);
-
-  // @NOTE: Media is an animated image and doesn't have source files in video formats
-  var _ref5 = filesArray.find(function (_ref6) {
-      var handle = _ref6.handle;
-      return handle === 'original';
-    }) || {},
-    _ref5$type = _ref5.type,
-    originalType = _ref5$type === void 0 ? null : _ref5$type,
-    _ref5$mime = _ref5.mime,
-    originalMime = _ref5$mime === void 0 ? mediaMime : _ref5$mime;
-  var originalFileIsImage = originalType === 'image' || originalMime !== null && originalMime.indexOf('image/') === 0;
-  var isImageWithoutSourceFile = originalFileIsImage && (sourceFiles === null || sourceFiles.length === 0);
-  var withSize = width !== null && height !== null;
-  React.useEffect(function () {
-    if (duration > 0 && customOnDurationChange !== null) {
-      customOnDurationChange(duration);
-    }
-  }, [duration, customOnDurationChange]);
-  var onVolumeChange = React.useCallback(function () {
-    var _ref$current = _ref11.current,
-      element = _ref$current === void 0 ? null : _ref$current;
-    if (element === null) {
-      return;
-    }
-    if (customOnVolumeChange !== null) {
-      customOnVolumeChange(element.volume);
-    }
-  }, [customOnVolumeChange]);
-
-  // Manage suspend
-  var _useState3 = React.useState(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    isSuspended = _useState4[0],
-    setIsSuspended = _useState4[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]);
-  React.useEffect(function () {
-    if (ready && onReady !== null) {
-      onReady();
-    }
-  }, [ready, onReady]);
-  React.useEffect(function () {
-    var _ref$current2 = _ref11.current,
-      element = _ref$current2 === void 0 ? null : _ref$current2;
-    if (element === null) {
-      return;
-    }
-    var isPaused = element.paused;
-    if (paused && !isPaused) {
-      element.pause();
-    } else if (!paused && isPaused) {
-      element.play()["catch"](function (e) {
-        if (onPlayError !== null) {
-          onPlayError(e);
-        }
-      });
-    }
-  }, [paused, media, onPlayError]); // test media here for fun
-
-  hooks.useProgressSteps({
-    currentTime: currentTime,
-    duration: duration,
-    disabled: paused,
-    onStep: onProgressStep
-  });
-  return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles.container, _defineProperty(_defineProperty({}, className, className !== null), styles.withSize, withSize)]),
-    style: withSize ? {
-      width: width,
-      height: height
-    } : null
-  }, isImageWithoutSourceFile && shouldLoad ? /*#__PURE__*/React.createElement("img", {
-    src: mediaUrl,
-    alt: description,
-    tabIndex: "-1",
-    className: classNames([styles.media, _defineProperty({}, innerClassName, innerClassName !== null)])
-  }) : null, !isImageWithoutSourceFile ? /*#__PURE__*/React.createElement("video", {
-    key: mediaUrl,
-    ref: function ref(newRef) {
-      _ref11.current = newRef;
-      if (mediaRef !== null && isFunction(mediaRef)) {
-        mediaRef(newRef);
-      } else if (mediaRef !== null) {
-        mediaRef.current = newRef;
-      }
-    },
-    src: sourceFiles === null || sourceFiles.length === 0 ? "".concat(mediaUrl, "#t=0.1") : null,
-    autoPlay: autoPlay && !paused,
-    loop: loop,
-    muted: muted,
-    poster: shouldLoad && withPoster && finalThumbnail !== null ? finalThumbnail.url || null : null,
-    preload: shouldLoad ? preload : 'none',
-    playsInline: playsInline,
-    crossOrigin: withoutCors ? 'anonymous' : null,
-    disablePictureInPicture: disablePictureInPicture,
-    tabIndex: focusable ? '0' : '-1',
-    className: classNames([styles.media, _defineProperty({}, innerClassName, innerClassName !== null)]),
-    onPlay: onPlay,
-    onPlaying: onPlaying,
-    onPause: onPause,
-    onEnded: onEnded,
-    onSeeked: onSeeked,
-    onVolumeChange: onVolumeChange,
-    onTimeUpdate: onTimeUpdate,
-    onSuspend: onSuspend,
-    "data-has-audio": hasAudio,
-    "data-is-suspended": isSuspended,
-    "aria-hidden": true
-  }, (sourceFiles || []).map(function (_ref10) {
-    var sourceUrl = _ref10.url,
-      sourceMime = _ref10.mime;
-    return /*#__PURE__*/React.createElement("source", {
-      key: "".concat(sourceUrl, "-").concat(sourceMime),
-      src: sourceUrl !== null ? "".concat(sourceUrl, "#t=0.1") : null,
-      type: sourceMime
-    });
-  })) : null, !isImageWithoutSourceFile && !ready && showLoading ? /*#__PURE__*/React.createElement(components.Spinner, {
-    className: styles.spinner
-  }) : null);
-};
-Video.propTypes = propTypes;
-Video.defaultProps = defaultProps;
-var Video$1 = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  return /*#__PURE__*/React.createElement(Video, Object.assign({
-    mediaRef: ref
-  }, props));
-});
-
-module.exports = Video$1;