feat: add transformer prop to change src & poster

URLs. useful for signing urls, using CDN urls
muxinc · Dec 12, 2023 · b36a6c3 · b36a6c3
1 parent af03564
commit b36a6c3
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 5 deletions.
diff --git a/src/components/types.ts b/src/components/types.ts
@@ -71,9 +71,31 @@ export interface VideoProps extends Omit<DefaultPlayerProps, 'src'> {
   sizes?: string;
 
   /**
-   * A custom function used to resolve video URLs.
+   * A custom function used to resolve string based video URLs (not imports).
    */
   loader?: VideoLoader;
+
+  /**
+   * A custom function to transform the asset object (src and poster).
+   */
+  transform?: (asset: Asset) => Asset;
+}
+
+export interface VideoPropsInternal extends VideoProps {
+  /**
+   * The component type to render the video as.
+   */
+  as: FunctionComponent<DefaultPlayerProps>;
+
+  /**
+   * A custom function used to resolve string based video URLs (not imports).
+   */
+  loader: VideoLoader;
+
+  /**
+   * A custom function to transform the asset object (src and poster).
+   */
+  transform: (asset: Asset) => Asset;
 }
 
 export interface PlayerProps {

diff --git a/src/components/video.tsx b/src/components/video.tsx
@@ -9,14 +9,15 @@ import * as transformers from '../providers/transformers.js';
 
 import type { DefaultPlayerRefAttributes, DefaultPlayerProps } from './default-player.js';
 import type { Asset } from '../assets.js';
-import type { VideoLoaderProps, VideoProps } from './types.js';
+import type { VideoLoaderProps, VideoProps, VideoPropsInternal } from './types.js';
 
 const DEV_MODE = process.env.NODE_ENV === 'development';
 
 const NextVideo = forwardRef<DefaultPlayerRefAttributes | null, VideoProps>((props: VideoProps, forwardedRef) => {
   let {
     as: VideoPlayer = DefaultPlayer,
     loader = defaultLoader,
+    transform = defaultTransformer,
     className,
     style,
     src,
@@ -42,7 +43,10 @@ const NextVideo = forwardRef<DefaultPlayerRefAttributes | null, VideoProps>((pro
   const needsPolling = DEV_MODE && (typeof src === 'string' && status != 'ready');
   usePolling(request, needsPolling ? 1000 : null);
 
-  const videoProps = getVideoProps({ ...props, src }, { asset });
+  const videoProps = getVideoProps(
+    { ...props, transform, src } as VideoPropsInternal,
+    { asset }
+  );
 
   return (
     <div
@@ -92,7 +96,7 @@ const NextVideo = forwardRef<DefaultPlayerRefAttributes | null, VideoProps>((pro
   );
 });
 
-export function getVideoProps(allProps: VideoProps, state: { asset?: Asset }) {
+export function getVideoProps(allProps: VideoPropsInternal, state: { asset?: Asset }) {
   const { asset } = state;
   // Remove props that are not needed for VideoPlayer.
   const {
@@ -104,6 +108,7 @@ export function getVideoProps(allProps: VideoProps, state: { asset?: Asset }) {
     poster,
     blurDataURL,
     loader,
+    transform,
     ...rest
   } = allProps;
 
@@ -133,7 +138,7 @@ export function getVideoProps(allProps: VideoProps, state: { asset?: Asset }) {
   return props;
 }
 
-function transform(asset: Asset) {
+function defaultTransformer(asset: Asset) {
   const provider = asset.provider ?? config.provider;
   for (let [key, transformer] of Object.entries(transformers)) {
     if (key === camelCase(provider)) {