@micromag/screen-video 0.3.541 → 0.3.569

package/es/index.js

@@ -381,7 +381,6 @@ var VideoScreen = function VideoScreen(_ref) {
 };
 VideoScreen.propTypes = propTypes;
 VideoScreen.defaultProps = defaultProps;
-var VideoScreen$1 = VideoScreen;
 
 var definition = {
   id: 'video',
@@ -403,7 +402,7 @@ var definition = {
       "value": "Video"
     }]
   }),
-  component: VideoScreen$1,
+  component: VideoScreen,
   layouts: ['middle', 'full'],
   // transforms,
   fields: [{
@@ -493,4 +492,4 @@ var definition = {
   }]
 };
 
-export { VideoScreen$1 as VideoScreen, definition as default };
+export { VideoScreen, definition as default };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/screen-video",
-    "version": "0.3.541",
+    "version": "0.3.569",
     "private": false,
     "description": "",
     "keywords": [
@@ -30,12 +30,11 @@
         }
     ],
     "license": "ISC",
-    "main": "lib/index.js",
+    "type": "module",
     "module": "es/index.js",
     "style": "assets/css/styles.css",
     "exports": {
         ".": {
-            "require": "./lib/index.js",
             "import": "./es/index.js"
         },
         "./assets/css/styles": "./assets/css/styles.css",
@@ -62,15 +61,15 @@
     "dependencies": {
         "@babel/runtime": "^7.13.10",
         "@folklore/size": "^0.1.20",
-        "@micromag/core": "^0.3.541",
-        "@micromag/element-background": "^0.3.541",
-        "@micromag/element-closed-captions": "^0.3.541",
-        "@micromag/element-container": "^0.3.541",
-        "@micromag/element-footer": "^0.3.541",
-        "@micromag/element-header": "^0.3.541",
-        "@micromag/element-image": "^0.3.541",
-        "@micromag/element-video": "^0.3.541",
-        "@micromag/transforms": "^0.3.541",
+        "@micromag/core": "^0.3.569",
+        "@micromag/element-background": "^0.3.569",
+        "@micromag/element-closed-captions": "^0.3.569",
+        "@micromag/element-container": "^0.3.569",
+        "@micromag/element-footer": "^0.3.569",
+        "@micromag/element-header": "^0.3.569",
+        "@micromag/element-image": "^0.3.569",
+        "@micromag/element-video": "^0.3.569",
+        "@micromag/transforms": "^0.3.569",
         "classnames": "^2.2.6",
         "lodash": "^4.17.21",
         "prop-types": "^15.7.2",
@@ -81,5 +80,5 @@
         "access": "public",
         "registry": "https://registry.npmjs.org/"
     },
-    "gitHead": "6c04a7e327b5fbc096785c11320b3fbd3c5751c8"
+    "gitHead": "ceb71f23a32ab8df4a1563a1e5cd5598e539de4d"
 }

package/lib/index.js

