Merge pull request #29 from ibrahimcesar/issue-28

Author: ibrahimcesar

demo/package-lock.json

@@ -1,19 +1,19 @@
 
 {
-  "name": "demo",
-  "version": "0.1.0",
+  "name": "demo-react-lite-youtube",
+  "version": "0.2.0",
   "private": true,
   "scripts": {
     "dev": "next dev",
     "build": "next build && next export",
     "start": "next start"
   },
   "dependencies": {
-    "babel-plugin-prismjs": "^2.0.1",
-    "next": "11.1.1",
-    "prismjs": "^1.24.0",
+    "babel-plugin-prismjs": "^2.1.0",
+    "next": "11.1.2",
+    "prismjs": "^1.25.0",
     "react": "17.0.2",
     "react-dom": "17.0.2",
-    "react-lite-youtube-embed": "2.0.9-beta"
+    "react-lite-youtube-embed": "2.0.11-beta.6"
   }
 }

demo/package.json

@@ -6,7 +6,7 @@ import Prism from "prismjs"
 import styles from '../styles/Home.module.css'
 
 export default function Home() {
-      useEffect(() => {
+    useEffect(() => {
       Prism.highlightAll();
     }, []);
 
@@ -80,6 +80,28 @@ export default function Home() {
   id="HaEPXoXVf2k"
   title="Amazon DynamoDB Deep Dive"
   poster="mqdefault"
+/>
+                  `
+                  }
+                </code>
+              </pre>
+          </div>
+          <div>
+            <h2>Using the Webp image format</h2>
+          <LiteYouTubeEmbed
+              id="HaEPXoXVf2k"
+              title="Amazon DynamoDB Deep Dive"
+              poster="hqdefault"
+              webp
+            />
+            <pre>
+              <code className="language-jsx">
+                {`
+<LiteYouTubeEmbed
+  id="HaEPXoXVf2k"
+  title="Amazon DynamoDB Deep Dive"
+  poster="hqdefault"
+  webp
 />
                   `
                   }
@@ -134,6 +156,12 @@ export default function Home() {
               </pre>
           </div>
         </div>
+        {/* <LiteYouTubeEmbed
+            id="jB20NKw3c6I"
+            title="YouTube Embed"
+          poster="maxresdefault"
+          validatePoster
+        /> */}
       </main>
 
       <footer className={styles.footer}>
@@ -143,7 +171,6 @@ export default function Home() {
           rel="noopener noreferrer"
         >
           Demo for  <span role="img" aria-label="TV" style={{marginLeft: "5px", marginRight: "5px"}}>‏‏‎ ‎‏‏‎  📺 ‏‏‎ ‎‏‏‎ </span> React Lite YouTube Embed
-          
         </a>
       </footer>
     </div>

demo/pages/index.js

@@ -1,6 +1,6 @@
 {
   "name": "react-lite-youtube-embed",
-  "version": "2.0.10",
+  "version": "2.0.11",
   "description": "A private by default, faster and cleaner YouTube embed component for React applications",
   "main": "dist/index.jsx",
   "module": "dist/index.es.jsx",

dist/index.d.ts

@@ -23,6 +23,7 @@ interface LiteYouTube {
   playlist?: boolean;
   playlistCoverId?: string;
   poster?: imgResolution;
+  webp?: boolean;
   wrapperClass?: string;
   onIframeAdded?: () => void
 }
@@ -36,9 +37,11 @@ export default function LiteYouTubeEmbed(props: LiteYouTube) {
   const posterImp = props.poster || "hqdefault";
   const paramsImp = `&${props.params}` || "";
   const announceWatch = props.announce || "Watch";
+  const format = props.webp ? 'webp' : 'jpg';
+  const vi = props.webp ? 'vi_webp' : 'vi'
   const posterUrl = !props.playlist ?
-    `https://i.ytimg.com/vi/${videoId}/${posterImp}.jpg`:
-    `https://i.ytimg.com/vi/${videoPlaylisCovertId}/${posterImp}.jpg`;
+    `https://i.ytimg.com/${vi}/${videoId}/${posterImp}.${format}` :
+    `https://i.ytimg.com/${vi}/${videoPlaylisCovertId}/${posterImp}.${format}`;
   let ytUrl = props.noCookie
     ? "https://www.youtube-nocookie.com"
     : "https://www.youtube.com";
@@ -56,7 +59,7 @@ export default function LiteYouTubeEmbed(props: LiteYouTube) {
   const iframeClassImp = props.iframeClass || "";
   const playerClassImp = props.playerClass || "lty-playbtn";
   const wrapperClassImp = props.wrapperClass || "yt-lite";
-  const onIframeAdded = props.onIframeAdded || function() {};
+  const onIframeAdded = props.onIframeAdded || function () { };
 
   const warmConnections = () => {
     if (preconnected) return;
@@ -69,9 +72,14 @@ export default function LiteYouTubeEmbed(props: LiteYouTube) {
     setIframe(true);
   };
 
+
   return (
     <>
-      <link rel="preload" href={posterUrl} as="image" />
+      <link
+        rel="preload"
+        href={posterUrl}
+        as="image"
+        />
       <>
         {preconnected && (
           <>
@@ -89,7 +97,7 @@ export default function LiteYouTubeEmbed(props: LiteYouTube) {
           </>
         )}
       </>
-      <div
+      <article
         onPointerOver={warmConnections}
         onClick={addIframe}
         className={`${wrapperClassImp} ${iframe && activatedClassImp}`}
@@ -103,7 +111,7 @@ export default function LiteYouTubeEmbed(props: LiteYouTube) {
       >
         <button
           className={playerClassImp}
-          aria-label={`${announceWatch} ${videoTitle}`}></button>
+          aria-label={`${announceWatch} ${videoTitle}`} />
         {iframe && (
           <iframe
             className={iframeClassImp}
@@ -116,7 +124,7 @@ export default function LiteYouTubeEmbed(props: LiteYouTube) {
             src={iframeSrc}
           ></iframe>
         )}
-      </div>
+      </article>
     </>
   );
 }