@micromag/screen-video-360 0.2.287 → 0.2.288

package/es/index.js

@@ -16,6 +16,7 @@ import Background from '@micromag/element-background';
 import Container from '@micromag/element-container';
 import ClosedCaptions from '@micromag/element-closed-captions';
 import MediaControls from '@micromag/element-media-controls';
+import Image from '@micromag/element-image';
 import Video from '@micromag/element-video';
 import CallToAction from '@micromag/element-call-to-action';
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
@@ -422,7 +423,7 @@ var Video360Screen = function Video360Screen(_ref) {
     transitions: transitions,
     disabled: transitionDisabled,
     fullscreen: true
-  }, /*#__PURE__*/React.createElement("canvas", {
+  }, withVideoSphere ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("canvas", {
     ref: canvasRef,
     className: styles.canvas
   }), /*#__PURE__*/React.createElement("button", {
@@ -432,7 +433,26 @@ var Video360Screen = function Video360Screen(_ref) {
     onPointerDown: onPointerDown,
     onPointerMove: onPointerMove,
     onPointerUp: onPointerUp
-  }))), !isPlaceholder ? /*#__PURE__*/React.createElement("div", {
+  })) : /*#__PURE__*/React.createElement("div", {
+    className: styles.videoContainer,
+    style: {
+      width: resizedVideoWidth,
+      height: resizedVideoHeight,
+      left: resizedVideoLeft,
+      top: resizedVideoTop
+    }
+  }, /*#__PURE__*/React.createElement(Image, {
+    className: styles.video,
+    media: {
+      url: thumbnailUrl,
+      metadata: {
+        width: videoWidth,
+        height: videoHeight
+      }
+    },
+    width: "100%",
+    height: "100%"
+  })))), !isPlaceholder ? /*#__PURE__*/React.createElement("div", {
     key: "bottom-content",
     className: styles.bottomContent
   }, /*#__PURE__*/React.createElement(Transitions, {
@@ -464,8 +484,7 @@ var Video360Screen = function Video360Screen(_ref) {
   })) : null)) : null];
   return /*#__PURE__*/React.createElement("div", {
     className: classNames([styles.container, (_ref12 = {}, _defineProperty(_ref12, className, className !== null), _defineProperty(_ref12, styles.showVideo, isPreview || isStatic || isCapture), _ref12)]),
-    "data-screen-ready": (isStatic || isCapture) && posterReady || ready // {...longPressBind}
-
+    "data-screen-ready": (isStatic || isCapture) && posterReady || ready
   }, !isPlaceholder ? /*#__PURE__*/React.createElement(Background, Object.assign({}, background, {
     width: width,
     height: height,
@@ -486,7 +505,7 @@ var Video360Screen = function Video360Screen(_ref) {
     ref: apiRef,
     className: styles.video,
     withoutCors: true,
-    preload: "auto",
+    preload: "metadata",
     onReady: onVideoReady,
     onPlay: onPlay,
     onPause: onPause,

package/lib/index.js

@@ -20,6 +20,7 @@ var Background = require('@micromag/element-background');
 var Container = require('@micromag/element-container');
 var ClosedCaptions = require('@micromag/element-closed-captions');
 var MediaControls = require('@micromag/element-media-controls');
+var Image = require('@micromag/element-image');
 var Video = require('@micromag/element-video');
 var CallToAction = require('@micromag/element-call-to-action');
 var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
@@ -37,6 +38,7 @@ var Background__default = /*#__PURE__*/_interopDefaultLegacy(Background);
 var Container__default = /*#__PURE__*/_interopDefaultLegacy(Container);
 var ClosedCaptions__default = /*#__PURE__*/_interopDefaultLegacy(ClosedCaptions);
 var MediaControls__default = /*#__PURE__*/_interopDefaultLegacy(MediaControls);
+var Image__default = /*#__PURE__*/_interopDefaultLegacy(Image);
 var Video__default = /*#__PURE__*/_interopDefaultLegacy(Video);
 var CallToAction__default = /*#__PURE__*/_interopDefaultLegacy(CallToAction);
 var _toConsumableArray__default = /*#__PURE__*/_interopDefaultLegacy(_toConsumableArray);
@@ -442,7 +444,7 @@ var Video360Screen = function Video360Screen(_ref) {
     transitions: transitions,
     disabled: transitionDisabled,
     fullscreen: true
-  }, /*#__PURE__*/React__default['default'].createElement("canvas", {
+  }, withVideoSphere ? /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement("canvas", {
     ref: canvasRef,
     className: styles.canvas
   }), /*#__PURE__*/React__default['default'].createElement("button", {
@@ -452,7 +454,26 @@ var Video360Screen = function Video360Screen(_ref) {
     onPointerDown: onPointerDown,
     onPointerMove: onPointerMove,
     onPointerUp: onPointerUp
-  }))), !isPlaceholder ? /*#__PURE__*/React__default['default'].createElement("div", {
+  })) : /*#__PURE__*/React__default['default'].createElement("div", {
+    className: styles.videoContainer,
+    style: {
+      width: resizedVideoWidth,
+      height: resizedVideoHeight,
+      left: resizedVideoLeft,
+      top: resizedVideoTop
+    }
+  }, /*#__PURE__*/React__default['default'].createElement(Image__default['default'], {
+    className: styles.video,
+    media: {
+      url: thumbnailUrl,
+      metadata: {
+        width: videoWidth,
+        height: videoHeight
+      }
+    },
+    width: "100%",
+    height: "100%"
+  })))), !isPlaceholder ? /*#__PURE__*/React__default['default'].createElement("div", {
     key: "bottom-content",
     className: styles.bottomContent
   }, /*#__PURE__*/React__default['default'].createElement(components.Transitions, {
@@ -484,8 +505,7 @@ var Video360Screen = function Video360Screen(_ref) {
   })) : null)) : null];
   return /*#__PURE__*/React__default['default'].createElement("div", {
     className: classNames__default['default']([styles.container, (_ref12 = {}, _defineProperty__default['default'](_ref12, className, className !== null), _defineProperty__default['default'](_ref12, styles.showVideo, isPreview || isStatic || isCapture), _ref12)]),
-    "data-screen-ready": (isStatic || isCapture) && posterReady || ready // {...longPressBind}
-
+    "data-screen-ready": (isStatic || isCapture) && posterReady || ready
   }, !isPlaceholder ? /*#__PURE__*/React__default['default'].createElement(Background__default['default'], Object.assign({}, background, {
     width: width,
     height: height,
@@ -506,7 +526,7 @@ var Video360Screen = function Video360Screen(_ref) {
     ref: apiRef,
     className: styles.video,
     withoutCors: true,
-    preload: "auto",
+    preload: "metadata",
     onReady: onVideoReady,
     onPlay: onPlay,
     onPause: onPause,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/screen-video-360",
-    "version": "0.2.287",
+    "version": "0.2.288",
     "description": "",
     "keywords": [
         "javascript"
@@ -55,6 +55,7 @@
         "@micromag/element-call-to-action": "^0.2.287",
         "@micromag/element-closed-captions": "^0.2.287",
         "@micromag/element-container": "^0.2.287",
+        "@micromag/element-image": "^0.2.287",
         "@micromag/element-media-controls": "^0.2.287",
         "@micromag/element-video": "^0.2.287",
         "@micromag/transforms": "^0.2.287",
@@ -69,5 +70,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "cd683d40baf88a5d02714cd9cdc7a45575bd2401"
+    "gitHead": "848be36486daa264d9ffe989cde957b66fa51d12"
 }