Merge pull request #5746 from tsiegleauq/poster-image

Add poster image in 404 cases

client/src/app/core/translate/marked-translations.ts

@@ -37,7 +37,7 @@ _('Server settings required to activate Jitsi Meet integration.');
 _('Livestream url');
 _('Remove URL to deactivate livestream. Check extra group permission to see livestream.');
 _('Livestream poster image url');
-_('Shows if livestream is not started. Recommended image format: 500x281px, PNG or JPG');
+_('Shows if livestream is not started. Recommended image format: 500x200px, PNG or JPG');
 _('Number of next speakers automatically connecting to the live conference');
 _('Live conference has to be active. Choose 0 to disable auto connect.');
 _('Automatically open the microphone for new conference speakers');

client/src/app/shared/components/vjs-player/vjs-player.component.html

@@ -3,6 +3,7 @@
         <video #videoPlayer class="video-js" controls preload="none"></video>
     </div>
     <div *ngIf="!isUrlOnline" class="is-offline-wrapper">
+        <ng-container *ngIf="!posterUrl">
             <p>
                 {{ 'Currently no livestream available.' | translate }}
             </p>
@@ -10,5 +11,12 @@
                 <mat-icon>refresh</mat-icon>&nbsp;
                 <span>{{ 'Refresh' | translate }}</span>
             </button>
+        </ng-container>
+        <div *ngIf="posterUrl" class="offlineposter">
+            <button mat-mini-fab (click)="checkVideoUrl()" color="accent" matTooltip="{{ 'Refresh' | translate }}">
+                <mat-icon>refresh</mat-icon>
+            </button>
+            <img [src]="posterUrl" />
+        </div>
     </div>
 </div>

client/src/app/shared/components/vjs-player/vjs-player.component.scss

@@ -5,8 +5,28 @@
 
     .is-offline-wrapper {
         width: 100%;
-        margin: 1em;
         text-align: center;
+
+        .offlineposter {
+            position: relative;
+            width: 500px;
+            height: 200px;
+            img {
+                max-width: 100%;
+                max-height: 100%;
+            }
+
+            button {
+                position: absolute;
+                top: 0.5em;
+                right: 0.5em;
+                opacity: 0.3;
+            }
+
+            button:hover {
+                opacity: 1;
+            }
+        }
     }
 
     .player-container {

client/src/app/shared/components/vjs-player/vjs-player.component.ts

@@ -38,7 +38,7 @@ export class VjsPlayerComponent implements OnInit, OnDestroy {
     @ViewChild('videoPlayer', { static: true })
     private videoPlayer: ElementRef;
     private _videoUrl: string;
-    private posterUrl: string;
+    public posterUrl: string;
     public player: videojs.Player;
     public isUrlOnline: boolean;
 
@@ -64,7 +64,7 @@ export class VjsPlayerComponent implements OnInit, OnDestroy {
 
     public constructor(config: ConfigService) {
         config.get<string>('general_system_stream_poster').subscribe(posterUrl => {
-            this.posterUrl = posterUrl;
+            this.posterUrl = posterUrl?.trim();
         });
     }
 

server/openslides/core/config_variables.py

@@ -164,7 +164,7 @@ def get_config_variables():
         name="general_system_stream_poster",
         default_value="",
         label="Livestream poster image url",
-        help_text="Shows if livestream is not started. Recommended image format: 500x281px, PNG or JPG",
+        help_text="Shows if livestream is not started. Recommended image format: 500x200px, PNG or JPG",
         weight=147,
         subgroup="Live conference",
     )