diff --git a/README.md b/README.md index 106e288..9ce7be0 100644 --- a/README.md +++ b/README.md @@ -180,17 +180,17 @@ adaptiveBirateVideos({ This plugin is configurable to work across many different Payload collections. A `*` denotes that the property is required. -| Option | Type | Description | -| ------------------- | --------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------- | -| `collections`* | Records | Object with keys set to the slug of collections you want to enable the plugin for, and values set to collection-specific options. | -| `enabled` | `boolean` | Conditionally enable/disable plugin. Default: true.
| -| `segmentsOverrides` | [PayloadCollectionConfig](https://payloadcms.com/docs/configuration/collections) | Object that overrides the default collection used to store reference to the output segments. Default: SegmentOverrideDefault | +| Option | Type | Description | +| ------------------- | -------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------- | +| `collections`* | Records | Object with keys set to the slug of collections you want to enable the plugin for, and values set to collection-specific options. | +| `enabled` | `boolean` | Conditionally enable/disable plugin. Default: true.
| +| `segmentsOverrides` | [PayloadCollectionConfig](https://payloadcms.com/docs/configuration/collections) | Object that overrides the default collection used to store reference to the output segments. Default: SegmentOverrideDefault | **Collection-specific options:** | Option | Type | Description | | --------------- | ------------------- | ---------------------------------------------------------------------------------------------- | -| `keepOriginal`* | `boolean` | Conditionally set to keep the original source file after processing. | +| `keepOriginal`* | `boolean` | Conditionally set to keep the original source file after processing. | | `resolutions` | `Array` | Set custom resolutions for the plugin to output segment videos to. Default: ResolutionsDefault | | `segmentLength` | `number` | Set the output segment length in seconds for each resolution output. Default: 2 | @@ -223,12 +223,55 @@ const DefaultResolutions = [ ] ``` +## Example Front-end Usage + +Any video player that can play .m3u8 files can be used. Here is a simple example using the `react-hls-player`. +```tsx +import React, { useRef, useState } from 'react'; +import ReactHlsPlayer from 'react-hls-player'; + +const SimpleHlsPlayer = () => { + const playerRef = useRef(null); + const [isPlaying, setIsPlaying] = useState(false); + + const handlePlay = () => { + setIsPlaying(true); + }; + + const handlePause = () => { + setIsPlaying(false); + }; + + return ( +
+ +
+

Player status: {isPlaying ? 'Playing' : 'Paused'}

+
+
+ ); +}; + +export default SimpleHlsPlayer; +``` + ## Memory Considerations To run the this plugin, you will need to run your Payload server on a machine that can comfortably storage 2x the max video upload size. This is required because the source video needs to be temporally stored and the output segments need to be temporally stored before being saved in your final destination. -See Payload Documentation on [upload limits here](https://payloadcms.com/docs/upload/overview#payload-wide-upload-options). +See Payload Documentation on setting[upload limits here](https://payloadcms.com/docs/upload/overview#payload-wide-upload-options). ## Questions diff --git a/dev/plugin.spec.ts b/dev/plugin.spec.ts index 0b8bb95..0e94f4f 100644 --- a/dev/plugin.spec.ts +++ b/dev/plugin.spec.ts @@ -42,14 +42,14 @@ describe('Plugin tests', () => { }, data: { alt: 'Ligma Test' }, }) - await new Promise(resolve => setTimeout(resolve, 60000)) + await new Promise(resolve => setTimeout(resolve, 50000)) expect(createdMedia).toBeTruthy() expect(createdMedia.id).toBeDefined() expect(createdMedia.filename).toBe('testVideo.mp4') expect(createdMedia.mimeType).toBe('video/mp4') expect(createdMedia.filesize).toBe(testVideoBuffer.byteLength) expect(createdMedia.alt).toBe('Ligma Test') - }, 80000) + }, 70000) it('standard video outputs are present', () => { const resolutions = [144, 240, 360, 480, 720] @@ -115,14 +115,14 @@ describe('Plugin tests', () => { }, data: { alt: 'Ligma Test' }, }) - await new Promise(resolve => setTimeout(resolve, 60000)) + await new Promise(resolve => setTimeout(resolve, 40000)) expect(createdMedia).toBeTruthy() expect(createdMedia.id).toBeDefined() expect(createdMedia.filename).toBe('testVideo2.mp4') expect(createdMedia.mimeType).toBe('video/mp4') expect(createdMedia.filesize).toBe(testVideoBuffer.byteLength) expect(createdMedia.alt).toBe('Ligma Test') - }, 80000) + }, 60000) it('custom video outputs are present', () => { const resolutions = [144, 240, 300] diff --git a/src/endpoints/ProcessVideo/index.ts b/src/endpoints/ProcessVideo/index.ts index 0cd2a72..fb21c51 100644 --- a/src/endpoints/ProcessVideo/index.ts +++ b/src/endpoints/ProcessVideo/index.ts @@ -9,7 +9,6 @@ import { getUploadBuffer, getUploadPath } from './utils/fileUploadUtils' const processVideo: PayloadHandler = async (req: PayloadRequest, res, next) => { try { - console.log('req.body', req.body) const { inputPath, baseURL, @@ -23,14 +22,10 @@ const processVideo: PayloadHandler = async (req: PayloadRequest, res, next) => { } = req.body as ProcessVideoParams const decodedInputPath = decodeURIComponent(baseURL + inputPath) - console.log(inputPath) const videoName = path.basename(decodedInputPath, path.extname(decodedInputPath)) - console.log('videoName', videoName) const tempDir = path.join(__dirname, 'temp') - console.log('tempDir', tempDir) const tempOutputDir = path.join(tempDir, videoName) - console.log('outDir', tempOutputDir) if (!fs.existsSync(tempOutputDir)) { fs.mkdirSync(tempOutputDir, { recursive: true }) diff --git a/src/endpoints/ProcessVideo/service/sliceVideo.ts b/src/endpoints/ProcessVideo/service/sliceVideo.ts index e00886c..7fc09d1 100644 --- a/src/endpoints/ProcessVideo/service/sliceVideo.ts +++ b/src/endpoints/ProcessVideo/service/sliceVideo.ts @@ -25,7 +25,6 @@ export async function sliceVideo( outputCollectionSlug: string, ): Promise { return new Promise((resolve, reject) => { - console.log(inputPath) ffmpeg.ffprobe(inputPath, async (err, metadata) => { if (err) return reject(err) @@ -74,7 +73,6 @@ export async function sliceVideo( file.on('finish', () => { file.close() - console.log('Download Completed') resolveCopy() }) file.on('error', err => { diff --git a/src/hooks/afterOperation.ts b/src/hooks/afterOperation.ts index 77a595f..db7b0b1 100644 --- a/src/hooks/afterOperation.ts +++ b/src/hooks/afterOperation.ts @@ -17,7 +17,6 @@ export const getAfterOperationHook = const baseURL = req.payload.config.serverURL.replace(/\/$/, '') setTimeout(async () => { - console.log('Processing video url:', url) fetch(`${baseURL}/api/process-video`, { method: 'POST', headers: {