feat(Landing Page): Use React Lite YouTube Embed instead of ifram for…

… better performance (#423)

feat: Use React Lite YouTube Embed instead of ifram for better
performance

docusaurus.config.js

@@ -118,23 +118,23 @@ const config = {
         alt: 'LunarVim Preview',
       },
     ],
+    /**  NOTE: max 3 preferred
+    * for playlists you need to pass playlistCoverId
+    * playlistCoverId = youtube video id
+    */
     YouTube: [
-      /* NOTE: max 3 preferred */
-      /* type: video | playlist */
       {
-        type: 'video',
         id: 'NPmKRygD7DU',
         title: 'Neovim v0.8 release',
       },
       {
-        type: 'video',
         id: 'sFA9kX-Ud_c',
         title: 'Install LunarVim Stable Release',
       },
       {
-        type: 'playlist',
         id: 'PLhoH5vyxr6QoYP4bKw0krF4aEn_3_pfWA',
         title: 'LunarVim (IDE for Neovim)',
+        playlistCoverId: 'NlRxRtGpHHk',
       },
     ],
     Contributors: {

package.json

@@ -27,6 +27,7 @@
     "react-contributors": "^1.1.2",
     "react-countup": "^6.4.0",
     "react-dom": "^17.0.2",
+    "react-lite-youtube-embed": "^2.3.52",
     "subset-font": "^1.6.1"
   },
   "devDependencies": {

src/components/YouTube/index.jsx

@@ -2,6 +2,9 @@ import React from 'react';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import Clouds from '../Clouds';
 import styles from './styles.module.css';
+import LiteYouTubeEmbed from 'react-lite-youtube-embed';
+import 'react-lite-youtube-embed/dist/LiteYouTubeEmbed.css';
+import './yt-lite.css'
 
 const YouTube = () => {
   const {
@@ -16,18 +19,15 @@ const YouTube = () => {
         {YouTube.map((yt) => (
           <div key={yt.id} className={styles.yt}>
             <h2>{yt.title}</h2>
-            <iframe
-              loading="lazy"
+            <LiteYouTubeEmbed
               width="560"
               height="315"
-              src={`https://www.youtube.com/embed/${
-                yt.type === 'playlist' ? `playlist?list=${yt.id}` : yt.id
-              }`}
+              id={yt.id}
               title={yt.title}
-              frameBorder="0"
-              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-              allowFullScreen
-            ></iframe>
+              playlistCoverId={yt.playlistCoverId}
+              playlist={yt.playlistCoverId}
+              playerClass="lty-playbtn"
+            />
           </div>
         ))}
       </section>

src/components/YouTube/styles.module.css

@@ -5,15 +5,6 @@
   flex: 1;
 }
 
-.yt > iframe {
-  border: 2px solid var(--primary-bg);
-  border-radius: 1rem;
-  aspect-ratio: 16/9;
-  height: auto;
-  width: 100%;
-  max-width: 100%;
-}
-
 .yt > h2 {
   text-align: center;
 }

src/components/YouTube/yt-lite.css

@@ -0,0 +1,20 @@
+.yt-lite {
+  border: 2px solid var(--primary-bg);
+  border-radius: 1rem;
+  aspect-ratio: 16/9;
+  height: auto;
+  width: 100%;
+  max-width: 100%;
+}
+
+.yt-lite > .lty-playbtn {
+  border-color: transparent;
+}
+
+.yt-lite > .lty-playbtn::before {
+  border-color: transparent transparent transparent #cdd6f4;
+}
+
+.yt-lite:hover > .lty-playbtn {
+  border-color: transparent;
+}

yarn.lock

@@ -6439,6 +6439,11 @@ react-lifecycles-compat@^3.0.4:
   resolved "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz"
   integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
 
+react-lite-youtube-embed@^2.3.52:
+  version "2.3.52"
+  resolved "https://registry.yarnpkg.com/react-lite-youtube-embed/-/react-lite-youtube-embed-2.3.52.tgz#7f8125a03e7a940745b63d11abd6821ffe1babe5"
+  integrity sha512-G010PvCavA4EqL8mZ/Sv9XXiHnjMfONW+lmNeCRnSEPluPdptv2lZ0cNlngrj7K9j7luc8pbpyrmNpKbD9VMmw==
+
 react-loadable-ssr-addon-v5-slorber@^1.0.1:
   version "1.0.1"
   resolved "https://registry.npmjs.org/react-loadable-ssr-addon-v5-slorber/-/react-loadable-ssr-addon-v5-slorber-1.0.1.tgz"