@micromag/core 0.3.34 → 0.3.39

package/es/components.js

@@ -2519,7 +2519,7 @@ PropTypes$1.shape({
   radius: PropTypes$1.number,
   color: color
 });
-PropTypes$1.shape({
+var boxStyle = PropTypes$1.shape({
   backgroundColor: color,
   borderRadius: PropTypes$1.number,
   borderWidth: PropTypes$1.number,
@@ -2632,7 +2632,8 @@ PropTypes$1.shape({
   active: PropTypes$1.bool,
   type: callToActionTypes,
   url: PropTypes$1.string,
-  label: textElement
+  label: textElement,
+  buttonStyle: boxStyle
 });
 var speaker = PropTypes$1.shape({
   id: PropTypes$1.string,

package/es/hooks.js

@@ -838,19 +838,19 @@ var useMediaApi = function useMediaApi() {
 
     setPlaying(true);
   }, [initialPlay, setPlaying, onPlay]);
-  var onCustomPause = useCallback(function () {
-    var media = ref.current;
+  var onCustomPause = useCallback(function (e) {
+    var eventMedia = e.currentTarget;
     setPlaying(false);
 
     if (onPause !== null) {
       onPause({
-        midway: media.currentTime > 0 && media.currentTime < media.duration
+        midway: eventMedia.currentTime > 0 && eventMedia.currentTime < eventMedia.duration
       });
     }
   }, [setPlaying, onPause]);
-  var onCustomEnded = useCallback(function () {
-    var media = ref.current;
-    media.currentTime = 0;
+  var onCustomEnded = useCallback(function (e) {
+    var eventMedia = e.currentTarget;
+    eventMedia.currentTime = 0;
 
     if (onEnded !== null) {
       onEnded();
@@ -858,15 +858,15 @@ var useMediaApi = function useMediaApi() {
 
     setInitialPlay(true);
   }, [setInitialPlay, onEnded]);
-  var onCustomTimeUpdate = useCallback(function () {
-    var media = ref.current;
-    setCurrentTime(media.currentTime);
+  var onCustomTimeUpdate = useCallback(function (e) {
+    var eventMedia = e.currentTarget;
+    setCurrentTime(eventMedia.currentTime);
 
     if (onTimeUpdate !== null) {
-      onTimeUpdate(media.currentTime);
+      onTimeUpdate(eventMedia.currentTime);
     }
 
-    var progress = media.currentTime / media.duration;
+    var progress = eventMedia.currentTime / eventMedia.duration;
     var currentSteps = progressStepsReached.current;
     var stepsToTrack = progressSteps.filter(function (step) {
       return progress > step && typeof currentSteps[step] === 'undefined';
@@ -879,27 +879,27 @@ var useMediaApi = function useMediaApi() {
       currentSteps[step] = true;
     });
   }, [setCurrentTime, onTimeUpdate, onProgressStep]);
-  var onCustomDurationChange = useCallback(function () {
-    var media = ref.current;
-    setDuration(media.duration);
+  var onCustomDurationChange = useCallback(function (e) {
+    var eventMedia = e.currentTarget;
+    setDuration(eventMedia.duration);
 
     if (onDurationChanged !== null) {
-      onDurationChanged(media.duration);
+      onDurationChanged(eventMedia.duration);
     }
   }, [setDuration, onDurationChanged]);
-  var onCustomSeeked = useCallback(function () {
-    var media = ref.current;
+  var onCustomSeeked = useCallback(function (e) {
+    var eventMedia = e.currentTarget;
 
     if (onSeeked !== null) {
-      onSeeked(media.currentTime);
+      onSeeked(eventMedia.currentTime);
     }
   }, [onSeeked]);
-  var onCustomVolumeChange = useCallback(function () {
-    var media = ref.current;
-    setMuted(media.muted);
+  var onCustomVolumeChange = useCallback(function (e) {
+    var eventMedia = e.currentTarget;
+    setMuted(eventMedia.muted);
 
     if (onVolumeChanged !== null) {
-      onVolumeChanged(media.muted, media.volume);
+      onVolumeChanged(eventMedia.muted, eventMedia.volume);
     }
   }, [setMuted, onVolumeChanged]);
   var onCustomLoadStart = useCallback(function () {
@@ -1125,17 +1125,20 @@ var useScreenSizeFromElement = function useScreenSizeFromElement() {
   var fullHeight = height !== null ? height : calculatedHeight;
 
   var _ref6 = opts || {},
+      _ref6$screenWidth = _ref6.screenWidth,
+      screenWidth = _ref6$screenWidth === void 0 ? 320 : _ref6$screenWidth,
+      _ref6$screenHeight = _ref6.screenHeight,
+      screenHeight = _ref6$screenHeight === void 0 ? 480 : _ref6$screenHeight,
       _ref6$withoutMaxSize = _ref6.withoutMaxSize,
       withoutMaxSize = _ref6$withoutMaxSize === void 0 ? false : _ref6$withoutMaxSize,
       _ref6$landscapeMinHei = _ref6.landscapeMinHeight,
       landscapeMinHeight = _ref6$landscapeMinHei === void 0 ? 600 : _ref6$landscapeMinHei,
-      _ref6$landscapeHeight = _ref6.landscapeHeightRatio,
-      landscapeHeightRatio = _ref6$landscapeHeight === void 0 ? 2 / 3 : _ref6$landscapeHeight,
-      _ref6$screenRatio = _ref6.screenRatio,
-      screenRatio = _ref6$screenRatio === void 0 ? 320 / 480 : _ref6$screenRatio,
       _ref6$landscapeMinRat = _ref6.landscapeMinRatio,
-      landscapeMinRatio = _ref6$landscapeMinRat === void 0 ? 2 / 3 : _ref6$landscapeMinRat;
+      landscapeMinRatio = _ref6$landscapeMinRat === void 0 ? 2 / 3 : _ref6$landscapeMinRat,
+      _ref6$withoutScale = _ref6.withoutScale,
+      withoutScale = _ref6$withoutScale === void 0 ? false : _ref6$withoutScale;
 
+  var screenRatio = screenWidth / screenHeight;
   var elementRatio = fullWidth / fullHeight;
   var landscape = fullHeight > 0 && elementRatio > (landscapeMinRatio || screenRatio);
   var landscapeWithMaxSize = landscape && !withoutMaxSize;
@@ -1147,7 +1150,7 @@ var useScreenSizeFromElement = function useScreenSizeFromElement() {
     if (fullHeight < landscapeMinHeight) {
       menuOverScreen = true;
     } else {
-      finalHeight = Math.round(fullHeight * landscapeHeightRatio);
+      finalHeight = fullHeight - 100;
     }
 
     finalWidth = Math.round(finalHeight * screenRatio);
@@ -1161,15 +1164,17 @@ var useScreenSizeFromElement = function useScreenSizeFromElement() {
     finalHeight -= 1;
   }
 
+  var scale = finalWidth / screenWidth;
   var screenSize = useScreenSize(_objectSpread({
-    width: finalWidth,
-    height: finalHeight,
+    width: withoutScale ? finalWidth : screenWidth,
+    height: withoutScale ? finalHeight : finalHeight / scale,
     landscape: landscape,
     menuOverScreen: menuOverScreen
   }, opts));
   return {
     ref: ref,
-    screenSize: screenSize
+    screenSize: screenSize,
+    scale: !withoutScale ? scale : null
   };
 };
 

package/es/index.js

@@ -349,7 +349,8 @@ var callToAction = PropTypes$1.shape({
   active: PropTypes$1.bool,
   type: callToActionTypes,
   url: PropTypes$1.string,
-  label: textElement
+  label: textElement,
+  buttonStyle: boxStyle
 });
 var speaker = PropTypes$1.shape({
   id: PropTypes$1.string,

package/lib/components.js

@@ -2542,7 +2542,7 @@ PropTypes__default["default"].shape({
   radius: PropTypes__default["default"].number,
   color: color
 });
-PropTypes__default["default"].shape({
+var boxStyle = PropTypes__default["default"].shape({
   backgroundColor: color,
   borderRadius: PropTypes__default["default"].number,
   borderWidth: PropTypes__default["default"].number,
@@ -2655,7 +2655,8 @@ PropTypes__default["default"].shape({
   active: PropTypes__default["default"].bool,
   type: callToActionTypes,
   url: PropTypes__default["default"].string,
-  label: textElement
+  label: textElement,
+  buttonStyle: boxStyle
 });
 var speaker = PropTypes__default["default"].shape({
   id: PropTypes__default["default"].string,

package/lib/hooks.js

@@ -874,19 +874,19 @@ var useMediaApi = function useMediaApi() {
 
     setPlaying(true);
   }, [initialPlay, setPlaying, onPlay]);
-  var onCustomPause = react.useCallback(function () {
-    var media = ref.current;
+  var onCustomPause = react.useCallback(function (e) {
+    var eventMedia = e.currentTarget;
     setPlaying(false);
 
     if (onPause !== null) {
       onPause({
-        midway: media.currentTime > 0 && media.currentTime < media.duration
+        midway: eventMedia.currentTime > 0 && eventMedia.currentTime < eventMedia.duration
       });
     }
   }, [setPlaying, onPause]);
-  var onCustomEnded = react.useCallback(function () {
-    var media = ref.current;
-    media.currentTime = 0;
+  var onCustomEnded = react.useCallback(function (e) {
+    var eventMedia = e.currentTarget;
+    eventMedia.currentTime = 0;
 
     if (onEnded !== null) {
       onEnded();
@@ -894,15 +894,15 @@ var useMediaApi = function useMediaApi() {
 
     setInitialPlay(true);
   }, [setInitialPlay, onEnded]);
-  var onCustomTimeUpdate = react.useCallback(function () {
-    var media = ref.current;
-    setCurrentTime(media.currentTime);
+  var onCustomTimeUpdate = react.useCallback(function (e) {
+    var eventMedia = e.currentTarget;
+    setCurrentTime(eventMedia.currentTime);
 
     if (onTimeUpdate !== null) {
-      onTimeUpdate(media.currentTime);
+      onTimeUpdate(eventMedia.currentTime);
     }
 
-    var progress = media.currentTime / media.duration;
+    var progress = eventMedia.currentTime / eventMedia.duration;
     var currentSteps = progressStepsReached.current;
     var stepsToTrack = progressSteps.filter(function (step) {
       return progress > step && typeof currentSteps[step] === 'undefined';
@@ -915,27 +915,27 @@ var useMediaApi = function useMediaApi() {
       currentSteps[step] = true;
     });
   }, [setCurrentTime, onTimeUpdate, onProgressStep]);
-  var onCustomDurationChange = react.useCallback(function () {
-    var media = ref.current;
-    setDuration(media.duration);
+  var onCustomDurationChange = react.useCallback(function (e) {
+    var eventMedia = e.currentTarget;
+    setDuration(eventMedia.duration);
 
     if (onDurationChanged !== null) {
-      onDurationChanged(media.duration);
+      onDurationChanged(eventMedia.duration);
     }
   }, [setDuration, onDurationChanged]);
-  var onCustomSeeked = react.useCallback(function () {
-    var media = ref.current;
+  var onCustomSeeked = react.useCallback(function (e) {
+    var eventMedia = e.currentTarget;
 
     if (onSeeked !== null) {
-      onSeeked(media.currentTime);
+      onSeeked(eventMedia.currentTime);
     }
   }, [onSeeked]);
-  var onCustomVolumeChange = react.useCallback(function () {
-    var media = ref.current;
-    setMuted(media.muted);
+  var onCustomVolumeChange = react.useCallback(function (e) {
+    var eventMedia = e.currentTarget;
+    setMuted(eventMedia.muted);
 
     if (onVolumeChanged !== null) {
-      onVolumeChanged(media.muted, media.volume);
+      onVolumeChanged(eventMedia.muted, eventMedia.volume);
     }
   }, [setMuted, onVolumeChanged]);
   var onCustomLoadStart = react.useCallback(function () {
@@ -1161,17 +1161,20 @@ var useScreenSizeFromElement = function useScreenSizeFromElement() {
   var fullHeight = height !== null ? height : calculatedHeight;
 
   var _ref6 = opts || {},
+      _ref6$screenWidth = _ref6.screenWidth,
+      screenWidth = _ref6$screenWidth === void 0 ? 320 : _ref6$screenWidth,
+      _ref6$screenHeight = _ref6.screenHeight,
+      screenHeight = _ref6$screenHeight === void 0 ? 480 : _ref6$screenHeight,
       _ref6$withoutMaxSize = _ref6.withoutMaxSize,
       withoutMaxSize = _ref6$withoutMaxSize === void 0 ? false : _ref6$withoutMaxSize,
       _ref6$landscapeMinHei = _ref6.landscapeMinHeight,
       landscapeMinHeight = _ref6$landscapeMinHei === void 0 ? 600 : _ref6$landscapeMinHei,
-      _ref6$landscapeHeight = _ref6.landscapeHeightRatio,
-      landscapeHeightRatio = _ref6$landscapeHeight === void 0 ? 2 / 3 : _ref6$landscapeHeight,
-      _ref6$screenRatio = _ref6.screenRatio,
-      screenRatio = _ref6$screenRatio === void 0 ? 320 / 480 : _ref6$screenRatio,
       _ref6$landscapeMinRat = _ref6.landscapeMinRatio,
-      landscapeMinRatio = _ref6$landscapeMinRat === void 0 ? 2 / 3 : _ref6$landscapeMinRat;
+      landscapeMinRatio = _ref6$landscapeMinRat === void 0 ? 2 / 3 : _ref6$landscapeMinRat,
+      _ref6$withoutScale = _ref6.withoutScale,
+      withoutScale = _ref6$withoutScale === void 0 ? false : _ref6$withoutScale;
 
+  var screenRatio = screenWidth / screenHeight;
   var elementRatio = fullWidth / fullHeight;
   var landscape = fullHeight > 0 && elementRatio > (landscapeMinRatio || screenRatio);
   var landscapeWithMaxSize = landscape && !withoutMaxSize;
@@ -1183,7 +1186,7 @@ var useScreenSizeFromElement = function useScreenSizeFromElement() {
     if (fullHeight < landscapeMinHeight) {
       menuOverScreen = true;
     } else {
-      finalHeight = Math.round(fullHeight * landscapeHeightRatio);
+      finalHeight = fullHeight - 100;
     }
 
     finalWidth = Math.round(finalHeight * screenRatio);
@@ -1197,15 +1200,17 @@ var useScreenSizeFromElement = function useScreenSizeFromElement() {
     finalHeight -= 1;
   }
 
+  var scale = finalWidth / screenWidth;
   var screenSize = useScreenSize(_objectSpread__default["default"]({
-    width: finalWidth,
-    height: finalHeight,
+    width: withoutScale ? finalWidth : screenWidth,
+    height: withoutScale ? finalHeight : finalHeight / scale,
     landscape: landscape,
     menuOverScreen: menuOverScreen
   }, opts));
   return {
     ref: ref,
-    screenSize: screenSize
+    screenSize: screenSize,
+    scale: !withoutScale ? scale : null
   };
 };
 

package/lib/index.js

@@ -375,7 +375,8 @@ var callToAction = PropTypes__default["default"].shape({
   active: PropTypes__default["default"].bool,
   type: callToActionTypes,
   url: PropTypes__default["default"].string,
-  label: textElement
+  label: textElement,
+  buttonStyle: boxStyle
 });
 var speaker = PropTypes__default["default"].shape({
   id: PropTypes__default["default"].string,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/core",
-    "version": "0.3.34",
+    "version": "0.3.39",
     "description": "",
     "keywords": [
         "javascript"
@@ -132,5 +132,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "f8332cb20e6c8cf2cbdba28fc965877684174b2f"
+    "gitHead": "cda0a9924ae03347ffb2cdbc86d25b0f7e3ae70e"
 }