@micromag/screen-video-360 0.3.246 → 0.3.251
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/assets/css/styles.css +1 -1
- package/es/index.js +18 -18
- package/lib/index.js +17 -17
- package/package.json +11 -11
package/assets/css/styles.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.micromag-screen-video-360-container .micromag-screen-video-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-video-360-container .micromag-screen-video-360-
|
|
1
|
+
.micromag-screen-video-360-container .micromag-screen-video-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-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-content,.micromag-screen-video-360-container .micromag-screen-video-360-placeholder,.micromag-screen-video-360-container .micromag-screen-video-360-video{position:absolute;top:0;left:0;width:100%;height:100%}.micromag-screen-video-360-container{position:relative;width:100%;height:100%;overflow:hidden}.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{position:relative;padding:6px}.micromag-screen-video-360-container .micromag-screen-video-360-empty{margin:5px auto;border:2px dashed #343434;color:#343434;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{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-video-360-container .micromag-screen-video-360-bottom{position:absolute;bottom:0;left:0;width:100%;-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}.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
|
@@ -10,7 +10,7 @@ import 'whatwg-fetch';
|
|
|
10
10
|
import { PropTypes as PropTypes$1 } from '@micromag/core';
|
|
11
11
|
import { ScreenElement, PlaceholderVideo360, Transitions } from '@micromag/core/components';
|
|
12
12
|
import { useViewerInteraction, useViewerNavigation, useViewerContext, useScreenSize, useScreenRenderContext, useViewerWebView, usePlaybackContext, useViewerContainer } from '@micromag/core/contexts';
|
|
13
|
-
import { useTrackScreenEvent, useTrackScreenMedia, useActivityDetector,
|
|
13
|
+
import { useTrackScreenEvent, useTrackScreenMedia, useActivityDetector, useAnimationFrame } from '@micromag/core/hooks';
|
|
14
14
|
import Background from '@micromag/element-background';
|
|
15
15
|
import CallToAction from '@micromag/element-call-to-action';
|
|
16
16
|
import ClosedCaptions from '@micromag/element-closed-captions';
|
|
@@ -77,7 +77,7 @@ var useThree = function useThree() {
|
|
|
77
77
|
return loadedPackage;
|
|
78
78
|
};
|
|
79
79
|
|
|
80
|
-
var styles = {"container":"micromag-screen-video-360-container","canvasButton":"micromag-screen-video-360-canvasButton","
|
|
80
|
+
var styles = {"container":"micromag-screen-video-360-container","canvasButton":"micromag-screen-video-360-canvasButton","canvas":"micromag-screen-video-360-canvas","content":"micromag-screen-video-360-content","placeholder":"micromag-screen-video-360-placeholder","video":"micromag-screen-video-360-video","disabled":"micromag-screen-video-360-disabled","hidden":"micromag-screen-video-360-hidden","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
81
|
|
|
82
82
|
var propTypes = {
|
|
83
83
|
layout: PropTypes.oneOf(['full']),
|
|
@@ -231,19 +231,22 @@ var Video360Screen = function Video360Screen(_ref) {
|
|
|
231
231
|
|
|
232
232
|
var _useActivityDetector = useActivityDetector({
|
|
233
233
|
element: viewerContainer,
|
|
234
|
-
disabled: !isView,
|
|
234
|
+
disabled: !current || !isView,
|
|
235
235
|
timeout: 2000
|
|
236
236
|
}),
|
|
237
237
|
activityDetected = _useActivityDetector.detected;
|
|
238
238
|
|
|
239
|
-
|
|
239
|
+
useEffect(function () {
|
|
240
|
+
if (!current) {
|
|
241
|
+
return;
|
|
242
|
+
}
|
|
243
|
+
|
|
240
244
|
if (activityDetected) {
|
|
241
245
|
showControls();
|
|
242
246
|
} else {
|
|
243
247
|
hideControls();
|
|
244
248
|
}
|
|
245
249
|
}, [activityDetected, showControls, hideControls]);
|
|
246
|
-
useDebounce(toggleControlsVisibility, activityDetected, 1000);
|
|
247
250
|
|
|
248
251
|
var _useState = useState(null),
|
|
249
252
|
_useState2 = _slicedToArray(_useState, 2),
|
|
@@ -607,10 +610,16 @@ var Video360Screen = function Video360Screen(_ref) {
|
|
|
607
610
|
return /*#__PURE__*/React.createElement("div", {
|
|
608
611
|
className: classNames([styles.container, (_ref11 = {}, _defineProperty(_ref11, className, className !== null), _defineProperty(_ref11, styles.showVideo, isPreview || isStatic || isCapture), _ref11)]),
|
|
609
612
|
"data-screen-ready": (isStatic || isCapture) && posterReady || ready
|
|
610
|
-
}, /*#__PURE__*/React.createElement(
|
|
613
|
+
}, !isPlaceholder ? /*#__PURE__*/React.createElement(Background, {
|
|
614
|
+
background: background,
|
|
611
615
|
width: width,
|
|
612
616
|
height: height,
|
|
613
|
-
|
|
617
|
+
resolution: resolution,
|
|
618
|
+
playing: backgroundPlaying,
|
|
619
|
+
shouldLoad: mediaShouldLoad
|
|
620
|
+
}) : null, /*#__PURE__*/React.createElement(Container, {
|
|
621
|
+
width: width,
|
|
622
|
+
height: height
|
|
614
623
|
}, withVideoSphere ? /*#__PURE__*/React.createElement("div", {
|
|
615
624
|
ref: videoContainerRef,
|
|
616
625
|
className: styles.videoContainer,
|
|
@@ -638,17 +647,8 @@ var Video360Screen = function Video360Screen(_ref) {
|
|
|
638
647
|
focusable: current && isView,
|
|
639
648
|
shouldLoad: mediaShouldLoad
|
|
640
649
|
}))) : null, /*#__PURE__*/React.createElement("div", {
|
|
641
|
-
className: styles.
|
|
642
|
-
}, items))
|
|
643
|
-
background: background,
|
|
644
|
-
width: width,
|
|
645
|
-
height: height,
|
|
646
|
-
resolution: resolution,
|
|
647
|
-
playing: backgroundPlaying,
|
|
648
|
-
shouldLoad: mediaShouldLoad,
|
|
649
|
-
withoutVideo: isPreview,
|
|
650
|
-
className: styles.background
|
|
651
|
-
}) : null);
|
|
650
|
+
className: styles.content
|
|
651
|
+
}, items)));
|
|
652
652
|
};
|
|
653
653
|
|
|
654
654
|
Video360Screen.propTypes = propTypes;
|
package/lib/index.js
CHANGED
|
@@ -115,7 +115,7 @@ var useThree = function useThree() {
|
|
|
115
115
|
return loadedPackage;
|
|
116
116
|
};
|
|
117
117
|
|
|
118
|
-
var styles = {"container":"micromag-screen-video-360-container","canvasButton":"micromag-screen-video-360-canvasButton","
|
|
118
|
+
var styles = {"container":"micromag-screen-video-360-container","canvasButton":"micromag-screen-video-360-canvasButton","canvas":"micromag-screen-video-360-canvas","content":"micromag-screen-video-360-content","placeholder":"micromag-screen-video-360-placeholder","video":"micromag-screen-video-360-video","disabled":"micromag-screen-video-360-disabled","hidden":"micromag-screen-video-360-hidden","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
119
|
|
|
120
120
|
var propTypes = {
|
|
121
121
|
layout: PropTypes__default["default"].oneOf(['full']),
|
|
@@ -269,19 +269,22 @@ var Video360Screen = function Video360Screen(_ref) {
|
|
|
269
269
|
|
|
270
270
|
var _useActivityDetector = hooks.useActivityDetector({
|
|
271
271
|
element: viewerContainer,
|
|
272
|
-
disabled: !isView,
|
|
272
|
+
disabled: !current || !isView,
|
|
273
273
|
timeout: 2000
|
|
274
274
|
}),
|
|
275
275
|
activityDetected = _useActivityDetector.detected;
|
|
276
276
|
|
|
277
|
-
|
|
277
|
+
React.useEffect(function () {
|
|
278
|
+
if (!current) {
|
|
279
|
+
return;
|
|
280
|
+
}
|
|
281
|
+
|
|
278
282
|
if (activityDetected) {
|
|
279
283
|
showControls();
|
|
280
284
|
} else {
|
|
281
285
|
hideControls();
|
|
282
286
|
}
|
|
283
287
|
}, [activityDetected, showControls, hideControls]);
|
|
284
|
-
hooks.useDebounce(toggleControlsVisibility, activityDetected, 1000);
|
|
285
288
|
|
|
286
289
|
var _useState = React.useState(null),
|
|
287
290
|
_useState2 = _slicedToArray__default["default"](_useState, 2),
|
|
@@ -645,10 +648,16 @@ var Video360Screen = function Video360Screen(_ref) {
|
|
|
645
648
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
646
649
|
className: classNames__default["default"]([styles.container, (_ref11 = {}, _defineProperty__default["default"](_ref11, className, className !== null), _defineProperty__default["default"](_ref11, styles.showVideo, isPreview || isStatic || isCapture), _ref11)]),
|
|
647
650
|
"data-screen-ready": (isStatic || isCapture) && posterReady || ready
|
|
648
|
-
}, /*#__PURE__*/React__default["default"].createElement(
|
|
651
|
+
}, !isPlaceholder ? /*#__PURE__*/React__default["default"].createElement(Background__default["default"], {
|
|
652
|
+
background: background,
|
|
649
653
|
width: width,
|
|
650
654
|
height: height,
|
|
651
|
-
|
|
655
|
+
resolution: resolution,
|
|
656
|
+
playing: backgroundPlaying,
|
|
657
|
+
shouldLoad: mediaShouldLoad
|
|
658
|
+
}) : null, /*#__PURE__*/React__default["default"].createElement(Container__default["default"], {
|
|
659
|
+
width: width,
|
|
660
|
+
height: height
|
|
652
661
|
}, withVideoSphere ? /*#__PURE__*/React__default["default"].createElement("div", {
|
|
653
662
|
ref: videoContainerRef,
|
|
654
663
|
className: styles.videoContainer,
|
|
@@ -676,17 +685,8 @@ var Video360Screen = function Video360Screen(_ref) {
|
|
|
676
685
|
focusable: current && isView,
|
|
677
686
|
shouldLoad: mediaShouldLoad
|
|
678
687
|
}))) : null, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
679
|
-
className: styles.
|
|
680
|
-
}, items))
|
|
681
|
-
background: background,
|
|
682
|
-
width: width,
|
|
683
|
-
height: height,
|
|
684
|
-
resolution: resolution,
|
|
685
|
-
playing: backgroundPlaying,
|
|
686
|
-
shouldLoad: mediaShouldLoad,
|
|
687
|
-
withoutVideo: isPreview,
|
|
688
|
-
className: styles.background
|
|
689
|
-
}) : null);
|
|
688
|
+
className: styles.content
|
|
689
|
+
}, items)));
|
|
690
690
|
};
|
|
691
691
|
|
|
692
692
|
Video360Screen.propTypes = propTypes;
|
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.251",
|
|
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.
|
|
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.251",
|
|
54
|
+
"@micromag/element-background": "^0.3.251",
|
|
55
|
+
"@micromag/element-call-to-action": "^0.3.251",
|
|
56
|
+
"@micromag/element-closed-captions": "^0.3.251",
|
|
57
|
+
"@micromag/element-container": "^0.3.251",
|
|
58
|
+
"@micromag/element-image": "^0.3.251",
|
|
59
|
+
"@micromag/element-media-controls": "^0.3.251",
|
|
60
|
+
"@micromag/element-video": "^0.3.251",
|
|
61
|
+
"@micromag/transforms": "^0.3.251",
|
|
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": "
|
|
73
|
+
"gitHead": "3b6fb00baaa7f3ab90684a88cbe4c30929b6b27d"
|
|
74
74
|
}
|