Moved to webpack

Author: Elecash

.gitignore

@@ -1,12 +1,4 @@
-env.json
-.vscode
-.idea/
-/node_modules
-/bower_components
-/build
-/report
-/typings
-/src/tmp
-.DS_Store
-/src/assets/styles/*.css
-/src/fonts/
+# Created by .ignore support plugin (hsz.mobi)
+node_modules
+dist
+aot

LICENSE

@@ -1,2 +1,37 @@
-# Videogular 2 
-## Angular Connect 2016 demo
+# Videogular 2 Starter
+
+## Introduction
+Welcome to Videogular 2 Starter!
+
+## Prerequisites
+You need to have [Node.js and npm](https://nodejs.org/en/)
+- Support Node v4 - latest
+- Support npm v3 - latest
+
+## Installation
+
+Install:
+```bash
+npm install
+```
+
+## NPM commands
+Start development server:
+```bash
+npm start
+```
+Build app for development:
+```bash
+npm run build
+```
+Start production server:
+```bash
+npm run start:prod
+```
+Build app for production:
+```bash
+npm run build:prod
+```
+
+## License
+MIT

README.md

@@ -9,7 +9,7 @@
 
     <a-scene vr-mode-ui="enabled: true" (renderstart)="onAframeRenderStart()">
         <a-assets>
-            <video [src]="currentVideo.url" vg-media id="video" preload="auto" crossorigin="anonymous" loop>
+            <video [src]="currentVideo.url" vg-media id="video" preload="auto" crossorigin="anonymous" loop autoplay muted>
                 <track [src]="currentVideo.track" kind="metadata" label="Cue Points" default
                        #metadataTrack
                        vgCuePoints
@@ -29,34 +29,34 @@
                 (mouseenter)="onMouseEnterPlane(txtPlane)"
                 opacity="0">
         </a-plane>
-        
+
         <a-text
-            *ngFor="let txt of currentVideo.texts; let i=index"
-            color="#FFF"
-            [id]="txt.id"
-            [attr.depth]="10 + i"
-            [attr.position]="txt.position"
-            [attr.rotation]="txt.rotation"
-            [attr.scale]="txt.scale"
-            [attr.text]="txt.text"
-            [attr.animation__visibility]="txt.opaAnim"
-            [attr.animation__position]="txt.posAnim"
-            opacity="0">
+                *ngFor="let txt of currentVideo.texts; let i=index"
+                color="#FFF"
+                [id]="txt.id"
+                [attr.depth]="10 + i"
+                [attr.position]="txt.position"
+                [attr.rotation]="txt.rotation"
+                [attr.scale]="txt.scale"
+                [attr.text]="txt.text"
+                [attr.animation__visibility]="txt.opaAnim"
+                [attr.animation__position]="txt.posAnim"
+                opacity="0">
         </a-text>
 
         <a-image
-            *ngFor="let door of currentVideo.doors; let i=index"
-            [id]="door.id"
-            [attr.depth]="100 + i"
-            [attr.position]="door.position"
-            [attr.rotation]="door.rotation"
-            src="#ringImg"
-            scale="0 0 0"
-            (mouseenter)="onMouseEnter($event, door)"
-            (mouseleave)="onMouseLeave($event)"
-            animation__fadein="startEvents: vgStartFadeInAnimation; property: scale; dur: 2000; to: 1 1 1"
-            animation__scale="startEvents: vgStartAnimation; pauseEvents: vgPauseAnimation; property: scale; dur: 2000; from: 1 1 1; to: 2 2 2"
-            animation__visibility="startEvents: vgStartAnimation; pauseEvents: vgPauseAnimation; property: material.opacity; dur: 2000; from: 1; to: 0">
+                *ngFor="let door of currentVideo.doors; let i=index"
+                [id]="door.id"
+                [attr.depth]="100 + i"
+                [attr.position]="door.position"
+                [attr.rotation]="door.rotation"
+                src="#ringImg"
+                scale="0 0 0"
+                (mouseenter)="onMouseEnter($event, door)"
+                (mouseleave)="onMouseLeave($event)"
+                animation__fadein="startEvents: vgStartFadeInAnimation; property: scale; dur: 2000; to: 1 1 1"
+                animation__scale="startEvents: vgStartAnimation; pauseEvents: vgPauseAnimation; property: scale; dur: 2000; from: 1 1 1; to: 2 2 2"
+                animation__visibility="startEvents: vgStartAnimation; pauseEvents: vgPauseAnimation; property: material.opacity; dur: 2000; from: 1; to: 0">
         </a-image>
 
         <a-videosphere src="#video"></a-videosphere>

src/app/vr-player.html renamed to app/app.component.html

@@ -0,0 +1,16 @@
+.title {
+    position: absolute;
+    color: white;
+    z-index: 500;
+    font-size: 60px;
+    background: black;
+    padding: 10px;
+    margin: 10px;
+    opacity: 0.5;
+    font-family: Helvetica, Arial, sans-serif;
+    transition: all 0.5s ease;
+
+    &.hide {
+        opacity: 0;
+    }
+}

app/app.component.scss

@@ -1,5 +1,5 @@
 import { Component, OnInit, ElementRef } from '@angular/core';
-import { VgFullscreenAPI, VgAPI } from 'videogular2/core'; 
+import { VgAPI } from 'videogular2/core';
 
 
 interface IAframeEntity {
@@ -24,7 +24,7 @@ interface IVrTextPlane extends IAframeEntity {
     height: number;
     isShown: boolean;
 }
-interface Video {
+interface IVideo {
     id: string;
     url: string;
     track: string;
@@ -35,34 +35,18 @@ interface Video {
 
 @Component({
     selector: 'vr-player',
-    templateUrl: './app/vr-player.html',
-    styles: [`
-        .title {
-            position: absolute;
-            color: white;
-            z-index: 500;
-            font-size: 60px;
-            background: black;
-            padding: 10px;
-            margin: 10px;
-            opacity: 0.5;
-            font-family: Helvetica, Arial, sans-serif;
-            transition: all 0.5s ease;
-        }
-        .title.hide {
-            opacity: 0;
-        }
-    `]
+    templateUrl: 'app.component.html',
+    styleUrls: ['app.component.scss']
 })
 export class VRPlayer implements OnInit {
     elem: any;
     aframe: any;
     cuePointData: any = {};
     hideTitle: boolean = true;
-    currentVideo: Video;
-    timeout: number;
+    currentVideo: IVideo;
+    timeout: any;
     vgApi:VgAPI;
-    videos: Array<Video> = [
+    videos: Array<IVideo> = [
         {
             id: 'v0',
             url: 'http://static.videogular.com/assets/videos/vr-route-0.mp4',
@@ -84,7 +68,7 @@ export class VRPlayer implements OnInit {
             texts: [
                 {
                     id: 't1',
-                    text: 'St. Maurici lake (1910 m)',
+                    text: 'St. Maurici lake',
                     position: '6 0 -4',
                     rotation: '0 -30 0',
                     scale: '2 2 2',
@@ -129,7 +113,7 @@ export class VRPlayer implements OnInit {
             texts: [
                 {
                     id: 't1',
-                    text: 'Ratera lake (2370 m)',
+                    text: 'Ratera lake',
                     position: '9 0 -7',
                     rotation: '0 -90 0',
                     scale: '2 2 2',
@@ -150,7 +134,6 @@ export class VRPlayer implements OnInit {
 
     ngOnInit() {
         this.aframe = this.elem.querySelector('a-scene');
-        //VgFullscreenAPI.onChangeFullscreen.subscribe(this.onChangeFullscreen.bind(this));
     }
 
     onAframeRenderStart() {
@@ -174,15 +157,6 @@ export class VRPlayer implements OnInit {
             .forEach(item => item.dispatchEvent(new CustomEvent('vgStartFadeInAnimation')));
     }
 
-    onChangeFullscreen(fsState) {
-        if (fsState) {
-            this.aframe.addFullScreenStyles();
-        }
-        else {
-            this.aframe.removeFullScreenStyles();
-        }
-    }
-
     onMouseEnterPlane(plane:IVrTextPlane) {
         if (!plane.isShown) {
             let target = document.querySelector('#' + plane.target);
@@ -191,15 +165,15 @@ export class VRPlayer implements OnInit {
         }
     }
 
-    onMouseEnter($event, door:IVrDoor) {
+    onMouseEnter($event:any, door:IVrDoor) {
         $event.target.dispatchEvent(new CustomEvent('vgStartAnimation'));
 
         this.timeout = setTimeout( () => {
             this.currentVideo = this.videos.filter( v => v.id === door.goto )[0];
         }, 2000 );
     }
 
-    onMouseLeave($event) {
+    onMouseLeave($event:any) {
         $event.target.dispatchEvent(new CustomEvent('vgPauseAnimation'));
 
         // Send start and pause again to reset the scale and opacity
@@ -209,18 +183,17 @@ export class VRPlayer implements OnInit {
         clearTimeout(this.timeout);
     }
 
-    onEnterCuePoint($event) {
+    onEnterCuePoint($event:any) {
         this.hideTitle = false;
         this.cuePointData = JSON.parse($event.text);
     }
 
-    onExitCuePoint($event) {
+    onExitCuePoint($event:any) {
         this.hideTitle = true;
 
         // wait transition
         setTimeout( () => {
             this.cuePointData = {};
         }, 500 );
-
     }
 }

src/app/vr-player.ts renamed to app/app.component.ts

@@ -0,0 +1,16 @@
+import {NgModule, CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
+import {BrowserModule} from '@angular/platform-browser';
+
+import {VRPlayer}  from './app.component';
+
+import {VgCore} from 'videogular2/core';
+import {VgControlsModule} from 'videogular2/controls';
+
+@NgModule({
+    imports: [BrowserModule, VgCore, VgControlsModule],
+    declarations: [VRPlayer],
+    bootstrap: [VRPlayer],
+    schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+export class AppModule {
+}

app/app.module.ts

@@ -0,0 +1,5 @@
+import {platformBrowser} from '@angular/platform-browser';
+
+import {AppModuleNgFactory} from '../aot/app/app.module.ngfactory';
+
+platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);

app/bootstrap-prod.ts

@@ -0,0 +1,5 @@
+import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
+
+import {AppModule} from './app.module';
+
+platformBrowserDynamic().bootstrapModule(AppModule);

app/bootstrap.ts

@@ -0,0 +1,9 @@
+html {
+  width: 100%;
+  height: 100%; }
+
+body {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0; }