@micromag/screen-image-360 0.3.310 → 0.3.318
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 +112 -141
- package/lib/index.js +112 -141
- package/package.json +12 -12
package/assets/css/styles.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.micromag-screen-image-360-container .micromag-screen-image-360-canvasButton{
|
|
1
|
+
.micromag-screen-image-360-container .micromag-screen-image-360-canvasButton{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;color:inherit;cursor:pointer;display:inline-block;font-family:inherit;padding:0;position:relative}.micromag-screen-image-360-container .micromag-screen-image-360-background,.micromag-screen-image-360-container .micromag-screen-image-360-canvas,.micromag-screen-image-360-container .micromag-screen-image-360-canvasButton,.micromag-screen-image-360-container .micromag-screen-image-360-inner,.micromag-screen-image-360-container .micromag-screen-image-360-placeholder,.micromag-screen-image-360-container .micromag-screen-image-360-video{height:100%;left:0;position:absolute;top:0;width:100%}.micromag-screen-image-360-container{height:100%;overflow:hidden;position:relative;width:100%}.micromag-screen-image-360-disabled.micromag-screen-image-360-container{overflow:hidden;pointer-events:none}.micromag-screen-image-360-hidden.micromag-screen-image-360-container{display:none;visibility:hidden}.micromag-screen-image-360-placeholder.micromag-screen-image-360-container .micromag-screen-image-360-content{padding:6px;position:relative}.micromag-screen-image-360-container .micromag-screen-image-360-empty{border:2px dashed #343434;color:#343434;margin:5px auto}.micromag-screen-image-360-container .micromag-screen-image-360-background{z-index:0}.micromag-screen-image-360-container .micromag-screen-image-360-content{z-index:1}.micromag-screen-image-360-container .micromag-screen-image-360-empty{height:100%;margin:0}.micromag-screen-image-360-container .micromag-screen-image-360-canvasButton{-ms-touch-action:none;touch-action:none}.micromag-screen-image-360-container .micromag-screen-image-360-videoContainer{position:absolute}.micromag-screen-image-360-container .micromag-screen-image-360-video{visibility:hidden}.micromag-screen-image-360-container .micromag-screen-image-360-video video{height:100%}.micromag-screen-image-360-container .micromag-screen-image-360-mediaControls{padding:10px 20px 20px}.micromag-screen-image-360-container .micromag-screen-image-360-placeholder{-ms-flex-pack:center;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;height:100%;justify-content:center}.micromag-screen-image-360-container .micromag-screen-image-360-callToAction{bottom:0;left:0;position:absolute;width:100%}.micromag-screen-image-360-container.micromag-screen-image-360-showVideo .micromag-screen-image-360-video{visibility:visible}
|
package/es/index.js
CHANGED
|
@@ -21,37 +21,32 @@ import { Video, Container as Container$1 } from '@micromag/transforms/apple-news
|
|
|
21
21
|
/**
|
|
22
22
|
* Locale loader
|
|
23
23
|
*/
|
|
24
|
-
|
|
25
24
|
var packageCache = null;
|
|
26
|
-
|
|
27
25
|
var useThree = function useThree() {
|
|
28
26
|
// transport
|
|
29
27
|
var _useState = useState({
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
28
|
+
"package": packageCache
|
|
29
|
+
}),
|
|
30
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
31
|
+
loadedPackage = _useState2[0]["package"],
|
|
32
|
+
setLoadedPackage = _useState2[1];
|
|
36
33
|
useEffect(function () {
|
|
37
34
|
var canceled = false;
|
|
38
|
-
|
|
39
35
|
if (loadedPackage !== null) {
|
|
40
36
|
return function () {
|
|
41
37
|
canceled = true;
|
|
42
38
|
};
|
|
43
39
|
}
|
|
44
|
-
|
|
45
40
|
import('three').then(function (_ref) {
|
|
46
41
|
var Scene = _ref.Scene,
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
42
|
+
PerspectiveCamera = _ref.PerspectiveCamera,
|
|
43
|
+
SphereBufferGeometry = _ref.SphereBufferGeometry,
|
|
44
|
+
VideoTexture = _ref.VideoTexture,
|
|
45
|
+
TextureLoader = _ref.TextureLoader,
|
|
46
|
+
MeshBasicMaterial = _ref.MeshBasicMaterial,
|
|
47
|
+
Mesh = _ref.Mesh,
|
|
48
|
+
WebGLRenderer = _ref.WebGLRenderer,
|
|
49
|
+
MathUtils = _ref.MathUtils;
|
|
55
50
|
packageCache = {
|
|
56
51
|
Scene: Scene,
|
|
57
52
|
PerspectiveCamera: PerspectiveCamera,
|
|
@@ -63,7 +58,6 @@ var useThree = function useThree() {
|
|
|
63
58
|
WebGLRenderer: WebGLRenderer,
|
|
64
59
|
MathUtils: MathUtils
|
|
65
60
|
};
|
|
66
|
-
|
|
67
61
|
if (!canceled) {
|
|
68
62
|
setLoadedPackage({
|
|
69
63
|
"package": packageCache
|
|
@@ -77,7 +71,7 @@ var useThree = function useThree() {
|
|
|
77
71
|
return loadedPackage;
|
|
78
72
|
};
|
|
79
73
|
|
|
80
|
-
var styles = {"container":"micromag-screen-image-360-container","canvasButton":"micromag-screen-image-360-canvasButton","
|
|
74
|
+
var styles = {"container":"micromag-screen-image-360-container","canvasButton":"micromag-screen-image-360-canvasButton","placeholder":"micromag-screen-image-360-placeholder","inner":"micromag-screen-image-360-inner","canvas":"micromag-screen-image-360-canvas","video":"micromag-screen-image-360-video","background":"micromag-screen-image-360-background","disabled":"micromag-screen-image-360-disabled","hidden":"micromag-screen-image-360-hidden","content":"micromag-screen-image-360-content","empty":"micromag-screen-image-360-empty","videoContainer":"micromag-screen-image-360-videoContainer","mediaControls":"micromag-screen-image-360-mediaControls","callToAction":"micromag-screen-image-360-callToAction","showVideo":"micromag-screen-image-360-showVideo"};
|
|
81
75
|
|
|
82
76
|
var propTypes = {
|
|
83
77
|
layout: PropTypes.oneOf(['full']),
|
|
@@ -103,101 +97,83 @@ var defaultProps = {
|
|
|
103
97
|
spacing: 20,
|
|
104
98
|
className: null
|
|
105
99
|
};
|
|
106
|
-
|
|
107
100
|
var Image360Screen = function Image360Screen(_ref) {
|
|
108
101
|
var _ref7;
|
|
109
|
-
|
|
110
102
|
_ref.layout;
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
103
|
+
var image = _ref.image,
|
|
104
|
+
background = _ref.background,
|
|
105
|
+
callToAction = _ref.callToAction,
|
|
106
|
+
current = _ref.current,
|
|
107
|
+
active = _ref.active,
|
|
108
|
+
transitions = _ref.transitions,
|
|
109
|
+
type = _ref.type,
|
|
110
|
+
spacing = _ref.spacing,
|
|
111
|
+
className = _ref.className;
|
|
120
112
|
var THREE = useThree();
|
|
121
113
|
var trackScreenEvent = useTrackScreenEvent(type);
|
|
122
|
-
|
|
123
114
|
var _useScreenRenderConte = useScreenRenderContext(),
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
115
|
+
isView = _useScreenRenderConte.isView,
|
|
116
|
+
isPreview = _useScreenRenderConte.isPreview,
|
|
117
|
+
isPlaceholder = _useScreenRenderConte.isPlaceholder,
|
|
118
|
+
isEdit = _useScreenRenderConte.isEdit,
|
|
119
|
+
isStatic = _useScreenRenderConte.isStatic,
|
|
120
|
+
isCapture = _useScreenRenderConte.isCapture;
|
|
131
121
|
var _useScreenSize = useScreenSize(),
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
122
|
+
width = _useScreenSize.width,
|
|
123
|
+
height = _useScreenSize.height,
|
|
124
|
+
landscape = _useScreenSize.landscape,
|
|
125
|
+
resolution = _useScreenSize.resolution;
|
|
137
126
|
var _useViewerNavigation = useViewerNavigation(),
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
127
|
+
gotoPreviousScreen = _useViewerNavigation.gotoPreviousScreen,
|
|
128
|
+
gotoNextScreen = _useViewerNavigation.gotoNextScreen;
|
|
141
129
|
var _useViewerWebView = useViewerWebView(),
|
|
142
|
-
|
|
143
|
-
|
|
130
|
+
openWebView = _useViewerWebView.open;
|
|
144
131
|
var _useViewerContext = useViewerContext(),
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
132
|
+
viewerBottomHeight = _useViewerContext.bottomHeight,
|
|
133
|
+
viewerBottomSidesWidth = _useViewerContext.bottomSidesWidth;
|
|
148
134
|
var _usePlaybackContext = usePlaybackContext(),
|
|
149
|
-
|
|
150
|
-
|
|
135
|
+
muted = _usePlaybackContext.muted;
|
|
151
136
|
var mediaRef = usePlaybackMediaRef(current);
|
|
152
137
|
var backgroundPlaying = current && (isView || isEdit);
|
|
153
138
|
var mediaShouldLoad = current || active;
|
|
154
|
-
var canvasContainerRef = useRef();
|
|
139
|
+
var canvasContainerRef = useRef();
|
|
155
140
|
|
|
156
|
-
|
|
141
|
+
// ------------------------------------
|
|
157
142
|
|
|
143
|
+
var hasMedia = image !== null;
|
|
158
144
|
var _ref2 = callToAction || {},
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
145
|
+
_ref2$active = _ref2.active,
|
|
146
|
+
hasCallToAction = _ref2$active === void 0 ? false : _ref2$active;
|
|
162
147
|
var _useState = useState(!hasMedia),
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
148
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
149
|
+
ready = _useState2[0],
|
|
150
|
+
setReady = _useState2[1];
|
|
167
151
|
var transitionPlaying = current && ready;
|
|
168
152
|
var transitionDisabled = isStatic || isCapture || isPlaceholder || isPreview || isEdit;
|
|
169
|
-
|
|
170
153
|
var _ref3 = image || {},
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
154
|
+
_ref3$metadata = _ref3.metadata,
|
|
155
|
+
imageMetadata = _ref3$metadata === void 0 ? null : _ref3$metadata,
|
|
156
|
+
_ref3$url = _ref3.url,
|
|
157
|
+
imageUrl = _ref3$url === void 0 ? null : _ref3$url,
|
|
158
|
+
_ref3$thumbnail_url = _ref3.thumbnail_url,
|
|
159
|
+
thumbnailUrl = _ref3$thumbnail_url === void 0 ? null : _ref3$thumbnail_url;
|
|
178
160
|
var hasMediaUrl = imageUrl !== null;
|
|
179
|
-
|
|
180
161
|
var _ref4 = imageMetadata || {},
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
162
|
+
_ref4$width = _ref4.width,
|
|
163
|
+
imageWidth = _ref4$width === void 0 ? 0 : _ref4$width,
|
|
164
|
+
_ref4$height = _ref4.height,
|
|
165
|
+
imageHeight = _ref4$height === void 0 ? 0 : _ref4$height;
|
|
186
166
|
var hasThumbnail = thumbnailUrl !== null;
|
|
187
|
-
|
|
188
167
|
var _useState3 = useState(!hasThumbnail),
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
168
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
169
|
+
posterReady = _useState4[0],
|
|
170
|
+
setPosterReady = _useState4[1];
|
|
193
171
|
var withSphere = hasMediaUrl && (isView || isEdit) && !isCapture && !isStatic;
|
|
194
|
-
|
|
195
172
|
var _getSizeWithinBounds = getSizeWithinBounds(imageWidth, imageHeight, width, height, {
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
173
|
+
cover: true
|
|
174
|
+
}),
|
|
175
|
+
resizedImageWidth = _getSizeWithinBounds.width,
|
|
176
|
+
resizedImageHeight = _getSizeWithinBounds.height;
|
|
201
177
|
var resizedImageLeft = -(resizedImageWidth - width) / 2;
|
|
202
178
|
var resizedImageTop = -(resizedImageHeight - height) / 2;
|
|
203
179
|
useEffect(function () {
|
|
@@ -205,7 +181,9 @@ var Image360Screen = function Image360Screen(_ref) {
|
|
|
205
181
|
}, [imageUrl, hasMediaUrl, setReady]);
|
|
206
182
|
useEffect(function () {
|
|
207
183
|
setPosterReady(!hasThumbnail);
|
|
208
|
-
}, [thumbnailUrl, hasThumbnail, setPosterReady]);
|
|
184
|
+
}, [thumbnailUrl, hasThumbnail, setPosterReady]);
|
|
185
|
+
|
|
186
|
+
// 3D layer --------------------------
|
|
209
187
|
|
|
210
188
|
var canvasRef = useRef(null);
|
|
211
189
|
var camera = useRef(null);
|
|
@@ -214,28 +192,32 @@ var Image360Screen = function Image360Screen(_ref) {
|
|
|
214
192
|
var lon = useRef(0);
|
|
215
193
|
var lat = useRef(0);
|
|
216
194
|
var phi = useRef(0);
|
|
217
|
-
var theta = useRef(0);
|
|
218
|
-
|
|
195
|
+
var theta = useRef(0);
|
|
196
|
+
// const distance = useRef(50);
|
|
219
197
|
var pointerDown = useRef(false);
|
|
220
198
|
var pointerDownX = useRef(0);
|
|
221
199
|
var pointerDownY = useRef(0);
|
|
222
200
|
var pointerLon = useRef(0);
|
|
223
|
-
var pointerLat = useRef(0);
|
|
201
|
+
var pointerLat = useRef(0);
|
|
202
|
+
|
|
203
|
+
// render 3D frame
|
|
224
204
|
|
|
225
205
|
var render3D = useCallback(function () {
|
|
226
206
|
if (THREE === null) {
|
|
227
207
|
return;
|
|
228
|
-
}
|
|
208
|
+
}
|
|
209
|
+
// const { MathUtils } = THREE;
|
|
229
210
|
// lat.current = Math.max(-85, Math.min(85, lat.current));
|
|
230
211
|
// phi.current = MathUtils.degToRad(90 - lat.current);
|
|
231
212
|
// theta.current = MathUtils.degToRad(lon.current);
|
|
213
|
+
|
|
232
214
|
// camera.current.position.x =
|
|
233
215
|
// distance.current * Math.sin(phi.current) * Math.cos(theta.current);
|
|
234
216
|
// camera.current.position.y = distance.current * Math.cos(phi.current);
|
|
235
217
|
// camera.current.position.z =
|
|
236
218
|
// distance.current * Math.sin(phi.current) * Math.sin(theta.current);
|
|
237
|
-
// camera.current.lookAt(0, 0, 0);
|
|
238
219
|
|
|
220
|
+
// camera.current.lookAt(0, 0, 0);
|
|
239
221
|
|
|
240
222
|
lat.current = Math.max(-85, Math.min(85, lat.current));
|
|
241
223
|
phi.current = THREE.MathUtils.degToRad(90 - lat.current);
|
|
@@ -245,20 +227,22 @@ var Image360Screen = function Image360Screen(_ref) {
|
|
|
245
227
|
var z = 500 * Math.sin(phi.current) * Math.sin(theta.current);
|
|
246
228
|
camera.current.lookAt(x, y, z);
|
|
247
229
|
renderer.current.render(scene.current, camera.current);
|
|
248
|
-
}, [THREE]);
|
|
230
|
+
}, [THREE]);
|
|
231
|
+
|
|
232
|
+
// Init 3D layer
|
|
249
233
|
|
|
250
234
|
useEffect(function () {
|
|
251
235
|
if (THREE !== null && hasMediaUrl && withSphere) {
|
|
252
236
|
var Scene = THREE.Scene,
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
237
|
+
PerspectiveCamera = THREE.PerspectiveCamera,
|
|
238
|
+
SphereBufferGeometry = THREE.SphereBufferGeometry,
|
|
239
|
+
MeshBasicMaterial = THREE.MeshBasicMaterial,
|
|
240
|
+
Mesh = THREE.Mesh,
|
|
241
|
+
WebGLRenderer = THREE.WebGLRenderer,
|
|
242
|
+
TextureLoader = THREE.TextureLoader;
|
|
259
243
|
var _canvasRef$current = canvasRef.current,
|
|
260
|
-
|
|
261
|
-
|
|
244
|
+
canvasWidth = _canvasRef$current.offsetWidth,
|
|
245
|
+
canvasHeight = _canvasRef$current.offsetHeight;
|
|
262
246
|
camera.current = new PerspectiveCamera(50, canvasWidth / canvasHeight, 1, 1100);
|
|
263
247
|
scene.current = new Scene();
|
|
264
248
|
var geometry = new SphereBufferGeometry(500, 60, 40, 0, Math.PI * 2, Math.PI / 3, Math.PI / 3);
|
|
@@ -276,7 +260,6 @@ var Image360Screen = function Image360Screen(_ref) {
|
|
|
276
260
|
renderer.current.setSize(canvasWidth, canvasHeight);
|
|
277
261
|
render3D();
|
|
278
262
|
}
|
|
279
|
-
|
|
280
263
|
return function () {
|
|
281
264
|
if (withSphere) {
|
|
282
265
|
camera.current = null;
|
|
@@ -287,7 +270,9 @@ var Image360Screen = function Image360Screen(_ref) {
|
|
|
287
270
|
}, [hasMediaUrl, withSphere, render3D, THREE]);
|
|
288
271
|
useAnimationFrame(render3D, {
|
|
289
272
|
disabled: !withSphere || THREE === null
|
|
290
|
-
});
|
|
273
|
+
});
|
|
274
|
+
|
|
275
|
+
// Resize 3D layer
|
|
291
276
|
|
|
292
277
|
useEffect(function () {
|
|
293
278
|
if (camera.current !== null && renderer.current !== null) {
|
|
@@ -295,8 +280,9 @@ var Image360Screen = function Image360Screen(_ref) {
|
|
|
295
280
|
camera.current.updateProjectionMatrix();
|
|
296
281
|
renderer.current.setSize(width, height);
|
|
297
282
|
}
|
|
298
|
-
}, [width, height]);
|
|
283
|
+
}, [width, height]);
|
|
299
284
|
|
|
285
|
+
// Pointer interaction
|
|
300
286
|
var togglePlayTimeout = useRef(null);
|
|
301
287
|
var onPointerDown = useCallback(function (e) {
|
|
302
288
|
pointerDown.current = true;
|
|
@@ -311,36 +297,30 @@ var Image360Screen = function Image360Screen(_ref) {
|
|
|
311
297
|
var onPointerMove = useCallback(function (e) {
|
|
312
298
|
if (pointerDown.current) {
|
|
313
299
|
var _ref5 = e || {},
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
300
|
+
_ref5$clientX = _ref5.clientX,
|
|
301
|
+
clientX = _ref5$clientX === void 0 ? null : _ref5$clientX,
|
|
302
|
+
_ref5$clientY = _ref5.clientY,
|
|
303
|
+
clientY = _ref5$clientY === void 0 ? null : _ref5$clientY;
|
|
319
304
|
var downDeltaX = pointerDownX.current - clientX;
|
|
320
305
|
var downDeltaY = pointerDownY.current - clientY;
|
|
321
306
|
lon.current = downDeltaX * 0.2 + pointerLon.current;
|
|
322
307
|
lat.current = downDeltaY * 0.2 + pointerLat.current;
|
|
323
|
-
|
|
324
308
|
var _ref6 = lastPointerClient.current || {},
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
309
|
+
_ref6$x = _ref6.x,
|
|
310
|
+
lastX = _ref6$x === void 0 ? clientX : _ref6$x,
|
|
311
|
+
_ref6$y = _ref6.y,
|
|
312
|
+
lastY = _ref6$y === void 0 ? clientY : _ref6$y;
|
|
330
313
|
var deltaX = Math.abs(lastX - clientX) || 0;
|
|
331
314
|
var deltaY = Math.abs(lastY - clientY) || 0;
|
|
332
315
|
pixelsMoved.current += deltaX + deltaY;
|
|
333
|
-
|
|
334
316
|
if (!pixelsMovedTracked.current && pixelsMoved.current > Math.min(width, height)) {
|
|
335
317
|
trackScreenEvent('drag_sphere');
|
|
336
318
|
pixelsMovedTracked.current = true;
|
|
337
319
|
}
|
|
338
|
-
|
|
339
320
|
lastPointerClient.current = {
|
|
340
321
|
x: clientX,
|
|
341
322
|
y: clientY
|
|
342
323
|
};
|
|
343
|
-
|
|
344
324
|
if (Math.abs(downDeltaX) > 3 || Math.abs(downDeltaY) > 3) {
|
|
345
325
|
if (togglePlayTimeout.current !== null) {
|
|
346
326
|
clearTimeout(togglePlayTimeout.current);
|
|
@@ -351,7 +331,6 @@ var Image360Screen = function Image360Screen(_ref) {
|
|
|
351
331
|
}, [width, height, trackScreenEvent]);
|
|
352
332
|
var onPointerUp = useCallback(function (e) {
|
|
353
333
|
var canvasContainer = canvasContainerRef.current;
|
|
354
|
-
|
|
355
334
|
if (pointerDown.current && canvasContainer !== null) {
|
|
356
335
|
var distX = Math.abs(pointerDownX.current - e.clientX);
|
|
357
336
|
var distY = Math.abs(pointerDownY.current - e.clientY);
|
|
@@ -359,15 +338,12 @@ var Image360Screen = function Image360Screen(_ref) {
|
|
|
359
338
|
var tapNextScreenWidthPercent = 0.5;
|
|
360
339
|
var canTapToNavigate = !landscape && togglePlayTimeout.current !== null;
|
|
361
340
|
var validNavigateTap = canTapToNavigate && distX < pixelsMovedTolerance && distY < pixelsMovedTolerance;
|
|
362
|
-
|
|
363
341
|
if (validNavigateTap) {
|
|
364
342
|
var _canvasContainer$getB = canvasContainer.getBoundingClientRect(),
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
343
|
+
_canvasContainer$getB2 = _canvasContainer$getB.left,
|
|
344
|
+
containerX = _canvasContainer$getB2 === void 0 ? 0 : _canvasContainer$getB2,
|
|
345
|
+
containerWidth = _canvasContainer$getB.width;
|
|
369
346
|
var hasTappedLeft = e.clientX - containerX < containerWidth * (1 - tapNextScreenWidthPercent);
|
|
370
|
-
|
|
371
347
|
if (hasTappedLeft) {
|
|
372
348
|
if (gotoPreviousScreen !== null) {
|
|
373
349
|
gotoPreviousScreen();
|
|
@@ -376,15 +352,15 @@ var Image360Screen = function Image360Screen(_ref) {
|
|
|
376
352
|
gotoNextScreen();
|
|
377
353
|
}
|
|
378
354
|
}
|
|
379
|
-
|
|
380
355
|
if (togglePlayTimeout.current !== null) {
|
|
381
356
|
clearTimeout(togglePlayTimeout.current);
|
|
382
357
|
togglePlayTimeout.current = null;
|
|
383
358
|
}
|
|
384
359
|
}
|
|
385
|
-
|
|
386
360
|
pointerDown.current = false;
|
|
387
|
-
}, [gotoPreviousScreen, gotoNextScreen, landscape]);
|
|
361
|
+
}, [gotoPreviousScreen, gotoNextScreen, landscape]);
|
|
362
|
+
|
|
363
|
+
// Building elements ------------------
|
|
388
364
|
|
|
389
365
|
var items = [/*#__PURE__*/React.createElement(ScreenElement, {
|
|
390
366
|
key: "video",
|
|
@@ -485,26 +461,21 @@ var Image360Screen = function Image360Screen(_ref) {
|
|
|
485
461
|
className: styles.background
|
|
486
462
|
}) : null);
|
|
487
463
|
};
|
|
488
|
-
|
|
489
464
|
Image360Screen.propTypes = propTypes;
|
|
490
465
|
Image360Screen.defaultProps = defaultProps;
|
|
491
466
|
var Image360Screen$1 = /*#__PURE__*/React.memo(Image360Screen);
|
|
492
467
|
|
|
493
468
|
var transform = function transform(newStory, _ref) {
|
|
494
469
|
var video = _ref.video;
|
|
495
|
-
|
|
496
470
|
var _ref2 = video || {},
|
|
497
|
-
|
|
498
|
-
|
|
499
|
-
|
|
471
|
+
_ref2$media = _ref2.media,
|
|
472
|
+
media = _ref2$media === void 0 ? null : _ref2$media;
|
|
500
473
|
var _Video = Video(newStory, media),
|
|
501
|
-
|
|
502
|
-
|
|
503
|
-
|
|
474
|
+
titleStory = _Video.story,
|
|
475
|
+
titleComponent = _Video.component;
|
|
504
476
|
var _Container = Container$1(titleStory, _toConsumableArray(titleComponent ? [titleComponent] : [])),
|
|
505
|
-
|
|
506
|
-
|
|
507
|
-
|
|
477
|
+
containerStory = _Container.story,
|
|
478
|
+
containerComponent = _Container.component;
|
|
508
479
|
return _objectSpread(_objectSpread({}, containerStory), {}, {
|
|
509
480
|
components: [].concat(_toConsumableArray(newStory.components || []), _toConsumableArray(containerComponent ? [containerComponent] : []))
|
|
510
481
|
});
|
package/lib/index.js
CHANGED
|
@@ -57,37 +57,32 @@ var _toConsumableArray__default = /*#__PURE__*/_interopDefaultLegacy(_toConsumab
|
|
|
57
57
|
/**
|
|
58
58
|
* Locale loader
|
|
59
59
|
*/
|
|
60
|
-
|
|
61
60
|
var packageCache = null;
|
|
62
|
-
|
|
63
61
|
var useThree = function useThree() {
|
|
64
62
|
// transport
|
|
65
63
|
var _useState = React.useState({
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
64
|
+
"package": packageCache
|
|
65
|
+
}),
|
|
66
|
+
_useState2 = _slicedToArray__default["default"](_useState, 2),
|
|
67
|
+
loadedPackage = _useState2[0]["package"],
|
|
68
|
+
setLoadedPackage = _useState2[1];
|
|
72
69
|
React.useEffect(function () {
|
|
73
70
|
var canceled = false;
|
|
74
|
-
|
|
75
71
|
if (loadedPackage !== null) {
|
|
76
72
|
return function () {
|
|
77
73
|
canceled = true;
|
|
78
74
|
};
|
|
79
75
|
}
|
|
80
|
-
|
|
81
76
|
Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require('three')); }).then(function (_ref) {
|
|
82
77
|
var Scene = _ref.Scene,
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
78
|
+
PerspectiveCamera = _ref.PerspectiveCamera,
|
|
79
|
+
SphereBufferGeometry = _ref.SphereBufferGeometry,
|
|
80
|
+
VideoTexture = _ref.VideoTexture,
|
|
81
|
+
TextureLoader = _ref.TextureLoader,
|
|
82
|
+
MeshBasicMaterial = _ref.MeshBasicMaterial,
|
|
83
|
+
Mesh = _ref.Mesh,
|
|
84
|
+
WebGLRenderer = _ref.WebGLRenderer,
|
|
85
|
+
MathUtils = _ref.MathUtils;
|
|
91
86
|
packageCache = {
|
|
92
87
|
Scene: Scene,
|
|
93
88
|
PerspectiveCamera: PerspectiveCamera,
|
|
@@ -99,7 +94,6 @@ var useThree = function useThree() {
|
|
|
99
94
|
WebGLRenderer: WebGLRenderer,
|
|
100
95
|
MathUtils: MathUtils
|
|
101
96
|
};
|
|
102
|
-
|
|
103
97
|
if (!canceled) {
|
|
104
98
|
setLoadedPackage({
|
|
105
99
|
"package": packageCache
|
|
@@ -113,7 +107,7 @@ var useThree = function useThree() {
|
|
|
113
107
|
return loadedPackage;
|
|
114
108
|
};
|
|
115
109
|
|
|
116
|
-
var styles = {"container":"micromag-screen-image-360-container","canvasButton":"micromag-screen-image-360-canvasButton","
|
|
110
|
+
var styles = {"container":"micromag-screen-image-360-container","canvasButton":"micromag-screen-image-360-canvasButton","placeholder":"micromag-screen-image-360-placeholder","inner":"micromag-screen-image-360-inner","canvas":"micromag-screen-image-360-canvas","video":"micromag-screen-image-360-video","background":"micromag-screen-image-360-background","disabled":"micromag-screen-image-360-disabled","hidden":"micromag-screen-image-360-hidden","content":"micromag-screen-image-360-content","empty":"micromag-screen-image-360-empty","videoContainer":"micromag-screen-image-360-videoContainer","mediaControls":"micromag-screen-image-360-mediaControls","callToAction":"micromag-screen-image-360-callToAction","showVideo":"micromag-screen-image-360-showVideo"};
|
|
117
111
|
|
|
118
112
|
var propTypes = {
|
|
119
113
|
layout: PropTypes__default["default"].oneOf(['full']),
|
|
@@ -139,101 +133,83 @@ var defaultProps = {
|
|
|
139
133
|
spacing: 20,
|
|
140
134
|
className: null
|
|
141
135
|
};
|
|
142
|
-
|
|
143
136
|
var Image360Screen = function Image360Screen(_ref) {
|
|
144
137
|
var _ref7;
|
|
145
|
-
|
|
146
138
|
_ref.layout;
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
139
|
+
var image = _ref.image,
|
|
140
|
+
background = _ref.background,
|
|
141
|
+
callToAction = _ref.callToAction,
|
|
142
|
+
current = _ref.current,
|
|
143
|
+
active = _ref.active,
|
|
144
|
+
transitions = _ref.transitions,
|
|
145
|
+
type = _ref.type,
|
|
146
|
+
spacing = _ref.spacing,
|
|
147
|
+
className = _ref.className;
|
|
156
148
|
var THREE = useThree();
|
|
157
149
|
var trackScreenEvent = hooks.useTrackScreenEvent(type);
|
|
158
|
-
|
|
159
150
|
var _useScreenRenderConte = contexts.useScreenRenderContext(),
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
151
|
+
isView = _useScreenRenderConte.isView,
|
|
152
|
+
isPreview = _useScreenRenderConte.isPreview,
|
|
153
|
+
isPlaceholder = _useScreenRenderConte.isPlaceholder,
|
|
154
|
+
isEdit = _useScreenRenderConte.isEdit,
|
|
155
|
+
isStatic = _useScreenRenderConte.isStatic,
|
|
156
|
+
isCapture = _useScreenRenderConte.isCapture;
|
|
167
157
|
var _useScreenSize = contexts.useScreenSize(),
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
158
|
+
width = _useScreenSize.width,
|
|
159
|
+
height = _useScreenSize.height,
|
|
160
|
+
landscape = _useScreenSize.landscape,
|
|
161
|
+
resolution = _useScreenSize.resolution;
|
|
173
162
|
var _useViewerNavigation = contexts.useViewerNavigation(),
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
163
|
+
gotoPreviousScreen = _useViewerNavigation.gotoPreviousScreen,
|
|
164
|
+
gotoNextScreen = _useViewerNavigation.gotoNextScreen;
|
|
177
165
|
var _useViewerWebView = contexts.useViewerWebView(),
|
|
178
|
-
|
|
179
|
-
|
|
166
|
+
openWebView = _useViewerWebView.open;
|
|
180
167
|
var _useViewerContext = contexts.useViewerContext(),
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
168
|
+
viewerBottomHeight = _useViewerContext.bottomHeight,
|
|
169
|
+
viewerBottomSidesWidth = _useViewerContext.bottomSidesWidth;
|
|
184
170
|
var _usePlaybackContext = contexts.usePlaybackContext(),
|
|
185
|
-
|
|
186
|
-
|
|
171
|
+
muted = _usePlaybackContext.muted;
|
|
187
172
|
var mediaRef = contexts.usePlaybackMediaRef(current);
|
|
188
173
|
var backgroundPlaying = current && (isView || isEdit);
|
|
189
174
|
var mediaShouldLoad = current || active;
|
|
190
|
-
var canvasContainerRef = React.useRef();
|
|
175
|
+
var canvasContainerRef = React.useRef();
|
|
191
176
|
|
|
192
|
-
|
|
177
|
+
// ------------------------------------
|
|
193
178
|
|
|
179
|
+
var hasMedia = image !== null;
|
|
194
180
|
var _ref2 = callToAction || {},
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
181
|
+
_ref2$active = _ref2.active,
|
|
182
|
+
hasCallToAction = _ref2$active === void 0 ? false : _ref2$active;
|
|
198
183
|
var _useState = React.useState(!hasMedia),
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
184
|
+
_useState2 = _slicedToArray__default["default"](_useState, 2),
|
|
185
|
+
ready = _useState2[0],
|
|
186
|
+
setReady = _useState2[1];
|
|
203
187
|
var transitionPlaying = current && ready;
|
|
204
188
|
var transitionDisabled = isStatic || isCapture || isPlaceholder || isPreview || isEdit;
|
|
205
|
-
|
|
206
189
|
var _ref3 = image || {},
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
190
|
+
_ref3$metadata = _ref3.metadata,
|
|
191
|
+
imageMetadata = _ref3$metadata === void 0 ? null : _ref3$metadata,
|
|
192
|
+
_ref3$url = _ref3.url,
|
|
193
|
+
imageUrl = _ref3$url === void 0 ? null : _ref3$url,
|
|
194
|
+
_ref3$thumbnail_url = _ref3.thumbnail_url,
|
|
195
|
+
thumbnailUrl = _ref3$thumbnail_url === void 0 ? null : _ref3$thumbnail_url;
|
|
214
196
|
var hasMediaUrl = imageUrl !== null;
|
|
215
|
-
|
|
216
197
|
var _ref4 = imageMetadata || {},
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
198
|
+
_ref4$width = _ref4.width,
|
|
199
|
+
imageWidth = _ref4$width === void 0 ? 0 : _ref4$width,
|
|
200
|
+
_ref4$height = _ref4.height,
|
|
201
|
+
imageHeight = _ref4$height === void 0 ? 0 : _ref4$height;
|
|
222
202
|
var hasThumbnail = thumbnailUrl !== null;
|
|
223
|
-
|
|
224
203
|
var _useState3 = React.useState(!hasThumbnail),
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
204
|
+
_useState4 = _slicedToArray__default["default"](_useState3, 2),
|
|
205
|
+
posterReady = _useState4[0],
|
|
206
|
+
setPosterReady = _useState4[1];
|
|
229
207
|
var withSphere = hasMediaUrl && (isView || isEdit) && !isCapture && !isStatic;
|
|
230
|
-
|
|
231
208
|
var _getSizeWithinBounds = size.getSizeWithinBounds(imageWidth, imageHeight, width, height, {
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
209
|
+
cover: true
|
|
210
|
+
}),
|
|
211
|
+
resizedImageWidth = _getSizeWithinBounds.width,
|
|
212
|
+
resizedImageHeight = _getSizeWithinBounds.height;
|
|
237
213
|
var resizedImageLeft = -(resizedImageWidth - width) / 2;
|
|
238
214
|
var resizedImageTop = -(resizedImageHeight - height) / 2;
|
|
239
215
|
React.useEffect(function () {
|
|
@@ -241,7 +217,9 @@ var Image360Screen = function Image360Screen(_ref) {
|
|
|
241
217
|
}, [imageUrl, hasMediaUrl, setReady]);
|
|
242
218
|
React.useEffect(function () {
|
|
243
219
|
setPosterReady(!hasThumbnail);
|
|
244
|
-
}, [thumbnailUrl, hasThumbnail, setPosterReady]);
|
|
220
|
+
}, [thumbnailUrl, hasThumbnail, setPosterReady]);
|
|
221
|
+
|
|
222
|
+
// 3D layer --------------------------
|
|
245
223
|
|
|
246
224
|
var canvasRef = React.useRef(null);
|
|
247
225
|
var camera = React.useRef(null);
|
|
@@ -250,28 +228,32 @@ var Image360Screen = function Image360Screen(_ref) {
|
|
|
250
228
|
var lon = React.useRef(0);
|
|
251
229
|
var lat = React.useRef(0);
|
|
252
230
|
var phi = React.useRef(0);
|
|
253
|
-
var theta = React.useRef(0);
|
|
254
|
-
|
|
231
|
+
var theta = React.useRef(0);
|
|
232
|
+
// const distance = useRef(50);
|
|
255
233
|
var pointerDown = React.useRef(false);
|
|
256
234
|
var pointerDownX = React.useRef(0);
|
|
257
235
|
var pointerDownY = React.useRef(0);
|
|
258
236
|
var pointerLon = React.useRef(0);
|
|
259
|
-
var pointerLat = React.useRef(0);
|
|
237
|
+
var pointerLat = React.useRef(0);
|
|
238
|
+
|
|
239
|
+
// render 3D frame
|
|
260
240
|
|
|
261
241
|
var render3D = React.useCallback(function () {
|
|
262
242
|
if (THREE === null) {
|
|
263
243
|
return;
|
|
264
|
-
}
|
|
244
|
+
}
|
|
245
|
+
// const { MathUtils } = THREE;
|
|
265
246
|
// lat.current = Math.max(-85, Math.min(85, lat.current));
|
|
266
247
|
// phi.current = MathUtils.degToRad(90 - lat.current);
|
|
267
248
|
// theta.current = MathUtils.degToRad(lon.current);
|
|
249
|
+
|
|
268
250
|
// camera.current.position.x =
|
|
269
251
|
// distance.current * Math.sin(phi.current) * Math.cos(theta.current);
|
|
270
252
|
// camera.current.position.y = distance.current * Math.cos(phi.current);
|
|
271
253
|
// camera.current.position.z =
|
|
272
254
|
// distance.current * Math.sin(phi.current) * Math.sin(theta.current);
|
|
273
|
-
// camera.current.lookAt(0, 0, 0);
|
|
274
255
|
|
|
256
|
+
// camera.current.lookAt(0, 0, 0);
|
|
275
257
|
|
|
276
258
|
lat.current = Math.max(-85, Math.min(85, lat.current));
|
|
277
259
|
phi.current = THREE.MathUtils.degToRad(90 - lat.current);
|
|
@@ -281,20 +263,22 @@ var Image360Screen = function Image360Screen(_ref) {
|
|
|
281
263
|
var z = 500 * Math.sin(phi.current) * Math.sin(theta.current);
|
|
282
264
|
camera.current.lookAt(x, y, z);
|
|
283
265
|
renderer.current.render(scene.current, camera.current);
|
|
284
|
-
}, [THREE]);
|
|
266
|
+
}, [THREE]);
|
|
267
|
+
|
|
268
|
+
// Init 3D layer
|
|
285
269
|
|
|
286
270
|
React.useEffect(function () {
|
|
287
271
|
if (THREE !== null && hasMediaUrl && withSphere) {
|
|
288
272
|
var Scene = THREE.Scene,
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
273
|
+
PerspectiveCamera = THREE.PerspectiveCamera,
|
|
274
|
+
SphereBufferGeometry = THREE.SphereBufferGeometry,
|
|
275
|
+
MeshBasicMaterial = THREE.MeshBasicMaterial,
|
|
276
|
+
Mesh = THREE.Mesh,
|
|
277
|
+
WebGLRenderer = THREE.WebGLRenderer,
|
|
278
|
+
TextureLoader = THREE.TextureLoader;
|
|
295
279
|
var _canvasRef$current = canvasRef.current,
|
|
296
|
-
|
|
297
|
-
|
|
280
|
+
canvasWidth = _canvasRef$current.offsetWidth,
|
|
281
|
+
canvasHeight = _canvasRef$current.offsetHeight;
|
|
298
282
|
camera.current = new PerspectiveCamera(50, canvasWidth / canvasHeight, 1, 1100);
|
|
299
283
|
scene.current = new Scene();
|
|
300
284
|
var geometry = new SphereBufferGeometry(500, 60, 40, 0, Math.PI * 2, Math.PI / 3, Math.PI / 3);
|
|
@@ -312,7 +296,6 @@ var Image360Screen = function Image360Screen(_ref) {
|
|
|
312
296
|
renderer.current.setSize(canvasWidth, canvasHeight);
|
|
313
297
|
render3D();
|
|
314
298
|
}
|
|
315
|
-
|
|
316
299
|
return function () {
|
|
317
300
|
if (withSphere) {
|
|
318
301
|
camera.current = null;
|
|
@@ -323,7 +306,9 @@ var Image360Screen = function Image360Screen(_ref) {
|
|
|
323
306
|
}, [hasMediaUrl, withSphere, render3D, THREE]);
|
|
324
307
|
hooks.useAnimationFrame(render3D, {
|
|
325
308
|
disabled: !withSphere || THREE === null
|
|
326
|
-
});
|
|
309
|
+
});
|
|
310
|
+
|
|
311
|
+
// Resize 3D layer
|
|
327
312
|
|
|
328
313
|
React.useEffect(function () {
|
|
329
314
|
if (camera.current !== null && renderer.current !== null) {
|
|
@@ -331,8 +316,9 @@ var Image360Screen = function Image360Screen(_ref) {
|
|
|
331
316
|
camera.current.updateProjectionMatrix();
|
|
332
317
|
renderer.current.setSize(width, height);
|
|
333
318
|
}
|
|
334
|
-
}, [width, height]);
|
|
319
|
+
}, [width, height]);
|
|
335
320
|
|
|
321
|
+
// Pointer interaction
|
|
336
322
|
var togglePlayTimeout = React.useRef(null);
|
|
337
323
|
var onPointerDown = React.useCallback(function (e) {
|
|
338
324
|
pointerDown.current = true;
|
|
@@ -347,36 +333,30 @@ var Image360Screen = function Image360Screen(_ref) {
|
|
|
347
333
|
var onPointerMove = React.useCallback(function (e) {
|
|
348
334
|
if (pointerDown.current) {
|
|
349
335
|
var _ref5 = e || {},
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
336
|
+
_ref5$clientX = _ref5.clientX,
|
|
337
|
+
clientX = _ref5$clientX === void 0 ? null : _ref5$clientX,
|
|
338
|
+
_ref5$clientY = _ref5.clientY,
|
|
339
|
+
clientY = _ref5$clientY === void 0 ? null : _ref5$clientY;
|
|
355
340
|
var downDeltaX = pointerDownX.current - clientX;
|
|
356
341
|
var downDeltaY = pointerDownY.current - clientY;
|
|
357
342
|
lon.current = downDeltaX * 0.2 + pointerLon.current;
|
|
358
343
|
lat.current = downDeltaY * 0.2 + pointerLat.current;
|
|
359
|
-
|
|
360
344
|
var _ref6 = lastPointerClient.current || {},
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
345
|
+
_ref6$x = _ref6.x,
|
|
346
|
+
lastX = _ref6$x === void 0 ? clientX : _ref6$x,
|
|
347
|
+
_ref6$y = _ref6.y,
|
|
348
|
+
lastY = _ref6$y === void 0 ? clientY : _ref6$y;
|
|
366
349
|
var deltaX = Math.abs(lastX - clientX) || 0;
|
|
367
350
|
var deltaY = Math.abs(lastY - clientY) || 0;
|
|
368
351
|
pixelsMoved.current += deltaX + deltaY;
|
|
369
|
-
|
|
370
352
|
if (!pixelsMovedTracked.current && pixelsMoved.current > Math.min(width, height)) {
|
|
371
353
|
trackScreenEvent('drag_sphere');
|
|
372
354
|
pixelsMovedTracked.current = true;
|
|
373
355
|
}
|
|
374
|
-
|
|
375
356
|
lastPointerClient.current = {
|
|
376
357
|
x: clientX,
|
|
377
358
|
y: clientY
|
|
378
359
|
};
|
|
379
|
-
|
|
380
360
|
if (Math.abs(downDeltaX) > 3 || Math.abs(downDeltaY) > 3) {
|
|
381
361
|
if (togglePlayTimeout.current !== null) {
|
|
382
362
|
clearTimeout(togglePlayTimeout.current);
|
|
@@ -387,7 +367,6 @@ var Image360Screen = function Image360Screen(_ref) {
|
|
|
387
367
|
}, [width, height, trackScreenEvent]);
|
|
388
368
|
var onPointerUp = React.useCallback(function (e) {
|
|
389
369
|
var canvasContainer = canvasContainerRef.current;
|
|
390
|
-
|
|
391
370
|
if (pointerDown.current && canvasContainer !== null) {
|
|
392
371
|
var distX = Math.abs(pointerDownX.current - e.clientX);
|
|
393
372
|
var distY = Math.abs(pointerDownY.current - e.clientY);
|
|
@@ -395,15 +374,12 @@ var Image360Screen = function Image360Screen(_ref) {
|
|
|
395
374
|
var tapNextScreenWidthPercent = 0.5;
|
|
396
375
|
var canTapToNavigate = !landscape && togglePlayTimeout.current !== null;
|
|
397
376
|
var validNavigateTap = canTapToNavigate && distX < pixelsMovedTolerance && distY < pixelsMovedTolerance;
|
|
398
|
-
|
|
399
377
|
if (validNavigateTap) {
|
|
400
378
|
var _canvasContainer$getB = canvasContainer.getBoundingClientRect(),
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
379
|
+
_canvasContainer$getB2 = _canvasContainer$getB.left,
|
|
380
|
+
containerX = _canvasContainer$getB2 === void 0 ? 0 : _canvasContainer$getB2,
|
|
381
|
+
containerWidth = _canvasContainer$getB.width;
|
|
405
382
|
var hasTappedLeft = e.clientX - containerX < containerWidth * (1 - tapNextScreenWidthPercent);
|
|
406
|
-
|
|
407
383
|
if (hasTappedLeft) {
|
|
408
384
|
if (gotoPreviousScreen !== null) {
|
|
409
385
|
gotoPreviousScreen();
|
|
@@ -412,15 +388,15 @@ var Image360Screen = function Image360Screen(_ref) {
|
|
|
412
388
|
gotoNextScreen();
|
|
413
389
|
}
|
|
414
390
|
}
|
|
415
|
-
|
|
416
391
|
if (togglePlayTimeout.current !== null) {
|
|
417
392
|
clearTimeout(togglePlayTimeout.current);
|
|
418
393
|
togglePlayTimeout.current = null;
|
|
419
394
|
}
|
|
420
395
|
}
|
|
421
|
-
|
|
422
396
|
pointerDown.current = false;
|
|
423
|
-
}, [gotoPreviousScreen, gotoNextScreen, landscape]);
|
|
397
|
+
}, [gotoPreviousScreen, gotoNextScreen, landscape]);
|
|
398
|
+
|
|
399
|
+
// Building elements ------------------
|
|
424
400
|
|
|
425
401
|
var items = [/*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
|
|
426
402
|
key: "video",
|
|
@@ -521,26 +497,21 @@ var Image360Screen = function Image360Screen(_ref) {
|
|
|
521
497
|
className: styles.background
|
|
522
498
|
}) : null);
|
|
523
499
|
};
|
|
524
|
-
|
|
525
500
|
Image360Screen.propTypes = propTypes;
|
|
526
501
|
Image360Screen.defaultProps = defaultProps;
|
|
527
502
|
var Image360Screen$1 = /*#__PURE__*/React__default["default"].memo(Image360Screen);
|
|
528
503
|
|
|
529
504
|
var transform = function transform(newStory, _ref) {
|
|
530
505
|
var video = _ref.video;
|
|
531
|
-
|
|
532
506
|
var _ref2 = video || {},
|
|
533
|
-
|
|
534
|
-
|
|
535
|
-
|
|
507
|
+
_ref2$media = _ref2.media,
|
|
508
|
+
media = _ref2$media === void 0 ? null : _ref2$media;
|
|
536
509
|
var _Video = appleNews.Video(newStory, media),
|
|
537
|
-
|
|
538
|
-
|
|
539
|
-
|
|
510
|
+
titleStory = _Video.story,
|
|
511
|
+
titleComponent = _Video.component;
|
|
540
512
|
var _Container = appleNews.Container(titleStory, _toConsumableArray__default["default"](titleComponent ? [titleComponent] : [])),
|
|
541
|
-
|
|
542
|
-
|
|
543
|
-
|
|
513
|
+
containerStory = _Container.story,
|
|
514
|
+
containerComponent = _Container.component;
|
|
544
515
|
return _objectSpread__default["default"](_objectSpread__default["default"]({}, containerStory), {}, {
|
|
545
516
|
components: [].concat(_toConsumableArray__default["default"](newStory.components || []), _toConsumableArray__default["default"](containerComponent ? [containerComponent] : []))
|
|
546
517
|
});
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@micromag/screen-image-360",
|
|
3
|
-
"version": "0.3.
|
|
3
|
+
"version": "0.3.318",
|
|
4
4
|
"description": "",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"javascript"
|
|
@@ -50,25 +50,25 @@
|
|
|
50
50
|
"dependencies": {
|
|
51
51
|
"@babel/runtime": "^7.13.10",
|
|
52
52
|
"@folklore/size": "^0.1.20",
|
|
53
|
-
"@micromag/core": "^0.3.
|
|
54
|
-
"@micromag/element-background": "^0.3.
|
|
55
|
-
"@micromag/element-call-to-action": "^0.3.
|
|
56
|
-
"@micromag/element-closed-captions": "^0.3.
|
|
57
|
-
"@micromag/element-container": "^0.3.
|
|
58
|
-
"@micromag/element-image": "^0.3.
|
|
59
|
-
"@micromag/element-media-controls": "^0.3.
|
|
60
|
-
"@micromag/element-video": "^0.3.
|
|
61
|
-
"@micromag/transforms": "^0.3.
|
|
53
|
+
"@micromag/core": "^0.3.318",
|
|
54
|
+
"@micromag/element-background": "^0.3.318",
|
|
55
|
+
"@micromag/element-call-to-action": "^0.3.318",
|
|
56
|
+
"@micromag/element-closed-captions": "^0.3.318",
|
|
57
|
+
"@micromag/element-container": "^0.3.318",
|
|
58
|
+
"@micromag/element-image": "^0.3.318",
|
|
59
|
+
"@micromag/element-media-controls": "^0.3.318",
|
|
60
|
+
"@micromag/element-video": "^0.3.318",
|
|
61
|
+
"@micromag/transforms": "^0.3.318",
|
|
62
62
|
"classnames": "^2.2.6",
|
|
63
63
|
"lodash": "^4.17.21",
|
|
64
64
|
"prop-types": "^15.7.2",
|
|
65
65
|
"react-intl": "^5.12.1",
|
|
66
66
|
"three": "^0.123.0",
|
|
67
|
-
"uuid": "^
|
|
67
|
+
"uuid": "^9.0.0",
|
|
68
68
|
"whatwg-fetch": "^3.6.1"
|
|
69
69
|
},
|
|
70
70
|
"publishConfig": {
|
|
71
71
|
"access": "public"
|
|
72
72
|
},
|
|
73
|
-
"gitHead": "
|
|
73
|
+
"gitHead": "7d1a296e0c0d410e1225279e1f19e3a7715bfa96"
|
|
74
74
|
}
|