diff --git a/projects/editor/src/app/app.module.ts b/projects/editor/src/app/app.module.ts
index 764b6b18d1a20afaa7b8f4af72a06c82ad7283f2..3ae0151f082eb6c5d125c2d9256276bba5807a5c 100644
--- a/projects/editor/src/app/app.module.ts
+++ b/projects/editor/src/app/app.module.ts
@@ -20,7 +20,7 @@ import { StaticCanvasOverlayComponent } from './unit-view/page-view/canvas/stati
import { DynamicCanvasOverlayComponent } from './unit-view/page-view/canvas/dynamic-canvas-overlay.component';
import { SharedModule } from '../../../common/shared.module';
import {
- ConfirmationDialog, TextEditDialog, MultilineTextEditDialog, RichTextEditDialog
+ ConfirmationDialog, TextEditDialog, MultilineTextEditDialog, RichTextEditDialog, PlayerEditDialog
} from './dialog.service';
import { EditorTranslateLoader } from './editor-translate-loader';
import { ElementPropertiesComponent } from './unit-view/page-view/properties-panel/element-properties.component';
@@ -45,6 +45,7 @@ import { ElementSizingPropertiesComponent } from './unit-view/page-view/properti
TextEditDialog,
MultilineTextEditDialog,
RichTextEditDialog,
+ PlayerEditDialog,
ElementPropertiesComponent,
SectionMenuComponent,
SectionStaticComponent,
diff --git a/projects/editor/src/app/dialog.service.ts b/projects/editor/src/app/dialog.service.ts
index bd3dbb5edfb59011887bb2b8cead4e81a738a3fd..d03c60cfb05e3119370373c55f0011e8f24f7b3a 100644
--- a/projects/editor/src/app/dialog.service.ts
+++ b/projects/editor/src/app/dialog.service.ts
@@ -2,6 +2,7 @@
import { Component, Inject, Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { MAT_DIALOG_DATA, MatDialog } from '@angular/material/dialog';
+import { PlayerElement } from '../../../common/interfaces/UIElementInterfaces';
@Injectable({
providedIn: 'root'
@@ -48,6 +49,18 @@ export class DialogService {
});
return dialogRef.afterClosed();
}
+
+ showPlayerEditDialog(player: PlayerElement): Observable<PlayerElement> {
+ const dialogRef = this.dialog.open(PlayerEditDialog, {
+ width: '470px',
+ height: '520px',
+ data: {
+ player: player
+ },
+ autoFocus: false
+ });
+ return dialogRef.afterClosed();
+ }
}
@Component({
@@ -120,3 +133,107 @@ export class MultilineTextEditDialog {
export class RichTextEditDialog {
constructor(@Inject(MAT_DIALOG_DATA) public data: { text: string }) { }
}
+
+@Component({
+ selector: 'app-player-edit-dialog',
+ template: `
+ <mat-dialog-content fxLayout="row">
+ <div class="property-column" fxLayout="column">
+ <mat-checkbox [checked]="newPlayerConfig.autostart"
+ (change)="newPlayerConfig.autostart = $event.checked">
+ Autostart
+ </mat-checkbox>
+ <mat-form-field *ngIf="newPlayerConfig.autostart" appearance="fill">
+ <mat-label>Autostart Verzögerung</mat-label>
+ <input matInput type="number" [value]="newPlayerConfig.autostartDelay"
+ (input)="newPlayerConfig.autostartDelay = $any($event.target).value">
+ </mat-form-field>
+ <mat-checkbox [checked]="newPlayerConfig.loop"
+ (change)="newPlayerConfig.loop = $event.checked">
+ Loop
+ </mat-checkbox>
+ <mat-checkbox [checked]="newPlayerConfig.startControl"
+ (change)="newPlayerConfig.startControl = $event.checked">
+ startControl
+ </mat-checkbox>
+ <mat-checkbox [checked]="newPlayerConfig.pauseControl"
+ (change)="newPlayerConfig.pauseControl = $event.checked">
+ pauseControl
+ </mat-checkbox>
+ <mat-checkbox [checked]="newPlayerConfig.stopControl"
+ (change)="newPlayerConfig.stopControl = $event.checked">
+ stopControl
+ </mat-checkbox>
+ <mat-checkbox [checked]="newPlayerConfig.progressBar"
+ (change)="newPlayerConfig.progressBar = $event.checked">
+ progressBar
+ </mat-checkbox>
+ <mat-checkbox [checked]="newPlayerConfig.interactiveProgressbar"
+ (change)="newPlayerConfig.interactiveProgressbar = $event.checked">
+ interactiveProgressbar
+ </mat-checkbox>
+ <mat-checkbox [checked]="newPlayerConfig.volumeControl"
+ (change)="newPlayerConfig.volumeControl = $event.checked">
+ volumeControl
+ </mat-checkbox>
+ <mat-checkbox [checked]="newPlayerConfig.uninterruptible"
+ (change)="newPlayerConfig.uninterruptible = $event.checked">
+ uninterruptible
+ </mat-checkbox>
+ <mat-checkbox [checked]="newPlayerConfig.hideOtherPages"
+ (change)="newPlayerConfig.hideOtherPages = $event.checked">
+ hideOtherPages
+ </mat-checkbox>
+ <mat-checkbox [checked]="newPlayerConfig.showRestRuns"
+ (change)="newPlayerConfig.showRestRuns = $event.checked">
+ showRestRuns
+ </mat-checkbox>
+ <mat-checkbox [checked]="newPlayerConfig.showRestTime"
+ (change)="newPlayerConfig.showRestTime = $event.checked">
+ showRestTime
+ </mat-checkbox>
+ </div>
+ <div fxLayout="column">
+ <mat-form-field appearance="fill">
+ <mat-label>hintLabel</mat-label>
+ <input matInput type="text" [value]="newPlayerConfig.hintLabel"
+ (input)="newPlayerConfig.hintLabel = $any($event.target).value">
+ </mat-form-field>
+ <mat-form-field *ngIf="newPlayerConfig.hintLabel !== ''" appearance="fill">
+ <mat-label>hintLabelDelay</mat-label>
+ <input matInput type="number" [value]="newPlayerConfig.hintLabelDelay"
+ (input)="newPlayerConfig.hintLabelDelay = $any($event.target).value">
+ </mat-form-field>
+ <mat-form-field appearance="fill">
+ <mat-label>activeAfter</mat-label>
+ <input matInput type="text" [value]="newPlayerConfig.activeAfter"
+ (input)="newPlayerConfig.activeAfter = $any($event.target).value">
+ </mat-form-field>
+ <mat-form-field appearance="fill">
+ <mat-label>minRuns</mat-label>
+ <input matInput type="number" [value]="newPlayerConfig.minRuns"
+ (input)="newPlayerConfig.minRuns = $any($event.target).value">
+ </mat-form-field>
+ <mat-form-field appearance="fill">
+ <mat-label>maxRuns</mat-label>
+ <input matInput type="number" [value]="newPlayerConfig.maxRuns"
+ (input)="newPlayerConfig.maxRuns = $any($event.target).value">
+ </mat-form-field>
+ </div>
+ </mat-dialog-content>
+ <mat-dialog-actions>
+ <button mat-button [mat-dialog-close]="newPlayerConfig">Speichern</button>
+ <button mat-button mat-dialog-close>Abbrechen</button>
+ </mat-dialog-actions>
+ `,
+ styles: [
+ 'mat-dialog-content {min-height: 410px}',
+ '.property-column {margin-right: 20px}'
+ ]
+})
+export class PlayerEditDialog { // TODO return only changed values, so not all the properties have to be overwritten
+ newPlayerConfig: PlayerElement;
+ constructor(@Inject(MAT_DIALOG_DATA)public data: { player: PlayerElement }) {
+ this.newPlayerConfig = data.player;
+ }
+}
diff --git a/projects/editor/src/app/unit-view/page-view/properties-panel/element-properties.component.html b/projects/editor/src/app/unit-view/page-view/properties-panel/element-properties.component.html
index 0d024a98f154639e0120e906c4371f9d92fe6044..b5d83dbc519b990c8b8fb07c0fbf39f3b860111c 100644
--- a/projects/editor/src/app/unit-view/page-view/properties-panel/element-properties.component.html
+++ b/projects/editor/src/app/unit-view/page-view/properties-panel/element-properties.component.html
@@ -25,6 +25,12 @@
</div>
</ng-container>
+ <ng-container *ngIf="combinedProperties.autostart !== undefined">
+ <button mat-fab (click)="unitService.showDefaultEditDialog(selectedElements[0])">
+ <mat-icon>build_circle</mat-icon>
+ </button>
+ </ng-container>
+
<mat-form-field *ngIf="combinedProperties.borderRadius !== undefined" appearance="fill">
<mat-label>Kantenradius</mat-label>
<input matInput type="number" [value]="combinedProperties.borderRadius"
diff --git a/projects/editor/src/app/unit.service.ts b/projects/editor/src/app/unit.service.ts
index 49a2c31b87f49a32e58bf85f82344887377de5e8..52dd27fc617dcd3a7048b97f2a993e076ce5331d 100644
--- a/projects/editor/src/app/unit.service.ts
+++ b/projects/editor/src/app/unit.service.ts
@@ -11,6 +11,7 @@ import { Page } from '../../../common/models/page';
import { Section } from '../../../common/models/section';
import { InputElement, UIElement } from '../../../common/models/uI-element';
import { TextElement } from '../../../common/models/text-element';
+import { PlayerElement } from '../../../common/interfaces/UIElementInterfaces';
@Injectable({
providedIn: 'root'
@@ -242,6 +243,19 @@ export class UnitService {
}
});
break;
+ case 'audio':
+ case 'video':
+ this.dialogService.showPlayerEditDialog(element as unknown as PlayerElement)
+ .subscribe((result: PlayerElement) => {
+ if (result) {
+ console.log('result', result);
+ for (const key in result) {
+ // @ts-ignore
+ this.updateElementProperty([element], key, result[key]);
+ }
+ }
+ });
+ break;
// no default
}
}