react-lite-youtube-embed - npm Package Compare versions

Comparing version 2.3.52 to 2.4.0-rc

dist/index.d.ts

@@ -1,3 +0,4 @@
-export declare type imgResolution = "default" | "mqdefault" | "hqdefault" | "sddefault" | "maxresdefault";
-export interface LiteYouTube {
+import * as React from "react";
+export type imgResolution = "default" | "mqdefault" | "hqdefault" | "sddefault" | "maxresdefault";
+export interface LiteYouTubeProps {
     announce?: string;
@@ -24,3 +25,5 @@ id: string;
     rel?: string;
+    containerElement?: keyof JSX.IntrinsicElements;
 }
-export default function LiteYouTubeEmbed(props: LiteYouTube): JSX.Element;
+declare const _default: React.ForwardRefExoticComponent<LiteYouTubeProps & React.RefAttributes<HTMLIFrameElement>>;
+export default _default;

dist/index.es.jsx

 /**
-* react-lite-youtube-embed v2.3.52
+* react-lite-youtube-embed v2.3.5
 *  https://github.com/ibrahimcesar/react-lite-youtube-embed.git
@@ -73,2 +73,3 @@ *
     var rel = props.rel ? 'prefetch' : 'preload';
+    var ContainerElement = props.containerElement || 'article';
     var warmConnections = function () {
@@ -97,3 +98,3 @@ if (preconnected)
                 React.createElement("link", { rel: "preconnect", href: "https://googleads.g.doubleclick.net" })))))),
-        React.createElement("article", { onPointerOver: warmConnections, onClick: addIframe, className: wrapperClassImp + " " + (iframe ? activatedClassImp : ""), "data-title": videoTitle, style: __assign({ backgroundImage: "url(" + posterUrl + ")" }, {
+        React.createElement(ContainerElement, { onPointerOver: warmConnections, onClick: addIframe, className: wrapperClassImp + " " + (iframe ? activatedClassImp : ""), "data-title": videoTitle, style: __assign({ backgroundImage: "url(" + posterUrl + ")" }, {
                 '--aspect-ratio': (aspectHeight / aspectWidth) * 100 + "%",
@@ -100,0 +101,0 @@ }) },

dist/index.jsx

 /**
-* react-lite-youtube-embed v2.3.52
+* react-lite-youtube-embed v2.3.5
 *  https://github.com/ibrahimcesar/react-lite-youtube-embed.git
@@ -97,2 +97,3 @@ *
     var rel = props.rel ? 'prefetch' : 'preload';
+    var ContainerElement = props.containerElement || 'article';
     var warmConnections = function () {
@@ -121,3 +122,3 @@ if (preconnected)
                 React__namespace.createElement("link", { rel: "preconnect", href: "https://googleads.g.doubleclick.net" })))))),
-        React__namespace.createElement("article", { onPointerOver: warmConnections, onClick: addIframe, className: wrapperClassImp + " " + (iframe ? activatedClassImp : ""), "data-title": videoTitle, style: __assign({ backgroundImage: "url(" + posterUrl + ")" }, {
+        React__namespace.createElement(ContainerElement, { onPointerOver: warmConnections, onClick: addIframe, className: wrapperClassImp + " " + (iframe ? activatedClassImp : ""), "data-title": videoTitle, style: __assign({ backgroundImage: "url(" + posterUrl + ")" }, {
                 '--aspect-ratio': (aspectHeight / aspectWidth) * 100 + "%",
@@ -124,0 +125,0 @@ }) },

package.json

 {
   "name": "react-lite-youtube-embed",
-  "version": "2.3.52",
+  "version": "2.4.0-rc",
   "description": "A private by default, faster and cleaner YouTube embed component for React applications",
-  "main": "dist/index.jsx",
-  "module": "dist/index.es.jsx",
+  "main": "dist/index.js",
+  "module": "dist/index.es.js",
   "types": "dist/index.d.ts",
@@ -33,4 +33,4 @@ "scripts": {
   "peerDependencies": {
-    "react": ">=16.0.8",
-    "react-dom": ">=16.0.8"
+    "react": ">=18.2.0",
+    "react-dom": ">=18.2.0"
   },
@@ -49,3 +49,3 @@ "devDependencies": {
     "@types/jest": "^27.0.1",
-    "@types/react": "^17.0.19",
+    "@types/react": "^18.2.38",
     "@typescript-eslint/eslint-plugin": "^4.30.0",
@@ -62,11 +62,10 @@ "@typescript-eslint/parser": "^4.30.0",
     "rollup-plugin-banner2": "^1.2.2",
-    "rollup-plugin-copy": "^3.4.0",
+    "rollup-plugin-copy": "^3.5.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
-    "rollup-plugin-typescript2": "^0.30.0",
-    "typescript": "^4.4.2"
+    "rollup-plugin-typescript2": "^0.36.0",
+    "typescript": "^5.3.2"
   },
   "volta": {
-    "node": "16.16.0",
-    "npm": "7.8.0"
+    "node": "20.10.0"
   }
 }

README.md

@@ -67,7 +67,8 @@ <div align="center">
        params="" // any params you want to pass to the URL, assume we already had '&' and pass your parameters string
-       playlist={false} // Use  true when your ID be from a playlist
+       playlist={false} // Use true when your ID be from a playlist
        playlistCoverId="L2vS_050c-M" // The ids for playlists did not bring the cover in a pattern to render so you'll need pick up a video from the playlist (or in fact, whatever id) and use to render the cover. There's a programmatic way to get the cover from YouTube API v3 but the aim of this component is do not make any another call and reduce requests and bandwidth usage as much as possibe
        poster="hqdefault" // Defines the image size to call on first render as poster image. Possible values are "default","mqdefault",  "hqdefault", "sddefault" and "maxresdefault". Default value for this prop is "hqdefault". Please be aware that "sddefault" and "maxresdefault", high resolution images are not always avaialble for every video. See: https://stackoverflow.com/questions/2068344/how-do-i-get-a-youtube-video-thumbnail-from-the-youtube-api
        title="YouTube Embed" // a11y, always provide a title for iFrames: https://dequeuniversity.com/tips/provide-iframe-titles Help the web be accessible ;)
-       noCookie={true} //Default false, connect to YouTube via the Privacy-Enhanced Mode using https://www.youtube-nocookie.com
+       noCookie={true} // Default false, connect to YouTube via the Privacy-Enhanced Mode using https://www.youtube-nocookie.com
+       ref={myRef} // Use this ref prop to programmatically access the underlying iframe element
     />
@@ -125,3 +126,2 @@ </div>
     top: 0;
-    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADGCAYAAAAT+OqFAAAAdklEQVQoz42QQQ7AIAgEF/T/D+kbq/RWAlnQyyazA4aoAB4FsBSA/bFjuF1EOL7VbrIrBuusmrt4ZZORfb6ehbWdnRHEIiITaEUKa5EJqUakRSaEYBJSCY2dEstQY7AuxahwXFrvZmWl2rh4JZ07z9dLtesfNj5q0FU3A5ObbwAAAABJRU5ErkJggg==);
     background-position: top;
@@ -153,12 +153,11 @@ background-repeat: repeat-x;
 .yt-lite > .lty-playbtn {
-    width: 70px;
+    width: 65px;
     height: 46px;
-    background-color: #212121;
     z-index: 1;
     opacity: 0.8;
-    border-radius: 14%; /* TODO: Consider replacing this with YT's actual svg. Eh. */
+    border: none;
+    background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%20id%3D%22YouTube_Icon%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%201024%20721%22%20enable-background%3D%22new%200%200%201024%20721%22%20xml%3Aspace%3D%22preserve%22%3E%3Cscript%20xmlns%3D%22%22%3E%0A%20%20%20%20try%20%7B%0A%20%20%20%20%20%20Object.defineProperty(navigator%2C%20%22globalPrivacyControl%22%2C%20%7B%0A%20%20%20%20%20%20%20%20value%3A%20false%2C%0A%20%20%20%20%20%20%20%20configurable%3A%20false%2C%0A%20%20%20%20%20%20%20%20writable%3A%20false%0A%20%20%20%20%20%20%7D)%3B%0A%20%20%20%20%20%20document.currentScript.parentElement.removeChild(document.currentScript)%3B%0A%20%20%20%20%7D%20catch(e)%20%7B%7D%3B%0A%20%20%20%20%20%20%3C%2Fscript%3E%0A%3Cpath%20id%3D%22Triangle%22%20fill%3D%22%23FFFFFF%22%20d%3D%22M407%2C493l276-143L407%2C206V493z%22%2F%3E%0A%3Cpath%20id%3D%22The_Sharpness%22%20opacity%3D%220.12%22%20fill%3D%22%23420000%22%20d%3D%22M407%2C206l242%2C161.6l34-17.6L407%2C206z%22%2F%3E%0A%3Cg%20id%3D%22Lozenge%22%3E%0A%09%3Cg%3E%0A%09%09%0A%09%09%09%3ClinearGradient%20id%3D%22SVGID_1_%22%20gradientUnits%3D%22userSpaceOnUse%22%20x1%3D%22512.5%22%20y1%3D%22719.7%22%20x2%3D%22512.5%22%20y2%3D%221.2%22%20gradientTransform%3D%22matrix(1%200%200%20-1%200%20721)%22%3E%0A%09%09%09%3Cstop%20offset%3D%220%22%20style%3D%22stop-color%3A%23E52D27%22%2F%3E%0A%09%09%09%3Cstop%20offset%3D%221%22%20style%3D%22stop-color%3A%23BF171D%22%2F%3E%0A%09%09%3C%2FlinearGradient%3E%0A%09%09%3Cpath%20fill%3D%22url(%23SVGID_1_)%22%20d%3D%22M1013%2C156.3c0%2C0-10-70.4-40.6-101.4C933.6%2C14.2%2C890%2C14%2C870.1%2C11.6C727.1%2C1.3%2C512.7%2C1.3%2C512.7%2C1.3%20%20%20%20h-0.4c0%2C0-214.4%2C0-357.4%2C10.3C135%2C14%2C91.4%2C14.2%2C52.6%2C54.9C22%2C85.9%2C12%2C156.3%2C12%2C156.3S1.8%2C238.9%2C1.8%2C321.6v77.5%20%20%20%20C1.8%2C481.8%2C12%2C564.4%2C12%2C564.4s10%2C70.4%2C40.6%2C101.4c38.9%2C40.7%2C89.9%2C39.4%2C112.6%2C43.7c81.7%2C7.8%2C347.3%2C10.3%2C347.3%2C10.3%20%20%20%20s214.6-0.3%2C357.6-10.7c20-2.4%2C63.5-2.6%2C102.3-43.3c30.6-31%2C40.6-101.4%2C40.6-101.4s10.2-82.7%2C10.2-165.3v-77.5%20%20%20%20C1023.2%2C238.9%2C1013%2C156.3%2C1013%2C156.3z%20M407%2C493V206l276%2C144L407%2C493z%22%2F%3E%0A%09%3C%2Fg%3E%0A%3C%2Fg%3E%0A%3C%2Fsvg%3E");
     transition: all 0.2s cubic-bezier(0, 0, 0.2, 1);
 }
 .yt-lite:hover > .lty-playbtn {
-    background-color: #f00;
     opacity: 1;
@@ -267,2 +266,3 @@ }
 | wrapperClass | string |   Pass the string class that wraps the iFrame |
+| containerElement | string | Default `article`. Pass the element to be used for the container.
 
@@ -269,0 +269,0 @@ ## 🙇‍♂️ Thanks

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

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

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

Improved metrics

Total package byte prevSize

122757

increased by287.93%

Number of package files

14

increased by75%

Lines of code

540

increased by73.63%

Worsened metrics

Number of low quality alerts

1

increased byInfinity%

No dependency changes