@megafon/ui-shared 3.2.1 → 3.3.0

package/CHANGELOG.md

@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [3.3.0](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-shared@3.2.2...@megafon/ui-shared@3.3.0) (2022-04-18)
+
+
+### Features
+
+* **videobanner:** add proprety for mobile video, use picture for background image ([c21c927](https://github.com/MegafonWebLab/megafon-ui/commit/c21c9278d2ff1e192195a5113d43d50753fd02c5))
+
+
+
+
+
+## [3.2.2](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-shared@3.2.1...@megafon/ui-shared@3.2.2) (2022-04-13)
+
+**Note:** Version bump only for package @megafon/ui-shared
+
+
+
+
+
 ## [3.2.1](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-shared@3.2.0...@megafon/ui-shared@3.2.1) (2022-04-11)
 
 

package/dist/es/components/VideoBanner/VideoBanner.css

@@ -84,9 +84,8 @@ h5 {
 .mfui-video-banner__background-image {
   width: 100%;
   height: 100%;
-  background-repeat: no-repeat;
-  background-position: center;
-  background-size: cover;
+  -o-object-fit: cover;
+     object-fit: cover;
 }
 .mfui-video-banner__content {
   position: relative;

package/dist/es/components/VideoBanner/VideoBanner.d.ts

@@ -78,6 +78,8 @@ interface IVideoBannerProps {
     videoSrc?: string;
     /** Тип видео */
     videoType?: VideoType;
+    /** Разрешить проигрывать видео на мобильном разрешении */
+    videoMobile?: boolean;
     /** Наличие звука в видео */
     isMuted?: boolean;
     /** Изображение для мобильного разрешения */

package/dist/es/components/VideoBanner/VideoBanner.js

@@ -63,20 +63,17 @@ var VideoBanner = function VideoBanner(_ref2) {
       content = _ref2.content,
       _ref2$isMuted = _ref2.isMuted,
       isMuted = _ref2$isMuted === void 0 ? true : _ref2$isMuted,
-      breadcrumbs = _ref2.breadcrumbs;
+      breadcrumbs = _ref2.breadcrumbs,
+      _ref2$videoMobile = _ref2.videoMobile,
+      videoMobile = _ref2$videoMobile === void 0 ? false : _ref2$videoMobile;
 
   var _React$useState = React.useState(true),
       _React$useState2 = _slicedToArray(_React$useState, 2),
       isMobile = _React$useState2[0],
       setIsMobile = _React$useState2[1];
 
-  var _React$useState3 = React.useState(imageMobile),
-      _React$useState4 = _slicedToArray(_React$useState3, 2),
-      imageSrc = _React$useState4[0],
-      setImageSrc = _React$useState4[1];
-
   var isVideoData = !!videoSrc && !!videoType;
-  var isRenderVideo = !isMobile && isVideoData;
+  var isRenderVideo = (!isMobile || videoMobile) && isVideoData;
   var renderContent = React.useCallback(function (_ref3) {
     var title = _ref3.title,
         description = _ref3.description,
@@ -189,27 +186,8 @@ var VideoBanner = function VideoBanner(_ref2) {
     }
   }, [videoType, videoSrc, isMuted, classes.video]);
   React.useEffect(function () {
-    var getImageSrc = function getImageSrc() {
-      var windowWidth = window.innerWidth;
-
-      switch (true) {
-        case windowWidth >= breakpoints.DESKTOP_MIDDLE_START:
-          return imageDesktopWide;
-
-        case windowWidth >= breakpoints.DESKTOP_SMALL_START && windowWidth <= breakpoints.DESKTOP_SMALL_END:
-          return imageDesktop;
-
-        case windowWidth >= breakpoints.MOBILE_BIG_START && windowWidth <= breakpoints.MOBILE_BIG_END:
-          return imageTablet;
-
-        default:
-          return imageMobile;
-      }
-    };
-
     var resizeHandler = function resizeHandler() {
       setIsMobile(window.innerWidth < breakpoints.DESKTOP_SMALL_START);
-      setImageSrc(getImageSrc());
     };
 
     var resizeHandlerThrottled = throttle(resizeHandler, throttleTime.resize);
@@ -218,7 +196,7 @@ var VideoBanner = function VideoBanner(_ref2) {
     return function () {
       window.removeEventListener('resize', resizeHandlerThrottled);
     };
-  }, [imageDesktop, imageDesktopWide, imageMobile, imageTablet]);
+  }, [setIsMobile]);
   return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     className: cn([className, classes.root]),
     ref: rootRef
@@ -235,12 +213,20 @@ var VideoBanner = function VideoBanner(_ref2) {
     classes: {
       item: classes.breadcrumbs
     }
-  }), content && renderContent(content), isRenderVideo && renderVideo(), !isRenderVideo && /*#__PURE__*/React.createElement("div", {
-    style: {
-      backgroundImage: "url(".concat(imageSrc, ")")
-    },
-    className: cn('background-image')
-  }))));
+  }), content && renderContent(content), isRenderVideo && renderVideo(), !isRenderVideo && /*#__PURE__*/React.createElement("picture", null, /*#__PURE__*/React.createElement("source", {
+    media: "(min-width: ".concat(breakpoints.DESKTOP_MIDDLE_START, "px)"),
+    srcSet: imageDesktopWide
+  }), /*#__PURE__*/React.createElement("source", {
+    media: "(min-width: ".concat(breakpoints.DESKTOP_SMALL_START, "px)"),
+    srcSet: imageDesktop
+  }), /*#__PURE__*/React.createElement("source", {
+    media: "(min-width: ".concat(breakpoints.MOBILE_BIG_START, "px)"),
+    srcSet: imageTablet
+  }), /*#__PURE__*/React.createElement("img", {
+    className: cn('background-image'),
+    src: imageMobile,
+    alt: ""
+  })))));
 };
 
 VideoBanner.propTypes = {
@@ -263,6 +249,7 @@ VideoBanner.propTypes = {
   }), PropTypes.any])]),
   videoSrc: PropTypes.string,
   videoType: PropTypes.oneOf(Object.values(VideoType)),
