async domInit()

in source/webapp/src/lib/js/videoCard.js [358:428]
65 lines of code
8 McCabe index (conditional complexity)

  async domInit(badge = false) {
    if (this.domInitialized()) {
      return;
    }
    const video = (this.proxies || []).filter(x =>
      x.type === 'video').shift();

    const original = await VideoCard.fileExists(SO0050.Ingest.Bucket, this.key);
    const proxy = (video || {}).key && await VideoCard.fileExists(SO0050.Proxy.Bucket, video.key);
    const imageUrl = this.getThumbnail();

    const actions = [];
    if (!original) {
      actions.push('not-found');
    } else if (!proxy) {
      actions.push('restore');
    } else {
      actions.push('play');
      if (!this.hasAnalyzed()) {
        actions.push('metadata');
      }
    }

    const dom = `
    <div class="col-sm-4 mt-4">
      <div class="card" id="card-${this.uuid}">
        <!-- loading icon -->
        <div
          id="indicator-${this.uuid}"
          class="spinner-grow text-light indicator collapse"
          style="animation: spinner-grow 1.2s linear infinite;"
          role="status">
          <span class="sr-only">Loading...</span>
        </div>

        <div class="overlay-container">
          <img class="card-img-top" src="${imageUrl}" alt="thumbnail">
          <div class="state-status-overlay mb-2 small pl-2 pr-2">
            ${this.domCreateIngestOverlayStatus()}
            ${this.domCreateAnalysisOverlayStatus()}
            ${this.domCreateLabelingOverlayStatus()}
          </div>
          ${this.domCreateOverlayActions(actions)}
        </div>
        <div class="card-body small">
          <h6 class="card-title text-truncate lead">${this.basename}</h6>
          <dl class="row small">
            <dt class="col-sm-3 text-truncate">Name</dt><dd class="col-sm-9 text-truncate" data-field="name">${this.basename}</dd>
            <dt class="col-sm-3 text-truncate">ID</dt><dd class="col-sm-9 text-truncate" data-field="uuid">${this.uuid}</dd>
            <dt class="col-sm-3 text-truncate">LastModified</dt><dd class="col-sm-9 text-truncate" data-field="ingestDate">${this.lastModifiedISOFormat || '--'}</dd>
          </dl>
          <div class="float-right">
            <a href="#" class="overlay-action">
              <i class="far fa-trash-alt fa-lg" style="color: #111"
                alt="Remove asset"
                data-action="remove"
                data-toggle="tooltip"
                data-placement="bottom"
                title="Remove asset and delete database records">
              </i>
            </a>
          </div>
        </div>
      </div>
    </div>
    `;

    this.element = $(dom);

    await this.domRegisterEvents();
  }