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">
-    <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>

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"
-        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>

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;
+}