fix(src): optimize video loading (#1092)

dineshpinto · web-flow · commit 646008ae7092 · 2025-12-20T01:40:06.000+04:00
diff --git a/.github/workflows/lint-check-internal-links.yml b/.github/workflows/lint-check-internal-links.yml
@@ -21,7 +21,7 @@ jobs:
       - name: Install dependencies
         run: npm ci
       - name: Run ESLint
-        run: npm run lint
+        run: npm run lint -- --max-warnings=0
 
   typecheck:
     name: TypeScript Check
diff --git a/docs/fassets/developer-guides/10-fassets-redemption-default.mdx b/docs/fassets/developer-guides/10-fassets-redemption-default.mdx
@@ -109,7 +109,7 @@ It does the following:
 
 ## Video Tutorial
 
-<YouTubeEmbed videoId="a737yFcglnM?si=bHoFxhrlWhMCxEQr&start=275"></YouTubeEmbed>
+<YouTubeEmbed videoId="a737yFcglnM" startSeconds={275}></YouTubeEmbed>
 
 ## Summary
 
diff --git a/docs/fassets/developer-guides/5-fassets-mint.mdx b/docs/fassets/developer-guides/5-fassets-mint.mdx
@@ -129,7 +129,7 @@ This script demonstrates how to retrieve the FDC proof and execute minting.
 
 ## Video Tutorial
 
-<YouTubeEmbed videoId="a737yFcglnM?si=5L0owLyQREvO09d8"></YouTubeEmbed>
+<YouTubeEmbed videoId="a737yFcglnM"></YouTubeEmbed>
 
 ## Summary
 
diff --git a/docs/fassets/developer-guides/6-fassets-mint-executor.mdx b/docs/fassets/developer-guides/6-fassets-mint-executor.mdx
@@ -143,7 +143,7 @@ This script demonstrates how to retrieve the FDC proof and execute minting.
 
 ## Video Tutorial
 
-<YouTubeEmbed videoId="a737yFcglnM?si=5L0owLyQREvO09d8"></YouTubeEmbed>
+<YouTubeEmbed videoId="a737yFcglnM"></YouTubeEmbed>
 
 ## Summary
 
diff --git a/docs/fassets/developer-guides/7-fassets-redeem.mdx b/docs/fassets/developer-guides/7-fassets-redeem.mdx
@@ -345,7 +345,7 @@ If the agent is unable to pay the redemption payment in the specified time, the
 
 ## Video Tutorial
 
-<YouTubeEmbed videoId="a737yFcglnM?si=bHoFxhrlWhMCxEQr&start=275"></YouTubeEmbed>
+<YouTubeEmbed videoId="a737yFcglnM" startSeconds={275}></YouTubeEmbed>
 
 ## Summary
 
diff --git a/docs/fdc/1-overview.mdx b/docs/fdc/1-overview.mdx
@@ -128,4 +128,4 @@ The **Flare Data Connector (FDC)** is a critical infrastructure component for th
 
 ## Watch the video
 
-<YouTubeEmbed videoId="4mAT1v8gZMQ?si=w6z6Gw6siCTX3Ntg"></YouTubeEmbed>
+<YouTubeEmbed videoId="4mAT1v8gZMQ"></YouTubeEmbed>
diff --git a/docs/fdc/2-getting-started.mdx b/docs/fdc/2-getting-started.mdx
@@ -431,4 +431,4 @@ isFinalized(uint256 _protocolId, uint256 _votingRoundId) returns (bool)
 
 ## Watch the video
 
-<YouTubeEmbed videoId="bURtt4siWd0?si=tVnpU0SC7ISMnrA0"></YouTubeEmbed>
+<YouTubeEmbed videoId="bURtt4siWd0"></YouTubeEmbed>
diff --git a/docs/ftso/0-overview.mdx b/docs/ftso/0-overview.mdx
@@ -146,4 +146,4 @@ Data providers are rewarded when the block-latency feeds remains within `±0.25%
 
 ## Watch the video
 
-<YouTubeEmbed videoId="4mAT1v8gZMQ?si=w6z6Gw6siCTX3Ntg"></YouTubeEmbed>
+<YouTubeEmbed videoId="4mAT1v8gZMQ"></YouTubeEmbed>
diff --git a/docs/ftso/1-getting-started.mdx b/docs/ftso/1-getting-started.mdx
@@ -176,4 +176,4 @@ The floating point value of a feed can be calculated by dividing the `feedValue`
 
 ## Watch the video
 
-<YouTubeEmbed videoId="Lgia7lbTSk0?si=-7xaJ9dth0F6N-7F"></YouTubeEmbed>
+<YouTubeEmbed videoId="Lgia7lbTSk0"></YouTubeEmbed>
diff --git a/docs/ftso/scaling/1-overview.mdx b/docs/ftso/scaling/1-overview.mdx
@@ -153,4 +153,4 @@ As a result, Scaling maintains robust participation across both common and niche
 
 ## Watch the video
 
-<YouTubeEmbed videoId="4mAT1v8gZMQ?si=w6z6Gw6siCTX3Ntg"></YouTubeEmbed>
+<YouTubeEmbed videoId="4mAT1v8gZMQ"></YouTubeEmbed>
diff --git a/docs/network/0-overview.mdx b/docs/network/0-overview.mdx
@@ -391,4 +391,4 @@ Additional resources: [Flare Brand Kit](https://flare.network/media/), [go-flare
 
 ## Watch the video
 
-<YouTubeEmbed videoId="GwY_BhEpBG8?si=5jY4dq8d1Cv8YoYX"></YouTubeEmbed>
+<YouTubeEmbed videoId="GwY_BhEpBG8"></YouTubeEmbed>
diff --git a/docs/network/1-getting-started.mdx b/docs/network/1-getting-started.mdx
@@ -172,7 +172,7 @@ Now you know how to deploy and call example contracts on Flare's testnet. You ca
 
 ## Watch the video
 
-<YouTubeEmbed videoId="X4xEVD0sPzA?si=_Xk6IxtB-rIZCSGK"></YouTubeEmbed>
+<YouTubeEmbed videoId="X4xEVD0sPzA"></YouTubeEmbed>
 
 :::tip[What's next?]
 
diff --git a/docs/network/7-fsp.mdx b/docs/network/7-fsp.mdx
@@ -38,7 +38,7 @@ like the [Flare Time Series Oracle](/ftso/overview) and the [Flare Data Connecto
 
 ## Watch the video
 
-<YouTubeEmbed videoId="s2n5Hc0gSZs?si=UDvQfe4oZMvKtVCa"></YouTubeEmbed>
+<YouTubeEmbed videoId="s2n5Hc0gSZs"></YouTubeEmbed>
 
 ## Components
 
diff --git a/examples/developer-hub-javascript/autoRedeemHyperEVM.ts b/examples/developer-hub-javascript/autoRedeemHyperEVM.ts
@@ -11,7 +11,8 @@
  */
 
 import { ethers } from "hardhat";
-import { formatUnits, zeroPadValue, AbiCoder, Contract } from "ethers";
+import type { Contract } from "ethers";
+import { formatUnits, zeroPadValue, AbiCoder } from "ethers";
 import { Options } from "@layerzerolabs/lz-v2-utilities";
 import { EndpointId } from "@layerzerolabs/lz-definitions";
 
diff --git a/examples/developer-hub-javascript/bridgeToHyperEVM.ts b/examples/developer-hub-javascript/bridgeToHyperEVM.ts
@@ -15,7 +15,7 @@ import { web3 } from "hardhat";
 import { formatUnits } from "ethers";
 import { EndpointId } from "@layerzerolabs/lz-definitions";
 import { Options } from "@layerzerolabs/lz-v2-utilities";
-import {
+import type {
   IERC20Instance,
   FAssetOFTAdapterInstance,
 } from "../../typechain-types";
diff --git a/src/components/YouTubeEmbed/index.tsx b/src/components/YouTubeEmbed/index.tsx
@@ -1,44 +1,122 @@
-import React from "react";
+import React, { useEffect, useMemo, useRef, useState } from "react";
 import clsx from "clsx";
+import Head from "@docusaurus/Head";
 import styles from "./styles.module.css";
 
+type LoadStrategy = "onVisible" | "eager";
+
 interface YouTubeEmbedProps {
   /** The unique YouTube Video ID (e.g., "dQw4w9WgXcQ") */
   videoId: string;
   title?: string;
   privacyMode?: boolean;
+  loadStrategy?: LoadStrategy;
+  rootMargin?: string;
+  startSeconds?: number;
   className?: string;
 }
 
+const clampInt = (v: number) => Math.max(0, Math.floor(v));
+
 const YouTubeEmbed: React.FC<YouTubeEmbedProps> = ({
   videoId,
   title = "YouTube video player",
   privacyMode = true,
+  loadStrategy = "eager",
+  rootMargin = "250px",
+  startSeconds,
   className = "",
 }) => {
   if (!videoId) {
-    console.error("YouTubeEmbed: videoId prop is required.");
     return <div className={className}>Error: Missing YouTube Video ID.</div>;
   }
 
-  // Determine the base URL based on privacy mode
+  const containerRef = useRef<HTMLDivElement | null>(null);
+  const [isActivated, setIsActivated] = useState(loadStrategy === "eager");
+
   const baseUrl = privacyMode
     ? "https://www.youtube-nocookie.com/embed/"
     : "https://www.youtube.com/embed/";
 
-  const embedUrl = `${baseUrl}${videoId}`;
+  const thumbnailUrl = useMemo(
+    () => `https://i.ytimg.com/vi/${encodeURIComponent(videoId)}/hqdefault.jpg`,
+    [videoId],
+  );
+
+  const embedUrl = useMemo(() => {
+    const params = new URLSearchParams({
+      rel: "0",
+      modestbranding: "1",
+      playsinline: "1",
+    });
+
+    if (typeof startSeconds === "number" && Number.isFinite(startSeconds)) {
+      params.set("start", String(clampInt(startSeconds)));
+    }
+
+    return `${baseUrl}${encodeURIComponent(videoId)}?${params.toString()}`;
+  }, [baseUrl, videoId, startSeconds]);
+
+  useEffect(() => {
+    if (isActivated) return;
+    if (loadStrategy !== "onVisible") return;
+
+    const el = containerRef.current;
+    if (!el) return;
+
+    const obs = new IntersectionObserver(
+      (entries) => {
+        const entry = entries[0];
+        if (entry?.isIntersecting) {
+          setIsActivated(true);
+          obs.disconnect();
+        }
+      },
+      { root: null, rootMargin, threshold: 0.01 },
+    );
+
+    obs.observe(el);
+    return () => obs.disconnect();
+  }, [isActivated, loadStrategy, rootMargin]);
 
   return (
-    <div className={clsx(styles.container, className)}>
-      <iframe
-        className={styles.iframe}
-        src={embedUrl}
-        title={title}
-        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-        referrerPolicy="strict-origin-when-cross-origin"
-        allowFullScreen
-        loading="lazy"
-      ></iframe>
+    <div ref={containerRef} className={clsx(styles.container, className)}>
+      <Head>
+        <link rel="preconnect" href="https://i.ytimg.com" />
+        <link
+          rel="preconnect"
+          href={
+            privacyMode
+              ? "https://www.youtube-nocookie.com"
+              : "https://www.youtube.com"
+          }
+        />
+        <link rel="preconnect" href="https://www.google.com" />
+        <link rel="preconnect" href="https://www.gstatic.com" crossOrigin="" />
+      </Head>
+
+      {isActivated ? (
+        <iframe
+          className={styles.iframe}
+          src={embedUrl}
+          title={title}
+          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+          referrerPolicy="strict-origin-when-cross-origin"
+          allowFullScreen
+          loading={loadStrategy === "eager" ? "eager" : "lazy"}
+        />
+      ) : (
+        <div className={styles.placeholder} aria-hidden="true">
+          <img
+            className={styles.thumbnail}
+            src={thumbnailUrl}
+            alt=""
+            loading="lazy"
+            decoding="async"
+          />
+          <span className={styles.playButton} aria-hidden="true" />
+        </div>
+      )}
     </div>
   );
 };
