Writing plugin to work inside /media/assets

[chrispepper1989]

Description

Hello everyone,I am hoping to write my first dato plugin! however this one needs to work within the “/media/assets/” area of the UI.Ideally I want to be able to either

1. Perform bulk operations on all videos
2. Perform the operation on individual videos

If I can only do the second via the sidebar on a video asset. I can live with that. However I am finding it difficult to figure out how to affect the asset area, except through asset sources the documentation isnt very clear about plugins in this area.

My plugin isn’t really an “asset source”. I am hoping to manipulate the subtitle files on a video (essentially I want to download the srt, replace English swear words and re-upload the ‘cleaned’ version as an alternate subtitle file)

I think I know how to do the manipulation, through this functionality:
https://www.datocms.com/docs/content-management-api/resources/upload/updatebut im just struggling to find the “sidebar” equivalent of this
Plugin SDK: Asset sources — DatoCMS Docs

after trying for a bit on my own I have some questions:

1. is it a bad idea to mix in the content management sdk with a plugin?
2. is the “UploadSidebarPanelsHook” where I want to look for individual video manipulation
3. I could ‘abuse’ the asset sources to at least get me a new dialogue, but it doesn’t feel very clean, it did however let me experiment with const items = await ctx.selectUpload({ multiple: true});
   • which gives me a way of letting the user select the videos they want to edit subtitles of however:
     -This however doesn’t let me filter to video assets (as far as I can see)
     -the “upload” type doesn’t seem to have access to the subtitle file…

Example

Here is an example of one of our videos:
https://ourplanetourpeople.admin.datocms.com/media/assets/McDCGEzBRdSNQFKZ3CeekQ

[roger]

Hi @chrispepper1989,

Example Plugin

Because this is a complicated, multi-step thing, I made an example plugin for you to show how it could work:

GitHub - arcataroger/video-plugin-example-forum-7777

The important files are:

• main.tsx shows how to render a plugin sidebar panel, per our docs
• UploadSideBarPanel.tsx shows a basic lifecycle of downloading the subtitle tracks, editing them, re-uploading them, and adding them as new tracks to the upload

I also sent you an email invite to a demo project where you can see this plugin in action. This video shows what it does:

---

Detailed answers:

And to answer your questions more specifically:

@chrispepper1989

If I can only do the second via the sidebar on a video asset. I can live with that.

Unfortunately, we don’t have a way for plugins to interact with multiple items in the media library directly You can use a custom page, but you’d have to create the whole media gallery from scratch, which isn’t easy. Sorry! It could be a feature request though.

@chrispepper1989

im just struggling to find the “sidebar” equivalent of this
Plugin SDK: Asset sources — DatoCMS Docs

It is an “asset sidebar panel” that you want. It has nothing to do with asset sources.

@chrispepper1989

is it a bad idea to mix in the content management sdk with a plugin?

Nope, it’s totally fine. That’s why we give plugins the ability to request/require ctx.currentUserAccessToken.

@chrispepper1989

• is the “UploadSidebarPanelsHook” where I want to look for individual video manipulation

Sort of… renderUploadSidebarPanelsHook is the real starting place, but that only gets you access to ctx.upload for the basic upload info (like the id). From there you’ll have to make CMA or fetch calls:

• Fetch the available subtitle tracks
• Download the actual .VTT subtitle files from Mux, concating the upload ID with the track ID
• Handle the actual replacement in several steps, per track:
  1. Replace the text. My example does a simple string.replaceAll() but yours can do whatever you need, including making external API calls for censoring.
  2. Create a new .VTT file and upload it to the media area temporarily.
  3. Associate that new .VTT file with the video itself and designate them as subtitle tracks
  4. Clean up the temporary .VTT files (once they are added to the video, they live in Mux and you no longer need the separate .VTT files in your media area)
  5. (Optional and not in my example): You can also delete the original subtitle track if you want.

---

Hope that helps! Please let me know if there’s anything I can clarify. Otherwise, hopefully you can use that example as a starting point to really flesh it out

Sorry there’s not a nice way to do this to multiple files at once Of course you can do it all with a webhook or custom build trigger instead, using similar logic to the above. But the UX/UI of that won’t be as clear, so you’ll have to explain to editors how it works.

(i.e. it’s basically just a CMA bulk update script that you write external to the Dato UI altogether, and all the editors would be able to do in the UI is invoke that webhook).

[chrispepper1989]

Hi Roger,

Thank you so much for this super detailed answer, its so helpful and i’m sorry that it took me so long to reply.

I am working on this today and I’m sad to say im falling at the first hurdle. I tired this:
(cant upload photo)
Code:

	uploadSidebarPanels() {
		return [
			{
				id: 'uploadSidebarPanelExample',
				label: 'Update Subtitles using AI',
				startOpen: true,
			},
		];
	},
	renderUploadSidebarPanel(sidebarPanelId: string, ctx: RenderUploadSidebarPanelCtx){
		console.log("this message does not show")
		console.log(sidebarPanelId)
		
		return render((
			<Canvas ctx={ctx}>
				<h2>Hello World</h2>
				<p>
					Why doesnt this show?
				</p>
			</Canvas>
		))
		
	},

But all I am seeing is this:
(can’t upload photo)

I dont see any console logs, and I dont see the “hello world” snippet. It feels like its not calling
renderUploadSidebarPanel

but equally if I put in invalid jsx, it does fail…

I also tried changing main so that it only had uploadSidebarPanels and renderUploadSidebarPanel in it

any ideas?

-Thanks, Chris

p.s. ill send you the photos a different way

[roger]

Hey @chrispepper1989,

No problem on the delay. Life happens

Which file is that? Can I please see the whole file, instead of just those few lines? Notably, are those functions inside a connect() call in main.tsx, like in my example?

And inside renderUploadSidebarPanel(), I thiiiiink you also don’t need to return render(), just call render() directly. If you return it, I believe it might just disappear into the void (since you’re passing it instead of running it)?

If it’s easier, feel free to share the whole repo with me (r.tuan@datocms.com).

[chrispepper1989]

So, it’s working now, and I was all set to say it was the return, as that was what seemed to fix it.

However I put it back in, and it still showed…

I also updated from

“datocms-plugin-sdk”: “^1.1.0”,
“datocms-react-ui”: “^1.1.0”,

to

“datocms-plugin-sdk”: “^2.0.9”,
“datocms-react-ui”: “^2.0.9”,

and updated
“permissions”:
to
“permissions”: [“currentUserAccessToken”]

Perhaps it was a combination of old SDK and the return??

[roger]

@chrispepper1989

Perhaps it was a combination of old SDK and the return??

Oh, it was probably just the old SDK then As long as it works now, great!