Home Page Metadata Section Example

This example displays a preview of the currently selected image or video.

class PreviewPanel extends HTMLElement {
  constructor() {
    super();

    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        :host {
          margin: 0;
          padding: 0;
          width: 100%
        }
        h1 {
          color: #9c9c9c;
          font-size: 24px;
          font-weight: 300;
        }
        img, video {
          max-width: 100%;
        }
      </style>

      <h1>Preview</h1>
      <div id="preview-wrapper"></div>
    `;

    PreviewPanelProto.attachedCallback = function () {
      this.cueInterface.homePanel.addFocusedResultWatcher(function (result) {
        this.focusedResultChanged(result);
      }.bind(this));
  };

  PreviewPanelProto.blobUrl = undefined;

  PreviewPanelProto.focusedResultChanged = function (result) {
    if (this.blobUrl) {
      window.URL.revokeObjectURL(this.blobUrl);
    }
    var hide = true;
    if ( result && result.link.mimeType) {
      hide = !_.includes(['x-ece/picture', 'x-ece/video'], result.link.mimeType.format());
    }
    this.info.hidden = hide;
    if (!hide) {
      this.fetchPreview(result);
      }

      connectedCallback() {
        this.cueInterface.homePanel.addFocusedResultWatcher((result, content) => {
          this.focusedResultChanged(result, content);
        });
      }

    PreviewPanelProto.getBinaryLinkFromDocument = function (document) {
      var resolver = function (namespace) {
        if (namespace === 'atom') {
          return 'http://www.w3.org/2005/Atom';
    }
  };

  return document
          .evaluate('./atom:entry/atom:link[@rel="edit-media"]', document, resolver).iterateNext()
          .attributes.getNamedItem('href').value;
    };

    PreviewPanelProto.showPreview = function(binaryLink, mimeType) {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', binaryLink, true);
    xhr.setRequestHeader('Authorization', this.cueInterface.escenic.credentials);
    xhr.responseType = 'blob';
    xhr.onload = function () {
      if (xhr.readyState === 4) {
        if (xhr.status === 200) {
          this.blobUrl = window.URL.createObjectURL(xhr.response);
          this.updatePreview(mimeType);
        }
        else {
          console.error(xhr.statusText);
        }
      }
    }.bind(this);

    xhr.onerror = function () {
      console.error(xhr.statusText);
    };

    xhr.send(null);
  };

  PreviewPanelProto.updatePreview = function(mimeType) {
    var wrapper = panelShadowRoot.querySelector('#preview-wrapper');
    if (mimeType === 'x-ece/video') {
      wrapper.innerHTML = '<video controls preload="metadata" src="' + this.blobUrl + '">';
    }
    else {
      wrapper.innerHTML = '<img src="' + this.blobUrl + '">';
    }
  };

document.registerElement('content-preview', {
      prototype: PreviewPanelProto
    });
/**
 * Creating the icon (if required)
 */
var PreviewIconProto = Object.create(HTMLElement.prototype);
  var iconShadowRoot;

    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        :host {
          margin: 0;
          display: block;
        }
        .icon:before {
          font: 16px 'cf';
          font-style: normal;
          font-weight: normal;
          color: #444444;
          content: '\\e879';
          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale;
        }
        .icon.active:before {
          color: #09ab00;
        }
      </style>
      <span class="icon"></span>
    `;
  }

  PreviewIconProto.attachedCallback = function() {
    this.activeStateChanged(this.cueInterface.isActive());
    this.cueInterface.addActiveWatcher(function (active) {
      this.activeStateChanged(active);
    }.bind(this));
  };

  PreviewIconProto.activeStateChanged = function(active) {
    var icon = iconShadowRoot.querySelector('.icon');
    if (active) {
      $(icon).addClass('active');
    }
    else {
      $(icon).removeClass('active');
    }
  };

document.registerElement('content-preview-icon', {
      prototype: PreviewIconProto
    });