@megafon/ui-shared 6.6.0 → 6.8.0

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.6.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.0",
-    "@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": "b1eeb93c7ce3fb201938cc46130367d0334c2914"
+    "name": "@megafon/ui-shared",
+    "version": "6.8.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.30.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.2",
+        "@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": "fea7e711b2427c835cd6ec8016df37d7996ef4de"
 }