#158 percents of loading

src/data/scene/entities/room.ts

@@ -28,15 +28,24 @@ export class Room implements RoomProperty {
   private backgroundVideo: MediaFile = new MediaFile();
   private backgroundIsVideo = false;
   private _isLoadedAssets: boolean = true;
+  private _loadingPercents: string = '0';
 
   public get isLoadedAssets(): boolean {
     return this._isLoadedAssets;
   }
 
+  public get loadingPercents(): string {
+    return this._loadingPercents;
+  }
+
   public setAssetsLoadedState(isLoaded: boolean) {
     this._isLoadedAssets = isLoaded;
   }
 
+  public setProgressLoading(percents: number): void {
+    this._loadingPercents = percents.toFixed(0);
+  }
+
   getId(): string {
     return this.id;
   }

src/data/storage/deserializationService.ts

@@ -468,8 +468,10 @@ export class DeserializationService {
     for (let i = 0; i < remoteMediaFilesByRoom.length; i++) {
       const { roomId, roomMediaFiles } = remoteMediaFilesByRoom[i];
       const room: Room = this.roomManager.getRoomById(roomId);
+      const filesCount = roomMediaFiles.length;
+      let filesLoaded = 0;
 
-      for (let j = 0; j < roomMediaFiles.length; j++) {
+      for (let j = 0; j < filesCount; j++) {
         const remoteFile: MediaFile = roomMediaFiles[j];
 
         await this.afStorage
@@ -480,10 +482,14 @@ export class DeserializationService {
           .then((blob) => this.fileLoaderUtil.getBinaryFileData(blob))
           .then((binaryData) => {
             remoteFile.setUploadedBinaryFileData(binaryData);
+            filesLoaded += 1;
+            room.setProgressLoading(100 * (filesLoaded / filesCount));
           })
           .catch((error) => {
             console.log('Error to load remote file:', remoteFile);
             console.log(error);
+            filesLoaded += 1;
+            room.setProgressLoading(100 * (filesLoaded / filesCount));
           });
       }
 

src/ui/editor/bottombar/story-scroll/story-scroll.html

@@ -40,7 +40,7 @@
         <storymap-item
           [roomProperty]="getRoomById(roomId)"
           [isActive]="roomIsSelected(roomId)"
-          (click)="onRoomSelect(roomId)"
+          (click)="roomIsLoaded(roomId) && onRoomSelect(roomId)"
           (infoEvent)="onInfoClick($event)"
           class="story-scroll__storymap-item">
         </storymap-item>

src/ui/editor/bottombar/story-scroll/story-scroll.scss

@@ -89,6 +89,7 @@ $right-buffer: $room-icon-size + 5px;
 .story-scroll__storymap-item {
   color: $color-grey-dark;
   font-size: $tiny-font-size;
+
   &:hover {
     color: $color-black;
   }

src/ui/editor/bottombar/story-scroll/story-scroll.ts

@@ -45,6 +45,7 @@ export class StoryScroll {
         observedData => {
           const propertyId: string = observedData.propertyId;
           const activeRoomId: string = this.sceneInteractor.getActiveRoomId();
+
           this.activeProperty =
             this.sceneInteractor.getPropertyById(activeRoomId, propertyId) ||
             this.sceneInteractor.getRoomById(activeRoomId);
@@ -114,6 +115,12 @@ export class StoryScroll {
     return roomId === this.sceneInteractor.getActiveRoomId();
   }
 
+  public roomIsLoaded(roomId: string): boolean {
+    const room: Room = this.sceneInteractor.getRoomById(roomId);
+
+    return room.isLoadedAssets;
+  }
+
   public roomIsExpanded(roomId: string): boolean {
     return this.roomIsSelected(roomId)
       && this.activeRoomIsExpanded

src/ui/editor/bottombar/story-scroll/storymap-item/storymap-item.html

@@ -1,4 +1,6 @@
-<div class="storymap-item">
+<div
+  [ngClass]="{'loading': !roomProperty.isLoadedAssets}"
+  class="storymap-item">
 
   <div class="storymap-item__roomname">
     <text-input
@@ -28,11 +30,13 @@
   </div>
 
   <div class='storymap-item__thumbnailbox'>
+    <div class="loading-progress" *ngIf="!roomProperty.isLoadedAssets">
+      <span>{{roomProperty.loadingPercents}}%</span>
+    </div>
     <img
+      *ngIf="roomProperty.isLoadedAssets"
       [attr.src]="getBackgroundThumbnail()"
       class="storymap-item__thumbnail"
       [ngClass]="{'storymap-item__thumbnail--active': isActive}">
   </div>
-
-
 </div>

src/ui/editor/bottombar/story-scroll/storymap-item/storymap-item.scss

@@ -8,14 +8,13 @@
   align-items: center;
   width: 100%;
   cursor: pointer;
-  margin: 0px 0;
+  margin: 0;
+
   &:hover {
     .story-map-item__buttons {
       visibility: visible;
     }
-
   }
-
 }
 
 .story-map-item__buttons {
@@ -39,7 +38,7 @@
 
 .storymap-item__roomname {
   justify-content: center;
-  margin: 0px 0px 0px 0px;
+  margin: 0;
   transform: translate(0%, 40px);
   z-index: 1;
 }
@@ -67,6 +66,18 @@
   background-color: $color-grey-light;
   height: $room-icon-thumbnail-height;
   margin: 0 5px;
+
+  .loading-progress {
+    width: $room-icon-thumbnail-width;
+    height: $room-icon-thumbnail-height;
+    opacity: 0.5;
+    transition: opacity 0.25s ease-in-out;
+    text-align: center;
+
+    span {
+      line-height: $room-icon-thumbnail-height;
+    }
+  }
 }
 
 .storymap-item__thumbnail {

src/ui/editor/bottombar/story-scroll/storymap-item/storymap-item.ts

@@ -2,7 +2,6 @@ import { Component, EventEmitter, Input, NgZone, Output } from '@angular/core';
 import { SceneInteractor } from 'core/scene/sceneInteractor';
 
 import { Room } from 'data/scene/entities/room';
-import { RoomProperty } from 'data/scene/interfaces/roomProperty';
 
 import { PropertyRemovalService } from 'ui/editor/util/propertyRemovalService';
 import { RoomPropertyTypeService } from 'ui/editor/util/roomPropertyTypeService';
@@ -14,7 +13,7 @@ import { RoomPropertyTypeService } from 'ui/editor/util/roomPropertyTypeService'
 })
 export class StorymapItem {
 
-  @Input() roomProperty: RoomProperty;
+  @Input() roomProperty: Room;
   @Input() isActive: boolean;
   @Output() infoEvent = new EventEmitter();
   @Output() deleteEvent = new EventEmitter();