react-youtube-lite - npm Package Compare versions

Comparing version 0.1.0 to 0.2.0

dist/react-youtube-lite.cjs.development.js

@@ -8,40 +8,2 @@ 'use strict';
 // Dependencies
-
-var _slicedToArray = /*#__PURE__*/function () {
-  function sliceIterator(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']) _i['return']();
-      } finally {
-        if (_d) throw _e;
-      }
-    }
-
-    return _arr;
-  }
-
-  return function (arr, i) {
-    if (Array.isArray(arr)) {
-      return arr;
-    } else if (Symbol.iterator in Object(arr)) {
-      return sliceIterator(arr, i);
-    } else {
-      throw new TypeError('Invalid attempt to destructure non-iterable instance');
-    }
-  };
-}();
 /**
@@ -53,3 +15,2 @@ * Returns the ID of the youtube video url provided
 
-
 function getYoutubeId(url) {
@@ -88,20 +49,18 @@ var regExp = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#&?]*).*/;
 
-  var _useState = React.useState(false);
+  var _React$useState = React.useState(false),
+      preconnected = _React$useState[0],
+      setPreconnected = _React$useState[1];
 
-  var _useState2 = _slicedToArray(_useState, 2);
+  var _React$useState2 = React.useState(false),
+      iframe = _React$useState2[0],
+      setIframe = _React$useState2[1];
 
-  var preconnected = _useState2[0];
-  var setPreconnected = _useState2[1];
-
-  var _useState3 = React.useState(false);
-
-  var _useState4 = _slicedToArray(_useState3, 2);
-
-  var iframe = _useState4[0];
-  var setIframe = _useState4[1];
   var videoId = encodeURIComponent(getYoutubeId(url));
   var videoTitle = title;
-  var posterUrl = 'https://i.ytimg.com/vi/'.concat(videoId, '/').concat(poster, '.jpg');
+  var posterUrl = "https://i.ytimg.com/vi/" + videoId + "/" + poster + ".jpg";
   var ytUrl = noCookie ? 'https://www.youtube-nocookie.com' : 'https://www.youtube.com';
-  var iframeSrc = !playlist ? ''.concat(ytUrl, '/embed/').concat(videoId, '?autoplay=1') : ''.concat(ytUrl, '/embed/videoseries?list=').concat(videoId);
+  var iframeSrc = !playlist ? ytUrl + "/embed/" + videoId + "?autoplay=1" : ytUrl + "/embed/videoseries?list=" + videoId;
+  /**
+   * Preload google `link` in header
+   */
 
@@ -112,3 +71,7 @@ var warmConnections = function warmConnections() {
   };
+  /**
+   * Set iframe as active if already active, return.
+   */
 
