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 });