feat: add player only export

examples/default-provider/app/(default)/player-only/page.tsx

@@ -0,0 +1,21 @@
+import { Metadata } from 'next';
+import Player from 'next-video/player';
+
+export const metadata: Metadata = {
+  title: 'next-video - Player only',
+};
+
+export default function Page() {
+  return (
+    <>
+      <section>
+        <Player
+          style={{ display: 'grid', width: '100%', aspectRatio: '16/9' }}
+          src="https://storage.googleapis.com/muxdemofiles/mux.mp4"
+          poster="https://image.mux.com/jxEf6XiJs6JY017pSzpv8Hd6tTbdAOecHTq4FiFAn564/thumbnail.webp"
+          blurDataURL='data:image/webp;base64,UklGRlAAAABXRUJQVlA4IEQAAACwAQCdASoQAAkAAQAcJZwAAueBHFYwAP7+sPJ01xp5AM+XuhDsRQ67ZYXXhHDkrqsIkUGjQSCMuENc5y3Qg0o9pZgAAA=='
+        />
+      </section>
+    </>
+  );
+}

examples/default-provider/app/sidebar-nav.tsx

@@ -23,6 +23,9 @@ export default function SidebarNav() {
       <li>
         <Link className={`link ${pathname === '/string-source' ? 'active' : ''}`} href="/string-source">String video source</Link>
       </li>
+      <li>
+        <Link className={`link ${pathname === '/player-only' ? 'active' : ''}`} href="/player-only">Player only</Link>
+      </li>
     </ul>
   </nav>
 }

examples/default-provider/next.config.mjs

@@ -1,10 +1,13 @@
 import { withNextVideo } from 'next-video/process';
+
 /** @type {import('next').NextConfig} */
-const nextConfig = {};
+const nextConfig = (phase, { defaultConfig }) => {
+  return {
+    ...defaultConfig,
+  };
+};
 
-export default async function config() {
-  return withNextVideo(nextConfig);
-}
+export default withNextVideo(nextConfig);
 
 // Amazon S3 example
 // export default withNextVideo(nextConfig, {

package.json

