feat: add BackgroundVideo component (#207)

* feat: add background-video component
based on @mux/mux-video

* fix: improve styles

* feat: support `thumbnailTime` import param

examples/default-provider/.eslintrc.json

@@ -1,3 +1,4 @@
 {
+  "root": true,
   "extends": "next/core-web-vitals"
 }

examples/default-provider/app/background-video/page.tsx

@@ -0,0 +1,24 @@
+import { Metadata } from 'next';
+import BackgroundVideo from 'next-video/background-video';
+import getStarted from '/videos/country-clouds.mp4?thumbnailTime=0';
+
+export const metadata: Metadata = {
+  title: 'next-video - Background Video',
+};
+
+export default function Page() {
+  return (
+    <>
+      <main>
+        <BackgroundVideo src={getStarted}>
+          <h1>next-video</h1>
+          <p>
+            A React component for adding video to your Next.js application.
+            It extends both the video element and your Next app with features
+            for automatic video optimization.
+          </p>
+        </BackgroundVideo>
+      </main>
+    </>
+  );
+}

examples/default-provider/app/layout.tsx

@@ -46,6 +46,9 @@ export default async function RootLayout({
               <li>
                 <Link href="/">Basic example</Link>
               </li>
+              <li>
+                <Link href="/background-video">Background Video</Link>
+              </li>
               <li>
                 <Link href="/slotted-poster">Slotted Poster</Link>
               </li>

examples/default-provider/app/page.tsx

@@ -1,6 +1,6 @@
 import { Metadata } from 'next';
 import Video from 'next-video';
-import getStarted from '/videos/get-started.mp4';
+import getStarted from '/videos/get-started.mp4?thumbnailTime=35';
 
 export const metadata: Metadata = {
   title: 'next-video - Basic example',

examples/default-provider/package.json

@@ -9,9 +9,9 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "next": "14.1.0",
+    "next": "14.1.4",
     "next-video": "file:../..",
-    "open-props": "^1.6.19",
+    "open-props": "^1.6.21",
     "react": "^18",
     "react-dom": "^18"
   },
@@ -20,7 +20,7 @@
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "eslint": "^8",
-    "eslint-config-next": "14.1.0",
+    "eslint-config-next": "14.1.4",
     "typescript": "^5"
   }
 }

examples/default-provider/videos/country-clouds.mp4.json

@@ -0,0 +1 @@
+{"status":"ready","originalFilePath":"videos/country-clouds.mp4","provider":"mux","providerMetadata":{"mux":{"uploadId":"RPMSA1MrehzNmKTNbL5m2dikLE9oolO1niXcyOKAdjg","assetId":"CX00rjcZ3NUrbpVcNrofK3uSOjWFroZAS3Xq9E16yH02o","playbackId":"m00b01mJ2BQP4GMYXKoOmgRdnHELCPpYFtIO52h01l9ozY"}},"createdAt":1710978290774,"updatedAt":1710978359041,"size":33682771,"sources":[{"src":"https://stream.mux.com/m00b01mJ2BQP4GMYXKoOmgRdnHELCPpYFtIO52h01l9ozY.m3u8","type":"application/x-mpegURL"}],"poster":"https://image.mux.com/m00b01mJ2BQP4GMYXKoOmgRdnHELCPpYFtIO52h01l9ozY/thumbnail.webp","blurDataURL":"data:image/webp;base64,UklGRmwAAABXRUJQVlA4IGAAAAAQAgCdASoQAAgAAQAcJbACdLoAAwi2bUSAAP74Qu6oOFirJlY8OZVMZBXX2e9f/SRsDS2UEX0Lxo/JvCWyFRzjaBYzny/6POMaoi3hj6+5/8zllIyezfJeEHJ/ROthhAA="}

examples/default-provider/videos/storage.googleapis.com_muxdemofiles_mux.mp4.json

@@ -1 +1 @@
-{"status":"ready","originalFilePath":"https://storage.googleapis.com/muxdemofiles/mux.mp4","provider":"mux","providerMetadata":{"mux":{"assetId":"BBwp02fpGtb01Dde7QfOBcBQB9grcJGHsPd4SRJm7QiM4","playbackId":"ULNuP2eL02DNRfoD2PGVOgH02018I2pmycmoN8CRlRvtKI"}},"createdAt":1710427473574,"updatedAt":1710427475772,"sources":[{"src":"https://stream.mux.com/ULNuP2eL02DNRfoD2PGVOgH02018I2pmycmoN8CRlRvtKI.m3u8","type":"application/x-mpegURL"}],"poster":"https://image.mux.com/ULNuP2eL02DNRfoD2PGVOgH02018I2pmycmoN8CRlRvtKI/thumbnail.webp","blurDataURL":"data:image/webp;base64,UklGRlAAAABXRUJQVlA4IEQAAACwAQCdASoQAAkAAQAcJZwAAueBHFYwAP7+sPJ01xp5AM+XuhDsRQ67ZYXXhHDkrqsIkUGjQSCMuENc5y3Qg0o9pZgAAA=="}
+{"status":"ready","originalFilePath":"https://storage.googleapis.com/muxdemofiles/mux.mp4","provider":"mux","providerMetadata":{"mux":{"assetId":"EploFGgmKULMpiyDFwsy5c6lmGcg8dkObaVvnPMcdkQ","playbackId":"jxEf6XiJs6JY017pSzpv8Hd6tTbdAOecHTq4FiFAn564"}},"createdAt":1710979438730,"updatedAt":1710979441038,"sources":[{"src":"https://stream.mux.com/.m3u8","type":"application/x-mpegURL"}],"poster":"https://image.mux.com//thumbnail.webp","blurDataURL":"data:image/webp;base64,UklGRlAAAABXRUJQVlA4IEQAAACwAQCdASoQAAkAAQAcJZwAAueBHFYwAP7+sPJ01xp5AM+XuhDsRQ67ZYXXhHDkrqsIkUGjQSCMuENc5y3Qg0o9pZgAAA=="}

package.json

@@ -28,6 +28,7 @@
       "require": "./dist/cjs/process.js",
       "default": "./dist/process.js"
     },
+    "./background-video": "./dist/components/background-video.js",
     "./request-handler": "./dist/request-handler.js",
     "./video-types/*": "./video-types/*.d.ts",
     "./dist/cjs/*": "./dist/cjs/*",
@@ -58,9 +59,9 @@
   },
   "peerDependencies": {
     "@types/react": "^17.0.0 || ^18",
+    "next": ">=12.0.0",
     "react": "^17.0.2 || ^18",
-    "react-dom": "^17.0.2 || ^18",
-    "next": ">=12.0.0"
+    "react-dom": "^17.0.2 || ^18"
   },
   "peerDependenciesMeta": {
     "@types/react": {
@@ -89,6 +90,7 @@
     "@inquirer/prompts": "^3.2.0",
     "@mux/mux-node": "8.0.0",
     "@mux/mux-player-react": "2.3.3",
+    "@mux/mux-video-react": "^0.8.3",
     "@next/env": "^13.5.4",
     "@paralleldrive/cuid2": "^2.2.2",
     "@vercel/blob": "^0.14.1",