Merge pull request #91 from danestves/v2

feat: conditionally load the google adnetwork
danestves · Mar 1, 2022 · d3bfef9 · d3bfef9
2 parents 2451aed + 13ebc40
commit d3bfef9
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 19 deletions.
diff --git a/README.md b/README.md
@@ -6,12 +6,11 @@ Demo: https://codesandbox.io/s/react-youtube-lite-uikk9n?file=/src/App.js
 
 ## 📊 Comparison
 
-| YouTube iframe                                                            | `react-youtube-lite`                                                       |
-| ------------------------------------------------------------------------- | -------------------------------------------------------------------------- |
-| ![Initial load of youtube iframe](https://user-images.githubusercontent.com/31737273/156228816-f6f80dff-eaba-443e-9834-785cf8b8fe8c.png)            | ![Initial load of react-youtube-lite](https://user-images.githubusercontent.com/31737273/156228959-7b3a2c8e-8794-40e7-8a76-3baf72771cb1.png)            |
+| YouTube iframe                                                                                                                              | `react-youtube-lite`                                                                                                                            |
+| ------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- |
+| ![Initial load of youtube iframe](https://user-images.githubusercontent.com/31737273/156228816-f6f80dff-eaba-443e-9834-785cf8b8fe8c.png)    | ![Initial load of react-youtube-lite](https://user-images.githubusercontent.com/31737273/156228959-7b3a2c8e-8794-40e7-8a76-3baf72771cb1.png)    |
 | ![Network fetch from youtube iframe](https://user-images.githubusercontent.com/31737273/156229073-177dd07e-02d2-473e-8416-21d6e10e3179.png) | ![Network fetch from react-youtube-lite](https://user-images.githubusercontent.com/31737273/156229143-a8740655-9628-437c-b86b-de5462456e23.png) |
 
-
 ## 👨‍💻 Installation
 
 npm:
@@ -44,8 +43,8 @@ const App = () => {
       url="https://www.youtube.com/watch?v=DVQTGidS1yk"
       title='React and the Music Industry | Jameyel "J. Dash" Johnson'
     />
-  )
-}
+  );
+};
 
 // Short URL
 const App = () => {
@@ -54,18 +53,13 @@ const App = () => {
       url="https://youtu.be/DVQTGidS1yk"
       title='React and the Music Industry | Jameyel "J. Dash" Johnson'
     />
-  )
-}
+  );
+};
 
 // ID
 const App = () => {
-  return (
-    <ReactYouTubeLite
-      url="DVQTGidS1yk"
-      title='React and the Music Industry | Jameyel "J. Dash" Johnson'
-    />
-  )
-}
+  return <ReactYouTubeLite url="DVQTGidS1yk" title='React and the Music Industry | Jameyel "J. Dash" Johnson' />;
+};
 ```
 
 ## 🎨 Use your own styles
@@ -78,11 +72,10 @@ This only apply to the main container, if you want to override styles for the if
 
 ![Props example of the css prop inside the frameProps attribute](https://user-images.githubusercontent.com/31737273/156233437-d5f89019-3dc2-45c8-94e3-c0ba2f8a61d5.png)
 
-
-
 ## 📝 Props
 
 - `url`: YouTube video URL or ID
+- `adNetwork`: Preconnect the adnetwork of Google. Default is `false`.
 - `aspectRatio`: Aspect ratio of the video, you can pass any ratio using numbers. Default is `16/9`.
 - `css`: We use Stitches to style the component, you can pass your own CSS values.
 - `customThumbnail`: Custom thumbnail URL instead of the default one.

diff --git a/src/react-youtube-lite/index.tsx b/src/react-youtube-lite/index.tsx
@@ -11,6 +11,7 @@ import type { ReactYouTubeLiteProps } from '../types';
 function RenderReactYouTubeLite(
   {
     url,
+    adNetwork,
     aspectRatio = 16 / 9,
     css,
     customThumbnail,
@@ -42,8 +43,10 @@ function RenderReactYouTubeLite(
     addPrefetch('preconnect', 'https://www.google.com');
 
     // These ad-related domains may or may not be on the critical path. Domain-specific throttling could be used to confirm.
-    addPrefetch('preconnect', 'https://googleads.g.doubleclick.net');
-    addPrefetch('preconnect', 'https://static.doubleclick.net');
+    if (adNetwork) {
+      addPrefetch('preconnect', 'https://googleads.g.doubleclick.net');
+      addPrefetch('preconnect', 'https://static.doubleclick.net');
+    }
 
     setPreconnected(true);
   };

diff --git a/src/types/index.ts b/src/types/index.ts
@@ -17,6 +17,12 @@ interface ReactYouTubeLiteProps extends React.ComponentPropsWithoutRef<'div'> {
    * This can be either an url to a video or a video ID.
    */
   url: string;
+  /**
+   * Preconnect or not doubleclick ads, this is the adnetwork from Google.
+   *
+   * @default false
+   */
+  adNetwork?: boolean;
   /**
    * The aspect ratio of the video.
    *