ravnur-player-public 3.4.2 → 3.4.4

package/src/extensions/backward.js

@@ -0,0 +1,45 @@
+import BaseExtension from './base';
+
+import createElement from '../utils/createElement';
+
+import popover from './helpers/popover';
+
+import createSvg, { BACKWARD } from '../svgs';
+
+const CN = 'rmp-ext-backward';
+
+export default class BackwardExtension extends BaseExtension {
+   constructor(player, state, options) {
+      super(player, state, options);
+      this.logger.debug('backward:extension:creating');
+
+      this.render();
+      this.addEvent(this.$el, 'click', this.backward.bind(this));
+
+      this.logger.debug('backward:extension:created');
+   }
+
+   render() {
+      /** @type {HTMLMediaElement} */
+      this.$el = createElement('button', { type: 'button', class: CN });
+      setTimeout(() => popover(this, { $button: this.$el, text: this.$t('backward') }) );
+      createSvg(this.$el, BACKWARD);
+   }
+
+   backward() {
+      this.player.setCurrentTime(this.player.getCurrentTime() - this.options.skipDelta);
+      this.bus.emit('heartbeatextensions');
+   }
+
+   getElement() {
+      return this.$el;
+   }
+
+   destroy() {
+      super.destroy();
+
+      const parent = this.$el.parentNode;
+      parent.removeChild(this.$el);
+      this.$el = null;
+   }
+}

package/src/extensions/base.js

@@ -0,0 +1,73 @@
+// @flow
+import Entity from '../entity';
+
+import { isNotEmpty, upperFirst, isFunction, contains } from '../utils';
+
+import BaseController from '../players/base';
+import StateEntity from '../state';
+
+import $t from '../helpers/$t';
+
+import type { Player$ExtensionOptions } from '../types/Options';
+import type { Player$Translation } from '../types/Translation';
+
+type Listener = {
+   (event: string, ...args: Array<mixed>): mixed,
+   _safe_inner? : boolean
+}
+
+export default class BaseExtension extends Entity {
+   player: BaseController
+   options: Player$ExtensionOptions
+   state: StateEntity
+   _events: string[]
+
+   constructor(player: BaseController, state: StateEntity, options: Player$ExtensionOptions, events?: string[] = []) {
+      super(options.bus, options.logger);
+      this.player = player;
+      this.options = options;
+      this.state = state;
+
+      this._events = events;
+
+      const listener: Listener = this._listener.bind(this);
+      listener._safe_inner = true; // eslint-disable-line camelcase
+
+      if (isNotEmpty(events)) {
+         // $FlowFixMe
+         this._listener = listener;
+         // $FlowFixMe
+         this.bus.on('*', listener);
+      }
+   }
+
+   $t(key: $Keys<Player$Translation>): string {
+      const i18n = this.options.i18n;
+      return $t(i18n, key);
+   }
+
+   _listener(event: string, ...args: Array<mixed>) {
+      if (contains(this._events, event)) {
+         const fncName = `on${upperFirst(event)}`;
+         // $FlowFixMe
+         const fnc = this[fncName];
+         if (isFunction(fnc)) {
+            fnc.apply(this, args);
+         }
+      }
+   }
+
+   destroy() {
+      super.destroy();
+      // $FlowFixMe
+      this.bus.off('*', this._listener);
+   }
+
+   getElement(): ?HTMLElement {
+      return null;
+   }
+
+   getOuter(): ?HTMLElement {
+      return null;
+   }
+}

package/src/extensions/bottom-next.js

