@micromag/screen-video 0.3.128 → 0.3.131

package/es/index.js

@@ -9,7 +9,7 @@ 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, useViewerNavigation } from '@micromag/core/contexts';
-import { useTrackScreenMedia, useLongPress, useMediaThumbnail } from '@micromag/core/hooks';
+import { useTrackScreenMedia, useResizeObserver, useLongPress, useMediaThumbnail } from '@micromag/core/hooks';
 import Background from '@micromag/element-background';
 import CallToAction from '@micromag/element-call-to-action';
 import ClosedCaptions from '@micromag/element-closed-captions';
@@ -54,7 +54,7 @@ var defaultProps = {
 };
 
 var VideoScreen = function VideoScreen(_ref) {
-  var _ref12;
+  var _ref13;
 
   var layout = _ref.layout,
       video = _ref.video,
@@ -109,16 +109,24 @@ var VideoScreen = function VideoScreen(_ref) {
       _ref2$progressColor = _ref2.progressColor,
       progressColor = _ref2$progressColor === void 0 ? null : _ref2$progressColor;
 
+  var _useResizeObserver = useResizeObserver(),
+      controlsRef = _useResizeObserver.ref,
+      contentRect = _useResizeObserver.entry.contentRect;
+
+  var _ref3 = contentRect || {},
+      _ref3$height = _ref3.height,
+      controlsHeight = _ref3$height === void 0 ? null : _ref3$height;
+
   var apiRef = useRef();
 
-  var _ref3 = apiRef.current || {},
-      togglePlay = _ref3.togglePlay,
-      toggleMute = _ref3.toggleMute,
-      seek = _ref3.seek,
-      play = _ref3.play,
-      pause = _ref3.pause,
-      _ref3$mediaRef = _ref3.mediaRef,
-      apiMediaRef = _ref3$mediaRef === void 0 ? null : _ref3$mediaRef;
+  var _ref4 = apiRef.current || {},
+      togglePlay = _ref4.togglePlay,
+      toggleMute = _ref4.toggleMute,
+      seek = _ref4.seek,
+      play = _ref4.play,
+      pause = _ref4.pause,
+      _ref4$mediaRef = _ref4.mediaRef,
+      apiMediaRef = _ref4$mediaRef === void 0 ? null : _ref4$mediaRef;
 
   useEffect(function () {
     if (apiMediaRef !== null && getMediaRef !== null) {
@@ -130,28 +138,33 @@ var VideoScreen = function VideoScreen(_ref) {
   var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
       showMediaControls = _useState2[0],
-      setShowMediaControls = _useState2[1]; // Get api state updates from callback
-
+      setShowMediaControls = _useState2[1];
 
-  var _useState3 = useState(null),
+  var _useState3 = useState(false),
       _useState4 = _slicedToArray(_useState3, 2),
-      currentTime = _useState4[0],
-      setCurrentTime = _useState4[1];
+      playOnFirstTap = _useState4[0],
+      setPlayOnFirstTap = _useState4[1]; // Get api state updates from callback
+
 
   var _useState5 = useState(null),
       _useState6 = _slicedToArray(_useState5, 2),
-      duration = _useState6[0],
-      setDuration = _useState6[1];
+      currentTime = _useState6[0],
+      setCurrentTime = _useState6[1];
 
-  var _useState7 = useState(false),
+  var _useState7 = useState(null),
       _useState8 = _slicedToArray(_useState7, 2),
-      playing = _useState8[0],
-      setPlaying = _useState8[1];
+      duration = _useState8[0],
+      setDuration = _useState8[1];
 
   var _useState9 = useState(false),
       _useState10 = _slicedToArray(_useState9, 2),
-      muted = _useState10[0],
-      setMuted = _useState10[1];
+      playing = _useState10[0],
+      setPlaying = _useState10[1];
+
+  var _useState11 = useState(false),
+      _useState12 = _slicedToArray(_useState11, 2),
+      muted = _useState12[0],
+      setMuted = _useState12[1];
 
   var onTimeUpdate = useCallback(function (time) {
     setCurrentTime(time);
@@ -162,13 +175,13 @@ var VideoScreen = function VideoScreen(_ref) {
   var onDurationChanged = useCallback(function (dur) {
     setDuration(dur);
   }, [setDuration]);
-  var onPlay = useCallback(function (_ref4) {
-    var initial = _ref4.initial;
+  var onPlay = useCallback(function (_ref5) {
+    var initial = _ref5.initial;
     setPlaying(true);
     trackScreenMedia(video, initial ? 'play' : 'resume');
   }, [trackScreenMedia, video]);
-  var onPause = useCallback(function (_ref5) {
-    var midway = _ref5.midway;
+  var onPause = useCallback(function (_ref6) {
+    var midway = _ref6.midway;
     setPlaying(false);
     trackScreenMedia(video, midway ? 'pause' : 'ended');
   }, [trackScreenMedia, video]);
@@ -226,10 +239,6 @@ var VideoScreen = function VideoScreen(_ref) {
   }, [play, playing, pause, onMouseMove, withControls, setShowMediaControls]);
   var onShowControls = useCallback(function (e) {
     onMouseMove(e, 3000);
-
-    if (autoPlay && !playing) {
-      play();
-    }
   }, [play, onMouseMove]);
   var longPressBind = useLongPress({
     onLongPress: onLongPress,
@@ -239,10 +248,10 @@ var VideoScreen = function VideoScreen(_ref) {
   var hasCallToAction = callToAction !== null && callToAction.active === true;
   var hasVideo = video !== null;
 
-  var _useState11 = useState(hasVideo),
-      _useState12 = _slicedToArray(_useState11, 2),
-      ready = _useState12[0],
-      setReady = _useState12[1]; // useState(!hasVideo);
+  var _useState13 = useState(hasVideo),
+      _useState14 = _slicedToArray(_useState13, 2),
+      ready = _useState14[0],
+      setReady = _useState14[1]; // useState(!hasVideo);
 
 
   var transitionPlaying = current && ready;
@@ -253,20 +262,20 @@ var VideoScreen = function VideoScreen(_ref) {
     }) : 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 _ref7 = videoMedia || {},
+      _ref7$metadata = _ref7.metadata,
+      videoMetadata = _ref7$metadata === void 0 ? null : _ref7$metadata,
+      _ref7$url = _ref7.url,
+      videoUrl = _ref7$url === void 0 ? null : _ref7$url;
 
   var thumbnailUrl = useMediaThumbnail(videoMedia, thumbnailFile);
   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 _ref8 = videoMetadata || {},
+      _ref8$width = _ref8.width,
+      videoWidth = _ref8$width === void 0 ? 0 : _ref8$width,
+      _ref8$height = _ref8.height,
+      videoHeight = _ref8$height === void 0 ? 0 : _ref8$height;
 
   var _getSizeWithinBounds = getSizeWithinBounds(videoWidth, videoHeight, width, height, {
     cover: fullscreen
@@ -287,6 +296,10 @@ var VideoScreen = function VideoScreen(_ref) {
   }, [videoUrl, hasVideoUrl, setReady]);
   var onVideoReady = useCallback(function () {
     setReady(true);
+
+    if (autoPlay && !playing) {
+      setPlayOnFirstTap(true); // @note: this sets up a button that plays the video on click for folks who are low on battery on their device: e.g. ios stops the autoplay of videos in that case...
+    }
   }, [setReady]);
   var visibleControls = !autoPlay && !playing || muted || showMediaControls;
   var items = [/*#__PURE__*/React.createElement(ScreenElement, {
@@ -341,11 +354,11 @@ var VideoScreen = function VideoScreen(_ref) {
     onVolumeChanged: onVolumeChanged,
     focusable: current && isView,
     shouldLoad: mediaShouldLoad
-  }))) : null), hasVideoUrl ? /*#__PURE__*/React.createElement("button", {
-    key: "video-button",
+  }))) : null), playOnFirstTap && !playing ? /*#__PURE__*/React.createElement("button", {
+    key: "first-tap-button",
     type: "button",
-    onClick: onShowControls,
-    className: classNames([styles.videoButton, _defineProperty({}, styles.visible, !visibleControls)])
+    onClick: onPlay,
+    className: classNames([styles.videoButton])
   }) : null, !isPlaceholder ? /*#__PURE__*/React.createElement("div", {
     key: "bottom-content",
     className: styles.bottomContent
@@ -359,7 +372,9 @@ var VideoScreen = function VideoScreen(_ref) {
     currentTime: currentTime
   }) : null, /*#__PURE__*/React.createElement("div", {
     className: classNames([styles.bottom, _defineProperty({}, styles.withGradient, withSeekBar || withControls || muted)])
-  }, hasVideoUrl ? /*#__PURE__*/React.createElement(MediaControls, {
+  }, hasVideoUrl ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    ref: controlsRef
+  }, /*#__PURE__*/React.createElement(MediaControls, {
     className: classNames([styles.mediaControls, _defineProperty({}, styles.visible, visibleControls)]),
     withControls: withControls,
     withSeekBar: withSeekBar,
@@ -373,7 +388,15 @@ var VideoScreen = function VideoScreen(_ref) {
     onToggleMute: onToggleMute,
     onSeek: onSeek,
     focusable: current && isView
-  }) : null, hasCallToAction ? /*#__PURE__*/React.createElement("div", {
+  })), /*#__PURE__*/React.createElement("button", {
+    key: "video-button",
+    style: {
+      height: controlsHeight
+    },
+    type: "button",
+    onPointerDown: onShowControls,
+    className: classNames([styles.videoButton, _defineProperty({}, styles.visible, !visibleControls)])
+  })) : null, hasCallToAction ? /*#__PURE__*/React.createElement("div", {
     style: {
       marginTop: -spacing / 2
     }
@@ -399,7 +422,7 @@ var VideoScreen = function VideoScreen(_ref) {
     isSmall: true
   }) : null))) : null];
   return /*#__PURE__*/React.createElement("div", Object.assign({
-    className: classNames([styles.container, (_ref12 = {}, _defineProperty(_ref12, className, className !== null), _defineProperty(_ref12, styles.fullscreen, fullscreen), _ref12)]),
+    className: classNames([styles.container, (_ref13 = {}, _defineProperty(_ref13, className, className !== null), _defineProperty(_ref13, styles.fullscreen, fullscreen), _ref13)]),
     "data-screen-ready": isStatic || isCapture || ready
   }, longPressBind, {
     onMouseMove: onMouseMove

package/lib/index.js

@@ -75,7 +75,7 @@ var defaultProps = {
 };
 
 var VideoScreen = function VideoScreen(_ref) {
-  var _ref12;
+  var _ref13;
 
   var layout = _ref.layout,
       video = _ref.video,
@@ -130,16 +130,24 @@ var VideoScreen = function VideoScreen(_ref) {
       _ref2$progressColor = _ref2.progressColor,
       progressColor = _ref2$progressColor === void 0 ? null : _ref2$progressColor;
 
+  var _useResizeObserver = hooks.useResizeObserver(),
+      controlsRef = _useResizeObserver.ref,
+      contentRect = _useResizeObserver.entry.contentRect;
+
+  var _ref3 = contentRect || {},
+      _ref3$height = _ref3.height,
+      controlsHeight = _ref3$height === void 0 ? null : _ref3$height;
+
   var apiRef = React.useRef();
 
-  var _ref3 = apiRef.current || {},
-      togglePlay = _ref3.togglePlay,
-      toggleMute = _ref3.toggleMute,
-      seek = _ref3.seek,
-      play = _ref3.play,
-      pause = _ref3.pause,
-      _ref3$mediaRef = _ref3.mediaRef,
-      apiMediaRef = _ref3$mediaRef === void 0 ? null : _ref3$mediaRef;
+  var _ref4 = apiRef.current || {},
+      togglePlay = _ref4.togglePlay,
+      toggleMute = _ref4.toggleMute,
+      seek = _ref4.seek,
+      play = _ref4.play,
+      pause = _ref4.pause,
+      _ref4$mediaRef = _ref4.mediaRef,
+      apiMediaRef = _ref4$mediaRef === void 0 ? null : _ref4$mediaRef;
 
   React.useEffect(function () {
     if (apiMediaRef !== null && getMediaRef !== null) {
@@ -151,28 +159,33 @@ var VideoScreen = function VideoScreen(_ref) {
   var _useState = React.useState(false),
       _useState2 = _slicedToArray__default["default"](_useState, 2),
       showMediaControls = _useState2[0],
-      setShowMediaControls = _useState2[1]; // Get api state updates from callback
-
+      setShowMediaControls = _useState2[1];
 
-  var _useState3 = React.useState(null),
+  var _useState3 = React.useState(false),
       _useState4 = _slicedToArray__default["default"](_useState3, 2),
-      currentTime = _useState4[0],
-      setCurrentTime = _useState4[1];
+      playOnFirstTap = _useState4[0],
+      setPlayOnFirstTap = _useState4[1]; // Get api state updates from callback
+
 
   var _useState5 = React.useState(null),
       _useState6 = _slicedToArray__default["default"](_useState5, 2),
-      duration = _useState6[0],
-      setDuration = _useState6[1];
+      currentTime = _useState6[0],
+      setCurrentTime = _useState6[1];
 
-  var _useState7 = React.useState(false),
+  var _useState7 = React.useState(null),
       _useState8 = _slicedToArray__default["default"](_useState7, 2),
-      playing = _useState8[0],
-      setPlaying = _useState8[1];
+      duration = _useState8[0],
+      setDuration = _useState8[1];
 
   var _useState9 = React.useState(false),
       _useState10 = _slicedToArray__default["default"](_useState9, 2),
-      muted = _useState10[0],
-      setMuted = _useState10[1];
+      playing = _useState10[0],
+      setPlaying = _useState10[1];
+
+  var _useState11 = React.useState(false),
+      _useState12 = _slicedToArray__default["default"](_useState11, 2),
+      muted = _useState12[0],
+      setMuted = _useState12[1];
 
   var onTimeUpdate = React.useCallback(function (time) {
     setCurrentTime(time);
@@ -183,13 +196,13 @@ var VideoScreen = function VideoScreen(_ref) {
   var onDurationChanged = React.useCallback(function (dur) {
     setDuration(dur);
   }, [setDuration]);
-  var onPlay = React.useCallback(function (_ref4) {
-    var initial = _ref4.initial;
+  var onPlay = React.useCallback(function (_ref5) {
+    var initial = _ref5.initial;
     setPlaying(true);
     trackScreenMedia(video, initial ? 'play' : 'resume');
   }, [trackScreenMedia, video]);
-  var onPause = React.useCallback(function (_ref5) {
-    var midway = _ref5.midway;
+  var onPause = React.useCallback(function (_ref6) {
+    var midway = _ref6.midway;
     setPlaying(false);
     trackScreenMedia(video, midway ? 'pause' : 'ended');
   }, [trackScreenMedia, video]);
@@ -247,10 +260,6 @@ var VideoScreen = function VideoScreen(_ref) {
   }, [play, playing, pause, onMouseMove, withControls, setShowMediaControls]);
   var onShowControls = React.useCallback(function (e) {
     onMouseMove(e, 3000);
-
-    if (autoPlay && !playing) {
-      play();
-    }
   }, [play, onMouseMove]);
   var longPressBind = hooks.useLongPress({
     onLongPress: onLongPress,
@@ -260,10 +269,10 @@ var VideoScreen = function VideoScreen(_ref) {
   var hasCallToAction = callToAction !== null && callToAction.active === true;
   var hasVideo = video !== null;
 
-  var _useState11 = React.useState(hasVideo),
-      _useState12 = _slicedToArray__default["default"](_useState11, 2),
-      ready = _useState12[0],
-      setReady = _useState12[1]; // useState(!hasVideo);
+  var _useState13 = React.useState(hasVideo),
+      _useState14 = _slicedToArray__default["default"](_useState13, 2),
+      ready = _useState14[0],
+      setReady = _useState14[1]; // useState(!hasVideo);
 
 
   var transitionPlaying = current && ready;
@@ -274,20 +283,20 @@ var VideoScreen = function VideoScreen(_ref) {
     }) : 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 _ref7 = videoMedia || {},
+      _ref7$metadata = _ref7.metadata,
+      videoMetadata = _ref7$metadata === void 0 ? null : _ref7$metadata,
+      _ref7$url = _ref7.url,
+      videoUrl = _ref7$url === void 0 ? null : _ref7$url;
 
   var thumbnailUrl = hooks.useMediaThumbnail(videoMedia, thumbnailFile);
   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 _ref8 = videoMetadata || {},
+      _ref8$width = _ref8.width,
+      videoWidth = _ref8$width === void 0 ? 0 : _ref8$width,
+      _ref8$height = _ref8.height,
+      videoHeight = _ref8$height === void 0 ? 0 : _ref8$height;
 
   var _getSizeWithinBounds = size.getSizeWithinBounds(videoWidth, videoHeight, width, height, {
     cover: fullscreen
@@ -308,6 +317,10 @@ var VideoScreen = function VideoScreen(_ref) {
   }, [videoUrl, hasVideoUrl, setReady]);
   var onVideoReady = React.useCallback(function () {
     setReady(true);
+
+    if (autoPlay && !playing) {
+      setPlayOnFirstTap(true); // @note: this sets up a button that plays the video on click for folks who are low on battery on their device: e.g. ios stops the autoplay of videos in that case...
+    }
   }, [setReady]);
   var visibleControls = !autoPlay && !playing || muted || showMediaControls;
   var items = [/*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
@@ -362,11 +375,11 @@ var VideoScreen = function VideoScreen(_ref) {
     onVolumeChanged: onVolumeChanged,
     focusable: current && isView,
     shouldLoad: mediaShouldLoad
-  }))) : null), hasVideoUrl ? /*#__PURE__*/React__default["default"].createElement("button", {
-    key: "video-button",
+  }))) : null), playOnFirstTap && !playing ? /*#__PURE__*/React__default["default"].createElement("button", {
+    key: "first-tap-button",
     type: "button",
-    onClick: onShowControls,
-    className: classNames__default["default"]([styles.videoButton, _defineProperty__default["default"]({}, styles.visible, !visibleControls)])
+    onClick: onPlay,
+    className: classNames__default["default"]([styles.videoButton])
   }) : null, !isPlaceholder ? /*#__PURE__*/React__default["default"].createElement("div", {
     key: "bottom-content",
     className: styles.bottomContent
@@ -380,7 +393,9 @@ var VideoScreen = function VideoScreen(_ref) {
     currentTime: currentTime
   }) : null, /*#__PURE__*/React__default["default"].createElement("div", {
     className: classNames__default["default"]([styles.bottom, _defineProperty__default["default"]({}, styles.withGradient, withSeekBar || withControls || muted)])
-  }, hasVideoUrl ? /*#__PURE__*/React__default["default"].createElement(MediaControls__default["default"], {
+  }, hasVideoUrl ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
+    ref: controlsRef
+  }, /*#__PURE__*/React__default["default"].createElement(MediaControls__default["default"], {
     className: classNames__default["default"]([styles.mediaControls, _defineProperty__default["default"]({}, styles.visible, visibleControls)]),
     withControls: withControls,
     withSeekBar: withSeekBar,
@@ -394,7 +409,15 @@ var VideoScreen = function VideoScreen(_ref) {
     onToggleMute: onToggleMute,
     onSeek: onSeek,
     focusable: current && isView
-  }) : null, hasCallToAction ? /*#__PURE__*/React__default["default"].createElement("div", {
+  })), /*#__PURE__*/React__default["default"].createElement("button", {
+    key: "video-button",
+    style: {
+      height: controlsHeight
+    },
+    type: "button",
+    onPointerDown: onShowControls,
+    className: classNames__default["default"]([styles.videoButton, _defineProperty__default["default"]({}, styles.visible, !visibleControls)])
+  })) : null, hasCallToAction ? /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
       marginTop: -spacing / 2
     }
@@ -420,7 +443,7 @@ var VideoScreen = function VideoScreen(_ref) {
     isSmall: true
   }) : null))) : null];
   return /*#__PURE__*/React__default["default"].createElement("div", Object.assign({
-    className: classNames__default["default"]([styles.container, (_ref12 = {}, _defineProperty__default["default"](_ref12, className, className !== null), _defineProperty__default["default"](_ref12, styles.fullscreen, fullscreen), _ref12)]),
+    className: classNames__default["default"]([styles.container, (_ref13 = {}, _defineProperty__default["default"](_ref13, className, className !== null), _defineProperty__default["default"](_ref13, styles.fullscreen, fullscreen), _ref13)]),
     "data-screen-ready": isStatic || isCapture || ready
   }, longPressBind, {
     onMouseMove: onMouseMove

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/screen-video",
-    "version": "0.3.128",
+    "version": "0.3.131",
     "description": "",
     "keywords": [
         "javascript"
@@ -68,5 +68,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "c968790aaa40811a33fd151892abc083bc596d4b"
+    "gitHead": "36022ce41c8564ba276666e48795aa2f47cac492"
 }