sanity-plugin-mux-input 2.4.1 → 2.6.0
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 +59 -55
- package/dist/index.js +511 -1079
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +515 -1083
- package/dist/index.mjs.map +1 -1
- package/package.json +15 -19
- package/src/actions/secrets.ts +19 -9
- package/src/components/ConfigureApi.tsx +2 -0
- package/src/components/EditThumbnailDialog.tsx +122 -0
- package/src/components/MuxLogo.tsx +26 -447
- package/src/components/PlayerActionsMenu.tsx +13 -0
- package/src/components/UploadConfiguration.tsx +29 -26
- package/src/components/Uploader.tsx +21 -15
- package/src/components/VideoDetails/useVideoDetails.ts +5 -5
- package/src/components/VideoPlayer.tsx +66 -49
- package/src/components/VideoThumbnail.tsx +15 -8
- package/src/components/uploadConfiguration/PlaybackPolicy.tsx +44 -0
- package/src/components/uploadConfiguration/PlaybackPolicyOption.tsx +60 -0
- package/src/components/uploadConfiguration/PlaybackPolicyWarning.tsx +29 -0
- package/src/context/DialogStateContext.tsx +36 -0
- package/src/hooks/useAssets.ts +26 -29
- package/src/util/createUrlParamsObject.ts +25 -0
- package/src/util/formatSeconds.ts +28 -1
- package/src/util/getAnimatedPosterSrc.ts +5 -13
- package/src/util/getPosterSrc.ts +10 -15
- package/src/util/getVideoMetadata.ts +1 -1
- package/src/util/types.ts +7 -2
package/README.md
CHANGED
|
@@ -77,19 +77,19 @@ The Mux plugin will find its access tokens by fetching this document.
|
|
|
77
77
|
|
|
78
78
|
When a Mux video is uploaded/chosen in a document via this plugin, it gets stored as a reference to the video document:
|
|
79
79
|
|
|
80
|
-
```
|
|
80
|
+
```json5
|
|
81
81
|
// example document
|
|
82
82
|
{
|
|
83
|
-
|
|
83
|
+
_type: 'exampleSchemaWithVideo',
|
|
84
84
|
// Example video field
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
}
|
|
92
|
-
}
|
|
85
|
+
myVideoField: {
|
|
86
|
+
_type: 'mux.video',
|
|
87
|
+
asset: {
|
|
88
|
+
_type: 'reference',
|
|
89
|
+
_weak: true,
|
|
90
|
+
_ref: '4e37284e-cec2-406d-973c-fdf9ab1e5598', // 👈 ID of the document holding the video's Mux data
|
|
91
|
+
},
|
|
92
|
+
},
|
|
93
93
|
}
|
|
94
94
|
```
|
|
95
95
|
|
|
@@ -112,54 +112,55 @@ Before you can display videos in your frontend, you need to follow these referen
|
|
|
112
112
|
|
|
113
113
|
For reference, here's an example `mux.videoAsset` document:
|
|
114
114
|
|
|
115
|
-
```
|
|
115
|
+
```json5
|
|
116
116
|
{
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
117
|
+
_id: '4e37284e-cec2-406d-973c-fdf9ab1e5598',
|
|
118
|
+
_type: 'mux.videoAsset',
|
|
119
|
+
assetId: '7ovyI76F92n02H00mWP7lOCZMIU00N4iysDiQDNppX026HY',
|
|
120
|
+
filename: 'mux-example-video.mp4',
|
|
121
|
+
status: 'ready',
|
|
122
|
+
playbackId: 'YA02HBpY02fKWHDRMNilo301pdH02LY3k9HTcK43ItGJLWA',
|
|
123
|
+
thumbTime: 65.82,
|
|
123
124
|
// Full Mux asset data:
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
125
|
+
data: {
|
|
126
|
+
encoding_tier: 'smart',
|
|
127
|
+
max_resolution_tier: '1080p',
|
|
128
|
+
aspect_ratio: '16:9',
|
|
129
|
+
created_at: '1706645034',
|
|
130
|
+
duration: 25.492133,
|
|
131
|
+
status: 'ready',
|
|
132
|
+
master_access: 'none',
|
|
133
|
+
max_stored_frame_rate: 29.97,
|
|
134
|
+
playback_ids: [
|
|
134
135
|
{
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
}
|
|
136
|
+
id: 'YA02HBpY02fKWHDRMNilo301pdH02LY3k9HTcK43ItGJLWA',
|
|
137
|
+
policy: 'signed',
|
|
138
|
+
},
|
|
138
139
|
],
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
140
|
+
resolution_tier: '1080p',
|
|
141
|
+
ingest_type: 'on_demand_url',
|
|
142
|
+
max_stored_resolution: 'HD',
|
|
143
|
+
tracks: [
|
|
143
144
|
{
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
145
|
+
max_channel_layout: 'stereo',
|
|
146
|
+
max_channels: 2,
|
|
147
|
+
id: '00MKMC73SYimw1YTh0102lPJJp9w2R5rHddpNX1N9opAMk',
|
|
148
|
+
type: 'audio',
|
|
149
|
+
primary: true,
|
|
150
|
+
duration: 25.45,
|
|
150
151
|
},
|
|
151
152
|
{
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
}
|
|
153
|
+
max_frame_rate: 29.97,
|
|
154
|
+
max_height: 1080,
|
|
155
|
+
id: 'g1wEph3CVvbJL01YNKzAWMyH8N1SxW00WeECGjqwEHW9g',
|
|
156
|
+
type: 'video',
|
|
157
|
+
duration: 25.4254,
|
|
158
|
+
max_width: 1920,
|
|
159
|
+
},
|
|
159
160
|
],
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
}
|
|
161
|
+
id: '7ovyI76F92n02H00mWP7lOCZMIU00N4iysDiQDNppX026HY',
|
|
162
|
+
mp4_support: 'none',
|
|
163
|
+
},
|
|
163
164
|
}
|
|
164
165
|
```
|
|
165
166
|
|
|
@@ -187,6 +188,8 @@ export default function MuxVideo({playbackId, title}: {playbackId?: string; titl
|
|
|
187
188
|
|
|
188
189
|
To enable [signed URLs](https://docs.mux.com/docs/security-signed-urls) with content uploaded to Mux, you will need to check the "Enable Signed Urls" option in the Mux Plugin configuration. This feature requires you to set the API Access Token and Secret Key (as per the [Quick start](#quick-start) section).
|
|
189
190
|
|
|
191
|
+
⚠️ **Important:** To use Signed URLs, the API Access Token must have **System permissions**. Without these permissions, the signing key cannot be created, and authentication will fail.
|
|
192
|
+
|
|
190
193
|
📌 **Note**: When the signed URL option is triggered, the plugin will cache a `signingKeyPrivate` in a private document in the dataset. This key is used by Mux to sign the uploads, and if it's incorrect your uploads will fail. If that's the case, you can delete the secrets document and try again:
|
|
191
194
|
|
|
192
195
|
```bash
|
|
@@ -279,7 +282,7 @@ Issues are actively monitored and PRs are welcome. When developing this plugin t
|
|
|
279
282
|
|
|
280
283
|
### Publishing
|
|
281
284
|
|
|
282
|
-
|
|
285
|
+
You can run the ["CI and Release" workflow](<[https://github.com/sanity-io/sanity-plugin-mux-input/actions/workflows/ci.yml](https://github.com/sanity-io/sanity-plugin-mux-input/actions/workflows/main.yml)>).
|
|
283
286
|
Make sure to select the main branch and check "Release new version".
|
|
284
287
|
|
|
285
288
|
Semantic release will only release on configured branches, so it is safe to run release on any branch.
|
|
@@ -301,11 +304,12 @@ After Studio v3 turns stable this behavior will change. The v2 version will then
|
|
|
301
304
|
|
|
302
305
|
### Develop & test
|
|
303
306
|
|
|
304
|
-
|
|
305
|
-
with default configuration for build & watch scripts.
|
|
307
|
+
You can run the example locally by doing the following:
|
|
306
308
|
|
|
307
|
-
|
|
308
|
-
|
|
309
|
+
1. run `npm install` and `npm dev` on the root of the repo
|
|
310
|
+
2. In the terminal, a command with `yalc` will be shown, that command will allow you to run the version that you have locally directly on the example or on your own app.
|
|
311
|
+
3. run `npm install` and `npm dev` on the `/example` directory where the app with the example exists or in your own app
|
|
312
|
+
4. the studio and app should auto reload with your changes in the plugin package you have locally
|
|
309
313
|
|
|
310
314
|
### Release new version
|
|
311
315
|
|