Skip to content

Commit df46b46

Browse files
luwesluwes
authored
feat: add player only export (#261)
* feat: add player only export fix #250 * fix: config function bug * example: use /player export * fix: NODE_ENV build issue
1 parent e2ea2d1 commit df46b46

File tree

11 files changed

+124
-74
lines changed

11 files changed

+124
-74
lines changed

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

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import { Metadata } from 'next';
2+
import Player from 'next-video/player';
3+
4+
export const metadata: Metadata = {
5+
title: 'next-video - Player only',
6+
};
7+
8+
export default function Page() {
9+
return (
10+
<>
11+
<section>
12+
<Player
13+
style={{ display: 'grid', width: '100%', aspectRatio: '16/9' }}
14+
src="https://storage.googleapis.com/muxdemofiles/mux.mp4"
15+
poster="https://image.mux.com/jxEf6XiJs6JY017pSzpv8Hd6tTbdAOecHTq4FiFAn564/thumbnail.webp"
16+
blurDataURL='data:image/webp;base64,UklGRlAAAABXRUJQVlA4IEQAAACwAQCdASoQAAkAAQAcJZwAAueBHFYwAP7+sPJ01xp5AM+XuhDsRQ67ZYXXhHDkrqsIkUGjQSCMuENc5y3Qg0o9pZgAAA=='
17+
/>
18+
</section>
19+
</>
20+
);
21+
}

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,9 @@ export default function SidebarNav() {
2323
<li>
2424
<Link className={`link ${pathname === '/string-source' ? 'active' : ''}`} href="/string-source">String video source</Link>
2525
</li>
26+
<li>
27+
<Link className={`link ${pathname === '/player-only' ? 'active' : ''}`} href="/player-only">Player only</Link>
28+
</li>
2629
</ul>
2730
</nav>
2831
}

‎examples/default-provider/next.config.mjs

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,13 @@
11
import { withNextVideo } from 'next-video/process';
2+
23
/** @type {import('next').NextConfig} */
3-
const nextConfig = {};
4+
const nextConfig = (phase, { defaultConfig }) => {
5+
return {
6+
...defaultConfig,
7+
};
8+
};
49

5-
export default async function config() {
6-
return withNextVideo(nextConfig);
7-
}
10+
export default withNextVideo(nextConfig);
811

912
// Amazon S3 example
1013
// export default withNextVideo(nextConfig, {

‎examples/default-provider/package-lock.json

Lines changed: 10 additions & 10 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,12 +23,14 @@
2323
"main": "./dist/components/video.js",
2424
"exports": {
2525
".": "./dist/components/video.js",
26+
"./player": "./dist/components/players/default-player.js",
2627
"./process": {
2728
"import": "./dist/process.js",
2829
"require": "./dist/cjs/process.js",
2930
"default": "./dist/process.js"
3031
},
3132
"./background-video": "./dist/components/background-video.js",
33+
"./background-player": "./dist/components/players/background-player.js",
3234
"./request-handler": "./dist/request-handler.js",
3335
"./video-types/*": "./video-types/*.d.ts",
3436
"./dist/cjs/*": "./dist/cjs/*",

‎src/components/background-video.tsx

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,19 +2,16 @@
22

33
import { forwardRef } from 'react';
44

5-
import { BackgroundPlayer } from './players/background-player.js';
5+
import BackgroundPlayer from './players/background-player.js';
66
import Video from './video.js';
77

88
import type { VideoProps } from './types.js';
99

1010
const BackgroundVideo = forwardRef((props: VideoProps, forwardedRef) => {
11-
const { className } = props;
12-
1311
return <Video
1412
ref={forwardedRef}
1513
as={BackgroundPlayer}
1614
thumbnailTime={0}
17-
className={`${className ? `${className} ` : ''}next-video-bg`}
1815
{...props}
1916
/>;
2017
});

‎src/components/players/background-player.tsx

Lines changed: 51 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,21 @@ import MuxVideo from '@mux/mux-video-react';
99
import { getPlaybackId, getPosterURLFromPlaybackId } from '../../providers/mux/transformer.js';
1010
import { svgBlurImage } from '../utils.js';
1111

12-
export type BackgroundPlayerProps = Omit<DefaultPlayerProps, 'src'>;
13-
14-
export const BackgroundPlayer = forwardRef((allProps: BackgroundPlayerProps, forwardedRef: any) => {
15-
let { style, children, asset, controls, poster, blurDataURL, onPlaying, onLoadStart, ...rest } =
16-
allProps;
12+
export type BackgroundPlayerProps = DefaultPlayerProps;
13+
14+
const BackgroundPlayer = forwardRef((allProps: BackgroundPlayerProps, forwardedRef: any) => {
15+
let {
16+
style,
17+
className,
18+
children,
19+
asset,
20+
controls,
21+
poster,
22+
blurDataURL,
23+
onPlaying,
24+
onLoadStart,
25+
...rest
26+
} = allProps;
1727

1828
const slottedPoster = Children.toArray(children).find((child) => {
1929
return typeof child === 'object' && 'type' in child && child.props.slot === 'poster';
@@ -57,6 +67,8 @@ export const BackgroundPlayer = forwardRef((allProps: BackgroundPlayerProps, for
5767
const showCustomBlur = isCustomPoster && blurDataURL !== asset?.blurDataURL;
5868

5969
if (showGeneratedBlur || showCustomBlur) {
70+
imgStyleProps.width = '100%';
71+
imgStyleProps.height = '100%';
6072
imgStyleProps.color = 'transparent';
6173
imgStyleProps.backgroundSize = 'cover';
6274
imgStyleProps.backgroundPosition = 'center';
@@ -75,21 +87,19 @@ export const BackgroundPlayer = forwardRef((allProps: BackgroundPlayerProps, for
7587
<style>{
7688
/* css */`
7789
.next-video-bg {
78-
aspect-ratio: initial;
90+
width: 100%;
7991
height: 100%;
8092
display: grid;
8193
}
8294
83-
.next-video-bg [data-next-video],
95+
.next-video-bg-video,
8496
.next-video-bg-poster,
8597
.next-video-bg-text {
8698
grid-area: 1 / 1;
8799
min-height: 0;
88100
}
89101
90102
.next-video-bg-poster {
91-
width: 100%;
92-
height: 100%;
93103
position: relative;
94104
object-fit: cover;
95105
pointer-events: none;
@@ -100,7 +110,7 @@ export const BackgroundPlayer = forwardRef((allProps: BackgroundPlayerProps, for
100110
opacity: 0;
101111
}
102112
103-
.next-video-bg [data-next-video] {
113+
.next-video-bg-video {
104114
object-fit: cover;
105115
}
106116
@@ -112,34 +122,38 @@ export const BackgroundPlayer = forwardRef((allProps: BackgroundPlayerProps, for
112122
}
113123
`
114124
}</style>
115-
<MuxVideo
116-
ref={forwardedRef}
117-
style={{ ...style }}
118-
onPlaying={(event) => {
119-
onPlaying?.(event as any);
120-
setPosterHidden(true);
121-
}}
122-
onLoadStart={(event) => {
123-
onLoadStart?.(event as any);
124-
setPosterHidden(false);
125-
}}
126-
muted={true}
127-
autoPlay={true}
128-
loop={true}
129-
{...props}
130-
/>
131-
{poster && (
132-
<img
133-
className="next-video-bg-poster"
134-
src={isCustomPoster ? poster : undefined}
135-
srcSet={srcSet}
136-
style={imgStyleProps}
137-
hidden={posterHidden}
138-
decoding="async"
139-
aria-hidden="true"
125+
<div className={`${className ? `${className} ` : ''}next-video-bg`} style={{ ...style }}>
126+
<MuxVideo
127+
ref={forwardedRef}
128+
className="next-video-bg-video"
129+
onPlaying={(event) => {
130+
onPlaying?.(event as any);
131+
setPosterHidden(true);
132+
}}
133+
onLoadStart={(event) => {
134+
onLoadStart?.(event as any);
135+
setPosterHidden(false);
136+
}}
137+
muted={true}
138+
autoPlay={true}
139+
loop={true}
140+
{...props}
140141
/>
141-
)}
142-
<div className="next-video-bg-text">{children}</div>
142+
{poster && (
143+
<img
144+
className="next-video-bg-poster"
145+
src={isCustomPoster ? poster : undefined}
146+
srcSet={srcSet}
147+
style={imgStyleProps}
148+
hidden={posterHidden}
149+
decoding="async"
150+
aria-hidden="true"
151+
/>
152+
)}
153+
<div className="next-video-bg-text">{children}</div>
154+
</div>
143155
</>
144156
);
145157
});
158+
159+
export default BackgroundPlayer;

‎src/components/players/default-player.tsx

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
'use client';
2+
13
import { forwardRef, Suspense, lazy, Children, isValidElement } from 'react';
24
import { getPlaybackId, getPosterURLFromPlaybackId } from '../../providers/mux/transformer.js';
35
import { svgBlurImage } from '../utils.js';
@@ -11,7 +13,7 @@ export type DefaultPlayerRefAttributes = MuxPlayerRefAttributes;
1113

1214
export type DefaultPlayerProps = Omit<MuxPlayerProps, 'src'> & PlayerProps;
1315

14-
export const DefaultPlayer = forwardRef((allProps: DefaultPlayerProps, forwardedRef: any) => {
16+
const DefaultPlayer = forwardRef((allProps: DefaultPlayerProps, forwardedRef: any) => {
1517
let {
1618
style,
1719
children,
@@ -64,6 +66,8 @@ export const DefaultPlayer = forwardRef((allProps: DefaultPlayerProps, forwarded
6466
const showCustomBlur = isCustomPoster && blurDataURL !== asset?.blurDataURL;
6567

6668
if (showGeneratedBlur || showCustomBlur) {
69+
imgStyleProps.width = '100%';
70+
imgStyleProps.height = '100%';
6771
imgStyleProps.color = 'transparent';
6872
imgStyleProps.backgroundSize = 'cover';
6973
imgStyleProps.backgroundPosition = 'center';
@@ -104,3 +108,5 @@ export const DefaultPlayer = forwardRef((allProps: DefaultPlayerProps, forwarded
104108
</Suspense>
105109
);
106110
});
111+
112+
export default DefaultPlayer;

‎src/components/video.tsx

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
'use client';
22

33
import { forwardRef, useState } from 'react';
4-
import { DefaultPlayer } from './players/default-player.js';
4+
import DefaultPlayer from './players/default-player.js';
55
import { Alert } from './alert.js';
66
import { createVideoRequest, defaultLoader } from './video-loader.js';
77
import * as transformers from '../providers/transformers.js';
@@ -85,9 +85,6 @@ const NextVideo = forwardRef((props: VideoProps, forwardedRef) => {
8585
[data-next-video] img {
8686
object-fit: var(--media-object-fit, contain);
8787
object-position: var(--media-object-position, center);
88-
background: center / var(--media-object-fit, contain) no-repeat transparent;
89-
width: 100%;
90-
height: 100%;
9188
}
9289
`
9390
}</style>

‎src/config.ts

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,7 @@ export const videoConfigDefault: VideoConfigComplete = {
6666

6767
/**
6868
* The video config is set in `next.config.js` and passed to the `withNextVideo` function.
69-
* The video config is then stored as an environment variable __NEXT_VIDEO_OPTS.
69+
* The video config is then stored in `serverRuntimeConfig`.
7070
*/
7171
export async function getVideoConfig(): Promise<VideoConfigComplete> {
7272
let nextConfig: NextConfig | undefined = getConfig();
@@ -91,10 +91,13 @@ async function importConfig(file: string) {
9191
const fileUrl = pathToFileURL(absFilePath).href;
9292

9393
const mod = await import(/* webpackIgnore: true */ fileUrl);
94-
const config: (() => NextConfig) | NextConfig | undefined = mod?.default;
94+
const config:
95+
| ((phase: string | undefined, opts: any) => Promise<NextConfig>)
96+
| NextConfig
97+
| undefined = mod?.default;
9598

9699
if (typeof config === 'function') {
97-
return config();
100+
return config(process.env.NEXT_PHASE, { defaultConfig: {} });
98101
}
99102
return config;
100103
}

0 commit comments

Comments
 (0)