Client: use videojs as player

diff --git a/client/package.json b/client/package.json
index 34f79ee286e8fdf536e2b7948c66867fd59d8dab..93653d006061ef81bc97e08dc31d00e010a022a5 100644 (file)
--- 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 d75ed3538bb4bbb884d57a923df4372d39c494b4..0bbb5d3e8531701944bca710118b39c1cf00fa9a 100644 (file)
--- 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 e1d9300cd625baf64331d6d3bfd5dafb8c2cbebd..9d335c3baf6d99abeecc113cb59fe8790cbd3bd0 100644 (file)
--- 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 1d5fd45eebb841525d3576bb85c4a791a6dc8982..6012daa5c833cc42bd438ff4f938022195cb49a6 100644 (file)
--- 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 b3bdffe5055150f15954aafc95fa4e2edf9df0ec..763e251f0331c4cc672686f88c9ad68813ac526a 100644 (file)
--- 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 10573b8ee4e1c188b8d90ba3ec8dfad03dcc3410..d70710b82f1455e139d6eb129dc355dec379feeb 100644 (file)
--- a/client/tsconfig.json
+++ b/client/tsconfig.json
@@ -20,6 +20,7 @@
       "node",
       "source-map",
       "uglify-js",
+      "videojs",
       "webpack"
     ]
   },