@micromag/screen-title 0.3.150 → 0.3.152

package/es/index.js

@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { PropTypes as PropTypes$1 } from '@micromag/core';
 import { ScreenElement, TransitionsStagger } from '@micromag/core/components';
-import { useScreenSize, useViewer, useScreenRenderContext } from '@micromag/core/contexts';
+import { useScreenSize, useScreenRenderContext, useViewerContext, useViewerWebView, usePlaybackContext, usePlaybackMediaRef } from '@micromag/core/contexts';
 import { isTextFilled, getStyleFromBox } from '@micromag/core/utils';
 import Background from '@micromag/element-background';
 import CallToAction from '@micromag/element-call-to-action';
@@ -38,8 +38,6 @@ var propTypes$2 = {
   active: PropTypes.bool,
   transitions: PropTypes$1.transitions,
   transitionStagger: PropTypes.number,
-  enableInteraction: PropTypes.func,
-  disableInteraction: PropTypes.func,
   className: PropTypes.string
 };
 var defaultProps$2 = {
@@ -65,8 +63,6 @@ var defaultProps$2 = {
   active: true,
   transitions: null,
   transitionStagger: 100,
-  enableInteraction: null,
-  disableInteraction: null,
   className: null
 };
 
@@ -89,19 +85,13 @@ var TitleScreen = function TitleScreen(_ref) {
       active = _ref.active,
       transitions = _ref.transitions,
       transitionStagger = _ref.transitionStagger,
-      enableInteraction = _ref.enableInteraction,
-      disableInteraction = _ref.disableInteraction,
       className = _ref.className;
 
   var _useScreenSize = useScreenSize(),
       width = _useScreenSize.width,
       height = _useScreenSize.height,
-      menuOverScreen = _useScreenSize.menuOverScreen,
       resolution = _useScreenSize.resolution;
 
-  var _useViewer = useViewer(),
-      menuSize = _useViewer.menuSize;
-
   var _useScreenRenderConte = useScreenRenderContext(),
       isView = _useScreenRenderConte.isView,
       isPreview = _useScreenRenderConte.isPreview,
@@ -110,6 +100,18 @@ var TitleScreen = function TitleScreen(_ref) {
       isStatic = _useScreenRenderConte.isStatic,
       isCapture = _useScreenRenderConte.isCapture;
 
+  var _useViewerContext = useViewerContext(),
+      viewerTopHeight = _useViewerContext.topHeight,
+      viewerBottomHeight = _useViewerContext.bottomHeight,
+      viewerBottomSidesWidth = _useViewerContext.bottomSidesWidth;
+
+  var _useViewerWebView = useViewerWebView(),
+      openWebView = _useViewerWebView.open;
+
+  var _usePlaybackContext = usePlaybackContext(),
+      muted = _usePlaybackContext.muted;
+
+  var mediaRef = usePlaybackMediaRef(current);
   var hasTitle = isTextFilled(title);
   var hasSubtitle = isTextFilled(subtitle);
   var hasDescription = isTextFilled(description);
@@ -175,7 +177,9 @@ var TitleScreen = function TitleScreen(_ref) {
     height: height,
     resolution: resolution,
     playing: backgroundPlaying,
-    shouldLoad: backgroundShouldLoad
+    muted: muted,
+    shouldLoad: backgroundShouldLoad,
+    mediaRef: mediaRef
   }) : null, /*#__PURE__*/React.createElement(Container, {
     width: width,
     height: height
@@ -185,7 +189,8 @@ var TitleScreen = function TitleScreen(_ref) {
     verticalAlign: verticalAlign,
     style: !isPlaceholder ? {
       padding: spacing,
-      paddingTop: (menuOverScreen && !isPreview ? menuSize : 0) + spacing
+      paddingTop: (!isPreview ? viewerTopHeight : 0) + spacing,
+      paddingBottom: (!isPreview ? viewerBottomHeight : 0) + spacing
     } : null
   }, !isPlaceholder && hasCallToAction && isMiddleLayout ? /*#__PURE__*/React.createElement(Spacer, {
     key: "spacer-cta-top"
@@ -227,22 +232,17 @@ var TitleScreen = function TitleScreen(_ref) {
   }), descriptionElement) : null, !isPlaceholder && hasCallToAction && (isTopLayout || isMiddleLayout) ? /*#__PURE__*/React.createElement(Spacer, {
     key: "spacer-cta-bottom"
   }) : null, !isPlaceholder && hasCallToAction ? /*#__PURE__*/React.createElement("div", {
+    key: "call-to-action",
     style: {
-      margin: -spacing,
-      marginTop: 0
-    },
-    key: "call-to-action"
-  }, /*#__PURE__*/React.createElement(CallToAction, {
-    callToAction: callToAction,
+      paddingTop: spacing,
+      paddingLeft: Math.max(0, viewerBottomSidesWidth - spacing),
+      paddingRight: Math.max(0, viewerBottomSidesWidth - spacing)
+    }
+  }, /*#__PURE__*/React.createElement(CallToAction, Object.assign({}, callToAction, {
     animationDisabled: isPreview,
     focusable: current && isView,
-    screenSize: {
-      width: width,
-      height: height
-    },
-    enableInteraction: enableInteraction,
-    disableInteraction: disableInteraction
-  })) : null)));
+    openWebView: openWebView
+  }))) : null)));
 };
 
 TitleScreen.propTypes = propTypes$2;