@@ -1,501 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var reactIntl = require('react-intl');
-var _defineProperty = require('@babel/runtime/helpers/defineProperty');
-var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
-var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
-var size = require('@folklore/size');
-var classNames = require('classnames');
-var PropTypes = require('prop-types');
-var React = require('react');
-var core = require('@micromag/core');
-var components = require('@micromag/core/components');
-var contexts = require('@micromag/core/contexts');
-var hooks = require('@micromag/core/hooks');
-var utils = require('@micromag/core/utils');
-var Background = require('@micromag/element-background');
-var ClosedCaptions = require('@micromag/element-closed-captions');
-var Container = require('@micromag/element-container');
-var Footer = require('@micromag/element-footer');
-var Header = require('@micromag/element-header');
-var Image = require('@micromag/element-image');
-var Video = require('@micromag/element-video');
-
-var styles = {"unmuteAndPlayButton":"micromag-screen-video-unmuteAndPlayButton","container":"micromag-screen-video-container","fullscreen":"micromag-screen-video-fullscreen","image":"micromag-screen-video-image","video":"micromag-screen-video-video","placeholder":"micromag-screen-video-placeholder","inner":"micromag-screen-video-inner","empty":"micromag-screen-video-empty","emptyContainer":"micromag-screen-video-emptyContainer","background":"micromag-screen-video-background","disabled":"micromag-screen-video-disabled","hidden":"micromag-screen-video-hidden","content":"micromag-screen-video-content","header":"micromag-screen-video-header","bottom":"micromag-screen-video-bottom","videoContainer":"micromag-screen-video-videoContainer"};
-
-var propTypes = {
-  layout: PropTypes.oneOf(['middle', 'full']),
-  video: core.PropTypes.videoElement,
-  gotoNextScreenOnEnd: PropTypes.bool,
-  header: core.PropTypes.header,
-  footer: core.PropTypes.footer,
-  background: core.PropTypes.backgroundElement,
-  current: PropTypes.bool,
-  active: PropTypes.bool,
-  spacing: PropTypes.number,
-  mediaRef: PropTypes.func,
-  className: PropTypes.string
-};
-var defaultProps = {
-  layout: 'middle',
-  video: null,
-  gotoNextScreenOnEnd: false,
-  header: null,
-  footer: null,
-  background: null,
-  current: true,
-  active: true,
-  spacing: 20,
-  mediaRef: null,
-  className: null
-};
-var VideoScreen = function VideoScreen(_ref) {
-  var layout = _ref.layout,
-    video = _ref.video,
-    gotoNextScreenOnEnd = _ref.gotoNextScreenOnEnd,
-    header = _ref.header,
-    footer = _ref.footer,
-    background = _ref.background,
-    current = _ref.current,
-    active = _ref.active,
-    spacing = _ref.spacing,
-    customMediaRef = _ref.mediaRef,
-    className = _ref.className;
-  var trackScreenMedia = hooks.useTrackScreenMedia('video');
-  var _useScreenSize = contexts.useScreenSize(),
-    width = _useScreenSize.width,
-    height = _useScreenSize.height,
-    resolution = _useScreenSize.resolution;
-  var _useScreenRenderConte = contexts.useScreenRenderContext(),
-    isView = _useScreenRenderConte.isView,
-    isPreview = _useScreenRenderConte.isPreview,
-    isPlaceholder = _useScreenRenderConte.isPlaceholder,
-    isEdit = _useScreenRenderConte.isEdit,
-    isStatic = _useScreenRenderConte.isStatic,
-    isCapture = _useScreenRenderConte.isCapture;
-  var _useViewerNavigation = contexts.useViewerNavigation(),
-    gotoNextScreen = _useViewerNavigation.gotoNextScreen;
-  var _useViewerContext = contexts.useViewerContext(),
-    viewerTopHeight = _useViewerContext.topHeight,
-    viewerBottomHeight = _useViewerContext.bottomHeight,
-    viewerBottomSidesWidth = _useViewerContext.bottomSidesWidth;
-  var _useViewerWebView = contexts.useViewerWebView(),
-    openWebView = _useViewerWebView.open;
-  var mediaShouldLoad = current || active;
-  var shouldGotoNextScreenOnEnd = gotoNextScreenOnEnd && isView && current;
-  var _ref2 = video || {},
-    _ref2$autoPlay = _ref2.autoPlay,
-    autoPlay = _ref2$autoPlay === void 0 ? true : _ref2$autoPlay,
-    _ref2$loop = _ref2.loop,
-    loop = _ref2$loop === void 0 ? false : _ref2$loop,
-    _ref2$media = _ref2.media,
-    videoMedia = _ref2$media === void 0 ? null : _ref2$media,
-    _ref2$thumbnail = _ref2.thumbnail,
-    thumbnail = _ref2$thumbnail === void 0 ? null : _ref2$thumbnail,
-    _ref2$captions = _ref2.captions,
-    captions = _ref2$captions === void 0 ? null : _ref2$captions,
-    _ref2$closedCaptions = _ref2.closedCaptions,
-    closedCaptions = _ref2$closedCaptions === void 0 ? null : _ref2$closedCaptions,
-    _ref2$withSeekBar = _ref2.withSeekBar,
-    withSeekBar = _ref2$withSeekBar === void 0 ? false : _ref2$withSeekBar,
-    _ref2$withControls = _ref2.withControls,
-    withControls = _ref2$withControls === void 0 ? false : _ref2$withControls,
-    _ref2$color = _ref2.color,
-    color = _ref2$color === void 0 ? null : _ref2$color,
-    _ref2$progressColor = _ref2.progressColor,
-    progressColor = _ref2$progressColor === void 0 ? null : _ref2$progressColor;
-  var _usePlaybackContext = contexts.usePlaybackContext(),
-    playing = _usePlaybackContext.playing,
-    muted = _usePlaybackContext.muted,
-    setControls = _usePlaybackContext.setControls,
-    setControlsSuggestPlay = _usePlaybackContext.setControlsSuggestPlay,
-    setControlsTheme = _usePlaybackContext.setControlsTheme,
-    setPlaying = _usePlaybackContext.setPlaying,
-    controlsVisible = _usePlaybackContext.controlsVisible,
-    showControls = _usePlaybackContext.showControls,
-    hideControls = _usePlaybackContext.hideControls;
-  var mediaRef = contexts.usePlaybackMediaRef(current);
-  var _useState = React.useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    hasPlayed = _useState2[0],
-    setHasPlayed = _useState2[1];
-  var backgroundPlaying = current && (isView || isEdit);
-  var videoPlaying = current && (isView || isEdit) && playing;
-  var shouldDisplayPoster = isPreview || isCapture;
-  React.useEffect(function () {
-    if (!current) {
-      return function () {};
-    }
-    setControlsTheme({
-      seekBarOnly: withSeekBar && !withControls,
-      color: color,
-      progressColor: progressColor
-    });
-    if (withControls || withSeekBar) {
-      setControls(true);
-    } else {
-      setControls(false);
-    }
-    return function () {
-      if (withControls || withSeekBar) {
-        setControls(false);
-      }
-    };
-  }, [current, withControls, setControls, withSeekBar, color, progressColor]);
-  React.useEffect(function () {
-    if (customMediaRef !== null) {
-      customMediaRef(mediaRef.current);
-    }
-  }, [mediaRef.current]);
-  React.useEffect(function () {
-    if (current && autoPlay) {
-      setPlaying(true);
-    }
-  }, [current, autoPlay]);
-  var viewerContainer = contexts.useViewerContainer();
-  var _useActivityDetector = hooks.useActivityDetector({
-      element: viewerContainer,
-      disabled: !isView,
-      timeout: 2000
-    }),
-    activityDetected = _useActivityDetector.detected;
-  var toggleControlsVisibility = React.useCallback(function () {
-    if (activityDetected) {
-      showControls();
-    } else {
-      hideControls();
-    }
-  }, [activityDetected, showControls, hideControls]);
-  hooks.useDebounce(toggleControlsVisibility, activityDetected, 1000);
-  var _useState3 = React.useState(null),
-    _useState4 = _slicedToArray(_useState3, 2),
-    currentTime = _useState4[0],
-    setCurrentTime = _useState4[1];
-  var _useState5 = React.useState(null),
-    _useState6 = _slicedToArray(_useState5, 2),
-    duration = _useState6[0],
-    setDuration = _useState6[1];
-  var onTimeUpdate = React.useCallback(function () {
-    var time = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
-    if (time !== null && typeof time.currentTarget !== 'undefined') {
-      var _ref3 = time.currentTarget || {},
-        _ref3$currentTime = _ref3.currentTime,
-        targetTime = _ref3$currentTime === void 0 ? 0 : _ref3$currentTime;
-      setCurrentTime(targetTime);
-    } else {
-      setCurrentTime(0);
-    }
-  }, [duration, setCurrentTime]);
-  var onProgressStep = React.useCallback(function (step) {
-    trackScreenMedia(video, "progress_".concat(Math.round(step * 100, 10), "%"));
-  }, [trackScreenMedia, video]);
-  var onDurationChange = React.useCallback(function (dur) {
-    setDuration(dur);
-  }, [setDuration]);
-  var onPlay = React.useCallback(function (_ref4) {
-    var initial = _ref4.initial;
-    if (!hasPlayed) {
-      setHasPlayed(true);
-    }
-    trackScreenMedia(video, initial ? 'play' : 'resume');
-  }, [trackScreenMedia, video]);
-  var onPause = React.useCallback(function (_ref5) {
-    var midway = _ref5.midway;
-    trackScreenMedia(video, midway ? 'pause' : 'ended');
-  }, [trackScreenMedia, video]);
-  var onSeeked = React.useCallback(function (time) {
-    if (time > 0) {
-      trackScreenMedia(video, 'seek');
-    }
-  }, [trackScreenMedia, video]);
-  var onEnded = React.useCallback(function () {
-    if (current && !loop) {
-      setPlaying(false);
-    }
-    if (current && shouldGotoNextScreenOnEnd) {
-      gotoNextScreen();
-    }
-  }, [loop, current, shouldGotoNextScreenOnEnd, gotoNextScreen]);
-  var fullscreen = layout === 'full';
-  var hasHeader = utils.isHeaderFilled(header);
-  var hasFooter = utils.isFooterFilled(footer);
-  var footerProps = utils.getFooterProps(footer, {
-    isView: isView,
-    current: current,
-    openWebView: openWebView,
-    isPreview: isPreview
-  });
-  var hasVideo = video !== null;
-  var _useState7 = React.useState(hasVideo),
-    _useState8 = _slicedToArray(_useState7, 2),
-    ready = _useState8[0],
-    setReady = _useState8[1];
-  var finalVideo = React.useMemo(function () {
-    return hasVideo ? _objectSpread(_objectSpread({}, video), {}, {
-      autoPlay: !isPreview && !isStatic && !isCapture && autoPlay && current
-    }) : null;
-  }, [hasVideo, video, isPreview, isStatic, isCapture, autoPlay, current]);
-  var _ref6 = videoMedia || {},
-    _ref6$metadata = _ref6.metadata,
-    videoMetadata = _ref6$metadata === void 0 ? null : _ref6$metadata,
-    _ref6$url = _ref6.url,
-    videoUrl = _ref6$url === void 0 ? null : _ref6$url;
-  var finalThumbnail = hooks.useMediaThumbnail(videoMedia, thumbnail);
-  var hasVideoUrl = videoUrl !== null;
-  var _ref7 = videoMetadata || {},
-    _ref7$width = _ref7.width,
-    videoWidth = _ref7$width === void 0 ? 0 : _ref7$width,
-    _ref7$height = _ref7.height,
-    videoHeight = _ref7$height === void 0 ? 0 : _ref7$height;
-  var _getSizeWithinBounds = size.getSizeWithinBounds(videoWidth, videoHeight, width, height, {
-      cover: fullscreen
-    }),
-    resizedVideoWidth = _getSizeWithinBounds.width,
-    resizedVideoHeight = _getSizeWithinBounds.height;
-  var resizedVideoLeft = -(resizedVideoWidth - width) / 2;
-  var resizedVideoTop = -(resizedVideoHeight - height) / 2;
-  var placeholderProps = fullscreen ? {
-    width: '100%',
-    height: '100%'
-  } : {
-    width: '100%'
-  };
-  React.useEffect(function () {
-    setReady(!hasVideoUrl);
-  }, [videoUrl, hasVideoUrl, setReady]);
-  var onVideoReady = React.useCallback(function () {
-    setReady(true);
-  }, [setReady]);
-
-  // const onSuspended = useCallback(() => {
-  //     if (playing && current) {
-  //         setPlaying(false);
-  //     }
-  // }, [current, playing, setPlaying]);
-
-  var onPlayError = React.useCallback(function () {
-    if (isView && playing && current && hasVideoUrl && autoPlay) {
-      setPlaying(false);
-      setControlsSuggestPlay(true);
-    }
-  }, [isView, current, playing, hasVideoUrl, autoPlay, setPlaying, setControlsSuggestPlay]);
-  return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles.container, _defineProperty(_defineProperty({}, className, className !== null), styles.fullscreen, fullscreen)]),
-    "data-screen-ready": isStatic || isCapture || ready
-  }, /*#__PURE__*/React.createElement(Container, {
-    width: width,
-    height: height,
-    className: styles.content
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles.inner
-  }, !isPlaceholder && hasHeader ? /*#__PURE__*/React.createElement("div", {
-    key: "header",
-    className: styles.header,
-    style: {
-      paddingTop: spacing / 2,
-      paddingLeft: spacing,
-      paddingRight: spacing,
-      transform: !isPreview ? "translate(0, ".concat(viewerTopHeight, "px)") : null
-    }
-  }, /*#__PURE__*/React.createElement(Header, Object.assign({
-    fade: current && !controlsVisible
-  }, header))) : null, /*#__PURE__*/React.createElement(components.ScreenElement, {
-    key: "video",
-    placeholder: /*#__PURE__*/React.createElement(components.PlaceholderVideo, Object.assign({
-      className: styles.placeholder
-    }, placeholderProps)),
-    empty: /*#__PURE__*/React.createElement("div", {
-      className: styles.emptyContainer
-    }, /*#__PURE__*/React.createElement(components.Empty, {
-      className: styles.empty
-    }, /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
-      id: "3ext9Q",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Video"
-      }]
-    }))),
-    isEmpty: !hasVideoUrl
-  }, hasVideoUrl ? /*#__PURE__*/React.createElement("div", {
-    className: styles.videoContainer,
-    style: {
-      width: resizedVideoWidth,
-      height: resizedVideoHeight,
-      left: resizedVideoLeft,
-      top: resizedVideoTop
-    }
-  }, shouldDisplayPoster ? /*#__PURE__*/React.createElement(Image, {
-    className: styles.image,
-    media: finalThumbnail,
-    width: resizedVideoWidth,
-    height: resizedVideoHeight,
-    objectFit: {
-      fit: 'cover'
-    },
-    resolution: resolution,
-    shouldLoad: mediaShouldLoad
-  }) : /*#__PURE__*/React.createElement(Video, Object.assign({}, finalVideo, {
-    width: resizedVideoWidth,
-    height: resizedVideoHeight,
-    paused: !videoPlaying,
-    muted: muted,
-    mediaRef: mediaRef,
-    className: styles.video,
-    onReady: onVideoReady,
-    onPlay: onPlay,
-    onPause: onPause,
-    onTimeUpdate: onTimeUpdate,
-    onProgressStep: onProgressStep,
-    onDurationChange: onDurationChange,
-    onSeeked: onSeeked,
-    onEnded: onEnded
-    // onSuspended={onSuspended}
-    ,
-    onPlayError: onPlayError,
-    disablePictureInPicture: true,
-    focusable: current && isView,
-    shouldLoad: mediaShouldLoad
-  }))) : null), !isPlaceholder ? /*#__PURE__*/React.createElement("div", {
-    key: "bottom-content",
-    className: styles.bottom,
-    style: {
-      transform: current && !isPreview ? "translate3d(0, -".concat(viewerBottomHeight, "px, 0)") : null,
-      paddingLeft: Math.max(spacing / 2, viewerBottomSidesWidth),
-      paddingRight: Math.max(spacing / 2, viewerBottomSidesWidth),
-      paddingBottom: spacing / 2,
-      paddingTop: 0
-    }
-  }, (closedCaptions !== null || captions !== null) && !isPreview && !isCapture && !isStatic ? /*#__PURE__*/React.createElement(ClosedCaptions, Object.assign({
-    className: styles.closedCaptions,
-    media: closedCaptions // BW Compat
-  }, captions, {
-    currentTime: currentTime
-  })) : null, hasFooter ? /*#__PURE__*/React.createElement(Footer, footerProps) : null) : null)), !isPlaceholder ? /*#__PURE__*/React.createElement(Background, {
-    background: background,
-    width: width,
-    height: height,
-    resolution: resolution,
-    playing: backgroundPlaying,
-    muted: muted,
-    shouldLoad: mediaShouldLoad,
-    withoutVideo: isPreview
-  }) : null);
-};
-VideoScreen.propTypes = propTypes;
-VideoScreen.defaultProps = defaultProps;
-var VideoScreen$1 = VideoScreen;
-
-var definition = {
-  id: 'video',
-  type: 'screen',
-  group: {
-    label: reactIntl.defineMessage({
-      id: "+9akmg",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Audio and Video"
-      }]
-    }),
-    order: 5
-  },
-  title: reactIntl.defineMessage({
-    id: "UBXIYP",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Video"
-    }]
-  }),
-  component: VideoScreen$1,
-  layouts: ['middle', 'full'],
-  // transforms,
-  fields: [{
-    name: 'layout',
-    type: 'screen-layout',
-    defaultValue: 'middle',
-    label: reactIntl.defineMessage({
-      id: "4iBXj2",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Layout"
-      }]
-    })
-  }, {
-    name: 'video',
-    type: 'video-element',
-    theme: {
-      color: 'primary'
-    },
-    defaultValue: {
-      autoPlay: true
-    },
-    label: reactIntl.defineMessage({
-      id: "tvl2Zc",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Video"
-      }]
-    })
-  }, {
-    name: 'gotoNextScreenOnEnd',
-    type: 'toggle',
-    defaultValue: false,
-    label: reactIntl.defineMessage({
-      id: "n8zmLY",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Go to next screen on end"
-      }]
-    })
-  }, {
-    name: 'background',
-    type: 'background',
-    label: reactIntl.defineMessage({
-      id: "+MPZRu",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Background"
-      }]
-    })
-  }, {
-    name: 'header',
-    type: 'header',
-    label: reactIntl.defineMessage({
-      id: "rhuDxI",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Header"
-      }]
-    }),
-    theme: {
-      badge: {
-        label: {
-          textStyle: 'badge'
-        },
-        boxStyle: 'badge'
-      }
-    }
-  }, {
-    name: 'footer',
-    type: 'footer',
-    label: reactIntl.defineMessage({
-      id: "g4nybp",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Footer"
-      }]
-    }),
-    theme: {
-      callToAction: {
-        label: {
-          textStyle: 'cta'
-        },
-        boxStyle: 'cta'
-      }
-    }
-  }]
-};
-
-exports.VideoScreen = VideoScreen$1;
-exports.default = definition;