aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
authorChocobozzz <florian.bigard@gmail.com>2016-11-08 20:49:43 +0100
committerChocobozzz <florian.bigard@gmail.com>2016-11-08 20:49:43 +0100
commite31f6ad6373c70481bc5dc50bcd9691ef69b2c4b (patch)
treecf5a8b13babbc35be4e509f40a210fa31f81c5f8
parent3bb2c7f99dd495adac8e486e98f135c183642381 (diff)
downloadPeerTube-e31f6ad6373c70481bc5dc50bcd9691ef69b2c4b.tar.gz
PeerTube-e31f6ad6373c70481bc5dc50bcd9691ef69b2c4b.tar.zst
PeerTube-e31f6ad6373c70481bc5dc50bcd9691ef69b2c4b.zip
Client: use videojs as player
-rw-r--r--client/package.json1
-rw-r--r--client/src/app/videos/video-watch/video-watch.component.html2
-rw-r--r--client/src/app/videos/video-watch/video-watch.component.scss6
-rw-r--r--client/src/app/videos/video-watch/video-watch.component.ts15
-rw-r--r--client/src/sass/application.scss2
-rw-r--r--client/tsconfig.json1
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 @@
32 "@types/node": "^6.0.38", 32 "@types/node": "^6.0.38",
33 "@types/source-map": "^0.1.26", 33 "@types/source-map": "^0.1.26",
34 "@types/uglify-js": "^2.0.27", 34 "@types/uglify-js": "^2.0.27",
35 "@types/videojs": "0.0.30",
35 "@types/webpack": "^1.12.29", 36 "@types/webpack": "^1.12.29",
36 "angular-pipes": "^4.0.0", 37 "angular-pipes": "^4.0.0",
37 "angular2-template-loader": "^0.6.0", 38 "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 @@
16<div class="row"> 16<div class="row">
17 <div class="col-md-12"> 17 <div class="col-md-12">
18 <div class="embed-responsive embed-responsive-19by9"> 18 <div class="embed-responsive embed-responsive-19by9">
19 <my-loader [loading]="loading"></my-loader> 19 <video id="video-container" class="video-js vjs-default-skin vjs-big-play-centered"></video>
20 </div> 20 </div>
21 </div> 21 </div>
22</div> 22</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 @@
1my-loader { 1#video-container {
2 display: block;
3 padding-top: 200px;
4 width: 100%; 2 width: 100%;
5 text-align: center; 3 height: 100%;
6} 4}
7 5
8.embed-responsive { 6.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';
3 3
4import { ModalDirective } from 'ng2-bootstrap/components/modal'; 4import { ModalDirective } from 'ng2-bootstrap/components/modal';
5import { MetaService } from 'ng2-meta'; 5import { MetaService } from 'ng2-meta';
6import * as videojs from 'video.js';
6 7
7import { Video, VideoService } from '../shared'; 8import { Video, VideoService } from '../shared';
8import { WebTorrentService } from './webtorrent.service'; 9import { WebTorrentService } from './webtorrent.service';
@@ -22,6 +23,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
22 error: boolean = false; 23 error: boolean = false;
23 loading: boolean = false; 24 loading: boolean = false;
24 numPeers: number; 25 numPeers: number;
26 player: VideoJSPlayer;
25 uploadSpeed: number; 27 uploadSpeed: number;
26 video: Video = null; 28 video: Video = null;
27 29
@@ -50,6 +52,16 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
50 error => alert(error.text) 52 error => alert(error.text)
51 ); 53 );
52 }); 54 });
55
56 const videojsOptions = {
57 controls: true,
58 autoplay: false
59 };
60
61 const self = this;
62 videojs('video-container', videojsOptions, function () {
63 self.player = this;
64 });
53 } 65 }
54 66
55 ngOnDestroy() { 67 ngOnDestroy() {
@@ -62,7 +74,6 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
62 } 74 }
63 75
64 loadVideo() { 76 loadVideo() {
65
66 console.log('<iframe width="560" height="315" src="' + window.location.origin + '/videos/embed/' + this.video.id + '" frameborder="0" allowfullscreen></iframe>'); 77 console.log('<iframe width="560" height="315" src="' + window.location.origin + '/videos/embed/' + this.video.id + '" frameborder="0" allowfullscreen></iframe>');
67 78
68 // Reset the error 79 // Reset the error
@@ -86,7 +97,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
86 this.loading = false; 97 this.loading = false;
87 98
88 console.log('Added ' + this.video.magnetUri + '.'); 99 console.log('Added ' + this.video.magnetUri + '.');
89 torrent.files[0].appendTo(this.elementRef.nativeElement.querySelector('.embed-responsive'), (err) => { 100 torrent.files[0].renderTo('#video-container video', { autoplay: true }, (err) => {
90 if (err) { 101 if (err) {
91 alert('Cannot append the file.'); 102 alert('Cannot append the file.');
92 console.error(err); 103 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 @@
1@import '../video.js/dist/video-js.css';
2
1body { 3body {
2 padding: 20px; 4 padding: 20px;
3 5
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 @@
20 "node", 20 "node",
21 "source-map", 21 "source-map",
22 "uglify-js", 22 "uglify-js",
23 "videojs",
23 "webpack" 24 "webpack"
24 ] 25 ]
25 }, 26 },