+  videoMobile: PropTypes.bool,
   content: PropTypes.shape({
     title: PropTypes.string.isRequired,
     description: PropTypes.string.isRequired,

package/dist/lib/components/VideoBanner/VideoBanner.css

@@ -84,9 +84,8 @@ h5 {
 .mfui-video-banner__background-image {
   width: 100%;
   height: 100%;
-  background-repeat: no-repeat;
-  background-position: center;
-  background-size: cover;
+  -o-object-fit: cover;
+     object-fit: cover;
 }
 .mfui-video-banner__content {
   position: relative;

package/dist/lib/components/VideoBanner/VideoBanner.d.ts

@@ -78,6 +78,8 @@ interface IVideoBannerProps {
     videoSrc?: string;
     /** Тип видео */
     videoType?: VideoType;
+    /** Разрешить проигрывать видео на мобильном разрешении */
+    videoMobile?: boolean;
     /** Наличие звука в видео */
     isMuted?: boolean;
     /** Изображение для мобильного разрешения */

package/dist/lib/components/VideoBanner/VideoBanner.js

@@ -95,20 +95,17 @@ var VideoBanner = function VideoBanner(_ref2) {
       content = _ref2.content,
       _ref2$isMuted = _ref2.isMuted,
       isMuted = _ref2$isMuted === void 0 ? true : _ref2$isMuted,
-      breadcrumbs = _ref2.breadcrumbs;
+      breadcrumbs = _ref2.breadcrumbs,
+      _ref2$videoMobile = _ref2.videoMobile,
+      videoMobile = _ref2$videoMobile === void 0 ? false : _ref2$videoMobile;
 
   var _React$useState = _react["default"].useState(true),
       _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
       isMobile = _React$useState2[0],
       setIsMobile = _React$useState2[1];
 
-  var _React$useState3 = _react["default"].useState(imageMobile),
-      _React$useState4 = (0, _slicedToArray2["default"])(_React$useState3, 2),
-      imageSrc = _React$useState4[0],
-      setImageSrc = _React$useState4[1];
-
   var isVideoData = !!videoSrc && !!videoType;
-  var isRenderVideo = !isMobile && isVideoData;
+  var isRenderVideo = (!isMobile || videoMobile) && isVideoData;
 
   var renderContent = _react["default"].useCallback(function (_ref3) {
     var title = _ref3.title,
@@ -224,27 +221,8 @@ var VideoBanner = function VideoBanner(_ref2) {
   }, [videoType, videoSrc, isMuted, classes.video]);
 
   _react["default"].useEffect(function () {
-    var getImageSrc = function getImageSrc() {
-      var windowWidth = window.innerWidth;
-
-      switch (true) {
-        case windowWidth >= _uiHelpers.breakpoints.DESKTOP_MIDDLE_START:
-          return imageDesktopWide;
-
-        case windowWidth >= _uiHelpers.breakpoints.DESKTOP_SMALL_START && windowWidth <= _uiHelpers.breakpoints.DESKTOP_SMALL_END:
-          return imageDesktop;
-
-        case windowWidth >= _uiHelpers.breakpoints.MOBILE_BIG_START && windowWidth <= _uiHelpers.breakpoints.MOBILE_BIG_END:
-          return imageTablet;
-
-        default:
-          return imageMobile;
-      }
-    };
-
     var resizeHandler = function resizeHandler() {
       setIsMobile(window.innerWidth < _uiHelpers.breakpoints.DESKTOP_SMALL_START);
-      setImageSrc(getImageSrc());
     };
 
     var resizeHandlerThrottled = (0, _lodash["default"])(resizeHandler, _throttleTime["default"].resize);
@@ -253,7 +231,7 @@ var VideoBanner = function VideoBanner(_ref2) {
     return function () {
       window.removeEventListener('resize', resizeHandlerThrottled);
     };
-  }, [imageDesktop, imageDesktopWide, imageMobile, imageTablet]);
+  }, [setIsMobile]);
 
   return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     className: cn([className, classes.root]),
@@ -271,12 +249,20 @@ var VideoBanner = function VideoBanner(_ref2) {
     classes: {
       item: classes.breadcrumbs
     }
-  }), content && renderContent(content), isRenderVideo && renderVideo(), !isRenderVideo && /*#__PURE__*/_react["default"].createElement("div", {
-    style: {
-      backgroundImage: "url(".concat(imageSrc, ")")
-    },
-    className: cn('background-image')
-  }))));
+  }), content && renderContent(content), isRenderVideo && renderVideo(), !isRenderVideo && /*#__PURE__*/_react["default"].createElement("picture", null, /*#__PURE__*/_react["default"].createElement("source", {
+    media: "(min-width: ".concat(_uiHelpers.breakpoints.DESKTOP_MIDDLE_START, "px)"),
+    srcSet: imageDesktopWide
+  }), /*#__PURE__*/_react["default"].createElement("source", {
+    media: "(min-width: ".concat(_uiHelpers.breakpoints.DESKTOP_SMALL_START, "px)"),
+    srcSet: imageDesktop
+  }), /*#__PURE__*/_react["default"].createElement("source", {
+    media: "(min-width: ".concat(_uiHelpers.breakpoints.MOBILE_BIG_START, "px)"),
+    srcSet: imageTablet
+  }), /*#__PURE__*/_react["default"].createElement("img", {
+    className: cn('background-image'),
+    src: imageMobile,
+    alt: ""
+  })))));
 };
 
 VideoBanner.propTypes = {
@@ -299,6 +285,7 @@ VideoBanner.propTypes = {
   }), PropTypes.any])]),
   videoSrc: PropTypes.string,
   videoType: PropTypes.oneOf(Object.values(VideoType)),
