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;
+
+ @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) {
+ font-size: 16px;
+ }
+ }
/deep/ .video-js {
width: 888px;
- height: 500px;
-
- @media screen and (max-width: 600px) {
- width: 100vw;
- height: calc(100vw / 1.7); // 16/9
- }
+ 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()