What's wrong with the media section?

Let's take a look...

What about the media picker?

Let's take a look...

The fundamental issue:

Why is the UI almost identical?

Media Picker

What are editors trying to do when using a media picker?

Uploading a new media item...

Some images we'll want to reuse, but often this image is something we'll just want for this single piece of content and that is it.
 

In that case does it need to live in the media library?

Select an existing item

This is very much based on the current UI.

But let's make it a bit more information rich

Media Picker 2.0

Selecting an existing item from the media library...

This is pretty much the current UI however could we make that media easier to find

Add meta data

Media Section

What are editors trying to do when using the media section?

Media Section v2.0

Is it possible to do this?

When I talked about this in 2019 it wasn't really possible to do this. In my talk about media AI, I ended up hiding the existing media section and making my own. I created a new data type with it's own picker to replace the standard media picker.

Now Umbraco since v14 has extensions points that will let your replace core sections of the Backoffice UI

Some caveats

I'm new to v14+, Typescript, Lit etc.

I'm going to try and show you how I went about figuring how to do this, what worked, which resources are useful and where the problems lie.

I wanted this to be a demonstration of learning how to do this, hopefully this will smooth the learning curve for others

The approach

I had planned to spend 5 full days to learn what I needed to do and get as far along as I could.

Whatever I managed to build at the end of those days is what I'm going to show today.

Step 1 - Setup

Read the getting started docs, Umbraco and Lit

Setup dev environment, using VS Code

I always had at least 4 tabs open at each step:

1. The Umbraco documentation
2. The UI documentation
3. The Umbraco source code
4. An Umbraco site running my code

Step 2 - Make my first modal

The first thing I did was create an empty modal.

Keeping it simple, I just want to prove that we can replace the media picker modal.

The only UI it would have was some tabs as they were one of the key differences between the existing modal and mine.

Step 2 - Adding Tabs

How do tabs even work?

I could find them in the UI documentation

Coming from an Angular background, this didn't work as expected. I was expecting passing in models, binding etc

Learning #1

The UI is very bare bones with focus on L&F rather than function

There are differences between the 2 UI documentation sites

https://apidocs.umbraco.com/v15/ui

vs
https://uui.umbraco.com/

(UUI is latest, apidocs lets you pick specific versions of Umbraco)

I ended up looking at the source code for existing UI to figure this out

Try and replace the existing modal

Looking at documentation, we should be able to overwrite existing elements in the manifest.

This doesn't work...

For some system wide modals, you'll have to unregister the existing one and then add your own

Thanks Richard Ockerby for sharing your solution

Success

Step 4 - Add functionality

Now we've proven we can replace the existing modal, can we extend, or pull code out of the Umbraco version.

Wasn't able to extend the class, so I started copying code in

This doesn't work as expected, some keys things in the @umbraco-cms/backoffice package are not exposed, or cause issues.

Step 4 - Add functionality

I ended up copying the MediaTreeRepository and all it's dependents into my package, this is not ideal.

I also notice that while contexts in the constructor compile, but have errors in the console when running Umbraco. For now I commented them out. fairly certain they're probably doing something import!

Step 5 - Refine the modal

Now I wanted to try and refine the UI.

First off I wanted to try and display a media tree with just folders to allow you to pick where you were saving your media.

The current media tree doesn't support that, but perhaps it does in the API.

Step 5 - Refine the modal

There was a promising looking parameter: dataTypeId
But it did not do what I expected

Step 5 - Refine the modal

The current delivery API is just doing exactly what the Backoffice needs and no more, which is understandable. But wouldn't it be nice to have options to extend, filter, override or build on top of what is there.

I started to write my own API but thought I'd come back to this. 

Step 6 - Add folder previews

My plan to show previews was to develop my own custom Lit element.

This element would be used when the media item had children (essentially it was a folder). I wanted it to lazy load so it makes a request once the top level stuff had loaded in.

I used the current umb-imaging-thumbnail component as an example.

Step 6 - Add folder previews

This I modifed to load in the children, and then render each child as a thumbnail.

The downside of this is it making 1 additional requests (+1 extra for each image) for each media item that has children. But I'd rather do that then wait for it all to build up before rendering

Step 7 - Debug

Got absolutely stuck trying to get MediaService to work, query parameters were not being set over no matter what I did.

I tried copying the media repository, I tried loading it via UmbExtensionManifestInitializer, I tried pulling out my hair

In desperation I upgraded Umbraco to v16 (which had just been released). Suddenly it all starts working

Success

In conclusion

Yes it can be done, but in the current state of things, it might take longer than you expect.

Maybe getting a proof of concept running in a week was ambitious.

You'll also have to be willing to make compromises, duplicate code and spend some time being frustrated.

How was the experience?

Mostly one of frustration, but some highs along with the lows. 

I'm actually pretty pleased with what I have, but expected to be much further along.

I'm sure some of this is down to my lack of experience with the tech stack being used, however I'm an experienced dev, with contacts and intimate knowledge of Umbraco, would be much harder for a less experienced, less connected developer.

What can we do?

Let's reduce the learning curve

Umbraco's focus has been on getting feature parity with v13 in the new UI.

I'm looking for collaborators

I would love to get some of these ideas into Umbraco, either as a package or some bits into core.

Would you like to help?
Speak to me, or get in touch after Codegarden!