+  videoMobile: PropTypes.bool,
   content: PropTypes.shape({
     title: PropTypes.string.isRequired,
     description: PropTypes.string.isRequired,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@megafon/ui-shared",
-  "version": "3.2.1",
+  "version": "3.3.0",
   "files": [
     "dist"
   ],
@@ -52,7 +52,7 @@
     "@babel/preset-env": "^7.8.6",
     "@babel/preset-react": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
-    "@megafon/ui-icons": "^1.2.0",
+    "@megafon/ui-icons": "^1.2.1",
     "@svgr/core": "^2.4.1",
     "@types/enzyme": "^3.10.5",
     "@types/enzyme-adapter-react-16": "^1.0.6",
@@ -82,7 +82,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.8.4",
-    "@megafon/ui-core": "^3.5.1",
+    "@megafon/ui-core": "^3.5.3",
     "@megafon/ui-helpers": "^2.1.2",
     "core-js": "^3.6.4",
     "htmr": "^0.9.2",
@@ -90,5 +90,5 @@
     "prop-types": "^15.7.2",
     "swiper": "^6.5.6"
   },
-  "gitHead": "f5ab6a57d56a26ac5ca11697e1ca650c053b6214"
+  "gitHead": "7bfc4700247bbc8c96e1878511b4c5919abb6325"
 }