fix: svg blur image aspect ratio (#259)

* fix: svg blur image aspect ratio * fix: video and poster expanding parent container * example: add fullscreen background video
muxinc · May 30, 2024 · 1efddd1 · 1efddd1
1 parent ef554c4
commit 1efddd1
Show file tree

Hide file tree

Showing 11 changed files with 61 additions and 5 deletions.
diff --git a/...lt-provider/app/background-video/page.tsx → ...r/app/(default)/background-video/page.tsx b/...lt-provider/app/background-video/page.tsx → ...r/app/(default)/background-video/page.tsx
diff --git a/...fault-provider/app/custom-player/page.tsx → ...ider/app/(default)/custom-player/page.tsx b/...fault-provider/app/custom-player/page.tsx → ...ider/app/(default)/custom-player/page.tsx
diff --git a/...ult-provider/app/custom-player/player.tsx → ...er/app/(default)/custom-player/player.tsx b/...ult-provider/app/custom-player/player.tsx → ...er/app/(default)/custom-player/player.tsx
diff --git a/examples/default-provider/app/layout.tsx → ...default-provider/app/(default)/layout.tsx b/examples/default-provider/app/layout.tsx → ...default-provider/app/(default)/layout.tsx
@@ -4,9 +4,9 @@ import * as fs from 'node:fs/promises';
 
 import type { Metadata } from 'next';
 import { DM_Sans, JetBrains_Mono } from 'next/font/google';
-import Nav from './nav';
-import SidebarNav from './sidebar-nav';
-import './globals.css';
+import Nav from '../nav';
+import SidebarNav from '../sidebar-nav';
+import '../globals.css';
 
 const dmSans = DM_Sans({ subsets: ['latin'], variable: '--sans' });
 const jetBrainsMono = JetBrains_Mono({ subsets: ['latin'], variable: '--mono' });
@@ -18,7 +18,7 @@ export const metadata: Metadata = {
 };
 
 const fileDir = dirname(fileURLToPath(import.meta.url));
-const themeScript = await fs.readFile(`${fileDir}/theme-toggle.js`, 'utf-8');
+const themeScript = await fs.readFile(`${fileDir}/../theme-toggle.js`, 'utf-8');
 
 export default async function RootLayout({
   children,

diff --git a/examples/default-provider/app/page.tsx → ...s/default-provider/app/(default)/page.tsx b/examples/default-provider/app/page.tsx → ...s/default-provider/app/(default)/page.tsx
diff --git a/...ault-provider/app/slotted-poster/page.tsx → ...der/app/(default)/slotted-poster/page.tsx b/...ault-provider/app/slotted-poster/page.tsx → ...der/app/(default)/slotted-poster/page.tsx
diff --git a/...fault-provider/app/string-source/page.tsx → ...ider/app/(default)/string-source/page.tsx b/...fault-provider/app/string-source/page.tsx → ...ider/app/(default)/string-source/page.tsx
diff --git a/examples/default-provider/app/(fullscreen)/background-video-fullscreen/page.tsx b/examples/default-provider/app/(fullscreen)/background-video-fullscreen/page.tsx
@@ -0,0 +1,30 @@
+import { Metadata } from 'next';
+import BackgroundVideo from 'next-video/background-video';
+import countryClouds from '/videos/country-clouds.mp4?thumbnailTime=0';
+
+export const metadata: Metadata = {
+  title: 'next-video - Background Video',
+};
+
+export default function Page() {
+  return (
+    <>
+      <BackgroundVideo
+        src={countryClouds}
+        disableTracking
+        maxResolution="720p"
+        style={{
+          aspectRatio: 'auto',
+          width: '100%',
+          height: '100%'
+        }}
+      >
+        <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>
+    </>
+  );
+}
diff --git a/examples/default-provider/app/(fullscreen)/layout.tsx b/examples/default-provider/app/(fullscreen)/layout.tsx
@@ -0,0 +1,25 @@
+import type { Metadata } from 'next';
+import { DM_Sans, JetBrains_Mono } from 'next/font/google';
+import '../globals.css';
+
+const dmSans = DM_Sans({ subsets: ['latin'], variable: '--sans' });
+const jetBrainsMono = JetBrains_Mono({ subsets: ['latin'], variable: '--mono' });
+
+export const metadata: Metadata = {
+  title: 'next-video',
+  description:
+    'Next Video solves the hard problems with embedding, storing, streaming, and customizing video in your Next.js app.',
+};
+
+export default function getLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en" suppressHydrationWarning className={`${dmSans.variable} ${jetBrainsMono.variable}`}>
+      <body style={{
+        display: 'block',
+        margin: 0,
+        height: '100vh',
+        overflow: 'hidden',
+      }}>{children}</body>
+    </html>
+  );
+}
diff --git a/src/components/players/background-player.tsx b/src/components/players/background-player.tsx
@@ -84,6 +84,7 @@ export const BackgroundPlayer = forwardRef((allProps: BackgroundPlayerProps, for
         .next-video-bg-poster,
         .next-video-bg-text {
           grid-area: 1 / 1;
+          min-height: 0;
         }
 
         .next-video-bg-poster {

diff --git a/src/components/utils.ts b/src/components/utils.ts
@@ -105,6 +105,6 @@ function isExoticComponent(component: any) {
 }
 
 export function svgBlurImage(blurDataURL: string) {
-  const svg = /*html*/`<svg xmlns="http://www.w3.org/2000/svg"><filter id="b" color-interpolation-filters="sRGB"><feGaussianBlur stdDeviation="20"/><feComponentTransfer><feFuncA type="discrete" tableValues="1 1"/></feComponentTransfer></filter><g filter="url(#b)"><image width="100%" height="100%" href="${blurDataURL}"/></g></svg>`;
+  const svg = /*html*/`<svg xmlns="http://www.w3.org/2000/svg"><filter id="b" color-interpolation-filters="sRGB"><feGaussianBlur stdDeviation="20"/><feComponentTransfer><feFuncA type="discrete" tableValues="1 1"/></feComponentTransfer></filter><g filter="url(#b)"><image width="100%" height="100%" preserveAspectRatio="xMidYMid slice" href="${blurDataURL}"/></g></svg>`;
   return svg.replace(/#/g, '%23');
 }