@blaze-cms/react-page-builder 0.118.0-alpha.0 → 0.118.0-alpha.1

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.
Files changed (14) hide show
  1. package/CHANGELOG.md +11 -0
  2. package/lib/components/Video/providers/YouTube/YouTubeProvider.js +8 -11
  3. package/lib/components/Video/providers/YouTube/YouTubeProvider.js.map +1 -1
  4. package/lib/components/Video/providers/YouTube/YoutubeEmbeded.js +199 -0
  5. package/lib/components/Video/providers/YouTube/YoutubeEmbeded.js.map +1 -0
  6. package/lib-es/components/Video/providers/YouTube/YouTubeProvider.js +8 -11
  7. package/lib-es/components/Video/providers/YouTube/YouTubeProvider.js.map +1 -1
  8. package/lib-es/components/Video/providers/YouTube/YoutubeEmbeded.js +144 -0
  9. package/lib-es/components/Video/providers/YouTube/YoutubeEmbeded.js.map +1 -0
  10. package/package.json +2 -3
  11. package/src/components/Video/providers/YouTube/YouTubeProvider.js +7 -9
  12. package/src/components/Video/providers/YouTube/YoutubeEmbeded.js +156 -0
  13. package/tests/unit/src/components/Video/providers/YouTube/YouTubeProvider.test.js +0 -4
  14. package/tests/unit/src/components/Video/providers/YouTube/__snapshots__/YouTubeProvider.test.js.snap +16 -1
