Client: use videojs as player

6 files changed, 20 insertions, 7 deletions

diff --git a/client/package.json b/client/package.json
index 34f79ee28..93653d006 100644
--- a/client/package.json
+++ b/client/package.json
@@ -32,6 +32,7 @@
     "@types/node": "^6.0.38",
     "@types/source-map": "^0.1.26",
     "@types/uglify-js": "^2.0.27",
+    "@types/videojs": "0.0.30",
     "@types/webpack": "^1.12.29",
     "angular-pipes": "^4.0.0",
     "angular2-template-loader": "^0.6.0",
diff --git a/client/src/app/videos/video-watch/video-watch.component.html b/client/src/app/videos/video-watch/video-watch.component.html
index d75ed3538..0bbb5d3e8 100644
--- a/client/src/app/videos/video-watch/video-watch.component.html
+++ b/client/src/app/videos/video-watch/video-watch.component.html
@@ -16,7 +16,7 @@
 <div class="row">
   <div class="col-md-12">
     <div class="embed-responsive embed-responsive-19by9">
-      <my-loader [loading]="loading"></my-loader>
+       <video id="video-container" class="video-js vjs-default-skin vjs-big-play-centered"></video>
     </div>
   </div>
 </div>
diff --git a/client/src/app/videos/video-watch/video-watch.component.scss b/client/src/app/videos/video-watch/video-watch.component.scss
index e1d9300cd..9d335c3ba 100644
--- a/client/src/app/videos/video-watch/video-watch.component.scss
+++ b/client/src/app/videos/video-watch/video-watch.component.scss
@@ -1,8 +1,6 @@
-my-loader {
-  display: block;
-  padding-top: 200px;
+#video-container {
   width: 100%;
-  text-align: center;
+  height: 100%;
 }
 
 .embed-responsive {
diff --git a/client/src/app/videos/video-watch/video-watch.component.ts b/client/src/app/videos/video-watch/video-watch.component.ts
index 1d5fd45ee..6012daa5c 100644
--- a/client/src/app/videos/video-watch/video-watch.component.ts
+++ b/client/src/app/videos/video-watch/video-watch.component.ts
@@ -3,6 +3,7 @@ import { ActivatedRoute } from '@angular/router';
 
 import { ModalDirective } from 'ng2-bootstrap/components/modal';
 import { MetaService } from 'ng2-meta';
+import * as videojs from 'video.js';
 
 import { Video, VideoService } from '../shared';
 import { WebTorrentService } from './webtorrent.service';
@@ -22,6 +23,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
   error: boolean = false;
   loading: boolean = false;
   numPeers: number;
+  player: VideoJSPlayer;
   uploadSpeed: number;
   video: Video = null;
 
@@ -50,6 +52,16 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
         error => alert(error.text)
       );
     });
+
+    const videojsOptions = {
+      controls: true,
+      autoplay: false
+    };
+
+    const self = this;
+    videojs('video-container', videojsOptions, function () {
+      self.player = this;
+    });
   }
 
   ngOnDestroy() {
@@ -62,7 +74,6 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
   }
 
   loadVideo() {
-
     console.log('<iframe width="560" height="315" src="' + window.location.origin + '/videos/embed/' + this.video.id + '" frameborder="0" allowfullscreen></iframe>');
 
     // Reset the error
@@ -86,7 +97,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
       this.loading = false;
 
       console.log('Added ' + this.video.magnetUri + '.');
-      torrent.files[0].appendTo(this.elementRef.nativeElement.querySelector('.embed-responsive'), (err) => {
+      torrent.files[0].renderTo('#video-container video', { autoplay: true }, (err) => {
         if (err) {
           alert('Cannot append the file.');
           console.error(err);
diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index b3bdffe50..763e251f0 100644
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -1,3 +1,5 @@
+@import '../video.js/dist/video-js.css';
+
 body {
   padding: 20px;
 
diff --git a/client/tsconfig.json b/client/tsconfig.json
index 10573b8ee..d70710b82 100644
--- a/client/tsconfig.json
+++ b/client/tsconfig.json
@@ -20,6 +20,7 @@
       "node",
       "source-map",
       "uglify-js",
+      "videojs",
       "webpack"
     ]
   },