aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/videos
diff options
context:
space:
mode:
Diffstat (limited to 'client/src/app/videos')
-rw-r--r--client/src/app/videos/+video-watch/video-watch.component.html5
-rw-r--r--client/src/app/videos/+video-watch/video-watch.component.scss32
-rw-r--r--client/src/app/videos/+video-watch/video-watch.component.ts13
3 files changed, 39 insertions, 11 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 @@
1<div class="row"> 1<div class="row">
2 <!-- We need the video container for videojs so we just hide it --> 2 <!-- We need the video container for videojs so we just hide it -->
3 <div id="video-element-wrapper"> 3 <div id="video-element-wrapper">
4 <div *ngIf="remoteServerDown" class="remote-server-down">
5 Sorry, but this video is not available because the remote instance is not responding.
6 <br />
7 Please try again later.
8 </div>
4 </div> 9 </div>
5 10
6 <div i18n class="alert alert-warning" *ngIf="isVideoToTranscode()"> 11 <div i18n class="alert alert-warning" *ngIf="isVideoToTranscode()">
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 @@
5 background-color: #000; 5 background-color: #000;
6 display: flex; 6 display: flex;
7 justify-content: center; 7 justify-content: center;
8 height: 500px;
8 9
9 /deep/ .video-js { 10 @media screen and (max-width: 600px) {
10 width: 888px; 11 width: 100vw;
11 height: 500px; 12 height: calc(100vw / 1.7); // 16/9
13 }
14
15 .remote-server-down {
16 color: #fff;
17 display: flex;
18 flex-direction: column;
19 align-items: center;
20 text-align: center;
21 justify-content: center;
22 background-color: #141313;
23 width: 100%;
24 height: 100%;
25 font-size: 24px;
26
27 @media screen and (max-width: 1000px) {
28 font-size: 20px;
29 }
12 30
13 @media screen and (max-width: 600px) { 31 @media screen and (max-width: 600px) {
14 width: 100vw; 32 font-size: 16px;
15 height: calc(100vw / 1.7); // 16/9
16 } 33 }
34 }
35
36 /deep/ .video-js {
37 width: 888px;
38 height: 100%;
17 39
18 // VideoJS create an inner video player 40 // VideoJS create an inner video player
19 video { 41 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 {
57 videoHTMLDescription = '' 57 videoHTMLDescription = ''
58 likesBarTooltipText = '' 58 likesBarTooltipText = ''
59 hasAlreadyAcceptedPrivacyConcern = false 59 hasAlreadyAcceptedPrivacyConcern = false
60 remoteServerDown = false
60 61
61 private videojsLocaleLoaded = false 62 private videojsLocaleLoaded = false
62 private otherVideos: Video[] = [] 63 private otherVideos: Video[] = []
@@ -312,15 +313,14 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
312 const errorMessage: string = typeof err === 'string' ? err : err.message 313 const errorMessage: string = typeof err === 'string' ? err : err.message
313 if (!errorMessage) return 314 if (!errorMessage) return
314 315
315 let message = '' 316 // Display a message in the video player instead of a notification
316
317 if (errorMessage.indexOf('http error') !== -1) { 317 if (errorMessage.indexOf('http error') !== -1) {
318 message = this.i18n('Cannot fetch video from server, maybe down.') 318 this.flushPlayer()
319 } else { 319 this.remoteServerDown = true
320 message = errorMessage 320 return
321 } 321 }
322 322
323 this.notificationsService.error(this.i18n('Error'), message) 323 this.notificationsService.error(this.i18n('Error'), errorMessage)
324 } 324 }
325 325
326 private checkUserRating () { 326 private checkUserRating () {
@@ -345,6 +345,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
345 // Re init attributes 345 // Re init attributes
346 this.descriptionLoading = false 346 this.descriptionLoading = false
347 this.completeDescriptionShown = false 347 this.completeDescriptionShown = false
348 this.remoteServerDown = false
348 349
349 this.updateOtherVideosDisplayed() 350 this.updateOtherVideosDisplayed()
350 351