@megafon/ui-shared 6.7.0 → 6.9.0

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

@@ -24,7 +24,9 @@ export interface IButtonLinkBoxProps {
     /** Добавляет атрибут download для тега <a> компонента Button */
     buttonDownload?: boolean;
     /** Цвет кнопки */
-    buttonColor?: 'green' | 'purple';
+    buttonColor?: 'green' | 'purple' | 'green-soft' | 'purple-soft' | 'black';
+    /** Тип кнопки */
+    buttonType?: 'primary' | 'outline';
     /** Target свойство кнопки */
     buttonTarget?: '_self' | '_blank' | '_parent' | '_top';
     /** Rel - атрибут тега <a> для кнопки */

package/dist/es/components/ButtonLinkBox/ButtonLinkBox.js

@@ -15,6 +15,8 @@ var ButtonLinkBox = function ButtonLinkBox(_ref) {
       buttonDownload = _ref.buttonDownload,
       _ref$buttonColor = _ref.buttonColor,
       buttonColor = _ref$buttonColor === void 0 ? 'green' : _ref$buttonColor,
+      _ref$buttonType = _ref.buttonType,
+      buttonType = _ref$buttonType === void 0 ? 'primary' : _ref$buttonType,
       buttonRel = _ref.buttonRel,
       linkTitle = _ref.linkTitle,
       linkUrl = _ref.linkUrl,
@@ -42,6 +44,7 @@ var ButtonLinkBox = function ButtonLinkBox(_ref) {
     className: classes.button,
     href: buttonUrl,
     theme: buttonColor,
+    type: buttonType,
     onClick: onButtonClick,
     target: buttonTarget,
     download: buttonDownload,
@@ -80,7 +83,8 @@ ButtonLinkBox.propTypes = {
   buttonTitle: PropTypes.string,
   buttonUrl: PropTypes.string,
   buttonDownload: PropTypes.bool,
-  buttonColor: PropTypes.oneOf(['green', 'purple']),
+  buttonColor: PropTypes.oneOf(['green', 'purple', 'green-soft', 'purple-soft', 'black']),
+  buttonType: PropTypes.oneOf(['primary', 'outline']),
   buttonRel: PropTypes.string,
   linkTitle: PropTypes.string,
   linkUrl: PropTypes.string,

package/dist/es/components/VideoBlock/VideoBlock.css

@@ -82,7 +82,9 @@ h5 {
   -webkit-filter: brightness(108.5%);
           filter: brightness(108.5%);
 }
-.mfui-v6-video-block__youtube {
+.mfui-v6-video-block__youtube,
+.mfui-v6-video-block__rutube,
+.mfui-v6-video-block__vk {
   position: relative;
   padding-bottom: 56.25%;
 }

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

@@ -18,6 +18,8 @@ export interface IContent {
 }
 export declare const VideoTypes: {
     readonly YOUTUBE: "youtube";
+    readonly RUTUBE: "rutube";
+    readonly VK: "vk";
     readonly VIDEO: "video";
 };
 declare type VideoType = typeof VideoTypes[keyof typeof VideoTypes];
@@ -41,7 +43,7 @@ export interface IVideoBlockProps {
     content?: IContent;
     /** Тип видео */
     videoType?: VideoType;
-    /** Источник видео. Если видео с youtube, то необходимо указать id */
+    /** Источник видео. Если видео с youtube или rutube, то необходимо указать id. Для видео из VK необходимо указать полный id вместе с _ (например: 22822305_456241864) */
     videoSrc: string;
     /** Наличие звука в видео */
     isMuted?: boolean;

package/dist/es/components/VideoBlock/VideoBlock.js

@@ -1,5 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import "core-js/modules/es.array.concat.js";
+import "core-js/modules/es.regexp.exec.js";
+import "core-js/modules/es.string.split.js";
 import "core-js/modules/es.symbol.js";
 import "core-js/modules/es.symbol.description.js";
 import "core-js/modules/es.object.values.js";
@@ -10,6 +13,8 @@ import PropTypes from 'prop-types';
 import "./VideoBlock.css";
 export var VideoTypes = {
   YOUTUBE: 'youtube',
+  RUTUBE: 'rutube',
+  VK: 'vk',
   VIDEO: 'video'
 };
 export var testIdPrefix = 'VideoBlock';
@@ -36,6 +41,40 @@ var VideoBlock = function VideoBlock(_ref) {
       playsinline = _ref$playsinline === void 0 ? false : _ref$playsinline,
       _ref$fixWhiteVideoBac = _ref.fixWhiteVideoBackground,
       fixWhiteVideoBackground = _ref$fixWhiteVideoBac === void 0 ? false : _ref$fixWhiteVideoBac;
+  var rutubeRef = React.useRef(null);
+
+  var autoPlayRutube = function autoPlayRutube() {
+    var current = rutubeRef.current;
+
+    if (current == null) {
+      return;
+    }
+
+    window.IntersectionObserver && new window.IntersectionObserver(function (entries, obs) {
+      var _a;
+
+      var _entries = _slicedToArray(entries, 1),
+          entry = _entries[0];
+
+      if (entry && entry.isIntersecting) {
+        (_a = current.contentWindow) === null || _a === void 0 ? void 0 : _a.postMessage(JSON.stringify({
+          type: 'player:play',
+          data: {}
+        }), '*');
+        obs.disconnect();
+      }
+    }, {
+      threshold: 0.5
+    }).observe(current);
+  };
+
+  React.useEffect(function () {
+    if (!isAutoplay || videoType !== VideoTypes.RUTUBE) {
+      return;
+    }
+
+    autoPlayRutube();
+  }, [isAutoplay, videoType]);
   var renderVideo = React.useCallback(function () {
     switch (videoType) {
       case VideoTypes.YOUTUBE:
@@ -66,6 +105,54 @@ var VideoBlock = function VideoBlock(_ref) {
           }));
         }
 
+      case VideoTypes.RUTUBE:
+        {
+          var _src = "https://rutube.ru/play/embed/".concat(videoSrc, "?");
+
+          return /*#__PURE__*/React.createElement("div", {
+            className: cn('rutube')
+          }, /*#__PURE__*/React.createElement("iframe", {
+            className: cn('iframe'),
+            ref: rutubeRef,
+            src: _src,
+            width: "100%",
+            height: "100%",
+            frameBorder: "0",
+            allow: "autoplay",
+            title: "iframe",
+            allowFullScreen: true,
+            "data-testid": "".concat(testIdPrefix, "-iframe-video")
+          }));
+        }
+
+      case VideoTypes.VK:
+        {
+          var _videoSrc$split = videoSrc.split('_'),
+              _videoSrc$split2 = _slicedToArray(_videoSrc$split, 2),
+              oid = _videoSrc$split2[0],
+              id = _videoSrc$split2[1];
+
+          var _url = "https://vk.com/video_ext.php?oid=-".concat(oid, "}&id=").concat(id, "&");
+
+          var _autoplay = "&autoplay=".concat(isAutoplay ? 1 : 0);
+
+          var _src2 = "".concat(_url).concat(_autoplay);
+
+          return /*#__PURE__*/React.createElement("div", {
+            className: cn('vk')
+          }, /*#__PURE__*/React.createElement("iframe", {
+            className: cn('iframe'),
+            src: _src2,
+            width: "100%",
+            height: "100%",
+            frameBorder: "0",
+            allow: "autoplay",
+            title: "iframe",
+            allowFullScreen: true,
+            "data-testid": "".concat(testIdPrefix, "-iframe-video")
+          }));
+        }
+
       case VideoTypes.VIDEO:
         {
           return (

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

@@ -24,7 +24,9 @@ export interface IButtonLinkBoxProps {
     /** Добавляет атрибут download для тега <a> компонента Button */
     buttonDownload?: boolean;
     /** Цвет кнопки */
-    buttonColor?: 'green' | 'purple';
+    buttonColor?: 'green' | 'purple' | 'green-soft' | 'purple-soft' | 'black';
+    /** Тип кнопки */
+    buttonType?: 'primary' | 'outline';
     /** Target свойство кнопки */
     buttonTarget?: '_self' | '_blank' | '_parent' | '_top';
     /** Rel - атрибут тега <a> для кнопки */

package/dist/lib/components/ButtonLinkBox/ButtonLinkBox.js

@@ -35,6 +35,8 @@ var ButtonLinkBox = function ButtonLinkBox(_ref) {
       buttonDownload = _ref.buttonDownload,
       _ref$buttonColor = _ref.buttonColor,
       buttonColor = _ref$buttonColor === void 0 ? 'green' : _ref$buttonColor,
+      _ref$buttonType = _ref.buttonType,
+      buttonType = _ref$buttonType === void 0 ? 'primary' : _ref$buttonType,
       buttonRel = _ref.buttonRel,
       linkTitle = _ref.linkTitle,
       linkUrl = _ref.linkUrl,
@@ -62,6 +64,7 @@ var ButtonLinkBox = function ButtonLinkBox(_ref) {
     className: classes.button,
     href: buttonUrl,
     theme: buttonColor,
+    type: buttonType,
     onClick: onButtonClick,
     target: buttonTarget,
     download: buttonDownload,
@@ -100,7 +103,8 @@ ButtonLinkBox.propTypes = {
   buttonTitle: PropTypes.string,
   buttonUrl: PropTypes.string,
   buttonDownload: PropTypes.bool,
-  buttonColor: PropTypes.oneOf(['green', 'purple']),
+  buttonColor: PropTypes.oneOf(['green', 'purple', 'green-soft', 'purple-soft', 'black']),
+  buttonType: PropTypes.oneOf(['primary', 'outline']),
   buttonRel: PropTypes.string,
   linkTitle: PropTypes.string,
   linkUrl: PropTypes.string,

package/dist/lib/components/VideoBlock/VideoBlock.css

@@ -82,7 +82,9 @@ h5 {
   -webkit-filter: brightness(108.5%);
           filter: brightness(108.5%);
 }
-.mfui-v6-video-block__youtube {
+.mfui-v6-video-block__youtube,
+.mfui-v6-video-block__rutube,
+.mfui-v6-video-block__vk {
   position: relative;
   padding-bottom: 56.25%;
 }

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

@@ -18,6 +18,8 @@ export interface IContent {
 }
 export declare const VideoTypes: {
     readonly YOUTUBE: "youtube";
+    readonly RUTUBE: "rutube";
+    readonly VK: "vk";
     readonly VIDEO: "video";
 };
 declare type VideoType = typeof VideoTypes[keyof typeof VideoTypes];
@@ -41,7 +43,7 @@ export interface IVideoBlockProps {
     content?: IContent;
     /** Тип видео */
     videoType?: VideoType;
-    /** Источник видео. Если видео с youtube, то необходимо указать id */
+    /** Источник видео. Если видео с youtube или rutube, то необходимо указать id. Для видео из VK необходимо указать полный id вместе с _ (например: 22822305_456241864) */
     videoSrc: string;
     /** Наличие звука в видео */
     isMuted?: boolean;

package/dist/lib/components/VideoBlock/VideoBlock.js

@@ -7,8 +7,14 @@ exports["default"] = exports.testIdPrefix = exports.VideoTypes = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
 require("core-js/modules/es.array.concat.js");
 
+require("core-js/modules/es.regexp.exec.js");
+
+require("core-js/modules/es.string.split.js");
+
 require("core-js/modules/es.symbol.js");
 
 require("core-js/modules/es.symbol.description.js");
@@ -27,6 +33,8 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
 
 var VideoTypes = {
   YOUTUBE: 'youtube',
+  RUTUBE: 'rutube',
+  VK: 'vk',
   VIDEO: 'video'
 };
 exports.VideoTypes = VideoTypes;
@@ -56,6 +64,41 @@ var VideoBlock = function VideoBlock(_ref) {
       _ref$fixWhiteVideoBac = _ref.fixWhiteVideoBackground,
       fixWhiteVideoBackground = _ref$fixWhiteVideoBac === void 0 ? false : _ref$fixWhiteVideoBac;
 
+  var rutubeRef = _react["default"].useRef(null);
+
+  var autoPlayRutube = function autoPlayRutube() {
+    var current = rutubeRef.current;
+
+    if (current == null) {
+      return;
+    }
+
+    window.IntersectionObserver && new window.IntersectionObserver(function (entries, obs) {
+      var _a;
+
+      var _entries = (0, _slicedToArray2["default"])(entries, 1),
+          entry = _entries[0];
+
+      if (entry && entry.isIntersecting) {
+        (_a = current.contentWindow) === null || _a === void 0 ? void 0 : _a.postMessage(JSON.stringify({
+          type: 'player:play',
+          data: {}
+        }), '*');
+        obs.disconnect();
+      }
+    }, {
+      threshold: 0.5
+    }).observe(current);
+  };
+
+  _react["default"].useEffect(function () {
+    if (!isAutoplay || videoType !== VideoTypes.RUTUBE) {
+      return;
+    }
+
+    autoPlayRutube();
+  }, [isAutoplay, videoType]);
+
   var renderVideo = _react["default"].useCallback(function () {
     switch (videoType) {
       case VideoTypes.YOUTUBE:
@@ -86,6 +129,54 @@ var VideoBlock = function VideoBlock(_ref) {
           }));
         }
 
+      case VideoTypes.RUTUBE:
+        {
+          var _src = "https://rutube.ru/play/embed/".concat(videoSrc, "?");
+
+          return /*#__PURE__*/_react["default"].createElement("div", {
+            className: cn('rutube')
+          }, /*#__PURE__*/_react["default"].createElement("iframe", {
+            className: cn('iframe'),
+            ref: rutubeRef,
+            src: _src,
+            width: "100%",
+            height: "100%",
+            frameBorder: "0",
+            allow: "autoplay",
+            title: "iframe",
+            allowFullScreen: true,
+            "data-testid": "".concat(testIdPrefix, "-iframe-video")
+          }));
+        }
+
+      case VideoTypes.VK:
+        {
+          var _videoSrc$split = videoSrc.split('_'),
+              _videoSrc$split2 = (0, _slicedToArray2["default"])(_videoSrc$split, 2),
+              oid = _videoSrc$split2[0],
+              id = _videoSrc$split2[1];
+
+          var _url = "https://vk.com/video_ext.php?oid=-".concat(oid, "}&id=").concat(id, "&");
+
+          var _autoplay = "&autoplay=".concat(isAutoplay ? 1 : 0);
+
+          var _src2 = "".concat(_url).concat(_autoplay);
+
+          return /*#__PURE__*/_react["default"].createElement("div", {
+            className: cn('vk')
+          }, /*#__PURE__*/_react["default"].createElement("iframe", {
+            className: cn('iframe'),
+            src: _src2,
+            width: "100%",
+            height: "100%",
+            frameBorder: "0",
+            allow: "autoplay",
+            title: "iframe",
+            allowFullScreen: true,
+            "data-testid": "".concat(testIdPrefix, "-iframe-video")
+          }));
+        }
+
       case VideoTypes.VIDEO:
         {
           return (

package/package.json

@@ -1,94 +1,94 @@
 {
-  "name": "@megafon/ui-shared",
-  "version": "6.7.0",
-  "files": [
-    "dist"
-  ],
-  "main": "dist/lib/index.js",
-  "module": "dist/es/index.js",
-  "typings": "dist/lib/index.d.ts",
-  "sideEffects": [
-    "*.css",
-    "*.less"
-  ],
-  "author": "MegaFon",
-  "license": "MIT",
-  "scripts": {
-    "build": "gulp build",
-    "cleanDist": "rm -rf dist",
-    "coverage": "yarn coverage:unit",
-    "coverage:unit": "jest --coverage",
-    "typecheck": "tsc --noEmit -p .",
-    "prettier:check": "prettier --list-different \"src/**/*.{js,jsx,ts,tsx}\"",
-    "prettier:fix": "prettier --write \"src/**/*.{js,jsx,ts,tsx}\"",
-    "lint": "yarn lint:ts && yarn lint:less",
-    "lint:ts": "eslint --ext .js,.jsx,.ts,.tsx src --max-warnings=0",
-    "lint:less": "stylelint --syntax less src/**/*.less src/**/**/*.less",
-    "lint:less:fix": "yarn lint:less --fix",
-    "test": "yarn test:unit",
-    "test:unit": "jest",
-    "test:update": "jest --updateSnapshot"
-  },
-  "publishConfig": {
-    "access": "public"
-  },
-  "lint-staged": {
-    "src/**/**/*.(js|jsx|ts|tsx)": [
-      "eslint --max-warnings=0 --config ../../.eslintrc.json"
-    ]
-  },
-  "peerDependencies": {
-    "react": ">=16.13.0",
-    "react-dom": ">=16.13.0"
-  },
-  "devDependencies": {
-    "@babel/core": "^7.8.6",
-    "@babel/plugin-transform-object-assign": "^7.8.3",
-    "@babel/plugin-transform-runtime": "^7.8.3",
-    "@babel/preset-env": "^7.8.6",
-    "@babel/preset-react": "^7.8.3",
-    "@babel/preset-typescript": "^7.8.3",
-    "@megafon/ui-icons": "^2.29.0",
-    "@svgr/core": "^2.4.1",
-    "@testing-library/jest-dom": "5.16.2",
-    "@testing-library/react": "12.1.2",
-    "@testing-library/react-hooks": "^8.0.1",
-    "@testing-library/user-event": "13.5.0",
-    "@types/enzyme": "^3.10.5",
-    "@types/enzyme-adapter-react-16": "^1.0.6",
-    "@types/jest": "^25.1.3",
-    "@types/prop-types": "^15.7.3",
-    "@types/react": "^16.9.23",
-    "@types/react-dom": "^16.9.5",
-    "babel-plugin-module-resolver": "^3.2.0",
-    "del": "^3.0.0",
-    "enzyme": "^3.11.0",
-    "enzyme-adapter-react-16": "^1.15.2",
-    "enzyme-to-json": "^3.4.4",
-    "glob": "^7.1.6",
-    "gulp": "^4.0.2",
-    "gulp-babel": "^8.0.0-beta.2",
-    "gulp-imagemin": "^7.1.0",
-    "gulp-less": "^4.0.1",
-    "gulp-typescript": "^5.0.1",
-    "jest": "^25.1.0",
-    "less-plugin-autoprefix": "^2.0.0",
-    "merge2": "^1.3.0",
-    "react": "^16.13.0",
-    "react-dom": "^16.13.0",
-    "stylelint": "^9.10.1",
-    "through2": "^2.0.5",
-    "typescript": "^3.8.3"
-  },
-  "dependencies": {
-    "@babel/runtime": "^7.8.4",
-    "@megafon/ui-core": "^6.4.1",
-    "@megafon/ui-helpers": "^2.6.0",
-    "core-js": "^3.6.4",
-    "htmr": "^0.9.2",
-    "lodash.throttle": "^4.1.1",
-    "prop-types": "^15.7.2",
-    "swiper": "^6.5.6"
-  },
-  "gitHead": "45875cd1687c3cbd725b497b508cd33a083228d8"
+    "name": "@megafon/ui-shared",
+    "version": "6.9.0",
+    "files": [
+        "dist"
+    ],
+    "main": "dist/lib/index.js",
+    "module": "dist/es/index.js",
+    "typings": "dist/lib/index.d.ts",
+    "sideEffects": [
+        "*.css",
+        "*.less"
+    ],
+    "author": "MegaFon",
+    "license": "MIT",
+    "scripts": {
+        "build": "gulp build",
+        "cleanDist": "rm -rf dist",
+        "coverage": "yarn coverage:unit",
+        "coverage:unit": "jest --coverage",
+        "typecheck": "tsc --noEmit -p .",
+        "prettier:check": "prettier --list-different \"src/**/*.{js,jsx,ts,tsx}\"",
+        "prettier:fix": "prettier --write \"src/**/*.{js,jsx,ts,tsx}\"",
+        "lint": "yarn lint:ts && yarn lint:less",
+        "lint:ts": "eslint --ext .js,.jsx,.ts,.tsx src --max-warnings=0",
+        "lint:less": "stylelint --syntax less src/**/*.less src/**/**/*.less",
+        "lint:less:fix": "yarn lint:less --fix",
+        "test": "yarn test:unit",
+        "test:unit": "jest",
+        "test:update": "jest --updateSnapshot"
+    },
+    "publishConfig": {
+        "access": "public"
+    },
+    "lint-staged": {
+        "src/**/**/*.(js|jsx|ts|tsx)": [
+            "eslint --max-warnings=0 --config ../../.eslintrc.json"
+        ]
+    },
+    "peerDependencies": {
+        "react": ">=16.13.0",
+        "react-dom": ">=16.13.0"
+    },
+    "devDependencies": {
+        "@babel/core": "^7.8.6",
+        "@babel/plugin-transform-object-assign": "^7.8.3",
+        "@babel/plugin-transform-runtime": "^7.8.3",
+        "@babel/preset-env": "^7.8.6",
+        "@babel/preset-react": "^7.8.3",
+        "@babel/preset-typescript": "^7.8.3",
+        "@megafon/ui-icons": "^2.31.0",
+        "@svgr/core": "^2.4.1",
+        "@testing-library/jest-dom": "5.16.2",
+        "@testing-library/react": "12.1.2",
+        "@testing-library/react-hooks": "^8.0.1",
+        "@testing-library/user-event": "13.5.0",
+        "@types/enzyme": "^3.10.5",
+        "@types/enzyme-adapter-react-16": "^1.0.6",
+        "@types/jest": "^25.1.3",
+        "@types/prop-types": "^15.7.3",
+        "@types/react": "^16.9.23",
+        "@types/react-dom": "^16.9.5",
+        "babel-plugin-module-resolver": "^3.2.0",
+        "del": "^3.0.0",
+        "enzyme": "^3.11.0",
+        "enzyme-adapter-react-16": "^1.15.2",
+        "enzyme-to-json": "^3.4.4",
+        "glob": "^7.1.6",
+        "gulp": "^4.0.2",
+        "gulp-babel": "^8.0.0-beta.2",
+        "gulp-imagemin": "^7.1.0",
+        "gulp-less": "^4.0.1",
+        "gulp-typescript": "^5.0.1",
+        "jest": "^25.1.0",
+        "less-plugin-autoprefix": "^2.0.0",
+        "merge2": "^1.3.0",
+        "react": "^16.13.0",
+        "react-dom": "^16.13.0",
+        "stylelint": "^9.10.1",
+        "through2": "^2.0.5",
+        "typescript": "^3.8.3"
+    },
+    "dependencies": {
+        "@babel/runtime": "^7.8.4",
+        "@megafon/ui-core": "^6.4.3",
+        "@megafon/ui-helpers": "^2.6.0",
+        "core-js": "^3.6.4",
+        "htmr": "^0.9.2",
+        "lodash.throttle": "^4.1.1",
+        "prop-types": "^15.7.2",
+        "swiper": "^6.5.6"
+    },
+    "gitHead": "249f84bdc0034e2acb2793c22248b8dfe016d503"
 }