@micromag/screen-image-360 0.3.148 → 0.3.153

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 +71 -70
  3. package/lib/index.js +70 -69
  4. package/package.json +11 -11
package/assets/css/styles.css CHANGED
@@ -1 +1 @@
1
- .micromag-screen-image-360-container .micromag-screen-image-360-canvasButton{display:inline-block;position:relative;padding:0;border:0;background:rgba(0,0,0,0);color:inherit;font-family:inherit;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}.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-content,.micromag-screen-image-360-container .micromag-screen-image-360-placeholder,.micromag-screen-image-360-container .micromag-screen-image-360-video{position:absolute;top:0;left:0;width:100%;height:100%}.micromag-screen-image-360-container{position:relative;width:100%;height:100%;overflow:hidden}.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{position:relative;padding:6px}.micromag-screen-image-360-container .micromag-screen-image-360-empty{margin:5px auto;border:2px dashed #343434;color:#343434;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{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;height:100%}.micromag-screen-image-360-container .micromag-screen-image-360-bottomContent{position:absolute;bottom:0;width:100%}.micromag-screen-image-360-container.micromag-screen-image-360-showVideo .micromag-screen-image-360-video{visibility:visible}
1
+ .micromag-screen-image-360-container .micromag-screen-image-360-canvasButton{display:inline-block;position:relative;padding:0;border:0;background:rgba(0,0,0,0);color:inherit;font-family:inherit;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}.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-content,.micromag-screen-image-360-container .micromag-screen-image-360-placeholder,.micromag-screen-image-360-container .micromag-screen-image-360-video{position:absolute;top:0;left:0;width:100%;height:100%}.micromag-screen-image-360-container{position:relative;width:100%;height:100%;overflow:hidden}.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{position:relative;padding:6px}.micromag-screen-image-360-container .micromag-screen-image-360-empty{margin:5px auto;border:2px dashed #343434;color:#343434;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{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;height:100%}.micromag-screen-image-360-container .micromag-screen-image-360-callToAction{position:absolute;bottom:0;left:0;width:100%}.micromag-screen-image-360-container.micromag-screen-image-360-showVideo .micromag-screen-image-360-video{visibility:visible}
package/es/index.js CHANGED
@@ -8,7 +8,7 @@ import React, { useState, useEffect, useRef, useCallback } from 'react';
8
8
  import 'whatwg-fetch';
9
9
  import { PropTypes as PropTypes$1 } from '@micromag/core';
10
10
  import { ScreenElement, PlaceholderVideo360, Transitions } from '@micromag/core/components';
11
- import { useScreenSize, useScreenRenderContext } from '@micromag/core/contexts';
11
+ import { useScreenRenderContext, useScreenSize, useViewerNavigation, useViewerWebView, useViewerContext, usePlaybackContext, usePlaybackMediaRef } from '@micromag/core/contexts';
12
12
  import { useTrackScreenEvent, useAnimationFrame } from '@micromag/core/hooks';
13
13
  import Background from '@micromag/element-background';
14
14
  import CallToAction from '@micromag/element-call-to-action';
@@ -18,8 +18,6 @@ import _objectSpread from '@babel/runtime/helpers/objectSpread2';
18
18
  import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
19
19
  import { Video, Container as Container$1 } from '@micromag/transforms/apple-news';
20
20
 
21
- var styles = {"container":"micromag-screen-image-360-container","canvasButton":"micromag-screen-image-360-canvasButton","canvas":"micromag-screen-image-360-canvas","content":"micromag-screen-image-360-content","placeholder":"micromag-screen-image-360-placeholder","video":"micromag-screen-image-360-video","disabled":"micromag-screen-image-360-disabled","hidden":"micromag-screen-image-360-hidden","empty":"micromag-screen-image-360-empty","videoContainer":"micromag-screen-image-360-videoContainer","mediaControls":"micromag-screen-image-360-mediaControls","bottomContent":"micromag-screen-image-360-bottomContent","showVideo":"micromag-screen-image-360-showVideo"};
22
-
23
21
  /**
24
22
  * Locale loader
25
23
  */
@@ -79,6 +77,8 @@ var useThree = function useThree() {
79
77
  return loadedPackage;
80
78
  };
81
79
 
80
+ var styles = {"container":"micromag-screen-image-360-container","canvasButton":"micromag-screen-image-360-canvasButton","canvas":"micromag-screen-image-360-canvas","content":"micromag-screen-image-360-content","placeholder":"micromag-screen-image-360-placeholder","video":"micromag-screen-image-360-video","disabled":"micromag-screen-image-360-disabled","hidden":"micromag-screen-image-360-hidden","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
+
82
82
  var propTypes = {
83
83
  layout: PropTypes.oneOf(['full']),
84
84
  image: PropTypes$1.imageMedia,
@@ -87,12 +87,8 @@ var propTypes = {
87
87
  current: PropTypes.bool,
88
88
  active: PropTypes.bool,
89
89
  transitions: PropTypes$1.transitions,
90
- onPrevious: PropTypes.func,
91
- onNext: PropTypes.func,
92
90
  type: PropTypes.string,
93
91
  spacing: PropTypes.number,
94
- enableInteraction: PropTypes.func,
95
- disableInteraction: PropTypes.func,
96
92
  className: PropTypes.string
97
93
  };
98
94
  var defaultProps = {
@@ -103,17 +99,13 @@ var defaultProps = {
103
99
  current: true,
104
100
  active: true,
105
101
  transitions: null,
106
- onPrevious: null,
107
- onNext: null,
108
102
  type: null,
109
103
  spacing: 20,
110
- enableInteraction: null,
111
- disableInteraction: null,
112
104
  className: null
113
105
  };
114
106
 
115
107
  var Image360Screen = function Image360Screen(_ref) {
116
- var _ref6;
108
+ var _ref7;
117
109
 
118
110
  _ref.layout;
119
111
  var image = _ref.image,
@@ -122,22 +114,12 @@ var Image360Screen = function Image360Screen(_ref) {
122
114
  current = _ref.current,
123
115
  active = _ref.active,
124
116
  transitions = _ref.transitions,
125
- onPrevious = _ref.onPrevious,
126
- onNext = _ref.onNext,
127
117
  type = _ref.type,
128
118
  spacing = _ref.spacing,
129
- enableInteraction = _ref.enableInteraction,
130
- disableInteraction = _ref.disableInteraction,
131
119
  className = _ref.className;
132
120
  var THREE = useThree();
133
121
  var trackScreenEvent = useTrackScreenEvent(type);
134
122
 
135
- var _useScreenSize = useScreenSize(),
136
- width = _useScreenSize.width,
137
- height = _useScreenSize.height,
138
- landscape = _useScreenSize.landscape,
139
- resolution = _useScreenSize.resolution;
140
-
141
123
  var _useScreenRenderConte = useScreenRenderContext(),
142
124
  isView = _useScreenRenderConte.isView,
143
125
  isPreview = _useScreenRenderConte.isPreview,
@@ -146,12 +128,37 @@ var Image360Screen = function Image360Screen(_ref) {
146
128
  isStatic = _useScreenRenderConte.isStatic,
147
129
  isCapture = _useScreenRenderConte.isCapture;
148
130
 
131
+ var _useScreenSize = useScreenSize(),
132
+ width = _useScreenSize.width,
133
+ height = _useScreenSize.height,
134
+ landscape = _useScreenSize.landscape,
135
+ resolution = _useScreenSize.resolution;
136
+
137
+ var _useViewerNavigation = useViewerNavigation(),
138
+ gotoPreviousScreen = _useViewerNavigation.gotoPreviousScreen,
139
+ gotoNextScreen = _useViewerNavigation.gotoNextScreen;
140
+
141
+ var _useViewerWebView = useViewerWebView(),
142
+ openWebView = _useViewerWebView.open;
143
+
144
+ var _useViewerContext = useViewerContext(),
145
+ viewerBottomHeight = _useViewerContext.bottomHeight,
146
+ viewerBottomSidesWidth = _useViewerContext.bottomSidesWidth;
147
+
148
+ var _usePlaybackContext = usePlaybackContext(),
149
+ muted = _usePlaybackContext.muted;
150
+
151
+ var mediaRef = usePlaybackMediaRef(current);
149
152
  var backgroundPlaying = current && (isView || isEdit);
150
153
  var mediaShouldLoad = current || active;
151
154
  var canvasContainerRef = useRef(); // ------------------------------------
152
155
 
153
156
  var hasMedia = image !== null;
154
157
 
158
+ var _ref2 = callToAction || {},
159
+ _ref2$active = _ref2.active,
160
+ hasCallToAction = _ref2$active === void 0 ? false : _ref2$active;
161
+
155
162
  var _useState = useState(!hasMedia),
156
163
  _useState2 = _slicedToArray(_useState, 2),
157
164
  ready = _useState2[0],
@@ -160,21 +167,21 @@ var Image360Screen = function Image360Screen(_ref) {
160
167
  var transitionPlaying = current && ready;
161
168
  var transitionDisabled = isStatic || isCapture || isPlaceholder || isPreview || isEdit;
162
169
 
163
- var _ref2 = image || {},
164
- _ref2$metadata = _ref2.metadata,
165
- imageMetadata = _ref2$metadata === void 0 ? null : _ref2$metadata,
166
- _ref2$url = _ref2.url,
167
- imageUrl = _ref2$url === void 0 ? null : _ref2$url,
168
- _ref2$thumbnail_url = _ref2.thumbnail_url,
169
- thumbnailUrl = _ref2$thumbnail_url === void 0 ? null : _ref2$thumbnail_url;
170
+ var _ref3 = image || {},
171
+ _ref3$metadata = _ref3.metadata,
172
+ imageMetadata = _ref3$metadata === void 0 ? null : _ref3$metadata,
173
+ _ref3$url = _ref3.url,
174
+ imageUrl = _ref3$url === void 0 ? null : _ref3$url,
175
+ _ref3$thumbnail_url = _ref3.thumbnail_url,
176
+ thumbnailUrl = _ref3$thumbnail_url === void 0 ? null : _ref3$thumbnail_url;
170
177
 
171
178
  var hasMediaUrl = imageUrl !== null;
172
179
 
173
- var _ref3 = imageMetadata || {},
174
- _ref3$width = _ref3.width,
175
- imageWidth = _ref3$width === void 0 ? 0 : _ref3$width,
176
- _ref3$height = _ref3.height,
177
- imageHeight = _ref3$height === void 0 ? 0 : _ref3$height;
180
+ var _ref4 = imageMetadata || {},
181
+ _ref4$width = _ref4.width,
182
+ imageWidth = _ref4$width === void 0 ? 0 : _ref4$width,
183
+ _ref4$height = _ref4.height,
184
+ imageHeight = _ref4$height === void 0 ? 0 : _ref4$height;
178
185
 
179
186
  var hasThumbnail = thumbnailUrl !== null;
180
187
 
@@ -303,22 +310,22 @@ var Image360Screen = function Image360Screen(_ref) {
303
310
  var pixelsMovedTracked = useRef(false);
304
311
  var onPointerMove = useCallback(function (e) {
305
312
  if (pointerDown.current) {
306
- var _ref4 = e || {},
307
- _ref4$clientX = _ref4.clientX,
308
- clientX = _ref4$clientX === void 0 ? null : _ref4$clientX,
309
- _ref4$clientY = _ref4.clientY,
310
- clientY = _ref4$clientY === void 0 ? null : _ref4$clientY;
313
+ var _ref5 = e || {},
314
+ _ref5$clientX = _ref5.clientX,
315
+ clientX = _ref5$clientX === void 0 ? null : _ref5$clientX,
316
+ _ref5$clientY = _ref5.clientY,
317
+ clientY = _ref5$clientY === void 0 ? null : _ref5$clientY;
311
318
 
312
319
  var downDeltaX = pointerDownX.current - clientX;
313
320
  var downDeltaY = pointerDownY.current - clientY;
314
321
  lon.current = downDeltaX * 0.2 + pointerLon.current;
315
322
  lat.current = downDeltaY * 0.2 + pointerLat.current;
316
323
 
317
- var _ref5 = lastPointerClient.current || {},
318
- _ref5$x = _ref5.x,
319
- lastX = _ref5$x === void 0 ? clientX : _ref5$x,
320
- _ref5$y = _ref5.y,
321
- lastY = _ref5$y === void 0 ? clientY : _ref5$y;
324
+ var _ref6 = lastPointerClient.current || {},
325
+ _ref6$x = _ref6.x,
326
+ lastX = _ref6$x === void 0 ? clientX : _ref6$x,
327
+ _ref6$y = _ref6.y,
328
+ lastY = _ref6$y === void 0 ? clientY : _ref6$y;
322
329
 
323
330
  var deltaX = Math.abs(lastX - clientX) || 0;
324
331
  var deltaY = Math.abs(lastY - clientY) || 0;
@@ -362,11 +369,11 @@ var Image360Screen = function Image360Screen(_ref) {
362
369
  var hasTappedLeft = e.clientX - containerX < containerWidth * (1 - tapNextScreenWidthPercent);
363
370
 
364
371
  if (hasTappedLeft) {
365
- if (onPrevious !== null) {
366
- onPrevious();
372
+ if (gotoPreviousScreen !== null) {
373
+ gotoPreviousScreen();
367
374
  }
368
- } else if (onNext !== null) {
369
- onNext();
375
+ } else if (gotoNextScreen !== null) {
376
+ gotoNextScreen();
370
377
  }
371
378
  }
372
379
 
@@ -377,8 +384,7 @@ var Image360Screen = function Image360Screen(_ref) {
377
384
  }
378
385
 
379
386
  pointerDown.current = false;
380
- }, [onPrevious, onNext, landscape]);
381
- var hasCallToAction = callToAction !== null && callToAction.active === true; // Building elements ------------------
387
+ }, [gotoPreviousScreen, gotoNextScreen, landscape]); // Building elements ------------------
382
388
 
383
389
  var items = [/*#__PURE__*/React.createElement(ScreenElement, {
384
390
  key: "video",
@@ -433,30 +439,23 @@ var Image360Screen = function Image360Screen(_ref) {
433
439
  height: resizedImageHeight,
434
440
  resolution: resolution,
435
441
  shouldLoad: mediaShouldLoad
436
- })))), !isPlaceholder ? /*#__PURE__*/React.createElement("div", {
437
- key: "bottom-content",
438
- className: styles.bottomContent
439
- }, /*#__PURE__*/React.createElement(Transitions, {
440
- playing: transitionPlaying,
441
- transitions: transitions,
442
- disabled: transitionDisabled
443
- }, hasCallToAction ? /*#__PURE__*/React.createElement("div", {
442
+ })))), !isPlaceholder && hasCallToAction ? /*#__PURE__*/React.createElement("div", {
443
+ key: "callToAction",
444
+ className: styles.callToAction,
444
445
  style: {
445
- marginTop: -spacing / 2
446
+ transform: !isPreview ? "translate(0, -".concat(viewerBottomHeight, "px)") : null,
447
+ paddingLeft: Math.max(spacing / 2, viewerBottomSidesWidth),
448
+ paddingRight: Math.max(spacing / 2, viewerBottomSidesWidth),
449
+ paddingBottom: spacing / 2,
450
+ paddingTop: 0
446
451
  }
447
- }, /*#__PURE__*/React.createElement(CallToAction, {
448
- callToAction: callToAction,
452
+ }, /*#__PURE__*/React.createElement(CallToAction, Object.assign({}, callToAction, {
449
453
  animationDisabled: isPreview,
450
454
  focusable: current && isView,
451
- screenSize: {
452
- width: width,
453
- height: height
454
- },
455
- enableInteraction: enableInteraction,
456
- disableInteraction: disableInteraction
457
- })) : null)) : null];
455
+ openWebView: openWebView
456
+ }))) : null];
458
457
  return /*#__PURE__*/React.createElement("div", {
459
- className: classNames([styles.container, (_ref6 = {}, _defineProperty(_ref6, className, className !== null), _defineProperty(_ref6, styles.showVideo, isPreview || isStatic || isCapture), _ref6)]),
458
+ className: classNames([styles.container, (_ref7 = {}, _defineProperty(_ref7, className, className !== null), _defineProperty(_ref7, styles.showVideo, isPreview || isStatic || isCapture), _ref7)]),
460
459
  "data-screen-ready": (isStatic || isCapture) && posterReady || ready
461
460
  }, !isPlaceholder ? /*#__PURE__*/React.createElement(Background, {
462
461
  background: background,
@@ -464,7 +463,9 @@ var Image360Screen = function Image360Screen(_ref) {
464
463
  height: height,
465
464
  resolution: resolution,
466
465
  playing: backgroundPlaying,
467
- shouldLoad: mediaShouldLoad
466
+ muted: muted,
467
+ shouldLoad: mediaShouldLoad,
468
+ mediaRef: mediaRef
468
469
  }) : null, /*#__PURE__*/React.createElement(Container, {
469
470
  width: width,
470
471
  height: height
package/lib/index.js CHANGED
@@ -54,8 +54,6 @@ var Image__default = /*#__PURE__*/_interopDefaultLegacy(Image);
54
54
  var _objectSpread__default = /*#__PURE__*/_interopDefaultLegacy(_objectSpread);
55
55
  var _toConsumableArray__default = /*#__PURE__*/_interopDefaultLegacy(_toConsumableArray);
56
56
 
57
- var styles = {"container":"micromag-screen-image-360-container","canvasButton":"micromag-screen-image-360-canvasButton","canvas":"micromag-screen-image-360-canvas","content":"micromag-screen-image-360-content","placeholder":"micromag-screen-image-360-placeholder","video":"micromag-screen-image-360-video","disabled":"micromag-screen-image-360-disabled","hidden":"micromag-screen-image-360-hidden","empty":"micromag-screen-image-360-empty","videoContainer":"micromag-screen-image-360-videoContainer","mediaControls":"micromag-screen-image-360-mediaControls","bottomContent":"micromag-screen-image-360-bottomContent","showVideo":"micromag-screen-image-360-showVideo"};
58
-
59
57
  /**
60
58
  * Locale loader
61
59
  */
@@ -115,6 +113,8 @@ var useThree = function useThree() {
115
113
  return loadedPackage;
116
114
  };
117
115
 
116
+ var styles = {"container":"micromag-screen-image-360-container","canvasButton":"micromag-screen-image-360-canvasButton","canvas":"micromag-screen-image-360-canvas","content":"micromag-screen-image-360-content","placeholder":"micromag-screen-image-360-placeholder","video":"micromag-screen-image-360-video","disabled":"micromag-screen-image-360-disabled","hidden":"micromag-screen-image-360-hidden","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
+
118
118
  var propTypes = {
119
119
  layout: PropTypes__default["default"].oneOf(['full']),
120
120
  image: core.PropTypes.imageMedia,
@@ -123,12 +123,8 @@ var propTypes = {
123
123
  current: PropTypes__default["default"].bool,
124
124
  active: PropTypes__default["default"].bool,
125
125
  transitions: core.PropTypes.transitions,
126
- onPrevious: PropTypes__default["default"].func,
127
- onNext: PropTypes__default["default"].func,
128
126
  type: PropTypes__default["default"].string,
129
127
  spacing: PropTypes__default["default"].number,
130
- enableInteraction: PropTypes__default["default"].func,
131
- disableInteraction: PropTypes__default["default"].func,
132
128
  className: PropTypes__default["default"].string
133
129
  };
134
130
  var defaultProps = {
@@ -139,17 +135,13 @@ var defaultProps = {
139
135
  current: true,
140
136
  active: true,
141
137
  transitions: null,
142
- onPrevious: null,
143
- onNext: null,
144
138
  type: null,
145
139
  spacing: 20,
146
- enableInteraction: null,
147
- disableInteraction: null,
148
140
  className: null
149
141
  };
150
142
 
151
143
  var Image360Screen = function Image360Screen(_ref) {
152
- var _ref6;
144
+ var _ref7;
153
145
 
154
146
  _ref.layout;
155
147
  var image = _ref.image,
@@ -158,22 +150,12 @@ var Image360Screen = function Image360Screen(_ref) {
158
150
  current = _ref.current,
159
151
  active = _ref.active,
160
152
  transitions = _ref.transitions,
161
- onPrevious = _ref.onPrevious,
162
- onNext = _ref.onNext,
163
153
  type = _ref.type,
164
154
  spacing = _ref.spacing,
165
- enableInteraction = _ref.enableInteraction,
166
- disableInteraction = _ref.disableInteraction,
167
155
  className = _ref.className;
168
156
  var THREE = useThree();
169
157
  var trackScreenEvent = hooks.useTrackScreenEvent(type);
170
158
 
171
- var _useScreenSize = contexts.useScreenSize(),
172
- width = _useScreenSize.width,
173
- height = _useScreenSize.height,
174
- landscape = _useScreenSize.landscape,
175
- resolution = _useScreenSize.resolution;
176
-
177
159
  var _useScreenRenderConte = contexts.useScreenRenderContext(),
178
160
  isView = _useScreenRenderConte.isView,
179
161
  isPreview = _useScreenRenderConte.isPreview,
@@ -182,12 +164,37 @@ var Image360Screen = function Image360Screen(_ref) {
182
164
  isStatic = _useScreenRenderConte.isStatic,
183
165
  isCapture = _useScreenRenderConte.isCapture;
184
166
 
167
+ var _useScreenSize = contexts.useScreenSize(),
168
+ width = _useScreenSize.width,
169
+ height = _useScreenSize.height,
170
+ landscape = _useScreenSize.landscape,
171
+ resolution = _useScreenSize.resolution;
172
+
173
+ var _useViewerNavigation = contexts.useViewerNavigation(),
174
+ gotoPreviousScreen = _useViewerNavigation.gotoPreviousScreen,
175
+ gotoNextScreen = _useViewerNavigation.gotoNextScreen;
176
+
177
+ var _useViewerWebView = contexts.useViewerWebView(),
178
+ openWebView = _useViewerWebView.open;
179
+
180
+ var _useViewerContext = contexts.useViewerContext(),
181
+ viewerBottomHeight = _useViewerContext.bottomHeight,
182
+ viewerBottomSidesWidth = _useViewerContext.bottomSidesWidth;
183
+
184
+ var _usePlaybackContext = contexts.usePlaybackContext(),
185
+ muted = _usePlaybackContext.muted;
186
+
187
+ var mediaRef = contexts.usePlaybackMediaRef(current);
185
188
  var backgroundPlaying = current && (isView || isEdit);
186
189
  var mediaShouldLoad = current || active;
187
190
  var canvasContainerRef = React.useRef(); // ------------------------------------
188
191
 
189
192
  var hasMedia = image !== null;
190
193
 
194
+ var _ref2 = callToAction || {},
195
+ _ref2$active = _ref2.active,
196
+ hasCallToAction = _ref2$active === void 0 ? false : _ref2$active;
197
+
191
198
  var _useState = React.useState(!hasMedia),
192
199
  _useState2 = _slicedToArray__default["default"](_useState, 2),
193
200
  ready = _useState2[0],
@@ -196,21 +203,21 @@ var Image360Screen = function Image360Screen(_ref) {
196
203
  var transitionPlaying = current && ready;
197
204
  var transitionDisabled = isStatic || isCapture || isPlaceholder || isPreview || isEdit;
198
205
 
199
- var _ref2 = image || {},
200
- _ref2$metadata = _ref2.metadata,
201
- imageMetadata = _ref2$metadata === void 0 ? null : _ref2$metadata,
202
- _ref2$url = _ref2.url,
203
- imageUrl = _ref2$url === void 0 ? null : _ref2$url,
204
- _ref2$thumbnail_url = _ref2.thumbnail_url,
205
- thumbnailUrl = _ref2$thumbnail_url === void 0 ? null : _ref2$thumbnail_url;
206
+ var _ref3 = image || {},
207
+ _ref3$metadata = _ref3.metadata,
208
+ imageMetadata = _ref3$metadata === void 0 ? null : _ref3$metadata,
209
+ _ref3$url = _ref3.url,
210
+ imageUrl = _ref3$url === void 0 ? null : _ref3$url,
211
+ _ref3$thumbnail_url = _ref3.thumbnail_url,
212
+ thumbnailUrl = _ref3$thumbnail_url === void 0 ? null : _ref3$thumbnail_url;
206
213
 
207
214
  var hasMediaUrl = imageUrl !== null;
208
215
 
209
- var _ref3 = imageMetadata || {},
210
- _ref3$width = _ref3.width,
211
- imageWidth = _ref3$width === void 0 ? 0 : _ref3$width,
212
- _ref3$height = _ref3.height,
213
- imageHeight = _ref3$height === void 0 ? 0 : _ref3$height;
216
+ var _ref4 = imageMetadata || {},
217
+ _ref4$width = _ref4.width,
218
+ imageWidth = _ref4$width === void 0 ? 0 : _ref4$width,
219
+ _ref4$height = _ref4.height,
220
+ imageHeight = _ref4$height === void 0 ? 0 : _ref4$height;
214
221
 
215
222
  var hasThumbnail = thumbnailUrl !== null;
216
223
 
@@ -339,22 +346,22 @@ var Image360Screen = function Image360Screen(_ref) {
339
346
  var pixelsMovedTracked = React.useRef(false);
340
347
  var onPointerMove = React.useCallback(function (e) {
341
348
  if (pointerDown.current) {
342
- var _ref4 = e || {},
343
- _ref4$clientX = _ref4.clientX,
344
- clientX = _ref4$clientX === void 0 ? null : _ref4$clientX,
345
- _ref4$clientY = _ref4.clientY,
346
- clientY = _ref4$clientY === void 0 ? null : _ref4$clientY;
349
+ var _ref5 = e || {},
350
+ _ref5$clientX = _ref5.clientX,
351
+ clientX = _ref5$clientX === void 0 ? null : _ref5$clientX,
352
+ _ref5$clientY = _ref5.clientY,
353
+ clientY = _ref5$clientY === void 0 ? null : _ref5$clientY;
347
354
 
348
355
  var downDeltaX = pointerDownX.current - clientX;
349
356
  var downDeltaY = pointerDownY.current - clientY;
350
357
  lon.current = downDeltaX * 0.2 + pointerLon.current;
351
358
  lat.current = downDeltaY * 0.2 + pointerLat.current;
352
359
 
353
- var _ref5 = lastPointerClient.current || {},
354
- _ref5$x = _ref5.x,
355
- lastX = _ref5$x === void 0 ? clientX : _ref5$x,
356
- _ref5$y = _ref5.y,
357
- lastY = _ref5$y === void 0 ? clientY : _ref5$y;
360
+ var _ref6 = lastPointerClient.current || {},
361
+ _ref6$x = _ref6.x,
362
+ lastX = _ref6$x === void 0 ? clientX : _ref6$x,
363
+ _ref6$y = _ref6.y,
364
+ lastY = _ref6$y === void 0 ? clientY : _ref6$y;
358
365
 
359
366
  var deltaX = Math.abs(lastX - clientX) || 0;
360
367
  var deltaY = Math.abs(lastY - clientY) || 0;
@@ -398,11 +405,11 @@ var Image360Screen = function Image360Screen(_ref) {
398
405
  var hasTappedLeft = e.clientX - containerX < containerWidth * (1 - tapNextScreenWidthPercent);
399
406
 
400
407
  if (hasTappedLeft) {
401
- if (onPrevious !== null) {
402
- onPrevious();
408
+ if (gotoPreviousScreen !== null) {
409
+ gotoPreviousScreen();
403
410
  }
404
- } else if (onNext !== null) {
405
- onNext();
411
+ } else if (gotoNextScreen !== null) {
412
+ gotoNextScreen();
406
413
  }
407
414
  }
408
415
 
@@ -413,8 +420,7 @@ var Image360Screen = function Image360Screen(_ref) {
413
420
  }
414
421
 
415
422
  pointerDown.current = false;
416
- }, [onPrevious, onNext, landscape]);
417
- var hasCallToAction = callToAction !== null && callToAction.active === true; // Building elements ------------------
423
+ }, [gotoPreviousScreen, gotoNextScreen, landscape]); // Building elements ------------------
418
424
 
419
425
  var items = [/*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
420
426
  key: "video",
@@ -469,30 +475,23 @@ var Image360Screen = function Image360Screen(_ref) {
469
475
  height: resizedImageHeight,
470
476
  resolution: resolution,
471
477
  shouldLoad: mediaShouldLoad
472
- })))), !isPlaceholder ? /*#__PURE__*/React__default["default"].createElement("div", {
473
- key: "bottom-content",
474
- className: styles.bottomContent
475
- }, /*#__PURE__*/React__default["default"].createElement(components.Transitions, {
476
- playing: transitionPlaying,
477
- transitions: transitions,
478
- disabled: transitionDisabled
479
- }, hasCallToAction ? /*#__PURE__*/React__default["default"].createElement("div", {
478
+ })))), !isPlaceholder && hasCallToAction ? /*#__PURE__*/React__default["default"].createElement("div", {
479
+ key: "callToAction",
480
+ className: styles.callToAction,
480
481
  style: {
481
- marginTop: -spacing / 2
482
+ transform: !isPreview ? "translate(0, -".concat(viewerBottomHeight, "px)") : null,
483
+ paddingLeft: Math.max(spacing / 2, viewerBottomSidesWidth),
484
+ paddingRight: Math.max(spacing / 2, viewerBottomSidesWidth),
485
+ paddingBottom: spacing / 2,
486
+ paddingTop: 0
482
487
  }
483
- }, /*#__PURE__*/React__default["default"].createElement(CallToAction__default["default"], {
484
- callToAction: callToAction,
488
+ }, /*#__PURE__*/React__default["default"].createElement(CallToAction__default["default"], Object.assign({}, callToAction, {
485
489
  animationDisabled: isPreview,
486
490
  focusable: current && isView,
487
- screenSize: {
488
- width: width,
489
- height: height
490
- },
491
- enableInteraction: enableInteraction,
492
- disableInteraction: disableInteraction
493
- })) : null)) : null];
491
+ openWebView: openWebView
492
+ }))) : null];
494
493
  return /*#__PURE__*/React__default["default"].createElement("div", {
495
- className: classNames__default["default"]([styles.container, (_ref6 = {}, _defineProperty__default["default"](_ref6, className, className !== null), _defineProperty__default["default"](_ref6, styles.showVideo, isPreview || isStatic || isCapture), _ref6)]),
494
+ className: classNames__default["default"]([styles.container, (_ref7 = {}, _defineProperty__default["default"](_ref7, className, className !== null), _defineProperty__default["default"](_ref7, styles.showVideo, isPreview || isStatic || isCapture), _ref7)]),
496
495
  "data-screen-ready": (isStatic || isCapture) && posterReady || ready
497
496
  }, !isPlaceholder ? /*#__PURE__*/React__default["default"].createElement(Background__default["default"], {
498
497
  background: background,
@@ -500,7 +499,9 @@ var Image360Screen = function Image360Screen(_ref) {
500
499
  height: height,
501
500
  resolution: resolution,
502
501
  playing: backgroundPlaying,
503
- shouldLoad: mediaShouldLoad
502
+ muted: muted,
503
+ shouldLoad: mediaShouldLoad,
504
+ mediaRef: mediaRef
504
505
  }) : null, /*#__PURE__*/React__default["default"].createElement(Container__default["default"], {
505
506
  width: width,
506
507
  height: height
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@micromag/screen-image-360",
3
- "version": "0.3.148",
3
+ "version": "0.3.153",
4
4
  "description": "",
5
5
  "keywords": [
6
6
  "javascript"
@@ -50,15 +50,15 @@
50
50
  "dependencies": {
51
51
  "@babel/runtime": "^7.13.10",
52
52
  "@folklore/size": "^0.1.20",
53
- "@micromag/core": "^0.3.148",
54
- "@micromag/element-background": "^0.3.148",
55
- "@micromag/element-call-to-action": "^0.3.148",
56
- "@micromag/element-closed-captions": "^0.3.148",
57
- "@micromag/element-container": "^0.3.148",
58
- "@micromag/element-image": "^0.3.148",
59
- "@micromag/element-media-controls": "^0.3.148",
60
- "@micromag/element-video": "^0.3.148",
61
- "@micromag/transforms": "^0.3.148",
53
+ "@micromag/core": "^0.3.153",
54
+ "@micromag/element-background": "^0.3.153",
55
+ "@micromag/element-call-to-action": "^0.3.153",
56
+ "@micromag/element-closed-captions": "^0.3.153",
57
+ "@micromag/element-container": "^0.3.153",
58
+ "@micromag/element-image": "^0.3.153",
59
+ "@micromag/element-media-controls": "^0.3.153",
60
+ "@micromag/element-video": "^0.3.153",
61
+ "@micromag/transforms": "^0.3.153",
62
62
  "classnames": "^2.2.6",
63
63
  "lodash": "^4.17.21",
64
64
  "prop-types": "^15.7.2",
@@ -70,5 +70,5 @@
70
70
  "publishConfig": {
71
71
  "access": "public"
72
72
  },
73
- "gitHead": "b10cd7739e7de8595c26acc0e08d6e84220be17c"
73
+ "gitHead": "3832de24bc306639b162f9778b3250ce1d05b2aa"
74
74
  }