@micromag/viewer 0.3.346 → 0.3.348

package/es/index.js

@@ -16,7 +16,7 @@ import { animated } from '@react-spring/web';
 import classNames from 'classnames';
 import { Helmet } from 'react-helmet';
 import EventEmitter from 'wolfy87-eventemitter';
-import { Label, ScreenPreview, Screen, Button as Button$1, Meta, FontFaces } from '@micromag/core/components';
+import { Label, CloseIcon, ScreenPreview, Screen, ArrowIcon, Button as Button$1, UnmuteIcon, MuteIcon, PauseIcon, PlayIcon, Meta, FontFaces } from '@micromag/core/components';
 import { useDimensionObserver, useTrackEvent, useDragProgress, useMediaProgress, useMediaReady, useParsedStory, useLoadedFonts, useTrackScreenView, useScreenSizeFromElement, useFullscreen } from '@micromag/core/hooks';
 import { getStyleFromColor, easings, getColorAsString, getDeviceScreens } from '@micromag/core/utils';
 import { ShareIncentive } from '@micromag/elements/all';
@@ -200,8 +200,8 @@ function useScreenInteraction() {
 
 var styles$g = {"container":"micromag-viewer-buttons-button-container","asLink":"micromag-viewer-buttons-button-asLink","icon":"micromag-viewer-buttons-button-icon","label":"micromag-viewer-buttons-button-label","withIcon":"micromag-viewer-buttons-button-withIcon","right":"micromag-viewer-buttons-button-right","icon-right":"micromag-viewer-buttons-button-icon-right","withIconColumns":"micromag-viewer-buttons-button-withIconColumns","linkDisabled":"micromag-viewer-buttons-button-linkDisabled"};
 
-var _excluded$8 = ["type", "theme", "size", "href", "external", "direct", "target", "label", "children", "focusable", "active", "icon", "iconPosition", "disabled", "loading", "disableOnLoading", "withoutTheme", "asLink", "onClick", "className", "iconClassName", "labelClassName", "refButton"];
-var propTypes$n = {
+var _excluded$9 = ["type", "theme", "size", "href", "external", "direct", "target", "label", "children", "focusable", "active", "icon", "iconPosition", "disabled", "loading", "disableOnLoading", "withoutTheme", "asLink", "onClick", "className", "iconClassName", "labelClassName", "refButton"];
+var propTypes$o = {
   type: PropTypes.string,
   theme: PropTypes$1.buttonTheme,
   size: PropTypes$1.buttonSize,
@@ -229,7 +229,7 @@ var propTypes$n = {
   })])
 };
 
-var defaultProps$n = {
+var defaultProps$o = {
   type: 'button',
   theme: null,
   size: null,
@@ -279,7 +279,7 @@ var Button = function Button(_ref) {
     iconClassName = _ref.iconClassName,
     labelClassName = _ref.labelClassName,
     refButton = _ref.refButton,
-    props = _objectWithoutProperties(_ref, _excluded$8);
+    props = _objectWithoutProperties(_ref, _excluded$9);
   var finalLabel = label || children;
   var text = finalLabel !== null ? /*#__PURE__*/React.createElement(Label, null, finalLabel) : null;
   var hasChildren = label !== null && children !== null;
@@ -337,10 +337,32 @@ var Button = function Button(_ref) {
     tabIndex: focusable ? '0' : '-1'
   }), content);
 };
-Button.propTypes = propTypes$n;
-Button.defaultProps = defaultProps$n;
+Button.propTypes = propTypes$o;
+Button.defaultProps = defaultProps$o;
 
