Merge pull request #5746 from tsiegleauq/poster-image

Add poster image in 404 cases
This commit is contained in:
Emanuel Schütze 2020-12-03 12:24:57 +01:00 committed by GitHub
commit ea4ec53fb1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 40 additions and 12 deletions

View File

@ -37,7 +37,7 @@ _('Server settings required to activate Jitsi Meet integration.');
_('Livestream url'); _('Livestream url');
_('Remove URL to deactivate livestream. Check extra group permission to see livestream.'); _('Remove URL to deactivate livestream. Check extra group permission to see livestream.');
_('Livestream poster image url'); _('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'); _('Number of next speakers automatically connecting to the live conference');
_('Live conference has to be active. Choose 0 to disable auto connect.'); _('Live conference has to be active. Choose 0 to disable auto connect.');
_('Automatically open the microphone for new conference speakers'); _('Automatically open the microphone for new conference speakers');

View File

@ -3,12 +3,20 @@
<video #videoPlayer class="video-js" controls preload="none"></video> <video #videoPlayer class="video-js" controls preload="none"></video>
</div> </div>
<div *ngIf="!isUrlOnline" class="is-offline-wrapper"> <div *ngIf="!isUrlOnline" class="is-offline-wrapper">
<p> <ng-container *ngIf="!posterUrl">
{{ 'Currently no livestream available.' | translate }} <p>
</p> {{ 'Currently no livestream available.' | translate }}
<button mat-raised-button (click)="checkVideoUrl()" color="primary"> </p>
<mat-icon>refresh</mat-icon>&nbsp; <button mat-raised-button (click)="checkVideoUrl()" color="primary">
<span>{{ 'Refresh' | translate }}</span> <mat-icon>refresh</mat-icon>&nbsp;
</button> <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>
</div> </div>

View File

@ -5,8 +5,28 @@
.is-offline-wrapper { .is-offline-wrapper {
width: 100%; width: 100%;
margin: 1em;
text-align: center; 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 { .player-container {

View File

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

View File

@ -164,7 +164,7 @@ def get_config_variables():
name="general_system_stream_poster", name="general_system_stream_poster",
default_value="", default_value="",
label="Livestream poster image url", 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, weight=147,
subgroup="Live conference", subgroup="Live conference",
) )