@kimjansheden/payload-video-processor 0.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +164 -0
- package/dist/admin/VideoField.cjs +737 -0
- package/dist/admin/VideoField.cjs.map +1 -0
- package/dist/admin/VideoField.d.cts +44 -0
- package/dist/admin/VideoField.d.ts +44 -0
- package/dist/admin/VideoField.js +731 -0
- package/dist/admin/VideoField.js.map +1 -0
- package/dist/admin/client.d.cts +4 -0
- package/dist/admin/client.d.ts +4 -0
- package/dist/cli/start-worker.cjs +691 -0
- package/dist/cli/start-worker.cjs.map +1 -0
- package/dist/cli/start-worker.js +678 -0
- package/dist/cli/start-worker.js.map +1 -0
- package/dist/exports/client.cjs +737 -0
- package/dist/exports/client.cjs.map +1 -0
- package/dist/exports/client.js +731 -0
- package/dist/exports/client.js.map +1 -0
- package/dist/index.cjs +1141 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.d.cts +66 -0
- package/dist/index.d.ts +66 -0
- package/dist/index.js +1125 -0
- package/dist/index.js.map +1 -0
- package/dist/queue/worker.cjs +483 -0
- package/dist/queue/worker.cjs.map +1 -0
- package/dist/queue/worker.d.cts +2 -0
- package/dist/queue/worker.d.ts +2 -0
- package/dist/queue/worker.js +472 -0
- package/dist/queue/worker.js.map +1 -0
- package/dist/styles-GMHOOV63.css +8 -0
- package/dist/types-BjFcE25o.d.cts +78 -0
- package/dist/types-BjFcE25o.d.ts +78 -0
- package/package.json +91 -0
- package/types/index.d.ts +6 -0
package/README.md
ADDED
|
@@ -0,0 +1,164 @@
|
|
|
1
|
+
# @kimjansheden/payload-video-processor
|
|
2
|
+
|
|
3
|
+
Queued FFmpeg-based video variant generation for Payload CMS. The plugin mirrors
|
|
4
|
+
Payload's image size workflow for videos by adding a `variants[]` array to video
|
|
5
|
+
collections and exposing an Admin UI that lets editors enqueue transcoding jobs.
|
|
6
|
+
Designed to be plug-and-play: no custom endpoints, no extra UI code in the
|
|
7
|
+
consumer project.
|
|
8
|
+
|
|
9
|
+
## Features
|
|
10
|
+
|
|
11
|
+
- ⚙️ Queue backed by BullMQ + Redis so processing runs outside the web process.
|
|
12
|
+
- 🎞️ Configurable presets that append FFmpeg arguments per output variant.
|
|
13
|
+
- ✂️ Optional crop UI powered by `react-easy-crop` for frame-accurate crops.
|
|
14
|
+
- 🧰 Admin field handles enqueueing, previewing, replacing, and deleting variants without extra glue code.
|
|
15
|
+
- 📁 Outputs written next to the original upload (or via custom path resolver).
|
|
16
|
+
- 🔄 Worker CLI can bootstrap Payload locally or fall back to REST APIs.
|
|
17
|
+
|
|
18
|
+
## Installation
|
|
19
|
+
|
|
20
|
+
```bash
|
|
21
|
+
pnpm add @kimjansheden/payload-video-processor
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
Peer dependencies (`payload`, `react`, `react-dom`) must already exist in your
|
|
25
|
+
Payload project. The package bundles static FFmpeg/ffprobe binaries via
|
|
26
|
+
`ffmpeg-static`; if those are blocked on your platform, set `FFMPEG_BIN` to a
|
|
27
|
+
system ffmpeg binary.
|
|
28
|
+
|
|
29
|
+
## Quick start
|
|
30
|
+
|
|
31
|
+
1. Define presets and register the plugin in your `payload.config.ts`:
|
|
32
|
+
|
|
33
|
+
```ts
|
|
34
|
+
import { buildConfig } from "payload/config";
|
|
35
|
+
import { mongooseAdapter } from "@payloadcms/db-mongodb";
|
|
36
|
+
import videoPlugin from "@kimjansheden/payload-video-processor";
|
|
37
|
+
|
|
38
|
+
const videoOptions = {
|
|
39
|
+
presets: {
|
|
40
|
+
mobile360: {
|
|
41
|
+
label: "360p Mobile",
|
|
42
|
+
args: ["-vf", "scale=-2:360", "-crf", "32"],
|
|
43
|
+
},
|
|
44
|
+
hd720: {
|
|
45
|
+
label: "720p HD",
|
|
46
|
+
args: ["-vf", "scale=-2:720", "-crf", "24"],
|
|
47
|
+
enableCrop: true,
|
|
48
|
+
},
|
|
49
|
+
},
|
|
50
|
+
queue: {
|
|
51
|
+
redisUrl: process.env.REDIS_URL,
|
|
52
|
+
concurrency: 1,
|
|
53
|
+
},
|
|
54
|
+
};
|
|
55
|
+
|
|
56
|
+
export default buildConfig({
|
|
57
|
+
db: mongooseAdapter({ url: process.env.MONGODB_URI ?? "" }),
|
|
58
|
+
collections: [
|
|
59
|
+
/* … */
|
|
60
|
+
],
|
|
61
|
+
plugins: [videoPlugin(videoOptions)],
|
|
62
|
+
});
|
|
63
|
+
```
|
|
64
|
+
|
|
65
|
+
2. Provide a worker options module and bundle it to JS (the CLI needs a JS file).
|
|
66
|
+
Example setup:
|
|
67
|
+
|
|
68
|
+
```ts
|
|
69
|
+
// src/videoPluginOptions.ts
|
|
70
|
+
export default videoOptions;
|
|
71
|
+
```
|
|
72
|
+
|
|
73
|
+
```bash
|
|
74
|
+
tsup src/videoPluginOptions.ts --format esm --platform node --target es2022 --out-dir dist-config --minify
|
|
75
|
+
```
|
|
76
|
+
|
|
77
|
+
3. Start a worker in a separate process:
|
|
78
|
+
|
|
79
|
+
```bash
|
|
80
|
+
payload-video-worker \
|
|
81
|
+
--config ./dist-config/videoPluginOptions.js \
|
|
82
|
+
--env .env
|
|
83
|
+
```
|
|
84
|
+
|
|
85
|
+
If you want the worker to initialize Payload locally, also pass
|
|
86
|
+
`--payload-config` and ensure `PAYLOAD_SECRET` + `MONGODB_URI` are set. If you
|
|
87
|
+
prefer the REST fallback, omit `--payload-config` and provide
|
|
88
|
+
`PAYLOAD_REST_URL` + `PAYLOAD_ADMIN_TOKEN`.
|
|
89
|
+
|
|
90
|
+
The CLI loads `.env`, `.env.local`, `.env.development`, and `.env.production`
|
|
91
|
+
automatically (unless you pass `--no-default-env`). Additional `--env` flags can
|
|
92
|
+
point to project-specific files.
|
|
93
|
+
|
|
94
|
+
Prefer a fully programmatic setup? Import `createWorker` directly and pass the
|
|
95
|
+
same options object you provide to the plugin.
|
|
96
|
+
|
|
97
|
+
4. In the Admin UI a "Video processing" panel appears on any upload collection
|
|
98
|
+
that accepts `video/*` mime types. Editors can enqueue presets, preview
|
|
99
|
+
variants, replace the original file with a processed version, or delete
|
|
100
|
+
unwanted variants without writing custom endpoints.
|
|
101
|
+
|
|
102
|
+
## Scripts
|
|
103
|
+
|
|
104
|
+
- `pnpm build` – bundles ESM/CJS + admin assets via `tsup`.
|
|
105
|
+
- `pnpm dev` – watch mode build useful during plugin development.
|
|
106
|
+
- `pnpm typecheck` – `tsc --noEmit` for type validation.
|
|
107
|
+
- `pnpm test` – unit tests for helper utilities using Vitest.
|
|
108
|
+
- `pnpm worker` – development helper that runs the compiled worker entry.
|
|
109
|
+
(Application projects should prefer the `payload-video-worker` CLI.)
|
|
110
|
+
|
|
111
|
+
## Environment variables
|
|
112
|
+
|
|
113
|
+
| Variable | Purpose |
|
|
114
|
+
| ------------------------------------------- | ---------------------------------------------------------------------------- |
|
|
115
|
+
| `REDIS_URL` | Default Redis connection string for queue + worker. |
|
|
116
|
+
| `FFMPEG_BIN` | Optional path to a system ffmpeg binary (overrides `ffmpeg-static`). |
|
|
117
|
+
| `STATIC_DIR` | Base media directory for the worker (used when resolving paths). |
|
|
118
|
+
| `PAYLOAD_SECRET` / `MONGODB_URI` | Required to bootstrap the Payload local API from the worker. |
|
|
119
|
+
| `PAYLOAD_REST_URL` + `PAYLOAD_ADMIN_TOKEN` | REST fallback when local init is not possible. |
|
|
120
|
+
| `PAYLOAD_PUBLIC_URL` / `PAYLOAD_SERVER_URL` | Alternative base URL for REST fallback if `PAYLOAD_REST_URL` is not set. |
|
|
121
|
+
| `PAYLOAD_CONFIG_PATH` | Absolute/relative path to the host `payload.config.ts` for worker bootstrap. |
|
|
122
|
+
|
|
123
|
+
## Customising output paths
|
|
124
|
+
|
|
125
|
+
Provide a `resolvePaths` function to control where variants are written:
|
|
126
|
+
|
|
127
|
+
```ts
|
|
128
|
+
videoPlugin({
|
|
129
|
+
presets,
|
|
130
|
+
resolvePaths: ({ original, presetName }) => ({
|
|
131
|
+
dir: path.join("/data/videos", presetName),
|
|
132
|
+
filename: `${path.parse(original.filename).name}.${presetName}.mp4`,
|
|
133
|
+
url: `/videos/${presetName}/${path.parse(original.filename).name}.mp4`,
|
|
134
|
+
}),
|
|
135
|
+
});
|
|
136
|
+
```
|
|
137
|
+
|
|
138
|
+
## Worker CLI
|
|
139
|
+
|
|
140
|
+
The installed binary `payload-video-worker` bootstraps environment variables,
|
|
141
|
+
loads your exported plugin options, and starts the queue worker. It automatically
|
|
142
|
+
loads `.env`, `.env.local`, `.env.development`, and `.env.production` (unless you
|
|
143
|
+
pass `--no-default-env`). Supply `--env` to load additional files, `--config` to
|
|
144
|
+
point at the bundled options module, `--payload-config` when you want the worker
|
|
145
|
+
to initialise Payload locally, and `--static-dir` if your media folder is not
|
|
146
|
+
`./public/media`.
|
|
147
|
+
|
|
148
|
+
```bash
|
|
149
|
+
payload-video-worker \
|
|
150
|
+
--config ./dist-config/videoPluginOptions.js \
|
|
151
|
+
--payload-config ./dist-config/payload.worker.config.js \
|
|
152
|
+
--env .env \
|
|
153
|
+
--env cms/.env
|
|
154
|
+
```
|
|
155
|
+
|
|
156
|
+
The CLI sets common fallbacks (`STATIC_DIR`, `PAYLOAD_CONFIG_PATH`,
|
|
157
|
+
`MONGODB_URI` ← `DATABASE_URI`, default `PAYLOAD_SECRET`) before invoking
|
|
158
|
+
`createWorker`. It shuts down gracefully on `SIGINT`/`SIGTERM`.
|
|
159
|
+
|
|
160
|
+
## Contributing
|
|
161
|
+
|
|
162
|
+
Contributions are welcome. Please open an issue or PR with a clear description
|
|
163
|
+
of the change and how to test it. If you add features, include a short README
|
|
164
|
+
note so onboarding stays accurate.
|