jitsi improvements

src/app/app.module.ts

@@ -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 {

src/app/pages/jitsi/jitsi.component.html

@@ -2,17 +2,32 @@
 
 <table mat-table matSort [dataSource]="jitsiRooms" (matSortChange)="sortData($event)">
 
-  <ng-container matColumnDef="room">
+  <ng-container matColumnDef="share">
-    <th mat-header-cell *matHeaderCellDef mat-sort-header="room"> {{'jitsi.rooms.room' | i18n}} </th>
+    <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
+      <button mat-icon-button (click)="share(jitsiRoom)">
-          style="font-size: 1em;">open_in_new
-        </mat-icon></a> <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">{{
+      <a *ngIf="open(jitsiRoom)" mat-button color="primary" class="url" href="{{ jitsiRoom.moderationUrl}}"
-        jitsiRoom.moderationUrl }}
+        target="_blank">
-        <mat-icon style="font-size: 1em;">open_in_new
+        {{ jitsiRoom.moderationUrl }}
-        </mat-icon>
+        <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>

src/app/pages/jitsi/jitsi.component.scss

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

src/app/pages/jitsi/jitsi.component.ts

@@ -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();

src/app/pages/jitsi/jitsi.share.html

@@ -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"
+      <a mat-raised-button color="accent" [disabled]="!jitsiRoom.shareText"
-        href="mailto:?&subject={{'jitsi.share.email.subject' | i18n:jitsiRoom.room}}&body={{jitsiRoom.url}}">
+        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)">
+      <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' | i18n}}
+        <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>

src/app/pages/jitsi/jitsi.share.scss

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

src/assets/i18n/de-informal.json

@@ -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}."
       }
     }
   },

src/assets/i18n/en.json

@@ -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": {
-      "." : "Share",
+      ".": "Share",
-      "clipboard" : {
+      "clipboard": {
-        "." : "Copy to clipboard",
+        "copied": "Copied to clipboard",
-        "copied": "Copied to clipboard"
+        "text": "Copy text to clipboard",
+        "url": "Copy url to clipboard"
       },
-      "email" : {
+      "email": {
-        "." : "Share via email",
+        ".": "Share via email",
-        "subject" : "Invite to videoconference {0}"
+        "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}."
       }
     }
   },
@@ -278,7 +287,7 @@
       "title": "Gitea"
     },
     "goto": "To service",
-    "jitsi" : {
+    "jitsi": {
       "icon": "video_call",
       "subtitle": "Video conferencing",
       "text": "Video conferencing with all functionality needed for meeting online with Video and Audio streams.",