-var styles$f = {"container":"micromag-viewer-buttons-icon-button-container","icon":"micromag-viewer-buttons-icon-button-icon","label":"micromag-viewer-buttons-icon-button-label"};
+var styles$f = {"container":"micromag-viewer-buttons-icon-button-container","label":"micromag-viewer-buttons-icon-button-label","icon":"micromag-viewer-buttons-icon-button-icon"};
+
+var _excluded$8 = ["iconClassName", "className"];
+var propTypes$n = {
+  iconClassName: PropTypes.string,
+  className: PropTypes.string
+};
+var defaultProps$n = {
+  iconClassName: null,
+  className: null
+};
+var IconButton = function IconButton(_ref) {
+  var iconClassName = _ref.iconClassName,
+    className = _ref.className,
+    props = _objectWithoutProperties(_ref, _excluded$8);
+  return /*#__PURE__*/React.createElement(Button, Object.assign({
+    className: classNames([styles$f.container, _defineProperty({}, className, className !== null)]),
+    labelClassName: styles$f.label,
+    iconClassName: classNames([styles$f.icon, _defineProperty({}, iconClassName, iconClassName !== null)])
+  }, props));
+};
+IconButton.propTypes = propTypes$n;
+IconButton.defaultProps = defaultProps$n;
 
 var _excluded$7 = ["className"];
 var propTypes$m = {
@@ -349,17 +371,24 @@ var propTypes$m = {
 var defaultProps$m = {
   className: null
 };
-var IconButton = function IconButton(_ref) {
+var CloseButton$1 = function CloseButton(_ref) {
   var className = _ref.className,
     props = _objectWithoutProperties(_ref, _excluded$7);
-  return /*#__PURE__*/React.createElement(Button, Object.assign({
-    className: classNames([styles$f.container, _defineProperty({}, className, className !== null)]),
-    labelClassName: styles$f.label,
-    iconClassName: styles$f.icon
+  var intl = useIntl();
+  return /*#__PURE__*/React.createElement(IconButton, Object.assign({
+    className: classNames([_defineProperty({}, className, className !== null)]),
+    label: intl.formatMessage({
+      id: "dj/p/q",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Close"
+      }]
+    }),
+    icon: /*#__PURE__*/React.createElement(CloseIcon, null)
   }, props));
 };
-IconButton.propTypes = propTypes$m;
-IconButton.defaultProps = defaultProps$m;
+CloseButton$1.propTypes = propTypes$m;
+CloseButton$1.defaultProps = defaultProps$m;
 
 var _excluded$6 = ["className"];
 var propTypes$l = {
@@ -382,13 +411,34 @@ var CloseButton = function CloseButton(_ref) {
       }]
     }),
     icon: /*#__PURE__*/React.createElement("svg", {
-      xmlns: "http://www.w3.org/2000/svg",
-      width: "10px",
-      height: "16px",
-      viewBox: "0 0 10 16",
+      width: "19",
+      height: "23",
+      viewBox: "0 0 19 23",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg"
+    }, /*#__PURE__*/React.createElement("mask", {
+      id: "path-1-inside-1_560_19911",
       fill: "currentColor"
-    }, /*#__PURE__*/React.createElement("polygon", {
-      points: "9.95 4.11 8.89 3.05 5 6.94 1.11 3.05 0.05 4.11 3.94 8 0.05 11.89 1.11 12.95 5 9.06 8.89 12.95 9.95 11.89 6.06 8 9.95 4.11"
+    }, /*#__PURE__*/React.createElement("path", {
+      d: "M0 7C0 4.79086 1.79086 3 4 3H12C14.2091 3 16 4.79086 16 7V19C16 21.2091 14.2091 23 12 23H4C1.79086 23 0 21.2091 0 19V7Z"
+    })), /*#__PURE__*/React.createElement("path", {
+      d: "M0 3H16H0ZM16 19C16 21.7614 13.7614 24 11 24H4C1.23858 24 -1 21.7614 -1 19H1C1 20.6569 2.34315 22 4 22H12C14.2091 22 16 20.6569 16 19ZM4 24C1.23858 24 -1 21.7614 -1 19V8C-1 5.23858 1.23858 3 4 3C2.34315 3 1 4.79086 1 7V19C1 20.6569 2.34315 22 4 22V24ZM16 3V23V3Z",
+      fill: "currentColor",
+      mask: "url(#path-1-inside-1_560_19911)"
+    }), /*#__PURE__*/React.createElement("rect", {
+      x: "3.5",
+      y: "0.5",
+      width: "15",
+      height: "19",
+      rx: "2.5",
+      stroke: "currentColor"
+    }), /*#__PURE__*/React.createElement("path", {
+      d: "M7.35333 6.35333L14.6467 13.6467",
+      stroke: "currentColor",
+      strokeLinejoin: "round"
+    }), /*#__PURE__*/React.createElement("path", {
+      d: "M7.35333 13.6467L14.6467 6.35333",
+      stroke: "currentColor"
     }))
   }, props));
 };