package/CHANGELOG.md CHANGED
@@ -3,6 +3,17 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ # [0.118.0-alpha.1](https://github.com/thebyte9/blaze/compare/v0.118.0-alpha.0...v0.118.0-alpha.1) (2022-01-14)
7
+
8
+
9
+ ### Bug Fixes
10
+
11
+ * added youtube facade lazy loading ([#3243](https://github.com/thebyte9/blaze/issues/3243)) ([7f2bef9](https://github.com/thebyte9/blaze/commit/7f2bef9269333aa7c248dce18e06a459ad7a3572))
12
+
13
+
14
+
15
+
16
+
6
17
  # [0.118.0-alpha.0](https://github.com/thebyte9/blaze/compare/v0.117.0...v0.118.0-alpha.0) (2022-01-13)
7
18
 
8
19
  **Note:** Version bump only for package @blaze-cms/react-page-builder
package/lib/components/Video/providers/YouTube/YouTubeProvider.js CHANGED
@@ -13,7 +13,7 @@ var _react = _interopRequireDefault(require("react"));
13
13
 
14
14
  var _propTypes = _interopRequireDefault(require("prop-types"));
15
15
 
16
- var _reactYoutube = _interopRequireDefault(require("react-youtube"));
16
+ var _YoutubeEmbeded = _interopRequireDefault(require("./YoutubeEmbeded"));
17
17
 
18
18
  var _helpers = require("./helpers");
19
19
 
@@ -25,17 +25,14 @@ var YouTubeProvider = function YouTubeProvider(_ref) {
25
25
  loop = _ref.loop;
26
26
  var videoId = (0, _helpers.getYouTubeID)(url);
27
27
  if (!videoId) return null;
28
- var opts = {
29
- playerVars: {
30
- autoplay: (0, _helpers.booleanToNumber)(autoplay),
31
- loop: (0, _helpers.booleanToNumber)(loop)
32
- }
33
- };
34
- return /*#__PURE__*/_react["default"].createElement(_reactYoutube["default"], {
28
+ var params = "loop=".concat((0, _helpers.booleanToNumber)(loop));
29
+ return /*#__PURE__*/_react["default"].createElement("div", {
30
+ className: _constants.VIDEO_WRAPPER_CLASS_NAME
31
+ }, /*#__PURE__*/_react["default"].createElement(_YoutubeEmbeded["default"], {
32
+ autoplay: autoplay,
35
33
  videoId: videoId,
36
- containerClassName: _constants.VIDEO_WRAPPER_CLASS_NAME,
37
- opts: opts
38
- });
34
+ params: params
35
+ }));
39
36
  };
40
37
 
41
38
  YouTubeProvider.propTypes = {
package/lib/components/Video/providers/YouTube/YouTubeProvider.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../../src/components/Video/providers/YouTube/YouTubeProvider.js"],"names":["YouTubeProvider","url","autoplay","loop","videoId","opts","playerVars","VIDEO_WRAPPER_CLASS_NAME","propTypes","PropTypes","string","isRequired","bool","defaultProps"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AAEA,IAAMA,eAAe,GAAG,SAAlBA,eAAkB,OAA6B;AAAA,MAA1BC,GAA0B,QAA1BA,GAA0B;AAAA,MAArBC,QAAqB,QAArBA,QAAqB;AAAA,MAAXC,IAAW,QAAXA,IAAW;AACnD,MAAMC,OAAO,GAAG,2BAAaH,GAAb,CAAhB;AAEA,MAAI,CAACG,OAAL,EAAc,OAAO,IAAP;AAEd,MAAMC,IAAI,GAAG;AACXC,IAAAA,UAAU,EAAE;AACVJ,MAAAA,QAAQ,EAAE,8BAAgBA,QAAhB,CADA;AAEVC,MAAAA,IAAI,EAAE,8BAAgBA,IAAhB;AAFI;AADD,GAAb;AAOA,sBAAO,gCAAC,wBAAD;AAAS,IAAA,OAAO,EAAEC,OAAlB;AAA2B,IAAA,kBAAkB,EAAEG,mCAA/C;AAAyE,IAAA,IAAI,EAAEF;AAA/E,IAAP;AACD,CAbD;;AAeAL,eAAe,CAACQ,SAAhB,GAA4B;AAC1BP,EAAAA,GAAG,EAAEQ,sBAAUC,MAAV,CAAiBC,UADI;AAE1BT,EAAAA,QAAQ,EAAEO,sBAAUG,IAFM;AAG1BT,EAAAA,IAAI,EAAEM,sBAAUG;AAHU,CAA5B;AAMAZ,eAAe,CAACa,YAAhB,GAA+B;AAC7BX,EAAAA,QAAQ,EAAE,KADmB;AAE7BC,EAAAA,IAAI,EAAE;AAFuB,CAA/B;eAKeH,e","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport YouTube from 'react-youtube';\nimport { getYouTubeID, booleanToNumber } from './helpers';\nimport { VIDEO_WRAPPER_CLASS_NAME } from '../../../../constants';\n\nconst YouTubeProvider = ({ url, autoplay, loop }) => {\n const videoId = getYouTubeID(url);\n\n if (!videoId) return null;\n\n const opts = {\n playerVars: {\n autoplay: booleanToNumber(autoplay),\n loop: booleanToNumber(loop)\n }\n };\n\n return <YouTube videoId={videoId} containerClassName={VIDEO_WRAPPER_CLASS_NAME} opts={opts} />;\n};\n\nYouTubeProvider.propTypes = {\n url: PropTypes.string.isRequired,\n autoplay: PropTypes.bool,\n loop: PropTypes.bool\n};\n\nYouTubeProvider.defaultProps = {\n autoplay: false,\n loop: false\n};\n\nexport default YouTubeProvider;\n"],"file":"YouTubeProvider.js"}
1
+ {"version":3,"sources":["../../../../../src/components/Video/providers/YouTube/YouTubeProvider.js"],"names":["YouTubeProvider","url","autoplay","loop","videoId","params","VIDEO_WRAPPER_CLASS_NAME","propTypes","PropTypes","string","isRequired","bool","defaultProps"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AAEA,IAAMA,eAAe,GAAG,SAAlBA,eAAkB,OAA6B;AAAA,MAA1BC,GAA0B,QAA1BA,GAA0B;AAAA,MAArBC,QAAqB,QAArBA,QAAqB;AAAA,MAAXC,IAAW,QAAXA,IAAW;AACnD,MAAMC,OAAO,GAAG,2BAAaH,GAAb,CAAhB;AAEA,MAAI,CAACG,OAAL,EAAc,OAAO,IAAP;AACd,MAAMC,MAAM,kBAAW,8BAAgBF,IAAhB,CAAX,CAAZ;AAEA,sBACE;AAAK,IAAA,SAAS,EAAEG;AAAhB,kBACE,gCAAC,0BAAD;AAAgB,IAAA,QAAQ,EAAEJ,QAA1B;AAAoC,IAAA,OAAO,EAAEE,OAA7C;AAAsD,IAAA,MAAM,EAAEC;AAA9D,IADF,CADF;AAKD,CAXD;;AAaAL,eAAe,CAACO,SAAhB,GAA4B;AAC1BN,EAAAA,GAAG,EAAEO,sBAAUC,MAAV,CAAiBC,UADI;AAE1BR,EAAAA,QAAQ,EAAEM,sBAAUG,IAFM;AAG1BR,EAAAA,IAAI,EAAEK,sBAAUG;AAHU,CAA5B;AAMAX,eAAe,CAACY,YAAhB,GAA+B;AAC7BV,EAAAA,QAAQ,EAAE,KADmB;AAE7BC,EAAAA,IAAI,EAAE;AAFuB,CAA/B;eAKeH,e","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport YoutubeEmbeded from './YoutubeEmbeded';\nimport { getYouTubeID, booleanToNumber } from './helpers';\nimport { VIDEO_WRAPPER_CLASS_NAME } from '../../../../constants';\n\nconst YouTubeProvider = ({ url, autoplay, loop }) => {\n const videoId = getYouTubeID(url);\n\n if (!videoId) return null;\n const params = `loop=${booleanToNumber(loop)}`;\n\n return (\n <div className={VIDEO_WRAPPER_CLASS_NAME}>\n <YoutubeEmbeded autoplay={autoplay} videoId={videoId} params={params} />\n </div>\n );\n};\n\nYouTubeProvider.propTypes = {\n url: PropTypes.string.isRequired,\n autoplay: PropTypes.bool,\n loop: PropTypes.bool\n};\n\nYouTubeProvider.defaultProps = {\n autoplay: false,\n loop: false\n};\n\nexport default YouTubeProvider;\n"],"file":"YouTubeProvider.js"}
package/lib/components/Video/providers/YouTube/YoutubeEmbeded.js ADDED
@@ -0,0 +1,199 @@
1
+ "use strict";
2
+
3
+ require("core-js/modules/es.array.iterator.js");
4
+
5
+ require("core-js/modules/es.object.to-string.js");
6
+
7
+ require("core-js/modules/es.string.iterator.js");
8
+
9
+ require("core-js/modules/es.weak-map.js");
10
+
11
+ require("core-js/modules/web.dom-collections.iterator.js");
12
+
13
+ require("core-js/modules/es.object.define-property.js");
14
+
15
+ require("core-js/modules/es.object.get-own-property-descriptor.js");
16
+
17
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
18
+
19
+ var _typeof = require("@babel/runtime/helpers/typeof");
20
+
21
+ Object.defineProperty(exports, "__esModule", {
22
+ value: true
23
+ });
24
+ exports["default"] = void 0;
25
+
26
+ require("core-js/modules/es.array.concat.js");
27
+
28
+ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
29
+
30
+ var _react = _interopRequireWildcard(require("react"));
31
+
32
+ var _propTypes = _interopRequireDefault(require("prop-types"));
33
+
34
+ var _customHooks = require("@blaze-react/utils/lib/customHooks");
35
+
36
+ var _constants = require("../../../../constants");
37
+
38
+ var _this = void 0;
39
+
40
+ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
41
+
42
+ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
43
+
44
+ var YT_HQ_FORMAT = 'hqdefault';
45
+ var YT_IMAGE_URL = 'https://i.ytimg.com';
46
+
47
+ var YoutubeEmbeded = function YoutubeEmbeded(_ref) {
48
+ var autoplay = _ref.autoplay,
49
+ videoId = _ref.videoId,
50
+ playlistCoverId = _ref.playlistCoverId,
51
+ videoTitle = _ref.videoTitle,
52
+ poster = _ref.poster,
53
+ videoParams = _ref.videoParams,
54
+ announce = _ref.announce,
55
+ noCookie = _ref.noCookie,
56
+ webp = _ref.webp,
57
+ playlist = _ref.playlist,
58
+ onIframeAdded = _ref.onIframeAdded,
59
+ muted = _ref.muted,
60
+ adNetwork = _ref.adNetwork,
61
+ iframeClass = _ref.iframeClass;
62
+
63
+ var _useInView = (0, _customHooks.useInView)(_constants.IN_VIEW_CONFIG),
64
+ _useInView2 = (0, _slicedToArray2["default"])(_useInView, 2),
65
+ isIntersecting = _useInView2[0],
66
+ outerRef = _useInView2[1];
67
+
68
+ var _useState = (0, _react.useState)(false),
69
+ _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
70
+ preconnected = _useState2[0],
71
+ setPreconnected = _useState2[1];
72
+
73
+ var _useState3 = (0, _react.useState)(!!autoplay),
74
+ _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
75
+ renderIframe = _useState4[0],
76
+ setRenderIframe = _useState4[1];
77
+
78
+ var _useState5 = (0, _react.useState)({
79
+ imageSize: poster,
80
+ displayImage: false
81
+ }),
82
+ _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
83
+ _useState6$ = _useState6[0],
84
+ imageSize = _useState6$.imageSize,
85
+ displayImage = _useState6$.displayImage,
86
+ setImageDetails = _useState6[1];
87
+
88
+ var encodedId = encodeURIComponent(videoId);
89
+ var videoPlaylisCovertId = typeof playlistCoverId === 'string' ? encodeURIComponent(playlistCoverId) : null;
90
+ var paramsImp = videoParams ? "&".concat(videoParams) : '';
91
+ var format = webp ? 'webp' : 'jpg';
92
+ var vi = webp ? 'vi_webp' : 'vi';
93
+ var posterUrl = !playlist ? "".concat(YT_IMAGE_URL, "/").concat(vi, "/").concat(encodedId, "/").concat(imageSize, ".").concat(format) : "".concat(YT_IMAGE_URL, "/").concat(vi, "/").concat(videoPlaylisCovertId, "/").concat(imageSize, ".").concat(format);
94
+ var ytUrl = noCookie ? 'https://www.youtube-nocookie.com' : 'https://www.youtube.com';
95
+ var mutedValue = muted ? '&mute=1' : '';
96
+ var iframeSrc = !playlist ? "".concat(ytUrl, "/embed/").concat(encodedId, "?autoplay=1").concat(mutedValue).concat(paramsImp) : "".concat(ytUrl, "/embed/videoseries?autoplay=1").concat(mutedValue, "&list=").concat(encodedId).concat(paramsImp);
97
+ var parsedWrapperClassname = "yt-facade ".concat(renderIframe ? 'yt-activated' : '');
98
+ (0, _react.useEffect)(function () {
99
+ if (!isIntersecting || imageSize === YT_HQ_FORMAT) return;
100
+ var img = new Image();
101
+
102
+ img.onload = function () {
103
+ var newImageSize = imageSize;
104
+ if (_this && _this.width === 120) newImageSize = YT_HQ_FORMAT;
105
+ setImageDetails({
106
+ imageSize: newImageSize,
107
+ displayImage: true
108
+ });
109
+ };
110
+
111
+ img.src = posterUrl;
112
+ }, [imageSize, isIntersecting, posterUrl]);
113
+
114
+ var warmConnections = function warmConnections() {
115
+ if (preconnected) return;
116
+ setPreconnected(true);
117
+ };
118
+
119
+ var addIframe = function addIframe() {
120
+ if (renderIframe) return;
121
+ onIframeAdded();
122
+ setRenderIframe(true);
123
+ };
124
+
125
+ return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, preconnected && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("link", {
126
+ rel: "preconnect",
127
+ href: YT_IMAGE_URL
128
+ }), /*#__PURE__*/_react["default"].createElement("link", {
129
+ rel: "preconnect",
130
+ href: ytUrl
131
+ }), /*#__PURE__*/_react["default"].createElement("link", {
132
+ rel: "preconnect",
133
+ href: "https://www.google.com"
134
+ }), adNetwork && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("link", {
135
+ rel: "preconnect",
136
+ href: "https://static.doubleclick.net"
137
+ }), /*#__PURE__*/_react["default"].createElement("link", {
138
+ rel: "preconnect",
139
+ href: "https://googleads.g.doubleclick.net"
140
+ }))), /*#__PURE__*/_react["default"].createElement("div", {
141
+ ref: outerRef,
142
+ role: "button",
143
+ onPointerOver: warmConnections,
144
+ onClick: addIframe,
145
+ className: parsedWrapperClassname,
146
+ "data-title": videoTitle,
147
+ style: {
148
+ backgroundImage: "url(".concat(displayImage ? posterUrl : '', ")")
149
+ }
150
+ }, /*#__PURE__*/_react["default"].createElement("div", {
151
+ type: "button",
152
+ className: "yt-facade-button-wrapper",
153
+ "aria-label": "".concat(announce, " ").concat(videoTitle)
154
+ }, /*#__PURE__*/_react["default"].createElement("div", {
155
+ className: "yt-facade-button"
156
+ })), renderIframe && /*#__PURE__*/_react["default"].createElement("iframe", {
157
+ className: iframeClass,
158
+ title: videoTitle,
159
+ allow: "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture",
160
+ allowFullScreen: true,
161
+ src: iframeSrc
162
+ })));
163
+ };
164
+
165
+ YoutubeEmbeded.propTypes = {
166
+ onIframeAdded: _propTypes["default"].func,
167
+ adNetwork: _propTypes["default"].bool,
168
+ autoplay: _propTypes["default"].bool,
169
+ playlist: _propTypes["default"].bool,
170
+ muted: _propTypes["default"].bool,
171
+ webp: _propTypes["default"].bool,
172
+ noCookie: _propTypes["default"].bool,
173
+ videoId: _propTypes["default"].string,
174
+ iframeClass: _propTypes["default"].string,
175
+ poster: _propTypes["default"].string,
176
+ announce: _propTypes["default"].string,
177
+ playlistCoverId: _propTypes["default"].string,
178
+ videoParams: _propTypes["default"].string,
179
+ videoTitle: _propTypes["default"].string
180
+ };
181
+ YoutubeEmbeded.defaultProps = {
182
+ onIframeAdded: function onIframeAdded() {},
183
+ adNetwork: false,
184
+ autoplay: false,
185
+ playlist: false,
186
+ muted: false,
187
+ webp: false,
188
+ noCookie: false,
189
+ iframeClass: '',
190
+ poster: 'sddefault',
191
+ announce: 'Watch',
192
+ videoId: '',
193
+ playlistCoverId: '',
194
+ videoParams: '',
195
+ videoTitle: ''
196
+ };
197
+ var _default = YoutubeEmbeded;
198
+ exports["default"] = _default;
199
+ //# sourceMappingURL=YoutubeEmbeded.js.map
package/lib/components/Video/providers/YouTube/YoutubeEmbeded.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../../../../src/components/Video/providers/YouTube/YoutubeEmbeded.js"],"names":["YT_HQ_FORMAT","YT_IMAGE_URL","YoutubeEmbeded","autoplay","videoId","playlistCoverId","videoTitle","poster","videoParams","announce","noCookie","webp","playlist","onIframeAdded","muted","adNetwork","iframeClass","IN_VIEW_CONFIG","isIntersecting","outerRef","preconnected","setPreconnected","renderIframe","setRenderIframe","imageSize","displayImage","setImageDetails","encodedId","encodeURIComponent","videoPlaylisCovertId","paramsImp","format","vi","posterUrl","ytUrl","mutedValue","iframeSrc","parsedWrapperClassname","img","Image","onload","newImageSize","width","src","warmConnections","addIframe","backgroundImage","propTypes","PropTypes","func","bool","string","defaultProps"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;;;;;;;AAEA,IAAMA,YAAY,GAAG,WAArB;AACA,IAAMC,YAAY,GAAG,qBAArB;;AAEA,IAAMC,cAAc,GAAG,SAAjBA,cAAiB,OAejB;AAAA,MAdJC,QAcI,QAdJA,QAcI;AAAA,MAbJC,OAaI,QAbJA,OAaI;AAAA,MAZJC,eAYI,QAZJA,eAYI;AAAA,MAXJC,UAWI,QAXJA,UAWI;AAAA,MAVJC,MAUI,QAVJA,MAUI;AAAA,MATJC,WASI,QATJA,WASI;AAAA,MARJC,QAQI,QARJA,QAQI;AAAA,MAPJC,QAOI,QAPJA,QAOI;AAAA,MANJC,IAMI,QANJA,IAMI;AAAA,MALJC,QAKI,QALJA,QAKI;AAAA,MAJJC,aAII,QAJJA,aAII;AAAA,MAHJC,KAGI,QAHJA,KAGI;AAAA,MAFJC,SAEI,QAFJA,SAEI;AAAA,MADJC,WACI,QADJA,WACI;;AACJ,mBAAmC,4BAAUC,yBAAV,CAAnC;AAAA;AAAA,MAAOC,cAAP;AAAA,MAAuBC,QAAvB;;AACA,kBAAwC,qBAAS,KAAT,CAAxC;AAAA;AAAA,MAAOC,YAAP;AAAA,MAAqBC,eAArB;;AACA,mBAAwC,qBAAS,CAAC,CAAClB,QAAX,CAAxC;AAAA;AAAA,MAAOmB,YAAP;AAAA,MAAqBC,eAArB;;AACA,mBAAuD,qBAAS;AAC9DC,IAAAA,SAAS,EAAEjB,MADmD;AAE9DkB,IAAAA,YAAY,EAAE;AAFgD,GAAT,CAAvD;AAAA;AAAA;AAAA,MAASD,SAAT,eAASA,SAAT;AAAA,MAAoBC,YAApB,eAAoBA,YAApB;AAAA,MAAoCC,eAApC;;AAKA,MAAMC,SAAS,GAAGC,kBAAkB,CAACxB,OAAD,CAApC;AACA,MAAMyB,oBAAoB,GACxB,OAAOxB,eAAP,KAA2B,QAA3B,GAAsCuB,kBAAkB,CAACvB,eAAD,CAAxD,GAA4E,IAD9E;AAEA,MAAMyB,SAAS,GAAGtB,WAAW,cAAOA,WAAP,IAAuB,EAApD;AACA,MAAMuB,MAAM,GAAGpB,IAAI,GAAG,MAAH,GAAY,KAA/B;AACA,MAAMqB,EAAE,GAAGrB,IAAI,GAAG,SAAH,GAAe,IAA9B;AACA,MAAMsB,SAAS,GAAG,CAACrB,QAAD,aACXX,YADW,cACK+B,EADL,cACWL,SADX,cACwBH,SADxB,cACqCO,MADrC,cAEX9B,YAFW,cAEK+B,EAFL,cAEWH,oBAFX,cAEmCL,SAFnC,cAEgDO,MAFhD,CAAlB;AAGA,MAAMG,KAAK,GAAGxB,QAAQ,GAAG,kCAAH,GAAwC,yBAA9D;AAEA,MAAMyB,UAAU,GAAGrB,KAAK,GAAG,SAAH,GAAe,EAAvC;AACA,MAAMsB,SAAS,GAAG,CAACxB,QAAD,aACXsB,KADW,oBACIP,SADJ,wBAC2BQ,UAD3B,SACwCL,SADxC,cAEXI,KAFW,0CAE0BC,UAF1B,mBAE6CR,SAF7C,SAEyDG,SAFzD,CAAlB;AAGA,MAAMO,sBAAsB,uBAAgBf,YAAY,GAAG,cAAH,GAAoB,EAAhD,CAA5B;AAEA,wBACE,YAAM;AACJ,QAAI,CAACJ,cAAD,IAAmBM,SAAS,KAAKxB,YAArC,EAAmD;AAEnD,QAAMsC,GAAG,GAAG,IAAIC,KAAJ,EAAZ;;AACAD,IAAAA,GAAG,CAACE,MAAJ,GAAa,YAAM;AACjB,UAAIC,YAAY,GAAGjB,SAAnB;AACA,UAAI,KAAI,IAAI,KAAI,CAACkB,KAAL,KAAe,GAA3B,EAAgCD,YAAY,GAAGzC,YAAf;AAChC0B,MAAAA,eAAe,CAAC;AAAEF,QAAAA,SAAS,EAAEiB,YAAb;AAA2BhB,QAAAA,YAAY,EAAE;AAAzC,OAAD,CAAf;AACD,KAJD;;AAMAa,IAAAA,GAAG,CAACK,GAAJ,GAAUV,SAAV;AACD,GAZH,EAaE,CAACT,SAAD,EAAYN,cAAZ,EAA4Be,SAA5B,CAbF;;AAgBA,MAAMW,eAAe,GAAG,SAAlBA,eAAkB,GAAM;AAC5B,QAAIxB,YAAJ,EAAkB;AAClBC,IAAAA,eAAe,CAAC,IAAD,CAAf;AACD,GAHD;;AAKA,MAAMwB,SAAS,GAAG,SAAZA,SAAY,GAAM;AACtB,QAAIvB,YAAJ,EAAkB;AAClBT,IAAAA,aAAa;AACbU,IAAAA,eAAe,CAAC,IAAD,CAAf;AACD,GAJD;;AAMA,sBACE,kEACGH,YAAY,iBACX,+EACE;AAAM,IAAA,GAAG,EAAC,YAAV;AAAuB,IAAA,IAAI,EAAEnB;AAA7B,IADF,eAEE;AAAM,IAAA,GAAG,EAAC,YAAV;AAAuB,IAAA,IAAI,EAAEiC;AAA7B,IAFF,eAGE;AAAM,IAAA,GAAG,EAAC,YAAV;AAAuB,IAAA,IAAI,EAAC;AAA5B,IAHF,EAIGnB,SAAS,iBACR,+EACE;AAAM,IAAA,GAAG,EAAC,YAAV;AAAuB,IAAA,IAAI,EAAC;AAA5B,IADF,eAEE;AAAM,IAAA,GAAG,EAAC,YAAV;AAAuB,IAAA,IAAI,EAAC;AAA5B,IAFF,CALJ,CAFJ,eAcE;AACE,IAAA,GAAG,EAAEI,QADP;AAEE,IAAA,IAAI,EAAC,QAFP;AAGE,IAAA,aAAa,EAAEyB,eAHjB;AAIE,IAAA,OAAO,EAAEC,SAJX;AAKE,IAAA,SAAS,EAAER,sBALb;AAME,kBAAY/B,UANd;AAOE,IAAA,KAAK,EAAE;AACLwC,MAAAA,eAAe,gBAASrB,YAAY,GAAGQ,SAAH,GAAe,EAApC;AADV;AAPT,kBAUE;AACE,IAAA,IAAI,EAAC,QADP;AAEE,IAAA,SAAS,EAAC,0BAFZ;AAGE,4BAAexB,QAAf,cAA2BH,UAA3B;AAHF,kBAIE;AAAK,IAAA,SAAS,EAAC;AAAf,IAJF,CAVF,EAgBGgB,YAAY,iBACX;AACE,IAAA,SAAS,EAAEN,WADb;AAEE,IAAA,KAAK,EAAEV,UAFT;AAGE,IAAA,KAAK,EAAC,yEAHR;AAIE,IAAA,eAAe,MAJjB;AAKE,IAAA,GAAG,EAAE8B;AALP,IAjBJ,CAdF,CADF;AA2CD,CA/GD;;AAiHAlC,cAAc,CAAC6C,SAAf,GAA2B;AACzBlC,EAAAA,aAAa,EAAEmC,sBAAUC,IADA;AAEzBlC,EAAAA,SAAS,EAAEiC,sBAAUE,IAFI;AAGzB/C,EAAAA,QAAQ,EAAE6C,sBAAUE,IAHK;AAIzBtC,EAAAA,QAAQ,EAAEoC,sBAAUE,IAJK;AAKzBpC,EAAAA,KAAK,EAAEkC,sBAAUE,IALQ;AAMzBvC,EAAAA,IAAI,EAAEqC,sBAAUE,IANS;AAOzBxC,EAAAA,QAAQ,EAAEsC,sBAAUE,IAPK;AAQzB9C,EAAAA,OAAO,EAAE4C,sBAAUG,MARM;AASzBnC,EAAAA,WAAW,EAAEgC,sBAAUG,MATE;AAUzB5C,EAAAA,MAAM,EAAEyC,sBAAUG,MAVO;AAWzB1C,EAAAA,QAAQ,EAAEuC,sBAAUG,MAXK;AAYzB9C,EAAAA,eAAe,EAAE2C,sBAAUG,MAZF;AAazB3C,EAAAA,WAAW,EAAEwC,sBAAUG,MAbE;AAczB7C,EAAAA,UAAU,EAAE0C,sBAAUG;AAdG,CAA3B;AAiBAjD,cAAc,CAACkD,YAAf,GAA8B;AAC5BvC,EAAAA,aAAa,EAAE,yBAAM,CAAE,CADK;AAE5BE,EAAAA,SAAS,EAAE,KAFiB;AAG5BZ,EAAAA,QAAQ,EAAE,KAHkB;AAI5BS,EAAAA,QAAQ,EAAE,KAJkB;AAK5BE,EAAAA,KAAK,EAAE,KALqB;AAM5BH,EAAAA,IAAI,EAAE,KANsB;AAO5BD,EAAAA,QAAQ,EAAE,KAPkB;AAQ5BM,EAAAA,WAAW,EAAE,EARe;AAS5BT,EAAAA,MAAM,EAAE,WAToB;AAU5BE,EAAAA,QAAQ,EAAE,OAVkB;AAW5BL,EAAAA,OAAO,EAAE,EAXmB;AAY5BC,EAAAA,eAAe,EAAE,EAZW;AAa5BG,EAAAA,WAAW,EAAE,EAbe;AAc5BF,EAAAA,UAAU,EAAE;AAdgB,CAA9B;eAiBeJ,c","sourcesContent":["import React, { useState, useEffect } from 'react';\nimport PropTypes from 'prop-types';\nimport { useInView } from '@blaze-react/utils/lib/customHooks';\nimport { IN_VIEW_CONFIG } from '../../../../constants';\n\nconst YT_HQ_FORMAT = 'hqdefault';\nconst YT_IMAGE_URL = 'https://i.ytimg.com';\n\nconst YoutubeEmbeded = ({\n autoplay,\n videoId,\n playlistCoverId,\n videoTitle,\n poster,\n videoParams,\n announce,\n noCookie,\n webp,\n playlist,\n onIframeAdded,\n muted,\n adNetwork,\n iframeClass\n}) => {\n const [isIntersecting, outerRef] = useInView(IN_VIEW_CONFIG);\n const [preconnected, setPreconnected] = useState(false);\n const [renderIframe, setRenderIframe] = useState(!!autoplay);\n const [{ imageSize, displayImage }, setImageDetails] = useState({\n imageSize: poster,\n displayImage: false\n });\n\n const encodedId = encodeURIComponent(videoId);\n const videoPlaylisCovertId =\n typeof playlistCoverId === 'string' ? encodeURIComponent(playlistCoverId) : null;\n const paramsImp = videoParams ? `&${videoParams}` : '';\n const format = webp ? 'webp' : 'jpg';\n const vi = webp ? 'vi_webp' : 'vi';\n const posterUrl = !playlist\n ? `${YT_IMAGE_URL}/${vi}/${encodedId}/${imageSize}.${format}`\n : `${YT_IMAGE_URL}/${vi}/${videoPlaylisCovertId}/${imageSize}.${format}`;\n const ytUrl = noCookie ? 'https://www.youtube-nocookie.com' : 'https://www.youtube.com';\n\n const mutedValue = muted ? '&mute=1' : '';\n const iframeSrc = !playlist\n ? `${ytUrl}/embed/${encodedId}?autoplay=1${mutedValue}${paramsImp}`\n : `${ytUrl}/embed/videoseries?autoplay=1${mutedValue}&list=${encodedId}${paramsImp}`;\n const parsedWrapperClassname = `yt-facade ${renderIframe ? 'yt-activated' : ''}`;\n\n useEffect(\n () => {\n if (!isIntersecting || imageSize === YT_HQ_FORMAT) return;\n\n const img = new Image();\n img.onload = () => {\n let newImageSize = imageSize;\n if (this && this.width === 120) newImageSize = YT_HQ_FORMAT;\n setImageDetails({ imageSize: newImageSize, displayImage: true });\n };\n\n img.src = posterUrl;\n },\n [imageSize, isIntersecting, posterUrl]\n );\n\n const warmConnections = () => {\n if (preconnected) return;\n setPreconnected(true);\n };\n\n const addIframe = () => {\n if (renderIframe) return;\n onIframeAdded();\n setRenderIframe(true);\n };\n\n return (\n <>\n {preconnected && (\n <>\n <link rel=\"preconnect\" href={YT_IMAGE_URL} />\n <link rel=\"preconnect\" href={ytUrl} />\n <link rel=\"preconnect\" href=\"https://www.google.com\" />\n {adNetwork && (\n <>\n <link rel=\"preconnect\" href=\"https://static.doubleclick.net\" />\n <link rel=\"preconnect\" href=\"https://googleads.g.doubleclick.net\" />\n </>\n )}\n </>\n )}\n <div\n ref={outerRef}\n role=\"button\"\n onPointerOver={warmConnections}\n onClick={addIframe}\n className={parsedWrapperClassname}\n data-title={videoTitle}\n style={{\n backgroundImage: `url(${displayImage ? posterUrl : ''})`\n }}>\n <div\n type=\"button\"\n className=\"yt-facade-button-wrapper\"\n aria-label={`${announce} ${videoTitle}`}>\n <div className=\"yt-facade-button\" />\n </div>\n {renderIframe && (\n <iframe\n className={iframeClass}\n title={videoTitle}\n allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\"\n allowFullScreen\n src={iframeSrc}\n />\n )}\n </div>\n </>\n );\n};\n\nYoutubeEmbeded.propTypes = {\n onIframeAdded: PropTypes.func,\n adNetwork: PropTypes.bool,\n autoplay: PropTypes.bool,\n playlist: PropTypes.bool,\n muted: PropTypes.bool,\n webp: PropTypes.bool,\n noCookie: PropTypes.bool,\n videoId: PropTypes.string,\n iframeClass: PropTypes.string,\n poster: PropTypes.string,\n announce: PropTypes.string,\n playlistCoverId: PropTypes.string,\n videoParams: PropTypes.string,\n videoTitle: PropTypes.string\n};\n\nYoutubeEmbeded.defaultProps = {\n onIframeAdded: () => {},\n adNetwork: false,\n autoplay: false,\n playlist: false,\n muted: false,\n webp: false,\n noCookie: false,\n iframeClass: '',\n poster: 'sddefault',\n announce: 'Watch',\n videoId: '',\n playlistCoverId: '',\n videoParams: '',\n videoTitle: ''\n};\n\nexport default YoutubeEmbeded;\n"],"file":"YoutubeEmbeded.js"}
package/lib-es/components/Video/providers/YouTube/YouTubeProvider.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import React from 'react';
2
2
  import PropTypes from 'prop-types';
3
- import YouTube from 'react-youtube';
3
+ import YoutubeEmbeded from './YoutubeEmbeded';
4
4
  import { getYouTubeID, booleanToNumber } from './helpers';
5
5
  import { VIDEO_WRAPPER_CLASS_NAME } from '../../../../constants';
6
6
 
@@ -11,17 +11,14 @@ const YouTubeProvider = ({
11
11
  }) => {
12
12
  const videoId = getYouTubeID(url);
13
13
  if (!videoId) return null;
14
- const opts = {
15
- playerVars: {
16
- autoplay: booleanToNumber(autoplay),
17
- loop: booleanToNumber(loop)
18
- }
19
- };
20
- return /*#__PURE__*/React.createElement(YouTube, {
14
+ const params = `loop=${booleanToNumber(loop)}`;
15
+ return /*#__PURE__*/React.createElement("div", {
16
+ className: VIDEO_WRAPPER_CLASS_NAME
17
+ }, /*#__PURE__*/React.createElement(YoutubeEmbeded, {
18
+ autoplay: autoplay,
21
19
  videoId: videoId,
22
- containerClassName: VIDEO_WRAPPER_CLASS_NAME,
23
- opts: opts
24
- });
20
+ params: params
21
+ }));
25
22
  };
26
23
 
