f2a07a90-5e21-49ea-b1ba-1fad9adc6114

Committed 02 Apr 2024 02:40PM UTC coverage: 96.528% (-0.03%) from 96.561%

Build # f2a07a90-5e21-49ea-b1ba-1fad9adc6114

Build Type

push

circleci

Committed by

web-flow

Commit Message

Merge pull request #331 from Rise-Vision/feature/issue-308

Issue 308

Run Details

1148 of 1220 branches covered (94.1%)

Branch coverage included in aggregate %.

17 of 20 new or added lines in 2 files covered. (85.0%)

2 existing lines in 1 file now uncovered.

11945 of 12344 relevant lines covered (96.77%)

1.81 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

89.69

/src/rise-folder/rise-folder.js

/* eslint-disable class-methods-use-this */
/* eslint-disable no-console */

import { html, css } from 'lit';
import { styleMap } from 'lit/directives/style-map.js';
import { RiseElement } from '../common/rise-element.js';
import { WatchStorageMixin } from '../common/watch-storage-mixin.js';
import { version } from '../version.js';
import { Schedule } from '../common/playlist/schedule.js';
import { ScheduleItemImage } from './schedule-item-image.js';
import { ScheduleItemVideo } from './schedule-item-video.js';
import { ReusableElements } from './reusable-elements.js';
import { RiseStorage } from '../common/rise-storage.js';
import { GooglePhotos } from './google-photos.js';
import {} from '../common/rise-lit-video-player.js';
import { Utils } from '../common/utils.js';

const Types = Object.freeze({
  STORAGE_FOLDER: 'storage-folder',
  STORAGE_FILE: 'storage-file',
  GOOGLE_PHOTOS: 'google-photos',
  GOOGLE_PHOTOS_ALBUM: 'google-photos-album',
});

const MAXIMUM_TIME_FOR_FIRST_DOWNLOAD = 5 * 1000;

export default class RiseFolder extends WatchStorageMixin(RiseElement) {
  render() {
    return html`${this._template()}`;
  }

  static get styles() {
    return css`
      :host {
        display: block;
        overflow: hidden;
        position: relative;
        width: 100%;
        height: 100%;
      }

      #previewPlaceholder {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        text-align: center;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: #f2f2f2;
        visibility: hidden;
      }
      #previewPlaceholder svg {
        height: 120px;
        width: 100%;
      }
      #previewPlaceholder h1 {
        color: #020620;
        font-size: 48px;
        text-transform: initial;
        font-family: Helvetica, Arial, sans-serif;
      }
    `;
  }

  static get properties() {
    return {
      account: { type: String },
      duration: { type: Number },
      environment: { type: String },
      source: { type: String },
      transitionType: { type: String, attribute: 'transition-type' },
      type: { type: String },
      volume: { type: Number },
    };
  }

  constructor() {
    super();

    this.version = version;

    this.account = null;
    this.duration = 10;
    this.environment = 'prod';
    this.source = '';
    this.transitionType = 'normal';
    this.type = Types.STORAGE_FOLDER; // set to STORAGE_FOLDER for backward compatibility
    this.volume = 0;
    this.enableVideoInPreview = true; // TODO: in future this could be added as property populated via attribute data if we surface toggle to user

    this._initialStart = true;
    this._imageElements = null;
    this._videoElements = null;
    this._previewPlaceholderElements = null;
    this._watchedFilesChanged = false;
    this._firstDownloadTimer = null;
    this._maximumTimeForFirstDownload = MAXIMUM_TIME_FOR_FIRST_DOWNLOAD;
    this._lastWatchPath = this.source;

    this.schedule = new Schedule();
    this.schedule.doneListener = () => this._onScheduleDone();
    this.schedule.logEvent = (...args) => this._logEvent(...args);
    this.riseStorage = new RiseStorage();

    this.googlePhotos = new GooglePhotos();
    this.googlePhotos.log = this.log;
    this.googlePhotos.onChange = this.googlePhotosUpdateCallback.bind(this);
    this.googlePhotos.onError = this.googlePhotosErrorCallback.bind(this);

    this._videoPlaylistStuck = this._videoPlaylistStuck.bind(this);
    this._handleFirstDownloadTimer = this._handleFirstDownloadTimer.bind(this);
  }

