Firebase: Step 2 - Move #122:

src/ui/common/_module/common.module.ts

@@ -13,6 +13,7 @@ import {Modal} from 'ui/common/modal/modal';
 import {LoadingModal} from 'ui/common/modal/loading-modal/loading-modal';
 import {MessageModal} from 'ui/common/modal/message-modal/message-modal';
 import {ShareableModal} from 'ui/common/modal/shareable-modal/shareable-modal';
+import { PlayStoryModal } from 'ui/common/modal/play-story-modal/play-story-modal';
 
 // Services
 import {EventBus} from 'ui/common/event-bus';
@@ -26,7 +27,8 @@ import {ShareableLoader} from 'ui/common/shareable-loader';
     Modal,
     LoadingModal,
     MessageModal,
-    ShareableModal
+    ShareableModal,
+    PlayStoryModal,
   ],
   imports: [
     BrowserModule,
@@ -39,7 +41,8 @@ import {ShareableLoader} from 'ui/common/shareable-loader';
     Modal,
     LoadingModal,
     MessageModal,
-    ShareableModal
+    ShareableModal,
+    PlayStoryModal,
   ],
   providers: [
     EventBus,

src/ui/common/event-bus/index.ts

@@ -47,6 +47,12 @@ export class EventBus {
     EventBus.subject.next(new Event(EventType.SHAREABLE_MODAL, eventPayload));
   }
 
+  onPlayStoryModal(callback: Function) {
+    const eventPayload = { callback };
+
+    EventBus.subject.next(new Event(EventType.PLAY_STORY_MODAL, eventPayload));
+  }
+
   onExploreModal() {
     EventBus.subject.next(new Event(EventType.OPEN_EXPLORE_MODAL, null));
   }
@@ -84,6 +90,7 @@ export enum EventType {
   STOP_LOADING,
   OPEN_FILE_LOADER,
   SHAREABLE_MODAL,
+  PLAY_STORY_MODAL,
   OPEN_EXPLORE_MODAL,
   HOTSPOT_EDITOR_VISIBILITY
 }

src/ui/common/modal/modal.html

@@ -18,4 +18,8 @@
     [shareableData]="shareableData">
   </shareable-modal>
 
+  <play-story-modal
+    *ngIf="isPlayStoryModal()"
+    (onClose)="closeModal($event)">
+  </play-story-modal>
 </div>

src/ui/common/modal/modal.ts

@@ -8,7 +8,8 @@ const MODAL_TYPE = {
   MESSAGE: 'MESSAGE',
   LOADER: 'LOADER',
   SHARABLE: 'SHARABLE',
-  EXPLORE: 'EXPLORE'
+  EXPLORE: 'EXPLORE',
+  PLAY_STORY: 'PLAY_STORY',
 };
 
 @Component({
@@ -26,6 +27,7 @@ export class Modal {
     isMessage: false
   };
   private shareableData;
+  private playStoryCallback;
 
   private isOpen: boolean;
   private sharableId: string = '';
@@ -47,9 +49,10 @@ export class Modal {
   closeModal($event) {
     if (!$event.isAccepted && this.onDismiss) {
       this.onDismiss();
-    }
-    else if ($event.isAccepted && this.onAccept) {
+    } else if ($event.isAccepted && this.onAccept) {
       this.onAccept();
+    } else if (this.isPlayStoryModal() && this.playStoryCallback) {
+      this.playStoryCallback();
     }
     this.clearValues();
   }
@@ -103,6 +106,19 @@ export class Modal {
         }
       );
 
+    const onPlayStory: Subscription = this.eventBus.getObservable(EventType.PLAY_STORY_MODAL)
+      .subscribe(
+        event => {
+          this.isOpen = true;
+          this.activeModalType = MODAL_TYPE.PLAY_STORY;
+          this.playStoryCallback = event.callback;
+        },
+        error => {
+          console.log('error', error);
+          this.isOpen = false;
+        }
+      );
+
     const onExploreModal: Subscription = this.eventBus.getObservable(EventType.OPEN_EXPLORE_MODAL)
       .subscribe(
         event => {
@@ -116,6 +132,7 @@ export class Modal {
       );
 
     this.subscriptions.add(onSharable);
+    this.subscriptions.add(onPlayStory);
     this.subscriptions.add(onStartLoading);
     this.subscriptions.add(onStopLoading);
     this.subscriptions.add(onMessage);
@@ -146,4 +163,8 @@ export class Modal {
     return this.activeModalType === MODAL_TYPE.LOADER;
   }
 
+  private isPlayStoryModal() {
+    return this.activeModalType === MODAL_TYPE.PLAY_STORY;
+  }
+
 }

src/ui/common/modal/play-story-modal/play-story-modal.html

@@ -0,0 +1,10 @@
+<div class="modal__content play-story-modal">
+  <div class="modal__content-body">
+    <p>You are about to begin your <br> SocialVR experience!</p>
+    <p>Press play to continue:</p>
+
+    <button type="button" class="play-btn" (click)="closeModal()">
+      <img src="assets/icons/view-preview-accent.png" alt="">
+    </button>
+  </div>
+</div>

src/ui/common/modal/play-story-modal/play-story-modal.scss

@@ -0,0 +1,31 @@
+.play-story-modal {
+  .modal__content-body {
+    padding: 40px;
+    text-align: center;
+
+    p {
+      margin: 10px 0;
+    }
+
+    .play-btn {
+      margin-top: 10px;
+      width: 45px;
+      height: 45px;
+      cursor: pointer;
+      padding: 0;
+      border: none;
+      background: transparent;
+      opacity: 1;
+      transition: opacity .25s;
+
+      img {
+        width: 100%;
+        height: 100%;
+      }
+
+      &:hover {
+        opacity: .7;
+      }
+    }
+  }
+}

src/ui/common/modal/play-story-modal/play-story-modal.ts

@@ -0,0 +1,15 @@
+import { Component, EventEmitter, Output } from '@angular/core';
+
+@Component({
+  selector: 'play-story-modal',
+  styleUrls: ['./play-story-modal.scss'],
+  templateUrl: './play-story-modal.html'
+})
+export class PlayStoryModal {
+
+  @Output() onClose = new EventEmitter();
+
+  public closeModal() {
+    this.onClose.emit({});
+  }
+}

src/ui/common/shareable-loader/index.ts

@@ -26,14 +26,14 @@ export class ShareableLoader {
     this.eventBus.onStartLoading();
     this.projectInteractor.openPublicProject(projectUrl)
       .subscribe(
-        response => {
+        () => {
           const homeRoomID = this.sceneInteractor.getHomeRoomId();
           this.sceneInteractor.setActiveRoomId(homeRoomID);
           this.eventBus.onSelectRoom(null, false);
           this.eventBus.onStopLoading();
           this.metaDataInteractor.setIsReadOnly(true);
           //this.router.navigateByUrl('/editor');
-          this.router.navigate(['editor', {outlets: {'view': 'preview'}}]);
+          this.router.navigate(['editor', {outlets: {'view': 'preview'}}], {queryParams: { share: 1 }});
         },
         error => {
           this.eventBus.onStopLoading();

src/ui/editor/_module/editor.ts

@@ -1,6 +1,5 @@
 import {
   Component,
-  Input,
   Output,
   HostListener,
   ElementRef,
@@ -17,9 +16,6 @@ import {SHARED_KEY} from 'ui/editor/util/publicLinkHelper';
 import {ZipFileReader} from 'ui/editor/util/zipFileReader';
 import {SceneInteractor} from 'core/scene/sceneInteractor';
 import {VideoInteractor} from 'core/video/VideoInteractor';
-import {RoomProperty} from 'data/scene/interfaces/RoomProperty';
-import {Audio} from 'data/scene/entities/audio';
-import {Image} from 'data/scene/entities/image';
 import {Universal} from 'data/scene/entities/universal';
 import {Room} from 'data/scene/entities/room';
 import {Vector2} from 'data/scene/entities/vector2';

src/ui/editor/preview-space/preview-space/preview-space.ts

@@ -21,6 +21,7 @@ import {buildScene, onResize} from 'ui/editor/util/threeUtil';
 import SvrControls from 'ui/editor/util/SvrControls';
 import {THREE_CONST} from 'ui/common/constants';
 import fontHelper from 'ui/editor/preview-space/modules/fontHelper';
+import { EventBus } from '../../../common/event-bus';
 
 const Stats = require('stats.js');
 const stats = new Stats();
@@ -67,7 +68,6 @@ export class PreviewSpace implements AfterViewInit {
   //private onResizeFn: Function = this.onResize.bind(this);
   private onResizeFn: EventListenerObject = {handleEvent: this.onResize.bind(this)};
   private onVrDisplayChangeFn: EventListenerObject = {handleEvent: this.onVrDisplayChange.bind(this)};
-  private onCheckAudioContext: EventListenerObject = {handleEvent: this.checkAudioContextState.bind(this)};
 
   // private onVrDisplayChangeFn: Function = this.onVrDisplayChange.bind(this);
 
@@ -83,7 +83,8 @@ export class PreviewSpace implements AfterViewInit {
     private textureLoader: TextureLoader,
     private hotspotManager: HotspotManager,
     private menuManager: MenuManager,
-    private reticle: Reticle
+    private reticle: Reticle,
+    private eventBus: EventBus,
   ) {
   }
 
@@ -103,7 +104,6 @@ export class PreviewSpace implements AfterViewInit {
 
     this.shouldInit = true;
     this.ngZone.runOutsideAngular(() => {
-      document.addEventListener('click', this.onCheckAudioContext, false);
       window.addEventListener('resize', this.onResizeFn, false);
       window.addEventListener('vrdisplaypresentchange', this.onVrDisplayChangeFn, false);
     });
@@ -116,8 +116,6 @@ export class PreviewSpace implements AfterViewInit {
 
     const roomId = this.sceneInteractor.getActiveRoomId();
 
-    this.showUnmuteButton = this.audioManager.hasAutoplayAudio(roomId) && this.audioManager.isAudioContextSuspended();
-
     Promise.all([
       this.audioManager.loadBuffers(),
       this.textureLoader.load(),
@@ -130,7 +128,6 @@ export class PreviewSpace implements AfterViewInit {
 
   ngOnDestroy() {
     // this.svrControls.dispose();
-    window.removeEventListener('click', this.checkAudioContextState, false);
     window.removeEventListener('resize', this.onResizeFn, false);
     window.removeEventListener('vrdisplaypresentchange', this.onVrDisplayChangeFn, false);
 
@@ -160,10 +157,6 @@ export class PreviewSpace implements AfterViewInit {
   ///////////  INITIALIZATION     //////////////
   //////////////////////////////////////////////
 
-  private checkAudioContextState() {
-    this.audioManager.checkAudioContextState();
-  }
-
   private initScene() {
     const canvas = this.globeCanvas.nativeElement;
     const scenePrimitives = buildScene();
@@ -200,68 +193,32 @@ export class PreviewSpace implements AfterViewInit {
     room.getBackgroundIsVideo() ? this.init3dRoom(room) : this.init2dRoom(roomId);
 
     this.audioManager.stopAllAudio(!isTransition);
-    this.audioManager.playBackgroundAudio();
-    this.audioManager.playNarration();
-    this.audioManager.playSoundtrack();
-    this.isInRenderLoop = true;
 
-    /*
-    if (!this.vrDisplay && this.vrDisplay.isPresenting)  {
-    // tween with fov
-    this.camera.fov = THREE_CONST.FOV_OUT;
-
-    var tweenRoomIn = new TWEEN.Tween(this.camera)
-    .to({
-        fov: THREE_CONST.FOV_NORM
-    },THREE_CONST.TWEEN_ROOM_MOVETIMEIN)
-    .easing(TWEEN.Easing.Linear.None).onUpdate( () => { })
-    .onComplete( () => {
-      //console.log("Init room: ",roomId);
-      this.roomHistory.push(roomId);
-    }).start();
-    } else {
-      this.roomHistory.push(roomId);
+    const isShare = this.router.url.indexOf('share=1') !== -1;
+
+    if (isShare) {
+      this.eventBus.onPlayStoryModal(() => {
+        this.startPlay();
+      });
+      return;
     }
-    */
-
-    //tween with sphere position towards is
-    // this.sphereMesh.position.set(THREE_CONST.TWEEN_ROOM_MOVEIN,0,0);
-    // var tweenRoomOut = new TWEEN.Tween(this.sphereMesh.position).to({
-    //     x: 0,
-    //     y: 0,
-    //     z: 0
-    // },THREE_CONST.TWEEN_ROOM_MOVETIMEIN).easing(TWEEN.Easing.Linear.None).onUpdate( () => {
-    //
-    // }).onComplete( () => {
-    //   //console.log("onCopmlete for tween");
-    //   this.roomHistory.push(roomId);
-    // }).start();
+    this.startPlay();
 
     this.roomHistory.push(roomId);
   }
 
+  private startPlay() {
+    this.audioManager.playBackgroundAudio();
+    this.audioManager.playNarration();
+    this.audioManager.playSoundtrack();
+    this.isInRenderLoop = true;
+    this.audioManager.checkAudioContextState();
+  }
+
   //for still image backgrounds
   private init2dRoom(roomId: string) {
     const sphereTexture = this.assetInteractor.getTextureById(roomId);
 
-    // console.log('shaders', roomSphereFragShader, roomSphereVertShader);
-    // this.sphereMesh.material = new THREE.ShaderMaterial({
-    //   wireframe: true,
-    //   uniforms: {
-    //     time: {
-    //       type: 'f',
-    //       value: 0
-    //     },
-    //     texture: {
-    //       type: 't',
-    //       value: sphereTexture
-    //     }
-    //   },
-    //   vertexShader: roomSphereVertShader,
-    //   fragmentShader: roomSphereFragShader,
-    //   side: THREE.FrontSide
-    // });
-
     if (this.sphereMesh.material) {
       if (this.sphereMesh.material['map']) {
         this.sphereMesh.material['map'].dispose();