/* * Copyright 2018 Amazon.com, Inc. or its affiliates. All Rights Reserved. * * Licensed under the Apache License, Version 2.0 (the "License"). You may not use this file except in compliance with * the License. A copy of the License is located at * * http://aws.amazon.com/apache2.0/ * * or in the "license" file accompanying this file. This file is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR * CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions * and limitations under the License. */ import { Component, OnInit, OnDestroy, Input } from '@angular/core'; import { Logger, XR } from 'aws-amplify'; import { AmplifyService } from '../../../providers'; import * as AmplifyUI from '@aws-amplify/ui'; const logger = new Logger('SumerianSceneComponentCore'); const template = `

`; @Component({ selector: 'sumerian-scene-core', template }) export class SumerianSceneComponentCore implements OnInit, OnDestroy { @Input() sceneName: string; loading = false; loadPercentage = 0; muted = false; showEnableAudio = false; isVRCapable = false; isFullscreen = false; sceneError = null; amplifyService: AmplifyService; amplifyUI: AmplifyUI; @Input() set data(data: any) { this.sceneName = data.sceneName; } constructor(amplifyService: AmplifyService) { this.amplifyService = amplifyService; this.amplifyUI = AmplifyUI; } ngOnInit() { document.addEventListener('fullscreenchange', this.onFullscreenChange.bind(this)); document.addEventListener('webkitfullscreenchange', this.onFullscreenChange.bind(this)); document.addEventListener('mozfullscreenchange', this.onFullscreenChange.bind(this)); document.addEventListener('MSFullscreenChange', this.onFullscreenChange.bind(this)); this.loadAndStartScene(); } ngOnDestroy() { document.removeEventListener('fullscreenchange', this.onFullscreenChange.bind(this)); document.removeEventListener('webkitfullscreenchange', this.onFullscreenChange.bind(this)); document.removeEventListener('mozfullscreenchange', this.onFullscreenChange.bind(this)); document.removeEventListener('MSFullscreenChange', this.onFullscreenChange.bind(this)); } progressCallback = (progress) => { const percentage = progress * 100; this.loadPercentage = percentage; }; async loadAndStartScene() { this.loading = true; const sceneOptions = { progressCallback: this.progressCallback }; try { await XR.loadScene(this.sceneName, "sumerian-scene-dom-id", sceneOptions); } catch (e) { this.sceneError = 'Failed to load scene'; logger.error(this.sceneError, e); return; } XR.start(this.sceneName); this.loading = false; this.muted = XR.isMuted(this.sceneName); this.isVRCapable = XR.isVRCapable(this.sceneName); XR.onSceneEvent(this.sceneName, 'AudioEnabled', () => this.showEnableAudio = false); XR.onSceneEvent(this.sceneName, 'AudioDisabled', () => this.showEnableAudio = true); } setMuted(muted) { this.muted = muted; XR.setMuted(this.sceneName, muted); if (this.showEnableAudio) { XR.enableAudio(this.sceneName); this.showEnableAudio = false; } } enterVR() { XR.enterVR(this.sceneName); } onFullscreenChange() { const doc: any = document; this.isFullscreen = doc.fullscreenElement !== null; } async maximize() { const sceneDomElement: any = document.getElementById("sumerian-scene-container"); const requestFullScreen = sceneDomElement.requestFullscreen || sceneDomElement.msRequestFullscreen || sceneDomElement.mozRequestFullScreen || sceneDomElement.webkitRequestFullscreen; requestFullScreen.call(sceneDomElement); } async minimize() { const doc: any = document; if(doc.exitFullscreen) { doc.exitFullscreen(); } else if(doc.mozCancelFullScreen) { doc.mozCancelFullScreen(); } else if(doc.webkitExitFullscreen) { doc.webkitExitFullscreen(); } } }