  _template() {
    const divStyles = {
      overflow: 'hidden',
      position: 'absolute',
      width: '100%',
      height: '100%',
      top: '0px',
      left: '0px',
    };
    const imgStyles = {
      overflow: 'hidden',
      position: 'absolute',
      'object-fit': 'contain',
      width: '100%',
      height: '100%',
      top: '0px',
      left: '0px',
      visibility: 'hidden',
    };
    const videoStyles = {
      visibility: 'hidden',
      display: 'block',
    };

    return html`
      <div id="container" style=${styleMap(divStyles)}>
        <img
          id="img1"
          alt=""
          @load="${this._imgOnLoad}"
          @error="${this._imgOnError}"
          style=${styleMap(imgStyles)}
        />
        <img
          id="img2"
          alt=""
          @load="${this._imgOnLoad}"
          @error="${this._imgOnError}"
          style=${styleMap(imgStyles)}
        />
        <div id="previewPlaceholder">
          <svg
            viewBox="0 0 64 60"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            xmlns:xlink="http://www.w3.org/1999/xlink"
          >
            <g
              id="1.-Atoms"
              stroke="none"
              stroke-width="1"
              fill="none"
              fill-rule="evenodd"
            >
              <g
                id="Desktop/Icons"
                transform="translate(-423.000000, -1232.000000)"
                fill="#020620"
                fill-rule="nonzero"
              >
                <g
                  id="icon-rise-video"
                  transform="translate(423.000000, 1232.000000)"
                >
                  <path
                    d="M64,19.7727273 C64,19.0196117 63.4030463,18.4090909 62.6666667,18.4090909 L1.33333333,18.4090909 C0.596953667,18.4090909 9.01805001e-17,19.0196117 0,19.7727273 L0,52.5 C4.50902501e-16,56.2655778 2.98476833,59.3181818 6.66666667,59.3181818 L57.3333333,59.3181818 C59.1014433,59.3181818 60.797136,58.5998397 62.0473785,57.3211826 C63.2976211,56.0425255 64,54.3082942 64,52.5 L64,19.7727273 Z M43.2933333,35.7763636 C44.5236453,36.2850319 45.3290106,37.5064348 45.3290106,38.8636364 C45.3290106,40.2208379 44.5236453,41.4422408 43.2933333,41.9509091 L25.624,49.5218182 C24.6842732,49.9373961 23.603872,49.8468676 22.7428158,49.2803992 C21.8817596,48.7139309 21.3532247,47.7459787 21.3333333,46.6990909 L21.3333333,31.0281818 C21.3519076,29.9807367 21.8801734,29.0118031 22.741667,28.445047 C23.6031606,27.8782909 24.6843234,27.7884198 25.624,28.2054545 L43.2933333,35.7763636 Z"
                    id="Shape"
                  ></path>
                  <path
                    d="M52.168,1.84636364 C52.3588259,1.65169491 52.4162661,1.35866279 52.3135557,1.10380982 C52.2108452,0.848956855 51.9681931,0.68242737 51.6986667,0.681818182 L41.6,0.681818182 C41.5272325,0.682447068 41.4575055,0.711753263 41.4053333,0.763636364 L29.2986667,13.1536364 C29.1074975,13.3486557 29.0502265,13.6423492 29.1536209,13.8974499 C29.2570154,14.1525506 29.5006548,14.3186759 29.7706667,14.3181818 L39.8586667,14.3181818 C39.9323031,14.3179727 40.0030094,14.2886565 40.056,14.2363636 L52.168,1.84636364 Z"
                    id="Path"
                  ></path>
                  <path
                    d="M58.8666667,0.867272727 C58.8233477,0.856411955 58.777649,0.86991386 58.7466667,0.902727273 L46.768,13.1536364 C46.5768309,13.3486557 46.5195598,13.6423492 46.6229543,13.8974499 C46.7263487,14.1525506 46.9699882,14.3186759 47.24,14.3181818 L62.6666667,14.3181818 C63.4030463,14.3181818 64,13.707661 64,12.9545455 L64,7.5 C63.9987928,4.33952254 61.8740641,1.59418236 58.8666667,0.867272727 Z"
                    id="Path"
                  ></path>
                  <path
                    d="M34.7013333,1.84636364 C34.8925025,1.65134428 34.9497735,1.35765076 34.8463791,1.10255007 C34.7429846,0.847449373 34.4993452,0.681324104 34.2293333,0.681818182 L24.2666667,0.681818182 C24.1938992,0.682447068 24.1241722,0.711753263 24.072,0.763636364 L11.9653333,13.1536364 C11.7741642,13.3486557 11.7168931,13.6423492 11.8202876,13.8974499 C11.923682,14.1525506 12.1673215,14.3186759 12.4373333,14.3181818 L22.4,14.3181818 C22.4727675,14.3175529 22.5424945,14.2882467 22.5946667,14.2363636 L34.7013333,1.84636364 Z"
                    id="Path"
                  ></path>
                  <path
                    d="M17.368,1.84636364 C17.5591691,1.65134428 17.6164402,1.35765076 17.5130457,1.10255007 C17.4096513,0.847449373 17.1660118,0.681324104 16.896,0.681818182 L6.66666667,0.681818182 C2.98476833,0.681818182 4.50902501e-16,3.73442216 0,7.5 L0,12.9545455 C9.01805001e-17,13.707661 0.596953667,14.3181818 1.33333333,14.3181818 L5.06666667,14.3181818 C5.13943413,14.3175529 5.20916117,14.2882467 5.26133333,14.2363636 L17.368,1.84636364 Z"
                    id="Path"
                  ></path>
                </g>
              </g>
            </g>
          </svg>
          <h1>Video</h1>
        </div>
        <rise-lit-video-player
          id="videoPlayer"
          style=${styleMap(videoStyles)}
        ></rise-lit-video-player>
      </div>
    `;
  }

