activator-oce-exporter/test/activator/shared/src/fusion/slide/video-player/index.js

Extract Activator binder and convert it to valid OCE mono pacakge

import { html } from '@polymer/lit-element';
import { getValueObject, intersectMap, resetPlayer } from '../../utils';
import {
  applyMixins,
  ModeTrackable,
  SlideComponent,
} from '../../mixins';
import { FusionBase } from '../../base';

class FusionVideoPlayer extends applyMixins(FusionBase, [ModeTrackable, SlideComponent]) {
  static get properties() {
    return {
      src: {
        type: String,
        fieldType: 'Modal',
        value: ' ',
        prop: true,
        assetType: 'Video',
      },
      ...super.properties,
      width: {
        type: String,
        fieldType: 'Number',
        value: '600px',
        min: '300',
      },
      height: {
        type: String,
        fieldType: 'Number',
        value: '400px',
        min: '200',
      },
      autoplay: {
        type: Boolean,
        fieldType: 'Boolean',
        value: false,
        prop: true,
      },
      muted: {
        type: Boolean,
        fieldType: 'Boolean',
        value: false,
        prop: true,
      },
    };
  }

  static get options() {
    return {
      componentName: 'fusion-video-player',
      componentUIName: 'Video Player',
      componentScope: 'standard',
      componentType: 'static',
      componentCategory: 'media',
      componentDescription: 'Container for video files handling playback and states',
      componentDomain: 'slide',
      isTextEdit: false,
      isRootNested: true,
      nestedTypes: [],
      nestedComponents: [],
      defaultTemplate: '',
      resizable: 'all',
      draggable: 'xy',
      rotatable: true,
      sortable: false,
    };
  }

  update(changedProps) {
    super.update(changedProps);
    if (changedProps.has('muted') && this.video) {
      this.video.muted = this.muted;
    }
  }

  checkSizes(changedProps) {
    const properties = intersectMap(changedProps, this.constructor.sizeTriggers);
    Array.from(properties.keys()).forEach(prop => this.updateSize(prop));
  }

  updateSize(prop) {
    const minValue = this.constructor.properties[prop].min;
    const { num, unit } = getValueObject(this[prop]);
    const size = `${Math.max(num, minValue)}${unit}`;
    this.setElementProp(prop, size);
    this.setAttribute(prop, size);
  }

  setListenerType(eventType) {
    this.events.forEach((item) => {
      item.target[eventType](item.event, item.handler);
    });
  }

  triggerEvent(event) {
    this.emitCustomEvent(event.type);
  }

  firstUpdated(changedProps) {
    super.firstUpdated(changedProps);
    this.videoWrapper = this.shadowRoot.querySelector('.video-wrapper');
    this.video = this.videoWrapper.querySelector('video');
    this.events = [
      {
        target: this.video,
        event: 'play',
        handler: this.triggerEvent.bind(this),
      },
      {
        target: this.video,
        event: 'pause',
        handler: this.triggerEvent.bind(this),
      },
      {
        target: this.video,
        event: 'ended',
        handler: this.triggerEvent.bind(this),
      },
    ];
    this.setListenerType('addEventListener');
    if (this.muted) {
      this.video.muted = this.muted;
    }
  }

  connectedCallback() {
    super.connectedCallback();
    this.addEventListener('swipeleft', this.constructor.stopPropagation);
    this.addEventListener('swiperight', this.constructor.stopPropagation);
  }

  static stopPropagation(event) {
    event.stopPropagation();
  }

  disconnectedCallback() {
    this.setListenerType('removeEventListener');
  }

  stopVideoPlaying() {
    resetPlayer(this.video);
  }

  parentStateChanged(parentState) {
    super.parentStateChanged(parentState);
    this.stopVideoPlaying();
  }

  editorModeChanged(isEditMode) {
    if (isEditMode) {
      this.stopVideoPlaying();
    }
  }

  static getStyle() {
    const styleRoot = super.getStyle();
    return `
      ${styleRoot}
        .video-wrapper,
         :host video {
          height: 100%;
          width: 100%;
        }
        :host(.${ModeTrackable.EditModeClassName}) .video-wrapper {
          pointer-events: none;
        }
        :host video:focus {
          outline: none;
        }
      `;
  }

  render() {
    super.render();
    return html`
      <style>
        ${FusionVideoPlayer.getStyle()}
      </style>
      <div class='video-wrapper'>
        <video src=${this.src} controls></video>
      </div>
      ${FusionVideoPlayer.getSystemSlotTemplate()}
    `;
  }
}

export { FusionVideoPlayer };