@@ -420,15 +470,27 @@ var MenuButton = function MenuButton(_ref) {
     }),
     iconPosition: "right",
     icon: /*#__PURE__*/React.createElement("svg", {
-      xmlns: "http://www.w3.org/2000/svg",
-      width: "10",
-      height: "16",
-      viewBox: "0 0 10 16",
+      width: "19",
+      height: "23",
+      viewBox: "0 0 19 23",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg"
+    }, /*#__PURE__*/React.createElement("mask", {
+      id: "path-1-inside-1_572_15622",
       fill: "currentColor"
-      // className={iconClassName}
-    }, /*#__PURE__*/React.createElement("rect", {
-      width: "10",
-      height: "16"
+    }, /*#__PURE__*/React.createElement("path", {
+      d: "M0 7C0 4.79086 1.79086 3 4 3H12C14.2091 3 16 4.79086 16 7V19C16 21.2091 14.2091 23 12 23H4C1.79086 23 0 21.2091 0 19V7Z"
+    })), /*#__PURE__*/React.createElement("path", {
+      d: "M0 3H16H0ZM16 19C16 21.7614 13.7614 24 11 24H4C1.23858 24 -1 21.7614 -1 19H1C1 20.6569 2.34315 22 4 22H12C14.2091 22 16 20.6569 16 19ZM4 24C1.23858 24 -1 21.7614 -1 19V8C-1 5.23858 1.23858 3 4 3C2.34315 3 1 4.79086 1 7V19C1 20.6569 2.34315 22 4 22V24ZM16 3V23V3Z",
+      fill: "currentColor",
+      mask: "url(#path-1-inside-1_572_15622)"
+    }), /*#__PURE__*/React.createElement("rect", {
+      x: "3.5",
+      y: "0.5",
+      width: "15",
+      height: "19",
+      rx: "2.5",
+      stroke: "currentColor"
     }))
   }, props));
 };
@@ -457,15 +519,21 @@ var ShareButton = function ShareButton(_ref) {
     }),
     iconPosition: "left",
     icon: /*#__PURE__*/React.createElement("svg", {
-      xmlns: "http://www.w3.org/2000/svg",
-      width: "10px",
-      height: "16px",
-      viewBox: "0 0 10 16",
+      width: "16",
+      height: "22",
+      viewBox: "0 0 16 22",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg"
+    }, /*#__PURE__*/React.createElement("path", {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M7.55806 0.183058C7.80213 -0.0610194 8.19786 -0.0610194 8.44194 0.183058L12.4194 4.16053C12.6635 4.40461 12.6635 4.80034 12.4194 5.04442C12.1753 5.2885 11.7796 5.2885 11.5355 5.04442L8.625 2.13388V11.25H7.375V2.13388L4.46446 5.04442C4.22039 5.2885 3.82466 5.2885 3.58058 5.04442C3.3365 4.80034 3.3365 4.40461 3.58058 4.16053L7.55806 0.183058Z",
+      fill: "currentColor"
+    }), /*#__PURE__*/React.createElement("path", {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M16 18.25V10.25C16 8.59315 14.6569 7.25 13 7.25C14.1046 7.25 15 8.59315 15 10.25V18.25C15 19.3546 14.1046 20.25 13 20.25H3C1.89543 20.25 1 19.3546 1 18.25V10.25C1 8.59315 1.89543 7.25 3 7.25C1.34315 7.25 0 8.59315 0 10.25V18.25C0 19.9069 1.34315 21.25 3 21.25H13C14.6569 21.25 16 19.9069 16 18.25Z",
       fill: "currentColor"
-    }, /*#__PURE__*/React.createElement("polygon", {
-      points: "8.5 14.5 1.5 14.5 1.5 8 0 8 0 16 10 16 10 8 8.5 8 8.5 14.5"
-    }), /*#__PURE__*/React.createElement("polygon", {
-      points: "9.62 4.62 5 0 0.38 4.62 1.44 5.68 4.25 2.87 4.25 11.26 5.75 11.26 5.75 2.87 8.56 5.68 9.62 4.62"
     }))
   }, props));
 };
