How to get media from mediaKey inside block view using v17

Questions
1

I am creating a block view wich has to render either a iframe video or a video mp4 stored in media.

I have achieved the first case, the iframe, but for a mp4 i get the mediaKey but dont know how to get the other properties, like the name and the url.

I would like to know how to do it and please point me to the docs section where it explains how to query data inside block views or property editors, i cant find it!

This is my code:

import { html } from “@umbraco-cms/backoffice/external/lit”;

import { customElement } from “@umbraco-cms/backoffice/external/lit”;

import { BaseBlockView } from “../shared/base-block.js”;

import { sharedStyles } from “../shared/styles.js”;

@customElement(“video-block-view”)

export class VideoBlockView extends BaseBlockView {

render() {

const video = this.content?.video;

const videoMedia = this.content?.videoMedia;

console.log("videoMedia", videoMedia, this.content);



return html\`

  <div class="container ${this.isHidden() ? "--oculto" : ""}">

    ${this.renderBlockLabel("Video")}



    <div class="texto-content">

      ${video

        ? this.renderHtml(video)

        : videoMedia?.length > 0

          ? \`<p>mediaKey: ${videoMedia\[0\].mediaKey}</p>\`

          : html\`<p><em>Sin contenido de video</em></p>\`}

    </div>

    ${this.renderHiddenIndicator()}

  </div>

\`;

}

static styles = [sharedStyles];

}

export default VideoBlockView;

2

Hey tito :waving_hand:

In v17 you need to resolve the mediaKey through the Media repositories. Inside a block view you don’t get the full media item automatically — only the key — so you must fetch it.

Add these imports

import { state } from '@umbraco-cms/backoffice/external/lit';
import { UmbRepositoryItemsManager } from '@umbraco-cms/backoffice/repository';
import {
  UmbMediaUrlRepository,
  UMB_MEDIA_ITEM_REPOSITORY_ALIAS,
  type UmbMediaItemModel
} from '@umbraco-cms/backoffice/media';

Add these properties to your class

#mediaItemManager = new UmbRepositoryItemsManager(
  this,
  UMB_MEDIA_ITEM_REPOSITORY_ALIAS
);

#mediaUrlRepository = new UmbMediaUrlRepository(this);

@state()
private _mediaData?: UmbMediaItemModel;

@state()
private _mediaUrl?: string;

In your constructor

constructor() {
  super();

  // Observe media item data changes
  this.observe(this.#mediaItemManager.items, (items) => {
    const videoMedia = this.content?.videoMedia;

    if (videoMedia?.length > 0) {
      this._mediaData = items.find(
        item => item.unique === videoMedia[0].mediaKey
      );
    }
  });
}

When videoMedia changes (lifecycle method)

You can call this when content updates (for example inside updated()):

protected updated() {
  const videoMedia = this.content?.videoMedia;

  if (!videoMedia?.length) return;

  const mediaKey = videoMedia[0].mediaKey;

  // Load media item (name etc.)
  this.#mediaItemManager.setUniques([mediaKey]);

  // Load media URL
  this.#mediaUrlRepository
    .requestItems([mediaKey])
    .then(({ data }) => {
      this._mediaUrl = data?.[0]?.url;
    });
}

In your render method

return html`
  ${this.renderBlockLabel("Video")}

  <div class="texto-content">
    ${video
      ? this.renderHtml(video)
      : this._mediaData && this._mediaUrl
        ? html`
            <video controls>
              <source src=${this._mediaUrl} type="video/mp4" />
              ${this._mediaData.name}
            </video>
          `
        : html`<p>Loading media...</p>`}
  </div>

  ${this.renderHiddenIndicator()}
`;

let me know if that works?

also check the official example here:
src/Umbraco.Web.UI.Client/examples/block-custom-view/block-custom-view.ts

3

That worked! thank you!
And to query content for instance from a content picker how could i get the content key and query like you did on the media section?
Are there any examples of this in the documentation?

1 Like
4

check this comment from @Luuk maybe theres links that might help u

if this helps, pls mark it as solution for future references

cheers,

Edit: if that doesnt help and u need an example let me know .

5

Thanks, from your link i get using UmbDocumentItemRepository and requestItems method will do the trick, thanks!

1 Like
6

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.