package/lib/index.js

@@ -59,8 +59,6 @@ var propTypes$2 = {
   active: PropTypes__default["default"].bool,
   transitions: core.PropTypes.transitions,
   transitionStagger: PropTypes__default["default"].number,
-  enableInteraction: PropTypes__default["default"].func,
-  disableInteraction: PropTypes__default["default"].func,
   className: PropTypes__default["default"].string
 };
 var defaultProps$2 = {
@@ -86,8 +84,6 @@ var defaultProps$2 = {
   active: true,
   transitions: null,
   transitionStagger: 100,
-  enableInteraction: null,
-  disableInteraction: null,
   className: null
 };
 
@@ -110,19 +106,13 @@ var TitleScreen = function TitleScreen(_ref) {
       active = _ref.active,
       transitions = _ref.transitions,
       transitionStagger = _ref.transitionStagger,
-      enableInteraction = _ref.enableInteraction,
-      disableInteraction = _ref.disableInteraction,
       className = _ref.className;
 
   var _useScreenSize = contexts.useScreenSize(),
       width = _useScreenSize.width,
       height = _useScreenSize.height,
-      menuOverScreen = _useScreenSize.menuOverScreen,
       resolution = _useScreenSize.resolution;
 
-  var _useViewer = contexts.useViewer(),
-      menuSize = _useViewer.menuSize;
-
   var _useScreenRenderConte = contexts.useScreenRenderContext(),
       isView = _useScreenRenderConte.isView,
       isPreview = _useScreenRenderConte.isPreview,
@@ -131,6 +121,18 @@ var TitleScreen = function TitleScreen(_ref) {
       isStatic = _useScreenRenderConte.isStatic,
       isCapture = _useScreenRenderConte.isCapture;
 
+  var _useViewerContext = contexts.useViewerContext(),
+      viewerTopHeight = _useViewerContext.topHeight,
+      viewerBottomHeight = _useViewerContext.bottomHeight,
+      viewerBottomSidesWidth = _useViewerContext.bottomSidesWidth;
+
+  var _useViewerWebView = contexts.useViewerWebView(),
+      openWebView = _useViewerWebView.open;
+
+  var _usePlaybackContext = contexts.usePlaybackContext(),
+      muted = _usePlaybackContext.muted;
+
+  var mediaRef = contexts.usePlaybackMediaRef(current);
   var hasTitle = utils.isTextFilled(title);
   var hasSubtitle = utils.isTextFilled(subtitle);
   var hasDescription = utils.isTextFilled(description);
@@ -196,7 +198,9 @@ var TitleScreen = function TitleScreen(_ref) {
     height: height,
     resolution: resolution,
     playing: backgroundPlaying,
-    shouldLoad: backgroundShouldLoad
+    muted: muted,
+    shouldLoad: backgroundShouldLoad,
+    mediaRef: mediaRef
   }) : null, /*#__PURE__*/React__default["default"].createElement(Container__default["default"], {
     width: width,
     height: height
@@ -206,7 +210,8 @@ var TitleScreen = function TitleScreen(_ref) {
     verticalAlign: verticalAlign,
     style: !isPlaceholder ? {
       padding: spacing,
-      paddingTop: (menuOverScreen && !isPreview ? menuSize : 0) + spacing
+      paddingTop: (!isPreview ? viewerTopHeight : 0) + spacing,
+      paddingBottom: (!isPreview ? viewerBottomHeight : 0) + spacing
     } : null
   }, !isPlaceholder && hasCallToAction && isMiddleLayout ? /*#__PURE__*/React__default["default"].createElement(Layout.Spacer, {
     key: "spacer-cta-top"
@@ -248,22 +253,17 @@ var TitleScreen = function TitleScreen(_ref) {
   }), descriptionElement) : null, !isPlaceholder && hasCallToAction && (isTopLayout || isMiddleLayout) ? /*#__PURE__*/React__default["default"].createElement(Layout.Spacer, {
     key: "spacer-cta-bottom"
   }) : null, !isPlaceholder && hasCallToAction ? /*#__PURE__*/React__default["default"].createElement("div", {
+    key: "call-to-action",
     style: {
-      margin: -spacing,
-      marginTop: 0
-    },
-    key: "call-to-action"
-  }, /*#__PURE__*/React__default["default"].createElement(CallToAction__default["default"], {
-    callToAction: callToAction,
+      paddingTop: spacing,
+      paddingLeft: Math.max(0, viewerBottomSidesWidth - spacing),
+      paddingRight: Math.max(0, viewerBottomSidesWidth - spacing)
+    }
+  }, /*#__PURE__*/React__default["default"].createElement(CallToAction__default["default"], Object.assign({}, callToAction, {
     animationDisabled: isPreview,
     focusable: current && isView,
-    screenSize: {
-      width: width,
-      height: height
-    },
-    enableInteraction: enableInteraction,
-    disableInteraction: disableInteraction
-  })) : null)));
+    openWebView: openWebView
+  }))) : null)));
 };
 
 TitleScreen.propTypes = propTypes$2;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/screen-title",
