From 3ca4714812b3eec30367eefa47e5fa90978d27fa Mon Sep 17 00:00:00 2001 From: Sean Date: Thu, 4 Jun 2020 16:29:35 +0200 Subject: [PATCH] Show Jitsi iFrame in Dialog Replace the external link button with a (real) Dialog containing the jitsi iFrame. The dialog can be hidden but not entirly closed. Replace all dialogService.closeAll() functions by closing the specific dialog rather than all of them. --- .../attachment-control.component.ts | 8 ++- .../components/jitsi/jitsi.component.html | 39 ++++++++--- .../components/jitsi/jitsi.component.scss | 15 +++++ .../components/jitsi/jitsi.component.ts | 66 +++++++++++++++---- .../mediafile-list.component.ts | 10 +-- .../category-detail.component.ts | 10 +-- .../category-list/category-list.component.ts | 12 ++-- .../motion-block-detail.component.ts | 12 ++-- .../motion-block-list.component.ts | 12 ++-- .../motion-comment-section-list.component.ts | 12 ++-- .../statute-paragraph-list.component.ts | 12 ++-- .../components/tag-list/tag-list.component.ts | 12 ++-- .../group-list/group-list.component.ts | 10 +-- 13 files changed, 164 insertions(+), 66 deletions(-) diff --git a/client/src/app/shared/components/attachment-control/attachment-control.component.ts b/client/src/app/shared/components/attachment-control/attachment-control.component.ts index 42a3c945a..dc1a603a0 100644 --- a/client/src/app/shared/components/attachment-control/attachment-control.component.ts +++ b/client/src/app/shared/components/attachment-control/attachment-control.component.ts @@ -11,7 +11,7 @@ import { TemplateRef } from '@angular/core'; import { FormBuilder, NgControl } from '@angular/forms'; -import { MatDialog } from '@angular/material/dialog'; +import { MatDialog, MatDialogRef } from '@angular/material/dialog'; import { MatFormFieldControl } from '@angular/material/form-field'; import { Observable } from 'rxjs'; @@ -36,6 +36,8 @@ export class AttachmentControlComponent extends BaseFormControlComponent = new EventEmitter(); + private dialogRef: MatDialogRef; + /** * The file list that is necessary for the `SearchValueSelector` */ @@ -74,7 +76,7 @@ export class AttachmentControlComponent extends BaseFormControlComponent): void { - this.dialogService.open(dialog, { ...mediumDialogSettings, disableClose: false }); + this.dialogRef = this.dialogService.open(dialog, { ...mediumDialogSettings, disableClose: false }); } /** @@ -85,7 +87,7 @@ export class AttachmentControlComponent extends BaseFormControlComponent + + +
+
+ + + +
+ + +
- {{ 'The audio conference is already running in your OpenSlides session.' | translate }} + {{ + 'The audio conference is already running in your OpenSlides session.' | translate + }} @@ -77,9 +101,6 @@ {{ 'disconnected' | translate }}
- -
-
@@ -128,17 +149,17 @@
- +
diff --git a/client/src/app/shared/components/jitsi/jitsi.component.scss b/client/src/app/shared/components/jitsi/jitsi.component.scss index 8f28f8fb4..0b411edbc 100644 --- a/client/src/app/shared/components/jitsi/jitsi.component.scss +++ b/client/src/app/shared/components/jitsi/jitsi.component.scss @@ -1,3 +1,18 @@ +.jitsi-dialog-hide { + display: none; +} + +.jitsi-iframe-wrapper { + height: 70vh; +} + +.minimize-jitsi-dialog-button { + margin-left: auto !important; + span { + line-height: initial; + } +} + .jitsi-integration { .cast-shadow { box-shadow: -3px -3px 10px 0px rgba(0, 0, 0, 0.2) !important; diff --git a/client/src/app/shared/components/jitsi/jitsi.component.ts b/client/src/app/shared/components/jitsi/jitsi.component.ts index 2d1793299..10883009e 100644 --- a/client/src/app/shared/components/jitsi/jitsi.component.ts +++ b/client/src/app/shared/components/jitsi/jitsi.component.ts @@ -1,4 +1,14 @@ -import { Component, ElementRef, HostListener, OnDestroy, ViewChild } from '@angular/core'; +import { + Component, + ElementRef, + HostListener, + OnDestroy, + OnInit, + TemplateRef, + ViewChild, + ViewEncapsulation +} from '@angular/core'; +import { MatDialog, MatDialogRef } from '@angular/material/dialog'; import { Title } from '@angular/platform-browser'; import { StorageMap } from '@ngx-pwa/local-storage'; @@ -11,6 +21,7 @@ import { OperatorService } from 'app/core/core-services/operator.service'; import { Deferred } from 'app/core/promises/deferred'; import { UserRepositoryService } from 'app/core/repositories/users/user-repository.service'; import { ConfigService } from 'app/core/ui-services/config.service'; +import { largeDialogSettings } from 'app/shared/utils/dialog-settings'; declare var JitsiMeetExternalAPI: any; @@ -47,9 +58,10 @@ interface ConferenceMember { @Component({ selector: 'os-jitsi', templateUrl: './jitsi.component.html', - styleUrls: ['./jitsi.component.scss'] + styleUrls: ['./jitsi.component.scss'], + encapsulation: ViewEncapsulation.None }) -export class JitsiComponent extends BaseComponent implements OnDestroy { +export class JitsiComponent extends BaseComponent implements OnInit, OnDestroy { public enableJitsi: boolean; private autoconnect: boolean; private roomName: string; @@ -65,6 +77,11 @@ export class JitsiComponent extends BaseComponent implements OnDestroy { @ViewChild('jitsi') private jitsiNode: ElementRef; + @ViewChild('conferenceDialog', { static: true }) + public conferenceDialog: TemplateRef; + + private confDialogRef: MatDialogRef; + // JitsiMeet api object private api: any | null; @@ -96,7 +113,7 @@ export class JitsiComponent extends BaseComponent implements OnDestroy { } private configOverwrite = { - startAudioOnly: true, + startAudioOnly: false, // allows jitsi on mobile devices disableDeepLinking: true, startWithAudioMuted: true, @@ -111,15 +128,12 @@ export class JitsiComponent extends BaseComponent implements OnDestroy { }; private interfaceConfigOverwrite = { - filmStripOnly: true, - INITIAL_TOOLBAR_TIMEOUT: 2000, - TOOLBAR_TIMEOUT: 400, - SHOW_JITSI_WATERMARK: false, - SHOW_WATERMARK_FOR_GUESTS: false, + DISABLE_VIDEO_BACKGROUND: true, + SHOW_JITSI_WATERMARK: true, + SHOW_WATERMARK_FOR_GUESTS: true, INVITATION_POWERED_BY: false, DISABLE_JOIN_LEAVE_NOTIFICATIONS: true, - TOOLBAR_BUTTONS: [], - SETTINGS_SECTIONS: [] + DISABLE_PRESENCE_STATUS: true }; public constructor( @@ -129,9 +143,18 @@ export class JitsiComponent extends BaseComponent implements OnDestroy { private storageMap: StorageMap, private userRepo: UserRepositoryService, private constantsService: ConstantsService, - private configService: ConfigService + private configService: ConfigService, + private dialog: MatDialog ) { super(titleService, translate); + } + + public ngOnInit(): void { + this.confDialogRef = this.dialog.open(this.conferenceDialog, { + ...largeDialogSettings, + panelClass: 'jitsi-dialog-hide', + hasBackdrop: false + }); this.setUp(); } @@ -307,6 +330,7 @@ export class JitsiComponent extends BaseComponent implements OnDestroy { await this.deleteJitsiLock(); this.api.dispose(); this.api = undefined; + this.hideJitsiDialog(); } this.isJoined = false; this.isPasswortSet = false; @@ -330,6 +354,24 @@ export class JitsiComponent extends BaseComponent implements OnDestroy { return `https://${this.jitsiDomain}/${this.roomName}`; } + public toggleConferenceDialog(): void { + // there is no good way to detect the current classes in MatDialogRef or conferenceDialog. + // searching the global cdk-overlay-pane is the only thing which works + const pane = document.querySelector('.cdk-overlay-pane') as HTMLElement; + if (pane.classList.contains('jitsi-dialog-hide')) { + this.confDialogRef.removePanelClass('jitsi-dialog-hide'); + } else { + this.confDialogRef.addPanelClass('jitsi-dialog-hide'); + } + } + + private hideJitsiDialog(): void { + const pane = document.querySelector('.cdk-overlay-pane') as HTMLElement; + if (!pane.classList.contains('jitsi-dialog-hide')) { + this.confDialogRef.addPanelClass('jitsi-dialog-hide'); + } + } + public openExternal(): void { this.stopJitsi(); window.open(this.getJitsiMeetUrl(), '_blank'); diff --git a/client/src/app/site/mediafiles/components/mediafile-list/mediafile-list.component.ts b/client/src/app/site/mediafiles/components/mediafile-list/mediafile-list.component.ts index dd88796ca..25e89741f 100644 --- a/client/src/app/site/mediafiles/components/mediafile-list/mediafile-list.component.ts +++ b/client/src/app/site/mediafiles/components/mediafile-list/mediafile-list.component.ts @@ -9,7 +9,7 @@ import { ViewEncapsulation } from '@angular/core'; import { FormBuilder, FormGroup, Validators } from '@angular/forms'; -import { MatDialog } from '@angular/material/dialog'; +import { MatDialog, MatDialogRef } from '@angular/material/dialog'; import { MatSnackBar } from '@angular/material/snack-bar'; import { Title } from '@angular/platform-browser'; import { ActivatedRoute, Router } from '@angular/router'; @@ -59,6 +59,8 @@ export class MediafileListComponent extends BaseListViewComponent */ public fileToEdit: ViewMediafile; + private dialogRef: MatDialogRef; + public newDirectoryForm: FormGroup; public moveForm: FormGroup; public directoryBehaviorSubject: BehaviorSubject; @@ -334,9 +336,9 @@ export class MediafileListComponent extends BaseListViewComponent access_groups_id: [file.access_groups_id] }); - const dialogRef = this.dialog.open(this.fileEditDialog, infoDialogSettings); + this.dialogRef = this.dialog.open(this.fileEditDialog, infoDialogSettings); - dialogRef.keydownEvents().subscribe((event: KeyboardEvent) => { + this.dialogRef.keydownEvents().subscribe((event: KeyboardEvent) => { if (event.key === 'Enter' && event.shiftKey && this.fileEditForm.valid) { this.onSaveEditedFile(this.fileEditForm.value); } @@ -349,7 +351,7 @@ export class MediafileListComponent extends BaseListViewComponent */ public onSaveEditedFile(value: Partial): void { this.repo.update(value, this.fileToEdit).then(() => { - this.dialog.closeAll(); + this.dialogRef.close(); }, this.raiseError); } diff --git a/client/src/app/site/motions/modules/category/components/category-detail/category-detail.component.ts b/client/src/app/site/motions/modules/category/components/category-detail/category-detail.component.ts index ac86f9209..6b06cebef 100644 --- a/client/src/app/site/motions/modules/category/components/category-detail/category-detail.component.ts +++ b/client/src/app/site/motions/modules/category/components/category-detail/category-detail.component.ts @@ -1,6 +1,6 @@ import { Component, OnInit, TemplateRef, ViewChild } from '@angular/core'; import { FormBuilder, FormGroup, Validators } from '@angular/forms'; -import { MatDialog } from '@angular/material/dialog'; +import { MatDialog, MatDialogRef } from '@angular/material/dialog'; import { MatSnackBar } from '@angular/material/snack-bar'; import { MatTableDataSource } from '@angular/material/table'; import { Title } from '@angular/platform-browser'; @@ -53,6 +53,8 @@ export class CategoryDetailComponent extends BaseViewComponent implements OnInit @ViewChild('editDialog', { static: true }) private editDialog: TemplateRef; + private dialogRef: MatDialogRef; + /** * helper for permission checks * @@ -159,7 +161,7 @@ export class CategoryDetailComponent extends BaseViewComponent implements OnInit */ public onKeyDown(event: KeyboardEvent): void { if (event.key === 'Escape') { - this.dialog.closeAll(); + this.dialogRef.close(); } if (event.key === 'Enter') { this.save(); @@ -172,7 +174,7 @@ export class CategoryDetailComponent extends BaseViewComponent implements OnInit public save(): void { this.repo .update(this.editForm.value, this.selectedCategory) - .then(() => this.dialog.closeAll()) + .then(() => this.dialogRef.close()) .catch(this.raiseError); } @@ -185,7 +187,7 @@ export class CategoryDetailComponent extends BaseViewComponent implements OnInit name: [this.selectedCategory.name, Validators.required] }); - this.dialog.open(this.editDialog, infoDialogSettings); + this.dialogRef = this.dialog.open(this.editDialog, infoDialogSettings); } /** diff --git a/client/src/app/site/motions/modules/category/components/category-list/category-list.component.ts b/client/src/app/site/motions/modules/category/components/category-list/category-list.component.ts index eace73246..5ce5669ba 100644 --- a/client/src/app/site/motions/modules/category/components/category-list/category-list.component.ts +++ b/client/src/app/site/motions/modules/category/components/category-list/category-list.component.ts @@ -1,6 +1,6 @@ import { Component, OnInit, TemplateRef, ViewChild } from '@angular/core'; import { FormBuilder, FormGroup, Validators } from '@angular/forms'; -import { MatDialog } from '@angular/material/dialog'; +import { MatDialog, MatDialogRef } from '@angular/material/dialog'; import { MatSnackBar } from '@angular/material/snack-bar'; import { Title } from '@angular/platform-browser'; @@ -26,6 +26,8 @@ export class CategoryListComponent extends BaseListViewComponent i @ViewChild('newCategoryDialog', { static: true }) private newCategoryDialog: TemplateRef; + private dialogRef: MatDialogRef; + /** * Holds the create form */ @@ -101,8 +103,8 @@ export class CategoryListComponent extends BaseListViewComponent i */ public onPlusButton(): void { this.createForm.reset(); - const dialogRef = this.dialog.open(this.newCategoryDialog, infoDialogSettings); - dialogRef.afterClosed().subscribe(res => { + this.dialogRef = this.dialog.open(this.newCategoryDialog, infoDialogSettings); + this.dialogRef.afterClosed().subscribe(res => { if (res) { this.save(); } @@ -127,10 +129,10 @@ export class CategoryListComponent extends BaseListViewComponent i public onKeyDown(event: KeyboardEvent): void { if (event.key === 'Enter') { this.save(); - this.dialog.closeAll(); + this.dialogRef.close(); } if (event.key === 'Escape') { - this.dialog.closeAll(); + this.dialogRef.close(); } } diff --git a/client/src/app/site/motions/modules/motion-block/components/motion-block-detail/motion-block-detail.component.ts b/client/src/app/site/motions/modules/motion-block/components/motion-block-detail/motion-block-detail.component.ts index bf0d5ccaa..bafde86a9 100644 --- a/client/src/app/site/motions/modules/motion-block/components/motion-block-detail/motion-block-detail.component.ts +++ b/client/src/app/site/motions/modules/motion-block/components/motion-block-detail/motion-block-detail.component.ts @@ -1,6 +1,6 @@ import { Component, OnInit, TemplateRef, ViewChild } from '@angular/core'; import { FormBuilder, FormGroup, Validators } from '@angular/forms'; -import { MatDialog } from '@angular/material/dialog'; +import { MatDialog, MatDialogRef } from '@angular/material/dialog'; import { MatSnackBar } from '@angular/material/snack-bar'; import { Title } from '@angular/platform-browser'; import { ActivatedRoute, Router } from '@angular/router'; @@ -96,6 +96,8 @@ export class MotionBlockDetailComponent extends BaseListViewComponent; + private dialogRef: MatDialogRef; + /** * Constructor for motion block details * @@ -197,7 +199,7 @@ export class MotionBlockDetailComponent extends BaseListViewComponent this.dialog.closeAll()) + .then(() => this.dialogRef.close()) .catch(this.raiseError); } @@ -232,9 +234,9 @@ export class MotionBlockDetailComponent extends BaseListViewComponent { + this.dialogRef.keydownEvents().subscribe((event: KeyboardEvent) => { if (event.key === 'Enter' && event.shiftKey) { this.saveBlock(); } diff --git a/client/src/app/site/motions/modules/motion-block/components/motion-block-list/motion-block-list.component.ts b/client/src/app/site/motions/modules/motion-block/components/motion-block-list/motion-block-list.component.ts index 2a39648ea..208ac876a 100644 --- a/client/src/app/site/motions/modules/motion-block/components/motion-block-list/motion-block-list.component.ts +++ b/client/src/app/site/motions/modules/motion-block/components/motion-block-list/motion-block-list.component.ts @@ -1,6 +1,6 @@ import { Component, OnInit, TemplateRef, ViewChild, ViewEncapsulation } from '@angular/core'; import { FormBuilder, FormGroup, Validators } from '@angular/forms'; -import { MatDialog } from '@angular/material/dialog'; +import { MatDialog, MatDialogRef } from '@angular/material/dialog'; import { MatSnackBar } from '@angular/material/snack-bar'; import { Title } from '@angular/platform-browser'; @@ -31,6 +31,8 @@ export class MotionBlockListComponent extends BaseListViewComponent; + private dialogRef: MatDialogRef; + /** * Holds the create form */ @@ -136,8 +138,8 @@ export class MotionBlockListComponent extends BaseListViewComponent { + this.dialogRef = this.dialog.open(this.newMotionBlockDialog, infoDialogSettings); + this.dialogRef.afterClosed().subscribe(res => { if (res) { this.save(); } @@ -167,11 +169,11 @@ export class MotionBlockListComponent extends BaseListViewComponent; + private dialogRef: MatDialogRef; + public currentComment: ViewMotionCommentSection | null; /** @@ -90,10 +92,10 @@ export class MotionCommentSectionListComponent extends BaseViewComponent impleme public onKeyDown(event: KeyboardEvent, viewSection?: ViewMotionCommentSection): void { if (event.key === 'Enter' && event.shiftKey) { this.save(); - this.dialog.closeAll(); + this.dialogRef.close(); } if (event.key === 'Escape') { - this.dialog.closeAll(); + this.dialogRef.close(); } } @@ -107,8 +109,8 @@ export class MotionCommentSectionListComponent extends BaseViewComponent impleme read_groups_id: commentSection ? commentSection.read_groups_id : [], write_groups_id: commentSection ? commentSection.write_groups_id : [] }); - const dialogRef = this.dialog.open(this.motionCommentDialog, infoDialogSettings); - dialogRef.afterClosed().subscribe(res => { + this.dialogRef = this.dialog.open(this.motionCommentDialog, infoDialogSettings); + this.dialogRef.afterClosed().subscribe(res => { if (res) { this.save(); } diff --git a/client/src/app/site/motions/modules/statute-paragraph/components/statute-paragraph-list/statute-paragraph-list.component.ts b/client/src/app/site/motions/modules/statute-paragraph/components/statute-paragraph-list/statute-paragraph-list.component.ts index 93d8f8655..b7e9eaba4 100644 --- a/client/src/app/site/motions/modules/statute-paragraph/components/statute-paragraph-list/statute-paragraph-list.component.ts +++ b/client/src/app/site/motions/modules/statute-paragraph/components/statute-paragraph-list/statute-paragraph-list.component.ts @@ -1,6 +1,6 @@ import { Component, OnInit, TemplateRef, ViewChild } from '@angular/core'; import { FormBuilder, FormGroup, Validators } from '@angular/forms'; -import { MatDialog } from '@angular/material/dialog'; +import { MatDialog, MatDialogRef } from '@angular/material/dialog'; import { MatSnackBar } from '@angular/material/snack-bar'; import { Title } from '@angular/platform-browser'; @@ -26,6 +26,8 @@ export class StatuteParagraphListComponent extends BaseViewComponent implements @ViewChild('statuteParagraphDialog', { static: true }) private statuteParagraphDialog: TemplateRef; + private dialogRef: MatDialogRef; + private currentStatuteParagraph: ViewStatuteParagraph | null; /** @@ -92,8 +94,8 @@ export class StatuteParagraphListComponent extends BaseViewComponent implements text: paragraph.text }); } - const dialogRef = this.dialog.open(this.statuteParagraphDialog, largeDialogSettings); - dialogRef.afterClosed().subscribe(res => { + this.dialogRef = this.dialog.open(this.statuteParagraphDialog, largeDialogSettings); + this.dialogRef.afterClosed().subscribe(res => { if (res) { this.save(); } @@ -146,10 +148,10 @@ export class StatuteParagraphListComponent extends BaseViewComponent implements public onKeyDown(event: KeyboardEvent): void { if (event.key === 'Enter' && event.shiftKey) { this.save(); - this.dialog.closeAll(); + this.dialogRef.close(); } if (event.key === 'Escape') { - this.dialog.closeAll(); + this.dialogRef.close(); } } diff --git a/client/src/app/site/tags/components/tag-list/tag-list.component.ts b/client/src/app/site/tags/components/tag-list/tag-list.component.ts index bc07e5758..0e1948a8b 100644 --- a/client/src/app/site/tags/components/tag-list/tag-list.component.ts +++ b/client/src/app/site/tags/components/tag-list/tag-list.component.ts @@ -1,6 +1,6 @@ import { Component, OnInit, TemplateRef, ViewChild } from '@angular/core'; import { FormBuilder, FormGroup, Validators } from '@angular/forms'; -import { MatDialog } from '@angular/material/dialog'; +import { MatDialog, MatDialogRef } from '@angular/material/dialog'; import { MatSnackBar } from '@angular/material/snack-bar'; import { Title } from '@angular/platform-browser'; @@ -31,6 +31,8 @@ export class TagListComponent extends BaseListViewComponent implements @ViewChild('tagDialog', { static: true }) private tagDialog: TemplateRef; + private dialogRef: MatDialogRef; + public tagForm: FormGroup = this.formBuilder.group({ name: ['', [Validators.required]] }); @@ -95,8 +97,8 @@ export class TagListComponent extends BaseListViewComponent implements this.currentTag = tag; this.tagForm.reset(); this.tagForm.get('name').setValue(this.currentTag ? this.currentTag.name : ''); - const dialogRef = this.dialog.open(this.tagDialog, infoDialogSettings); - dialogRef.afterClosed().subscribe(res => { + this.dialogRef = this.dialog.open(this.tagDialog, infoDialogSettings); + this.dialogRef.afterClosed().subscribe(res => { if (res) { this.save(); } @@ -138,10 +140,10 @@ export class TagListComponent extends BaseListViewComponent implements public onKeyDown(event: KeyboardEvent): void { if (event.key === 'Enter' && event.shiftKey) { this.save(); - this.dialog.closeAll(); + this.dialogRef.close(); } if (event.key === 'Escape') { - this.dialog.closeAll(); + this.dialogRef.close(); } } } diff --git a/client/src/app/site/users/components/group-list/group-list.component.ts b/client/src/app/site/users/components/group-list/group-list.component.ts index 0ade87020..4ff6dedca 100644 --- a/client/src/app/site/users/components/group-list/group-list.component.ts +++ b/client/src/app/site/users/components/group-list/group-list.component.ts @@ -1,6 +1,6 @@ import { Component, OnInit, TemplateRef, ViewChild } from '@angular/core'; import { FormBuilder, FormGroup, Validators } from '@angular/forms'; -import { MatDialog } from '@angular/material/dialog'; +import { MatDialog, MatDialogRef } from '@angular/material/dialog'; import { MatSnackBar } from '@angular/material/snack-bar'; import { MatTableDataSource } from '@angular/material/table'; import { Title } from '@angular/platform-browser'; @@ -58,6 +58,8 @@ export class GroupListComponent extends BaseViewComponent implements OnInit { @ViewChild('groupEditDialog', { static: true }) public groupEditDialog: TemplateRef; + private dialogRef: MatDialogRef; + public get appPermissions(): AppPermissions[] { return this.repo.appPermissions; } @@ -98,9 +100,9 @@ export class GroupListComponent extends BaseViewComponent implements OnInit { name: [name, Validators.required] }); - const dialogRef = this.dialog.open(this.groupEditDialog, infoDialogSettings); + this.dialogRef = this.dialog.open(this.groupEditDialog, infoDialogSettings); - dialogRef.keydownEvents().subscribe((event: KeyboardEvent) => { + this.dialogRef.keydownEvents().subscribe((event: KeyboardEvent) => { if (event.key === 'Enter' && event.shiftKey && this.groupForm.valid) { this.saveGroup(this.groupForm.value); } @@ -141,7 +143,7 @@ export class GroupListComponent extends BaseViewComponent implements OnInit { * Cancel the editing */ public cancelEditing(): void { - this.dialog.closeAll(); + this.dialogRef.close(); this.newGroup = false; this.editGroup = false; this.selectedGroup = null;