_Bastler/we_bstly-web
1
0
Fork 0
Code Issues Pull Requests Projects Releases Activity

jitsi improvements

Browse Source
This commit is contained in:
_Bastler 2021-04-16 15:41:09 +02:00
parent ee4e8f0647
commit 01b12f7bfe
8 changed files with 119 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/app/app.module.ts
View File

@ -7,6 +7,7 @@ import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import {HttpClientModule, HttpInterceptor, HttpHandler, HttpRequest, HTTP_INTERCEPTORS} from '@angular/common/http';
import {MaterialModule} from './material/material.module';
import {QRCodeModule} from 'angularx-qrcode';
import { DatePipe } from '@angular/common';
import {I18nPipe} from './utils/i18n.pipe';
import {ImprintComponent, PrivacyPolicyComponent, TermsOfServiceComponent} from './pages/general/general.component';
@ -104,7 +105,7 @@ export class XhrInterceptor implements HttpInterceptor {
QRCodeModule,
],
exports: [MaterialModule],
providers: [{provide: APP_INITIALIZER, useFactory: init_app, deps: [I18nService], multi: true}, {provide: HTTP_INTERCEPTORS, useClass: XhrInterceptor, multi: true}],
providers: [{provide: APP_INITIALIZER, useFactory: init_app, deps: [I18nService], multi: true}, {provide: HTTP_INTERCEPTORS, useClass: XhrInterceptor, multi: true}, DatePipe],
bootstrap: [AppComponent],
})
export class AppModule {

38
src/app/pages/jitsi/jitsi.component.html
View File

@ -2,17 +2,32 @@
<table mat-table matSort [dataSource]="jitsiRooms" (matSortChange)="sortData($event)">
<ng-container matColumnDef="room">
<th mat-header-cell *matHeaderCellDef mat-sort-header="room"> {{'jitsi.rooms.room' | i18n}} </th>
<ng-container matColumnDef="share">
<th mat-header-cell *matHeaderCellDef> {{'jitsi.share' | i18n}} </th>
<td mat-cell *matCellDef="let jitsiRoom">
<a mat-button color="accent" href="{{ jitsiRoom.url }}" target="_blank">{{ jitsiRoom.room }}<mat-icon
style="font-size: 1em;">open_in_new
</mat-icon></a> <button mat-icon-button (click)="share(jitsiRoom)">
<button mat-icon-button (click)="share(jitsiRoom)">
<mat-icon>share</mat-icon>
</button>
</td>
</ng-container>
<ng-container matColumnDef="room">
<th mat-header-cell *matHeaderCellDef mat-sort-header="room"> {{'jitsi.rooms.room' | i18n}} </th>
<td mat-cell *matCellDef="let jitsiRoom">
<a *ngIf="open(jitsiRoom)" mat-button color="accent" href="{{ jitsiRoom.url }}" target="_blank">
{{ jitsiRoom.room }}
<mat-icon style="font-size: 1em;">open_in_new
</mat-icon>
</a>
<a *ngIf="!open(jitsiRoom)" mat-button disabled matTooltip="{{'jitsi.rooms.notStarted' | i18n}}"
matTooltipPosition="above">
{{ jitsiRoom.room }}
</a>
</td>
</ng-container>
<ng-container matColumnDef="starts">
<th mat-header-cell *matHeaderCellDef mat-sort-header="starts"> {{'jitsi.rooms.starts' | i18n}} </th>
<td mat-cell *matCellDef="let jitsiRoom">{{ jitsiRoom.starts | date:datetimeformat}} </td>
@ -26,10 +41,15 @@
<ng-container matColumnDef="moderationUrl">
<th mat-header-cell *matHeaderCellDef mat-sort-header="moderationUrl"> {{'jitsi.rooms.moderationUrl' | i18n}} </th>
<td mat-cell *matCellDef="let jitsiRoom">
<a mat-button color="primary" class="url" href="{{ jitsiRoom.moderationUrl}}" target="_blank">{{
jitsiRoom.moderationUrl }}
<mat-icon style="font-size: 1em;">open_in_new
</mat-icon>
<a *ngIf="open(jitsiRoom)" mat-button color="primary" class="url" href="{{ jitsiRoom.moderationUrl}}"
target="_blank">
{{ jitsiRoom.moderationUrl }}
<mat-icon style="font-size: 1em;">open_in_new</mat-icon>
</a>
<a *ngIf="!open(jitsiRoom)" mat-button color="primary" class="url" disabled matTooltip="{{'jitsi.rooms.notStarted' | i18n}}"
matTooltipPosition="above">
{{ jitsiRoom.moderationUrl }}
</a>
</td>
</ng-container>

4
src/app/pages/jitsi/jitsi.component.scss
View File

@ -9,6 +9,10 @@ mat-form-field {
}
}
.mat-cell .mat-button {
padding-left: 0px;
}
.align-right{
display: flex;
padding: 21px 0;

27
src/app/pages/jitsi/jitsi.component.ts
View File

@ -3,6 +3,7 @@ import {MatSnackBar} from '@angular/material/snack-bar';
import {Sort} from '@angular/material/sort';
import {FormBuilder, FormGroup, Validators, NgForm} from '@angular/forms';
import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog';
import {DatePipe} from '@angular/common';
import {QuotaService} from '../../services/quota.service';
import {JitsiService} from '../../services/jitsi.service';
@ -25,7 +26,7 @@ export class JitsiComponent implements OnInit {
working: boolean;
datetimeformat: String;
jitsiRoomsColumns = ["room", "starts", "expires", "moderationUrl", "delete"];
jitsiRoomsColumns = ["share", "room", "starts", "expires", "moderationUrl", "delete"];
constructor(
private quotaService: QuotaService,
@ -129,8 +130,11 @@ export class JitsiComponent implements OnInit {
minWidth: '300px',
});
}
}
open(jitsiRoom: any) {
return (!jitsiRoom.starts || new Date(jitsiRoom.start) < new Date()) && (!jitsiRoom.expires || new Date(jitsiRoom.expires) > new Date());
}
}
@Component({
selector: 'app-jitsi-share-dialog',
@ -140,18 +144,33 @@ export class JitsiComponent implements OnInit {
export class JitsiShareDialog {
jitsiRoom: any;
datetimeformat: string;
constructor(
private i18n: I18nService,
private snackBar: MatSnackBar,
private datePipe: DatePipe,
public dialogRef: MatDialogRef<JitsiShareDialog>,
@Inject(MAT_DIALOG_DATA) public data: any) {
this.jitsiRoom = data;
}
copyToClipboard(jitsiRoom: any) {
ngOnInit(): void {
this.datetimeformat = this.i18n.get('format.datetime', []);
this.jitsiRoom.shareText = this.i18n.get('jitsi.share.text.intro', []);
if(this.jitsiRoom.starts && !this.jitsiRoom.expires) {
this.jitsiRoom.shareText += "\n\n" + this.i18n.get('jitsi.share.text.starts', [this.datePipe.transform(new Date(this.jitsiRoom.starts), this.datetimeformat)]);
} else if(!this.jitsiRoom.starts && this.jitsiRoom.expires) {
this.jitsiRoom.shareText += "\n\n" + this.i18n.get('jitsi.share.text.expires', [this.datePipe.transform(new Date(this.jitsiRoom.expires), this.datetimeformat)]);
} else if(this.jitsiRoom.starts && this.jitsiRoom.expires) {
this.jitsiRoom.shareText += "\n\n" + this.i18n.get('jitsi.share.text.both', [this.datePipe.transform(new Date(this.jitsiRoom.starts), this.datetimeformat), this.datePipe.transform(new Date(this.jitsiRoom.expires), this.datetimeformat)]);
}
this.jitsiRoom.shareText += "\n\n" + this.i18n.get('jitsi.share.text.outro', [this.jitsiRoom.url]);
}
copyToClipboard(text) {
const selBox = document.createElement('textarea');
selBox.value = jitsiRoom.url;
selBox.value = text;
document.body.appendChild(selBox);
selBox.focus();
selBox.select();

23
src/app/pages/jitsi/jitsi.share.html
View File

@ -1,16 +1,29 @@
<h1 mat-dialog-title><mat-icon inline="true">share</mat-icon> {{'jitsi.share' | i18n}}</h1>
<h1 mat-dialog-title>
<mat-icon inline="true">share</mat-icon> {{'jitsi.share' | i18n}}
</h1>
<div mat-dialog-content>
<mat-form-field>
<textarea matInput [(ngModel)]="jitsiRoom.shareText"></textarea>
</mat-form-field>
<mat-list>
<mat-list-item>
<a mat-raised-button color="accent"
href="mailto:?&subject={{'jitsi.share.email.subject' | i18n:jitsiRoom.room}}&body={{jitsiRoom.url}}">
<a mat-raised-button color="accent" [disabled]="!jitsiRoom.shareText"
href="mailto:?&subject={{'jitsi.share.email.subject' | i18n:jitsiRoom.room}}&body={{jitsiRoom.shareText}}" mat-dialog-close>
<mat-icon>mail</mat-icon> {{'jitsi.share.email' | i18n}}
</a>
</mat-list-item>
<mat-list-item>
<a mat-raised-button color="accent" (click)="copyToClipboard(jitsiRoom)">
<mat-icon>content_paste</mat-icon> {{'jitsi.share.clipboard' | i18n}}
<a mat-raised-button color="accent" (click)="copyToClipboard(jitsiRoom.shareText)" [disabled]="!jitsiRoom.shareText" mat-dialog-close>
<mat-icon>content_paste</mat-icon> {{'jitsi.share.clipboard.text' | i18n}}
</a>
</mat-list-item>
<mat-list-item>
<a mat-raised-button color="accent" (click)="copyToClipboard(jitsiRoom.url)" [disabled]="!jitsiRoom.shareText" mat-dialog-close>
<mat-icon>content_paste</mat-icon> {{'jitsi.share.clipboard.url' | i18n}}
</a>
</mat-list-item>
</mat-list>

9
src/app/pages/jitsi/jitsi.share.scss
View File

@ -2,3 +2,12 @@
display: block;
width: 100%;
}
mat-form-field {
display: block;
}
textarea {
width: 100%;
min-height: 300px;
}

19
src/assets/i18n/de-informal.json
View File

@ -18,7 +18,7 @@
},
"format": {
"date": "dd.MM.yyyy",
"datetime": "dd.MM.yyyy HH:mm:ss",
"datetime": "dd.MM.yyyy HH:mm",
"time": "HH:mm:ss"
},
"greet": "Hallo {0}",
@ -35,26 +35,35 @@
"delete": "Löschen",
"error": {
"expires": "Ungültiges Ende.",
"room": "Bitte wähle einen anderen Namen für den Raum. Erlaubt sind nur Buchstaben und Zahlen.",
"room": "Bitte gebe einen gültigen Namen an. Erlaubt sind nur Buchstaben und Zahlen.",
"starts": "Ungültiger Beginn."
},
"expires": "Ende",
"info": "Du kannst hier Jitsi Räume erstellen. Die Anzahl wird über eine Quota begrenzt.",
"left": "Du kannst noch {0} Jitsi Räume erstellen.",
"left": "Du kannst noch {0} Jitsi Raum/Räume erstellen.",
"moderationUrl": "Url für Moderation",
"noQuota": "Deine Quota für Jitsi Räume ist leider aufgebraucht.",
"notStarted" : "Die Konferenz hat noch nicht begonnen.",
"room": "Name",
"starts": "Beginn"
},
"share": {
".": "Teilen",
"clipboard": {
".": "In Zwischenablage kopieren",
"copied": "In die Zwischenablage kopiert"
"copied": "In die Zwischenablage kopiert",
"text": "Text in Zwischenablage kopieren",
"url": "Url in Zwischenablage kopieren"
},
"email": {
".": "Via E-Mail teilen",
"subject": "Einladung in Videokonferenz {0}"
},
"text" : {
"both" : "Die Konferenz beginnt am {0} und endet am {1}.",
"expires" : "Die Konferenz endet am {0}.",
"intro" : "Hallo, ich möchte dich zu einer Videokonferenz einladen.",
"outro" : "Du kannst der Konferenz unter folgendem Link beitreten:\n {0}",
"starts" : "Die Konferenz beginnt am {0}."
}
}
},

17
src/assets/i18n/en.json
View File

@ -18,7 +18,7 @@
},
"format": {
"date": "MM/dd/yyy",
"datetime": "MM/dd/yyy h:mm:ss a",
"datetime": "MM/dd/yyy h:mm a",
"time": "h:mm:ss a"
},
"greet": "Hello {0}",
@ -35,7 +35,7 @@
"delete": "Delete",
"error": {
"expires": "Invalid expiry.",
"room": "Please choose another name for the room. Only letters and numbers are allowed",
"room": "Please provide a valid name. Only letters and numbers are allowed.",
"starts": "Invalid start."
},
"expires": "Expires",
@ -43,18 +43,27 @@
"left": "You have {0} Jitsi Room(s) left.",
"moderationUrl": "Moderation url",
"noQuota": "Your quota for Jitsi Rooms is depleted.",
"notStarted" : "The conference has not started yet.",
"room": "Name",
"starts": "Starts"
},
"share": {
".": "Share",
"clipboard": {
"." : "Copy to clipboard",
"copied": "Copied to clipboard"
"copied": "Copied to clipboard",
"text": "Copy text to clipboard",
"url": "Copy url to clipboard"
},
"email": {
".": "Share via email",
"subject": "Invite to video conference {0}"
},
"text": {
"both": "The conference begins at {0} and ends at {1}.",
"expires": "The conference ends at {0}.",
"intro": "Hello, I want to invite you to a video conference.",
"outro": "You can join the conference under:\n{0}",
"starts": "The conference begins at {0}."
}
}
},