@shopgate/engage 7.29.3-beta.1 → 7.29.4
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/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@shopgate/engage",
|
|
3
|
-
"version": "7.29.
|
|
3
|
+
"version": "7.29.4",
|
|
4
4
|
"description": "Shopgate's ENGAGE library.",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"author": "Shopgate <support@shopgate.com>",
|
|
@@ -17,12 +17,12 @@
|
|
|
17
17
|
"dependencies": {
|
|
18
18
|
"@emotion/react": "^11.14.0",
|
|
19
19
|
"@shopgate/native-modules": "1.0.0-beta.25",
|
|
20
|
-
"@shopgate/pwa-common": "7.29.
|
|
21
|
-
"@shopgate/pwa-common-commerce": "7.29.
|
|
22
|
-
"@shopgate/pwa-core": "7.29.
|
|
23
|
-
"@shopgate/pwa-ui-ios": "7.29.
|
|
24
|
-
"@shopgate/pwa-ui-material": "7.29.
|
|
25
|
-
"@shopgate/pwa-ui-shared": "7.29.
|
|
20
|
+
"@shopgate/pwa-common": "7.29.4",
|
|
21
|
+
"@shopgate/pwa-common-commerce": "7.29.4",
|
|
22
|
+
"@shopgate/pwa-core": "7.29.4",
|
|
23
|
+
"@shopgate/pwa-ui-ios": "7.29.4",
|
|
24
|
+
"@shopgate/pwa-ui-material": "7.29.4",
|
|
25
|
+
"@shopgate/pwa-ui-shared": "7.29.4",
|
|
26
26
|
"@stripe/react-stripe-js": "^1.16.5",
|
|
27
27
|
"@stripe/stripe-js": "^1.3.1",
|
|
28
28
|
"@virtuous/conductor": "~2.5.0",
|
|
@@ -1,7 +1,9 @@
|
|
|
1
|
-
function _slicedToArray(arr,i){return _arrayWithHoles(arr)||_iterableToArrayLimit(arr,i)||_nonIterableRest();}function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance");}function _iterableToArrayLimit(arr,i){var _arr=[];var _n=true;var _d=false;var _e=undefined;try{for(var _i=arr[Symbol.iterator](),_s;!(_n=(_s=_i.next()).done);_n=true){_arr.push(_s.value);if(i&&_arr.length===i)break;}}catch(err){_d=true;_e=err;}finally{try{if(!_n&&_i["return"]!=null)_i["return"]();}finally{if(_d)throw _e;}}return _arr;}function _arrayWithHoles(arr){if(Array.isArray(arr))return arr;}import React,{useEffect,useMemo,useState}from'react';import{makeStyles}from'@shopgate/engage/styles';import{useReduceMotion}from'@shopgate/engage/a11y/hooks';import{usePrevious,useAppEventOnReturnFromBackground}from'@shopgate/engage/core/hooks';import{useVideoWidget}from"./hooks";import{isHttpsUrl}from"../../helpers";var useStyles=makeStyles()(function(_theme,_ref){var borderRadius=_ref.borderRadius;return{root:{width:'100%',display:'flex',overflow:'hidden',borderRadius:borderRadius},video:{// Add additional pixels to the width to prevent visible horizontal hairlines on some browsers
|
|
2
|
-
width:'calc(100% +
|
|
1
|
+
function _slicedToArray(arr,i){return _arrayWithHoles(arr)||_iterableToArrayLimit(arr,i)||_nonIterableRest();}function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance");}function _iterableToArrayLimit(arr,i){var _arr=[];var _n=true;var _d=false;var _e=undefined;try{for(var _i=arr[Symbol.iterator](),_s;!(_n=(_s=_i.next()).done);_n=true){_arr.push(_s.value);if(i&&_arr.length===i)break;}}catch(err){_d=true;_e=err;}finally{try{if(!_n&&_i["return"]!=null)_i["return"]();}finally{if(_d)throw _e;}}return _arr;}function _arrayWithHoles(arr){if(Array.isArray(arr))return arr;}import React,{useEffect,useMemo,useState}from'react';import{makeStyles}from'@shopgate/engage/styles';import{useReduceMotion}from'@shopgate/engage/a11y/hooks';import{usePrevious,useAppEventOnReturnFromBackground}from'@shopgate/engage/core/hooks';import{ConditionalWrapper,Link}from'@shopgate/engage/components';import{useVideoWidget}from"./hooks";import{isHttpsUrl}from"../../helpers";var useStyles=makeStyles()(function(_theme,_ref){var borderRadius=_ref.borderRadius;return{root:{width:'100%',display:'flex',overflow:'hidden',borderRadius:borderRadius},video:{// Add additional pixels to the width to prevent visible horizontal hairlines on some browsers
|
|
2
|
+
width:'calc(100% + 3px)',display:'flex'}};});/**
|
|
3
3
|
* The VideoWidget is used to display a video.
|
|
4
4
|
* @returns {JSX.Element}
|
|
5
|
-
*/var Video=function Video(){var _useVideoWidget=useVideoWidget(),url=_useVideoWidget.url,muted=_useVideoWidget.muted,loop=_useVideoWidget.loop,controls=_useVideoWidget.controls,autoplay=_useVideoWidget.autoplay,borderRadius=_useVideoWidget.borderRadius;var _useStyles=useStyles({borderRadius:borderRadius}),classes=_useStyles.classes;var reduceMotion=useReduceMotion();var _useState=useState(false),_useState2=_slicedToArray(_useState,2),hasError=_useState2[0],setHasError=_useState2[1];var videoRef=React.useRef(null);var prevUrl=usePrevious(url);var isValidUrl=useMemo(function(){return url?isHttpsUrl(url):false;},[url])
|
|
6
|
-
|
|
7
|
-
|
|
5
|
+
*/var Video=function Video(){var _useVideoWidget=useVideoWidget(),url=_useVideoWidget.url,muted=_useVideoWidget.muted,loop=_useVideoWidget.loop,controls=_useVideoWidget.controls,autoplay=_useVideoWidget.autoplay,borderRadius=_useVideoWidget.borderRadius,link=_useVideoWidget.link;var _useStyles=useStyles({borderRadius:borderRadius}),classes=_useStyles.classes;var reduceMotion=useReduceMotion();var _useState=useState(false),_useState2=_slicedToArray(_useState,2),hasError=_useState2[0],setHasError=_useState2[1];var videoRef=React.useRef(null);var prevUrl=usePrevious(url);var isValidUrl=useMemo(function(){return url?isHttpsUrl(url):false;},[url]);var showControls=useMemo(function(){if(link){// When a link is set we never show controls to avoid side effects due to two clickable areas.
|
|
6
|
+
return false;}return!autoplay||reduceMotion?true:controls;},[autoplay,controls,link,reduceMotion]);// Resume video playback when app returned from background
|
|
7
|
+
useAppEventOnReturnFromBackground(function(){if(!videoRef.current||reduceMotion||!autoplay){return;}videoRef.current.play();});useEffect(function(){if(!videoRef.current){return;}if(reduceMotion){// Pause playback when reduced motion settings changed after video was rendered
|
|
8
|
+
videoRef.current.pause();return;}if(autoplay){videoRef.current.play();}else{videoRef.current.pause();videoRef.current.currentTime=0;}},[autoplay,reduceMotion]);useEffect(function(){if(!url||url!==prevUrl){setHasError(false);}},[hasError,prevUrl,url]);if(!url||hasError||!isValidUrl)return null;return React.createElement("div",{className:classes.root},React.createElement(ConditionalWrapper,{condition:!!link,wrapper:function wrapper(children){return React.createElement(Link,{href:link},children);}},React.createElement("video",{ref:videoRef// Set play position to 0.001s to guarantee that there is always a frame shown
|
|
9
|
+
,src:"".concat(url,"#t=0.001"),muted:muted,controls:showControls,autoPlay:reduceMotion?false:autoplay,className:classes.video,preload:"auto",playsInline:true,loop:loop,"aria-hidden":true,onError:function onError(){setHasError(true);}},React.createElement("track",{kind:"captions",src:"",srcLang:"de",label:"Deutsch"}))));};export default Video;
|
|
@@ -5,10 +5,12 @@ import{useWidget}from'@shopgate/engage/page/hooks';import{resolveBorderRadiusFro
|
|
|
5
5
|
* @property {boolean} [loop] Whether the video should loop.
|
|
6
6
|
* @property {boolean} [controls] Whether the video should display controls.
|
|
7
7
|
* @property {boolean} [autoplay] Whether the video should autoplay.
|
|
8
|
+
* @property {string} [borderRadius] The border radius preset.
|
|
9
|
+
* @property {string} [link] The link URL.
|
|
8
10
|
*/ /**
|
|
9
11
|
* @typedef {ReturnType< typeof import('@shopgate/engage/page/hooks')
|
|
10
12
|
* .useWidget<VideoWidgetConfig> >} UseWidgetReturnType
|
|
11
13
|
*/ // eslint-disable-next-line valid-jsdoc
|
|
12
14
|
/**
|
|
13
15
|
* Hook to access the Video widget configuration and data.
|
|
14
|
-
*/export var useVideoWidget=function useVideoWidget(){/** @type {UseWidgetReturnType} */var _useWidget=useWidget(),config=_useWidget.config;var _ref=config||{},url=_ref.url,muted=_ref.muted,loop=_ref.loop,controls=_ref.controls,autoplay=_ref.autoplay,borderRadius=_ref.borderRadius,borderRadiusCustom=_ref.borderRadiusCustom;var borderRadiusResolved=resolveBorderRadiusFromWidgetConfig({borderRadius:borderRadius,borderRadiusCustom:borderRadiusCustom});return{url:url,muted:muted,loop:loop,controls:controls,autoplay:autoplay,borderRadius:borderRadiusResolved};};
|
|
16
|
+
*/export var useVideoWidget=function useVideoWidget(){/** @type {UseWidgetReturnType} */var _useWidget=useWidget(),config=_useWidget.config;var _ref=config||{},url=_ref.url,muted=_ref.muted,loop=_ref.loop,controls=_ref.controls,autoplay=_ref.autoplay,borderRadius=_ref.borderRadius,borderRadiusCustom=_ref.borderRadiusCustom,link=_ref.link;var borderRadiusResolved=resolveBorderRadiusFromWidgetConfig({borderRadius:borderRadius,borderRadiusCustom:borderRadiusCustom});return{url:url,muted:muted,loop:loop,controls:controls,autoplay:autoplay,borderRadius:borderRadiusResolved,link:link};};
|
|
@@ -16,7 +16,7 @@ function _defineProperty(obj,key,value){if(key in obj){Object.defineProperty(obj
|
|
|
16
16
|
* console.log(sorted); // { xs: 0, sm: 600, md: 960 }
|
|
17
17
|
*/var sortBreakpointsValues=function sortBreakpointsValues(values){var breakpointsAsArray=Object.keys(values).map(function(key){return{key:key,val:values[key]};})||[];breakpointsAsArray.sort(function(breakpoint1,breakpoint2){return breakpoint1.val-breakpoint2.val;});return breakpointsAsArray.reduce(function(acc,obj){return _extends({},acc,_defineProperty({},obj.key,obj.val));},{});};var unit='px';var step=5;/**
|
|
18
18
|
* Creates a set of media query functions based on the provided breakpoints.
|
|
19
|
-
*/var createBreakpoints=function createBreakpoints(){/** @type {import('./createBreakpoints').Breakpoints['values]} */var values={// Extra small – all mobile phones
|
|
19
|
+
*/var createBreakpoints=function createBreakpoints(){/** @type {import('./createBreakpoints').Breakpoints['values']} */var values={// Extra small – all mobile phones
|
|
20
20
|
xs:0,// Small – large phones in landscape
|
|
21
21
|
sm:480,// Medium – tablets
|
|
22
22
|
md:768,// Large – small laptops
|