@@ -0,0 +1,50 @@
+import BaseExtension from './base';
+
+import { createElement } from '../utils';
+
+import popover from './helpers/popover';
+
+import createSvg, { NEXT_TRACK } from '../svgs';
+
+const CN = 'rmp-ext-bottom-next';
+const CN_HIDDEN = `${CN}--hidden`;
+
+export default class BottomNext extends BaseExtension {
+   constructor(player, sate, options) {
+      super(player, sate, options);
+
+      this.logger.debug('bottom-next:extension:creating');
+
+      this.render();
+
+      const bus = this.options.bus;
+      this.addEvent(this.$el, 'click', () => bus.emit('nexttrack'));
+
+      this.logger.debug('bottom-next:extension:created');
+   }
+
+   render() {
+      /** @type {HTMLMediaElement} */
+      this.$el = createElement('button', { type: 'button', class: `${CN}` });
+      setTimeout(() => popover(this, { $button: this.$el, text: this.$t('next') }) );
+      createSvg(this.$el, NEXT_TRACK);
+
+      if (!this.player.options.nextTrackTitle) {
+         this.$el.classList.add(CN_HIDDEN);
+      }
+   }
+
+   getElement() {
+      return this.$el;
+   }
+
+   destroy() {
+      super.destroy();
+
+      if (!this.$el) return;
+
+      const parent = this.$el.parentNode;
+      parent.removeChild(this.$el);
+      this.$el = null;
+   }
+}

package/src/extensions/bottom-prev.js

@@ -0,0 +1,50 @@
+import BaseExtension from './base';
+
+import popover from './helpers/popover';
+
+import { createElement } from '../utils';
+
+import createSvg, { PREV_TRACK } from '../svgs';
+
+const CN = 'rmp-ext-bottom-prev';
+const CN_HIDDEN = `${CN}--hidden`;
+
+export default class BottomPrev extends BaseExtension {
+   constructor(player, sate, options) {
+      super(player, sate, options);
+
+      this.logger.debug('bottom-prev:extension:creating');
+
+      this.render();
+
+      const bus = this.options.bus;
+      this.addEvent(this.$el, 'click', () => bus.emit('prevtrack'));
+
+      this.logger.debug('bottom-prev:extension:created');
+   }
+
+   render() {
+      /** @type {HTMLMediaElement} */
+      this.$el = createElement('button', { type: 'button', class: `${CN}` });
+      setTimeout(() => popover(this, { $button: this.$el, text: this.$t('prev') }) );
+      createSvg(this.$el, PREV_TRACK);
+
+      if (!this.player.options.prevTrackTitle) {
+         this.$el.classList.add(CN_HIDDEN);
+      }
+   }
+
+   getElement() {
+      return this.$el;
+   }
+
+   destroy() {
+      super.destroy();
+
+      if (!this.$el) return;
+
+      const parent = this.$el.parentNode;
+      parent.removeChild(this.$el);
+      this.$el = null;
+   }
+}

package/src/extensions/buffering.js

@@ -0,0 +1,78 @@
+import BaseExtension from './base';
+
+import createElement from '../utils/createElement';
+
+import addClass from '../utils/addClass';
+import removeClass from '../utils/removeClass';
+
+import createSvg, { SPINNER } from '../svgs';
+
+const CN = 'rmp-ext-buffering';
+const PROCESSING_CN = `${CN}--processing`;
+
+export default class BufferingExtension extends BaseExtension {
+   _timerId
+
+   constructor(player, state, options) {
+      super(player, state, options, ['seeking', 'waiting', 'seeked', 'canplay', 'playing', 'timeupdate']);
+      this.logger.debug('buffering:extension:creating');
+
+      this.render();
+      if (!options.isMobile) {
+         this.startProcessing();
+      }
+      this.logger.debug('buffering:extension:created');
+   }
+
+   onWaiting() {
+      this.startProcessing();
+   }
+
+   onSeeking() {
+      this.startProcessing();
+   }
+
+   startProcessing() {
+      clearTimeout(this._timerId);
+      this._timerId = setTimeout(() => addClass(this.$outer, PROCESSING_CN), this.options.bufferingTimeout);
+   }
+
+   onTimeupdate() {
+      this.hideProcessing();
+   }
+
+   onSeeked() {
+      this.hideProcessing();
+   }
+
+   onCanplay() {
+      this.hideProcessing();
+   }
+
+   onPlaying() {
+      this.hideProcessing();
+   }
+
+   render() {
+      /** @type {HTMLMediaElement} */
+      this.$outer = createElement('div', { class: CN });
+      const span = createElement('span', { class: `${CN}__message` }, this.$outer);
+      createSvg(span, SPINNER, {});
+   }
+
+   getOuter() {
+      return this.$outer;
+   }
+
+   hideProcessing() {
+      clearTimeout(this._timerId);
+      removeClass(this.$outer, PROCESSING_CN);
+   }
+
+   destroy() {
+      super.destroy();
+      const parent = this.$outer.parentNode;
+      parent.removeChild(this.$outer);
+      this.$outer = null;
+   }
+}

