Add cue points

Author: Elecash

config/gulp/tasks/build.js

@@ -19,7 +19,7 @@ gulp.task('build', function (done) {
 
 /* Concat and minify/uglify all css, js, and copy fonts */
 gulp.task('build-assets', function (done) {
-    runSequence('clean-build', ['sass', 'fonts'], function () {
+    runSequence('clean-build', ['sass', 'fonts', 'data'], function () {
         gulp.src(config.app + '**/*.html', {
             base: config.app
         })
@@ -63,6 +63,14 @@ gulp.task('fonts', function () {
     .pipe(gulp.dest(config.build.fonts));
 });
 
+/* Copy vtt files */
+gulp.task('data', function () {
+    gulp.src(config.assets + 'data/**/*.*', {
+        base: config.assets + 'data/'
+    })
+    .pipe(gulp.dest(config.build.path + '/data'));
+});
+
 gulp.task('env', function () {
     return gulp.src(config.config + 'env/env.ts')
         .pipe(gulpTemplate({

src/app/shared/constant/env.ts

@@ -1,6 +1,6 @@
 /**
  * THIS FILE IS GENERATED by `gulp env` command from `env.json`
- * Generated on Sun Sep 18 2016 12:01:09 GMT+0200 (CEST)
+ * Generated on Sun Sep 18 2016 18:49:34 GMT+0200 (CEST)
  *
  * Make sure the keys in `env.model.ts` exist in `env.json`
  * otherwise it'll throw message like this

src/app/vr-player.html

@@ -1,24 +1,21 @@
 <vg-player (onPlayerReady)="onPlayerReady($event)">
-    <vg-controls>
-        <vg-play-pause></vg-play-pause>
+    <div class="title" [ngClass]="{ 'hide': hideTitle }">{{ cuePointData.title }}</div>
 
-        <vg-time-display property="current" format="mm:ss"></vg-time-display>
+    <vg-scrub-bar style="bottom: 0;">
+        <vg-scrub-bar-current-time></vg-scrub-bar-current-time>
+        <vg-scrub-bar-buffering-time></vg-scrub-bar-buffering-time>
+        <vg-scrub-bar-cue-points [cuePoints]="metadataTrack.cues"></vg-scrub-bar-cue-points>
+    </vg-scrub-bar>
 
-        <vg-scrub-bar>
-            <vg-scrub-bar-current-time></vg-scrub-bar-current-time>
-            <vg-scrub-bar-buffering-time></vg-scrub-bar-buffering-time>
-        </vg-scrub-bar>
-
-        <vg-time-display property="left" format="mm:ss"></vg-time-display>
-
-        <vg-mute></vg-mute>
-
-        <vg-fullscreen></vg-fullscreen>
-    </vg-controls>
-
-    <a-scene vr-mode-ui="enabled: false" (renderstart)="onAframeRenderStart()">
+    <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>
+            <video [src]="currentVideo.url" vg-media id="video" preload="auto" crossorigin="anonymous" loop>
+                <track [src]="currentVideo.track" kind="metadata" label="Cue Points" default
+                       #metadataTrack
+                       vgCuePoints
+                       (onEnterCuePoint)="onEnterCuePoint($event)"
+                       (onExitCuePoint)="onExitCuePoint($event)">
+            </video>
             <img id="ringImg" src="assets/images/ring1.png" width="512" height="512">
         </a-assets>
 
@@ -65,7 +62,7 @@
         <a-videosphere src="#video"></a-videosphere>
 
         <a-camera>
-            <a-cursor color="#2E3A87"></a-cursor>
+            <a-cursor color="#FFFFFF"></a-cursor>
         </a-camera>
     </a-scene>
 </vg-player>

src/app/vr-player.ts

@@ -2,21 +2,21 @@ import { Component, OnInit, ElementRef } from '@angular/core';
 import { VgFullscreenAPI, VgAPI } from 'videogular2/core'; 
 
 
-interface AframeEntity {
+interface IAframeEntity {
     id: string;
     position: string;
     rotation: string;
 }
-interface VrDoor extends AframeEntity {
+interface IVrDoor extends IAframeEntity {
     goto: string;
 }
-interface VrText extends AframeEntity {
+interface IVrText extends IAframeEntity {
     text: string;
     scale: string;
     opaAnim: string;
     posAnim: string;
 }
-interface VrTextPlane extends AframeEntity {
+interface IVrTextPlane extends IAframeEntity {
     position: string;
     rotation: string;
     target: string;
@@ -27,25 +27,46 @@ interface VrTextPlane extends AframeEntity {
 interface Video {
     id: string;
     url: string;
-    doors: Array<VrDoor>;
-    texts: Array<VrText>;
-    textPlanes: Array<VrTextPlane>;
+    track: string;
+    doors: Array<IVrDoor>;
+    texts: Array<IVrText>;
+    textPlanes: Array<IVrTextPlane>;
 }
 
 @Component({
     selector: 'vr-player',
-    templateUrl: './app/vr-player.html'
+    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;
+        }
+    `]
 })
 export class VRPlayer implements OnInit {
     elem: any;
     aframe: any;
+    cuePointData: any = {};
+    hideTitle: boolean = true;
     currentVideo: Video;
     timeout: number;
     vgApi:VgAPI;
     videos: Array<Video> = [
         {
             id: 'v0',
             url: 'http://static.videogular.com/assets/videos/vr-route-0.mp4',
+            track: 'assets/data/stage-1.vtt',
             doors: [
                 {id: 'd1', position: '-3 2 -10', rotation: '0 0 0', goto: 'v1'}
             ],
@@ -55,6 +76,7 @@ export class VRPlayer implements OnInit {
         {
             id: 'v1',
             url: 'http://static.videogular.com/assets/videos/vr-route-1.mp4',
+            track: 'assets/data/stage-2.vtt',
             doors: [
                 {id: 'd1', position: '-15 -3 -18', rotation: '0 -180 0', goto: 'v0'},
                 {id: 'd2', position: '8 1 9', rotation: '0 -130 0', goto: 'v2' }
@@ -77,6 +99,7 @@ export class VRPlayer implements OnInit {
         {
             id: 'v2',
             url: 'http://static.videogular.com/assets/videos/vr-route-2.mp4',
+            track: 'assets/data/stage-3.vtt',
             doors: [
                 {id: 'd1', position: '-1 1 -8', rotation: '0 -30 0', goto: 'v1'},
                 {id: 'd2', position: '0 2 7', rotation: '0 180 0', goto: 'v3'}
@@ -87,6 +110,7 @@ export class VRPlayer implements OnInit {
         {
             id: 'v3',
             url: 'http://static.videogular.com/assets/videos/vr-route-3.mp4',
+            track: 'assets/data/stage-4.vtt',
             doors: [
                 {id: 'd1', position: '-5 2 7', rotation: '0 130 0', goto: 'v2'},
                 {id: 'd2', position: '3 4 7', rotation: '0 210 0', goto: 'v4'}
@@ -97,6 +121,7 @@ export class VRPlayer implements OnInit {
         {
             id: 'v4',
             url: 'http://static.videogular.com/assets/videos/vr-route-4.mp4',
+            track: 'assets/data/stage-5.vtt',
             doors: [
                 {id: 'd1', position: '2 1 10', rotation: '0 180 0', goto: 'v3'},
                 {id: 'd2', position: '3 2 -10', rotation: '0 180 0', goto: 'v0'}
@@ -125,7 +150,7 @@ export class VRPlayer implements OnInit {
 
     ngOnInit() {
         this.aframe = this.elem.querySelector('a-scene');
-        VgFullscreenAPI.onChangeFullscreen.subscribe(this.onChangeFullscreen.bind(this));
+        //VgFullscreenAPI.onChangeFullscreen.subscribe(this.onChangeFullscreen.bind(this));
     }
 
     onAframeRenderStart() {
@@ -158,16 +183,15 @@ export class VRPlayer implements OnInit {
         }
     }
 
-    onMouseEnterPlane(plane:VrTextPlane) {
+    onMouseEnterPlane(plane:IVrTextPlane) {
         if (!plane.isShown) {
             let target = document.querySelector('#' + plane.target);
-            console.log(plane, target);
             target.dispatchEvent(new CustomEvent(plane.target));
             plane.isShown = true;
         }
     }
 
-    onMouseEnter($event, door:VrDoor) {
+    onMouseEnter($event, door:IVrDoor) {
         $event.target.dispatchEvent(new CustomEvent('vgStartAnimation'));
 
         this.timeout = setTimeout( () => {
@@ -184,4 +208,19 @@ export class VRPlayer implements OnInit {
 
         clearTimeout(this.timeout);
     }
+
+    onEnterCuePoint($event) {
+        this.hideTitle = false;
+        this.cuePointData = JSON.parse($event.text);
+    }
+
+    onExitCuePoint($event) {
+        this.hideTitle = true;
+
+        // wait transition
+        setTimeout( () => {
+            this.cuePointData = {};
+        }, 500 );
+
+    }
 }

src/assets/data/stage-1.vtt

@@ -0,0 +1,8 @@
+WEBVTT FILE
+
+stage-1
+00:00:05.200 --> 00:00:08.800
+{
+    "title": "Stage 1: Altitude 1610m"
+}
+

src/assets/data/stage-2.vtt

@@ -0,0 +1,8 @@
+WEBVTT FILE
+
+stage-1
+00:00:05.200 --> 00:00:08.800
+{
+    "title": "Stage 2: Altitude 1912m"
+}
+

src/assets/data/stage-3.vtt

@@ -0,0 +1,8 @@
+WEBVTT FILE
+
+stage-1
+00:00:05.200 --> 00:00:08.800
+{
+    "title": "Stage 3: Altitude 2085m"
+}
+

src/assets/data/stage-4.vtt

@@ -0,0 +1,8 @@
+WEBVTT FILE
+
+stage-1
+00:00:05.200 --> 00:00:08.800
+{
+    "title": "Stage 4: Altitude 2127m"
+}
+

src/assets/data/stage-5.vtt

@@ -0,0 +1,8 @@
+WEBVTT FILE
+
+stage-1
+00:00:05.200 --> 00:00:08.800
+{
+    "title": "Stage 5: Altitude 2370m"
+}
+

src/index.html

@@ -20,8 +20,6 @@
     <script src="../node_modules/core-js/client/shim.min.js"></script>
 
     <!-- Load libraries -->
-    <script src="../node_modules/d3-color/build/d3-color.min.js"></script>
-    <script src="../node_modules/d3-interpolate/build/d3-interpolate.min.js"></script>
     <script src="../node_modules/aframe/dist/aframe-v0.3.0.min.js"></script>
     <script src="../node_modules/aframe-animation-component/dist/aframe-animation-component.min.js"></script>
     <script src="../node_modules/aframe-bmfont-text-component/dist/aframe-bmfont-text-component.min.js"></script>