muxinc / next-video

The easiest way to add video in your Nextjs app.
https://next-video.dev
MIT License
858 stars 33 forks source link

feat: decoupled video config #306

Closed luwes closed 1 month ago

luwes commented 1 month ago

fix https://github.com/muxinc/next-video/issues/304 related https://github.com/muxinc/next-video/pull/281

This change adds a video config that is decoupled (not stored) in the Next runtime config which allows us to store complex objects like functions. It's a similar pattern that next-auth uses.

The old pattern of adding the video config to next.config.js still works for processing local assets but remote assets will require adding a next-video.(js|mjs) file with the video config. This file will export some functions that can then be used in the video API routes.

for example:

// next-video.mjs
import { NextVideo } from 'next-video/process';
import { readFile } from 'fs/promises';

export const { GET, POST, handler, withNextVideo } = NextVideo({
  loadAsset: async function (assetPath) {
    console.warn(99, assetPath);
    const file = await readFile(assetPath);
    const asset = JSON.parse(file.toString());
    return asset;
  },
});

withNextVideo is exported as well so devs don't need to duplicate the video config.

// next.config.mjs
import { withNextVideo } from './next-video.mjs';

/** @type {import('next').NextConfig} */
const nextConfig = (phase, { defaultConfig }) => {
  return {
    ...defaultConfig,
  };
};

export default withNextVideo(nextConfig);

In this file devs will be able to add auth or other access control.

// api/video/route.js
export { GET, POST } from '@/next-video';

The processing on a GET request if the file is not processed yet is removed. This requires an explicit POST request now to e.g. /api/video?url=https://storage.googleapis.com/muxdemofiles/mux.mp4

vercel[bot] commented 1 month ago

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
next-video-demo ✅ Ready (Inspect) Visit Preview 💬 Add feedback Oct 28, 2024 7:50pm
codecov-commenter commented 1 month ago

Codecov Report

Attention: Patch coverage is 66.66667% with 32 lines in your changes missing coverage. Please review.

Project coverage is 88.09%. Comparing base (a3951a3) to head (ae75ae7). Report is 2 commits behind head on main.

Files with missing lines Patch % Lines
src/request-handler.ts 50.90% 27 Missing :warning:
src/setup-next-video.ts 75.00% 5 Missing :warning:
Additional details and impacted files ```diff @@ Coverage Diff @@ ## main #306 +/- ## ========================================== - Coverage 90.67% 88.09% -2.59% ========================================== Files 30 32 +2 Lines 2456 2562 +106 Branches 350 285 -65 ========================================== + Hits 2227 2257 +30 - Misses 228 304 +76 Partials 1 1 ```

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.