package/src/extensions/c2pa.js

@@ -0,0 +1,350 @@
+// import BaseExtension from './base';
+
+// import { createElement } from '../utils';
+
+// import opener from './helpers/clickOpener';
+// import popover from './helpers/popover';
+
+// import createSvg, { C2PA, CHEVRON_DOWN, EXT_LINK, INFO, LOCK } from '../svgs';
+// import { ValidationResult } from '@ravnur-inc/c2pa';
+
+// const CN = 'rmp-ext-c2pa';
+// const CN_VISIBLE = `${CN}--visible`;
+// const CN_NO_DATA = `${CN}--no-data`;
+// const CN_INVALID = `${CN}--invalid`;
+// const BUTTON_CN = `${CN}__button`;
+// const SELECTOR_CN = `${CN}__selector`;
+// const SELECTOR_OPEN_CN = `${SELECTOR_CN}--open`;
+// const VIEW_MORE_CN = `${CN}__view-more`;
+// const ITEMS_WRAPPER_CN = `${CN}__items-wrapper`;
+// const ITEMS_STATUS_WRAPPER_CN = `${CN}__items-status--wrapper`;
+// const ITEMS_STATUS_CN = `${CN}__items-status`;
+// const ITEMS_STATUS_SUCCESS_CN = `${CN}__items-status--success`;
+// const ITEMS_STATUS_FAILED_CN = `${CN}__items-status--invalid`;
+// const ITEMS_STATUS_NO_DATA_CN = `${CN}__items-status--no-data`;
+// const ITEMS_STATUS_UNDEFINED = `${CN}__items-status--undefined`;
+// const ITEM_CN = `${CN}__item`;
+// const ITEM_CN_INVALID = `${ITEM_CN}--invalid`;
+// const ITEM_COLLAPSED_CN = `${CN}__item--collapsed`;
+// const ITEM_LINE_CN = `${CN}__item--line`;
+// const ITEM_TITLE_CN = `${ITEM_CN}--title`;
+// const ITEM_INFO_WRAPPER_CN = `${ITEM_CN}--info-wrapper`;
+// const ITEM_STATUS_MESSAGE_CN = `${ITEM_CN}--status-message`;
+// const ITEM_STATUS_MESSAGE_EXTENDED_CN = `${ITEM_CN}--status-message-extended`;
+// const ITEM_THUMBNAIL_CN = `${ITEM_CN}--thumbnail`;
+// const ITEM_SECTION_TITLE = `${ITEM_CN}--section-title`;
+// const ITEM_WRAPPER_CN = `${CN}__item--wrapper`;
+// const ITEM_TOGGLER_CN = `${CN}__item--toggler`;
+// const ITEM_TOGGLER_OPENED_CN = `${CN}__item--toggler-opened`;
+// const ITEM_DETAILS_CN = `${CN}__item-details`;
+// const ITEM_DETAILS_VISIBLE_CN = `${CN}__item-details-visible`;
+// const ITEM_DETAILS_ISSUER_ICON_CN = `${ITEM_DETAILS_CN}--icon`;
+// const ITEM_DETAILS_ISSUER_WRAPPER_CN = `${ITEM_DETAILS_CN}--wrapper`;
+// const ITEM_DETAILS_ISSUER_CN = `${ITEM_DETAILS_CN}--issuer`;
+// const ITEM_DETAILS_ISSUER_TITLE_CN = `${ITEM_DETAILS_CN}--issuer-title`;
+// const NO_DATA_MESSAGE_CN = `${CN}__no-data-message`;
+// const NO_DATA_MESSAGE_WRAPPER_CN = `${CN}__no-data-message-wrapper`;
+
+// const LEARN_MORE_LINK = 'https://c2pa.org/';
+
+// // FIXME: RMP-2900 Temprorary hardcode for demo purposes, will be removed later
+// const ravnurLogo = () => {
+//    const pattern = `pattern-${Math.random().toString(36)}`;
+
+//    return `
+//    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+//        <rect width="24" height="24" fill="url(#${pattern})"/>
+//        <defs>
+//            <pattern id="${pattern}" patternContentUnits="objectBoundingBox" width="1" height="1">
+//                <use xlink:href="#image0_89_4522" transform="scale(0.00195312)"/>
+//            </pattern>
+//            <image id="image0_89_4522" width="512" height="512" xlink:href="data:image/png;base64,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"/>
+//        </defs>
+//    </svg>
+//    `;
+// };
+
+// // FIXME: RMP-2900 Temprorary hardcode for demo purposes, will be removed later
+// const micrasoftLogo = () => {
+//    const pattern = `pattern-${Math.random().toString(36)}`;
+
+//    return `
+//    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+//        <rect width="24" height="24" fill="url(#${pattern})"/>
+//        <defs>
+//            <pattern id="${pattern}" patternContentUnits="objectBoundingBox" width="1" height="1">
+//                <use xlink:href="#image0_89_4532" transform="scale(0.00357143)"/>
+//            </pattern>
+//            <image id="image0_89_4532" width="280" height="280" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAARgAAAEYCAYAAACHjumMAAAACXBIWXMAAA7EAAAOxAGVKw4bAAADWUlEQVR42u3coW7TURyG4bdkmsANTOwGtjuYG5YEi9tdzBDuYRJJkA0WDBIzySyiQTYpIYiKZiC4AHaalGSH5/Ffmvxy8rp/CwAAAAAAAAAAAAAAAODvFqODH89PnlRnTje1bXXz+P3X3X0Hrz52Uh073dTWry/6MjI42uNHzqpPbj21VXVafR/YXFZXTje1ZfViZPDIzYBDERhAYACBARAYQGAAgQEQGEBgAIEBEBhAYACBARAYQGAAgQEQGEBgAIEBEBhAYACBARAYQGAAgQEQGEBgAIEBEBhAYAAEBhAYQGAABAYQGEBgAAQGEBhAYAAEBhAYQGAABAYQGEBgAAQGEBhAYAAEBhAYQGAABAYQGEBgAAQGEBhAYAAEBhAYAIEBBAYQGACBAQQGEBgAgQEEBhAYAIEBBAYQGACBAQQGEBgAgQEEBhAYAIEBBAYQGACBAQQGEBgAgQEEBhAYAIEBBAZAYACBAQQGQGAAgQEEBkBgAIEBBAZAYACBAQQGQGAAgQEEBkBgAIEBBAZAYACBAQQGQGAAgQEEBkBgAIEBBAZAYACBARAYQGCAh+loj822Wjnd1L5Vd4ObjXcxvfW/CMxNderWU7urfg5urqs3Tje1nRMAAAAAAAAAAAAAAMB/bTG8eLs5qS6dbmqb6rqXT7f3Hfz60EV17nRTu108693IYJ+PHY+rK7ee2qo/Hy5uBzbn3sX0ljUWGP8HAxyMwAACAwgMgMAAAgMIDIDAAAIDCAyAwAACAwgMgMAAAgMIDIDAAAIDCAyAwAACAwgMgMAAAgMIDIDAAAIDCAyAwAACAyAwgMAAAgMgMIDAAAIDIDCAwAACAyAwgMAAAgMgMIDAAAIDIDCAwAACAyAwgMAAAgMgMIDAAAIDIDCAwAACAyAwgMAACAwgMIDAAAgMIDCAwAAIDCAwgMAACAwgMIDAAAgMIDCAwAAIDCAwgMAACAwgMIDAAAgMIDCAwAAIDCAwgMAACAwgMAACAwgMIDAAAgMIDCAwAAIDCAwgMAACAwgMIDAAAgMIDCAwAAIDCAwgMAACAwgMIDAAAgMIDCAwAAIDCAwgMAACAwgMgMAAAgM8TEd7bNbV0ummtq52g5tb72J6n50AAAAAAAAAAAAAAAAAOITfItIwOtIh4WoAAAAASUVORK5CYII="/>
+//        </defs>
+//    </svg>
+//    `;
+// };
+
+// export default class C2PAExtension extends BaseExtension {
+//    constructor(player, state, options) {
+//       super(player, state, options, ['c2painit', 'c2pafragment', 'c2paexception']);
+//       this.logger.debug('c2pa:extension:creating');
+
+//       this.render();
+//       this.init();
+//    }
+
+//    render() {
+//       this.$el = createElement('div', { class: CN });
+//       this.$button = createElement('button', { type: 'button', class: BUTTON_CN }, this.$el);
+//       this.$selector = createElement('div', { class: SELECTOR_CN }, this.$el);
+//       this.$statusWrapper = createElement('div', { class: ITEMS_STATUS_WRAPPER_CN }, this.$selector);
+//       this.$itemsWrapper = createElement('div', { class: `${ITEMS_WRAPPER_CN} tab-content` }, this.$selector);
+
+//       createSvg(this.$button, C2PA);
+//       this._renderViewMore();
+//    }
+
+//    init() {
+//       const $button = this.$button;
+//       const $selector = this.$selector;
+//       const reposition = false;
+//       const closeOnClick = false;
+
+//       opener(this, {
+//          $button,
+//          $selector,
+//          SELECTOR_OPEN_CN,
+//          reposition,
+//          closeOnClick,
+//          firstFocusItemSelector: `.${ITEM_CN}`
+//       });
+
+//       popover(this, { $button, text: this.$t('c2pa') });
+//    }
+
+//    _renderItem(item, collapsed) {
+//       const $item = createElement(
+//          'div',
+//          { class: `${ITEM_CN} ${item.isValid ? '' : ITEM_CN_INVALID}` },
+//          this.$itemsWrapper
+//       );
+
+//       // Using template because there are too many tags and nestings
+//       $item.innerHTML = this.itemTemplate(item, collapsed);
+//       const toggleButton = $item.querySelector(`.${ITEM_TOGGLER_CN}`);
+
+//       if (toggleButton) {
+//          this._attachClickEvent(toggleButton);
+//       }
+//    }
+
+//    _renderStatus(status = null) {
+//       const statusClassess = {
+//          [ValidationResult.Complete]: ITEMS_STATUS_SUCCESS_CN,
+//          [ValidationResult.Failed]: ITEMS_STATUS_FAILED_CN,
+//          [ValidationResult.NoData]: ITEMS_STATUS_NO_DATA_CN,
+//          [null]: ITEMS_STATUS_UNDEFINED
+//       };
+
+//       const statusValues = {
+//          [ValidationResult.Complete]: this.$t('c2pa-status-valid'),
+//          [ValidationResult.Failed]: this.$t('c2pa-status-invalid'),
+//          [ValidationResult.NoData]: this.$t('c2pa-status-incomplete'),
+//          [null]: this.$t('c2pa-status-unknown')
+//       };
+
+//       this.$statusWrapper.innerText = this.$t('c2pa-video-credentials-status');
+
+//       const $status = createElement(
+//          'div',
+//          { class: `${ITEMS_STATUS_CN} ${statusClassess[status]}` },
+//          this.$statusWrapper
+//       );
+
+//       $status.innerText = statusValues[status];
+
+//       this.$el.dataset.status = status;
+
+//       if (status === ValidationResult.Failed) {
+//          this.$el.classList.add(CN_INVALID);
+//       }
+
+//       if (status === ValidationResult.NoData) {
+//          this.$el.classList.add(CN_NO_DATA);
+//       }
+//    }
+
+//    _renderViewMore() {
+//       const $button = createElement('a', {
+//          class: VIEW_MORE_CN,
+//          href: LEARN_MORE_LINK,
+//          target: '_blank'
+//       }, this.$selector);
+//       $button.innerText = this.$t('view-more');
+//       createSvg($button, EXT_LINK, { width: 13, height: 13 });
+//    }
+
+//    _renderInfoMessage(message) {
+//       this.$itemsWrapper.innerHTML = '';
+//       const $messageWrapper = createElement('div', { class: NO_DATA_MESSAGE_WRAPPER_CN }, this.$itemsWrapper);
+//       createSvg($messageWrapper, INFO, { width: 24, height: 24 });
+
+//       const $message = createElement('div', { class: NO_DATA_MESSAGE_CN }, $messageWrapper);
+//       $message.innerText = message;
+//    }
+
+//    _attachClickEvent(toggler) {
+//       toggler.addEventListener('click', (e) => {
+//          e.preventDefault();
+
+//          this.handleClick(toggler);
+//       });
+//    }
+
+//    handleClick(toggler) {
+//       const parent = toggler.parentNode;
+//       const detailsWrapper = parent.querySelector(`.${ITEM_INFO_WRAPPER_CN}`);
+//       detailsWrapper.classList.toggle(ITEM_DETAILS_VISIBLE_CN);
+//       toggler.classList.toggle(ITEM_TOGGLER_OPENED_CN);
+//    }
+
+//    getOuter() {
+//       return this.$el;
+//    }
+
+//    onC2painit({ status, data }) {
+//       // // Last track was invalid, stop re-rendering
+//       if (this.$el.dataset.status && this.$el.dataset.status !== ValidationResult.Complete) {
+//          return;
+//       }
+
+//       this.$itemsWrapper.innerHTML = '';
+
+//       this.$el.classList.add(CN_VISIBLE);
+//       this._renderStatus(status);
+
+//       if (status === ValidationResult.NoData) {
+//          this._renderInfoMessage(this.$t('c2pa-no-data-message'));
+
+//          return;
+//       }
+
+//       try {
+//          if (data.length > 1) {
+//             for (let i = 0; i < data.length; i++) {
+//                this._renderItem(data[i], true);
+//             }
+//          } else {
+//             this._renderItem(data[0]);
+//          }
+//       } catch (e) {
+//          console.error(e);
+//       }
+//    }
+
+//    onC2pafragment(fragment) {
+//       if (!fragment.valid) {
+//          const $message = document.querySelector(`.${ITEM_STATUS_MESSAGE_CN}`);
+//          const $icon = document.querySelector(`.${ITEM_DETAILS_ISSUER_ICON_CN}`);
+//          const infoSvg = createSvg(document.createElement('div'), INFO, { width: 25, height: 25 });
+
+//          $message.innerText = this.$t('c2pa-signature-invalid');
+//          $icon.innerHTML = infoSvg.outerHTML;
+//          this.$statusWrapper.innerHTML = '';
+//          this._renderStatus(ValidationResult.Failed);
+//       }
+//    }
+
+//    onC2paexception() {
+//       this._renderStatus();
+//       this._renderInfoMessage(this.$t('c2pa-exception-subtitle'));
+//    }
+
+//    destroy() {
+//       super.destroy();
+
+//       const parent = this.$el.parentNode;
+
+//       parent.removeChild(this.$el);
+
+//       this.$el = null;
+//       this.$button = null;
+//       this.$selector = null;
+//    }
+
+//    encodedByTemplate(item) {
+//       return `
+//       <div>
+//          <div class="${ITEM_SECTION_TITLE}">${this.$t('c2pa-encoded-by')}</div>
+//          <div class="${ITEM_WRAPPER_CN}">
+//          <div class="${ITEM_THUMBNAIL_CN}">${micrasoftLogo()} </div>
+//          <div class="${ITEM_TITLE_CN}">${item.encoder[0].name}</div>
+//          </div>
+//       </div>
+//       `;
+//    }
+
+//    signerDetailsTemplate(item, statusSVG) {
+//       return `
+//       <div>
+//          <div class="${ITEM_DETAILS_ISSUER_ICON_CN}">${statusSVG.outerHTML}</div>
+//          <div class="${ITEM_DETAILS_ISSUER_WRAPPER_CN}">
+//             <div class="${ITEM_DETAILS_ISSUER_CN}">
+//                <div class="${ITEM_DETAILS_ISSUER_TITLE_CN}">${this.$t('c2pa-issued-to')}</div>
+//                <div>${item.signer}</div>
+//             </div>
+//             <div class="${ITEM_DETAILS_ISSUER_CN}">
+//                <div class="${ITEM_DETAILS_ISSUER_TITLE_CN}">${this.$t('c2pa-issued-by')}</div>
+//                <div>${item.issuer}</div>
+//             </div>
+//          </div>
+//       </div>
+//       `;
+//    }
+
+//    itemTemplate(item, collapsed = false) {
+//       let statusMessage = this.$t('c2pa-signature-valid');
+//       let statusMessageExtended = this.$t('c2pa-signature-valid-extended');
+//       // const companyPlaceholderSvg = createSvg(document.createElement('div'), COMPANY_PLACEHOLDER);
+//       const caretSvg = createSvg(document.createElement('div'), CHEVRON_DOWN, { height: 25, width: 25 });
+//       let statusSVG = createSvg(document.createElement('div'), LOCK, { width: 25, height: 25 });
+
+//       if (!item.isValid) {
+//          statusMessage = this.$t('c2pa-signature-invalid');
+//          statusMessageExtended = this.$t('c2pa-signature-invalid');
+//          statusSVG = createSvg(document.createElement('div'), INFO, { width: 25, height: 25 });
+//          this._renderStatus(ValidationResult.Failed);
+//       }
+
+//       if (!item.encoder || !item.signer) {
+//          return `
+//          <div class="${collapsed ? ITEM_COLLAPSED_CN : ''}" tabindex="0">
+//          <div class="${ITEM_WRAPPER_CN}">
+//            <div class="${ITEM_THUMBNAIL_CN}">${statusSVG.outerHTML}</div>
+//            <div class="${ITEM_INFO_WRAPPER_CN}">
+//                <div class="${ITEM_STATUS_MESSAGE_CN}">${statusMessage}</div>
+//            </div>
+//          </div>
+//        </div>
+//        `;
+//       }
+
+//       return `
+//       <div class="${collapsed ? ITEM_COLLAPSED_CN : ''}" tabindex="0">
+//       ${collapsed ? `<div class="${ITEM_LINE_CN}"></div>` : ''}
+//       ${!collapsed ? `<div class="${ITEM_SECTION_TITLE}">${this.$t('c2pa-video-owner')}</div>` : ''}
+//       <div class="${ITEM_WRAPPER_CN}">
+//         <div class="${ITEM_THUMBNAIL_CN}">${ravnurLogo()}</div>
+//         <div class="${ITEM_INFO_WRAPPER_CN}">
+//             <div class="${ITEM_TITLE_CN}">${item.signer}</div>
+//             <div class="${ITEM_STATUS_MESSAGE_CN}">${statusMessage}</div>
+//             <div class="${ITEM_STATUS_MESSAGE_EXTENDED_CN}">${statusMessageExtended}</div>
+//             <div class="${ITEM_DETAILS_CN}">
+//                ${this.signerDetailsTemplate(item, statusSVG)}
+//                ${collapsed ? this.encodedByTemplate(item) : ''}
+//             </div>
+//         </div>
+//         <button class="${ITEM_TOGGLER_CN}">${caretSvg.outerHTML}</button>
+//       </div>
+//       ${!collapsed ? this.encodedByTemplate(item) : ''}
+//     </div>
+//     `;
+//    }
+// }