feat: clean up console logs, add example frontend usage

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<string,[CollectionOptions]()>  | 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.<br> |
-| `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<string,[CollectionOptions]()> | 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.<br> |
+| `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<Resolution>` | 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 (
+ <div className="w-full max-w-2xl mx-auto">
+ <ReactHlsPlayer
+ id="videoElement"
+ playerRef={playerRef}
+ src="https://example.com/path/to/your/manifest.m3u8"
+ className="w-full aspect-video"
+ autoPlay={false}
+ controls={true}
+ onPlay={handlePlay}
+ onPause={handlePause}
+ muted
+ playsInline
+ />
+ <div className="mt-4 text-center">
+ <p>Player status: {isPlaying ? 'Playing' : 'Paused'}</p>
+ </div>
+ </div>
+ );
+};
+
+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
 

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]

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 })

src/endpoints/ProcessVideo/service/sliceVideo.ts

@@ -25,7 +25,6 @@ export async function sliceVideo(
  outputCollectionSlug: string,
 ): Promise<VideoInfo> {
  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 => {

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: {