@micromag/screen-video-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 +144 -189
- package/lib/index.js +144 -189
- package/package.json +12 -12
package/assets/css/styles.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.micromag-screen-video-360-container .micromag-screen-video-360-canvasButton{
|
|
1
|
+
.micromag-screen-video-360-container .micromag-screen-video-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-video-360-container .micromag-screen-video-360-background,.micromag-screen-video-360-container .micromag-screen-video-360-canvas,.micromag-screen-video-360-container .micromag-screen-video-360-canvasButton,.micromag-screen-video-360-container .micromag-screen-video-360-inner,.micromag-screen-video-360-container .micromag-screen-video-360-placeholder,.micromag-screen-video-360-container .micromag-screen-video-360-video{height:100%;left:0;position:absolute;top:0;width:100%}.micromag-screen-video-360-container{height:100%;overflow:hidden;position:relative;width:100%}.micromag-screen-video-360-disabled.micromag-screen-video-360-container{overflow:hidden;pointer-events:none}.micromag-screen-video-360-hidden.micromag-screen-video-360-container{display:none;visibility:hidden}.micromag-screen-video-360-placeholder.micromag-screen-video-360-container .micromag-screen-video-360-content{padding:6px;position:relative}.micromag-screen-video-360-container .micromag-screen-video-360-empty{border:2px dashed #343434;color:#343434;margin:5px auto}.micromag-screen-video-360-container .micromag-screen-video-360-background{z-index:0}.micromag-screen-video-360-container .micromag-screen-video-360-content{z-index:1}.micromag-screen-video-360-container .micromag-screen-video-360-empty{height:100%;margin:0}.micromag-screen-video-360-container .micromag-screen-video-360-canvasButton{-ms-touch-action:none;touch-action:none}.micromag-screen-video-360-container .micromag-screen-video-360-videoContainer{position:absolute}.micromag-screen-video-360-container .micromag-screen-video-360-video{visibility:hidden}.micromag-screen-video-360-container .micromag-screen-video-360-video video{height:100%}.micromag-screen-video-360-container .micromag-screen-video-360-mediaControls{padding:10px 20px 20px}.micromag-screen-video-360-container .micromag-screen-video-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-video-360-container .micromag-screen-video-360-bottom{bottom:0;left:0;position:absolute;-webkit-transition:padding .2s ease-out,-webkit-transform .2s ease-out;transition:padding .2s ease-out,-webkit-transform .2s ease-out;-o-transition:transform .2s ease-out,padding .2s ease-out;transition:transform .2s ease-out,padding .2s ease-out;transition:transform .2s ease-out,padding .2s ease-out,-webkit-transform .2s ease-out;width:100%}.micromag-screen-video-360-container .micromag-screen-video-360-bottom>*{margin-bottom:10px}.micromag-screen-video-360-container .micromag-screen-video-360-bottom>:last-child{margin-bottom:0}.micromag-screen-video-360-container.micromag-screen-video-360-showVideo .micromag-screen-video-360-video{visibility:visible}
|
package/es/index.js
CHANGED
|
@@ -23,36 +23,31 @@ import { Video as Video$1, Container as Container$1 } from '@micromag/transforms
|
|
|
23
23
|
/**
|
|
24
24
|
* Locale loader
|
|
25
25
|
*/
|
|
26
|
-
|
|
27
26
|
var packageCache = null;
|
|
28
|
-
|
|
29
27
|
var useThree = function useThree() {
|
|
30
28
|
// transport
|
|
31
29
|
var _useState = useState({
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
30
|
+
"package": packageCache
|
|
31
|
+
}),
|
|
32
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
33
|
+
loadedPackage = _useState2[0]["package"],
|
|
34
|
+
setLoadedPackage = _useState2[1];
|
|
38
35
|
useEffect(function () {
|
|
39
36
|
var canceled = false;
|
|
40
|
-
|
|
41
37
|
if (loadedPackage !== null) {
|
|
42
38
|
return function () {
|
|
43
39
|
canceled = true;
|
|
44
40
|
};
|
|
45
41
|
}
|
|
46
|
-
|
|
47
42
|
import('three').then(function (_ref) {
|
|
48
43
|
var Scene = _ref.Scene,
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
44
|
+
PerspectiveCamera = _ref.PerspectiveCamera,
|
|
45
|
+
SphereBufferGeometry = _ref.SphereBufferGeometry,
|
|
46
|
+
VideoTexture = _ref.VideoTexture,
|
|
47
|
+
MeshBasicMaterial = _ref.MeshBasicMaterial,
|
|
48
|
+
Mesh = _ref.Mesh,
|
|
49
|
+
WebGLRenderer = _ref.WebGLRenderer,
|
|
50
|
+
MathUtils = _ref.MathUtils;
|
|
56
51
|
packageCache = {
|
|
57
52
|
Scene: Scene,
|
|
58
53
|
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-video-360-container","canvasButton":"micromag-screen-video-360-canvasButton","
|
|
74
|
+
var styles = {"container":"micromag-screen-video-360-container","canvasButton":"micromag-screen-video-360-canvasButton","placeholder":"micromag-screen-video-360-placeholder","inner":"micromag-screen-video-360-inner","canvas":"micromag-screen-video-360-canvas","video":"micromag-screen-video-360-video","background":"micromag-screen-video-360-background","disabled":"micromag-screen-video-360-disabled","hidden":"micromag-screen-video-360-hidden","content":"micromag-screen-video-360-content","empty":"micromag-screen-video-360-empty","videoContainer":"micromag-screen-video-360-videoContainer","mediaControls":"micromag-screen-video-360-mediaControls","bottom":"micromag-screen-video-360-bottom","showVideo":"micromag-screen-video-360-showVideo"};
|
|
81
75
|
|
|
82
76
|
var propTypes = {
|
|
83
77
|
layout: PropTypes.oneOf(['full']),
|
|
@@ -105,91 +99,77 @@ var defaultProps = {
|
|
|
105
99
|
mediaRef: null,
|
|
106
100
|
className: null
|
|
107
101
|
};
|
|
108
|
-
|
|
109
102
|
var Video360Screen = function Video360Screen(_ref) {
|
|
110
103
|
var _ref11;
|
|
111
|
-
|
|
112
104
|
_ref.layout;
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
105
|
+
var video = _ref.video,
|
|
106
|
+
background = _ref.background,
|
|
107
|
+
callToAction = _ref.callToAction,
|
|
108
|
+
current = _ref.current,
|
|
109
|
+
active = _ref.active,
|
|
110
|
+
transitions = _ref.transitions,
|
|
111
|
+
type = _ref.type,
|
|
112
|
+
spacing = _ref.spacing,
|
|
113
|
+
customMediaRef = _ref.mediaRef,
|
|
114
|
+
className = _ref.className;
|
|
123
115
|
var THREE = useThree();
|
|
124
116
|
var trackScreenEvent = useTrackScreenEvent(type);
|
|
125
117
|
var trackScreenMedia = useTrackScreenMedia('video_360');
|
|
126
|
-
|
|
127
118
|
var _useViewerInteraction = useViewerInteraction(),
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
119
|
+
enableInteraction = _useViewerInteraction.enableInteraction,
|
|
120
|
+
disableInteraction = _useViewerInteraction.disableInteraction;
|
|
131
121
|
var _useViewerNavigation = useViewerNavigation(),
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
122
|
+
gotoPreviousScreen = _useViewerNavigation.gotoPreviousScreen,
|
|
123
|
+
gotoNextScreen = _useViewerNavigation.gotoNextScreen;
|
|
135
124
|
var _useViewerContext = useViewerContext(),
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
125
|
+
viewerBottomHeight = _useViewerContext.bottomHeight,
|
|
126
|
+
viewerBottomSidesWidth = _useViewerContext.bottomSidesWidth;
|
|
139
127
|
var _useScreenSize = useScreenSize(),
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
128
|
+
width = _useScreenSize.width,
|
|
129
|
+
height = _useScreenSize.height,
|
|
130
|
+
landscape = _useScreenSize.landscape,
|
|
131
|
+
resolution = _useScreenSize.resolution;
|
|
145
132
|
var _useScreenRenderConte = useScreenRenderContext(),
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
133
|
+
isView = _useScreenRenderConte.isView,
|
|
134
|
+
isPreview = _useScreenRenderConte.isPreview,
|
|
135
|
+
isPlaceholder = _useScreenRenderConte.isPlaceholder,
|
|
136
|
+
isEdit = _useScreenRenderConte.isEdit,
|
|
137
|
+
isStatic = _useScreenRenderConte.isStatic,
|
|
138
|
+
isCapture = _useScreenRenderConte.isCapture;
|
|
153
139
|
var _useViewerWebView = useViewerWebView(),
|
|
154
|
-
|
|
155
|
-
|
|
140
|
+
openWebView = _useViewerWebView.open;
|
|
156
141
|
var backgroundPlaying = current && (isView || isEdit);
|
|
157
142
|
var mediaShouldLoad = current || active;
|
|
158
|
-
|
|
159
143
|
var _ref2 = video || {},
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
144
|
+
_ref2$media = _ref2.media,
|
|
145
|
+
videoMedia = _ref2$media === void 0 ? null : _ref2$media,
|
|
146
|
+
_ref2$closedCaptions = _ref2.closedCaptions,
|
|
147
|
+
closedCaptions = _ref2$closedCaptions === void 0 ? null : _ref2$closedCaptions,
|
|
148
|
+
_ref2$withSeekBar = _ref2.withSeekBar,
|
|
149
|
+
withSeekBar = _ref2$withSeekBar === void 0 ? false : _ref2$withSeekBar,
|
|
150
|
+
_ref2$withControls = _ref2.withControls,
|
|
151
|
+
withControls = _ref2$withControls === void 0 ? false : _ref2$withControls,
|
|
152
|
+
_ref2$autoPlay = _ref2.autoPlay,
|
|
153
|
+
autoPlay = _ref2$autoPlay === void 0 ? true : _ref2$autoPlay,
|
|
154
|
+
_ref2$color = _ref2.color,
|
|
155
|
+
color = _ref2$color === void 0 ? null : _ref2$color,
|
|
156
|
+
_ref2$progressColor = _ref2.progressColor,
|
|
157
|
+
progressColor = _ref2$progressColor === void 0 ? null : _ref2$progressColor;
|
|
175
158
|
var videoContainerRef = useRef();
|
|
176
|
-
|
|
177
159
|
var _usePlaybackContext = usePlaybackContext(),
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
160
|
+
playing = _usePlaybackContext.playing,
|
|
161
|
+
muted = _usePlaybackContext.muted,
|
|
162
|
+
setControls = _usePlaybackContext.setControls,
|
|
163
|
+
setControlsTheme = _usePlaybackContext.setControlsTheme,
|
|
164
|
+
setMedia = _usePlaybackContext.setMedia,
|
|
165
|
+
setPlaying = _usePlaybackContext.setPlaying,
|
|
166
|
+
showControls = _usePlaybackContext.showControls,
|
|
167
|
+
hideControls = _usePlaybackContext.hideControls;
|
|
187
168
|
var mediaRef = useRef(null);
|
|
188
169
|
useEffect(function () {
|
|
189
170
|
if (!current) {
|
|
190
171
|
return function () {};
|
|
191
172
|
}
|
|
192
|
-
|
|
193
173
|
if (withControls || withSeekBar) {
|
|
194
174
|
setControls(true);
|
|
195
175
|
setControlsTheme({
|
|
@@ -200,7 +180,6 @@ var Video360Screen = function Video360Screen(_ref) {
|
|
|
200
180
|
} else {
|
|
201
181
|
setControls(false);
|
|
202
182
|
}
|
|
203
|
-
|
|
204
183
|
return function () {
|
|
205
184
|
if (withControls || withSeekBar) {
|
|
206
185
|
setControls(false);
|
|
@@ -211,7 +190,6 @@ var Video360Screen = function Video360Screen(_ref) {
|
|
|
211
190
|
if (!current) {
|
|
212
191
|
return function () {};
|
|
213
192
|
}
|
|
214
|
-
|
|
215
193
|
setMedia(mediaRef.current);
|
|
216
194
|
return function () {
|
|
217
195
|
setMedia(null);
|
|
@@ -228,14 +206,12 @@ var Video360Screen = function Video360Screen(_ref) {
|
|
|
228
206
|
}
|
|
229
207
|
}, [current, autoPlay]);
|
|
230
208
|
var viewerContainer = useViewerContainer();
|
|
231
|
-
|
|
232
209
|
var _useActivityDetector = useActivityDetector({
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
210
|
+
element: viewerContainer,
|
|
211
|
+
disabled: !isView,
|
|
212
|
+
timeout: 2000
|
|
213
|
+
}),
|
|
214
|
+
activityDetected = _useActivityDetector.detected;
|
|
239
215
|
var toggleControlsVisibility = useCallback(function () {
|
|
240
216
|
if (activityDetected) {
|
|
241
217
|
showControls();
|
|
@@ -244,17 +220,14 @@ var Video360Screen = function Video360Screen(_ref) {
|
|
|
244
220
|
}
|
|
245
221
|
}, [activityDetected, showControls, hideControls]);
|
|
246
222
|
useDebounce(toggleControlsVisibility, activityDetected, 1000);
|
|
247
|
-
|
|
248
223
|
var _useState = useState(null),
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
224
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
225
|
+
currentTime = _useState2[0],
|
|
226
|
+
setCurrentTime = _useState2[1];
|
|
253
227
|
var _useState3 = useState(null),
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
228
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
229
|
+
duration = _useState4[0],
|
|
230
|
+
setDuration = _useState4[1];
|
|
258
231
|
var onTimeUpdate = useCallback(function (time) {
|
|
259
232
|
setCurrentTime(time);
|
|
260
233
|
}, [setDuration, duration]);
|
|
@@ -281,57 +254,47 @@ var Video360Screen = function Video360Screen(_ref) {
|
|
|
281
254
|
if (current) {
|
|
282
255
|
setPlaying(false);
|
|
283
256
|
}
|
|
284
|
-
}, [current, setPlaying]);
|
|
257
|
+
}, [current, setPlaying]);
|
|
285
258
|
|
|
286
|
-
|
|
259
|
+
// ------------------------------------
|
|
287
260
|
|
|
261
|
+
var hasVideo = video !== null;
|
|
288
262
|
var _useState5 = useState(!hasVideo),
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
263
|
+
_useState6 = _slicedToArray(_useState5, 2),
|
|
264
|
+
ready = _useState6[0],
|
|
265
|
+
setReady = _useState6[1];
|
|
293
266
|
var transitionPlaying = current && ready;
|
|
294
267
|
var transitionDisabled = isStatic || isCapture || isPlaceholder || isPreview || isEdit;
|
|
295
|
-
|
|
296
268
|
var _ref5 = callToAction || {},
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
269
|
+
_ref5$active = _ref5.active,
|
|
270
|
+
hasCallToAction = _ref5$active === void 0 ? false : _ref5$active;
|
|
300
271
|
var finalVideo = hasVideo ? _objectSpread(_objectSpread({}, video), {}, {
|
|
301
272
|
autoPlay: !isPreview && !isStatic && !isCapture && autoPlay && current
|
|
302
273
|
}) : null;
|
|
303
|
-
|
|
304
274
|
var _ref6 = videoMedia || {},
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
275
|
+
_ref6$metadata = _ref6.metadata,
|
|
276
|
+
videoMetadata = _ref6$metadata === void 0 ? null : _ref6$metadata,
|
|
277
|
+
_ref6$url = _ref6.url,
|
|
278
|
+
videoUrl = _ref6$url === void 0 ? null : _ref6$url,
|
|
279
|
+
_ref6$thumbnail_url = _ref6.thumbnail_url,
|
|
280
|
+
thumbnailUrl = _ref6$thumbnail_url === void 0 ? null : _ref6$thumbnail_url;
|
|
312
281
|
var hasVideoUrl = videoUrl !== null;
|
|
313
|
-
|
|
314
282
|
var _ref7 = videoMetadata || {},
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
283
|
+
_ref7$width = _ref7.width,
|
|
284
|
+
videoWidth = _ref7$width === void 0 ? 0 : _ref7$width,
|
|
285
|
+
_ref7$height = _ref7.height,
|
|
286
|
+
videoHeight = _ref7$height === void 0 ? 0 : _ref7$height;
|
|
320
287
|
var hasThumbnail = thumbnailUrl !== null;
|
|
321
|
-
|
|
322
288
|
var _useState7 = useState(!hasThumbnail),
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
289
|
+
_useState8 = _slicedToArray(_useState7, 2),
|
|
290
|
+
posterReady = _useState8[0],
|
|
291
|
+
setPosterReady = _useState8[1];
|
|
327
292
|
var withVideoSphere = hasVideoUrl && (isView || isEdit) && !isCapture && !isStatic;
|
|
328
|
-
|
|
329
293
|
var _getSizeWithinBounds = getSizeWithinBounds(videoWidth, videoHeight, width, height, {
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
294
|
+
cover: true
|
|
295
|
+
}),
|
|
296
|
+
resizedVideoWidth = _getSizeWithinBounds.width,
|
|
297
|
+
resizedVideoHeight = _getSizeWithinBounds.height;
|
|
335
298
|
var resizedVideoLeft = -(resizedVideoWidth - width) / 2;
|
|
336
299
|
var resizedVideoTop = -(resizedVideoHeight - height) / 2;
|
|
337
300
|
useEffect(function () {
|
|
@@ -345,7 +308,9 @@ var Video360Screen = function Video360Screen(_ref) {
|
|
|
345
308
|
}, [setReady]);
|
|
346
309
|
var onPosterLoaded = useCallback(function () {
|
|
347
310
|
setPosterReady(true);
|
|
348
|
-
}, [posterReady]);
|
|
311
|
+
}, [posterReady]);
|
|
312
|
+
|
|
313
|
+
// 3D layer --------------------------
|
|
349
314
|
|
|
350
315
|
var canvasRef = useRef(null);
|
|
351
316
|
var camera = useRef(null);
|
|
@@ -360,7 +325,9 @@ var Video360Screen = function Video360Screen(_ref) {
|
|
|
360
325
|
var pointerDownX = useRef(0);
|
|
361
326
|
var pointerDownY = useRef(0);
|
|
362
327
|
var pointerLon = useRef(0);
|
|
363
|
-
var pointerLat = useRef(0);
|
|
328
|
+
var pointerLat = useRef(0);
|
|
329
|
+
|
|
330
|
+
// render 3D frame
|
|
364
331
|
|
|
365
332
|
var render3D = useCallback(function () {
|
|
366
333
|
var MathUtils = THREE.MathUtils;
|
|
@@ -372,29 +339,29 @@ var Video360Screen = function Video360Screen(_ref) {
|
|
|
372
339
|
camera.current.position.z = distance.current * Math.sin(phi.current) * Math.sin(theta.current);
|
|
373
340
|
camera.current.lookAt(0, 0, 0);
|
|
374
341
|
renderer.current.render(scene.current, camera.current);
|
|
375
|
-
}, []);
|
|
342
|
+
}, []);
|
|
343
|
+
|
|
344
|
+
// Init 3D layer
|
|
376
345
|
|
|
377
346
|
useEffect(function () {
|
|
378
347
|
if (THREE !== null && hasVideoUrl && withVideoSphere) {
|
|
379
348
|
var Scene = THREE.Scene,
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
349
|
+
PerspectiveCamera = THREE.PerspectiveCamera,
|
|
350
|
+
SphereBufferGeometry = THREE.SphereBufferGeometry,
|
|
351
|
+
VideoTexture = THREE.VideoTexture,
|
|
352
|
+
MeshBasicMaterial = THREE.MeshBasicMaterial,
|
|
353
|
+
Mesh = THREE.Mesh,
|
|
354
|
+
WebGLRenderer = THREE.WebGLRenderer;
|
|
386
355
|
var _canvasRef$current = canvasRef.current,
|
|
387
|
-
|
|
388
|
-
|
|
356
|
+
canvasWidth = _canvasRef$current.offsetWidth,
|
|
357
|
+
canvasHeight = _canvasRef$current.offsetHeight;
|
|
389
358
|
camera.current = new PerspectiveCamera(75, canvasWidth / canvasHeight, 1, 1100);
|
|
390
359
|
scene.current = new Scene();
|
|
391
360
|
var geometry = new SphereBufferGeometry(500, 60, 40);
|
|
392
361
|
geometry.scale(-1, 1, 1);
|
|
393
|
-
|
|
394
362
|
var _ref8 = mediaRef || {},
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
363
|
+
_ref8$current = _ref8.current,
|
|
364
|
+
videoElement = _ref8$current === void 0 ? null : _ref8$current;
|
|
398
365
|
var videoTexture = new VideoTexture(videoElement);
|
|
399
366
|
var videoMaterial = new MeshBasicMaterial({
|
|
400
367
|
map: videoTexture
|
|
@@ -408,7 +375,6 @@ var Video360Screen = function Video360Screen(_ref) {
|
|
|
408
375
|
renderer.current.setSize(canvasWidth, canvasHeight);
|
|
409
376
|
render3D();
|
|
410
377
|
}
|
|
411
|
-
|
|
412
378
|
return function () {
|
|
413
379
|
if (withVideoSphere) {
|
|
414
380
|
camera.current = null;
|
|
@@ -419,7 +385,9 @@ var Video360Screen = function Video360Screen(_ref) {
|
|
|
419
385
|
}, [hasVideoUrl, withVideoSphere, render3D]);
|
|
420
386
|
useAnimationFrame(render3D, {
|
|
421
387
|
disabled: !withVideoSphere
|
|
422
|
-
});
|
|
388
|
+
});
|
|
389
|
+
|
|
390
|
+
// Resize 3D layer
|
|
423
391
|
|
|
424
392
|
useEffect(function () {
|
|
425
393
|
if (camera.current !== null && renderer.current !== null) {
|
|
@@ -427,15 +395,17 @@ var Video360Screen = function Video360Screen(_ref) {
|
|
|
427
395
|
camera.current.updateProjectionMatrix();
|
|
428
396
|
renderer.current.setSize(width, height);
|
|
429
397
|
}
|
|
430
|
-
}, [width, height]);
|
|
398
|
+
}, [width, height]);
|
|
431
399
|
|
|
400
|
+
// Pointer interaction
|
|
432
401
|
var togglePlayTimeout = useRef(null);
|
|
433
402
|
var onPointerDown = useCallback(function (e) {
|
|
434
403
|
pointerDown.current = true;
|
|
435
404
|
pointerDownX.current = e.clientX;
|
|
436
405
|
pointerDownY.current = e.clientY;
|
|
437
406
|
pointerLon.current = lon.current;
|
|
438
|
-
pointerLat.current = lat.current;
|
|
407
|
+
pointerLat.current = lat.current;
|
|
408
|
+
// if (togglePlayTimeout.current !== null) {
|
|
439
409
|
// clearTimeout(togglePlayTimeout.current);
|
|
440
410
|
// }
|
|
441
411
|
// togglePlayTimeout.current = setTimeout(() => {
|
|
@@ -451,36 +421,30 @@ var Video360Screen = function Video360Screen(_ref) {
|
|
|
451
421
|
var onPointerMove = useCallback(function (e) {
|
|
452
422
|
if (pointerDown.current) {
|
|
453
423
|
var _ref9 = e || {},
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
|
|
424
|
+
_ref9$clientX = _ref9.clientX,
|
|
425
|
+
clientX = _ref9$clientX === void 0 ? null : _ref9$clientX,
|
|
426
|
+
_ref9$clientY = _ref9.clientY,
|
|
427
|
+
clientY = _ref9$clientY === void 0 ? null : _ref9$clientY;
|
|
459
428
|
var downDeltaX = pointerDownX.current - clientX;
|
|
460
429
|
var downDeltaY = pointerDownY.current - clientY;
|
|
461
430
|
lon.current = downDeltaX * 0.2 + pointerLon.current;
|
|
462
431
|
lat.current = downDeltaY * 0.2 + pointerLat.current;
|
|
463
|
-
|
|
464
432
|
var _ref10 = lastPointerClient.current || {},
|
|
465
|
-
|
|
466
|
-
|
|
467
|
-
|
|
468
|
-
|
|
469
|
-
|
|
433
|
+
_ref10$x = _ref10.x,
|
|
434
|
+
lastX = _ref10$x === void 0 ? clientX : _ref10$x,
|
|
435
|
+
_ref10$y = _ref10.y,
|
|
436
|
+
lastY = _ref10$y === void 0 ? clientY : _ref10$y;
|
|
470
437
|
var deltaX = Math.abs(lastX - clientX) || 0;
|
|
471
438
|
var deltaY = Math.abs(lastY - clientY) || 0;
|
|
472
439
|
pixelsMoved.current += deltaX + deltaY;
|
|
473
|
-
|
|
474
440
|
if (!pixelsMovedTracked.current && pixelsMoved.current > Math.min(width, height)) {
|
|
475
441
|
trackScreenEvent('drag_sphere', video.name);
|
|
476
442
|
pixelsMovedTracked.current = true;
|
|
477
443
|
}
|
|
478
|
-
|
|
479
444
|
lastPointerClient.current = {
|
|
480
445
|
x: clientX,
|
|
481
446
|
y: clientY
|
|
482
447
|
};
|
|
483
|
-
|
|
484
448
|
if (Math.abs(downDeltaX) > 3 || Math.abs(downDeltaY) > 3) {
|
|
485
449
|
if (togglePlayTimeout.current !== null) {
|
|
486
450
|
clearTimeout(togglePlayTimeout.current);
|
|
@@ -491,7 +455,6 @@ var Video360Screen = function Video360Screen(_ref) {
|
|
|
491
455
|
}, [width, height, trackScreenEvent, video]);
|
|
492
456
|
var onPointerUp = useCallback(function (e) {
|
|
493
457
|
var videoContainer = videoContainerRef.current;
|
|
494
|
-
|
|
495
458
|
if (pointerDown.current && videoContainer !== null) {
|
|
496
459
|
var distX = Math.abs(pointerDownX.current - e.clientX);
|
|
497
460
|
var distY = Math.abs(pointerDownY.current - e.clientY);
|
|
@@ -499,15 +462,12 @@ var Video360Screen = function Video360Screen(_ref) {
|
|
|
499
462
|
var tapNextScreenWidthPercent = 0.5;
|
|
500
463
|
var canTapToNavigate = !landscape && togglePlayTimeout.current !== null;
|
|
501
464
|
var validNavigateTap = canTapToNavigate && distX < pixelsMovedTolerance && distY < pixelsMovedTolerance;
|
|
502
|
-
|
|
503
465
|
if (validNavigateTap) {
|
|
504
466
|
var _videoContainer$getBo = videoContainer.getBoundingClientRect(),
|
|
505
|
-
|
|
506
|
-
|
|
507
|
-
|
|
508
|
-
|
|
467
|
+
_videoContainer$getBo2 = _videoContainer$getBo.left,
|
|
468
|
+
containerX = _videoContainer$getBo2 === void 0 ? 0 : _videoContainer$getBo2,
|
|
469
|
+
containerWidth = _videoContainer$getBo.width;
|
|
509
470
|
var hasTappedLeft = e.clientX - containerX < containerWidth * (1 - tapNextScreenWidthPercent);
|
|
510
|
-
|
|
511
471
|
if (hasTappedLeft) {
|
|
512
472
|
if (gotoPreviousScreen !== null) {
|
|
513
473
|
gotoPreviousScreen();
|
|
@@ -516,15 +476,15 @@ var Video360Screen = function Video360Screen(_ref) {
|
|
|
516
476
|
gotoNextScreen();
|
|
517
477
|
}
|
|
518
478
|
}
|
|
519
|
-
|
|
520
479
|
if (togglePlayTimeout.current !== null) {
|
|
521
480
|
clearTimeout(togglePlayTimeout.current);
|
|
522
481
|
togglePlayTimeout.current = null;
|
|
523
482
|
}
|
|
524
483
|
}
|
|
525
|
-
|
|
526
484
|
pointerDown.current = false;
|
|
527
|
-
}, [gotoPreviousScreen, gotoNextScreen, landscape]);
|
|
485
|
+
}, [gotoPreviousScreen, gotoNextScreen, landscape]);
|
|
486
|
+
|
|
487
|
+
// Building elements ------------------
|
|
528
488
|
|
|
529
489
|
var items = [/*#__PURE__*/React.createElement(ScreenElement, {
|
|
530
490
|
key: "video",
|
|
@@ -650,26 +610,21 @@ var Video360Screen = function Video360Screen(_ref) {
|
|
|
650
610
|
className: styles.background
|
|
651
611
|
}) : null);
|
|
652
612
|
};
|
|
653
|
-
|
|
654
613
|
Video360Screen.propTypes = propTypes;
|
|
655
614
|
Video360Screen.defaultProps = defaultProps;
|
|
656
615
|
var Video360Screen$1 = /*#__PURE__*/React.memo(Video360Screen);
|
|
657
616
|
|
|
658
617
|
var transform = function transform(newStory, _ref) {
|
|
659
618
|
var video = _ref.video;
|
|
660
|
-
|
|
661
619
|
var _ref2 = video || {},
|
|
662
|
-
|
|
663
|
-
|
|
664
|
-
|
|
620
|
+
_ref2$media = _ref2.media,
|
|
621
|
+
media = _ref2$media === void 0 ? null : _ref2$media;
|
|
665
622
|
var _Video = Video$1(newStory, media),
|
|
666
|
-
|
|
667
|
-
|
|
668
|
-
|
|
623
|
+
titleStory = _Video.story,
|
|
624
|
+
titleComponent = _Video.component;
|
|
669
625
|
var _Container = Container$1(titleStory, _toConsumableArray(titleComponent ? [titleComponent] : [])),
|
|
670
|
-
|
|
671
|
-
|
|
672
|
-
|
|
626
|
+
containerStory = _Container.story,
|
|
627
|
+
containerComponent = _Container.component;
|
|
673
628
|
return _objectSpread(_objectSpread({}, containerStory), {}, {
|
|
674
629
|
components: [].concat(_toConsumableArray(newStory.components || []), _toConsumableArray(containerComponent ? [containerComponent] : []))
|
|
675
630
|
});
|
package/lib/index.js
CHANGED
|
@@ -61,36 +61,31 @@ var _toConsumableArray__default = /*#__PURE__*/_interopDefaultLegacy(_toConsumab
|
|
|
61
61
|
/**
|
|
62
62
|
* Locale loader
|
|
63
63
|
*/
|
|
64
|
-
|
|
65
64
|
var packageCache = null;
|
|
66
|
-
|
|
67
65
|
var useThree = function useThree() {
|
|
68
66
|
// transport
|
|
69
67
|
var _useState = React.useState({
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
68
|
+
"package": packageCache
|
|
69
|
+
}),
|
|
70
|
+
_useState2 = _slicedToArray__default["default"](_useState, 2),
|
|
71
|
+
loadedPackage = _useState2[0]["package"],
|
|
72
|
+
setLoadedPackage = _useState2[1];
|
|
76
73
|
React.useEffect(function () {
|
|
77
74
|
var canceled = false;
|
|
78
|
-
|
|
79
75
|
if (loadedPackage !== null) {
|
|
80
76
|
return function () {
|
|
81
77
|
canceled = true;
|
|
82
78
|
};
|
|
83
79
|
}
|
|
84
|
-
|
|
85
80
|
Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require('three')); }).then(function (_ref) {
|
|
86
81
|
var Scene = _ref.Scene,
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
82
|
+
PerspectiveCamera = _ref.PerspectiveCamera,
|
|
83
|
+
SphereBufferGeometry = _ref.SphereBufferGeometry,
|
|
84
|
+
VideoTexture = _ref.VideoTexture,
|
|
85
|
+
MeshBasicMaterial = _ref.MeshBasicMaterial,
|
|
86
|
+
Mesh = _ref.Mesh,
|
|
87
|
+
WebGLRenderer = _ref.WebGLRenderer,
|
|
88
|
+
MathUtils = _ref.MathUtils;
|
|
94
89
|
packageCache = {
|
|
95
90
|
Scene: Scene,
|
|
96
91
|
PerspectiveCamera: PerspectiveCamera,
|
|
@@ -101,7 +96,6 @@ var useThree = function useThree() {
|
|
|
101
96
|
WebGLRenderer: WebGLRenderer,
|
|
102
97
|
MathUtils: MathUtils
|
|
103
98
|
};
|
|
104
|
-
|
|
105
99
|
if (!canceled) {
|
|
106
100
|
setLoadedPackage({
|
|
107
101
|
"package": packageCache
|
|
@@ -115,7 +109,7 @@ var useThree = function useThree() {
|
|
|
115
109
|
return loadedPackage;
|
|
116
110
|
};
|
|
117
111
|
|
|
118
|
-
var styles = {"container":"micromag-screen-video-360-container","canvasButton":"micromag-screen-video-360-canvasButton","
|
|
112
|
+
var styles = {"container":"micromag-screen-video-360-container","canvasButton":"micromag-screen-video-360-canvasButton","placeholder":"micromag-screen-video-360-placeholder","inner":"micromag-screen-video-360-inner","canvas":"micromag-screen-video-360-canvas","video":"micromag-screen-video-360-video","background":"micromag-screen-video-360-background","disabled":"micromag-screen-video-360-disabled","hidden":"micromag-screen-video-360-hidden","content":"micromag-screen-video-360-content","empty":"micromag-screen-video-360-empty","videoContainer":"micromag-screen-video-360-videoContainer","mediaControls":"micromag-screen-video-360-mediaControls","bottom":"micromag-screen-video-360-bottom","showVideo":"micromag-screen-video-360-showVideo"};
|
|
119
113
|
|
|
120
114
|
var propTypes = {
|
|
121
115
|
layout: PropTypes__default["default"].oneOf(['full']),
|
|
@@ -143,91 +137,77 @@ var defaultProps = {
|
|
|
143
137
|
mediaRef: null,
|
|
144
138
|
className: null
|
|
145
139
|
};
|
|
146
|
-
|
|
147
140
|
var Video360Screen = function Video360Screen(_ref) {
|
|
148
141
|
var _ref11;
|
|
149
|
-
|
|
150
142
|
_ref.layout;
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
143
|
+
var video = _ref.video,
|
|
144
|
+
background = _ref.background,
|
|
145
|
+
callToAction = _ref.callToAction,
|
|
146
|
+
current = _ref.current,
|
|
147
|
+
active = _ref.active,
|
|
148
|
+
transitions = _ref.transitions,
|
|
149
|
+
type = _ref.type,
|
|
150
|
+
spacing = _ref.spacing,
|
|
151
|
+
customMediaRef = _ref.mediaRef,
|
|
152
|
+
className = _ref.className;
|
|
161
153
|
var THREE = useThree();
|
|
162
154
|
var trackScreenEvent = hooks.useTrackScreenEvent(type);
|
|
163
155
|
var trackScreenMedia = hooks.useTrackScreenMedia('video_360');
|
|
164
|
-
|
|
165
156
|
var _useViewerInteraction = contexts.useViewerInteraction(),
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
157
|
+
enableInteraction = _useViewerInteraction.enableInteraction,
|
|
158
|
+
disableInteraction = _useViewerInteraction.disableInteraction;
|
|
169
159
|
var _useViewerNavigation = contexts.useViewerNavigation(),
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
160
|
+
gotoPreviousScreen = _useViewerNavigation.gotoPreviousScreen,
|
|
161
|
+
gotoNextScreen = _useViewerNavigation.gotoNextScreen;
|
|
173
162
|
var _useViewerContext = contexts.useViewerContext(),
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
163
|
+
viewerBottomHeight = _useViewerContext.bottomHeight,
|
|
164
|
+
viewerBottomSidesWidth = _useViewerContext.bottomSidesWidth;
|
|
177
165
|
var _useScreenSize = contexts.useScreenSize(),
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
166
|
+
width = _useScreenSize.width,
|
|
167
|
+
height = _useScreenSize.height,
|
|
168
|
+
landscape = _useScreenSize.landscape,
|
|
169
|
+
resolution = _useScreenSize.resolution;
|
|
183
170
|
var _useScreenRenderConte = contexts.useScreenRenderContext(),
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
171
|
+
isView = _useScreenRenderConte.isView,
|
|
172
|
+
isPreview = _useScreenRenderConte.isPreview,
|
|
173
|
+
isPlaceholder = _useScreenRenderConte.isPlaceholder,
|
|
174
|
+
isEdit = _useScreenRenderConte.isEdit,
|
|
175
|
+
isStatic = _useScreenRenderConte.isStatic,
|
|
176
|
+
isCapture = _useScreenRenderConte.isCapture;
|
|
191
177
|
var _useViewerWebView = contexts.useViewerWebView(),
|
|
192
|
-
|
|
193
|
-
|
|
178
|
+
openWebView = _useViewerWebView.open;
|
|
194
179
|
var backgroundPlaying = current && (isView || isEdit);
|
|
195
180
|
var mediaShouldLoad = current || active;
|
|
196
|
-
|
|
197
181
|
var _ref2 = video || {},
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
182
|
+
_ref2$media = _ref2.media,
|
|
183
|
+
videoMedia = _ref2$media === void 0 ? null : _ref2$media,
|
|
184
|
+
_ref2$closedCaptions = _ref2.closedCaptions,
|
|
185
|
+
closedCaptions = _ref2$closedCaptions === void 0 ? null : _ref2$closedCaptions,
|
|
186
|
+
_ref2$withSeekBar = _ref2.withSeekBar,
|
|
187
|
+
withSeekBar = _ref2$withSeekBar === void 0 ? false : _ref2$withSeekBar,
|
|
188
|
+
_ref2$withControls = _ref2.withControls,
|
|
189
|
+
withControls = _ref2$withControls === void 0 ? false : _ref2$withControls,
|
|
190
|
+
_ref2$autoPlay = _ref2.autoPlay,
|
|
191
|
+
autoPlay = _ref2$autoPlay === void 0 ? true : _ref2$autoPlay,
|
|
192
|
+
_ref2$color = _ref2.color,
|
|
193
|
+
color = _ref2$color === void 0 ? null : _ref2$color,
|
|
194
|
+
_ref2$progressColor = _ref2.progressColor,
|
|
195
|
+
progressColor = _ref2$progressColor === void 0 ? null : _ref2$progressColor;
|
|
213
196
|
var videoContainerRef = React.useRef();
|
|
214
|
-
|
|
215
197
|
var _usePlaybackContext = contexts.usePlaybackContext(),
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
198
|
+
playing = _usePlaybackContext.playing,
|
|
199
|
+
muted = _usePlaybackContext.muted,
|
|
200
|
+
setControls = _usePlaybackContext.setControls,
|
|
201
|
+
setControlsTheme = _usePlaybackContext.setControlsTheme,
|
|
202
|
+
setMedia = _usePlaybackContext.setMedia,
|
|
203
|
+
setPlaying = _usePlaybackContext.setPlaying,
|
|
204
|
+
showControls = _usePlaybackContext.showControls,
|
|
205
|
+
hideControls = _usePlaybackContext.hideControls;
|
|
225
206
|
var mediaRef = React.useRef(null);
|
|
226
207
|
React.useEffect(function () {
|
|
227
208
|
if (!current) {
|
|
228
209
|
return function () {};
|
|
229
210
|
}
|
|
230
|
-
|
|
231
211
|
if (withControls || withSeekBar) {
|
|
232
212
|
setControls(true);
|
|
233
213
|
setControlsTheme({
|
|
@@ -238,7 +218,6 @@ var Video360Screen = function Video360Screen(_ref) {
|
|
|
238
218
|
} else {
|
|
239
219
|
setControls(false);
|
|
240
220
|
}
|
|
241
|
-
|
|
242
221
|
return function () {
|
|
243
222
|
if (withControls || withSeekBar) {
|
|
244
223
|
setControls(false);
|
|
@@ -249,7 +228,6 @@ var Video360Screen = function Video360Screen(_ref) {
|
|
|
249
228
|
if (!current) {
|
|
250
229
|
return function () {};
|
|
251
230
|
}
|
|
252
|
-
|
|
253
231
|
setMedia(mediaRef.current);
|
|
254
232
|
return function () {
|
|
255
233
|
setMedia(null);
|
|
@@ -266,14 +244,12 @@ var Video360Screen = function Video360Screen(_ref) {
|
|
|
266
244
|
}
|
|
267
245
|
}, [current, autoPlay]);
|
|
268
246
|
var viewerContainer = contexts.useViewerContainer();
|
|
269
|
-
|
|
270
247
|
var _useActivityDetector = hooks.useActivityDetector({
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
248
|
+
element: viewerContainer,
|
|
249
|
+
disabled: !isView,
|
|
250
|
+
timeout: 2000
|
|
251
|
+
}),
|
|
252
|
+
activityDetected = _useActivityDetector.detected;
|
|
277
253
|
var toggleControlsVisibility = React.useCallback(function () {
|
|
278
254
|
if (activityDetected) {
|
|
279
255
|
showControls();
|
|
@@ -282,17 +258,14 @@ var Video360Screen = function Video360Screen(_ref) {
|
|
|
282
258
|
}
|
|
283
259
|
}, [activityDetected, showControls, hideControls]);
|
|
284
260
|
hooks.useDebounce(toggleControlsVisibility, activityDetected, 1000);
|
|
285
|
-
|
|
286
261
|
var _useState = React.useState(null),
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
262
|
+
_useState2 = _slicedToArray__default["default"](_useState, 2),
|
|
263
|
+
currentTime = _useState2[0],
|
|
264
|
+
setCurrentTime = _useState2[1];
|
|
291
265
|
var _useState3 = React.useState(null),
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
266
|
+
_useState4 = _slicedToArray__default["default"](_useState3, 2),
|
|
267
|
+
duration = _useState4[0],
|
|
268
|
+
setDuration = _useState4[1];
|
|
296
269
|
var onTimeUpdate = React.useCallback(function (time) {
|
|
297
270
|
setCurrentTime(time);
|
|
298
271
|
}, [setDuration, duration]);
|
|
@@ -319,57 +292,47 @@ var Video360Screen = function Video360Screen(_ref) {
|
|
|
319
292
|
if (current) {
|
|
320
293
|
setPlaying(false);
|
|
321
294
|
}
|
|
322
|
-
}, [current, setPlaying]);
|
|
295
|
+
}, [current, setPlaying]);
|
|
323
296
|
|
|
324
|
-
|
|
297
|
+
// ------------------------------------
|
|
325
298
|
|
|
299
|
+
var hasVideo = video !== null;
|
|
326
300
|
var _useState5 = React.useState(!hasVideo),
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
301
|
+
_useState6 = _slicedToArray__default["default"](_useState5, 2),
|
|
302
|
+
ready = _useState6[0],
|
|
303
|
+
setReady = _useState6[1];
|
|
331
304
|
var transitionPlaying = current && ready;
|
|
332
305
|
var transitionDisabled = isStatic || isCapture || isPlaceholder || isPreview || isEdit;
|
|
333
|
-
|
|
334
306
|
var _ref5 = callToAction || {},
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
307
|
+
_ref5$active = _ref5.active,
|
|
308
|
+
hasCallToAction = _ref5$active === void 0 ? false : _ref5$active;
|
|
338
309
|
var finalVideo = hasVideo ? _objectSpread__default["default"](_objectSpread__default["default"]({}, video), {}, {
|
|
339
310
|
autoPlay: !isPreview && !isStatic && !isCapture && autoPlay && current
|
|
340
311
|
}) : null;
|
|
341
|
-
|
|
342
312
|
var _ref6 = videoMedia || {},
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
313
|
+
_ref6$metadata = _ref6.metadata,
|
|
314
|
+
videoMetadata = _ref6$metadata === void 0 ? null : _ref6$metadata,
|
|
315
|
+
_ref6$url = _ref6.url,
|
|
316
|
+
videoUrl = _ref6$url === void 0 ? null : _ref6$url,
|
|
317
|
+
_ref6$thumbnail_url = _ref6.thumbnail_url,
|
|
318
|
+
thumbnailUrl = _ref6$thumbnail_url === void 0 ? null : _ref6$thumbnail_url;
|
|
350
319
|
var hasVideoUrl = videoUrl !== null;
|
|
351
|
-
|
|
352
320
|
var _ref7 = videoMetadata || {},
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
321
|
+
_ref7$width = _ref7.width,
|
|
322
|
+
videoWidth = _ref7$width === void 0 ? 0 : _ref7$width,
|
|
323
|
+
_ref7$height = _ref7.height,
|
|
324
|
+
videoHeight = _ref7$height === void 0 ? 0 : _ref7$height;
|
|
358
325
|
var hasThumbnail = thumbnailUrl !== null;
|
|
359
|
-
|
|
360
326
|
var _useState7 = React.useState(!hasThumbnail),
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
327
|
+
_useState8 = _slicedToArray__default["default"](_useState7, 2),
|
|
328
|
+
posterReady = _useState8[0],
|
|
329
|
+
setPosterReady = _useState8[1];
|
|
365
330
|
var withVideoSphere = hasVideoUrl && (isView || isEdit) && !isCapture && !isStatic;
|
|
366
|
-
|
|
367
331
|
var _getSizeWithinBounds = size.getSizeWithinBounds(videoWidth, videoHeight, width, height, {
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
332
|
+
cover: true
|
|
333
|
+
}),
|
|
334
|
+
resizedVideoWidth = _getSizeWithinBounds.width,
|
|
335
|
+
resizedVideoHeight = _getSizeWithinBounds.height;
|
|
373
336
|
var resizedVideoLeft = -(resizedVideoWidth - width) / 2;
|
|
374
337
|
var resizedVideoTop = -(resizedVideoHeight - height) / 2;
|
|
375
338
|
React.useEffect(function () {
|
|
@@ -383,7 +346,9 @@ var Video360Screen = function Video360Screen(_ref) {
|
|
|
383
346
|
}, [setReady]);
|
|
384
347
|
var onPosterLoaded = React.useCallback(function () {
|
|
385
348
|
setPosterReady(true);
|
|
386
|
-
}, [posterReady]);
|
|
349
|
+
}, [posterReady]);
|
|
350
|
+
|
|
351
|
+
// 3D layer --------------------------
|
|
387
352
|
|
|
388
353
|
var canvasRef = React.useRef(null);
|
|
389
354
|
var camera = React.useRef(null);
|
|
@@ -398,7 +363,9 @@ var Video360Screen = function Video360Screen(_ref) {
|
|
|
398
363
|
var pointerDownX = React.useRef(0);
|
|
399
364
|
var pointerDownY = React.useRef(0);
|
|
400
365
|
var pointerLon = React.useRef(0);
|
|
401
|
-
var pointerLat = React.useRef(0);
|
|
366
|
+
var pointerLat = React.useRef(0);
|
|
367
|
+
|
|
368
|
+
// render 3D frame
|
|
402
369
|
|
|
403
370
|
var render3D = React.useCallback(function () {
|
|
404
371
|
var MathUtils = THREE.MathUtils;
|
|
@@ -410,29 +377,29 @@ var Video360Screen = function Video360Screen(_ref) {
|
|
|
410
377
|
camera.current.position.z = distance.current * Math.sin(phi.current) * Math.sin(theta.current);
|
|
411
378
|
camera.current.lookAt(0, 0, 0);
|
|
412
379
|
renderer.current.render(scene.current, camera.current);
|
|
413
|
-
}, []);
|
|
380
|
+
}, []);
|
|
381
|
+
|
|
382
|
+
// Init 3D layer
|
|
414
383
|
|
|
415
384
|
React.useEffect(function () {
|
|
416
385
|
if (THREE !== null && hasVideoUrl && withVideoSphere) {
|
|
417
386
|
var Scene = THREE.Scene,
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
387
|
+
PerspectiveCamera = THREE.PerspectiveCamera,
|
|
388
|
+
SphereBufferGeometry = THREE.SphereBufferGeometry,
|
|
389
|
+
VideoTexture = THREE.VideoTexture,
|
|
390
|
+
MeshBasicMaterial = THREE.MeshBasicMaterial,
|
|
391
|
+
Mesh = THREE.Mesh,
|
|
392
|
+
WebGLRenderer = THREE.WebGLRenderer;
|
|
424
393
|
var _canvasRef$current = canvasRef.current,
|
|
425
|
-
|
|
426
|
-
|
|
394
|
+
canvasWidth = _canvasRef$current.offsetWidth,
|
|
395
|
+
canvasHeight = _canvasRef$current.offsetHeight;
|
|
427
396
|
camera.current = new PerspectiveCamera(75, canvasWidth / canvasHeight, 1, 1100);
|
|
428
397
|
scene.current = new Scene();
|
|
429
398
|
var geometry = new SphereBufferGeometry(500, 60, 40);
|
|
430
399
|
geometry.scale(-1, 1, 1);
|
|
431
|
-
|
|
432
400
|
var _ref8 = mediaRef || {},
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
401
|
+
_ref8$current = _ref8.current,
|
|
402
|
+
videoElement = _ref8$current === void 0 ? null : _ref8$current;
|
|
436
403
|
var videoTexture = new VideoTexture(videoElement);
|
|
437
404
|
var videoMaterial = new MeshBasicMaterial({
|
|
438
405
|
map: videoTexture
|
|
@@ -446,7 +413,6 @@ var Video360Screen = function Video360Screen(_ref) {
|
|
|
446
413
|
renderer.current.setSize(canvasWidth, canvasHeight);
|
|
447
414
|
render3D();
|
|
448
415
|
}
|
|
449
|
-
|
|
450
416
|
return function () {
|
|
451
417
|
if (withVideoSphere) {
|
|
452
418
|
camera.current = null;
|
|
@@ -457,7 +423,9 @@ var Video360Screen = function Video360Screen(_ref) {
|
|
|
457
423
|
}, [hasVideoUrl, withVideoSphere, render3D]);
|
|
458
424
|
hooks.useAnimationFrame(render3D, {
|
|
459
425
|
disabled: !withVideoSphere
|
|
460
|
-
});
|
|
426
|
+
});
|
|
427
|
+
|
|
428
|
+
// Resize 3D layer
|
|
461
429
|
|
|
462
430
|
React.useEffect(function () {
|
|
463
431
|
if (camera.current !== null && renderer.current !== null) {
|
|
@@ -465,15 +433,17 @@ var Video360Screen = function Video360Screen(_ref) {
|
|
|
465
433
|
camera.current.updateProjectionMatrix();
|
|
466
434
|
renderer.current.setSize(width, height);
|
|
467
435
|
}
|
|
468
|
-
}, [width, height]);
|
|
436
|
+
}, [width, height]);
|
|
469
437
|
|
|
438
|
+
// Pointer interaction
|
|
470
439
|
var togglePlayTimeout = React.useRef(null);
|
|
471
440
|
var onPointerDown = React.useCallback(function (e) {
|
|
472
441
|
pointerDown.current = true;
|
|
473
442
|
pointerDownX.current = e.clientX;
|
|
474
443
|
pointerDownY.current = e.clientY;
|
|
475
444
|
pointerLon.current = lon.current;
|
|
476
|
-
pointerLat.current = lat.current;
|
|
445
|
+
pointerLat.current = lat.current;
|
|
446
|
+
// if (togglePlayTimeout.current !== null) {
|
|
477
447
|
// clearTimeout(togglePlayTimeout.current);
|
|
478
448
|
// }
|
|
479
449
|
// togglePlayTimeout.current = setTimeout(() => {
|
|
@@ -489,36 +459,30 @@ var Video360Screen = function Video360Screen(_ref) {
|
|
|
489
459
|
var onPointerMove = React.useCallback(function (e) {
|
|
490
460
|
if (pointerDown.current) {
|
|
491
461
|
var _ref9 = e || {},
|
|
492
|
-
|
|
493
|
-
|
|
494
|
-
|
|
495
|
-
|
|
496
|
-
|
|
462
|
+
_ref9$clientX = _ref9.clientX,
|
|
463
|
+
clientX = _ref9$clientX === void 0 ? null : _ref9$clientX,
|
|
464
|
+
_ref9$clientY = _ref9.clientY,
|
|
465
|
+
clientY = _ref9$clientY === void 0 ? null : _ref9$clientY;
|
|
497
466
|
var downDeltaX = pointerDownX.current - clientX;
|
|
498
467
|
var downDeltaY = pointerDownY.current - clientY;
|
|
499
468
|
lon.current = downDeltaX * 0.2 + pointerLon.current;
|
|
500
469
|
lat.current = downDeltaY * 0.2 + pointerLat.current;
|
|
501
|
-
|
|
502
470
|
var _ref10 = lastPointerClient.current || {},
|
|
503
|
-
|
|
504
|
-
|
|
505
|
-
|
|
506
|
-
|
|
507
|
-
|
|
471
|
+
_ref10$x = _ref10.x,
|
|
472
|
+
lastX = _ref10$x === void 0 ? clientX : _ref10$x,
|
|
473
|
+
_ref10$y = _ref10.y,
|
|
474
|
+
lastY = _ref10$y === void 0 ? clientY : _ref10$y;
|
|
508
475
|
var deltaX = Math.abs(lastX - clientX) || 0;
|
|
509
476
|
var deltaY = Math.abs(lastY - clientY) || 0;
|
|
510
477
|
pixelsMoved.current += deltaX + deltaY;
|
|
511
|
-
|
|
512
478
|
if (!pixelsMovedTracked.current && pixelsMoved.current > Math.min(width, height)) {
|
|
513
479
|
trackScreenEvent('drag_sphere', video.name);
|
|
514
480
|
pixelsMovedTracked.current = true;
|
|
515
481
|
}
|
|
516
|
-
|
|
517
482
|
lastPointerClient.current = {
|
|
518
483
|
x: clientX,
|
|
519
484
|
y: clientY
|
|
520
485
|
};
|
|
521
|
-
|
|
522
486
|
if (Math.abs(downDeltaX) > 3 || Math.abs(downDeltaY) > 3) {
|
|
523
487
|
if (togglePlayTimeout.current !== null) {
|
|
524
488
|
clearTimeout(togglePlayTimeout.current);
|
|
@@ -529,7 +493,6 @@ var Video360Screen = function Video360Screen(_ref) {
|
|
|
529
493
|
}, [width, height, trackScreenEvent, video]);
|
|
530
494
|
var onPointerUp = React.useCallback(function (e) {
|
|
531
495
|
var videoContainer = videoContainerRef.current;
|
|
532
|
-
|
|
533
496
|
if (pointerDown.current && videoContainer !== null) {
|
|
534
497
|
var distX = Math.abs(pointerDownX.current - e.clientX);
|
|
535
498
|
var distY = Math.abs(pointerDownY.current - e.clientY);
|
|
@@ -537,15 +500,12 @@ var Video360Screen = function Video360Screen(_ref) {
|
|
|
537
500
|
var tapNextScreenWidthPercent = 0.5;
|
|
538
501
|
var canTapToNavigate = !landscape && togglePlayTimeout.current !== null;
|
|
539
502
|
var validNavigateTap = canTapToNavigate && distX < pixelsMovedTolerance && distY < pixelsMovedTolerance;
|
|
540
|
-
|
|
541
503
|
if (validNavigateTap) {
|
|
542
504
|
var _videoContainer$getBo = videoContainer.getBoundingClientRect(),
|
|
543
|
-
|
|
544
|
-
|
|
545
|
-
|
|
546
|
-
|
|
505
|
+
_videoContainer$getBo2 = _videoContainer$getBo.left,
|
|
506
|
+
containerX = _videoContainer$getBo2 === void 0 ? 0 : _videoContainer$getBo2,
|
|
507
|
+
containerWidth = _videoContainer$getBo.width;
|
|
547
508
|
var hasTappedLeft = e.clientX - containerX < containerWidth * (1 - tapNextScreenWidthPercent);
|
|
548
|
-
|
|
549
509
|
if (hasTappedLeft) {
|
|
550
510
|
if (gotoPreviousScreen !== null) {
|
|
551
511
|
gotoPreviousScreen();
|
|
@@ -554,15 +514,15 @@ var Video360Screen = function Video360Screen(_ref) {
|
|
|
554
514
|
gotoNextScreen();
|
|
555
515
|
}
|
|
556
516
|
}
|
|
557
|
-
|
|
558
517
|
if (togglePlayTimeout.current !== null) {
|
|
559
518
|
clearTimeout(togglePlayTimeout.current);
|
|
560
519
|
togglePlayTimeout.current = null;
|
|
561
520
|
}
|
|
562
521
|
}
|
|
563
|
-
|
|
564
522
|
pointerDown.current = false;
|
|
565
|
-
}, [gotoPreviousScreen, gotoNextScreen, landscape]);
|
|
523
|
+
}, [gotoPreviousScreen, gotoNextScreen, landscape]);
|
|
524
|
+
|
|
525
|
+
// Building elements ------------------
|
|
566
526
|
|
|
567
527
|
var items = [/*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
|
|
568
528
|
key: "video",
|
|
@@ -688,26 +648,21 @@ var Video360Screen = function Video360Screen(_ref) {
|
|
|
688
648
|
className: styles.background
|
|
689
649
|
}) : null);
|
|
690
650
|
};
|
|
691
|
-
|
|
692
651
|
Video360Screen.propTypes = propTypes;
|
|
693
652
|
Video360Screen.defaultProps = defaultProps;
|
|
694
653
|
var Video360Screen$1 = /*#__PURE__*/React__default["default"].memo(Video360Screen);
|
|
695
654
|
|
|
696
655
|
var transform = function transform(newStory, _ref) {
|
|
697
656
|
var video = _ref.video;
|
|
698
|
-
|
|
699
657
|
var _ref2 = video || {},
|
|
700
|
-
|
|
701
|
-
|
|
702
|
-
|
|
658
|
+
_ref2$media = _ref2.media,
|
|
659
|
+
media = _ref2$media === void 0 ? null : _ref2$media;
|
|
703
660
|
var _Video = appleNews.Video(newStory, media),
|
|
704
|
-
|
|
705
|
-
|
|
706
|
-
|
|
661
|
+
titleStory = _Video.story,
|
|
662
|
+
titleComponent = _Video.component;
|
|
707
663
|
var _Container = appleNews.Container(titleStory, _toConsumableArray__default["default"](titleComponent ? [titleComponent] : [])),
|
|
708
|
-
|
|
709
|
-
|
|
710
|
-
|
|
664
|
+
containerStory = _Container.story,
|
|
665
|
+
containerComponent = _Container.component;
|
|
711
666
|
return _objectSpread__default["default"](_objectSpread__default["default"]({}, containerStory), {}, {
|
|
712
667
|
components: [].concat(_toConsumableArray__default["default"](newStory.components || []), _toConsumableArray__default["default"](containerComponent ? [containerComponent] : []))
|
|
713
668
|
});
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@micromag/screen-video-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
|
}
|