@@ -1524,13 +1592,16 @@ var ViewerMenu = function ViewerMenu(_ref) {
     };
   }, [menuOpened, onOpenMenu, onCloseMenu]);
   useKeyboardShortcuts(keyboardShortcuts);
-  var menuOpenedProgressValue = menuOpenedProgress ? menuOpenedProgress.value || 0 : 0;
-  var shareOpenedProgressValue = shareOpenedProgress ? shareOpenedProgress.value || 0 : 0;
 
+  // @TODO: Fix if needed
+  // const menuOpenedProgressValue = menuOpenedProgress ? menuOpenedProgress.value || 0 : 0;
+  // const shareOpenedProgressValue = shareOpenedProgress ? shareOpenedProgress.value || 0 : 0;
   // should be zero if either screens menu or share menu is opened
-  var dotsOpacity = Math.min(1, Math.max(0, 1 - (menuOpenedProgressValue + shareOpenedProgressValue)));
+  // const dotsOpacity = useEffect(() => {
+  //     Math.min(1, Math.max(0, 1 - (menuOpenedProgressValue + shareOpenedProgressValue)));
+  // }, [menuOpenedProgressValue, shareOpenedProgressValue]);
 
-  // console.log(dotsOpacity, menuProgressValue, shareProgressValue);
+  // console.log(dotsOpacity);
 
   useEffect(function () {
     if ((menuOpened || draggingMenu) && !menuMounted) {
@@ -1559,7 +1630,7 @@ var ViewerMenu = function ViewerMenu(_ref) {
       iconPosition: "left",
       focusable: !shareOpened
     }),
-    toggledButton: /*#__PURE__*/React.createElement(CloseButton, {
+    toggledButton: /*#__PURE__*/React.createElement(CloseButton$1, {
       className: styles$6.menuButton,
       onClick: onCloseShare,
       theme: menuTheme,
@@ -1597,10 +1668,10 @@ var ViewerMenu = function ViewerMenu(_ref) {
     withoutScreensMenu: withoutScreensMenu,
     withoutShareMenu: withoutShareMenu,
     onClose: onClickCloseViewer,
-    className: styles$6.dots,
-    style: {
-      opacity: Math.pow(dotsOpacity, 5) // @note this is like a "quint" easing, meaning it'll go towards 1 slowly first and then fast as it approaches 1
-    }
+    className: styles$6.dots
+    // style={{
+    // opacity: dotsOpacity ** 5, // @note this is like a "quint" easing, meaning it'll go towards 1 slowly first and then fast as it approaches 1
+    // }}
   }))), /*#__PURE__*/React.createElement(ViewerMenuContainer, {
     className: styles$6.menuContainer,
     progressSpring: shareOpenedProgress,
@@ -1794,24 +1865,14 @@ var ArrowHint = function ArrowHint(_ref) {
     className: classNames([styles$3.container, _defineProperty({}, className, className !== null)])
   }, /*#__PURE__*/React.createElement("div", {
     className: styles$3.inner
-  }, /*#__PURE__*/React.createElement("svg", {
-    className: styles$3.arrow,
-    xmlns: "http://www.w3.org/2000/svg",
-    xmlnsXlink: "http://www.w3.org/1999/xlink",
-    x: "0px",
-    y: "0px",
-    width: "10px",
-    height: "16px",
-    viewBox: "0 0 10 16",
-    fill: "currentColor"
-  }, /*#__PURE__*/React.createElement("polygon", {
-    points: "9.62 4.62 5 0 0.38 4.62 1.44 5.68 4.25 2.87 4.25 14.39 5.75 14.39 5.75 2.87 8.56 5.68 9.62 4.62"
-  }))));
+  }, /*#__PURE__*/React.createElement(ArrowIcon, {
+    className: styles$3.arrow
+  })));
 };
 ArrowHint.propTypes = propTypes$6;
 ArrowHint.defaultProps = defaultProps$6;
 
