@micromag/screen-share 0.3.250 → 0.3.251

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/assets/css/styles.css +1 -1
  2. package/es/index.js +21 -52
  3. package/lib/index.js +21 -52
  4. package/package.json +11 -11
package/assets/css/styles.css CHANGED
@@ -1 +1 @@
1
- .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}
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}
package/es/index.js CHANGED
@@ -17,7 +17,7 @@ import ShareOptions from '@micromag/element-share-options';
17
17
  import _objectSpread from '@babel/runtime/helpers/objectSpread2';
18
18
  import { Heading1, Text, Container as Container$1 } from '@micromag/transforms/apple-news';
19
19
 
20
- 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"};
20
+ 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"};
21
21
 
22
22
  var propTypes = {
23
23
  layout: PropTypes.oneOf(['top', 'middle', 'bottom']),
@@ -30,8 +30,6 @@ var propTypes = {
30
30
  spacing: PropTypes.number,
31
31
  background: PropTypes$1.backgroundElement,
32
32
  callToAction: PropTypes$1.callToAction,
33
- id: PropTypes.string,
34
- index: PropTypes.number,
35
33
  current: PropTypes.bool,
36
34
  active: PropTypes.bool,
37
35
  transitions: PropTypes$1.transitions,
@@ -49,8 +47,6 @@ var defaultProps = {
49
47
  spacing: 20,
50
48
  background: null,
51
49
  callToAction: null,
52
- id: null,
53
- index: null,
54
50
  current: true,
55
51
  active: true,
56
52
  transitions: null,
@@ -59,7 +55,7 @@ var defaultProps = {
59
55
  };
60
56
 
61
57
  var ShareScreen = function ShareScreen(_ref) {
62
- var _ref4;
58
+ var _ref3;
63
59
 
64
60
  var layout = _ref.layout,
65
61
  heading = _ref.heading,
@@ -71,8 +67,6 @@ var ShareScreen = function ShareScreen(_ref) {
71
67
  spacing = _ref.spacing,
72
68
  background = _ref.background,
73
69
  callToAction = _ref.callToAction,
74
- id = _ref.id,
75
- index = _ref.index,
76
70
  current = _ref.current,
77
71
  active = _ref.active,
78
72
  transitions = _ref.transitions,
@@ -110,32 +104,9 @@ var ShareScreen = function ShareScreen(_ref) {
110
104
  var backgroundShouldLoad = current || active;
111
105
  var hasCallToAction = callToAction !== null && callToAction.active === true;
112
106
  var currentUrl = useMemo(function () {
113
- if (typeof window === 'undefined') return '';
114
-
115
- var _ref2 = window.location || {},
116
- _ref2$hostname = _ref2.hostname,
117
- hostname = _ref2$hostname === void 0 ? null : _ref2$hostname,
118
- _ref2$pathname = _ref2.pathname,
119
- pathname = _ref2$pathname === void 0 ? null : _ref2$pathname;
120
-
121
- var parts = pathname.split('/');
122
- /**
123
- * for the last portion of the path, if it's equal to the screen index,
124
- * or the screen id, then don't include it in the share URL.
125
- * This makes sure we're not doing a `.replace()` that might remove a part
126
- * from the slug of the current Micromag.
127
- * (e.g. if the url is `/10-reasons-to-lorem-ipsum` and the share screen
128
- * is on screen 10, then a string replace would remove the `/10` from the
129
- * URL)
130
- */
131
-
132
- return parts.reduce(function (acc, part, i) {
133
- return (// it's equal to the screen index, or equal to the screen ID, or it's empty
134
- i === parts.length - 1 && parseInt(part, 10) === index || part === id || part === '' ? acc : "".concat(acc, "/").concat(part)
135
- );
136
- }, hostname);
137
- }, [index, id]); // if not share URl was specified, default to the currentURL (without the screen index/id part)
138
-
107
+ var origin = typeof window !== 'undefined' ? window.location.origin.replace(/\/+$/, '') : '';
108
+ return origin;
109
+ }, []);
139
110
  var finalShareURL = shareUrl || currentUrl;
140
111
  var defaultOptions = options !== null ? ['email', 'facebook', 'twitter', 'linkedin', 'whatsapp', 'facebookMessenger'] : [];
141
112
  var selectedOptions = options !== null ? Object.keys(options).reduce(function (acc, key) {
@@ -147,10 +118,11 @@ var ShareScreen = function ShareScreen(_ref) {
147
118
  var onClickShare = useCallback(function (type) {
148
119
  if (trackingEnabled) {
149
120
  trackEvent('click_share', type, {
150
- shareUrl: finalShareURL
121
+ shareUrl: shareUrl
151
122
  });
152
123
  }
153
- }, [trackEvent]);
124
+ }, [trackEvent]); // Create elements
125
+
154
126
  var items = [/*#__PURE__*/React.createElement(ScreenElement, {
155
127
  key: "title",
156
128
  placeholder: "title",
@@ -203,19 +175,27 @@ var ShareScreen = function ShareScreen(_ref) {
203
175
  return el !== null;
204
176
  });
205
177
  return /*#__PURE__*/React.createElement("div", {
206
- className: classNames([styles.container, (_ref4 = {}, _defineProperty(_ref4, className, className !== null), _defineProperty(_ref4, styles.isPlaceholder, isPlaceholder), _ref4)]),
178
+ className: classNames([styles.container, (_ref3 = {}, _defineProperty(_ref3, className, className !== null), _defineProperty(_ref3, styles.isPlaceholder, isPlaceholder), _ref3)]),
207
179
  "data-screen-ready": true
208
- }, /*#__PURE__*/React.createElement(Container, {
180
+ }, !isPlaceholder ? /*#__PURE__*/React.createElement(Background, {
181
+ background: background,
209
182
  width: width,
210
183
  height: height,
211
- className: styles.content
184
+ resolution: resolution,
185
+ playing: backgroundPlaying,
186
+ muted: muted,
187
+ shouldLoad: backgroundShouldLoad,
188
+ mediaRef: mediaRef
189
+ }) : null, /*#__PURE__*/React.createElement(Container, {
190
+ width: width,
191
+ height: height
212
192
  }, /*#__PURE__*/React.createElement(Layout, {
213
193
  className: styles.layout,
214
194
  verticalAlign: layout,
215
195
  fullscreen: true,
216
196
  style: !isPlaceholder ? {
217
197
  padding: spacing,
218
- paddingTop: (!isPreview ? viewerTopHeight : 0) + spacing,
198
+ paddingTop: (current && !isPreview ? viewerTopHeight : 0) + spacing,
219
199
  paddingBottom: (current && !isPreview ? viewerBottomHeight : 0) + spacing
220
200
  } : null
221
201
  }, /*#__PURE__*/React.createElement(TransitionsStagger, {
@@ -223,18 +203,7 @@ var ShareScreen = function ShareScreen(_ref) {
223
203
  stagger: transitionStagger,
224
204
  disabled: transitionDisabled,
225
205
  playing: transitionPlaying
226
- }, items))), !isPlaceholder ? /*#__PURE__*/React.createElement(Background, {
227
- background: background,
228
- width: width,
229
- height: height,
230
- resolution: resolution,
231
- playing: backgroundPlaying,
232
- muted: muted,
233
- shouldLoad: backgroundShouldLoad,
234
- mediaRef: mediaRef,
235
- withoutVideo: isPreview,
236
- className: styles.background
237
- }) : null);
206
+ }, items))));
238
207
  };
239
208
 
240
209
  ShareScreen.propTypes = propTypes;
package/lib/index.js CHANGED
@@ -36,7 +36,7 @@ var Layout__default = /*#__PURE__*/_interopDefaultLegacy(Layout);
36
36
  var ShareOptions__default = /*#__PURE__*/_interopDefaultLegacy(ShareOptions);
37
37
  var _objectSpread__default = /*#__PURE__*/_interopDefaultLegacy(_objectSpread);
38
38
 
39
- 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"};
39
+ 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"};
40
40
 
41
41
  var propTypes = {
42
42
  layout: PropTypes__default["default"].oneOf(['top', 'middle', 'bottom']),
@@ -49,8 +49,6 @@ var propTypes = {
49
49
  spacing: PropTypes__default["default"].number,
50
50
  background: core.PropTypes.backgroundElement,
51
51
  callToAction: core.PropTypes.callToAction,
52
- id: PropTypes__default["default"].string,
53
- index: PropTypes__default["default"].number,
54
52
  current: PropTypes__default["default"].bool,
55
53
  active: PropTypes__default["default"].bool,
56
54
  transitions: core.PropTypes.transitions,
@@ -68,8 +66,6 @@ var defaultProps = {
68
66
  spacing: 20,
69
67
  background: null,
70
68
  callToAction: null,
71
- id: null,
72
- index: null,
73
69
  current: true,
74
70
  active: true,
75
71
  transitions: null,
@@ -78,7 +74,7 @@ var defaultProps = {
78
74
  };
79
75
 
80
76
  var ShareScreen = function ShareScreen(_ref) {
81
- var _ref4;
77
+ var _ref3;
82
78
 
83
79
  var layout = _ref.layout,
84
80
  heading = _ref.heading,
@@ -90,8 +86,6 @@ var ShareScreen = function ShareScreen(_ref) {
90
86
  spacing = _ref.spacing,
91
87
  background = _ref.background,
92
88
  callToAction = _ref.callToAction,
93
- id = _ref.id,
94
- index = _ref.index,
95
89
  current = _ref.current,
96
90
  active = _ref.active,
97
91
  transitions = _ref.transitions,
@@ -129,32 +123,9 @@ var ShareScreen = function ShareScreen(_ref) {
129
123
  var backgroundShouldLoad = current || active;
130
124
  var hasCallToAction = callToAction !== null && callToAction.active === true;
131
125
  var currentUrl = React.useMemo(function () {
132
- if (typeof window === 'undefined') return '';
133
-
134
- var _ref2 = window.location || {},
135
- _ref2$hostname = _ref2.hostname,
136
- hostname = _ref2$hostname === void 0 ? null : _ref2$hostname,
137
- _ref2$pathname = _ref2.pathname,
138
- pathname = _ref2$pathname === void 0 ? null : _ref2$pathname;
139
-
140
- var parts = pathname.split('/');
141
- /**
142
- * for the last portion of the path, if it's equal to the screen index,
143
- * or the screen id, then don't include it in the share URL.
144
- * This makes sure we're not doing a `.replace()` that might remove a part
145
- * from the slug of the current Micromag.
146
- * (e.g. if the url is `/10-reasons-to-lorem-ipsum` and the share screen
147
- * is on screen 10, then a string replace would remove the `/10` from the
148
- * URL)
149
- */
150
-
151
- return parts.reduce(function (acc, part, i) {
152
- return (// it's equal to the screen index, or equal to the screen ID, or it's empty
153
- i === parts.length - 1 && parseInt(part, 10) === index || part === id || part === '' ? acc : "".concat(acc, "/").concat(part)
154
- );
155
- }, hostname);
156
- }, [index, id]); // if not share URl was specified, default to the currentURL (without the screen index/id part)
157
-
126
+ var origin = typeof window !== 'undefined' ? window.location.origin.replace(/\/+$/, '') : '';
127
+ return origin;
128
+ }, []);
158
129
  var finalShareURL = shareUrl || currentUrl;
159
130
  var defaultOptions = options !== null ? ['email', 'facebook', 'twitter', 'linkedin', 'whatsapp', 'facebookMessenger'] : [];
160
131
  var selectedOptions = options !== null ? Object.keys(options).reduce(function (acc, key) {
@@ -166,10 +137,11 @@ var ShareScreen = function ShareScreen(_ref) {
166
137
  var onClickShare = React.useCallback(function (type) {
167
138
  if (trackingEnabled) {
168
139
  trackEvent('click_share', type, {
169
- shareUrl: finalShareURL
140
+ shareUrl: shareUrl
170
141
  });
171
142
  }
172
- }, [trackEvent]);
143
+ }, [trackEvent]); // Create elements
144
+
173
145
  var items = [/*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
174
146
  key: "title",
175
147
  placeholder: "title",
@@ -222,19 +194,27 @@ var ShareScreen = function ShareScreen(_ref) {
222
194
  return el !== null;
223
195
  });
224
196
  return /*#__PURE__*/React__default["default"].createElement("div", {
225
- className: classNames__default["default"]([styles.container, (_ref4 = {}, _defineProperty__default["default"](_ref4, className, className !== null), _defineProperty__default["default"](_ref4, styles.isPlaceholder, isPlaceholder), _ref4)]),
197
+ className: classNames__default["default"]([styles.container, (_ref3 = {}, _defineProperty__default["default"](_ref3, className, className !== null), _defineProperty__default["default"](_ref3, styles.isPlaceholder, isPlaceholder), _ref3)]),
226
198
  "data-screen-ready": true
227
- }, /*#__PURE__*/React__default["default"].createElement(Container__default["default"], {
199
+ }, !isPlaceholder ? /*#__PURE__*/React__default["default"].createElement(Background__default["default"], {
200
+ background: background,
228
201
  width: width,
229
202
  height: height,
230
- className: styles.content
203
+ resolution: resolution,
204
+ playing: backgroundPlaying,
205
+ muted: muted,
206
+ shouldLoad: backgroundShouldLoad,
207
+ mediaRef: mediaRef
208
+ }) : null, /*#__PURE__*/React__default["default"].createElement(Container__default["default"], {
209
+ width: width,
210
+ height: height
231
211
  }, /*#__PURE__*/React__default["default"].createElement(Layout__default["default"], {
232
212
  className: styles.layout,
233
213
  verticalAlign: layout,
234
214
  fullscreen: true,
235
215
  style: !isPlaceholder ? {
236
216
  padding: spacing,
237
- paddingTop: (!isPreview ? viewerTopHeight : 0) + spacing,
217
+ paddingTop: (current && !isPreview ? viewerTopHeight : 0) + spacing,
238
218
  paddingBottom: (current && !isPreview ? viewerBottomHeight : 0) + spacing
239
219
  } : null
240
220
  }, /*#__PURE__*/React__default["default"].createElement(components.TransitionsStagger, {
@@ -242,18 +222,7 @@ var ShareScreen = function ShareScreen(_ref) {
242
222
  stagger: transitionStagger,
243
223
  disabled: transitionDisabled,
244
224
  playing: transitionPlaying
245
- }, items))), !isPlaceholder ? /*#__PURE__*/React__default["default"].createElement(Background__default["default"], {
246
- background: background,
247
- width: width,
248
- height: height,
249
- resolution: resolution,
250
- playing: backgroundPlaying,
251
- muted: muted,
252
- shouldLoad: backgroundShouldLoad,
253
- mediaRef: mediaRef,
254
- withoutVideo: isPreview,
255
- className: styles.background
256
- }) : null);
225
+ }, items))));
257
226
  };
258
227
 
259
228
  ShareScreen.propTypes = propTypes;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@micromag/screen-share",
3
- "version": "0.3.250",
3
+ "version": "0.3.251",
4
4
  "description": "",
5
5
  "keywords": [
6
6
  "javascript"
@@ -53,15 +53,15 @@
53
53
  },
54
54
  "dependencies": {
55
55
  "@babel/runtime": "^7.13.10",
56
- "@micromag/core": "^0.3.246",
57
- "@micromag/element-background": "^0.3.246",
58
- "@micromag/element-call-to-action": "^0.3.250",
59
- "@micromag/element-container": "^0.3.246",
60
- "@micromag/element-heading": "^0.3.246",
61
- "@micromag/element-layout": "^0.3.246",
62
- "@micromag/element-share-options": "^0.3.246",
63
- "@micromag/element-text": "^0.3.246",
64
- "@micromag/transforms": "^0.3.246",
56
+ "@micromag/core": "^0.3.251",
57
+ "@micromag/element-background": "^0.3.251",
58
+ "@micromag/element-call-to-action": "^0.3.251",
59
+ "@micromag/element-container": "^0.3.251",
60
+ "@micromag/element-heading": "^0.3.251",
61
+ "@micromag/element-layout": "^0.3.251",
62
+ "@micromag/element-share-options": "^0.3.251",
63
+ "@micromag/element-text": "^0.3.251",
64
+ "@micromag/transforms": "^0.3.251",
65
65
  "classnames": "^2.2.6",
66
66
  "lodash": "^4.17.21",
67
67
  "prop-types": "^15.7.2",
@@ -71,5 +71,5 @@
71
71
  "publishConfig": {
72
72
  "access": "public"
73
73
  },
74
- "gitHead": "f0c7716e6a78f4c0025594b668e669f0baf5286d"
74
+ "gitHead": "3b6fb00baaa7f3ab90684a88cbe4c30929b6b27d"
75
75
  }