  updated(changedProperties) {
    if (
      changedProperties.has('type') ||
      changedProperties.has('source') ||
      changedProperties.has('account') ||
      changedProperties.has('duration') ||
      changedProperties.has('transitionType') ||
      changedProperties.has('volume')
    ) {
      this._reset();
    }
  }

  _handleRisePresentationPlay() {
    super._handleRisePresentationPlay();

    this._watchedFilesChanged = false;
    this.schedule.items = this._prepareScheduleItems();

    this.schedule.start();
  }

  _handleRisePresentationStop() {
    super._handleRisePresentationStop();
    this.schedule.stop();
    this._clearFirstDownloadTimer();
  }

  _handleStart(event) {
    super._handleStart(event);

    this._imageElements = new ReusableElements([
      this.renderRoot.querySelector('#img1'),
      this.renderRoot.querySelector('#img2'),
    ]);

    this._videoElements = new ReusableElements([
      this.renderRoot.querySelector('#videoPlayer'),
    ]);

    this._previewPlaceholderElements = new ReusableElements([
      this.renderRoot.querySelector('#previewPlaceholder'),
    ]);

    if (this._initialStart) {
      this._initialStart = false;

      this.log(RiseFolder.LOG_TYPE_INFO, RiseFolder.EVENT_START, null, {
        source: this.source,
      });

      this._start();
    }
  }

  _imgOnLoad() {
    // console.log('_imgOnLoad', this);
  }

  _imgOnError(event) {
    // ignore error if image.src === ''
    if (
      event.target &&
      event.target.src &&
      event.target.src !== event.target.baseURI
    ) {
      console.log('_imgOnError', this.id, event.target.id);
    }
  }

  _start() {
    this._clearFirstDownloadTimer();

    if (this.source) {
      switch (this.type) {
        case Types.STORAGE_FILE:
        case Types.STORAGE_FOLDER:
          if (
            this.type === Types.STORAGE_FILE &&
            !super.isValidSourceFile(this.source)
          ) {
            console.log(`Invalid file type ${this.source}`);
            return;
          }

          // fix for issue 308
          if (this._lastWatchPath !== this.source) {
            this._lastWatchPath = this.source;
            // reset watch
            this.stopWatch();
          }
          this.startWatchWithPath(this.source)
            .then(({ watchType, watchUpdated }) => {
              console.log('watch initiated', watchType, watchUpdated);

              if (watchUpdated && Utils.isPlaylistItem(this)) {
                this._waitForFirstDownload();
              }

              if (!watchUpdated && this.isPlaying()) {
                this._watchedFilesChanged = false;
                this._restartScheduleAsync();
              }
            })
            .catch(() => {
              console.log('watch rejected');
              // start preview only if component is running in editor preview OR running locally in browser
              if (
                RisePlayerConfiguration.Helpers.isEditorPreview() ||
                !RisePlayerConfiguration.Helpers.isInViewer()
              ) {
                this._handleStartForPreview();
              }
            });
          break;

        case Types.GOOGLE_PHOTOS:
        case Types.GOOGLE_PHOTOS_ALBUM:
          this.googlePhotos.startWatch(
            this.account,
            this.source,
            this.environment
          );

          if (Utils.isPlaylistItem(this)) {
            this._waitForFirstDownload();
          }

          break;

        default:
          break;
      }
    }
  }

