Client: use videojs as player

4 files changed, 18 insertions, 7 deletions

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;