MediaPicker3 Preview Modal Not Loading Videos

[VegaMarinkovicAleksa]

Which Umbraco version are you using?

16.4.0

Bug summary

Creating a property that uses a Data Type based on Umbraco.MediaPicker3 Property Editor and uploading a video to it results in you not being able to preview the video once you click on the picked video. While testing this, I've noticed it's the same for SVGs, so it might be related to https://github.com/umbraco/umbraco-cms/issues/20596. I'm assuming it's broader than videos and SVGs as well, based on the source code.

The video is visible in the Media Library without issues (when you visit the Media Library or when you open a modal to Media Library by clicking "Open in Media Library" - both work without issues):

Specifics

This was tested in both Chrome and Edge. Both results are the same (no preview). Tested with MP4s and WebMs. The issue seems to be in this file: src/Umbraco.Web.UI.Client/src/packages/media/media/modals/image-cropper-editor/image-cropper-editor-modal.element.ts more specifically, this code:

#renderFilePreview() {
		return html`
			<div id="main">
				${when(
					this._imageCropperValue?.src,
					(path) => html`<umb-file-upload-preview .path=${path}></umb-file-upload-preview>`,
					() => this.#renderFileNotFound(),
				)}
			</div>
			<div id="actions">${this.#renderActions()}</div>
		`;
	}

I'm not versed in Lit, but I think the when directive cannot have a parameter declaration in the truthy callback (path) =>

As I've observed, this code renders an empty <umb-file-upload-preview> tag

The modal seems to be called from: src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-rich-media/input-rich-media.element.ts which seems to be called from: src/Umbraco.Web.UI.Client/src/packages/media/media/property-editors/media-picker/property-editor-ui-media-picker.element.ts

Steps to reproduce

Run a fresh install of Umbraco 16.4.0. Create a new Data Type based on Media Picker Property Editor UI (Umbraco.MediaPicker3) Create a new Document Type and add a property to it with the Data Type being the newly created Data Type ^ Create a node using the new Document Type. Add a video to the property (MP4 or WebM) by clicking on "+ Choose" and then "Upload" and selecting your video. Once you've chosen your video, go back to the Document Type and click on the "thumbnail" icon of the video. This will open up a sliding modal with the title "Select media", and a big white canvas where the preview of a media item is supposed to render.

Expected result / actual result

Expected: Clicking on non-image (Image cropper) media picked in a Data Type based on MediaPicker3 Property Editor opens their respective preview element (whether it's a custom or default preview element). Actual: Clicking on non-image (Image cropper) media picked in a Data Type based on MediaPicker3 Property Editor opens a blank canvas with an empty <umb-file-upload-preview> tag being present in the DOM.

[github-actions[bot]]

Hi there @VegaMarinkovicAleksa!

Firstly, a big thank you for raising this issue. Every piece of feedback we receive helps us to make Umbraco better.

We really appreciate your patience while we wait for our team to have a look at this but we wanted to let you know that we see this and share with you the plan for what comes next.

• We'll assess whether this issue relates to something that has already been fixed in a later version of the release that it has been raised for.
• If it's a bug, is it related to a release that we are actively supporting or is it related to a release that's in the end-of-life or security-only phase?
• We'll replicate the issue to ensure that the problem is as described.
• We'll decide whether the behavior is an issue or if the behavior is intended.

We wish we could work with everyone directly and assess your issue immediately but we're in the fortunate position of having lots of contributions to work with and only a few humans who are able to do it. We are making progress though and in the meantime, we will keep you in the loop and let you know when we have any questions.

Thanks, from your friendly Umbraco GitHub bot :robot: :slightly_smiling_face:

[bjarnef]

I think this has already been fixed for v17.1.0 https://github.com/umbraco/Umbraco-CMS/pull/20651

Can it be backported for v16.5.0 @leekelleher ?

[iOvergaard]

Just wanted to address this for posterity:

I'm not versed in Lit, but I think the when directive cannot have a parameter declaration in the truthy callback (path) => As I've observed, this code renders an empty tag

Lit's when() directive can, in fact, take a parameter into that (to avoid calling the getter twice). However, when an element renders out without being available in the browser, this is when you see the "empty" tag of . The giveaway is that we do not see a "shadow root" in the DOM explorer.

This is what #20651 addresses by adding the correct import. The image cropper utilizes the same preview mechanism as the media library.

I will backport the update to 16.5.0, thanks for noticing, @bjarnef.