78e029d3-9228-42cd-8fef-f6c02b4bef2b

Committed 21 Dec 2023 08:39PM UTC coverage: 96.551% (+0.09%) from 96.458%

Build # 78e029d3-9228-42cd-8fef-f6c02b4bef2b

Build Type

push

circleci

Committed by

web-flow

Commit Message

Merge pull request #302 from Rise-Vision/fix/volume

Ensure rise-folder executes a reset when volume value changes

Run Details

1138 of 1206 branches covered (0.0%)

Branch coverage included in aggregate %.

1 of 2 new or added lines in 1 file covered. (50.0%)

8 existing lines in 2 files now uncovered.

11206 of 11579 relevant lines covered (96.78%)

1.84 hits per line

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

89.79

/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.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;
          }

          this.startWatchWithPath(this.source)
            .then(watchType => {
              console.log('watch initiated', watchType);

              if (Utils.isPlaylistItem(this)) {
                this._waitForFirstDownload();
              }
            })
            .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();
    // TODO: we need to invoke a stop() on watchfiles mixin
    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 = true;
      })
      .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);

1	/* eslint-disable class-methods-use-this */	1✔
2	/* eslint-disable no-console */	1✔
3		1✔
4	import { html, css } from 'lit';	1✔
5	import { styleMap } from 'lit/directives/style-map.js';	1✔
6	import { RiseElement } from '../common/rise-element.js';	1✔
7	import { WatchStorageMixin } from '../common/watch-storage-mixin.js';	1✔
8	import { version } from '../version.js';	1✔
9	import { Schedule } from '../common/playlist/schedule.js';	1✔
10	import { ScheduleItemImage } from './schedule-item-image.js';	1✔
11	import { ScheduleItemVideo } from './schedule-item-video.js';	1✔
12	import { ReusableElements } from './reusable-elements.js';	1✔
13	import { RiseStorage } from '../common/rise-storage.js';	1✔
14	import { GooglePhotos } from './google-photos.js';	1✔
15	import {} from '../common/rise-lit-video-player.js';	1✔
16	import { Utils } from '../common/utils.js';	1✔
17		1✔
18	const Types = Object.freeze({	1✔
19	STORAGE_FOLDER: 'storage-folder',	1✔
20	STORAGE_FILE: 'storage-file',	1✔
21	GOOGLE_PHOTOS: 'google-photos',	1✔
22	GOOGLE_PHOTOS_ALBUM: 'google-photos-album',	1✔
23	});	1✔
24		1✔
25	const MAXIMUM_TIME_FOR_FIRST_DOWNLOAD = 5 * 1000;	1✔
26		1✔
27	export default class RiseFolder extends WatchStorageMixin(RiseElement) {	1✔
28	render() {	1✔
29	return html`${this._template()}`;	1✔
30	}	1✔
31		1✔
32	static get styles() {	1✔
33	return css`	1✔
34	:host {	1✔
35	display: block;	1✔
36	overflow: hidden;	1✔
37	position: relative;	1✔
38	width: 100%;	1✔
39	height: 100%;	1✔
40	}	1✔
41		1✔
42	#previewPlaceholder {	1✔
43	display: flex;	1✔
44	align-items: center;	1✔
45	justify-content: center;	1✔
46	flex-direction: column;	1✔
47	text-align: center;	1✔
48	position: absolute;	1✔
49	left: 0;	1✔
50	top: 0;	1✔
51	width: 100%;	1✔
52	height: 100%;	1✔
53	background-color: #f2f2f2;	1✔
54	visibility: hidden;	1✔
55	}	1✔
56	#previewPlaceholder svg {	1✔
57	height: 120px;	1✔
58	width: 100%;	1✔
59	}	1✔
60	#previewPlaceholder h1 {	1✔
61	color: #020620;	1✔
62	font-size: 48px;	1✔
63	text-transform: initial;	1✔
64	font-family: Helvetica, Arial, sans-serif;	1✔
65	}	1✔
66	`;	1✔
67	}	1✔
68		1✔
69	static get properties() {	1✔
70	return {	1✔
71	account: { type: String },	1✔
72	duration: { type: Number },	1✔
73	environment: { type: String },	1✔
74	source: { type: String },	1✔
75	transitionType: { type: String, attribute: 'transition-type' },	1✔
76	type: { type: String },	1✔
77	volume: { type: Number },	1✔
78	};	1✔
79	}	1✔
80		1✔
81	constructor() {	1✔
82	super();	1✔
83		1✔
84	this.version = version;	1✔
85		1✔
86	this.account = null;	1✔
87	this.duration = 10;	1✔
88	this.environment = 'prod';	1✔
89	this.source = '';	1✔
90	this.transitionType = 'normal';	1✔
91	this.type = Types.STORAGE_FOLDER; // set to STORAGE_FOLDER for backward compatibility	1✔
92	this.volume = 0;	1✔
93	this.enableVideoInPreview = true; // TODO: in future this could be added as property populated via attribute data if we surface toggle to user	1✔
94		1✔
95	this._initialStart = true;	1✔
96	this._imageElements = null;	1✔
97	this._videoElements = null;	1✔
98	this._previewPlaceholderElements = null;	1✔
99	this._watchedFilesChanged = false;	1✔
100	this._firstDownloadTimer = null;	1✔
101	this._maximumTimeForFirstDownload = MAXIMUM_TIME_FOR_FIRST_DOWNLOAD;	1✔
102		1✔
103	this.schedule = new Schedule();	1✔
104	this.schedule.doneListener = () => this._onScheduleDone();	1✔
105	this.schedule.logEvent = (...args) => this._logEvent(...args);	1✔
106	this.riseStorage = new RiseStorage();	1✔
107		1✔
108	this.googlePhotos = new GooglePhotos();	1✔
109	this.googlePhotos.log = this.log;	1✔
110	this.googlePhotos.onChange = this.googlePhotosUpdateCallback.bind(this);	1✔
111	this.googlePhotos.onError = this.googlePhotosErrorCallback.bind(this);	1✔
112		1✔
113	this._videoPlaylistStuck = this._videoPlaylistStuck.bind(this);	1✔
114	this._handleFirstDownloadTimer = this._handleFirstDownloadTimer.bind(this);	1✔
115	}	1✔
116		1✔
117	_template() {	1✔
118	const divStyles = {	1✔
119	overflow: 'hidden',	1✔
120	position: 'absolute',	1✔
121	width: '100%',	1✔
122	height: '100%',	1✔
123	top: '0px',	1✔
124	left: '0px',	1✔
125	};	1✔
126	const imgStyles = {	1✔
127	overflow: 'hidden',	1✔
128	position: 'absolute',	1✔
129	'object-fit': 'contain',	1✔
130	width: '100%',	1✔
131	height: '100%',	1✔
132	top: '0px',	1✔
133	left: '0px',	1✔
134	visibility: 'hidden',	1✔
135	};	1✔
136	const videoStyles = {	1✔
137	visibility: 'hidden',	1✔
138	display: 'block',	1✔
139	};	1✔
140		1✔
141	return html`	1✔
142	<div id="container" style=${styleMap(divStyles)}>	1✔
143	<img	1✔
144	id="img1"	1✔
145	alt=""	1✔
146	@load="${this._imgOnLoad}"	1✔
147	@error="${this._imgOnError}"	1✔
148	style=${styleMap(imgStyles)}	1✔
149	/>	1✔
150	<img	1✔
151	id="img2"	1✔
152	alt=""	1✔
153	@load="${this._imgOnLoad}"	1✔
154	@error="${this._imgOnError}"	1✔
155	style=${styleMap(imgStyles)}	1✔
156	/>	1✔
157	<div id="previewPlaceholder">	1✔
158	<svg	1✔
159	viewBox="0 0 64 60"	1✔
160	version="1.1"	1✔
161	xmlns="http://www.w3.org/2000/svg"	1✔
162	xmlns:xlink="http://www.w3.org/1999/xlink"	1✔
163	>	1✔
164	<g	1✔
165	id="1.-Atoms"	1✔
166	stroke="none"	1✔
167	stroke-width="1"	1✔
168	fill="none"	1✔
169	fill-rule="evenodd"	1✔
170	>	1✔
171	<g	1✔
172	id="Desktop/Icons"	1✔
173	transform="translate(-423.000000, -1232.000000)"	1✔
174	fill="#020620"	1✔
175	fill-rule="nonzero"	1✔
176	>	1✔
177	<g	1✔
178	id="icon-rise-video"	1✔
179	transform="translate(423.000000, 1232.000000)"	1✔
180	>	1✔
181	<path	1✔
182	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"	1✔
183	id="Shape"	1✔
184	></path>	1✔
185	<path	1✔
186	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"	1✔
187	id="Path"	1✔
188	></path>	1✔
189	<path	1✔
190	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"	1✔
191	id="Path"	1✔
192	></path>	1✔
193	<path	1✔
194	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"	1✔
195	id="Path"	1✔
196	></path>	1✔
197	<path	1✔
198	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"	1✔
199	id="Path"	1✔
200	></path>	1✔
201	</g>	1✔
202	</g>	1✔
203	</g>	1✔
204	</svg>	1✔
205	<h1>Video</h1>	1✔
206	</div>	1✔
207	<rise-lit-video-player	1✔
208	id="videoPlayer"	1✔
209	style=${styleMap(videoStyles)}	1✔
210	></rise-lit-video-player>	1✔
211	</div>	1✔
212	`;	1✔
213	}	1✔
214		1✔
215	updated(changedProperties) {	1✔
216	if (	1✔
217	changedProperties.has('type') \|\|	1✔
218	changedProperties.has('source') \|\|	1!
219	changedProperties.has('account') \|\|	1!
220	changedProperties.has('duration') \|\|	1!
221	changedProperties.has('transitionType') \|\|	1!
NEW 222	changedProperties.has('volume')	×
223	) {	1✔
224	this._reset();	1✔
225	}	1✔
226	}	1✔
227		1✔
228	_handleRisePresentationPlay() {	1✔
229	super._handleRisePresentationPlay();	1✔
230		1✔
231	this._watchedFilesChanged = false;	1✔
232	this.schedule.items = this._prepareScheduleItems();	1✔
233		1✔
234	this.schedule.start();	1✔
235	}	1✔
236		1✔
237	_handleRisePresentationStop() {	1✔
238	super._handleRisePresentationStop();	1✔
239	this.schedule.stop();	1✔
240	this._clearFirstDownloadTimer();	1✔
241	}	1✔
242		1✔
243	_handleStart(event) {	1✔
244	super._handleStart(event);	1✔
245		1✔
246	this._imageElements = new ReusableElements([	1✔
247	this.renderRoot.querySelector('#img1'),	1✔
248	this.renderRoot.querySelector('#img2'),	1✔
249	]);	1✔
250		1✔
251	this._videoElements = new ReusableElements([	1✔
252	this.renderRoot.querySelector('#videoPlayer'),	1✔
253	]);	1✔
254		1✔
255	this._previewPlaceholderElements = new ReusableElements([	1✔
256	this.renderRoot.querySelector('#previewPlaceholder'),	1✔
257	]);	1✔
258		1✔
259	if (this._initialStart) {	1✔
260	this._initialStart = false;	1✔
261		1✔
262	this.log(RiseFolder.LOG_TYPE_INFO, RiseFolder.EVENT_START, null, {	1✔
263	source: this.source,	1✔
264	});	1✔
265		1✔
266	this._start();	1✔
267	}	1✔
268	}	1✔
269		1✔
270	_imgOnLoad() {	1✔
271	// console.log('_imgOnLoad', this);	×
272	}	×
273		1✔
274	_imgOnError(event) {	1✔
275	// ignore error if image.src === ''	×
276	if (	×
277	event.target &&	×
278	event.target.src &&	×
279	event.target.src !== event.target.baseURI	×
280	) {	×
281	console.log('_imgOnError', this.id, event.target.id);	×
282	}	×
283	}	×
284		1✔
285	_start() {	1✔
286	this._clearFirstDownloadTimer();	1✔
287		1✔
288	if (this.source) {	1✔
289	switch (this.type) {	1✔
290	case Types.STORAGE_FILE:	1✔
291	case Types.STORAGE_FOLDER:	1✔
292	if (	1✔
293	this.type === Types.STORAGE_FILE &&	1✔
294	!super.isValidSourceFile(this.source)	1✔
295	) {	1✔
296	console.log(`Invalid file type ${this.source}`);	1✔
297	return;	1✔
298	}	1✔
299		1✔
300	this.startWatchWithPath(this.source)	1✔
301	.then(watchType => {	1✔
302	console.log('watch initiated', watchType);	1✔
303		1✔
304	if (Utils.isPlaylistItem(this)) {	1✔
305	this._waitForFirstDownload();	1✔
306	}	1✔
307	})	1✔
308	.catch(() => {	1✔
309	console.log('watch rejected');	1✔
310	// start preview only if component is running in editor preview OR running locally in browser	1✔
311	if (	1✔
312	RisePlayerConfiguration.Helpers.isEditorPreview() \|\|	1!
313	!RisePlayerConfiguration.Helpers.isInViewer()	×
314	) {	1✔
315	this._handleStartForPreview();	1✔
316	}	1✔
317	});	1✔
318	break;	1✔
319		1✔
320	case Types.GOOGLE_PHOTOS:	1!
321	case Types.GOOGLE_PHOTOS_ALBUM:	1✔
322	this.googlePhotos.startWatch(	1✔
323	this.account,	1✔
324	this.source,	1✔
325	this.environment	1✔
326	);	1✔
327		1✔
328	if (Utils.isPlaylistItem(this)) {	1✔
329	this._waitForFirstDownload();	1✔
330	}	1✔
331		1✔
332	break;	1✔
333		1✔
334	default:	1!
335	break;	×
336	}	1✔
337	}	1✔
338	}	1✔
339		1✔
340	_stop() {	1✔
341	this.schedule.stop();	×
342	this._clearFirstDownloadTimer();	×
343	// TODO: we need to invoke a stop() on watchfiles mixin	×
344	this._resetDataProviders();	×
345	}	×
346		1✔
347	_reset() {	1✔
348	if (!this._initialStart) {	1!
349	this._stop();	×
350	this._start();	×
351	}	×
352	}	1✔
353		1✔
354	_resetDataProviders() {	1✔
355	this.googlePhotos.reset();	×
356	}	×
357		1✔
358	_onScheduleDone() {	1✔
359	super._sendDoneEvent(true);	1✔
360	if (this.isPlaying() && this._watchedFilesChanged) {	1✔
361	this._watchedFilesChanged = false;	1✔
362	// let schedule.play() to finish before restarting the schedule	1✔
363	this._restartScheduleAsync();	1✔
364	}	1✔
365	}	1✔
366		1✔
367	_restartScheduleAsync() {	1✔
368	setTimeout(() => {	1✔
369	this.schedule.stop();	1✔
370	this.schedule.items = this._prepareScheduleItems();	1✔
371	this.schedule.start();	1✔
372	});	1✔
373	}	1✔
374		1✔
375	_prepareScheduleItems() {	1✔
376	const files = this._getFiles();	1✔
377	const isPreview =	1✔
378	RisePlayerConfiguration.Helpers.isEditorPreview() \|\|	1✔
379	!RisePlayerConfiguration.Helpers.isInViewer();	1✔
380	const items = [];	1✔
381	const videoFiles = [];	1✔
382	const containerRef = this.renderRoot.querySelector('#container');	1✔
383		1✔
384	files.forEach(file => {	1✔
385	if (this.isImageFile(file.filePath)) {	1✔
386	const item = new ScheduleItemImage(	1✔
387	file.fileUrl,	1✔
388	this._imageElements,	1✔
389	containerRef	1✔
390	);	1✔
391	item.duration = this.duration;	1✔
392	item.transitionType = this.transitionType;	1✔
393	item.logEvent = (...args) => this._logEvent(...args);	1✔
394	item.uptimeHandler = enabled => super._setUptimeError(enabled);	1✔
395	items.push(item);	1✔
396	} else if (this.isVideoFile(file.filePath)) {	1✔
397	if (this._getWatchType() === RiseFolder.WATCH_TYPE_SENTINEL) {	1!
398	videoFiles.push({	×
399	filePath: file.filePath,	×
400	fileUrl: `${file.fileUrl}#${Date.now()}`,	×
401	});	×
402	} else {	1✔
403	videoFiles.push(file);	1✔
404	}	1✔
405	}	1✔
406	});	1✔
407		1✔
408	let videoItem;	1✔
409		1✔
410	if (videoFiles.length > 0) {	1✔
411	if (isPreview && !this.enableVideoInPreview) {	1✔
412	// leverage ScheduleItemImage for showing video preview placeholder	1✔
413	videoItem = new ScheduleItemImage(	1✔
414	'',	1✔
415	this._previewPlaceholderElements,	1✔
416	containerRef	1✔
417	);	1✔
418	} else {	1✔
419	videoItem = new ScheduleItemVideo(	1✔
420	videoFiles,	1✔
421	this._videoElements,	1✔
422	containerRef,	1✔
423	this._videoPlaylistStuck	1✔
424	);	1✔
425		1✔
426	// TODO: playUntilDone is being forced until we eventually support duration for video	1✔
427	videoItem.playUntilDone = true;	1✔
428	videoItem.volume = this.volume;	1✔
429	videoItem.logEvent = (...args) => this._logEvent(...args);	1✔
430	videoItem.uptimeHandler = enabled => super._setUptimeError(enabled);	1✔
431	}	1✔
432		1✔
433	videoItem.duration = this.duration;	1✔
434	videoItem.transitionType = this.transitionType;	1✔
435		1✔
436	items.push(videoItem);	1✔
437	}	1✔
438		1✔
439	return items;	1✔
440	}	1✔
441		1✔
442	_videoPlaylistStuck() {	1✔
443	// force reset in case rise-folder instance is the only item in playlist and/or only presentation in schedule	1✔
444	this._reset();	1✔
445	super._sendDoneEvent(true);	1✔
446	}	1✔
447		1✔
448	_clearFirstDownloadTimer() {	1✔
449	if (this._firstDownloadTimer) {	1!
450	clearTimeout(this._firstDownloadTimer);	×
451	this._firstDownloadTimer = null;	×
452	}	×
453	}	1✔
454		1✔
455	_handleFirstDownloadTimer() {	1✔
456	const files = this._getFiles();	1✔
457		1✔
458	if (!files.length \|\| files.length === 0) {	1✔
459	this._onScheduleDone();	1✔
460	}	1✔
461	}	1✔
462		1✔
463	_waitForFirstDownload() {	1✔
464	this._clearFirstDownloadTimer();	×
465		×
466	this._firstDownloadTimer = setTimeout(	×
467	this._handleFirstDownloadTimer,	×
468	this._maximumTimeForFirstDownload	×
469	);	×
470	}	×
471		1✔
472	_sortFiles(files) {	1✔
473	if (files && Array.isArray(files)) {	1✔
474	files.sort((file1, file2) => (file1.fileUrl < file2.fileUrl ? -1 : 1));	1✔
475	}	1✔
476	}	1✔
477		1✔
478	_getFiles() {	1✔
479	switch (this.type) {	1✔
480	case Types.STORAGE_FILE:	1!
481	case Types.STORAGE_FOLDER: {	1✔
482	let files;	1✔
483	if (	1✔
484	RisePlayerConfiguration.Helpers.isEditorPreview() \|\|	1✔
485	RisePlayerConfiguration.Helpers.isPreRecord()	1✔
486	) {	1✔
487	files = this.riseStorage.getFiles();	1✔
488	} else {	1✔
489	files = this.getWatchedFiles();	1✔
490	}	1✔
491		1✔
492	this._sortFiles(files);	1✔
493		1✔
494	return files;	1✔
495	}	1✔
496	case Types.GOOGLE_PHOTOS:	1!
497	case Types.GOOGLE_PHOTOS_ALBUM:	1!
498	return this.googlePhotos.getFiles();	×
499		1✔
500	default:	1!
501	return [];	×
502	}	1✔
503	}	1✔
504		1✔
505	_handleStartForPreview() {	1✔
506	switch (this.type) {	1✔
507	case Types.STORAGE_FILE:	1✔
508	if (this.isDocumentFile(this.source)) {	1✔
509	this._handleStartForPreviewStorageDocument();	1✔
510	} else {	1✔
511	this._handleStartForPreviewStorageFile();	1✔
512	}	1✔
513		1✔
514	break;	1✔
515		1✔
516	case Types.STORAGE_FOLDER:	1✔
517	this._handleStartForPreviewStorageFolder();	1✔
518	break;	1✔
519		1✔
520	default:	1!
521	}	1✔
522		1✔
523	// Restart schedule for rise-folder standalone after attribute changes.	1✔
524	// In a playlists rise-folder will receive "rise-presentation-stop"	1✔
525	// before attribute changes and "rise-presentation-play" after.	1✔
526	if (this.isPlaying()) {	1!
527	this._watchedFilesChanged = false;	×
528	this._restartScheduleAsync();	×
529	}	×
530	}	1✔
531		1✔
532	_handleStartForPreviewStorageFile() {	1✔
533	this.riseStorage.clearFiles();	1✔
534	this.riseStorage.addSingleFile(this.source);	1✔
535	this._watchedFilesChanged = true;	1✔
536	}	1✔
537		1✔
538	_handleStartForPreviewStorageDocument() {	1✔
539	return this.riseStorage	1✔
540	.getDocumentAssets(this.source, this.environment)	1✔
541	.then(() => {	1✔
542	this._watchedFilesChanged = true;	1✔
543	})	1✔
544	.catch(error => {	1✔
545	super.log(	1✔
546	RiseFolder.LOG_TYPE_ERROR,	1✔
547	'Error getting document assets for preview',	1✔
548	{ errorCode: 'E999999999' },	1✔
549	error	1✔
550	);	1✔
551	});	1✔
552	}	1✔
553		1✔
554	_handleStartForPreviewStorageFolder() {	1✔
555	return this.riseStorage	1✔
556	.getFolderContent(this.source, this.environment)	1✔
557	.then(() => {	1✔
558	this._watchedFilesChanged = true;	1✔
559	})	1✔
560	.catch(error => {	1✔
561	super.log(	1✔
562	RiseFolder.LOG_TYPE_ERROR,	1✔
563	'Error getting folder content for preview',	1✔
564	{ errorCode: 'E999999999' },	1✔
565	error	1✔
566	);	1✔
567	});	1✔
568	}	1✔
569		1✔
570	_logEvent(type, event, details = null, additionalFields) {	1✔
571	super.log(type, event, details, additionalFields);	×
572	}	×
573		1✔
574	watchedFileAddedCallback(filePath) {	1✔
575	if (	1✔
576	this.type === Types.STORAGE_FOLDER \|\|	1✔
577	this.type === Types.STORAGE_FILE	1✔
578	) {	1✔
579	console.log('RiseFolder::watchedFileAddedCallback()', filePath, this);	1✔
580		1✔
581	this._watchedFilesChanged = true;	1✔
582	super._setUptimeError(false);	1✔
583		1✔
584	if (this.isPlaying() && !Utils.isPlaylistItem(this)) {	1✔
585	this._watchedFilesChanged = false;	1✔
586	this._restartScheduleAsync();	1✔
587	}	1✔
588	}	1✔
589	}	1✔
590		1✔
591	watchedFileDeletedCallback(filePath) {	1✔
592	if (this.type === Types.STORAGE_FOLDER) {	1✔
593	console.log('RiseFolder::watchedFileDeletedCallback()', filePath, this);	1✔
594		1✔
595	this._watchedFilesChanged = true;	1✔
596		1✔
597	if (this.isPlaying() && !Utils.isPlaylistItem(this)) {	1!
598	this._watchedFilesChanged = false;	×
599	this._restartScheduleAsync();	×
600	}	×
601	}	1✔
602	}	1✔
603		1✔
604	watchedFolderErrorCallback(filePath) {	1✔
605	if (this.type === Types.STORAGE_FOLDER) {	1✔
606	super._setUptimeError(true);	1✔
607	}	1✔
608	console.log('RiseFolder::watchedFolderErrorCallback()', filePath, this);	1✔
609	}	1✔
610		1✔
611	watchedFileErrorCallback(filePath) {	1✔
612	console.log('RiseFolder::watchedFileErrorCallback()', filePath, this);	×
613	}	×
614		1✔
615	googlePhotosUpdateCallback(albumId) {	1✔
616	if (	1✔
617	this.type === Types.GOOGLE_PHOTOS_ALBUM \|\|	1!
618	this.type === Types.GOOGLE_PHOTOS	×
619	) {	1✔
620	console.log('RiseFolder::googlePhotosUpdateCallback()', albumId, this);	1✔
621		1✔
622	this._watchedFilesChanged = true;	1✔
623	super._setUptimeError(false);	1✔
624		1✔
625	if (this.isPlaying() && !Utils.isPlaylistItem(this)) {	1✔
626	this._watchedFilesChanged = false;	1✔
627	this._restartScheduleAsync();	1✔
628	}	1✔
629	}	1✔
630	}	1✔
631		1✔
632	googlePhotosErrorCallback(albumId) {	1✔
633	if (	1✔
634	this.type === Types.GOOGLE_PHOTOS_ALBUM \|\|	1!
635	this.type === Types.GOOGLE_PHOTOS	×
636	) {	1✔
637	super._setUptimeError(true);	1✔
638	}	1✔
639	console.log('RiseFolder::googlePhotosErrorCallback()', albumId, this);	1✔
640	}	1✔
641	}	1✔
642		1✔
643	customElements.define('rise-folder', RiseFolder);	1✔

Rise-Vision / rise-lit-components / 78e029d3-9228-42cd-8fef-f6c02b4bef2b

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