Abstract Interface: MediaItemElement

Abstract definition of a media item web component that can be used as a child of the IntegrationElement.

Examples

It is possible to create more complex media items that query an own API.


<script>
  class CustomMediaItemElement extends HTMLElement {
    get data() {
      return fetch(`https://api.example.com/media/${this.id}`)
      .then(response => response.json())
      .then((body) => ({
        id: this.id,
        provider: 'external',
        item: {
          id: this.id,
          sources: body.sources,
          duration: body.duration,
          poster: body.poster,
          title: body.title
        }
      }));
    }
  }
  window.customElements.define('custom-media-item', CustomMediaItemElement);
</script>
<glomex-integration
  integration-id="REPLACE_WITH_INTEGRATION_ID"
>
  <custom-media-item id="API_CONTENT_ID"></custom-media-item>
</glomex-integration>

The data getter can also return an array of MediaItemReference objects to define a playlist from a single element.


<script>
  class CustomPlaylistElement extends HTMLElement {
    get data() {
      return fetch(`https://api.example.com/playlist/${this.id}`)
      .then(response => response.json())
      .then((body) => body.items.map((item) => ({
        id: item.id,
        provider: 'external',
        item: {
          id: item.id,
          sources: item.sources,
          duration: item.duration,
          poster: item.poster,
          title: item.title
        }
      })));
    }
  }
  window.customElements.define('custom-playlist', CustomPlaylistElement);
</script>
<glomex-integration
  integration-id="REPLACE_WITH_INTEGRATION_ID"
>
  <custom-playlist id="API_PLAYLIST_ID"></custom-playlist>
</glomex-integration>

Extends

HTMLElement

Extended by

Properties

id

id: string

The content ID used by the provider to look up the media item. For glomex, this can be a media ID or a playlist ID. For Joyn, this is a Joyn media ID.

Attribute

Overrides

HTMLElement.id

environment?

optional environment: "stage" | "prod" = 'prod'

The environment to use for the provider.

Attribute

environment

Default Value


'prod'

Accessors

data

Get Signature

get abstract data(): MediaItemReference | MediaItemReference[] | Promise<MediaItemReference | MediaItemReference[]>

Returns

MediaItemReference | MediaItemReference[] | Promise<MediaItemReference | MediaItemReference[]>