@@ -23,12 +23,14 @@
   "main": "./dist/components/video.js",
   "exports": {
     ".": "./dist/components/video.js",
+    "./player": "./dist/components/players/default-player.js",
     "./process": {
       "import": "./dist/process.js",
       "require": "./dist/cjs/process.js",
       "default": "./dist/process.js"
     },
     "./background-video": "./dist/components/background-video.js",
+    "./background-player": "./dist/components/players/background-player.js",
     "./request-handler": "./dist/request-handler.js",
     "./video-types/*": "./video-types/*.d.ts",
     "./dist/cjs/*": "./dist/cjs/*",

src/components/background-video.tsx

@@ -2,19 +2,16 @@
 
 import { forwardRef } from 'react';
 
-import { BackgroundPlayer } from './players/background-player.js';
+import BackgroundPlayer from './players/background-player.js';
 import Video from './video.js';
 
 import type { VideoProps } from './types.js';
 
 const BackgroundVideo = forwardRef((props: VideoProps, forwardedRef) => {
-  const { className } = props;
-
   return <Video
     ref={forwardedRef}
     as={BackgroundPlayer}
     thumbnailTime={0}
-    className={`${className ? `${className} ` : ''}next-video-bg`}
     {...props}
   />;
 });

src/components/players/background-player.tsx

@@ -9,11 +9,21 @@ import MuxVideo from '@mux/mux-video-react';
 import { getPlaybackId, getPosterURLFromPlaybackId } from '../../providers/mux/transformer.js';
 import { svgBlurImage } from '../utils.js';
 
-export type BackgroundPlayerProps = Omit<DefaultPlayerProps, 'src'>;
-
-export const BackgroundPlayer = forwardRef((allProps: BackgroundPlayerProps, forwardedRef: any) => {
-  let { style, children, asset, controls, poster, blurDataURL, onPlaying, onLoadStart, ...rest } =
-    allProps;
+export type BackgroundPlayerProps = DefaultPlayerProps;
+
+const BackgroundPlayer = forwardRef((allProps: BackgroundPlayerProps, forwardedRef: any) => {
+  let {
+    style,
+    className,
+    children,
+    asset,
+    controls,
+    poster,
+    blurDataURL,
+    onPlaying,
+    onLoadStart,
+    ...rest
+  } = allProps;
 
   const slottedPoster = Children.toArray(children).find((child) => {
     return typeof child === 'object' && 'type' in child && child.props.slot === 'poster';
@@ -57,6 +67,8 @@ export const BackgroundPlayer = forwardRef((allProps: BackgroundPlayerProps, for
     const showCustomBlur = isCustomPoster && blurDataURL !== asset?.blurDataURL;
 
     if (showGeneratedBlur || showCustomBlur) {
+      imgStyleProps.width = '100%';
+      imgStyleProps.height = '100%';
       imgStyleProps.color = 'transparent';
       imgStyleProps.backgroundSize = 'cover';
       imgStyleProps.backgroundPosition = 'center';
@@ -75,21 +87,19 @@ export const BackgroundPlayer = forwardRef((allProps: BackgroundPlayerProps, for
       <style>{
         /* css */`
         .next-video-bg {
-          aspect-ratio: initial;
+          width: 100%;
           height: 100%;
           display: grid;
         }
 
-        .next-video-bg [data-next-video],
+        .next-video-bg-video,
         .next-video-bg-poster,
         .next-video-bg-text {
           grid-area: 1 / 1;
           min-height: 0;
         }
 
         .next-video-bg-poster {
-          width: 100%;
-          height: 100%;
           position: relative;
           object-fit: cover;
           pointer-events: none;
@@ -100,7 +110,7 @@ export const BackgroundPlayer = forwardRef((allProps: BackgroundPlayerProps, for
           opacity: 0;
         }
 
-        .next-video-bg [data-next-video] {
+        .next-video-bg-video {
           object-fit: cover;
         }
 
@@ -112,34 +122,38 @@ export const BackgroundPlayer = forwardRef((allProps: BackgroundPlayerProps, for
         }
         `
       }</style>
-      <MuxVideo
-        ref={forwardedRef}
-        style={{ ...style }}
-        onPlaying={(event) => {
-          onPlaying?.(event as any);
-          setPosterHidden(true);
-        }}
-        onLoadStart={(event) => {
-          onLoadStart?.(event as any);
-          setPosterHidden(false);
-        }}
-        muted={true}
-        autoPlay={true}
-        loop={true}
-        {...props}
-      />
-      {poster && (
-        <img
-          className="next-video-bg-poster"
-          src={isCustomPoster ? poster : undefined}
-          srcSet={srcSet}
-          style={imgStyleProps}
-          hidden={posterHidden}
-          decoding="async"
-          aria-hidden="true"
+      <div className={`${className ? `${className} ` : ''}next-video-bg`} style={{ ...style }}>
+        <MuxVideo
+          ref={forwardedRef}
+          className="next-video-bg-video"
+          onPlaying={(event) => {
+            onPlaying?.(event as any);
+            setPosterHidden(true);
+          }}
+          onLoadStart={(event) => {
+            onLoadStart?.(event as any);
+            setPosterHidden(false);
+          }}
+          muted={true}
+          autoPlay={true}
+          loop={true}
+          {...props}
         />
-      )}
-      <div className="next-video-bg-text">{children}</div>
+        {poster && (
+          <img
+            className="next-video-bg-poster"
+            src={isCustomPoster ? poster : undefined}
+            srcSet={srcSet}
+            style={imgStyleProps}
+            hidden={posterHidden}
+            decoding="async"
+            aria-hidden="true"
+          />
+        )}
+        <div className="next-video-bg-text">{children}</div>
+      </div>
     </>
   );
 });
+
+export default BackgroundPlayer;

src/components/players/default-player.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { forwardRef, Suspense, lazy, Children, isValidElement } from 'react';
 import { getPlaybackId, getPosterURLFromPlaybackId } from '../../providers/mux/transformer.js';
 import { svgBlurImage } from '../utils.js';
@@ -11,7 +13,7 @@ export type DefaultPlayerRefAttributes = MuxPlayerRefAttributes;
 
 export type DefaultPlayerProps = Omit<MuxPlayerProps, 'src'> & PlayerProps;
 
-export const DefaultPlayer = forwardRef((allProps: DefaultPlayerProps, forwardedRef: any) => {
+const DefaultPlayer = forwardRef((allProps: DefaultPlayerProps, forwardedRef: any) => {
   let {
     style,
     children,
@@ -64,6 +66,8 @@ export const DefaultPlayer = forwardRef((allProps: DefaultPlayerProps, forwarded
     const showCustomBlur = isCustomPoster && blurDataURL !== asset?.blurDataURL;
 
     if (showGeneratedBlur || showCustomBlur) {
+      imgStyleProps.width = '100%';
+      imgStyleProps.height = '100%';
       imgStyleProps.color = 'transparent';
       imgStyleProps.backgroundSize = 'cover';
       imgStyleProps.backgroundPosition = 'center';
@@ -104,3 +108,5 @@ export const DefaultPlayer = forwardRef((allProps: DefaultPlayerProps, forwarded
     </Suspense>
   );
 });
+
+export default DefaultPlayer;

src/components/video.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { forwardRef, useState } from 'react';
-import { DefaultPlayer } from './players/default-player.js';
+import DefaultPlayer from './players/default-player.js';
 import { Alert } from './alert.js';
 import { createVideoRequest, defaultLoader } from './video-loader.js';
 import * as transformers from '../providers/transformers.js';
@@ -85,9 +85,6 @@ const NextVideo = forwardRef((props: VideoProps, forwardedRef) => {
         [data-next-video] img {
           object-fit: var(--media-object-fit, contain);
           object-position: var(--media-object-position, center);
-          background: center / var(--media-object-fit, contain) no-repeat transparent;
-          width: 100%;
-          height: 100%;
         }
         `
       }</style>

src/config.ts

@@ -66,7 +66,7 @@ export const videoConfigDefault: VideoConfigComplete = {
 
 /**
  * The video config is set in `next.config.js` and passed to the `withNextVideo` function.
- * The video config is then stored as an environment variable __NEXT_VIDEO_OPTS.
+ * The video config is then stored in `serverRuntimeConfig`.
  */
 export async function getVideoConfig(): Promise<VideoConfigComplete> {
   let nextConfig: NextConfig | undefined = getConfig();
@@ -91,10 +91,13 @@ async function importConfig(file: string) {
   const fileUrl = pathToFileURL(absFilePath).href;
 
   const mod = await import(/* webpackIgnore: true */ fileUrl);
-  const config: (() => NextConfig) | NextConfig | undefined = mod?.default;
+  const config:
+    | ((phase: string | undefined, opts: any) => Promise<NextConfig>)
+    | NextConfig
+    | undefined = mod?.default;
 
   if (typeof config === 'function') {
-    return config();
+    return config(process.env.NEXT_PHASE, { defaultConfig: {} });
   }
   return config;
 }

src/with-next-video.ts

@@ -6,30 +6,34 @@ import { fileURLToPath } from 'node:url';
 import { videoConfigDefault } from './config.js';
 import type { VideoConfig } from './config.js';
 
-export async function withNextVideo(nextConfig: any, videoConfig?: VideoConfig) {
-  if (typeof nextConfig === 'function') {
-    return async (...args: any[]) => {
-      const nextConfigResult = await Promise.resolve(nextConfig(...args));
-      return withNextVideo(nextConfigResult, videoConfig);
-    };
-  }
-
+export function withNextVideo(nextConfig: any, videoConfig?: VideoConfig) {
   const videoConfigComplete = Object.assign({}, videoConfigDefault, videoConfig);
   const { path, folder, provider } = videoConfigComplete;
 
+  // env VARS have to be set before the async function return!!
+
   // Don't use `process.env` here because Next.js replaces public env vars during build.
-  env['NEXT_PUBLIC_VIDEO_OPTS'] = JSON.stringify({ path, provider });
-  env['__NEXT_VIDEO_OPTS'] = JSON.stringify(videoConfigComplete);
+  env['NEXT_PUBLIC_VIDEO_OPTS'] = JSON.stringify({ path, folder, provider });
 
   // We should probably switch to using `phase` here, just a bit concerned about backwards compatibility.
   if (process.argv[2] === 'dev') {
     // Don't use `process.env` here because Next.js replaces public env vars during build.
     env['NEXT_PUBLIC_DEV_VIDEO_OPTS'] = JSON.stringify({ path, folder, provider });
+  }
 
+  if (typeof nextConfig === 'function') {
+    return async (...args: any[]) => {
+      const nextConfigResult = await nextConfig(...args);
+      return withNextVideo(nextConfigResult, videoConfig);
+    };
+  }
+
+  // We should probably switch to using `phase` here, just a bit concerned about backwards compatibility.
+  if (process.argv[2] === 'dev') {
     const VIDEOS_PATH = join(process.cwd(), folder);
     const TMP_PUBLIC_VIDEOS_PATH = join(process.cwd(), 'public', `_next-video`);
 
-    await symlinkDir(VIDEOS_PATH, TMP_PUBLIC_VIDEOS_PATH);
+    symlinkDir(VIDEOS_PATH, TMP_PUBLIC_VIDEOS_PATH);
 
     process.on('exit', async () => {
       await fs.unlink(TMP_PUBLIC_VIDEOS_PATH);