From 1026e2758ae9837e5f22db7cdac454f72434acb3 Mon Sep 17 00:00:00 2001 From: Nicholas Lancey Date: Mon, 31 Aug 2026 11:27:51 -0700 Subject: [PATCH 1/3] feat(AutoplayVideo): adds loading prop --- package-lock.json | 4 ++-- src/lib/components/autoplay-video.tsx | 6 ++++++ 2 files changed, 8 insertions(+), 2 deletions(-) diff --git a/package-lock.json b/package-lock.json index 280c13c..a95f2af 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@wethegit/react-autoplay-video", - "version": "2.0.2", + "version": "3.0.0", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@wethegit/react-autoplay-video", - "version": "2.0.2", + "version": "3.0.0", "license": "MIT", "dependencies": { "@changesets/changelog-github": "~0.5.0", diff --git a/src/lib/components/autoplay-video.tsx b/src/lib/components/autoplay-video.tsx index c8b9f87..d08e075 100644 --- a/src/lib/components/autoplay-video.tsx +++ b/src/lib/components/autoplay-video.tsx @@ -36,6 +36,10 @@ export interface AutoplayVideoProps extends React.ComponentPropsWithRef<"div"> { * Video path to use as the video element's src attribute. */ src: string + /** + * Wether or not to add the loading attribute to the video element. + */ + loading?: "lazy" | "eager" } /** @@ -51,6 +55,7 @@ export function AutoplayVideo({ renderReducedMotionFallback, src, loop = true, + loading, ...props }: AutoplayVideoProps) { const [srcAdded, setSrcAdded] = useState(false) @@ -109,6 +114,7 @@ export function AutoplayVideo({ aria-describedby={descriptionID} autoPlay className={styles["autoplay-video__media"]} + loading={loading} loop={loop} muted playsInline From 5880c7f2c4d4d1f5485b447af7d3fe0352edbf47 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Mon, 31 Aug 2026 18:47:15 +0000 Subject: [PATCH 2/3] fix: honor eager loading and React video typing --- package-lock.json | 20 -------------------- src/lib/components/autoplay-video.tsx | 19 +++++++++++++++---- 2 files changed, 15 insertions(+), 24 deletions(-) diff --git a/package-lock.json b/package-lock.json index a95f2af..416e7ce 100644 --- a/package-lock.json +++ b/package-lock.json @@ -81,7 +81,6 @@ "integrity": "sha512-RgHBCvtjbOK2gXSNBNIkNoEc9qoVEtau3hj8gEqKQuL3HZAibKarWFEI3Lfm6EYKkLalOh8eSrj9b+ch9H/VBA==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@babel/code-frame": "^7.29.7", "@babel/generator": "^7.29.7", @@ -759,7 +758,6 @@ "integrity": "sha512-ajMX6QPcyomotqwpzhkYGxcK2i/us0rs1Qo9QvUpa+Fca0FTmqrzKrctoIYLMxcOhGZldGT/BAVkRGTWBiR8gQ==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@babel/helper-plugin-utils": "^7.29.7" }, @@ -1604,7 +1602,6 @@ "integrity": "sha512-WsZulLVBUHXVj2cUcPVx6UE21TpalB6bHbSFErKT0Ib++ax24jjXe73FqlWvdylFOjiuPHYi6VCcgRad1ItN+A==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@babel/helper-annotate-as-pure": "^7.29.7", "@babel/helper-module-imports": "^7.29.7", @@ -2400,7 +2397,6 @@ } ], "license": "MIT", - "peer": true, "engines": { "node": "^14 || ^16 || >=18" }, @@ -2424,7 +2420,6 @@ } ], "license": "MIT", - "peer": true, "engines": { "node": "^14 || ^16 || >=18" } @@ -4102,7 +4097,6 @@ "integrity": "sha512-UvxetCgGwZ9HmsgGZ2tpStt6CiFU1bu28ftHWpDyfthsCt7OHXas0C7j0VgO3gBq8UHKI785wXmtcQVhLekcRg==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "undici-types": "~6.19.2" } @@ -4127,7 +4121,6 @@ "integrity": "sha512-AnzbBERsrLKtk2XSfTbYRLjQPdy116Sty4q+T+Bp3IC4l6jNBvreVPAHmpq9qhXQM7CXZPjLVmGMw9sy+hxQ3w==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "csstype": "^3.2.2" } @@ -4155,7 +4148,6 @@ "integrity": "sha512-TiZzBSJja/LbhNPvk6yc0JrX9XqhQ0hdh6M2svYfsHGejaKFIAGd9MQ+ERIMzLGlN/kZoYIgdxFV0PuljTKXag==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@eslint-community/regexpp": "^4.4.0", "@typescript-eslint/scope-manager": "5.62.0", @@ -4211,7 +4203,6 @@ "integrity": "sha512-VlJEV0fOQ7BExOsHYAGrgbEiZoi8D+Bl2+f6V2RrXerRSylnp+ZBHmPvaIa8cz0Ajx7WO7Z5RqfgYg7ED1nRhA==", "dev": true, "license": "BSD-2-Clause", - "peer": true, "dependencies": { "@typescript-eslint/scope-manager": "5.62.0", "@typescript-eslint/types": "5.62.0", @@ -4526,7 +4517,6 @@ "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.17.0.tgz", "integrity": "sha512-xRQbDb9BnwDafYNn6Vwl839DYVjqXYb1XVGtWAZ1kcDc6iwAL4hg3B1dZlRiuENFeO2H53gFG3in621AdERVAg==", "license": "MIT", - "peer": true, "bin": { "acorn": "bin/acorn" }, @@ -5051,7 +5041,6 @@ } ], "license": "MIT", - "peer": true, "dependencies": { "baseline-browser-mapping": "^2.10.42", "caniuse-lite": "^1.0.30001800", @@ -6008,7 +5997,6 @@ "deprecated": "This version is no longer supported. Please see https://eslint.org/version-support for other options.", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@eslint-community/eslint-utils": "^4.2.0", "@eslint-community/regexpp": "^4.6.1", @@ -9456,7 +9444,6 @@ } ], "license": "MIT", - "peer": true, "dependencies": { "nanoid": "^3.3.12", "picocolors": "^1.1.1", @@ -9567,7 +9554,6 @@ "integrity": "sha512-bIoJLOmjCO1S9XdY/DcnR5hJxvrDir1PbGChrzXG3vw0/FOliy/fA3dmdhQ441kah4gKv+TwckGzex6wNS5cnQ==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "cssesc": "^3.0.0", "util-deprecate": "^1.0.2" @@ -9693,7 +9679,6 @@ "resolved": "https://registry.npmjs.org/react/-/react-19.2.8.tgz", "integrity": "sha512-PWaYA1L/q9u2u7xYQi+Y3L3Yfnie7XyLeaJICV1MGD6LprsBxcAqGjYyr0eY3p+QdsA+x/Irkt4Qif8D63+Sbw==", "license": "MIT", - "peer": true, "engines": { "node": ">=0.10.0" } @@ -9703,7 +9688,6 @@ "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.8.tgz", "integrity": "sha512-rVprimfGBG3DR+Tq0IQG2DT5PxKth1WIGDmj5yPmlzr4YBe7uyE+Du4oVqTDXZSHGGGXRtTJEGSSePyQCMBglQ==", "license": "MIT", - "peer": true, "dependencies": { "scheduler": "^0.27.0" }, @@ -10205,7 +10189,6 @@ "integrity": "sha512-OL3GoQyoUdDt843DpVmDO6y2k1sc5IhUDSpu8XucEI+35neq5QivZ1iuegnpraEVTJXlQGK1gl27zKcTLEPbQw==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "chokidar": "^5.0.0", "immutable": "^5.1.5", @@ -10779,7 +10762,6 @@ "integrity": "sha512-78O4c6IswZ9TzpcIiQJIN49K3qNoXTM8zEJzhaTE/xRTCZswaovSEVIa/uwbOltZrk16X4jAxjaOhzz/hTm1Kw==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@csstools/css-parser-algorithms": "^2.3.1", "@csstools/css-tokenizer": "^2.2.0", @@ -11387,7 +11369,6 @@ "integrity": "sha512-hjcS1mhfuyi4WW8IWtjP7brDrG2cuDZukyrYrSauoXGNgx0S7zceP07adYkJycEr56BOUTNPzbInooiN3fn1qw==", "dev": true, "license": "Apache-2.0", - "peer": true, "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" @@ -11549,7 +11530,6 @@ "integrity": "sha512-+v57oAaoYNnO3hIu5Z/tJRZjq5aHM2zDve9YZ8HngVHbhk66RStobhb1sqPMIPEleV6cNKYK4eGrAbE9Ulbl2g==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "esbuild": "^0.18.10", "postcss": "^8.4.27", diff --git a/src/lib/components/autoplay-video.tsx b/src/lib/components/autoplay-video.tsx index d08e075..48196ee 100644 --- a/src/lib/components/autoplay-video.tsx +++ b/src/lib/components/autoplay-video.tsx @@ -7,6 +7,12 @@ import { classnames } from "../utils/classnames" import styles from "./autoplay-video.module.css" +declare module "react" { + interface VideoHTMLAttributes extends React.HTMLAttributes { + loading?: "lazy" | "eager" + } +} + export interface AutoplayVideoProps extends React.ComponentPropsWithRef<"div"> { /** * Visually-hidden description of the video. @@ -37,7 +43,7 @@ export interface AutoplayVideoProps extends React.ComponentPropsWithRef<"div"> { */ src: string /** - * Wether or not to add the loading attribute to the video element. + * Whether or not to add the loading attribute to the video element. */ loading?: "lazy" | "eager" } @@ -58,7 +64,7 @@ export function AutoplayVideo({ loading, ...props }: AutoplayVideoProps) { - const [srcAdded, setSrcAdded] = useState(false) + const [srcAdded, setSrcAdded] = useState(loading === "eager") const [setInViewRef, isInView] = useInView(0) const descriptionID = useId() const videoRef = useRef(null) @@ -77,8 +83,13 @@ export function AutoplayVideo({ // Set a flag to load the content (video or fallback), based on its visibility. useEffect(() => { - if (isInView) setSrcAdded(true) - }, [isInView]) + if (loading === "eager") { + setSrcAdded(true) + return + } + + setSrcAdded(isInView) + }, [isInView, loading]) // Ensure the video does not continue to play when off-screen. // Play/pause the video based on the `paused` override prop. From d6087bfff5171cf9b95e3e762a566845192af56c Mon Sep 17 00:00:00 2001 From: Nicholas Lancey Date: Fri, 4 Sep 2026 16:09:14 -0700 Subject: [PATCH 3/3] chore(Changeset) --- .changeset/strong-crabs-switch.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/strong-crabs-switch.md diff --git a/.changeset/strong-crabs-switch.md b/.changeset/strong-crabs-switch.md new file mode 100644 index 0000000..ceda2ab --- /dev/null +++ b/.changeset/strong-crabs-switch.md @@ -0,0 +1,5 @@ +--- +"@wethegit/react-autoplay-video": patch +--- + +Adds loading prop, allowing for lazy and eager loading of the video element.