  _stop() {
    this.schedule.stop();
    this._clearFirstDownloadTimer();
    this._resetDataProviders();
  }

  _reset() {
    if (!this._initialStart) {
      this._stop();
      this._start();
    }
  }

  _resetDataProviders() {
    this.googlePhotos.reset();
  }

  _onScheduleDone() {
    super._sendDoneEvent(true);
    if (this.isPlaying() && this._watchedFilesChanged) {
      this._watchedFilesChanged = false;
      // let schedule.play() to finish before restarting the schedule
      this._restartScheduleAsync();
    }
  }

  _restartScheduleAsync() {
    setTimeout(() => {
      this.schedule.stop();
      this.schedule.items = this._prepareScheduleItems();
      this.schedule.start();
    });
  }

  _prepareScheduleItems() {
    const files = this._getFiles();
    const isPreview =
      RisePlayerConfiguration.Helpers.isEditorPreview() ||
      !RisePlayerConfiguration.Helpers.isInViewer();
    const items = [];
    const videoFiles = [];
    const containerRef = this.renderRoot.querySelector('#container');

    files.forEach(file => {
      if (this.isImageFile(file.filePath)) {
        const item = new ScheduleItemImage(
          file.fileUrl,
          this._imageElements,
          containerRef
        );
        item.duration = this.duration;
        item.transitionType = this.transitionType;
        item.logEvent = (...args) => this._logEvent(...args);
        item.uptimeHandler = enabled => super._setUptimeError(enabled);
        items.push(item);
      } else if (this.isVideoFile(file.filePath)) {
        if (this._getWatchType() === RiseFolder.WATCH_TYPE_SENTINEL) {
          videoFiles.push({
            filePath: file.filePath,
            fileUrl: `${file.fileUrl}#${Date.now()}`,
          });
        } else {
          videoFiles.push(file);
        }
      }
    });

    let videoItem;

    if (videoFiles.length > 0) {
      if (isPreview && !this.enableVideoInPreview) {
        // leverage ScheduleItemImage for showing video preview placeholder
        videoItem = new ScheduleItemImage(
          '',
          this._previewPlaceholderElements,
          containerRef
        );
      } else {
        videoItem = new ScheduleItemVideo(
          videoFiles,
          this._videoElements,
          containerRef,
          this._videoPlaylistStuck
        );

        // TODO: playUntilDone is being forced until we eventually support duration for video
        videoItem.playUntilDone = true;
        videoItem.volume = this.volume;
        videoItem.logEvent = (...args) => this._logEvent(...args);
        videoItem.uptimeHandler = enabled => super._setUptimeError(enabled);
      }

      videoItem.duration = this.duration;
      videoItem.transitionType = this.transitionType;

      items.push(videoItem);
    }

    return items;
  }

  _videoPlaylistStuck() {
    // force reset in case rise-folder instance is the only item in playlist and/or only presentation in schedule
    this._reset();
    super._sendDoneEvent(true);
  }

  _clearFirstDownloadTimer() {
    if (this._firstDownloadTimer) {
      clearTimeout(this._firstDownloadTimer);
      this._firstDownloadTimer = null;
    }
  }

  _handleFirstDownloadTimer() {
    const files = this._getFiles();

    if (!files.length || files.length === 0) {
      this._onScheduleDone();
    }
  }

  _waitForFirstDownload() {
    this._clearFirstDownloadTimer();

    this._firstDownloadTimer = setTimeout(
      this._handleFirstDownloadTimer,
      this._maximumTimeForFirstDownload
    );
  }

  _sortFiles(files) {
    if (files && Array.isArray(files)) {
      files.sort((file1, file2) => (file1.fileUrl < file2.fileUrl ? -1 : 1));
    }
  }

  _getFiles() {
    switch (this.type) {
      case Types.STORAGE_FILE:
      case Types.STORAGE_FOLDER: {
        let files;
        if (
          RisePlayerConfiguration.Helpers.isEditorPreview() ||
          RisePlayerConfiguration.Helpers.isPreRecord()
        ) {
          files = this.riseStorage.getFiles();
        } else {
          files = this.getWatchedFiles();
        }

        this._sortFiles(files);

        return files;
      }
      case Types.GOOGLE_PHOTOS:
      case Types.GOOGLE_PHOTOS_ALBUM:
        return this.googlePhotos.getFiles();

      default:
        return [];
    }
  }