+
   var addIframe = function addIframe() {
@@ -119,35 +82,35 @@ if (iframe) return;
 
-  return React.createElement(React.Fragment, null, React.createElement('link', {
-    rel: 'preload',
+  return React.createElement(React.Fragment, null, React.createElement("link", {
+    rel: "preload",
     href: posterUrl,
-    as: 'image'
-  }), React.createElement(React.Fragment, null, preconnected && React.createElement(React.Fragment, null, React.createElement('link', {
-    rel: 'preconnect',
+    as: "image"
+  }), React.createElement(React.Fragment, null, preconnected && React.createElement(React.Fragment, null, React.createElement("link", {
+    rel: "preconnect",
     href: ytUrl
-  }), React.createElement('link', {
-    rel: 'preconnect',
-    href: 'https://www.google.com'
-  }), adNetwork && React.createElement(React.Fragment, null, React.createElement('link', {
-    rel: 'preconnect',
-    href: 'https://static.doubleclick.net'
-  }), React.createElement('link', {
-    rel: 'preconnect',
-    href: 'https://googleads.g.doubleclick.net'
-  })))), React.createElement('div', {
+  }), React.createElement("link", {
+    rel: "preconnect",
+    href: "https://www.google.com"
+  }), adNetwork && React.createElement(React.Fragment, null, React.createElement("link", {
+    rel: "preconnect",
+    href: "https://static.doubleclick.net"
+  }), React.createElement("link", {
+    rel: "preconnect",
+    href: "https://googleads.g.doubleclick.net"
+  })))), React.createElement("div", {
     onPointerOver: warmConnections,
     onClick: addIframe,
-    className: ''.concat(wrapperClass, ' ').concat(aspectRatio).concat(iframe ? " " + activatedClass : ''),
-    'data-title': videoTitle,
+    className: wrapperClass + " " + aspectRatio + " " + (iframe ? activatedClass : ''),
+    "data-title": videoTitle,
     style: {
-      backgroundImage: 'url('.concat(posterUrl, ')')
+      backgroundImage: "url(" + posterUrl + ")"
     }
-  }, React.createElement('div', {
+  }, React.createElement("div", {
     className: playerClass
-  }), iframe && React.createElement('iframe', {
+  }), iframe && React.createElement("iframe", {
     className: iframeClass,
     title: videoTitle,
-    width: '560',
-    height: '315',
-    frameBorder: '0',
-    allow: 'accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture',
+    width: "560",
+    height: "315",
+    frameBorder: "0",
+    allow: "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture",
     allowFullScreen: true,
@@ -154,0 +117,0 @@ src: iframeSrc

dist/react-youtube-lite.cjs.production.min.js

@@ -1,2 +0,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react");!function(e,t){void 0===t&&(t={});var o=t.insertAt;if("undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],a=document.createElement("style");a.type="text/css","top"===o&&r.firstChild?r.insertBefore(a,r.firstChild):r.appendChild(a),a.styleSheet?a.styleSheet.cssText=e:a.appendChild(document.createTextNode(e))}}('.aspect-ratio-none{padding-bottom:0}.aspect-ratio-square{padding-bottom:100%}.aspect-ratio-16\\/9{padding-bottom:56.25%}.aspect-ratio-4\\/3{padding-bottom:75%}.aspect-ratio-21\\/9{padding-bottom:42.86%}.embed-responsive{position:relative!important;display:block!important;height:0!important;padding:0 0 56.25%!important;overflow:hidden!important}.embed-responsive .embed-responsive-item,.embed-responsive embed,.embed-responsive iframe,.embed-responsive object,.embed-responsive video{position:absolute;top:0;left:0;bottom:0;height:100%;width:100%;border:0}.ryt-lite{background-color:#000;position:relative;display:block;contain:content;background-position:50%;background-size:cover;cursor:pointer}.ryt-lite:before{content:"";display:block;position:absolute;top:0;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADGCAYAAAAT+OqFAAAAdklEQVQoz42QQQ7AIAgEF/T/D+kbq/RWAlnQyyazA4aoAB4FsBSA/bFjuF1EOL7VbrIrBuusmrt4ZZORfb6ehbWdnRHEIiITaEUKa5EJqUakRSaEYBJSCY2dEstQY7AuxahwXFrvZmWl2rh4JZ07z9dLtesfNj5q0FU3A5ObbwAAAABJRU5ErkJggg==);background-position:top;background-repeat:repeat-x;height:60px;padding-bottom:50px;width:100%;transition:all .2s cubic-bezier(0,0,.2,1)}.ryt-lite:after{content:"";display:block;padding-bottom:56.25%}.ryt-lite>iframe{width:100%;height:100%;position:absolute;top:0;left:0}.ryt-lite>.lty-playbtn{width:70px;height:46px;background-color:#212121;z-index:1;opacity:.8;border-radius:14%;transition:all .2s cubic-bezier(0,0,.2,1)}.ryt-lite:hover>.lty-playbtn{background-color:red;opacity:1}.ryt-lite>.lty-playbtn:before{content:"";border-color:transparent transparent transparent #fff;border-style:solid;border-width:11px 0 11px 19px}.ryt-lite>.lty-playbtn,.ryt-lite>.lty-playbtn:before{position:absolute;top:50%;left:50%;transform:translate3d(-50%,-50%,0)}.ryt-lite.lyt-activated{cursor:unset}.ryt-lite.lyt-activated:before,.ryt-lite.lyt-activated>.lty-playbtn{opacity:0;pointer-events:none}');var t=function(){return function(e,t){if(Array.isArray(e))return e;if(Symbol.iterator in Object(e))return function(e,t){var o=[],r=!0,a=!1,i=void 0;try{for(var n,l=e[Symbol.iterator]();!(r=(n=l.next()).done)&&(o.push(n.value),!t||o.length!==t);r=!0);}catch(e){a=!0,i=e}finally{try{!r&&l.return&&l.return()}finally{if(a)throw i}}return o}(e,t);throw new TypeError("Invalid attempt to destructure non-iterable instance")}}();function o(e){var t=e.match(/^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#&?]*).*/);return t&&11==t[7].length?t[7]:""}exports.ReactYouTubeLite=function(r){var a=r.adNetwork,i=void 0===a||a,n=r.url,l=void 0===n?"":n,c=r.playlist,d=void 0!==c&&c,s=r.poster,p=void 0===s?"hqdefault":s,u=r.title,b=void 0===u?"React YouTube Lite":u,m=r.noCookie,y=void 0!==m&&m,v=r.activatedClass,h=void 0===v?"lyt-activated":v,g=r.iframeClass,f=void 0===g?"embed-responsive-item":g,A=r.playerClass,k=void 0===A?"lty-playbtn":A,w=r.wrapperClass,E=void 0===w?"ryt-lite embed-responsive":w,x=r.aspectRatio,C=void 0===x?"aspect-ratio-16/9":x,F=e.useState(!1),S=t(F,2),R=S[0],B=S[1],T=e.useState(!1),I=t(T,2),N=I[0],O=I[1],q=encodeURIComponent(o(l)),z=b,Q="https://i.ytimg.com/vi/".concat(q,"/").concat(p,".jpg"),U=y?"https://www.youtube-nocookie.com":"https://www.youtube.com",Y=d?"".concat(U,"/embed/videoseries?list=").concat(q):"".concat(U,"/embed/").concat(q,"?autoplay=1");return e.createElement(e.Fragment,null,e.createElement("link",{rel:"preload",href:Q,as:"image"}),e.createElement(e.Fragment,null,R&&e.createElement(e.Fragment,null,e.createElement("link",{rel:"preconnect",href:U}),e.createElement("link",{rel:"preconnect",href:"https://www.google.com"}),i&&e.createElement(e.Fragment,null,e.createElement("link",{rel:"preconnect",href:"https://static.doubleclick.net"}),e.createElement("link",{rel:"preconnect",href:"https://googleads.g.doubleclick.net"})))),e.createElement("div",{onPointerOver:function(){R||B(!0)},onClick:function(){N||O(!0)},className:"".concat(E," ").concat(C).concat(N?" "+h:""),"data-title":z,style:{backgroundImage:"url(".concat(Q,")")}},e.createElement("div",{className:k}),N&&e.createElement("iframe",{className:f,title:z,width:"560",height:"315",frameBorder:"0",allow:"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture",allowFullScreen:!0,src:Y})))},exports.getYoutubeId=o;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react");function t(e){var t=e.match(/^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#&?]*).*/);return t&&11==t[7].length?t[7]:""}!function(e,t){void 0===t&&(t={});var o=t.insertAt;if("undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],i=document.createElement("style");i.type="text/css","top"===o&&r.firstChild?r.insertBefore(i,r.firstChild):r.appendChild(i),i.styleSheet?i.styleSheet.cssText=e:i.appendChild(document.createTextNode(e))}}('.aspect-ratio-none{padding-bottom:0}.aspect-ratio-square{padding-bottom:100%}.aspect-ratio-16\\/9{padding-bottom:56.25%}.aspect-ratio-4\\/3{padding-bottom:75%}.aspect-ratio-21\\/9{padding-bottom:42.86%}.embed-responsive{position:relative!important;display:block!important;height:0!important;padding:0 0 56.25%!important;overflow:hidden!important}.embed-responsive .embed-responsive-item,.embed-responsive embed,.embed-responsive iframe,.embed-responsive object,.embed-responsive video{position:absolute;top:0;left:0;bottom:0;height:100%;width:100%;border:0}.ryt-lite{background-color:#000;position:relative;display:block;contain:content;background-position:50%;background-size:cover;cursor:pointer}.ryt-lite:before{content:"";display:block;position:absolute;top:0;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADGCAYAAAAT+OqFAAAAdklEQVQoz42QQQ7AIAgEF/T/D+kbq/RWAlnQyyazA4aoAB4FsBSA/bFjuF1EOL7VbrIrBuusmrt4ZZORfb6ehbWdnRHEIiITaEUKa5EJqUakRSaEYBJSCY2dEstQY7AuxahwXFrvZmWl2rh4JZ07z9dLtesfNj5q0FU3A5ObbwAAAABJRU5ErkJggg==);background-position:top;background-repeat:repeat-x;height:60px;padding-bottom:50px;width:100%;transition:all .2s cubic-bezier(0,0,.2,1)}.ryt-lite:after{content:"";display:block;padding-bottom:56.25%}.ryt-lite>iframe{width:100%;height:100%;position:absolute;top:0;left:0}.ryt-lite>.lty-playbtn{width:70px;height:46px;background-color:#212121;z-index:1;opacity:.8;border-radius:14%;transition:all .2s cubic-bezier(0,0,.2,1)}.ryt-lite:hover>.lty-playbtn{background-color:red;opacity:1}.ryt-lite>.lty-playbtn:before{content:"";border-color:transparent transparent transparent #fff;border-style:solid;border-width:11px 0 11px 19px}.ryt-lite>.lty-playbtn,.ryt-lite>.lty-playbtn:before{position:absolute;top:50%;left:50%;transform:translate3d(-50%,-50%,0)}.ryt-lite.lyt-activated{cursor:unset}.ryt-lite.lyt-activated:before,.ryt-lite.lyt-activated>.lty-playbtn{opacity:0;pointer-events:none}'),exports.ReactYouTubeLite=function(o){var r=o.adNetwork,i=void 0===r||r,a=o.url,n=void 0===a?"":a,l=o.playlist,d=void 0!==l&&l,s=o.poster,c=void 0===s?"hqdefault":s,p=o.title,b=void 0===p?"React YouTube Lite":p,m=o.noCookie,u=void 0!==m&&m,y=o.activatedClass,g=void 0===y?"lyt-activated":y,h=o.iframeClass,v=void 0===h?"embed-responsive-item":h,f=o.playerClass,A=void 0===f?"lty-playbtn":f,k=o.wrapperClass,w=void 0===k?"ryt-lite embed-responsive":k,E=o.aspectRatio,x=void 0===E?"aspect-ratio-16/9":E,C=e.useState(!1),F=C[0],R=C[1],B=e.useState(!1),S=B[0],N=B[1],T=encodeURIComponent(t(n)),q=b,z="https://i.ytimg.com/vi/"+T+"/"+c+".jpg",I=u?"https://www.youtube-nocookie.com":"https://www.youtube.com",O=d?I+"/embed/videoseries?list="+T:I+"/embed/"+T+"?autoplay=1";return e.createElement(e.Fragment,null,e.createElement("link",{rel:"preload",href:z,as:"image"}),e.createElement(e.Fragment,null,F&&e.createElement(e.Fragment,null,e.createElement("link",{rel:"preconnect",href:I}),e.createElement("link",{rel:"preconnect",href:"https://www.google.com"}),i&&e.createElement(e.Fragment,null,e.createElement("link",{rel:"preconnect",href:"https://static.doubleclick.net"}),e.createElement("link",{rel:"preconnect",href:"https://googleads.g.doubleclick.net"})))),e.createElement("div",{onPointerOver:function(){F||R(!0)},onClick:function(){S||N(!0)},className:w+" "+x+" "+(S?g:""),"data-title":q,style:{backgroundImage:"url("+z+")"}},e.createElement("div",{className:A}),S&&e.createElement("iframe",{className:v,title:q,width:"560",height:"315",frameBorder:"0",allow:"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture",allowFullScreen:!0,src:O})))},exports.getYoutubeId=t;
 //# sourceMappingURL=react-youtube-lite.cjs.production.min.js.map

dist/react-youtube-lite.esm.js

@@ -34,40 +34,2 @@ import { useState, createElement, Fragment } from 'react';
 // Dependencies
-
-var _slicedToArray = /*#__PURE__*/function () {
-  function sliceIterator(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']) _i['return']();
-      } finally {
-        if (_d) throw _e;
-      }
-    }
-
-    return _arr;
-  }
-
-  return function (arr, i) {
-    if (Array.isArray(arr)) {
-      return arr;
-    } else if (Symbol.iterator in Object(arr)) {
-      return sliceIterator(arr, i);
-    } else {
-      throw new TypeError('Invalid attempt to destructure non-iterable instance');
-    }
-  };
-}();
 /**
@@ -79,3 +41,2 @@ * Returns the ID of the youtube video url provided
 
-
 function getYoutubeId(url) {
@@ -114,20 +75,18 @@ var regExp = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#&?]*).*/;
 
-  var _useState = useState(false);
+  var _React$useState = useState(false),
+      preconnected = _React$useState[0],
+      setPreconnected = _React$useState[1];
 
-  var _useState2 = _slicedToArray(_useState, 2);
+  var _React$useState2 = useState(false),
+      iframe = _React$useState2[0],
+      setIframe = _React$useState2[1];
 
-  var preconnected = _useState2[0];
-  var setPreconnected = _useState2[1];
-
-  var _useState3 = useState(false);
-
-  var _useState4 = _slicedToArray(_useState3, 2);
-
-  var iframe = _useState4[0];
-  var setIframe = _useState4[1];
   var videoId = encodeURIComponent(getYoutubeId(url));
   var videoTitle = title;
-  var posterUrl = 'https://i.ytimg.com/vi/'.concat(videoId, '/').concat(poster, '.jpg');
+  var posterUrl = "https://i.ytimg.com/vi/" + videoId + "/" + poster + ".jpg";
   var ytUrl = noCookie ? 'https://www.youtube-nocookie.com' : 'https://www.youtube.com';
-  var iframeSrc = !playlist ? ''.concat(ytUrl, '/embed/').concat(videoId, '?autoplay=1') : ''.concat(ytUrl, '/embed/videoseries?list=').concat(videoId);
+  var iframeSrc = !playlist ? ytUrl + "/embed/" + videoId + "?autoplay=1" : ytUrl + "/embed/videoseries?list=" + videoId;
+  /**
+   * Preload google `link` in header
+   */
 
@@ -138,3 +97,7 @@ var warmConnections = function warmConnections() {
   };
+  /**
+   * Set iframe as active if already active, return.
+   */
 
+
   var addIframe = function addIframe() {
@@ -145,35 +108,35 @@ if (iframe) return;
 
-  return createElement(Fragment, null, createElement('link', {
-    rel: 'preload',
+  return createElement(Fragment, null, createElement("link", {
+    rel: "preload",
     href: posterUrl,
-    as: 'image'
-  }), createElement(Fragment, null, preconnected && createElement(Fragment, null, createElement('link', {
-    rel: 'preconnect',
+    as: "image"
+  }), createElement(Fragment, null, preconnected && createElement(Fragment, null, createElement("link", {
+    rel: "preconnect",
     href: ytUrl
-  }), createElement('link', {
-    rel: 'preconnect',
-    href: 'https://www.google.com'
-  }), adNetwork && createElement(Fragment, null, createElement('link', {
-    rel: 'preconnect',
-    href: 'https://static.doubleclick.net'
-  }), createElement('link', {
-    rel: 'preconnect',
-    href: 'https://googleads.g.doubleclick.net'
-  })))), createElement('div', {
+  }), createElement("link", {
+    rel: "preconnect",
+    href: "https://www.google.com"
+  }), adNetwork && createElement(Fragment, null, createElement("link", {
+    rel: "preconnect",
+    href: "https://static.doubleclick.net"
+  }), createElement("link", {
+    rel: "preconnect",
+    href: "https://googleads.g.doubleclick.net"
+  })))), createElement("div", {
     onPointerOver: warmConnections,
     onClick: addIframe,
-    className: ''.concat(wrapperClass, ' ').concat(aspectRatio).concat(iframe ? " " + activatedClass : ''),
-    'data-title': videoTitle,
+    className: wrapperClass + " " + aspectRatio + " " + (iframe ? activatedClass : ''),
+    "data-title": videoTitle,
     style: {
-      backgroundImage: 'url('.concat(posterUrl, ')')
+      backgroundImage: "url(" + posterUrl + ")"
     }
-  }, createElement('div', {
+  }, createElement("div", {
     className: playerClass
-  }), iframe && createElement('iframe', {
+  }), iframe && createElement("iframe", {
     className: iframeClass,
     title: videoTitle,
-    width: '560',
-    height: '315',
-    frameBorder: '0',
-    allow: 'accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture',
+    width: "560",
+    height: "315",
+    frameBorder: "0",
+    allow: "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture",
     allowFullScreen: true,
@@ -180,0 +143,0 @@ src: iframeSrc

package.json

 {
-  "version": "0.1.0",
+  "version": "0.2.0",
   "license": "MIT",
@@ -4,0 +4,0 @@ "main": "dist/index.js",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

55795

decreased by-20.47%

Lines of code

657

decreased by-15.98%

No dependency changes