diff --git a/src/components/YouTubeEmbed/styles.module.css b/src/components/YouTubeEmbed/styles.module.css
@@ -5,13 +5,58 @@
   aspect-ratio: 16 / 9;
   margin: 30px auto;
   max-width: 784px;
+  border-radius: 12px;
 }
 
 .iframe {
   position: absolute;
-  top: 0;
-  left: 0;
+  inset: 0;
   width: 100%;
   height: 100%;
   border: 0;
 }
+
+.placeholder {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  background: transparent;
+}
+
+.thumbnail {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.playButton {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  width: 72px;
+  height: 48px;
+  transform: translate(-50%, -50%);
+  border-radius: 12px;
+  background: rgba(0, 0, 0, 0.65);
+}
+
+.playButton::before {
+  content: "";
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-35%, -50%);
+  width: 0;
+  height: 0;
+  border-left: 18px solid rgba(255, 255, 255, 0.95);
+  border-top: 10px solid transparent;
+  border-bottom: 10px solid transparent;
+}
+
+.noScriptLink {
+  display: inline-block;
+  margin-top: 10px;
+}

Original file line number	Diff line number	Diff line change
`@@ -128,4 +128,4 @@ The Flare Data Connector (FDC) is a critical infrastructure component for th`
`128`	`128`
`129`	`129`	`## Watch the video`
`130`	`130`
`131`		`-<YouTubeEmbed videoId="4mAT1v8gZMQ?si=w6z6Gw6siCTX3Ntg"></YouTubeEmbed>`
	`131`	`+<YouTubeEmbed videoId="4mAT1v8gZMQ"></YouTubeEmbed>`