  _handleStartForPreview() {
    switch (this.type) {
      case Types.STORAGE_FILE:
        if (this.isDocumentFile(this.source)) {
          this._handleStartForPreviewStorageDocument();
        } else {
          this._handleStartForPreviewStorageFile();
        }

        break;

      case Types.STORAGE_FOLDER:
        this._handleStartForPreviewStorageFolder();
        break;

      default:
    }

    // Restart schedule for rise-folder standalone after attribute changes.
    // In a playlists rise-folder will receive "rise-presentation-stop"
    // before attribute changes and "rise-presentation-play" after.
    if (this.isPlaying()) {
      this._watchedFilesChanged = false;
      this._restartScheduleAsync();
    }
  }

  _handleStartForPreviewStorageFile() {
    this.riseStorage.clearFiles();
    this.riseStorage.addSingleFile(this.source);
    this._watchedFilesChanged = true;
  }

  _handleStartForPreviewStorageDocument() {
    return this.riseStorage
      .getDocumentAssets(this.source, this.environment)
      .then(() => {
        this._watchedFilesChanged = true;
      })
      .catch(error => {
        super.log(
          RiseFolder.LOG_TYPE_ERROR,
          'Error getting document assets for preview',
          { errorCode: 'E999999999' },
          error
        );
      });
  }

  _handleStartForPreviewStorageFolder() {
    return this.riseStorage
      .getFolderContent(this.source, this.environment)
      .then(() => {
        this._watchedFilesChanged = false;
        this._restartScheduleAsync();
      })
      .catch(error => {
        super.log(
          RiseFolder.LOG_TYPE_ERROR,
          'Error getting folder content for preview',
          { errorCode: 'E999999999' },
          error
        );
      });
  }

  _logEvent(type, event, details = null, additionalFields) {
    super.log(type, event, details, additionalFields);
  }

  watchedFileAddedCallback(filePath) {
    if (
      this.type === Types.STORAGE_FOLDER ||
      this.type === Types.STORAGE_FILE
    ) {
      console.log('RiseFolder::watchedFileAddedCallback()', filePath, this);

      this._watchedFilesChanged = true;
      super._setUptimeError(false);

      if (this.isPlaying() && !Utils.isPlaylistItem(this)) {
        this._watchedFilesChanged = false;
        this._restartScheduleAsync();
      }
    }
  }

  watchedFileDeletedCallback(filePath) {
    if (this.type === Types.STORAGE_FOLDER) {
      console.log('RiseFolder::watchedFileDeletedCallback()', filePath, this);

      this._watchedFilesChanged = true;

      if (this.isPlaying() && !Utils.isPlaylistItem(this)) {
        this._watchedFilesChanged = false;
        this._restartScheduleAsync();
      }
    }
  }

  watchedFolderErrorCallback(filePath) {
    if (this.type === Types.STORAGE_FOLDER) {
      super._setUptimeError(true);
    }
    console.log('RiseFolder::watchedFolderErrorCallback()', filePath, this);
  }

  watchedFileErrorCallback(filePath) {
    console.log('RiseFolder::watchedFileErrorCallback()', filePath, this);
  }

  googlePhotosUpdateCallback(albumId) {
    if (
      this.type === Types.GOOGLE_PHOTOS_ALBUM ||
      this.type === Types.GOOGLE_PHOTOS
    ) {
      console.log('RiseFolder::googlePhotosUpdateCallback()', albumId, this);

      this._watchedFilesChanged = true;
      super._setUptimeError(false);

      if (this.isPlaying() && !Utils.isPlaylistItem(this)) {
        this._watchedFilesChanged = false;
        this._restartScheduleAsync();
      }
    }
  }

  googlePhotosErrorCallback(albumId) {
    if (
      this.type === Types.GOOGLE_PHOTOS_ALBUM ||
      this.type === Types.GOOGLE_PHOTOS
    ) {
      super._setUptimeError(true);
    }
    console.log('RiseFolder::googlePhotosErrorCallback()', albumId, this);
  }
}

customElements.define('rise-folder', RiseFolder);

Rise-Vision / rise-lit-components / f2a07a90-5e21-49ea-b1ba-1fad9adc6114

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous