@codesweetly/react-youtube-playlist - npm Package Compare versions

Comparing version 0.0.28 to 0.0.39

package.json

 {
   "name": "@codesweetly/react-youtube-playlist",
-  "version": "0.0.28",
+  "version": "0.0.39",
   "description": "A React component for displaying YouTube video playlists on a web app. Create a beautiful gallery of YouTube videos that play with a lightbox",
@@ -9,2 +9,5 @@ "homepage": "https://codesweetly.com",
   "license": "MIT",
+  "scripts": {
+    "build": "babel src/components/ -d src/components/"
+  },
   "keywords": [
@@ -28,17 +31,14 @@ "react",
   "dependencies": {
-    "fslightbox-react": "^1.6.2-2",
-    "prop-types": "^15.8.1",
-    "react": "^18.2.0"
+    "fslightbox-react": "^1.6.2-2"
   },
   "devDependencies": {
+    "@babel/cli": "^7.19.3",
     "@babel/core": "^7.20.5",
-    "@babel/plugin-proposal-class-properties": "^7.18.6",
     "@babel/preset-env": "^7.20.2",
-    "@babel/preset-react": "^7.18.6",
-    "babel-loader": "^9.1.0",
-    "css-loader": "^6.7.3",
-    "style-loader": "^3.3.1",
-    "webpack": "^5.75.0",
-    "webpack-cli": "^5.0.1"
+    "@babel/preset-react": "^7.18.6"
+  },
+  "peerDependencies": {
+    "prop-types": "^15.8.1",
+    "react": "^18.2.0"
   }
 }

src/components/Loader.js

@@ -1,23 +0,40 @@
-import React from "react";
-import "../css/Loader.css";
+"use strict";
 
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+require("../css/Loader.css");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function Loader() {
-  return (
-    <div className="sk-circle">
-      <div className="sk-circle1 sk-child"></div>
-      <div className="sk-circle2 sk-child"></div>
-      <div className="sk-circle3 sk-child"></div>
-      <div className="sk-circle4 sk-child"></div>
-      <div className="sk-circle5 sk-child"></div>
-      <div className="sk-circle6 sk-child"></div>
-      <div className="sk-circle7 sk-child"></div>
-      <div className="sk-circle8 sk-child"></div>
-      <div className="sk-circle9 sk-child"></div>
-      <div className="sk-circle10 sk-child"></div>
-      <div className="sk-circle11 sk-child"></div>
-      <div className="sk-circle12 sk-child"></div>
-    </div>
-  );
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "sk-circle"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "sk-circle1 sk-child"
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "sk-circle2 sk-child"
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "sk-circle3 sk-child"
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "sk-circle4 sk-child"
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "sk-circle5 sk-child"
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "sk-circle6 sk-child"
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "sk-circle7 sk-child"
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "sk-circle8 sk-child"
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "sk-circle9 sk-child"
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "sk-circle10 sk-child"
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "sk-circle11 sk-child"
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "sk-circle12 sk-child"
+  }));
 }
-
-export default Loader;
+var _default = Loader;
+exports.default = _default;

src/components/YouTubePlaylist.js

@@ -1,46 +0,48 @@
-import React, { useEffect, useState } from "react";
-import FsLightbox from "fslightbox-react";
-import Loader from "./Loader";
-import getPlaylistData from "../getPlaylistData";
-import "../css/YouTubePlaylist.css";
+"use strict";
 
-function YouTubePlaylist({ youtubeAPI, playlistId }) {
-  const [URLs, setURLs] = useState([]);
-  const [playlistDataArray, setPlaylistDataArray] = useState(null);
-  const [isNotFetchingData, setIsNotFetchingData] = useState(true);
-  const [lightboxController, setLightboxController] = useState({
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _fslightboxReact = _interopRequireDefault(require("fslightbox-react"));
+var _Loader = _interopRequireDefault(require("./Loader"));
+var _getPlaylistData = _interopRequireDefault(require("../getPlaylistData"));
+require("../css/YouTubePlaylist.css");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+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; }
+function YouTubePlaylist(_ref) {
+  let {
+    youtubeAPI,
+    playlistId
+  } = _ref;
+  const [URLs, setURLs] = (0, _react.useState)([]);
+  const [playlistDataArray, setPlaylistDataArray] = (0, _react.useState)(null);
+  const [isNotFetchingData, setIsNotFetchingData] = (0, _react.useState)(true);
+  const [lightboxController, setLightboxController] = (0, _react.useState)({
     toggler: false,
-    slide: 1,
+    slide: 1
   });
-
   let imgElementArray = null;
-
   function openLightboxOnSlide(number) {
     setLightboxController({
       toggler: !lightboxController.toggler,
-      slide: number,
+      slide: number
     });
   }
-
   function saveSubsequentPlaylistAndURLDataArrayToState() {
     const lastGalleryItem = playlistDataArray[playlistDataArray.length - 1];
-    getPlaylistData(youtubeAPI, playlistId, lastGalleryItem.nextPageToken)
-      .then((newData) => {
-        const newURLs = newData.map((data) => {
-          return `https://www.youtube.com/watch?v=${data.resourceId.videoId}`;
-        });
-        setURLs([...URLs, ...newURLs]);
-        setPlaylistDataArray([...playlistDataArray, ...newData]);
-      })
-      .catch((e) =>
-        console.error(`Error getting next page playlist data: ${e}`)
-      );
+    (0, _getPlaylistData.default)(youtubeAPI, playlistId, lastGalleryItem.nextPageToken).then(newData => {
+      const newURLs = newData.map(data => {
+        return `https://www.youtube.com/watch?v=${data.resourceId.videoId}`;
+      });
+      setURLs([...URLs, ...newURLs]);
+      setPlaylistDataArray([...playlistDataArray, ...newData]);
+    }).catch(e => console.error(`Error getting next page playlist data: ${e}`));
     setIsNotFetchingData(true);
   }
-
   function handleScroll(e) {
     if (playlistDataArray && imgElementArray) {
-      const playlistGalleryDiv = document.getElementById(
-        "playlist-gallery-div"
-      );
+      const playlistGalleryDiv = document.getElementById("playlist-gallery-div");
       const galleryHeight = playlistGalleryDiv.clientHeight;
@@ -51,11 +53,6 @@ const viewportHeight = e.target.documentElement.clientHeight;
       const heightAboveGallery = playlistGalleryDiv.offsetTop; //0.55 * viewportHeight;
-      const totalGalleryScrollableHeight = galleryHeightIsGreaterThanViewport
-        ? galleryHeight - viewportHeight - heightAboveGallery
-        : 0;
-      const remainingGalleryScrollableHeight =
-        totalGalleryScrollableHeight - lengthScrolled;
+      const totalGalleryScrollableHeight = galleryHeightIsGreaterThanViewport ? galleryHeight - viewportHeight - heightAboveGallery : 0;
+      const remainingGalleryScrollableHeight = totalGalleryScrollableHeight - lengthScrolled;
       const scrolledToGalleryBottom = remainingGalleryScrollableHeight <= 0;
-      const moreVideosAvailable =
-        playlistDataArray.length < playlistDataArray[0].totalVideosAvailable;
-
+      const moreVideosAvailable = playlistDataArray.length < playlistDataArray[0].totalVideosAvailable;
       if (scrolledToGalleryBottom && moreVideosAvailable && isNotFetchingData) {
@@ -67,17 +64,13 @@ setIsNotFetchingData(false);
   }
-
   if (playlistDataArray) {
     imgElementArray = playlistDataArray.map((item, index) => {
       if (item.title !== "Deleted video") {
-        return (
-          <div key={item.id}>
-            <img
-              alt={item.title}
-              src={item.thumbnails.high.url}
-              className="youtube-video-image"
-              onClick={() => openLightboxOnSlide(index + 1)}
-            />
-            <figcaption>{item.title}</figcaption>
-          </div>
-        );
+        return /*#__PURE__*/_react.default.createElement("div", {
+          key: item.id
+        }, /*#__PURE__*/_react.default.createElement("img", {
+          alt: item.title,
+          src: item.thumbnails.high.url,
+          className: "youtube-video-image",
+          onClick: () => openLightboxOnSlide(index + 1)
+        }), /*#__PURE__*/_react.default.createElement("figcaption", null, item.title));
       } else {
@@ -88,19 +81,15 @@ return "";
   }
-
-  useEffect(() => {
+  (0, _react.useEffect)(() => {
     function saveInitialPlaylistAndURLDataArrayToState() {
-      getPlaylistData(youtubeAPI, playlistId)
-        .then((items) => {
-          const URLs = items.map((item) => {
-            return `https://www.youtube.com/watch?v=${item.resourceId.videoId}`;
-          });
-          setURLs(URLs);
-          setPlaylistDataArray(items);
-        })
-        .catch((e) => console.error(`Error getting playlist data: ${e}`));
+      (0, _getPlaylistData.default)(youtubeAPI, playlistId).then(items => {
+        const URLs = items.map(item => {
+          return `https://www.youtube.com/watch?v=${item.resourceId.videoId}`;
+        });
+        setURLs(URLs);
+        setPlaylistDataArray(items);
+      }).catch(e => console.error(`Error getting playlist data: ${e}`));
     }
     saveInitialPlaylistAndURLDataArrayToState();
   }, [youtubeAPI, playlistId]);
-
-  useEffect(() => {
+  (0, _react.useEffect)(() => {
     window.addEventListener("scroll", handleScroll);
@@ -111,15 +100,12 @@ return () => {
   });
-
-  return (
-    <div id="playlist-gallery-div" className="youtube-videos-div">
-      {playlistDataArray ? imgElementArray : Loader()}
-      <FsLightbox
-        toggler={lightboxController.toggler}
-        sources={URLs}
-        slide={lightboxController.slide}
-      />
-    </div>
-  );
+  return /*#__PURE__*/_react.default.createElement("div", {
+    id: "playlist-gallery-div",
+    className: "youtube-videos-div"
+  }, playlistDataArray ? imgElementArray : (0, _Loader.default)(), /*#__PURE__*/_react.default.createElement(_fslightboxReact.default, {
+    toggler: lightboxController.toggler,
+    sources: URLs,
+    slide: lightboxController.slide
+  }));
 }
-
-export default YouTubePlaylist;
+var _default = YouTubePlaylist;
+exports.default = _default;

No alert changes

Improved metrics

Total package byte prevSize

14905

increased by10.33%

Dev dependency count

4

decreased by-55.56%

Worsened metrics

Number of package files

9

decreased by-10%

Lines of code

346

decreased by-3.62%

Dependency changes

• - Removedprop-types@^15.8.1

• - Removedreact@^18.2.0