@micromag/viewer 0.3.779 → 0.3.783

package/es/index.js

@@ -19,7 +19,7 @@ import { Helmet } from 'react-helmet';
 import { useIntl, FormattedMessage } from 'react-intl';
 import EventEmitter from 'wolfy87-eventemitter';
 import { Label, CloseIcon, ScreenPreview, Screen, ArrowIcon, Button as Button$1, PlayIcon, Spinner, UnmuteIcon, MuteIcon, PauseIcon, Meta, FontFaces } from '@micromag/core/components';
-import { useIsVisible, useDimensionObserver, useTrackEvent, useDragProgress, useMediaProgress, useMediaCurrentTime, useMediaDuration, useMediaReady, useMediaState, useParsedStory, useLoadedFonts, useTrackScreenView, useScreenSizeFromElement, useFullscreen } from '@micromag/core/hooks';
+import { useIsVisible, useDimensionObserver, useTrackEvent, useDragProgress, useMediaProgress, useMediaCurrentTime, useMediaDuration, useMediaReady, useMediaState, useParsedStory, useLoadedFonts, useTrackScreenView, useScreenSizeFromElement, useFullscreen, useActivityDetector } from '@micromag/core/hooks';
 import { getStyleFromColor, easings, getStyleFromText, getColorAsString, getDeviceScreens } from '@micromag/core/utils';
 import { ShareIncentive } from '@micromag/elements/all';
 import FocusLock from 'react-focus-lock';