-    "version": "0.3.150",
+    "version": "0.3.152",
     "description": "",
     "keywords": [
         "javascript"
@@ -49,14 +49,14 @@
     },
     "dependencies": {
         "@babel/runtime": "^7.13.10",
-        "@micromag/core": "^0.3.150",
-        "@micromag/element-background": "^0.3.150",
-        "@micromag/element-call-to-action": "^0.3.150",
-        "@micromag/element-container": "^0.3.150",
-        "@micromag/element-heading": "^0.3.150",
-        "@micromag/element-layout": "^0.3.150",
-        "@micromag/element-text": "^0.3.150",
-        "@micromag/transforms": "^0.3.150",
+        "@micromag/core": "^0.3.152",
+        "@micromag/element-background": "^0.3.152",
+        "@micromag/element-call-to-action": "^0.3.152",
+        "@micromag/element-container": "^0.3.152",
+        "@micromag/element-heading": "^0.3.152",
+        "@micromag/element-layout": "^0.3.152",
+        "@micromag/element-text": "^0.3.152",
+        "@micromag/transforms": "^0.3.152",
         "classnames": "^2.2.6",
         "lodash": "^4.17.21",
         "prop-types": "^15.7.2",
@@ -66,5 +66,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "c9441be7a115a52416883e404feeca422af4f2da"
+    "gitHead": "23db6c104c10cc70a73366c8b04576a312a36206"
 }