@micromag/screen-gallery-feed 0.3.147 → 0.3.152
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.
- package/assets/css/styles.css +1 -1
- package/es/index.js +43 -56
- package/lib/index.js +41 -54
- package/package.json +12 -12
package/assets/css/styles.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.micromag-screen-gallery-feed-container .micromag-screen-gallery-feed-emptyCaption,.micromag-screen-gallery-feed-container .micromag-screen-gallery-feed-emptyImage{margin:5px auto;border:2px dashed #343434;color:#343434}.micromag-screen-gallery-feed-container{position:relative}.micromag-screen-gallery-feed-container .micromag-screen-gallery-feed-emptyCaption,.micromag-screen-gallery-feed-container .micromag-screen-gallery-feed-emptyImage{width:100%;margin:10px auto}.micromag-screen-gallery-feed-container .micromag-screen-gallery-feed-emptyImage{height:200px}.micromag-screen-gallery-feed-container .micromag-screen-gallery-feed-emptyCaption{height:50px}.micromag-screen-gallery-feed-container .micromag-screen-gallery-feed-image,.micromag-screen-gallery-feed-container .micromag-screen-gallery-feed-imageContainer,.micromag-screen-gallery-feed-container .micromag-screen-gallery-feed-video{position:relative!important}.micromag-screen-gallery-feed-container .micromag-screen-gallery-feed-imageContainer{overflow:hidden}.micromag-screen-gallery-feed-container .micromag-screen-gallery-feed-callToAction{
|
|
1
|
+
.micromag-screen-gallery-feed-container .micromag-screen-gallery-feed-emptyCaption,.micromag-screen-gallery-feed-container .micromag-screen-gallery-feed-emptyImage{margin:5px auto;border:2px dashed #343434;color:#343434}.micromag-screen-gallery-feed-container{position:relative}.micromag-screen-gallery-feed-container .micromag-screen-gallery-feed-emptyCaption,.micromag-screen-gallery-feed-container .micromag-screen-gallery-feed-emptyImage{width:100%;margin:10px auto}.micromag-screen-gallery-feed-container .micromag-screen-gallery-feed-emptyImage{height:200px}.micromag-screen-gallery-feed-container .micromag-screen-gallery-feed-emptyCaption{height:50px}.micromag-screen-gallery-feed-container .micromag-screen-gallery-feed-image,.micromag-screen-gallery-feed-container .micromag-screen-gallery-feed-imageContainer,.micromag-screen-gallery-feed-container .micromag-screen-gallery-feed-video{position:relative!important}.micromag-screen-gallery-feed-container .micromag-screen-gallery-feed-imageContainer{overflow:hidden}.micromag-screen-gallery-feed-container .micromag-screen-gallery-feed-callToAction{-webkit-transition:opacity .2s ease-out;-o-transition:opacity .2s ease-out;transition:opacity .2s ease-out}.micromag-screen-gallery-feed-container .micromag-screen-gallery-feed-callToAction a{padding:0}.micromag-screen-gallery-feed-container .micromag-screen-gallery-feed-callToAction.micromag-screen-gallery-feed-disabled{opacity:0;pointer-events:none}.micromag-screen-gallery-feed-container.micromag-screen-gallery-feed-isPlaceholder .micromag-screen-gallery-feed-layout{padding:10px}
|
package/es/index.js
CHANGED
|
@@ -7,8 +7,8 @@ import PropTypes from 'prop-types';
|
|
|
7
7
|
import React, { useState, useCallback } from 'react';
|
|
8
8
|
import { PropTypes as PropTypes$1 } from '@micromag/core';
|
|
9
9
|
import { ScreenElement, TransitionsStagger } from '@micromag/core/components';
|
|
10
|
-
import { useScreenSize,
|
|
11
|
-
import { useTrackScreenEvent,
|
|
10
|
+
import { useScreenSize, useViewerContext, useViewerWebView, usePlaybackContext, usePlaybackMediaRef, useScreenRenderContext } from '@micromag/core/contexts';
|
|
11
|
+
import { useTrackScreenEvent, useDimensionObserver } from '@micromag/core/hooks';
|
|
12
12
|
import { isImageFilled, isTextFilled } from '@micromag/core/utils';
|
|
13
13
|
import Background from '@micromag/element-background';
|
|
14
14
|
import CallToAction from '@micromag/element-call-to-action';
|
|
@@ -21,7 +21,7 @@ import _extends from '@babel/runtime/helpers/extends';
|
|
|
21
21
|
import _objectSpread from '@babel/runtime/helpers/objectSpread2';
|
|
22
22
|
import { Gallery, Container as Container$1 } from '@micromag/transforms/apple-news';
|
|
23
23
|
|
|
24
|
-
var styles = {"container":"micromag-screen-gallery-feed-container","emptyCaption":"micromag-screen-gallery-feed-emptyCaption","emptyImage":"micromag-screen-gallery-feed-emptyImage","image":"micromag-screen-gallery-feed-image","imageContainer":"micromag-screen-gallery-feed-imageContainer","video":"micromag-screen-gallery-feed-video","callToAction":"micromag-screen-gallery-feed-callToAction","isPlaceholder":"micromag-screen-gallery-feed-isPlaceholder","layout":"micromag-screen-gallery-feed-layout"};
|
|
24
|
+
var styles = {"container":"micromag-screen-gallery-feed-container","emptyCaption":"micromag-screen-gallery-feed-emptyCaption","emptyImage":"micromag-screen-gallery-feed-emptyImage","image":"micromag-screen-gallery-feed-image","imageContainer":"micromag-screen-gallery-feed-imageContainer","video":"micromag-screen-gallery-feed-video","callToAction":"micromag-screen-gallery-feed-callToAction","disabled":"micromag-screen-gallery-feed-disabled","isPlaceholder":"micromag-screen-gallery-feed-isPlaceholder","layout":"micromag-screen-gallery-feed-layout"};
|
|
25
25
|
|
|
26
26
|
var propTypes = {
|
|
27
27
|
layout: PropTypes.oneOf(['normal', 'reverse']),
|
|
@@ -35,8 +35,6 @@ var propTypes = {
|
|
|
35
35
|
transitions: PropTypes$1.transitions,
|
|
36
36
|
transitionStagger: PropTypes.number,
|
|
37
37
|
type: PropTypes.string,
|
|
38
|
-
enableInteraction: PropTypes.func,
|
|
39
|
-
disableInteraction: PropTypes.func,
|
|
40
38
|
className: PropTypes.string
|
|
41
39
|
};
|
|
42
40
|
var defaultProps = {
|
|
@@ -51,13 +49,11 @@ var defaultProps = {
|
|
|
51
49
|
transitions: null,
|
|
52
50
|
transitionStagger: 75,
|
|
53
51
|
type: null,
|
|
54
|
-
enableInteraction: null,
|
|
55
|
-
disableInteraction: null,
|
|
56
52
|
className: null
|
|
57
53
|
};
|
|
58
54
|
|
|
59
55
|
var GalleryFeedScreen = function GalleryFeedScreen(_ref) {
|
|
60
|
-
var
|
|
56
|
+
var _ref5;
|
|
61
57
|
|
|
62
58
|
var layout = _ref.layout,
|
|
63
59
|
images = _ref.images,
|
|
@@ -70,19 +66,26 @@ var GalleryFeedScreen = function GalleryFeedScreen(_ref) {
|
|
|
70
66
|
transitions = _ref.transitions,
|
|
71
67
|
transitionStagger = _ref.transitionStagger,
|
|
72
68
|
type = _ref.type,
|
|
73
|
-
enableInteraction = _ref.enableInteraction,
|
|
74
|
-
disableInteraction = _ref.disableInteraction,
|
|
75
69
|
className = _ref.className;
|
|
76
70
|
var trackScreenEvent = useTrackScreenEvent(type);
|
|
77
71
|
|
|
78
72
|
var _useScreenSize = useScreenSize(),
|
|
79
73
|
width = _useScreenSize.width,
|
|
80
74
|
height = _useScreenSize.height,
|
|
81
|
-
menuOverScreen = _useScreenSize.menuOverScreen,
|
|
82
75
|
resolution = _useScreenSize.resolution;
|
|
83
76
|
|
|
84
|
-
var
|
|
85
|
-
|
|
77
|
+
var _useViewerContext = useViewerContext(),
|
|
78
|
+
viewerTopHeight = _useViewerContext.topHeight,
|
|
79
|
+
viewerBottomHeight = _useViewerContext.bottomHeight,
|
|
80
|
+
viewerBottomSidesWidth = _useViewerContext.bottomSidesWidth;
|
|
81
|
+
|
|
82
|
+
var _useViewerWebView = useViewerWebView(),
|
|
83
|
+
openWebView = _useViewerWebView.open;
|
|
84
|
+
|
|
85
|
+
var _usePlaybackContext = usePlaybackContext(),
|
|
86
|
+
muted = _usePlaybackContext.muted;
|
|
87
|
+
|
|
88
|
+
var mediaRef = usePlaybackMediaRef(current);
|
|
86
89
|
|
|
87
90
|
var _useScreenRenderConte = useScreenRenderContext(),
|
|
88
91
|
isView = _useScreenRenderConte.isView,
|
|
@@ -114,21 +117,18 @@ var GalleryFeedScreen = function GalleryFeedScreen(_ref) {
|
|
|
114
117
|
var editImages = isEdit && imagesCount === 0 ? [null] : images;
|
|
115
118
|
var finalImages = isPlaceholder ? _toConsumableArray(Array(5)) : editImages;
|
|
116
119
|
|
|
117
|
-
var
|
|
118
|
-
firstImageRef =
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
var _ref2 = contentRect || {},
|
|
122
|
-
firstImageRefWidth = _ref2.width;
|
|
120
|
+
var _useDimensionObserver = useDimensionObserver(),
|
|
121
|
+
firstImageRef = _useDimensionObserver.ref,
|
|
122
|
+
firstImageRefWidth = _useDimensionObserver.width;
|
|
123
123
|
|
|
124
124
|
(finalImages || []).forEach(function (image, index) {
|
|
125
125
|
var finalImage = withCaptions ? image : {
|
|
126
126
|
media: image
|
|
127
127
|
};
|
|
128
128
|
|
|
129
|
-
var
|
|
130
|
-
|
|
131
|
-
caption =
|
|
129
|
+
var _ref2 = finalImage || {},
|
|
130
|
+
_ref2$caption = _ref2.caption,
|
|
131
|
+
caption = _ref2$caption === void 0 ? null : _ref2$caption;
|
|
132
132
|
|
|
133
133
|
var hasImage = isImageFilled(finalImage);
|
|
134
134
|
var hasCaption = isTextFilled(caption);
|
|
@@ -212,32 +212,17 @@ var GalleryFeedScreen = function GalleryFeedScreen(_ref) {
|
|
|
212
212
|
}
|
|
213
213
|
}); // Call to Action
|
|
214
214
|
|
|
215
|
-
var
|
|
215
|
+
var _ref3 = callToAction || {},
|
|
216
|
+
_ref3$active = _ref3.active,
|
|
217
|
+
hasCallToAction = _ref3$active === void 0 ? false : _ref3$active;
|
|
216
218
|
|
|
217
219
|
var _useState3 = useState(false),
|
|
218
220
|
_useState4 = _slicedToArray(_useState3, 2),
|
|
219
221
|
scrolledBottom = _useState4[0],
|
|
220
222
|
setScrolledBottom = _useState4[1];
|
|
221
223
|
|
|
222
|
-
var
|
|
223
|
-
|
|
224
|
-
callToActionRect = _useResizeObserver2.entry.contentRect;
|
|
225
|
-
|
|
226
|
-
var _ref4 = callToActionRect || {},
|
|
227
|
-
_ref4$height = _ref4.height,
|
|
228
|
-
callToActionHeight = _ref4$height === void 0 ? 0 : _ref4$height;
|
|
229
|
-
|
|
230
|
-
if (!isPlaceholder && hasCallToAction) {
|
|
231
|
-
items.push( /*#__PURE__*/React.createElement("div", {
|
|
232
|
-
key: "cta-spacer",
|
|
233
|
-
style: {
|
|
234
|
-
height: callToActionHeight
|
|
235
|
-
}
|
|
236
|
-
}));
|
|
237
|
-
}
|
|
238
|
-
|
|
239
|
-
var onScrolledBottom = useCallback(function (_ref5) {
|
|
240
|
-
var initial = _ref5.initial;
|
|
224
|
+
var onScrolledBottom = useCallback(function (_ref4) {
|
|
225
|
+
var initial = _ref4.initial;
|
|
241
226
|
|
|
242
227
|
if (initial) {
|
|
243
228
|
trackScreenEvent('scroll', 'Screen');
|
|
@@ -249,7 +234,7 @@ var GalleryFeedScreen = function GalleryFeedScreen(_ref) {
|
|
|
249
234
|
setScrolledBottom(false);
|
|
250
235
|
}, [setScrolledBottom]);
|
|
251
236
|
return /*#__PURE__*/React.createElement("div", {
|
|
252
|
-
className: classNames([styles.container, (
|
|
237
|
+
className: classNames([styles.container, (_ref5 = {}, _defineProperty(_ref5, className, className !== null), _defineProperty(_ref5, styles.isPlaceholder, isPlaceholder), _ref5)]),
|
|
253
238
|
"data-screen-ready": ready
|
|
254
239
|
}, !isPlaceholder ? /*#__PURE__*/React.createElement(Background, {
|
|
255
240
|
background: background,
|
|
@@ -257,7 +242,9 @@ var GalleryFeedScreen = function GalleryFeedScreen(_ref) {
|
|
|
257
242
|
height: height,
|
|
258
243
|
resolution: resolution,
|
|
259
244
|
playing: backgroundPlaying,
|
|
260
|
-
|
|
245
|
+
muted: muted,
|
|
246
|
+
shouldLoad: mediaShouldLoad,
|
|
247
|
+
mediaRef: mediaRef
|
|
261
248
|
}) : null, /*#__PURE__*/React.createElement(Container, {
|
|
262
249
|
width: width,
|
|
263
250
|
height: height
|
|
@@ -269,27 +256,27 @@ var GalleryFeedScreen = function GalleryFeedScreen(_ref) {
|
|
|
269
256
|
className: styles.layout,
|
|
270
257
|
style: !isPlaceholder ? {
|
|
271
258
|
padding: spacing,
|
|
272
|
-
paddingTop: (
|
|
259
|
+
paddingTop: (!isPreview ? viewerTopHeight : 0) + spacing,
|
|
260
|
+
paddingBottom: (!isPreview ? viewerBottomHeight : 0) + spacing
|
|
273
261
|
} : null
|
|
274
262
|
}, /*#__PURE__*/React.createElement(TransitionsStagger, {
|
|
275
263
|
transitions: transitions,
|
|
276
264
|
stagger: transitionStagger,
|
|
277
265
|
disabled: transitionDisabled,
|
|
278
266
|
playing: transitionPlaying
|
|
279
|
-
}, items)
|
|
280
|
-
|
|
267
|
+
}, items), !isPlaceholder && hasCallToAction ? /*#__PURE__*/React.createElement("div", {
|
|
268
|
+
className: classNames([styles.callToAction, _defineProperty({}, styles.disabled, !scrolledBottom)]),
|
|
269
|
+
style: {
|
|
270
|
+
paddingLeft: Math.max(viewerBottomSidesWidth - spacing, 0),
|
|
271
|
+
paddingRight: Math.max(viewerBottomSidesWidth - spacing, 0),
|
|
272
|
+
paddingTop: spacing
|
|
273
|
+
}
|
|
274
|
+
}, /*#__PURE__*/React.createElement(CallToAction, Object.assign({}, callToAction, {
|
|
281
275
|
className: styles.callToAction,
|
|
282
|
-
disabled: !scrolledBottom,
|
|
283
276
|
animationDisabled: isPreview,
|
|
284
|
-
callToAction: callToAction,
|
|
285
277
|
focusable: current && isView,
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
height: height
|
|
289
|
-
},
|
|
290
|
-
enableInteraction: enableInteraction,
|
|
291
|
-
disableInteraction: disableInteraction
|
|
292
|
-
}) : null));
|
|
278
|
+
openWebView: openWebView
|
|
279
|
+
}))) : null))));
|
|
293
280
|
};
|
|
294
281
|
|
|
295
282
|
GalleryFeedScreen.propTypes = propTypes;
|
package/lib/index.js
CHANGED
|
@@ -43,7 +43,7 @@ var Visual__default = /*#__PURE__*/_interopDefaultLegacy(Visual);
|
|
|
43
43
|
var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
|
|
44
44
|
var _objectSpread__default = /*#__PURE__*/_interopDefaultLegacy(_objectSpread);
|
|
45
45
|
|
|
46
|
-
var styles = {"container":"micromag-screen-gallery-feed-container","emptyCaption":"micromag-screen-gallery-feed-emptyCaption","emptyImage":"micromag-screen-gallery-feed-emptyImage","image":"micromag-screen-gallery-feed-image","imageContainer":"micromag-screen-gallery-feed-imageContainer","video":"micromag-screen-gallery-feed-video","callToAction":"micromag-screen-gallery-feed-callToAction","isPlaceholder":"micromag-screen-gallery-feed-isPlaceholder","layout":"micromag-screen-gallery-feed-layout"};
|
|
46
|
+
var styles = {"container":"micromag-screen-gallery-feed-container","emptyCaption":"micromag-screen-gallery-feed-emptyCaption","emptyImage":"micromag-screen-gallery-feed-emptyImage","image":"micromag-screen-gallery-feed-image","imageContainer":"micromag-screen-gallery-feed-imageContainer","video":"micromag-screen-gallery-feed-video","callToAction":"micromag-screen-gallery-feed-callToAction","disabled":"micromag-screen-gallery-feed-disabled","isPlaceholder":"micromag-screen-gallery-feed-isPlaceholder","layout":"micromag-screen-gallery-feed-layout"};
|
|
47
47
|
|
|
48
48
|
var propTypes = {
|
|
49
49
|
layout: PropTypes__default["default"].oneOf(['normal', 'reverse']),
|
|
@@ -57,8 +57,6 @@ var propTypes = {
|
|
|
57
57
|
transitions: core.PropTypes.transitions,
|
|
58
58
|
transitionStagger: PropTypes__default["default"].number,
|
|
59
59
|
type: PropTypes__default["default"].string,
|
|
60
|
-
enableInteraction: PropTypes__default["default"].func,
|
|
61
|
-
disableInteraction: PropTypes__default["default"].func,
|
|
62
60
|
className: PropTypes__default["default"].string
|
|
63
61
|
};
|
|
64
62
|
var defaultProps = {
|
|
@@ -73,13 +71,11 @@ var defaultProps = {
|
|
|
73
71
|
transitions: null,
|
|
74
72
|
transitionStagger: 75,
|
|
75
73
|
type: null,
|
|
76
|
-
enableInteraction: null,
|
|
77
|
-
disableInteraction: null,
|
|
78
74
|
className: null
|
|
79
75
|
};
|
|
80
76
|
|
|
81
77
|
var GalleryFeedScreen = function GalleryFeedScreen(_ref) {
|
|
82
|
-
var
|
|
78
|
+
var _ref5;
|
|
83
79
|
|
|
84
80
|
var layout = _ref.layout,
|
|
85
81
|
images = _ref.images,
|
|
@@ -92,19 +88,26 @@ var GalleryFeedScreen = function GalleryFeedScreen(_ref) {
|
|
|
92
88
|
transitions = _ref.transitions,
|
|
93
89
|
transitionStagger = _ref.transitionStagger,
|
|
94
90
|
type = _ref.type,
|
|
95
|
-
enableInteraction = _ref.enableInteraction,
|
|
96
|
-
disableInteraction = _ref.disableInteraction,
|
|
97
91
|
className = _ref.className;
|
|
98
92
|
var trackScreenEvent = hooks.useTrackScreenEvent(type);
|
|
99
93
|
|
|
100
94
|
var _useScreenSize = contexts.useScreenSize(),
|
|
101
95
|
width = _useScreenSize.width,
|
|
102
96
|
height = _useScreenSize.height,
|
|
103
|
-
menuOverScreen = _useScreenSize.menuOverScreen,
|
|
104
97
|
resolution = _useScreenSize.resolution;
|
|
105
98
|
|
|
106
|
-
var
|
|
107
|
-
|
|
99
|
+
var _useViewerContext = contexts.useViewerContext(),
|
|
100
|
+
viewerTopHeight = _useViewerContext.topHeight,
|
|
101
|
+
viewerBottomHeight = _useViewerContext.bottomHeight,
|
|
102
|
+
viewerBottomSidesWidth = _useViewerContext.bottomSidesWidth;
|
|
103
|
+
|
|
104
|
+
var _useViewerWebView = contexts.useViewerWebView(),
|
|
105
|
+
openWebView = _useViewerWebView.open;
|
|
106
|
+
|
|
107
|
+
var _usePlaybackContext = contexts.usePlaybackContext(),
|
|
108
|
+
muted = _usePlaybackContext.muted;
|
|
109
|
+
|
|
110
|
+
var mediaRef = contexts.usePlaybackMediaRef(current);
|
|
108
111
|
|
|
109
112
|
var _useScreenRenderConte = contexts.useScreenRenderContext(),
|
|
110
113
|
isView = _useScreenRenderConte.isView,
|
|
@@ -136,21 +139,18 @@ var GalleryFeedScreen = function GalleryFeedScreen(_ref) {
|
|
|
136
139
|
var editImages = isEdit && imagesCount === 0 ? [null] : images;
|
|
137
140
|
var finalImages = isPlaceholder ? _toConsumableArray__default["default"](Array(5)) : editImages;
|
|
138
141
|
|
|
139
|
-
var
|
|
140
|
-
firstImageRef =
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
var _ref2 = contentRect || {},
|
|
144
|
-
firstImageRefWidth = _ref2.width;
|
|
142
|
+
var _useDimensionObserver = hooks.useDimensionObserver(),
|
|
143
|
+
firstImageRef = _useDimensionObserver.ref,
|
|
144
|
+
firstImageRefWidth = _useDimensionObserver.width;
|
|
145
145
|
|
|
146
146
|
(finalImages || []).forEach(function (image, index) {
|
|
147
147
|
var finalImage = withCaptions ? image : {
|
|
148
148
|
media: image
|
|
149
149
|
};
|
|
150
150
|
|
|
151
|
-
var
|
|
152
|
-
|
|
153
|
-
caption =
|
|
151
|
+
var _ref2 = finalImage || {},
|
|
152
|
+
_ref2$caption = _ref2.caption,
|
|
153
|
+
caption = _ref2$caption === void 0 ? null : _ref2$caption;
|
|
154
154
|
|
|
155
155
|
var hasImage = utils.isImageFilled(finalImage);
|
|
156
156
|
var hasCaption = utils.isTextFilled(caption);
|
|
@@ -234,32 +234,17 @@ var GalleryFeedScreen = function GalleryFeedScreen(_ref) {
|
|
|
234
234
|
}
|
|
235
235
|
}); // Call to Action
|
|
236
236
|
|
|
237
|
-
var
|
|
237
|
+
var _ref3 = callToAction || {},
|
|
238
|
+
_ref3$active = _ref3.active,
|
|
239
|
+
hasCallToAction = _ref3$active === void 0 ? false : _ref3$active;
|
|
238
240
|
|
|
239
241
|
var _useState3 = React.useState(false),
|
|
240
242
|
_useState4 = _slicedToArray__default["default"](_useState3, 2),
|
|
241
243
|
scrolledBottom = _useState4[0],
|
|
242
244
|
setScrolledBottom = _useState4[1];
|
|
243
245
|
|
|
244
|
-
var
|
|
245
|
-
|
|
246
|
-
callToActionRect = _useResizeObserver2.entry.contentRect;
|
|
247
|
-
|
|
248
|
-
var _ref4 = callToActionRect || {},
|
|
249
|
-
_ref4$height = _ref4.height,
|
|
250
|
-
callToActionHeight = _ref4$height === void 0 ? 0 : _ref4$height;
|
|
251
|
-
|
|
252
|
-
if (!isPlaceholder && hasCallToAction) {
|
|
253
|
-
items.push( /*#__PURE__*/React__default["default"].createElement("div", {
|
|
254
|
-
key: "cta-spacer",
|
|
255
|
-
style: {
|
|
256
|
-
height: callToActionHeight
|
|
257
|
-
}
|
|
258
|
-
}));
|
|
259
|
-
}
|
|
260
|
-
|
|
261
|
-
var onScrolledBottom = React.useCallback(function (_ref5) {
|
|
262
|
-
var initial = _ref5.initial;
|
|
246
|
+
var onScrolledBottom = React.useCallback(function (_ref4) {
|
|
247
|
+
var initial = _ref4.initial;
|
|
263
248
|
|
|
264
249
|
if (initial) {
|
|
265
250
|
trackScreenEvent('scroll', 'Screen');
|
|
@@ -271,7 +256,7 @@ var GalleryFeedScreen = function GalleryFeedScreen(_ref) {
|
|
|
271
256
|
setScrolledBottom(false);
|
|
272
257
|
}, [setScrolledBottom]);
|
|
273
258
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
274
|
-
className: classNames__default["default"]([styles.container, (
|
|
259
|
+
className: classNames__default["default"]([styles.container, (_ref5 = {}, _defineProperty__default["default"](_ref5, className, className !== null), _defineProperty__default["default"](_ref5, styles.isPlaceholder, isPlaceholder), _ref5)]),
|
|
275
260
|
"data-screen-ready": ready
|
|
276
261
|
}, !isPlaceholder ? /*#__PURE__*/React__default["default"].createElement(Background__default["default"], {
|
|
277
262
|
background: background,
|
|
@@ -279,7 +264,9 @@ var GalleryFeedScreen = function GalleryFeedScreen(_ref) {
|
|
|
279
264
|
height: height,
|
|
280
265
|
resolution: resolution,
|
|
281
266
|
playing: backgroundPlaying,
|
|
282
|
-
|
|
267
|
+
muted: muted,
|
|
268
|
+
shouldLoad: mediaShouldLoad,
|
|
269
|
+
mediaRef: mediaRef
|
|
283
270
|
}) : null, /*#__PURE__*/React__default["default"].createElement(Container__default["default"], {
|
|
284
271
|
width: width,
|
|
285
272
|
height: height
|
|
@@ -291,27 +278,27 @@ var GalleryFeedScreen = function GalleryFeedScreen(_ref) {
|
|
|
291
278
|
className: styles.layout,
|
|
292
279
|
style: !isPlaceholder ? {
|
|
293
280
|
padding: spacing,
|
|
294
|
-
paddingTop: (
|
|
281
|
+
paddingTop: (!isPreview ? viewerTopHeight : 0) + spacing,
|
|
282
|
+
paddingBottom: (!isPreview ? viewerBottomHeight : 0) + spacing
|
|
295
283
|
} : null
|
|
296
284
|
}, /*#__PURE__*/React__default["default"].createElement(components.TransitionsStagger, {
|
|
297
285
|
transitions: transitions,
|
|
298
286
|
stagger: transitionStagger,
|
|
299
287
|
disabled: transitionDisabled,
|
|
300
288
|
playing: transitionPlaying
|
|
301
|
-
}, items)
|
|
302
|
-
|
|
289
|
+
}, items), !isPlaceholder && hasCallToAction ? /*#__PURE__*/React__default["default"].createElement("div", {
|
|
290
|
+
className: classNames__default["default"]([styles.callToAction, _defineProperty__default["default"]({}, styles.disabled, !scrolledBottom)]),
|
|
291
|
+
style: {
|
|
292
|
+
paddingLeft: Math.max(viewerBottomSidesWidth - spacing, 0),
|
|
293
|
+
paddingRight: Math.max(viewerBottomSidesWidth - spacing, 0),
|
|
294
|
+
paddingTop: spacing
|
|
295
|
+
}
|
|
296
|
+
}, /*#__PURE__*/React__default["default"].createElement(CallToAction__default["default"], Object.assign({}, callToAction, {
|
|
303
297
|
className: styles.callToAction,
|
|
304
|
-
disabled: !scrolledBottom,
|
|
305
298
|
animationDisabled: isPreview,
|
|
306
|
-
callToAction: callToAction,
|
|
307
299
|
focusable: current && isView,
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
height: height
|
|
311
|
-
},
|
|
312
|
-
enableInteraction: enableInteraction,
|
|
313
|
-
disableInteraction: disableInteraction
|
|
314
|
-
}) : null));
|
|
300
|
+
openWebView: openWebView
|
|
301
|
+
}))) : null))));
|
|
315
302
|
};
|
|
316
303
|
|
|
317
304
|
GalleryFeedScreen.propTypes = propTypes;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@micromag/screen-gallery-feed",
|
|
3
|
-
"version": "0.3.
|
|
3
|
+
"version": "0.3.152",
|
|
4
4
|
"description": "",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"javascript"
|
|
@@ -49,16 +49,16 @@
|
|
|
49
49
|
},
|
|
50
50
|
"dependencies": {
|
|
51
51
|
"@babel/runtime": "^7.13.10",
|
|
52
|
-
"@micromag/core": "^0.3.
|
|
53
|
-
"@micromag/element-background": "^0.3.
|
|
54
|
-
"@micromag/element-call-to-action": "^0.3.
|
|
55
|
-
"@micromag/element-container": "^0.3.
|
|
56
|
-
"@micromag/element-layout": "^0.3.
|
|
57
|
-
"@micromag/element-scroll": "^0.3.
|
|
58
|
-
"@micromag/element-stack": "^0.3.
|
|
59
|
-
"@micromag/element-text": "^0.3.
|
|
60
|
-
"@micromag/element-visual": "^0.3.
|
|
61
|
-
"@micromag/transforms": "^0.3.
|
|
52
|
+
"@micromag/core": "^0.3.152",
|
|
53
|
+
"@micromag/element-background": "^0.3.152",
|
|
54
|
+
"@micromag/element-call-to-action": "^0.3.152",
|
|
55
|
+
"@micromag/element-container": "^0.3.152",
|
|
56
|
+
"@micromag/element-layout": "^0.3.152",
|
|
57
|
+
"@micromag/element-scroll": "^0.3.152",
|
|
58
|
+
"@micromag/element-stack": "^0.3.152",
|
|
59
|
+
"@micromag/element-text": "^0.3.152",
|
|
60
|
+
"@micromag/element-visual": "^0.3.152",
|
|
61
|
+
"@micromag/transforms": "^0.3.152",
|
|
62
62
|
"classnames": "^2.2.6",
|
|
63
63
|
"lodash": "^4.17.21",
|
|
64
64
|
"prop-types": "^15.7.2",
|
|
@@ -68,5 +68,5 @@
|
|
|
68
68
|
"publishConfig": {
|
|
69
69
|
"access": "public"
|
|
70
70
|
},
|
|
71
|
-
"gitHead": "
|
|
71
|
+
"gitHead": "23db6c104c10cc70a73366c8b04576a312a36206"
|
|
72
72
|
}
|