-var styles$2 = {"track":"micromag-viewer-partials-seek-bar-track","progress":"micromag-viewer-partials-seek-bar-progress","inner":"micromag-viewer-partials-seek-bar-inner","progressBar":"micromag-viewer-partials-seek-bar-progressBar","playHead":"micromag-viewer-partials-seek-bar-playHead","withSeekHead":"micromag-viewer-partials-seek-bar-withSeekHead","scrubbedTime":"micromag-viewer-partials-seek-bar-scrubbedTime","showTimestamp":"micromag-viewer-partials-seek-bar-showTimestamp"};
+var styles$2 = {"track":"micromag-viewer-partials-seek-bar-track","progress":"micromag-viewer-partials-seek-bar-progress","inner":"micromag-viewer-partials-seek-bar-inner","progressBarContainer":"micromag-viewer-partials-seek-bar-progressBarContainer","progressBar":"micromag-viewer-partials-seek-bar-progressBar","playHead":"micromag-viewer-partials-seek-bar-playHead","withSeekHead":"micromag-viewer-partials-seek-bar-withSeekHead","scrubbedTime":"micromag-viewer-partials-seek-bar-scrubbedTime","showTimestamp":"micromag-viewer-partials-seek-bar-showTimestamp"};
 
 var stopDragEventsPropagation = {
   onTouchMove: function onTouchMove(e) {
@@ -1950,12 +2011,14 @@ var SeekBar = function SeekBar(_ref3) {
     className: classNames([styles$2.container, (_ref6 = {}, _defineProperty(_ref6, className, className !== null), _defineProperty(_ref6, styles$2.withSeekHead, withSeekHead), _defineProperty(_ref6, styles$2.showTimestamp, showTimestamp), _ref6)])
   }, stopDragEventsPropagation), /*#__PURE__*/React.createElement("div", {
     className: styles$2.inner
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles$2.progressBarContainer
   }, /*#__PURE__*/React.createElement("div", {
     className: styles$2.progressBar,
     style: {
       backgroundColor: backgroundColor
     }
-  }, /*#__PURE__*/React.createElement("div", {
+  }), /*#__PURE__*/React.createElement("div", {
     className: styles$2.playHead,
     style: {
       left: "".concat(progress * 100, "%"),
@@ -2142,42 +2205,11 @@ function PlaybackControls(_ref) {
     progressColor = _ref3.progressColor,
     seekBarOnly = _ref3.seekBarOnly;
   var isCollapsed = controls && !controlsVisible && playing || !controls && mediaHasAudio;
-  var icon = playing ? /*#__PURE__*/React.createElement("svg", {
-    className: styles$1.icon,
-    xmlns: "http://www.w3.org/2000/svg",
-    xmlnsXlink: "http://www.w3.org/1999/xlink",
-    x: "0px",
-    y: "0px",
-    width: "10px",
-    height: "16px",
-    viewBox: "0 0 10 16",
-    xmlSpace: "preserve"
-  }, /*#__PURE__*/React.createElement("rect", {
-    fill: color,
-    x: "1",
-    y: "3.27",
-    width: "3",
-    height: "9.69"
-  }), /*#__PURE__*/React.createElement("rect", {
-    fill: color,
-    x: "6",
-    y: "3.27",
-    width: "3",
-    height: "9.69"
-  })) : /*#__PURE__*/React.createElement("svg", {
-    className: styles$1.icon,
-    xmlns: "http://www.w3.org/2000/svg",
-    xmlnsXlink: "http://www.w3.org/1999/xlink",
-    x: "0px",
-    y: "0px",
-    width: "10px",
-    height: "16px",
-    viewBox: "0 0 10 16",
-    xmlSpace: "preserve"
-  }, /*#__PURE__*/React.createElement("path", {
-    fill: color,
-    d: "M1,3.16V12.84l8-4.84L1,3.16"
-  }));
+  var icon = playing ? /*#__PURE__*/React.createElement(PauseIcon, {
+    className: styles$1.icon
+  }) : /*#__PURE__*/React.createElement(PlayIcon, {
+    className: styles$1.icon
+  });
   return /*#__PURE__*/React.createElement("div", {
     className: classNames([styles$1.container, (_ref4 = {}, _defineProperty(_ref4, className, className !== null), _defineProperty(_ref4, styles$1.withPlayPause, controls && !seekBarOnly), _defineProperty(_ref4, styles$1.withMute, hasMedia || controls), _defineProperty(_ref4, styles$1.withSeekBar, controls), _defineProperty(_ref4, styles$1.withSeekBarOnly, seekBarOnly), _defineProperty(_ref4, styles$1.isCollapsed, isCollapsed), _defineProperty(_ref4, styles$1.isMuted, muted), _defineProperty(_ref4, collapsedClassName, collapsedClassName !== null && isCollapsed), _ref4)])
   }, /*#__PURE__*/React.createElement(Button$1, {
@@ -2226,44 +2258,11 @@ function PlaybackControls(_ref) {
     },
     onClick: muted ? onUnmute : onMute,
     focusable: controlsVisible || mediaHasAudio,
-    icon: muted ? /*#__PURE__*/React.createElement("svg", {
-      xmlns: "http://www.w3.org/2000/svg",
-      xmlnsXlink: "http://www.w3.org/1999/xlink",
-      x: "0px",
-      y: "0px",
-      width: "10px",
-      height: "16px",
-      viewBox: "0 0 10 16",
-      xmlSpace: "preserve",
+    icon: muted ? /*#__PURE__*/React.createElement(UnmuteIcon, {
       className: styles$1.icon
-    }, /*#__PURE__*/React.createElement("polygon", {
-      fill: color,
-      points: "2.75 4.63 1.24 6 0 6 0 10 1.24 10 4.54 13 4.54 3 2.75 4.63"
-    }), /*#__PURE__*/React.createElement("polygon", {
-      fill: color,
-      points: "10 6.63 8.94 5.57 7.58 6.93 6.21 5.57 5.15 6.63 6.52 7.99 5.15 9.35 6.21 10.43 7.58 9.06 8.94 10.43 10 9.35 8.64 7.99 10 6.63"
-    })) : /*#__PURE__*/React.createElement("svg", {
-      xmlns: "http://www.w3.org/2000/svg",
-      xmlnsXlink: "http://www.w3.org/1999/xlink",
-      x: "0px",
-      y: "0px",
-      width: "10px",
-      height: "16px",
-      viewBox: "0 0 10 16",
-      xmlSpace: "preserve",
+    }) : /*#__PURE__*/React.createElement(MuteIcon, {
       className: styles$1.icon
-    }, /*#__PURE__*/React.createElement("polygon", {
-      fill: color,
-      points: "2.75 4.63 1.24 6 0 6 0 10 1.24 10 4.54 13 4.54 3 2.75 4.63"
-    }), /*#__PURE__*/React.createElement("circle", {
-      fill: color,
-      cx: "6.14",
-      cy: "8",
-      r: ".99"
-    }), /*#__PURE__*/React.createElement("path", {
-      fill: color,
-      d: "M6.14,11.88v-1.5c1.31,0,2.38-1.07,2.38-2.38s-1.07-2.38-2.38-2.38v-1.5c2.14,0,3.88,1.74,3.88,3.88s-1.74,3.88-3.88,3.88Z"
-    })),
+    }),
     "aria-label": muted ? intl.formatMessage({
       id: "RK/QEY",
       defaultMessage: [{