From 80109b2ddb14ec4a54cede7885611cb9244da3cb Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Wed, 18 Apr 2018 10:20:13 +0200 Subject: Handle when autoplay fails --- .../videos/+video-watch/video-watch.component.scss | 2 +- client/src/assets/player/peertube-player.ts | 3 +- .../src/assets/player/peertube-videojs-plugin.ts | 35 +++++++++++++++------- .../src/assets/player/peertube-videojs-typings.ts | 1 + 4 files changed, 29 insertions(+), 12 deletions(-) (limited to 'client') 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 3ebeccd4b..8bc9f8d9a 100644 --- a/client/src/app/videos/+video-watch/video-watch.component.scss +++ b/client/src/app/videos/+video-watch/video-watch.component.scss @@ -332,7 +332,7 @@ .video-actions-rates { margin-top: 20px; - align-items: left; + align-items: start; .video-info-likes-dislikes-bar { 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: { const videojsOptions = { controls: true, poster: options.poster, - autoplay: options.autoplay, + autoplay: false, inactivityTimeout: options.inactivityTimeout, playbackRates: [ 0.5, 1, 1.5, 2 ], plugins: { peertube: { + autoplay: options.autoplay, // Use peertube plugin autoplay because we get the file by webtorrent videoFiles: options.videoFiles, playerElement: options.playerElement, 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 { constructor (player: videojs.Player, options: PeertubePluginOptions) { super(player, options) - // Fix canplay event on google chrome by disabling default videojs autoplay - this.autoplay = this.player.options_.autoplay - this.player.options_.autoplay = false + this.autoplay = options.autoplay this.startTime = options.startTime this.videoFiles = options.videoFiles @@ -190,12 +188,7 @@ class PeerTubePlugin extends Plugin { if (err) return this.fallbackToHttp(done) - if (!this.player.paused()) { - const playPromise = this.player.play() - if (playPromise !== undefined) return playPromise.then(done) - - return done() - } + if (!this.player.paused()) return this.tryToPlay(done) return done() }) @@ -264,6 +257,25 @@ class PeerTubePlugin extends Plugin { this.trigger('autoResolutionUpdate') } + private tryToPlay (done?: Function) { + if (!done) done = function () { /* empty */ } + + const playPromise = this.player.play() + if (playPromise !== undefined) { + return playPromise.then(done) + .catch(err => { + console.error(err) + this.player.pause() + this.player.posterImage.show() + this.player.removeClass('vjs-has-autoplay') + + return done() + }) + } + + return done() + } + private seek (time: number) { this.player.currentTime(time) this.player.handleTechSeeked_() @@ -317,7 +329,10 @@ class PeerTubePlugin extends Plugin { if (this.autoplay === true) { this.player.posterImage.hide() - this.updateVideoFile(undefined, 0, () => this.seek(this.startTime)) + this.updateVideoFile(undefined, 0, () => { + this.seek(this.startTime) + this.tryToPlay() + }) } else { // Proxy first play 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 = { videoViewUrl: string videoDuration: number startTime: number + autoplay: boolean } // videojs typings don't have some method we need -- cgit v1.2.3 From c9ffd53217e69395c303ba36532a6eef39645e4e Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Wed, 18 Apr 2018 15:00:42 +0200 Subject: Better responsive design on many comment children --- .../comment/video-comment.component.scss | 27 +++++++++++++++++++++- .../comment/video-comments.component.scss | 10 ++++---- .../videos/+video-watch/video-watch.component.scss | 3 ++- 3 files changed, 33 insertions(+), 7 deletions(-) (limited to 'client') 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 @@ .comment { flex-grow: 1; + // Fix word-wrap with flex + min-width: 1px; .highlighted-comment { display: inline-block; @@ -44,8 +46,8 @@ } .comment-html { - word-wrap: initial; word-break: normal; + word-wrap: break-word; text-align: justify; /deep/ a { @@ -76,3 +78,26 @@ } } } + +// Decrease the space of child comments on small screens +@media screen and (max-width: 1600px) { + .children { + margin-left: -20px; + } +} + +@media screen and (max-width: 1200px) { + .children { + margin-left: -30px; + } +} + +@media screen and (max-width: 600px) { + .children { + margin-left: -40px; + } + + .root-comment { + img { margin-right: 10px; } + } +} \ 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 @@ font-size: 13px; } -.comment-html { - word-wrap: normal; - word-break: normal; - text-align: justify; -} +@media screen and (max-width: 600px) { + .view-replies { + margin-left: 46px; + } +} \ 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 8bc9f8d9a..fe3cc4ded 100644 --- a/client/src/app/videos/+video-watch/video-watch.component.scss +++ b/client/src/app/videos/+video-watch/video-watch.component.scss @@ -215,7 +215,8 @@ font-size: 15px; .video-info-description-html { - word-wrap: break-word; + word-break: normal; + word-wrap: normal; text-align: justify; } -- cgit v1.2.3