27
24
  YouTubeProvider.propTypes = {
package/lib-es/components/Video/providers/YouTube/YouTubeProvider.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../../src/components/Video/providers/YouTube/YouTubeProvider.js"],"names":["React","PropTypes","YouTube","getYouTubeID","booleanToNumber","VIDEO_WRAPPER_CLASS_NAME","YouTubeProvider","url","autoplay","loop","videoId","opts","playerVars","propTypes","string","isRequired","bool","defaultProps"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,OAAOC,OAAP,MAAoB,eAApB;AACA,SAASC,YAAT,EAAuBC,eAAvB,QAA8C,WAA9C;AACA,SAASC,wBAAT,QAAyC,uBAAzC;;AAEA,MAAMC,eAAe,GAAG,CAAC;AAAEC,EAAAA,GAAF;AAAOC,EAAAA,QAAP;AAAiBC,EAAAA;AAAjB,CAAD,KAA6B;AACnD,QAAMC,OAAO,GAAGP,YAAY,CAACI,GAAD,CAA5B;AAEA,MAAI,CAACG,OAAL,EAAc,OAAO,IAAP;AAEd,QAAMC,IAAI,GAAG;AACXC,IAAAA,UAAU,EAAE;AACVJ,MAAAA,QAAQ,EAAEJ,eAAe,CAACI,QAAD,CADf;AAEVC,MAAAA,IAAI,EAAEL,eAAe,CAACK,IAAD;AAFX;AADD,GAAb;AAOA,sBAAO,oBAAC,OAAD;AAAS,IAAA,OAAO,EAAEC,OAAlB;AAA2B,IAAA,kBAAkB,EAAEL,wBAA/C;AAAyE,IAAA,IAAI,EAAEM;AAA/E,IAAP;AACD,CAbD;;AAeAL,eAAe,CAACO,SAAhB,GAA4B;AAC1BN,EAAAA,GAAG,EAAEN,SAAS,CAACa,MAAV,CAAiBC,UADI;AAE1BP,EAAAA,QAAQ,EAAEP,SAAS,CAACe,IAFM;AAG1BP,EAAAA,IAAI,EAAER,SAAS,CAACe;AAHU,CAA5B;AAMAV,eAAe,CAACW,YAAhB,GAA+B;AAC7BT,EAAAA,QAAQ,EAAE,KADmB;AAE7BC,EAAAA,IAAI,EAAE;AAFuB,CAA/B;AAKA,eAAeH,eAAf","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport YouTube from 'react-youtube';\nimport { getYouTubeID, booleanToNumber } from './helpers';\nimport { VIDEO_WRAPPER_CLASS_NAME } from '../../../../constants';\n\nconst YouTubeProvider = ({ url, autoplay, loop }) => {\n const videoId = getYouTubeID(url);\n\n if (!videoId) return null;\n\n const opts = {\n playerVars: {\n autoplay: booleanToNumber(autoplay),\n loop: booleanToNumber(loop)\n }\n };\n\n return <YouTube videoId={videoId} containerClassName={VIDEO_WRAPPER_CLASS_NAME} opts={opts} />;\n};\n\nYouTubeProvider.propTypes = {\n url: PropTypes.string.isRequired,\n autoplay: PropTypes.bool,\n loop: PropTypes.bool\n};\n\nYouTubeProvider.defaultProps = {\n autoplay: false,\n loop: false\n};\n\nexport default YouTubeProvider;\n"],"file":"YouTubeProvider.js"}
1
+ {"version":3,"sources":["../../../../../src/components/Video/providers/YouTube/YouTubeProvider.js"],"names":["React","PropTypes","YoutubeEmbeded","getYouTubeID","booleanToNumber","VIDEO_WRAPPER_CLASS_NAME","YouTubeProvider","url","autoplay","loop","videoId","params","propTypes","string","isRequired","bool","defaultProps"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,OAAOC,cAAP,MAA2B,kBAA3B;AACA,SAASC,YAAT,EAAuBC,eAAvB,QAA8C,WAA9C;AACA,SAASC,wBAAT,QAAyC,uBAAzC;;AAEA,MAAMC,eAAe,GAAG,CAAC;AAAEC,EAAAA,GAAF;AAAOC,EAAAA,QAAP;AAAiBC,EAAAA;AAAjB,CAAD,KAA6B;AACnD,QAAMC,OAAO,GAAGP,YAAY,CAACI,GAAD,CAA5B;AAEA,MAAI,CAACG,OAAL,EAAc,OAAO,IAAP;AACd,QAAMC,MAAM,GAAI,QAAOP,eAAe,CAACK,IAAD,CAAO,EAA7C;AAEA,sBACE;AAAK,IAAA,SAAS,EAAEJ;AAAhB,kBACE,oBAAC,cAAD;AAAgB,IAAA,QAAQ,EAAEG,QAA1B;AAAoC,IAAA,OAAO,EAAEE,OAA7C;AAAsD,IAAA,MAAM,EAAEC;AAA9D,IADF,CADF;AAKD,CAXD;;AAaAL,eAAe,CAACM,SAAhB,GAA4B;AAC1BL,EAAAA,GAAG,EAAEN,SAAS,CAACY,MAAV,CAAiBC,UADI;AAE1BN,EAAAA,QAAQ,EAAEP,SAAS,CAACc,IAFM;AAG1BN,EAAAA,IAAI,EAAER,SAAS,CAACc;AAHU,CAA5B;AAMAT,eAAe,CAACU,YAAhB,GAA+B;AAC7BR,EAAAA,QAAQ,EAAE,KADmB;AAE7BC,EAAAA,IAAI,EAAE;AAFuB,CAA/B;AAKA,eAAeH,eAAf","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport YoutubeEmbeded from './YoutubeEmbeded';\nimport { getYouTubeID, booleanToNumber } from './helpers';\nimport { VIDEO_WRAPPER_CLASS_NAME } from '../../../../constants';\n\nconst YouTubeProvider = ({ url, autoplay, loop }) => {\n const videoId = getYouTubeID(url);\n\n if (!videoId) return null;\n const params = `loop=${booleanToNumber(loop)}`;\n\n return (\n <div className={VIDEO_WRAPPER_CLASS_NAME}>\n <YoutubeEmbeded autoplay={autoplay} videoId={videoId} params={params} />\n </div>\n );\n};\n\nYouTubeProvider.propTypes = {\n url: PropTypes.string.isRequired,\n autoplay: PropTypes.bool,\n loop: PropTypes.bool\n};\n\nYouTubeProvider.defaultProps = {\n autoplay: false,\n loop: false\n};\n\nexport default YouTubeProvider;\n"],"file":"YouTubeProvider.js"}
package/lib-es/components/Video/providers/YouTube/YoutubeEmbeded.js ADDED
@@ -0,0 +1,144 @@
1
+ import React, { useState, useEffect } from 'react';
2
+ import PropTypes from 'prop-types';
3
+ import { useInView } from '@blaze-react/utils/lib/customHooks';
4
+ import { IN_VIEW_CONFIG } from '../../../../constants';
5
+ const YT_HQ_FORMAT = 'hqdefault';
6
+ const YT_IMAGE_URL = 'https://i.ytimg.com';
7
+
8
+ const YoutubeEmbeded = ({
9
+ autoplay,
10
+ videoId,
11
+ playlistCoverId,
12
+ videoTitle,
13
+ poster,
14
+ videoParams,
15
+ announce,
16
+ noCookie,
17
+ webp,
18
+ playlist,
19
+ onIframeAdded,
20
+ muted,
21
+ adNetwork,
22
+ iframeClass
23
+ }) => {
24
+ const [isIntersecting, outerRef] = useInView(IN_VIEW_CONFIG);
25
+ const [preconnected, setPreconnected] = useState(false);
26
+ const [renderIframe, setRenderIframe] = useState(!!autoplay);
27
+ const [{
28
+ imageSize,
29
+ displayImage
30
+ }, setImageDetails] = useState({
31
+ imageSize: poster,
32
+ displayImage: false
33
+ });
34
+ const encodedId = encodeURIComponent(videoId);
35
+ const videoPlaylisCovertId = typeof playlistCoverId === 'string' ? encodeURIComponent(playlistCoverId) : null;
36
+ const paramsImp = videoParams ? `&${videoParams}` : '';
37
+ const format = webp ? 'webp' : 'jpg';
38
+ const vi = webp ? 'vi_webp' : 'vi';
39
+ const posterUrl = !playlist ? `${YT_IMAGE_URL}/${vi}/${encodedId}/${imageSize}.${format}` : `${YT_IMAGE_URL}/${vi}/${videoPlaylisCovertId}/${imageSize}.${format}`;
40
+ const ytUrl = noCookie ? 'https://www.youtube-nocookie.com' : 'https://www.youtube.com';
41
+ const mutedValue = muted ? '&mute=1' : '';
42
+ const iframeSrc = !playlist ? `${ytUrl}/embed/${encodedId}?autoplay=1${mutedValue}${paramsImp}` : `${ytUrl}/embed/videoseries?autoplay=1${mutedValue}&list=${encodedId}${paramsImp}`;
43
+ const parsedWrapperClassname = `yt-facade ${renderIframe ? 'yt-activated' : ''}`;
44
+ useEffect(() => {
45
+ if (!isIntersecting || imageSize === YT_HQ_FORMAT) return;
46
+ const img = new Image();
47
+
48
+ img.onload = () => {
49
+ let newImageSize = imageSize;
50
+ if (this && this.width === 120) newImageSize = YT_HQ_FORMAT;
51
+ setImageDetails({
52
+ imageSize: newImageSize,
53
+ displayImage: true
54
+ });
55
+ };
56
+
57
+ img.src = posterUrl;
58
+ }, [imageSize, isIntersecting, posterUrl]);
59
+
60
+ const warmConnections = () => {
61
+ if (preconnected) return;
62
+ setPreconnected(true);
63
+ };
64
+
65
+ const addIframe = () => {
66
+ if (renderIframe) return;
67
+ onIframeAdded();
68
+ setRenderIframe(true);
69
+ };
70
+
71
+ return /*#__PURE__*/React.createElement(React.Fragment, null, preconnected && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("link", {
72
+ rel: "preconnect",
73
+ href: YT_IMAGE_URL
74
+ }), /*#__PURE__*/React.createElement("link", {
75
+ rel: "preconnect",
76
+ href: ytUrl
77
+ }), /*#__PURE__*/React.createElement("link", {
78
+ rel: "preconnect",
79
+ href: "https://www.google.com"
80
+ }), adNetwork && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("link", {
81
+ rel: "preconnect",
82
+ href: "https://static.doubleclick.net"
83
+ }), /*#__PURE__*/React.createElement("link", {
84
+ rel: "preconnect",
85
+ href: "https://googleads.g.doubleclick.net"
86
+ }))), /*#__PURE__*/React.createElement("div", {
87
+ ref: outerRef,
88
+ role: "button",
89
+ onPointerOver: warmConnections,
90
+ onClick: addIframe,
91
+ className: parsedWrapperClassname,
92
+ "data-title": videoTitle,
93
+ style: {
94
+ backgroundImage: `url(${displayImage ? posterUrl : ''})`
95
+ }
96
+ }, /*#__PURE__*/React.createElement("div", {
97
+ type: "button",
98
+ className: "yt-facade-button-wrapper",
99
+ "aria-label": `${announce} ${videoTitle}`
100
+ }, /*#__PURE__*/React.createElement("div", {
101
+ className: "yt-facade-button"
102
+ })), renderIframe && /*#__PURE__*/React.createElement("iframe", {
103
+ className: iframeClass,
104
+ title: videoTitle,
105
+ allow: "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture",
106
+ allowFullScreen: true,
107
+ src: iframeSrc
108
+ })));
109
+ };
110
+
111
+ YoutubeEmbeded.propTypes = {
112
+ onIframeAdded: PropTypes.func,
113
+ adNetwork: PropTypes.bool,
114
+ autoplay: PropTypes.bool,
115
+ playlist: PropTypes.bool,
116
+ muted: PropTypes.bool,
117
+ webp: PropTypes.bool,
118
+ noCookie: PropTypes.bool,
119
+ videoId: PropTypes.string,
120
+ iframeClass: PropTypes.string,
121
+ poster: PropTypes.string,
122
+ announce: PropTypes.string,
123
+ playlistCoverId: PropTypes.string,
124
+ videoParams: PropTypes.string,
125
+ videoTitle: PropTypes.string
126
+ };
127
+ YoutubeEmbeded.defaultProps = {
128
+ onIframeAdded: () => {},
129
+ adNetwork: false,
130
+ autoplay: false,
131
+ playlist: false,
132
+ muted: false,
133
+ webp: false,
134
+ noCookie: false,
135
+ iframeClass: '',
136
+ poster: 'sddefault',
137
+ announce: 'Watch',
138
+ videoId: '',
139
+ playlistCoverId: '',
140
+ videoParams: '',
141
+ videoTitle: ''
142
+ };
143
+ export default YoutubeEmbeded;
144
+ //# sourceMappingURL=YoutubeEmbeded.js.map
package/lib-es/components/Video/providers/YouTube/YoutubeEmbeded.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../../../../src/components/Video/providers/YouTube/YoutubeEmbeded.js"],"names":["React","useState","useEffect","PropTypes","useInView","IN_VIEW_CONFIG","YT_HQ_FORMAT","YT_IMAGE_URL","YoutubeEmbeded","autoplay","videoId","playlistCoverId","videoTitle","poster","videoParams","announce","noCookie","webp","playlist","onIframeAdded","muted","adNetwork","iframeClass","isIntersecting","outerRef","preconnected","setPreconnected","renderIframe","setRenderIframe","imageSize","displayImage","setImageDetails","encodedId","encodeURIComponent","videoPlaylisCovertId","paramsImp","format","vi","posterUrl","ytUrl","mutedValue","iframeSrc","parsedWrapperClassname","img","Image","onload","newImageSize","width","src","warmConnections","addIframe","backgroundImage","propTypes","func","bool","string","defaultProps"],"mappings":"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","sourcesContent":["import React, { useState, useEffect } from 'react';\nimport PropTypes from 'prop-types';\nimport { useInView } from '@blaze-react/utils/lib/customHooks';\nimport { IN_VIEW_CONFIG } from '../../../../constants';\n\nconst YT_HQ_FORMAT = 'hqdefault';\nconst YT_IMAGE_URL = 'https://i.ytimg.com';\n\nconst YoutubeEmbeded = ({\n autoplay,\n videoId,\n playlistCoverId,\n videoTitle,\n poster,\n videoParams,\n announce,\n noCookie,\n webp,\n playlist,\n onIframeAdded,\n muted,\n adNetwork,\n iframeClass\n}) => {\n const [isIntersecting, outerRef] = useInView(IN_VIEW_CONFIG);\n const [preconnected, setPreconnected] = useState(false);\n const [renderIframe, setRenderIframe] = useState(!!autoplay);\n const [{ imageSize, displayImage }, setImageDetails] = useState({\n imageSize: poster,\n displayImage: false\n });\n\n const encodedId = encodeURIComponent(videoId);\n const videoPlaylisCovertId =\n typeof playlistCoverId === 'string' ? encodeURIComponent(playlistCoverId) : null;\n const paramsImp = videoParams ? `&${videoParams}` : '';\n const format = webp ? 'webp' : 'jpg';\n const vi = webp ? 'vi_webp' : 'vi';\n const posterUrl = !playlist\n ? `${YT_IMAGE_URL}/${vi}/${encodedId}/${imageSize}.${format}`\n : `${YT_IMAGE_URL}/${vi}/${videoPlaylisCovertId}/${imageSize}.${format}`;\n const ytUrl = noCookie ? 'https://www.youtube-nocookie.com' : 'https://www.youtube.com';\n\n const mutedValue = muted ? '&mute=1' : '';\n const iframeSrc = !playlist\n ? `${ytUrl}/embed/${encodedId}?autoplay=1${mutedValue}${paramsImp}`\n : `${ytUrl}/embed/videoseries?autoplay=1${mutedValue}&list=${encodedId}${paramsImp}`;\n const parsedWrapperClassname = `yt-facade ${renderIframe ? 'yt-activated' : ''}`;\n\n useEffect(\n () => {\n if (!isIntersecting || imageSize === YT_HQ_FORMAT) return;\n\n const img = new Image();\n img.onload = () => {\n let newImageSize = imageSize;\n if (this && this.width === 120) newImageSize = YT_HQ_FORMAT;\n setImageDetails({ imageSize: newImageSize, displayImage: true });\n };\n\n img.src = posterUrl;\n },\n [imageSize, isIntersecting, posterUrl]\n );\n\n const warmConnections = () => {\n if (preconnected) return;\n setPreconnected(true);\n };\n\n const addIframe = () => {\n if (renderIframe) return;\n onIframeAdded();\n setRenderIframe(true);\n };\n\n return (\n <>\n {preconnected && (\n <>\n <link rel=\"preconnect\" href={YT_IMAGE_URL} />\n <link rel=\"preconnect\" href={ytUrl} />\n <link rel=\"preconnect\" href=\"https://www.google.com\" />\n {adNetwork && (\n <>\n <link rel=\"preconnect\" href=\"https://static.doubleclick.net\" />\n <link rel=\"preconnect\" href=\"https://googleads.g.doubleclick.net\" />\n </>\n )}\n </>\n )}\n <div\n ref={outerRef}\n role=\"button\"\n onPointerOver={warmConnections}\n onClick={addIframe}\n className={parsedWrapperClassname}\n data-title={videoTitle}\n style={{\n backgroundImage: `url(${displayImage ? posterUrl : ''})`\n }}>\n <div\n type=\"button\"\n className=\"yt-facade-button-wrapper\"\n aria-label={`${announce} ${videoTitle}`}>\n <div className=\"yt-facade-button\" />\n </div>\n {renderIframe && (\n <iframe\n className={iframeClass}\n title={videoTitle}\n allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\"\n allowFullScreen\n src={iframeSrc}\n />\n )}\n </div>\n </>\n );\n};\n\nYoutubeEmbeded.propTypes = {\n onIframeAdded: PropTypes.func,\n adNetwork: PropTypes.bool,\n autoplay: PropTypes.bool,\n playlist: PropTypes.bool,\n muted: PropTypes.bool,\n webp: PropTypes.bool,\n noCookie: PropTypes.bool,\n videoId: PropTypes.string,\n iframeClass: PropTypes.string,\n poster: PropTypes.string,\n announce: PropTypes.string,\n playlistCoverId: PropTypes.string,\n videoParams: PropTypes.string,\n videoTitle: PropTypes.string\n};\n\nYoutubeEmbeded.defaultProps = {\n onIframeAdded: () => {},\n adNetwork: false,\n autoplay: false,\n playlist: false,\n muted: false,\n webp: false,\n noCookie: false,\n iframeClass: '',\n poster: 'sddefault',\n announce: 'Watch',\n videoId: '',\n playlistCoverId: '',\n videoParams: '',\n videoTitle: ''\n};\n\nexport default YoutubeEmbeded;\n"],"file":"YoutubeEmbeded.js"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@blaze-cms/react-page-builder",
3
- "version": "0.118.0-alpha.0",
3
+ "version": "0.118.0-alpha.1",
4
4
  "description": "Blaze react page builder",
5
5
  "main": "lib/index.js",
6
6
  "module": "lib-es/index.js",
@@ -58,7 +58,6 @@
58
58
  "react-html-parser": "2.0.2",
59
59
  "react-jw-player": "^1.19.1",
60
60
  "react-waypoint": "^9.0.2",
61
- "react-youtube": "7.11.3",
62
61
  "regenerator-runtime": "^0.13.3",
63
62
  "uuid": "^3.3.3",
64
63
  "video-react": "0.14.1"
@@ -88,5 +87,5 @@
88
87
  "lib/*",
89
88
  "lib-es/*"
90
89
  ],
91
- "gitHead": "f12d8141dc829f454e5ed5712ba4901b038447db"
90
+ "gitHead": "77636925f8908f07201713b948324b8cbb62eaa3"
92
91
  }
package/src/components/Video/providers/YouTube/YouTubeProvider.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import React from 'react';
2
2
  import PropTypes from 'prop-types';
3
- import YouTube from 'react-youtube';
3
+ import YoutubeEmbeded from './YoutubeEmbeded';
4
4
  import { getYouTubeID, booleanToNumber } from './helpers';
5
5
  import { VIDEO_WRAPPER_CLASS_NAME } from '../../../../constants';
6
6
 
@@ -8,15 +8,13 @@ const YouTubeProvider = ({ url, autoplay, loop }) => {
8
8
  const videoId = getYouTubeID(url);
9
9
 
10
10
  if (!videoId) return null;
11
+ const params = `loop=${booleanToNumber(loop)}`;
11
12
 
12
- const opts = {
13
- playerVars: {
14
- autoplay: booleanToNumber(autoplay),
15
- loop: booleanToNumber(loop)
16
- }
17
- };
18
-
19
- return <YouTube videoId={videoId} containerClassName={VIDEO_WRAPPER_CLASS_NAME} opts={opts} />;
13
+ return (
14
+ <div className={VIDEO_WRAPPER_CLASS_NAME}>
15
+ <YoutubeEmbeded autoplay={autoplay} videoId={videoId} params={params} />
16
+ </div>
17
+ );
20
18
  };
21
19
 
22
20
  YouTubeProvider.propTypes = {
package/src/components/Video/providers/YouTube/YoutubeEmbeded.js ADDED
@@ -0,0 +1,156 @@
1
+ import React, { useState, useEffect } from 'react';
2
+ import PropTypes from 'prop-types';
3
+ import { useInView } from '@blaze-react/utils/lib/customHooks';
4
+ import { IN_VIEW_CONFIG } from '../../../../constants';
5
+
6
+ const YT_HQ_FORMAT = 'hqdefault';
7
+ const YT_IMAGE_URL = 'https://i.ytimg.com';
8
+
9
+ const YoutubeEmbeded = ({
10
+ autoplay,
11
+ videoId,
12
+ playlistCoverId,
13
+ videoTitle,
14
+ poster,
15
+ videoParams,
16
+ announce,
17
+ noCookie,
18
+ webp,
19
+ playlist,
20
+ onIframeAdded,
21
+ muted,
22
+ adNetwork,
23
+ iframeClass
24
+ }) => {
25
+ const [isIntersecting, outerRef] = useInView(IN_VIEW_CONFIG);
26
+ const [preconnected, setPreconnected] = useState(false);
27
+ const [renderIframe, setRenderIframe] = useState(!!autoplay);
28
+ const [{ imageSize, displayImage }, setImageDetails] = useState({
29
+ imageSize: poster,
30
+ displayImage: false
31
+ });
32
+
33
+ const encodedId = encodeURIComponent(videoId);
34
+ const videoPlaylisCovertId =
35
+ typeof playlistCoverId === 'string' ? encodeURIComponent(playlistCoverId) : null;
36
+ const paramsImp = videoParams ? `&${videoParams}` : '';
37
+ const format = webp ? 'webp' : 'jpg';
38
+ const vi = webp ? 'vi_webp' : 'vi';
39
+ const posterUrl = !playlist
40
+ ? `${YT_IMAGE_URL}/${vi}/${encodedId}/${imageSize}.${format}`
41
+ : `${YT_IMAGE_URL}/${vi}/${videoPlaylisCovertId}/${imageSize}.${format}`;
42
+ const ytUrl = noCookie ? 'https://www.youtube-nocookie.com' : 'https://www.youtube.com';
43
+
44
+ const mutedValue = muted ? '&mute=1' : '';
45
+ const iframeSrc = !playlist
46
+ ? `${ytUrl}/embed/${encodedId}?autoplay=1${mutedValue}${paramsImp}`
47
+ : `${ytUrl}/embed/videoseries?autoplay=1${mutedValue}&list=${encodedId}${paramsImp}`;
48
+ const parsedWrapperClassname = `yt-facade ${renderIframe ? 'yt-activated' : ''}`;
49
+
50
+ useEffect(
51
+ () => {
52
+ if (!isIntersecting || imageSize === YT_HQ_FORMAT) return;
53
+
54
+ const img = new Image();
55
+ img.onload = () => {
56
+ let newImageSize = imageSize;
57
+ if (this && this.width === 120) newImageSize = YT_HQ_FORMAT;
58
+ setImageDetails({ imageSize: newImageSize, displayImage: true });
59
+ };
60
+
61
+ img.src = posterUrl;
62
+ },
63
+ [imageSize, isIntersecting, posterUrl]
64
+ );
65
+
66
+ const warmConnections = () => {
67
+ if (preconnected) return;
68
+ setPreconnected(true);
69
+ };
70
+
71
+ const addIframe = () => {
72
+ if (renderIframe) return;
73
+ onIframeAdded();
74
+ setRenderIframe(true);
75
+ };
76
+
77
+ return (
78
+ <>
79
+ {preconnected && (
80
+ <>
81
+ <link rel="preconnect" href={YT_IMAGE_URL} />
82
+ <link rel="preconnect" href={ytUrl} />
83
+ <link rel="preconnect" href="https://www.google.com" />
84
+ {adNetwork && (
85
+ <>
86
+ <link rel="preconnect" href="https://static.doubleclick.net" />
87
+ <link rel="preconnect" href="https://googleads.g.doubleclick.net" />
88
+ </>
89
+ )}
90
+ </>
91
+ )}
92
+ <div
93
+ ref={outerRef}
94
+ role="button"
95
+ onPointerOver={warmConnections}
96
+ onClick={addIframe}
97
+ className={parsedWrapperClassname}
98
+ data-title={videoTitle}
99
+ style={{
100
+ backgroundImage: `url(${displayImage ? posterUrl : ''})`
101
+ }}>
102
+ <div
103
+ type="button"
104
+ className="yt-facade-button-wrapper"
105
+ aria-label={`${announce} ${videoTitle}`}>
106
+ <div className="yt-facade-button" />
107
+ </div>
108
+ {renderIframe && (
109
+ <iframe
110
+ className={iframeClass}
111
+ title={videoTitle}
112
+ allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
113
+ allowFullScreen
114
+ src={iframeSrc}
115
+ />
116
+ )}
117
+ </div>
118
+ </>
119
+ );
120
+ };
121
+
122
+ YoutubeEmbeded.propTypes = {
123
+ onIframeAdded: PropTypes.func,
124
+ adNetwork: PropTypes.bool,
125
+ autoplay: PropTypes.bool,
126
+ playlist: PropTypes.bool,
127
+ muted: PropTypes.bool,
128
+ webp: PropTypes.bool,
129
+ noCookie: PropTypes.bool,
130
+ videoId: PropTypes.string,
131
+ iframeClass: PropTypes.string,
132
+ poster: PropTypes.string,
133
+ announce: PropTypes.string,
134
+ playlistCoverId: PropTypes.string,
135
+ videoParams: PropTypes.string,
136
+ videoTitle: PropTypes.string
137
+ };
138
+
139
+ YoutubeEmbeded.defaultProps = {
140
+ onIframeAdded: () => {},
141
+ adNetwork: false,
142
+ autoplay: false,
143
+ playlist: false,
144
+ muted: false,
145
+ webp: false,
146
+ noCookie: false,
147
+ iframeClass: '',
148
+ poster: 'sddefault',
149
+ announce: 'Watch',
150
+ videoId: '',
151
+ playlistCoverId: '',
152
+ videoParams: '',
153
+ videoTitle: ''
154
+ };
155
+
156
+ export default YoutubeEmbeded;
package/tests/unit/src/components/Video/providers/YouTube/YouTubeProvider.test.js CHANGED
@@ -5,10 +5,6 @@ import YouTubeProvider from '../../../../../../../src/components/Video/providers
5
5
  describe('YouTubeProvider component', () => {
6
6
  const props = { url: 'https://www.youtube.com/watch?v=mockedID', modifier: 'mocked-modifier' };
7
7
 
8
- it('should be defined', () => {
9
- expect(YouTubeProvider).toBeDefined();
10
- });
11
-
12
8
  it('should render without throwing error and match snapshot', async () => {
13
9
  const { asFragment } = render(YouTubeProvider, props);
14
10
  expect(asFragment()).toMatchSnapshot();
package/tests/unit/src/components/Video/providers/YouTube/__snapshots__/YouTubeProvider.test.js.snap CHANGED
@@ -5,7 +5,22 @@ exports[`YouTubeProvider component should render without throwing error and matc
5
5
  <div
6
6
  class="video__wrapper"
7
7
  >
8
- <div />
8
+ <div
9
+ class="yt-facade "
10
+ data-title=""
11
+ role="button"
12
+ style="background-image: url();"
13
+ >
14
+ <div
15
+ aria-label="Watch "
16
+ class="yt-facade-button-wrapper"
17
+ type="button"
18
+ >
19
+ <div
20
+ class="yt-facade-button"
21
+ />
22
+ </div>
23
+ </div>
9
24
  </div>
10
25
  </DocumentFragment>
11
26
  `;