Original file line number	Diff line number	Diff line change
`@@ -431,4 +431,4 @@ isFinalized(uint256 _protocolId, uint256 _votingRoundId) returns (bool)`
`431`	`431`
`432`	`432`	`## Watch the video`
`433`	`433`
`434`		`-<YouTubeEmbed videoId="bURtt4siWd0?si=tVnpU0SC7ISMnrA0"></YouTubeEmbed>`
	`434`	`+<YouTubeEmbed videoId="bURtt4siWd0"></YouTubeEmbed>`
Original file line number	Diff line number	Diff line change
@@ -146,4 +146,4 @@ Data providers are rewarded when the block-latency feeds remains within `±0.25%
`146`	`146`
`147`	`147`	`## Watch the video`
`148`	`148`
`149`		`-<YouTubeEmbed videoId="4mAT1v8gZMQ?si=w6z6Gw6siCTX3Ntg"></YouTubeEmbed>`
	`149`	`+<YouTubeEmbed videoId="4mAT1v8gZMQ"></YouTubeEmbed>`
Original file line number	Diff line number	Diff line change
@@ -176,4 +176,4 @@ The floating point value of a feed can be calculated by dividing the `feedValue`
`176`	`176`
`177`	`177`	`## Watch the video`
`178`	`178`
`179`		`-<YouTubeEmbed videoId="Lgia7lbTSk0?si=-7xaJ9dth0F6N-7F"></YouTubeEmbed>`
	`179`	`+<YouTubeEmbed videoId="Lgia7lbTSk0"></YouTubeEmbed>`
Original file line number	Diff line number	Diff line change
`@@ -153,4 +153,4 @@ As a result, Scaling maintains robust participation across both common and niche`
`153`	`153`
`154`	`154`	`## Watch the video`
`155`	`155`
`156`		`-<YouTubeEmbed videoId="4mAT1v8gZMQ?si=w6z6Gw6siCTX3Ntg"></YouTubeEmbed>`
	`156`	`+<YouTubeEmbed videoId="4mAT1v8gZMQ"></YouTubeEmbed>`