OGraf – Open Graphics. Open Possibilities.

{
  "$schema": "https://ograf.ebu.io/v1/specification/json-schemas/graphics/schema.json",
  "id":      "my-lower-third",
  "name":    "Lower Third",
  "main":    "graphic.mjs",
  "supportsRealTime":    true,
  "supportsNonRealTime": false,
  "stepCount": 1,
  "schema": {
    "type": "object",
    "properties": {
      "name":  { "type": "string", "default": "Jane Smith" },
      "title": { "type": "string", "default": "Correspondent" }
    }
  }
}

export default class LowerThird extends HTMLElement {

  async load(data) {
    this._data = data;
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML =
      `<div class="graphic"><span id="name"></span> <span id="title"></span></div>`;
    return { status: 0 };
  }

  async playAction() {
    this.shadowRoot.querySelector('.graphic').animate(
      [{ transform: 'translateY(100%)' }, { transform: 'translateY(0)' }],
      { duration: 400, fill: 'forwards' }
    );
    return { status: 0 };
  }

  async stopAction() {
    await this.shadowRoot.querySelector('.graphic')
      .animate([{ transform: 'translateY(100%)' }], { duration: 300, fill: 'forwards' })
      .finished;
    return { status: 0 };
  }

  async updateAction(data) {
    Object.assign(this._data, data);
    this.shadowRoot.querySelector('#name').textContent  = this._data.name;
    this.shadowRoot.querySelector('#title').textContent = this._data.title;
    return { status: 0 };
  }
}