aboutsummaryrefslogtreecommitdiffhomepage
path: root/client
diff options
context:
space:
mode:
Diffstat (limited to 'client')
-rw-r--r--client/src/app/videos/+video-watch/comment/video-comment.component.scss27
-rw-r--r--client/src/app/videos/+video-watch/comment/video-comments.component.scss10
-rw-r--r--client/src/app/videos/+video-watch/video-watch.component.scss2
-rw-r--r--client/src/assets/player/peertube-player.ts3
-rw-r--r--client/src/assets/player/peertube-videojs-plugin.ts35
-rw-r--r--client/src/assets/player/peertube-videojs-typings.ts1
6 files changed, 60 insertions, 18 deletions
diff --git a/client/src/app/videos/+video-watch/comment/video-comment.component.scss b/client/src/app/videos/+video-watch/comment/video-comment.component.scss
index 3b0b7eafd..3a3f32b83 100644
--- a/client/src/app/videos/+video-watch/comment/video-comment.component.scss
+++ b/client/src/app/videos/+video-watch/comment/video-comment.component.scss
@@ -14,6 +14,8 @@
14 14
15 .comment { 15 .comment {
16 flex-grow: 1; 16 flex-grow: 1;
17 // Fix word-wrap with flex
18 min-width: 1px;
17 19
18 .highlighted-comment { 20 .highlighted-comment {
19 display: inline-block; 21 display: inline-block;
@@ -44,8 +46,8 @@
44 } 46 }
45 47
46 .comment-html { 48 .comment-html {
47 word-wrap: initial;
48 word-break: normal; 49 word-break: normal;
50 word-wrap: break-word;
49 text-align: justify; 51 text-align: justify;
50 52
51 /deep/ a { 53 /deep/ a {
@@ -76,3 +78,26 @@
76 } 78 }
77 } 79 }
78} 80}
81
82// Decrease the space of child comments on small screens
83@media screen and (max-width: 1600px) {
84 .children {
85 margin-left: -20px;
86 }
87}
88
89@media screen and (max-width: 1200px) {
90 .children {
91 margin-left: -30px;
92 }
93}
94
95@media screen and (max-width: 600px) {
96 .children {
97 margin-left: -40px;
98 }
99
100 .root-comment {
101 img { margin-right: 10px; }
102 }
103} \ No newline at end of file
diff --git a/client/src/app/videos/+video-watch/comment/video-comments.component.scss b/client/src/app/videos/+video-watch/comment/video-comments.component.scss
index 7aadc2866..0b8aa1854 100644
--- a/client/src/app/videos/+video-watch/comment/video-comments.component.scss
+++ b/client/src/app/videos/+video-watch/comment/video-comments.component.scss
@@ -19,8 +19,8 @@
19 font-size: 13px; 19 font-size: 13px;
20} 20}
21 21
22.comment-html { 22@media screen and (max-width: 600px) {
23 word-wrap: normal; 23 .view-replies {
24 word-break: normal; 24 margin-left: 46px;
25 text-align: justify; 25 }
26} 26} \ No newline at end of file
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 9b7bc7351..d78e5c6a1 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.scss
+++ b/client/src/app/videos/+video-watch/video-watch.component.scss
@@ -335,7 +335,7 @@
335 335
336 .video-actions-rates { 336 .video-actions-rates {
337 margin-top: 20px; 337 margin-top: 20px;
338 align-items: left; 338 align-items: start;
339 339
340 .video-info-likes-dislikes-bar { 340 .video-info-likes-dislikes-bar {
341 margin-top: 10px; 341 margin-top: 10px;
diff --git a/client/src/assets/player/peertube-player.ts b/client/src/assets/player/peertube-player.ts
index e8a258065..f02fe5d75 100644
--- a/client/src/assets/player/peertube-player.ts
+++ b/client/src/assets/player/peertube-player.ts
@@ -27,11 +27,12 @@ function getVideojsOptions (options: {
27 const videojsOptions = { 27 const videojsOptions = {
28 controls: true, 28 controls: true,
29 poster: options.poster, 29 poster: options.poster,
30 autoplay: options.autoplay, 30 autoplay: false,
31 inactivityTimeout: options.inactivityTimeout, 31 inactivityTimeout: options.inactivityTimeout,
32 playbackRates: [ 0.5, 1, 1.5, 2 ], 32 playbackRates: [ 0.5, 1, 1.5, 2 ],
33 plugins: { 33 plugins: {
34 peertube: { 34 peertube: {
35 autoplay: options.autoplay, // Use peertube plugin autoplay because we get the file by webtorrent
35 videoFiles: options.videoFiles, 36 videoFiles: options.videoFiles,
36 playerElement: options.playerElement, 37 playerElement: options.playerElement,
37 videoViewUrl: options.videoViewUrl, 38 videoViewUrl: options.videoViewUrl,
diff --git a/client/src/assets/player/peertube-videojs-plugin.ts b/client/src/assets/player/peertube-videojs-plugin.ts
index 60c291a50..290d88724 100644
--- a/client/src/assets/player/peertube-videojs-plugin.ts
+++ b/client/src/assets/player/peertube-videojs-plugin.ts
@@ -68,9 +68,7 @@ class PeerTubePlugin extends Plugin {
68 constructor (player: videojs.Player, options: PeertubePluginOptions) { 68 constructor (player: videojs.Player, options: PeertubePluginOptions) {
69 super(player, options) 69 super(player, options)
70 70
71 // Fix canplay event on google chrome by disabling default videojs autoplay 71 this.autoplay = options.autoplay
72 this.autoplay = this.player.options_.autoplay
73 this.player.options_.autoplay = false
74 72
75 this.startTime = options.startTime 73 this.startTime = options.startTime
76 this.videoFiles = options.videoFiles 74 this.videoFiles = options.videoFiles
@@ -190,12 +188,7 @@ class PeerTubePlugin extends Plugin {
190 188
191 if (err) return this.fallbackToHttp(done) 189 if (err) return this.fallbackToHttp(done)
192 190
193 if (!this.player.paused()) { 191 if (!this.player.paused()) return this.tryToPlay(done)
194 const playPromise = this.player.play()
195 if (playPromise !== undefined) return playPromise.then(done)
196
197 return done()
198 }
199 192
200 return done() 193 return done()
201 }) 194 })
@@ -264,6 +257,25 @@ class PeerTubePlugin extends Plugin {
264 this.trigger('autoResolutionUpdate') 257 this.trigger('autoResolutionUpdate')
265 } 258 }
266 259
260 private tryToPlay (done?: Function) {
261 if (!done) done = function () { /* empty */ }
262
263 const playPromise = this.player.play()
264 if (playPromise !== undefined) {
265 return playPromise.then(done)
266 .catch(err => {
267 console.error(err)
268 this.player.pause()
269 this.player.posterImage.show()
270 this.player.removeClass('vjs-has-autoplay')
271
272 return done()
273 })
274 }
275
276 return done()
277 }
278
267 private seek (time: number) { 279 private seek (time: number) {
268 this.player.currentTime(time) 280 this.player.currentTime(time)
269 this.player.handleTechSeeked_() 281 this.player.handleTechSeeked_()
@@ -317,7 +329,10 @@ class PeerTubePlugin extends Plugin {
317 if (this.autoplay === true) { 329 if (this.autoplay === true) {
318 this.player.posterImage.hide() 330 this.player.posterImage.hide()
319 331
320 this.updateVideoFile(undefined, 0, () => this.seek(this.startTime)) 332 this.updateVideoFile(undefined, 0, () => {
333 this.seek(this.startTime)
334 this.tryToPlay()
335 })
321 } else { 336 } else {
322 // Proxy first play 337 // Proxy first play
323 const oldPlay = this.player.play.bind(this.player) 338 const oldPlay = this.player.play.bind(this.player)
diff --git a/client/src/assets/player/peertube-videojs-typings.ts b/client/src/assets/player/peertube-videojs-typings.ts
index a66caa30b..abdf333e1 100644
--- a/client/src/assets/player/peertube-videojs-typings.ts
+++ b/client/src/assets/player/peertube-videojs-typings.ts
@@ -22,6 +22,7 @@ type PeertubePluginOptions = {
22 videoViewUrl: string 22 videoViewUrl: string
23 videoDuration: number 23 videoDuration: number
24 startTime: number 24 startTime: number
25 autoplay: boolean
25} 26}
26 27
27// videojs typings don't have some method we need 28// videojs typings don't have some method we need