From 6d88de725321e77486788f64a2e2537f5e6ef0cd Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Mon, 16 Jul 2018 19:15:20 +0200 Subject: [PATCH] Correctly handle error when remote instance is down --- .../+video-watch/video-watch.component.html | 5 +++ .../+video-watch/video-watch.component.scss | 32 ++++++++++++++++--- .../+video-watch/video-watch.component.ts | 13 ++++---- .../assets/player/peertube-videojs-plugin.ts | 7 +++- client/src/standalone/videos/embed.scss | 1 - client/src/standalone/videos/embed.ts | 26 ++++++++++----- 6 files changed, 63 insertions(+), 21 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 f28134ece..21f8f5534 100644 --- a/client/src/app/videos/+video-watch/video-watch.component.html +++ b/client/src/app/videos/+video-watch/video-watch.component.html @@ -1,6 +1,11 @@
+
+ Sorry, but this video is not available because the remote instance is not responding. +
+ Please try again later. +
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 7c694f2e2..4ce17209f 100644 --- a/client/src/app/videos/+video-watch/video-watch.component.scss +++ b/client/src/app/videos/+video-watch/video-watch.component.scss @@ -5,15 +5,37 @@ background-color: #000; display: flex; justify-content: center; + height: 500px; - /deep/ .video-js { - width: 888px; - height: 500px; + @media screen and (max-width: 600px) { + width: 100vw; + height: calc(100vw / 1.7); // 16/9 + } + + .remote-server-down { + color: #fff; + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + justify-content: center; + background-color: #141313; + width: 100%; + height: 100%; + font-size: 24px; + + @media screen and (max-width: 1000px) { + font-size: 20px; + } @media screen and (max-width: 600px) { - width: 100vw; - height: calc(100vw / 1.7); // 16/9 + font-size: 16px; } + } + + /deep/ .video-js { + width: 888px; + height: 100%; // VideoJS create an inner video player video { 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 601c6a38d..43afbae1a 100644 --- a/client/src/app/videos/+video-watch/video-watch.component.ts +++ b/client/src/app/videos/+video-watch/video-watch.component.ts @@ -57,6 +57,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy { videoHTMLDescription = '' likesBarTooltipText = '' hasAlreadyAcceptedPrivacyConcern = false + remoteServerDown = false private videojsLocaleLoaded = false private otherVideos: Video[] = [] @@ -312,15 +313,14 @@ export class VideoWatchComponent implements OnInit, OnDestroy { const errorMessage: string = typeof err === 'string' ? err : err.message if (!errorMessage) return - let message = '' - + // Display a message in the video player instead of a notification if (errorMessage.indexOf('http error') !== -1) { - message = this.i18n('Cannot fetch video from server, maybe down.') - } else { - message = errorMessage + this.flushPlayer() + this.remoteServerDown = true + return } - this.notificationsService.error(this.i18n('Error'), message) + this.notificationsService.error(this.i18n('Error'), errorMessage) } private checkUserRating () { @@ -345,6 +345,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy { // Re init attributes this.descriptionLoading = false this.completeDescriptionShown = false + this.remoteServerDown = false this.updateOtherVideosDisplayed() diff --git a/client/src/assets/player/peertube-videojs-plugin.ts b/client/src/assets/player/peertube-videojs-plugin.ts index 0dcbe49b1..6d96e1c0b 100644 --- a/client/src/assets/player/peertube-videojs-plugin.ts +++ b/client/src/assets/player/peertube-videojs-plugin.ts @@ -268,7 +268,12 @@ class PeerTubePlugin extends Plugin { return this.addTorrent(this.torrent['xs'], previousVideoFile, newOptions, done) } - return console.warn(err) + // Remote instance is down + if (err.message.indexOf('http error from xs param') !== -1) { + this.handleError(err) + } + + console.warn(err) }) } diff --git a/client/src/standalone/videos/embed.scss b/client/src/standalone/videos/embed.scss index f92a1f54a..30650538f 100644 --- a/client/src/standalone/videos/embed.scss +++ b/client/src/standalone/videos/embed.scss @@ -63,7 +63,6 @@ html, body { align-content: center; justify-content: center; text-align: center; - background-color: #141313; width: 100%; height: 100%; color: white; diff --git a/client/src/standalone/videos/embed.ts b/client/src/standalone/videos/embed.ts index b2809467d..cb05ec2b5 100644 --- a/client/src/standalone/videos/embed.ts +++ b/client/src/standalone/videos/embed.ts @@ -188,9 +188,9 @@ class PeerTubeEmbed { element.parentElement.removeChild(element) } - displayError (videoElement: HTMLVideoElement, text: string) { + displayError (text: string) { // Remove video element - this.removeElement(videoElement) + if (this.videoElement) this.removeElement(this.videoElement) document.title = 'Sorry - ' + text @@ -201,14 +201,14 @@ class PeerTubeEmbed { errorText.innerHTML = text } - videoNotFound (videoElement: HTMLVideoElement) { + videoNotFound () { const text = 'This video does not exist.' - this.displayError(videoElement, text) + this.displayError(text) } - videoFetchError (videoElement: HTMLVideoElement) { + videoFetchError () { const text = 'We cannot fetch the video. Please try again later.' - this.displayError(videoElement, text) + this.displayError(text) } getParamToggle (params: URLSearchParams, name: string, defaultValue: boolean) { @@ -264,9 +264,9 @@ class PeerTubeEmbed { ]) if (!videoResponse.ok) { - if (videoResponse.status === 404) return this.videoNotFound(this.videoElement) + if (videoResponse.status === 404) return this.videoNotFound() - return this.videoFetchError(this.videoElement) + return this.videoFetchError() } const videoInfo: VideoDetails = await videoResponse.json() @@ -303,6 +303,7 @@ class PeerTubeEmbed { this.playerOptions = videojsOptions this.player = vjs(this.videoContainerId, videojsOptions, () => { + this.player.on('customError', (event, data) => this.handleError(data.err)) window[ 'videojsPlayer' ] = this.player @@ -318,6 +319,15 @@ class PeerTubeEmbed { this.initializeApi() }) } + + private handleError (err: Error) { + if (err.message.indexOf('http error') !== -1) { + this.player.dispose() + this.videoElement = null + this.displayError('This video is not available because the remote instance is not responding.') + return + } + } } PeerTubeEmbed.main() -- 2.25.1