sanity-plugin-mux-input 2.4.1 → 2.5.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 +57 -55
- package/dist/index.js +364 -460
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +367 -463
- package/dist/index.mjs.map +1 -1
- package/package.json +5 -9
- package/src/components/EditThumbnailDialog.tsx +122 -0
- package/src/components/PlayerActionsMenu.tsx +13 -0
- package/src/components/Uploader.tsx +21 -15
- package/src/components/VideoPlayer.tsx +66 -49
- package/src/components/VideoThumbnail.tsx +15 -8
- package/src/context/DialogStateContext.tsx +36 -0
- 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 +4 -0
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
|
|
|
@@ -279,7 +280,7 @@ Issues are actively monitored and PRs are welcome. When developing this plugin t
|
|
|
279
280
|
|
|
280
281
|
### Publishing
|
|
281
282
|
|
|
282
|
-
|
|
283
|
+
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
284
|
Make sure to select the main branch and check "Release new version".
|
|
284
285
|
|
|
285
286
|
Semantic release will only release on configured branches, so it is safe to run release on any branch.
|
|
@@ -301,11 +302,12 @@ After Studio v3 turns stable this behavior will change. The v2 version will then
|
|
|
301
302
|
|
|
302
303
|
### Develop & test
|
|
303
304
|
|
|
304
|
-
|
|
305
|
-
with default configuration for build & watch scripts.
|
|
305
|
+
You can run the example locally by doing the following:
|
|
306
306
|
|
|
307
|
-
|
|
308
|
-
|
|
307
|
+
1. run `npm install` and `npm dev` on the root of the repo
|
|
308
|
+
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.
|
|
309
|
+
3. run `npm install` and `npm dev` on the `/example` directory where the app with the example exists or in your own app
|
|
310
|
+
4. the studio and app should auto reload with your changes in the plugin package you have locally
|
|
309
311
|
|
|
310
312
|
### Release new version
|
|
311
313
|
|