@micromag/screen-share 0.3.251 → 0.3.262

package/assets/css/styles.css

@@ -1 +1 @@
-.micromag-screen-share-container{position:relative;width:100%;height:100%;overflow:hidden}.micromag-screen-share-disabled.micromag-screen-share-container{overflow:hidden;pointer-events:none}.micromag-screen-share-hidden.micromag-screen-share-container{display:none;visibility:hidden}.micromag-screen-share-placeholder.micromag-screen-share-container .micromag-screen-share-content{position:relative;padding:6px}.micromag-screen-share-emptyHeading,.micromag-screen-share-emptyOptions{margin:5px auto;border:2px dashed #343434;color:#343434}.micromag-screen-share-layout{overflow-x:hidden;overflow-y:auto;padding:10px}.micromag-screen-share-shareOptions{margin-top:10px}.micromag-screen-share-shareOptions.micromag-screen-share-isCentered{-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center}.micromag-screen-share-shareButton{display:-webkit-flex;display:-ms-flexbox;display:flex;width:100%}.micromag-screen-share-emptyHeading,.micromag-screen-share-emptyOptions{width:100%;margin:10px auto;padding:10px}.micromag-screen-share-emptyOptions{padding:40px}
+.micromag-screen-share-container .micromag-screen-share-background{position:absolute;top:0;left:0;width:100%;height:100%}.micromag-screen-share-container{position:relative;width:100%;height:100%;overflow:hidden}.micromag-screen-share-disabled.micromag-screen-share-container{overflow:hidden;pointer-events:none}.micromag-screen-share-hidden.micromag-screen-share-container{display:none;visibility:hidden}.micromag-screen-share-placeholder.micromag-screen-share-container .micromag-screen-share-content{position:relative;padding:6px}.micromag-screen-share-emptyHeading,.micromag-screen-share-emptyOptions{margin:5px auto;border:2px dashed #343434;color:#343434}.micromag-screen-share-container .micromag-screen-share-background{z-index:0}.micromag-screen-share-container .micromag-screen-share-content{z-index:1}.micromag-screen-share-layout{overflow-x:hidden;overflow-y:auto;padding:10px}.micromag-screen-share-shareOptions{margin-top:10px}.micromag-screen-share-shareOptions.micromag-screen-share-isCentered{-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center}.micromag-screen-share-shareButton{display:-webkit-flex;display:-ms-flexbox;display:flex;width:100%}.micromag-screen-share-emptyHeading,.micromag-screen-share-emptyOptions{width:100%;margin:10px auto;padding:10px}.micromag-screen-share-emptyOptions{padding:40px}

package/es/index.js

@@ -17,7 +17,7 @@ import ShareOptions from '@micromag/element-share-options';
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import { Heading1, Text, Container as Container$1 } from '@micromag/transforms/apple-news';
 
-var styles = {"container":"micromag-screen-share-container","disabled":"micromag-screen-share-disabled","hidden":"micromag-screen-share-hidden","placeholder":"micromag-screen-share-placeholder","content":"micromag-screen-share-content","emptyHeading":"micromag-screen-share-emptyHeading","emptyOptions":"micromag-screen-share-emptyOptions","layout":"micromag-screen-share-layout","shareOptions":"micromag-screen-share-shareOptions","isCentered":"micromag-screen-share-isCentered","shareButton":"micromag-screen-share-shareButton"};
+var styles = {"container":"micromag-screen-share-container","background":"micromag-screen-share-background","disabled":"micromag-screen-share-disabled","hidden":"micromag-screen-share-hidden","placeholder":"micromag-screen-share-placeholder","content":"micromag-screen-share-content","emptyHeading":"micromag-screen-share-emptyHeading","emptyOptions":"micromag-screen-share-emptyOptions","layout":"micromag-screen-share-layout","shareOptions":"micromag-screen-share-shareOptions","isCentered":"micromag-screen-share-isCentered","shareButton":"micromag-screen-share-shareButton"};
 
 var propTypes = {
   layout: PropTypes.oneOf(['top', 'middle', 'bottom']),
@@ -30,6 +30,8 @@ var propTypes = {
   spacing: PropTypes.number,
   background: PropTypes$1.backgroundElement,
   callToAction: PropTypes$1.callToAction,
+  id: PropTypes.string,
+  index: PropTypes.number,
   current: PropTypes.bool,
   active: PropTypes.bool,
   transitions: PropTypes$1.transitions,
@@ -47,6 +49,8 @@ var defaultProps = {
   spacing: 20,
   background: null,
   callToAction: null,
+  id: null,
+  index: null,
   current: true,
   active: true,
   transitions: null,
@@ -55,7 +59,7 @@ var defaultProps = {
 };
 
 var ShareScreen = function ShareScreen(_ref) {
-  var _ref3;
+  var _ref4;
 
   var layout = _ref.layout,
       heading = _ref.heading,
@@ -67,6 +71,8 @@ var ShareScreen = function ShareScreen(_ref) {
       spacing = _ref.spacing,
       background = _ref.background,
       callToAction = _ref.callToAction,
+      id = _ref.id,
+      index = _ref.index,
       current = _ref.current,
       active = _ref.active,
       transitions = _ref.transitions,
@@ -104,9 +110,32 @@ var ShareScreen = function ShareScreen(_ref) {
   var backgroundShouldLoad = current || active;
   var hasCallToAction = callToAction !== null && callToAction.active === true;
   var currentUrl = useMemo(function () {
-    var origin = typeof window !== 'undefined' ? window.location.origin.replace(/\/+$/, '') : '';
-    return origin;
-  }, []);
+    if (typeof window === 'undefined') return '';
+
+    var _ref2 = window.location || {},
+        _ref2$hostname = _ref2.hostname,
+        hostname = _ref2$hostname === void 0 ? null : _ref2$hostname,
+        _ref2$pathname = _ref2.pathname,
+        pathname = _ref2$pathname === void 0 ? null : _ref2$pathname;
+
+    var parts = pathname.split('/');
+    /**
+     * for the last portion of the path, if it's equal to the screen index,
+     * or the screen id, then don't include it in the share URL.
+     * This makes sure we're not doing a `.replace()` that might remove a part
+     * from the slug of the current Micromag.
+     * (e.g. if the url is `/10-reasons-to-lorem-ipsum` and the share screen
+     * is on screen 10, then a string replace would remove the `/10` from the
+     * URL)
+     */
+
+    return parts.reduce(function (acc, part, i) {
+      return (// it's equal to the screen index, or equal to the screen ID, or it's empty
+        i === parts.length - 1 && parseInt(part, 10) === index || part === id || part === '' ? acc : "".concat(acc, "/").concat(part)
+      );
+    }, hostname);
+  }, [index, id]); // if not share URl was specified, default to the currentURL (without the screen index/id part)
+
   var finalShareURL = shareUrl || currentUrl;
   var defaultOptions = options !== null ? ['email', 'facebook', 'twitter', 'linkedin', 'whatsapp', 'facebookMessenger'] : [];
   var selectedOptions = options !== null ? Object.keys(options).reduce(function (acc, key) {
@@ -118,11 +147,10 @@ var ShareScreen = function ShareScreen(_ref) {
   var onClickShare = useCallback(function (type) {
     if (trackingEnabled) {
       trackEvent('click_share', type, {
-        shareUrl: shareUrl
+        shareUrl: finalShareURL
       });
     }
-  }, [trackEvent]); // Create elements
-
+  }, [trackEvent]);
   var items = [/*#__PURE__*/React.createElement(ScreenElement, {
     key: "title",
     placeholder: "title",
@@ -175,27 +203,19 @@ var ShareScreen = function ShareScreen(_ref) {
     return el !== null;
   });
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles.container, (_ref3 = {}, _defineProperty(_ref3, className, className !== null), _defineProperty(_ref3, styles.isPlaceholder, isPlaceholder), _ref3)]),
+    className: classNames([styles.container, (_ref4 = {}, _defineProperty(_ref4, className, className !== null), _defineProperty(_ref4, styles.isPlaceholder, isPlaceholder), _ref4)]),
     "data-screen-ready": true
-  }, !isPlaceholder ? /*#__PURE__*/React.createElement(Background, {
-    background: background,
+  }, /*#__PURE__*/React.createElement(Container, {
     width: width,
     height: height,
-    resolution: resolution,
-    playing: backgroundPlaying,
-    muted: muted,
-    shouldLoad: backgroundShouldLoad,
-    mediaRef: mediaRef
-  }) : null, /*#__PURE__*/React.createElement(Container, {
-    width: width,
-    height: height
+    className: styles.content
   }, /*#__PURE__*/React.createElement(Layout, {
     className: styles.layout,
     verticalAlign: layout,
     fullscreen: true,
     style: !isPlaceholder ? {
       padding: spacing,
-      paddingTop: (current && !isPreview ? viewerTopHeight : 0) + spacing,
+      paddingTop: (!isPreview ? viewerTopHeight : 0) + spacing,
       paddingBottom: (current && !isPreview ? viewerBottomHeight : 0) + spacing
     } : null
   }, /*#__PURE__*/React.createElement(TransitionsStagger, {
@@ -203,7 +223,18 @@ var ShareScreen = function ShareScreen(_ref) {
     stagger: transitionStagger,
     disabled: transitionDisabled,
     playing: transitionPlaying
-  }, items))));
+  }, items))), !isPlaceholder ? /*#__PURE__*/React.createElement(Background, {
+    background: background,
+    width: width,
+    height: height,
+    resolution: resolution,
+    playing: backgroundPlaying,
+    muted: muted,
+    shouldLoad: backgroundShouldLoad,
+    mediaRef: mediaRef,
+    withoutVideo: isPreview,
+    className: styles.background
+  }) : null);
 };
 
 ShareScreen.propTypes = propTypes;

package/lib/index.js

@@ -36,7 +36,7 @@ var Layout__default = /*#__PURE__*/_interopDefaultLegacy(Layout);
 var ShareOptions__default = /*#__PURE__*/_interopDefaultLegacy(ShareOptions);
 var _objectSpread__default = /*#__PURE__*/_interopDefaultLegacy(_objectSpread);
 
-var styles = {"container":"micromag-screen-share-container","disabled":"micromag-screen-share-disabled","hidden":"micromag-screen-share-hidden","placeholder":"micromag-screen-share-placeholder","content":"micromag-screen-share-content","emptyHeading":"micromag-screen-share-emptyHeading","emptyOptions":"micromag-screen-share-emptyOptions","layout":"micromag-screen-share-layout","shareOptions":"micromag-screen-share-shareOptions","isCentered":"micromag-screen-share-isCentered","shareButton":"micromag-screen-share-shareButton"};
+var styles = {"container":"micromag-screen-share-container","background":"micromag-screen-share-background","disabled":"micromag-screen-share-disabled","hidden":"micromag-screen-share-hidden","placeholder":"micromag-screen-share-placeholder","content":"micromag-screen-share-content","emptyHeading":"micromag-screen-share-emptyHeading","emptyOptions":"micromag-screen-share-emptyOptions","layout":"micromag-screen-share-layout","shareOptions":"micromag-screen-share-shareOptions","isCentered":"micromag-screen-share-isCentered","shareButton":"micromag-screen-share-shareButton"};
 
 var propTypes = {
   layout: PropTypes__default["default"].oneOf(['top', 'middle', 'bottom']),
@@ -49,6 +49,8 @@ var propTypes = {
   spacing: PropTypes__default["default"].number,
   background: core.PropTypes.backgroundElement,
   callToAction: core.PropTypes.callToAction,
+  id: PropTypes__default["default"].string,
+  index: PropTypes__default["default"].number,
   current: PropTypes__default["default"].bool,
   active: PropTypes__default["default"].bool,
   transitions: core.PropTypes.transitions,
@@ -66,6 +68,8 @@ var defaultProps = {
   spacing: 20,
   background: null,
   callToAction: null,
+  id: null,
+  index: null,
   current: true,
   active: true,
   transitions: null,
@@ -74,7 +78,7 @@ var defaultProps = {
 };
 
 var ShareScreen = function ShareScreen(_ref) {
-  var _ref3;
+  var _ref4;
 
   var layout = _ref.layout,
       heading = _ref.heading,
@@ -86,6 +90,8 @@ var ShareScreen = function ShareScreen(_ref) {
       spacing = _ref.spacing,
       background = _ref.background,
       callToAction = _ref.callToAction,
+      id = _ref.id,
+      index = _ref.index,
       current = _ref.current,
       active = _ref.active,
       transitions = _ref.transitions,
@@ -123,9 +129,32 @@ var ShareScreen = function ShareScreen(_ref) {
   var backgroundShouldLoad = current || active;
   var hasCallToAction = callToAction !== null && callToAction.active === true;
   var currentUrl = React.useMemo(function () {
-    var origin = typeof window !== 'undefined' ? window.location.origin.replace(/\/+$/, '') : '';
-    return origin;
-  }, []);
+    if (typeof window === 'undefined') return '';
+
+    var _ref2 = window.location || {},
+        _ref2$hostname = _ref2.hostname,
+        hostname = _ref2$hostname === void 0 ? null : _ref2$hostname,
+        _ref2$pathname = _ref2.pathname,
+        pathname = _ref2$pathname === void 0 ? null : _ref2$pathname;
+
+    var parts = pathname.split('/');
+    /**
+     * for the last portion of the path, if it's equal to the screen index,
+     * or the screen id, then don't include it in the share URL.
+     * This makes sure we're not doing a `.replace()` that might remove a part
+     * from the slug of the current Micromag.
+     * (e.g. if the url is `/10-reasons-to-lorem-ipsum` and the share screen
+     * is on screen 10, then a string replace would remove the `/10` from the
+     * URL)
+     */
+
+    return parts.reduce(function (acc, part, i) {
+      return (// it's equal to the screen index, or equal to the screen ID, or it's empty
+        i === parts.length - 1 && parseInt(part, 10) === index || part === id || part === '' ? acc : "".concat(acc, "/").concat(part)
+      );
+    }, hostname);
+  }, [index, id]); // if not share URl was specified, default to the currentURL (without the screen index/id part)
+
   var finalShareURL = shareUrl || currentUrl;
   var defaultOptions = options !== null ? ['email', 'facebook', 'twitter', 'linkedin', 'whatsapp', 'facebookMessenger'] : [];
   var selectedOptions = options !== null ? Object.keys(options).reduce(function (acc, key) {
@@ -137,11 +166,10 @@ var ShareScreen = function ShareScreen(_ref) {
   var onClickShare = React.useCallback(function (type) {
     if (trackingEnabled) {
       trackEvent('click_share', type, {
-        shareUrl: shareUrl
+        shareUrl: finalShareURL
       });
     }
-  }, [trackEvent]); // Create elements
-
+  }, [trackEvent]);
   var items = [/*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
     key: "title",
     placeholder: "title",
@@ -194,27 +222,19 @@ var ShareScreen = function ShareScreen(_ref) {
     return el !== null;
   });
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles.container, (_ref3 = {}, _defineProperty__default["default"](_ref3, className, className !== null), _defineProperty__default["default"](_ref3, styles.isPlaceholder, isPlaceholder), _ref3)]),
+    className: classNames__default["default"]([styles.container, (_ref4 = {}, _defineProperty__default["default"](_ref4, className, className !== null), _defineProperty__default["default"](_ref4, styles.isPlaceholder, isPlaceholder), _ref4)]),
     "data-screen-ready": true
-  }, !isPlaceholder ? /*#__PURE__*/React__default["default"].createElement(Background__default["default"], {
-    background: background,
+  }, /*#__PURE__*/React__default["default"].createElement(Container__default["default"], {
     width: width,
     height: height,
-    resolution: resolution,
-    playing: backgroundPlaying,
-    muted: muted,
-    shouldLoad: backgroundShouldLoad,
-    mediaRef: mediaRef
-  }) : null, /*#__PURE__*/React__default["default"].createElement(Container__default["default"], {
-    width: width,
-    height: height
+    className: styles.content
   }, /*#__PURE__*/React__default["default"].createElement(Layout__default["default"], {
     className: styles.layout,
     verticalAlign: layout,
     fullscreen: true,
     style: !isPlaceholder ? {
       padding: spacing,
-      paddingTop: (current && !isPreview ? viewerTopHeight : 0) + spacing,
+      paddingTop: (!isPreview ? viewerTopHeight : 0) + spacing,
       paddingBottom: (current && !isPreview ? viewerBottomHeight : 0) + spacing
     } : null
   }, /*#__PURE__*/React__default["default"].createElement(components.TransitionsStagger, {
@@ -222,7 +242,18 @@ var ShareScreen = function ShareScreen(_ref) {
     stagger: transitionStagger,
     disabled: transitionDisabled,
     playing: transitionPlaying
-  }, items))));
+  }, items))), !isPlaceholder ? /*#__PURE__*/React__default["default"].createElement(Background__default["default"], {
+    background: background,
+    width: width,
+    height: height,
+    resolution: resolution,
+    playing: backgroundPlaying,
+    muted: muted,
+    shouldLoad: backgroundShouldLoad,
+    mediaRef: mediaRef,
+    withoutVideo: isPreview,
+    className: styles.background
+  }) : null);
 };
 
 ShareScreen.propTypes = propTypes;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/screen-share",
-    "version": "0.3.251",
+    "version": "0.3.262",
     "description": "",
     "keywords": [
         "javascript"
@@ -53,15 +53,15 @@
     },
     "dependencies": {
         "@babel/runtime": "^7.13.10",
-        "@micromag/core": "^0.3.251",
-        "@micromag/element-background": "^0.3.251",
-        "@micromag/element-call-to-action": "^0.3.251",
-        "@micromag/element-container": "^0.3.251",
-        "@micromag/element-heading": "^0.3.251",
-        "@micromag/element-layout": "^0.3.251",
-        "@micromag/element-share-options": "^0.3.251",
-        "@micromag/element-text": "^0.3.251",
-        "@micromag/transforms": "^0.3.251",
+        "@micromag/core": "^0.3.262",
+        "@micromag/element-background": "^0.3.262",
+        "@micromag/element-call-to-action": "^0.3.262",
+        "@micromag/element-container": "^0.3.262",
+        "@micromag/element-heading": "^0.3.262",
+        "@micromag/element-layout": "^0.3.262",
+        "@micromag/element-share-options": "^0.3.262",
+        "@micromag/element-text": "^0.3.262",
+        "@micromag/transforms": "^0.3.262",
         "classnames": "^2.2.6",
         "lodash": "^4.17.21",
         "prop-types": "^15.7.2",
@@ -71,5 +71,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "3b6fb00baaa7f3ab90684a88cbe4c30929b6b27d"
+    "gitHead": "2299eaeb150cfdd14b4da321bf9089ab1e6383c2"
 }