@micromag/screen-video 0.2.409 → 0.3.1

package/assets/css/styles.css

@@ -1 +1 @@
-.micromag-screen-video-container .micromag-screen-video-content,.micromag-screen-video-container .micromag-screen-video-empty,.micromag-screen-video-container .micromag-screen-video-emptyContainer,.micromag-screen-video-container.micromag-screen-video-fullscreen .micromag-screen-video-image,.micromag-screen-video-container.micromag-screen-video-fullscreen .micromag-screen-video-placeholder,.micromag-screen-video-container.micromag-screen-video-fullscreen .micromag-screen-video-video{position:absolute;top:0;left:0;width:100%;height:100%}.micromag-screen-video-container{position:relative;width:100%;height:100%;overflow:hidden}.micromag-screen-video-disabled.micromag-screen-video-container{overflow:hidden;pointer-events:none}.micromag-screen-video-hidden.micromag-screen-video-container{display:none;visibility:hidden}.micromag-screen-video-placeholder.micromag-screen-video-container .micromag-screen-video-content{position:relative;padding:6px}.micromag-screen-video-container .micromag-screen-video-empty{margin:5px auto;border:2px dashed #343434;color:#343434}.micromag-screen-video-container .micromag-screen-video-emptyContainer{top:50%;height:0;padding-bottom:56.25%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%)}.micromag-screen-video-container .micromag-screen-video-empty{margin:0}.micromag-screen-video-container .micromag-screen-video-content{overflow:hidden}.micromag-screen-video-container .micromag-screen-video-mediaControls{padding:10px 20px 20px}.micromag-screen-video-container .micromag-screen-video-placeholder{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;height:100%}.micromag-screen-video-container .micromag-screen-video-videoContainer{position:absolute}.micromag-screen-video-container .micromag-screen-video-bottomContent{position:absolute;bottom:0;width:100%}.micromag-screen-video-container.micromag-screen-video-fullscreen .micromag-screen-video-emptyContainer{top:0;height:100%;padding-bottom:0;-webkit-transform:none;-ms-transform:none;transform:none}
+.micromag-screen-video-container .micromag-screen-video-content,.micromag-screen-video-container .micromag-screen-video-empty,.micromag-screen-video-container .micromag-screen-video-emptyContainer,.micromag-screen-video-container.micromag-screen-video-fullscreen .micromag-screen-video-image,.micromag-screen-video-container.micromag-screen-video-fullscreen .micromag-screen-video-placeholder,.micromag-screen-video-container.micromag-screen-video-fullscreen .micromag-screen-video-video{position:absolute;top:0;left:0;width:100%;height:100%}.micromag-screen-video-container{position:relative;width:100%;height:100%;overflow:hidden}.micromag-screen-video-disabled.micromag-screen-video-container{overflow:hidden;pointer-events:none}.micromag-screen-video-hidden.micromag-screen-video-container{display:none;visibility:hidden}.micromag-screen-video-placeholder.micromag-screen-video-container .micromag-screen-video-content{position:relative;padding:6px}.micromag-screen-video-container .micromag-screen-video-empty{margin:5px auto;border:2px dashed #343434;color:#343434}.micromag-screen-video-container .micromag-screen-video-emptyContainer{top:50%;height:0;padding-bottom:56.25%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%)}.micromag-screen-video-container .micromag-screen-video-empty{margin:0}.micromag-screen-video-container .micromag-screen-video-content{overflow:hidden}.micromag-screen-video-container .micromag-screen-video-mediaControls{padding:10px 20px 20px;opacity:0;-webkit-transition:opacity .3s linear;-o-transition:opacity .3s linear;transition:opacity .3s linear}.micromag-screen-video-container .micromag-screen-video-mediaControls.micromag-screen-video-visible{opacity:1}.micromag-screen-video-container .micromag-screen-video-placeholder{display:-webkit-flex;display:-ms-flexbox;display:flex;height:100%;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center}.micromag-screen-video-container .micromag-screen-video-videoContainer{position:absolute}.micromag-screen-video-container .micromag-screen-video-bottomContent{position:absolute;bottom:0;width:100%}.micromag-screen-video-container.micromag-screen-video-fullscreen .micromag-screen-video-emptyContainer{top:0;height:100%;padding-bottom:0;-webkit-transform:none;-ms-transform:none;transform:none}

package/es/index.js

@@ -2,29 +2,30 @@ import { FormattedMessage, defineMessage } from 'react-intl';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import React, { useRef, useEffect, useState, useCallback, useMemo } from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
 import { getSizeWithinBounds } from '@folklore/size';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import React, { useRef, useEffect, useState, useCallback, useMemo } from 'react';
 import { PropTypes as PropTypes$1 } from '@micromag/core';
 import { ScreenElement, PlaceholderVideo, Empty, Transitions } from '@micromag/core/components';
-import { useScreenSize, useScreenRenderContext } from '@micromag/core/contexts';
+import { useScreenSize, useScreenRenderContext, useViewerNavigation } from '@micromag/core/contexts';
 import { useTrackScreenMedia, useLongPress } from '@micromag/core/hooks';
 import Background from '@micromag/element-background';
-import Container from '@micromag/element-container';
+import CallToAction from '@micromag/element-call-to-action';
 import ClosedCaptions from '@micromag/element-closed-captions';
-import MediaControls from '@micromag/element-media-controls';
+import Container from '@micromag/element-container';
 import Image from '@micromag/element-image';
+import MediaControls from '@micromag/element-media-controls';
 import Video from '@micromag/element-video';
-import CallToAction from '@micromag/element-call-to-action';
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import { Video as Video$1, Container as Container$1 } from '@micromag/transforms/apple-news';
 
-var styles = {"container":"micromag-screen-video-container","content":"micromag-screen-video-content","empty":"micromag-screen-video-empty","emptyContainer":"micromag-screen-video-emptyContainer","fullscreen":"micromag-screen-video-fullscreen","image":"micromag-screen-video-image","placeholder":"micromag-screen-video-placeholder","video":"micromag-screen-video-video","disabled":"micromag-screen-video-disabled","hidden":"micromag-screen-video-hidden","mediaControls":"micromag-screen-video-mediaControls","videoContainer":"micromag-screen-video-videoContainer","bottomContent":"micromag-screen-video-bottomContent"};
+var styles = {"container":"micromag-screen-video-container","content":"micromag-screen-video-content","empty":"micromag-screen-video-empty","emptyContainer":"micromag-screen-video-emptyContainer","fullscreen":"micromag-screen-video-fullscreen","image":"micromag-screen-video-image","placeholder":"micromag-screen-video-placeholder","video":"micromag-screen-video-video","disabled":"micromag-screen-video-disabled","hidden":"micromag-screen-video-hidden","mediaControls":"micromag-screen-video-mediaControls","visible":"micromag-screen-video-visible","videoContainer":"micromag-screen-video-videoContainer","bottomContent":"micromag-screen-video-bottomContent"};
 
 var propTypes = {
   layout: PropTypes.oneOf(['middle', 'full']),
   video: PropTypes$1.videoElement,
+  gotoNextScreenOnEnd: PropTypes.bool,
   background: PropTypes$1.backgroundElement,
   callToAction: PropTypes$1.callToAction,
   current: PropTypes.bool,
@@ -37,6 +38,7 @@ var propTypes = {
 var defaultProps = {
   layout: 'middle',
   video: null,
+  gotoNextScreenOnEnd: false,
   background: null,
   callToAction: null,
   current: true,
@@ -48,10 +50,11 @@ var defaultProps = {
 };
 
 var VideoScreen = function VideoScreen(_ref) {
-  var _ref8;
+  var _ref9;
 
   var layout = _ref.layout,
       video = _ref.video,
+      gotoNextScreenOnEnd = _ref.gotoNextScreenOnEnd,
       background = _ref.background,
       callToAction = _ref.callToAction,
       current = _ref.current,
@@ -74,9 +77,13 @@ var VideoScreen = function VideoScreen(_ref) {
       isStatic = _useScreenRenderConte.isStatic,
       isCapture = _useScreenRenderConte.isCapture;
 
+  var _useViewerNavigation = useViewerNavigation(),
+      gotoNextScreen = _useViewerNavigation.gotoNextScreen;
+
   var backgroundPlaying = current && (isView || isEdit);
   var backgroundShouldLoad = current || active || !isView;
   var videoShouldLoad = current || active || !isView;
+  var shouldGotoNextScreenOnEnd = gotoNextScreenOnEnd && isView && current;
   var apiRef = useRef();
 
   var _ref2 = apiRef.current || {},
@@ -92,27 +99,34 @@ var VideoScreen = function VideoScreen(_ref) {
     if (apiMediaRef !== null && getMediaRef !== null) {
       getMediaRef(apiMediaRef.current);
     }
-  }, [apiMediaRef, getMediaRef]); // Get api state updates from callback
+  }, [apiMediaRef, getMediaRef]);
+  var mouseMoveRef = useRef(null);
 
-  var _useState = useState(null),
+  var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
-      currentTime = _useState2[0],
-      setCurrentTime = _useState2[1];
+      showMediaControls = _useState2[0],
+      setShowMediaControls = _useState2[1]; // Get api state updates from callback
+
 
   var _useState3 = useState(null),
       _useState4 = _slicedToArray(_useState3, 2),
-      duration = _useState4[0],
-      setDuration = _useState4[1];
+      currentTime = _useState4[0],
+      setCurrentTime = _useState4[1];
 
-  var _useState5 = useState(false),
+  var _useState5 = useState(null),
       _useState6 = _slicedToArray(_useState5, 2),
-      playing = _useState6[0],
-      setPlaying = _useState6[1];
+      duration = _useState6[0],
+      setDuration = _useState6[1];
 
   var _useState7 = useState(false),
       _useState8 = _slicedToArray(_useState7, 2),
-      muted = _useState8[0],
-      setMuted = _useState8[1];
+      playing = _useState8[0],
+      setPlaying = _useState8[1];
+
+  var _useState9 = useState(false),
+      _useState10 = _slicedToArray(_useState9, 2),
+      muted = _useState10[0],
+      setMuted = _useState10[1];
 
   var onTimeUpdate = useCallback(function (time) {
     setCurrentTime(time);
@@ -149,23 +163,41 @@ var VideoScreen = function VideoScreen(_ref) {
 
     toggleMute();
   }, [muted, toggleMute]);
+  var onEnded = useCallback(function () {
+    if (shouldGotoNextScreenOnEnd) {
+      gotoNextScreen();
+    }
+  }, [shouldGotoNextScreenOnEnd, seek, gotoNextScreen]);
   useEffect(function () {
     if (!current && playing) {
       pause();
     }
-  }, [playing, current]); // ------------------------------------
+  }, [playing, current]);
+  var onMouseMove = useCallback(function () {
+    setShowMediaControls(true);
+
+    if (mouseMoveRef.current !== null) {
+      clearTimeout(mouseMoveRef.current);
+    }
+
+    mouseMoveRef.current = setTimeout(function () {
+      setShowMediaControls(false);
+      mouseMoveRef.current = null;
+    }, 1800);
+  }, [setShowMediaControls]); // ------------------------------------
 
   var longPressBind = useLongPress({
-    onLongPress: togglePlay
+    onLongPress: togglePlay,
+    onClick: onMouseMove
   });
   var fullscreen = layout === 'full';
   var hasCallToAction = callToAction !== null && callToAction.active === true;
   var hasVideo = video !== null;
 
-  var _useState9 = useState(hasVideo),
-      _useState10 = _slicedToArray(_useState9, 2),
-      ready = _useState10[0],
-      setReady = _useState10[1]; // useState(!hasVideo);
+  var _useState11 = useState(hasVideo),
+      _useState12 = _slicedToArray(_useState11, 2),
+      ready = _useState12[0],
+      setReady = _useState12[1]; // useState(!hasVideo);
 
 
   var transitionPlaying = current && ready;
@@ -181,7 +213,9 @@ var VideoScreen = function VideoScreen(_ref) {
       _ref5$withSeekBar = _ref5.withSeekBar,
       withSeekBar = _ref5$withSeekBar === void 0 ? false : _ref5$withSeekBar,
       _ref5$withPlayPause = _ref5.withPlayPause,
-      withPlayPause = _ref5$withPlayPause === void 0 ? false : _ref5$withPlayPause;
+      withPlayPause = _ref5$withPlayPause === void 0 ? false : _ref5$withPlayPause,
+      _ref5$withTime = _ref5.withTime,
+      withTime = _ref5$withTime === void 0 ? false : _ref5$withTime;
 
   var finalVideo = useMemo(function () {
     return hasVideo ? _objectSpread(_objectSpread({}, video), {}, {
@@ -278,6 +312,7 @@ var VideoScreen = function VideoScreen(_ref) {
     onProgressStep: onProgressStep,
     onDurationChanged: onDurationChanged,
     onSeeked: onSeeked,
+    onEnded: onEnded,
     onVolumeChanged: onVolumeChanged,
     focusable: current && isView,
     preload: videoShouldLoad ? 'auto' : 'metadata' // onPosterLoaded={onPosterLoaded}
@@ -294,9 +329,10 @@ var VideoScreen = function VideoScreen(_ref) {
     media: closedCaptions,
     currentTime: currentTime
   }) : null, hasVideoUrl ? /*#__PURE__*/React.createElement(MediaControls, {
-    className: styles.mediaControls,
+    className: classNames([styles.mediaControls, _defineProperty({}, styles.visible, !autoPlay && !playing || muted || showMediaControls)]),
     withSeekBar: withSeekBar,
     withPlayPause: withPlayPause,
+    withTime: withTime,
     playing: playing,
     muted: muted,
     currentTime: currentTime,
@@ -315,11 +351,13 @@ var VideoScreen = function VideoScreen(_ref) {
     focusable: current && isView
   })) : null)) : null];
   return /*#__PURE__*/React.createElement("div", Object.assign({
-    className: classNames([styles.container, (_ref8 = {}, _defineProperty(_ref8, className, className !== null), _defineProperty(_ref8, styles.fullscreen, fullscreen), _ref8)]),
+    className: classNames([styles.container, (_ref9 = {}, _defineProperty(_ref9, className, className !== null), _defineProperty(_ref9, styles.fullscreen, fullscreen), _ref9)]),
     "data-screen-ready": isStatic || isCapture
     /* && posterReady */
     || ready
-  }, longPressBind), !isPlaceholder ? /*#__PURE__*/React.createElement(Background, {
+  }, longPressBind, {
+    onMouseMove: onMouseMove
+  }), !isPlaceholder ? /*#__PURE__*/React.createElement(Background, {
     background: background,
     width: width,
     height: height,
@@ -414,6 +452,17 @@ var definition = {
         "value": "Video"
       }]
     })
+  }, {
+    name: 'gotoNextScreenOnEnd',
+    type: 'toggle',
+    defaultValue: false,
+    label: defineMessage({
+      id: "n8zmLY",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Go to next screen on end"
+      }]
+    })
   }, {
     name: 'background',
     type: 'background',

package/lib/index.js

@@ -6,21 +6,21 @@ 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 React = require('react');
-var PropTypes = require('prop-types');
-var classNames = require('classnames');
 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 Background = require('@micromag/element-background');
-var Container = require('@micromag/element-container');
+var CallToAction = require('@micromag/element-call-to-action');
 var ClosedCaptions = require('@micromag/element-closed-captions');
-var MediaControls = require('@micromag/element-media-controls');
+var Container = require('@micromag/element-container');
 var Image = require('@micromag/element-image');
+var MediaControls = require('@micromag/element-media-controls');
 var Video = require('@micromag/element-video');
-var CallToAction = require('@micromag/element-call-to-action');
 var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
 var appleNews = require('@micromag/transforms/apple-news');
 
@@ -29,23 +29,24 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
 var _objectSpread__default = /*#__PURE__*/_interopDefaultLegacy(_objectSpread);
 var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var Background__default = /*#__PURE__*/_interopDefaultLegacy(Background);
-var Container__default = /*#__PURE__*/_interopDefaultLegacy(Container);
+var CallToAction__default = /*#__PURE__*/_interopDefaultLegacy(CallToAction);
 var ClosedCaptions__default = /*#__PURE__*/_interopDefaultLegacy(ClosedCaptions);
-var MediaControls__default = /*#__PURE__*/_interopDefaultLegacy(MediaControls);
+var Container__default = /*#__PURE__*/_interopDefaultLegacy(Container);
 var Image__default = /*#__PURE__*/_interopDefaultLegacy(Image);
+var MediaControls__default = /*#__PURE__*/_interopDefaultLegacy(MediaControls);
 var Video__default = /*#__PURE__*/_interopDefaultLegacy(Video);
-var CallToAction__default = /*#__PURE__*/_interopDefaultLegacy(CallToAction);
 var _toConsumableArray__default = /*#__PURE__*/_interopDefaultLegacy(_toConsumableArray);
 
-var styles = {"container":"micromag-screen-video-container","content":"micromag-screen-video-content","empty":"micromag-screen-video-empty","emptyContainer":"micromag-screen-video-emptyContainer","fullscreen":"micromag-screen-video-fullscreen","image":"micromag-screen-video-image","placeholder":"micromag-screen-video-placeholder","video":"micromag-screen-video-video","disabled":"micromag-screen-video-disabled","hidden":"micromag-screen-video-hidden","mediaControls":"micromag-screen-video-mediaControls","videoContainer":"micromag-screen-video-videoContainer","bottomContent":"micromag-screen-video-bottomContent"};
+var styles = {"container":"micromag-screen-video-container","content":"micromag-screen-video-content","empty":"micromag-screen-video-empty","emptyContainer":"micromag-screen-video-emptyContainer","fullscreen":"micromag-screen-video-fullscreen","image":"micromag-screen-video-image","placeholder":"micromag-screen-video-placeholder","video":"micromag-screen-video-video","disabled":"micromag-screen-video-disabled","hidden":"micromag-screen-video-hidden","mediaControls":"micromag-screen-video-mediaControls","visible":"micromag-screen-video-visible","videoContainer":"micromag-screen-video-videoContainer","bottomContent":"micromag-screen-video-bottomContent"};
 
 var propTypes = {
   layout: PropTypes__default["default"].oneOf(['middle', 'full']),
   video: core.PropTypes.videoElement,
+  gotoNextScreenOnEnd: PropTypes__default["default"].bool,
   background: core.PropTypes.backgroundElement,
   callToAction: core.PropTypes.callToAction,
   current: PropTypes__default["default"].bool,
@@ -58,6 +59,7 @@ var propTypes = {
 var defaultProps = {
   layout: 'middle',
   video: null,
+  gotoNextScreenOnEnd: false,
   background: null,
   callToAction: null,
   current: true,
@@ -69,10 +71,11 @@ var defaultProps = {
 };
 
 var VideoScreen = function VideoScreen(_ref) {
-  var _ref8;
+  var _ref9;
 
   var layout = _ref.layout,
       video = _ref.video,
+      gotoNextScreenOnEnd = _ref.gotoNextScreenOnEnd,
       background = _ref.background,
       callToAction = _ref.callToAction,
       current = _ref.current,
@@ -95,9 +98,13 @@ var VideoScreen = function VideoScreen(_ref) {
       isStatic = _useScreenRenderConte.isStatic,
       isCapture = _useScreenRenderConte.isCapture;
 
+  var _useViewerNavigation = contexts.useViewerNavigation(),
+      gotoNextScreen = _useViewerNavigation.gotoNextScreen;
+
   var backgroundPlaying = current && (isView || isEdit);
   var backgroundShouldLoad = current || active || !isView;
   var videoShouldLoad = current || active || !isView;
+  var shouldGotoNextScreenOnEnd = gotoNextScreenOnEnd && isView && current;
   var apiRef = React.useRef();
 
   var _ref2 = apiRef.current || {},
@@ -113,27 +120,34 @@ var VideoScreen = function VideoScreen(_ref) {
     if (apiMediaRef !== null && getMediaRef !== null) {
       getMediaRef(apiMediaRef.current);
     }
-  }, [apiMediaRef, getMediaRef]); // Get api state updates from callback
+  }, [apiMediaRef, getMediaRef]);
+  var mouseMoveRef = React.useRef(null);
 
-  var _useState = React.useState(null),
+  var _useState = React.useState(false),
       _useState2 = _slicedToArray__default["default"](_useState, 2),
-      currentTime = _useState2[0],
-      setCurrentTime = _useState2[1];
+      showMediaControls = _useState2[0],
+      setShowMediaControls = _useState2[1]; // Get api state updates from callback
+
 
   var _useState3 = React.useState(null),
       _useState4 = _slicedToArray__default["default"](_useState3, 2),
-      duration = _useState4[0],
-      setDuration = _useState4[1];
+      currentTime = _useState4[0],
+      setCurrentTime = _useState4[1];
 
-  var _useState5 = React.useState(false),
+  var _useState5 = React.useState(null),
       _useState6 = _slicedToArray__default["default"](_useState5, 2),
-      playing = _useState6[0],
-      setPlaying = _useState6[1];
+      duration = _useState6[0],
+      setDuration = _useState6[1];
 
   var _useState7 = React.useState(false),
       _useState8 = _slicedToArray__default["default"](_useState7, 2),
-      muted = _useState8[0],
-      setMuted = _useState8[1];
+      playing = _useState8[0],
+      setPlaying = _useState8[1];
+
+  var _useState9 = React.useState(false),
+      _useState10 = _slicedToArray__default["default"](_useState9, 2),
+      muted = _useState10[0],
+      setMuted = _useState10[1];
 
   var onTimeUpdate = React.useCallback(function (time) {
     setCurrentTime(time);
@@ -170,23 +184,41 @@ var VideoScreen = function VideoScreen(_ref) {
 
     toggleMute();
   }, [muted, toggleMute]);
+  var onEnded = React.useCallback(function () {
+    if (shouldGotoNextScreenOnEnd) {
+      gotoNextScreen();
+    }
+  }, [shouldGotoNextScreenOnEnd, seek, gotoNextScreen]);
   React.useEffect(function () {
     if (!current && playing) {
       pause();
     }
-  }, [playing, current]); // ------------------------------------
+  }, [playing, current]);
+  var onMouseMove = React.useCallback(function () {
+    setShowMediaControls(true);
+
+    if (mouseMoveRef.current !== null) {
+      clearTimeout(mouseMoveRef.current);
+    }
+
+    mouseMoveRef.current = setTimeout(function () {
+      setShowMediaControls(false);
+      mouseMoveRef.current = null;
+    }, 1800);
+  }, [setShowMediaControls]); // ------------------------------------
 
   var longPressBind = hooks.useLongPress({
-    onLongPress: togglePlay
+    onLongPress: togglePlay,
+    onClick: onMouseMove
   });
   var fullscreen = layout === 'full';
   var hasCallToAction = callToAction !== null && callToAction.active === true;
   var hasVideo = video !== null;
 
-  var _useState9 = React.useState(hasVideo),
-      _useState10 = _slicedToArray__default["default"](_useState9, 2),
-      ready = _useState10[0],
-      setReady = _useState10[1]; // useState(!hasVideo);
+  var _useState11 = React.useState(hasVideo),
+      _useState12 = _slicedToArray__default["default"](_useState11, 2),
+      ready = _useState12[0],
+      setReady = _useState12[1]; // useState(!hasVideo);
 
 
   var transitionPlaying = current && ready;
@@ -202,7 +234,9 @@ var VideoScreen = function VideoScreen(_ref) {
       _ref5$withSeekBar = _ref5.withSeekBar,
       withSeekBar = _ref5$withSeekBar === void 0 ? false : _ref5$withSeekBar,
       _ref5$withPlayPause = _ref5.withPlayPause,
-      withPlayPause = _ref5$withPlayPause === void 0 ? false : _ref5$withPlayPause;
+      withPlayPause = _ref5$withPlayPause === void 0 ? false : _ref5$withPlayPause,
+      _ref5$withTime = _ref5.withTime,
+      withTime = _ref5$withTime === void 0 ? false : _ref5$withTime;
 
   var finalVideo = React.useMemo(function () {
     return hasVideo ? _objectSpread__default["default"](_objectSpread__default["default"]({}, video), {}, {
@@ -299,6 +333,7 @@ var VideoScreen = function VideoScreen(_ref) {
     onProgressStep: onProgressStep,
     onDurationChanged: onDurationChanged,
     onSeeked: onSeeked,
+    onEnded: onEnded,
     onVolumeChanged: onVolumeChanged,
     focusable: current && isView,
     preload: videoShouldLoad ? 'auto' : 'metadata' // onPosterLoaded={onPosterLoaded}
@@ -315,9 +350,10 @@ var VideoScreen = function VideoScreen(_ref) {
     media: closedCaptions,
     currentTime: currentTime
   }) : null, hasVideoUrl ? /*#__PURE__*/React__default["default"].createElement(MediaControls__default["default"], {
-    className: styles.mediaControls,
+    className: classNames__default["default"]([styles.mediaControls, _defineProperty__default["default"]({}, styles.visible, !autoPlay && !playing || muted || showMediaControls)]),
     withSeekBar: withSeekBar,
     withPlayPause: withPlayPause,
+    withTime: withTime,
     playing: playing,
     muted: muted,
     currentTime: currentTime,
@@ -336,11 +372,13 @@ var VideoScreen = function VideoScreen(_ref) {
     focusable: current && isView
   })) : null)) : null];
   return /*#__PURE__*/React__default["default"].createElement("div", Object.assign({
-    className: classNames__default["default"]([styles.container, (_ref8 = {}, _defineProperty__default["default"](_ref8, className, className !== null), _defineProperty__default["default"](_ref8, styles.fullscreen, fullscreen), _ref8)]),
+    className: classNames__default["default"]([styles.container, (_ref9 = {}, _defineProperty__default["default"](_ref9, className, className !== null), _defineProperty__default["default"](_ref9, styles.fullscreen, fullscreen), _ref9)]),
     "data-screen-ready": isStatic || isCapture
     /* && posterReady */
     || ready
-  }, longPressBind), !isPlaceholder ? /*#__PURE__*/React__default["default"].createElement(Background__default["default"], {
+  }, longPressBind, {
+    onMouseMove: onMouseMove
+  }), !isPlaceholder ? /*#__PURE__*/React__default["default"].createElement(Background__default["default"], {
     background: background,
     width: width,
     height: height,
@@ -435,6 +473,17 @@ var definition = {
         "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',

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/screen-video",
-    "version": "0.2.409",
+    "version": "0.3.1",
     "description": "",
     "keywords": [
         "javascript"
@@ -50,15 +50,15 @@
     "dependencies": {
         "@babel/runtime": "^7.13.10",
         "@folklore/size": "^0.1.15",
-        "@micromag/core": "^0.2.409",
-        "@micromag/element-background": "^0.2.409",
-        "@micromag/element-call-to-action": "^0.2.409",
-        "@micromag/element-closed-captions": "^0.2.409",
-        "@micromag/element-container": "^0.2.409",
-        "@micromag/element-image": "^0.2.409",
-        "@micromag/element-media-controls": "^0.2.409",
-        "@micromag/element-video": "^0.2.409",
-        "@micromag/transforms": "^0.2.409",
+        "@micromag/core": "^0.3.1",
+        "@micromag/element-background": "^0.3.1",
+        "@micromag/element-call-to-action": "^0.3.1",
+        "@micromag/element-closed-captions": "^0.3.1",
+        "@micromag/element-container": "^0.3.1",
+        "@micromag/element-image": "^0.3.1",
+        "@micromag/element-media-controls": "^0.3.1",
+        "@micromag/element-video": "^0.3.1",
+        "@micromag/transforms": "^0.3.1",
         "classnames": "^2.2.6",
         "lodash": "^4.17.21",
         "prop-types": "^15.7.2",
@@ -68,5 +68,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "4c16c3bb63644d1bd5b7d50086098337317ee3f6"
+    "gitHead": "7a9abcecc77a97ec7b698743fd38378ac159a9c4"
 }