@@ -1323,6 +1323,7 @@ var propTypes$c = {
   title: PropTypes.string,
   description: PropTypes.string,
   items: PropTypes$1.menuItems,
+  shareOptions: PropTypes.arrayOf(PropTypes.string),
   focusable: PropTypes.bool,
   paddingTop: PropTypes.number,
   currentScreenIndex: PropTypes.number,
@@ -1336,6 +1337,7 @@ var defaultProps$c = {
   title: null,
   description: null,
   items: [],
+  shareOptions: null,
   focusable: true,
   paddingTop: null,
   currentScreenIndex: 0,
@@ -1349,6 +1351,7 @@ var ViewerMenuShare = function ViewerMenuShare(_ref) {
     title = _ref.title,
     description = _ref.description,
     items = _ref.items,
+    shareOptions = _ref.shareOptions,
     focusable = _ref.focusable,
     paddingTop = _ref.paddingTop,
     currentScreenIndex = _ref.currentScreenIndex,
@@ -1440,6 +1443,7 @@ var ViewerMenuShare = function ViewerMenuShare(_ref) {
     itemClassName: styles$8.optionItem,
     buttonClassName: styles$8.optionButton,
     title: title,
+    options: shareOptions,
     url: finalShareUrl,
     focusable: focusable,
     onShare: onShare,
@@ -1464,6 +1468,7 @@ var propTypes$b = {
   withShadow: PropTypes.bool,
   trackingEnabled: PropTypes.bool,
   shareBasePath: PropTypes.string,
+  shareOptions: PropTypes.arrayOf(PropTypes.string),
   theme: PropTypes$1.viewerTheme,
   screenSize: PropTypes$1.screenSize,
   menuWidth: PropTypes.number,
@@ -1494,6 +1499,7 @@ var defaultProps$b = {
   withShadow: false,
   trackingEnabled: false,
   shareBasePath: null,
+  shareOptions: null,
   theme: null,
   screenSize: null,
   menuWidth: null,
@@ -1522,6 +1528,7 @@ var ViewerMenu = function ViewerMenu(_ref) {
     closeable = _ref.closeable,
     withShadow = _ref.withShadow,
     shareBasePath = _ref.shareBasePath,
+    shareOptions = _ref.shareOptions,
     trackingEnabled = _ref.trackingEnabled,
     viewerTheme = _ref.theme,
     screenSize = _ref.screenSize,
@@ -1879,6 +1886,7 @@ var ViewerMenu = function ViewerMenu(_ref) {
     paddingTop: navContainerHeight,
     focusable: shareOpened,
     items: items,
+    shareOptions: shareOptions,
     currentScreenIndex: currentScreenIndex,
     shareUrl: shareUrl,
     onShare: onShare,
@@ -2766,6 +2774,7 @@ var propTypes$2 = {
   menuFooter: PropTypes.node,
   menuItems: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.node])),
   shareBasePath: PropTypes.string,
+  shareOptions: PropTypes.arrayOf(PropTypes.string),
   afterShareMenuButton: PropTypes.node,
   beforeScreensMenuButton: PropTypes.node,
   backToFirstScreenTimeout: PropTypes.number,
@@ -2826,6 +2835,7 @@ var defaultProps$2 = {
   menuFooter: null,
   menuItems: ['share', 'main'],
   shareBasePath: null,
+  shareOptions: null,
   afterShareMenuButton: null,
   beforeScreensMenuButton: null,
   backToFirstScreenTimeout: null,
@@ -2882,6 +2892,7 @@ var Viewer = function Viewer(_ref) {
     menuFooter = _ref.menuFooter,
     menuItems = _ref.menuItems,
     shareBasePath = _ref.shareBasePath,
+    shareOptions = _ref.shareOptions,
     afterShareMenuButton = _ref.afterShareMenuButton,
     beforeScreensMenuButton = _ref.beforeScreensMenuButton,
     backToFirstScreenTimeout = _ref.backToFirstScreenTimeout,
@@ -3004,7 +3015,9 @@ var Viewer = function Viewer(_ref) {
     _usePlaybackContext$m = _usePlaybackContext.media,
     playbackMedia = _usePlaybackContext$m === void 0 ? null : _usePlaybackContext$m,
     _usePlaybackContext$c3 = _usePlaybackContext.completed,
-    mediaCompleted = _usePlaybackContext$c3 === void 0 ? false : _usePlaybackContext$c3;
+    mediaCompleted = _usePlaybackContext$c3 === void 0 ? false : _usePlaybackContext$c3,
+    _usePlaybackContext$i = _usePlaybackContext.isBackground,
+    isBackgroundVideo = _usePlaybackContext$i === void 0 ? false : _usePlaybackContext$i;
   var playbackHelpVisible = useMemo(function () {
     return playbackControls && playbackControlsVisible;
   }, [playbackControls, playbackControlsVisible]);
@@ -3261,13 +3274,6 @@ var Viewer = function Viewer(_ref) {
   }, [onTransitionStart, onTransitionComplete]);
   var menuVisible = screensCount === 0 || currentScreenInteractionEnabled;
   var navigationDisabled = currentScreenInteractionEnabled === false;
-
-  // console.log(
-  //     'currentScreenInteractionEnabled',
-  //     currentScreenInteractionEnabled,
-  //     withoutGestures,
-  // );
-
   var _useDragProgress = useDragProgress({
       progress: screenIndex,
       disabled: !isView || withoutTransitions,
@@ -3474,10 +3480,17 @@ var Viewer = function Viewer(_ref) {
     bottomHeight = playbackControlsContainerHeight / screenScale;
   }
   var NavigationHint = withNavigationHint === 'hand' ? HandTap : ArrowHint;
+  var _useActivityDetector = useActivityDetector({
+      element: containerRef.current,
+      disabled: !isView,
+      timeout: 2000
+    }),
+    activityDetected = _useActivityDetector.detected;
   useEffect(function () {
     var timeout = null;
-    var hasMediaCompleted = playbackMedia !== null ? mediaCompleted : true;
-    if (backToFirstScreenTimeout !== null && isView && screensCount > 1 && screenIndex !== 0 && hasMediaCompleted) {
+    // const looping = playbackMedia !== null ? playbackMedia.loop || false : false;
+    var hasMediaCompleted = playbackMedia !== null && !isBackgroundVideo ? mediaCompleted : true;
+    if (backToFirstScreenTimeout !== null && isView && screensCount > 1 && screenIndex !== 0 && hasMediaCompleted && !isDragging && !activityDetected) {
       timeout = setTimeout(function () {
         changeIndex(0);
       }, backToFirstScreenTimeout);
@@ -3487,8 +3500,11 @@ var Viewer = function Viewer(_ref) {
         clearTimeout(timeout);
       }
     };
-  }, [backToFirstScreenTimeout, isView, screenIndex, screensCount, changeIndex, playbackMedia, mediaCompleted, isDragging]);
-  console.log('mc', mediaCompleted, playbackMedia);
+  }, [backToFirstScreenTimeout, isView, screenIndex, screensCount, changeIndex, playbackMedia, mediaCompleted, isDragging, activityDetected, isBackgroundVideo]);
+
+  // console.log('mediaCompleted', mediaCompleted, playbackMedia);
+  // console.log('activityDetected', activityDetected);
+
   return /*#__PURE__*/React.createElement(StoryProvider, {
     story: parsedStory
   }, /*#__PURE__*/React.createElement(ScreenSizeProvider, {
@@ -3583,6 +3599,7 @@ var Viewer = function Viewer(_ref) {
     menuDotsButtons: menuDotsButtons,
     closeable: closeable,
     shareBasePath: shareBasePath || basePath,
+    shareOptions: shareOptions,
     screenSize: screenSize,
     menuWidth: menuIsScreenWidth ? screenContainerWidth : null,
     theme: viewerTheme,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/viewer",
-    "version": "0.3.779",
+    "version": "0.3.783",
     "private": false,
     "description": "",
     "keywords": [
@@ -64,14 +64,14 @@
     "dependencies": {
         "@babel/runtime": "^7.13.10",
         "@folklore/routes": "^0.2.36",
-        "@micromag/core": "^0.3.779",
-        "@micromag/element-badge": "^0.3.779",
-        "@micromag/element-scroll": "^0.3.779",
-        "@micromag/element-share-options": "^0.3.779",
-        "@micromag/element-webview": "^0.3.779",
-        "@micromag/elements": "^0.3.779",
-        "@micromag/intl": "^0.3.779",
-        "@micromag/screens": "^0.3.779",
+        "@micromag/core": "^0.3.781",
+        "@micromag/element-badge": "^0.3.781",
+        "@micromag/element-scroll": "^0.3.781",
+        "@micromag/element-share-options": "^0.3.783",
+        "@micromag/element-webview": "^0.3.781",
+        "@micromag/elements": "^0.3.783",
+        "@micromag/intl": "^0.3.781",
+        "@micromag/screens": "^0.3.783",
         "@react-spring/core": "^9.6.1",
         "@react-spring/web": "^9.6.1",
         "@use-gesture/react": "^10.3.0",
@@ -91,5 +91,5 @@
         "access": "public",
         "registry": "https://registry.npmjs.org/"
     },
-    "gitHead": "5cc7b8fc6d58ba77100060a9d9a4a3f87f835559"
+    "gitHead": "e79f1240a3d905de33eb3dd873b772c11b6ebdb0"
 }