diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index f3361902d976debcf0a15c97487416a3d99efb2a..5826c74e1a88c8ee948aa8382fa4ba2e6e0c30d5 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -36,6 +36,7 @@ import { ModeratorService } from './services/http/moderator.service';
import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
import { HttpClient } from '@angular/common/http';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
+import { DemoVideoComponent } from './components/home/_dialogs/demo-video/demo-video.component';
export function dialogClose(dialogResult: any) {
}
@@ -51,12 +52,14 @@ export function initializeApp(appConfig: AppConfig) {
RegisterComponent,
UserActivationComponent,
NewLandingComponent,
- HomePageComponent
+ HomePageComponent,
+ DemoVideoComponent
],
entryComponents: [
RegisterComponent,
PasswordResetComponent,
- UserActivationComponent
+ UserActivationComponent,
+ DemoVideoComponent
],
imports: [
AppRoutingModule,
diff --git a/src/app/components/home/_dialogs/demo-video/demo-video.component.html b/src/app/components/home/_dialogs/demo-video/demo-video.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..c27ee18d6a745766e8b921357d424cc4b0fe4eea
--- /dev/null
+++ b/src/app/components/home/_dialogs/demo-video/demo-video.component.html
@@ -0,0 +1,8 @@
+<div class="video" fxLayout="row" fxLayoutAlign="center">
+ <h2 [ngClass]="{'mobileText': deviceType === 'mobile', 'desktopText': deviceType === 'desktop'}">{{'footer.demo' | translate}}</h2>
+ <iframe [ngClass]="{'mobileFrame': deviceType === 'mobile', 'desktopFrame': deviceType === 'desktop'}" src="https://www.youtube.com/embed/gq7LGp5HNIU?autoplay=1" frameborder="0"
+ allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+ <button [ngClass]="{'mobileButton': deviceType === 'mobile', 'desktopButton': deviceType === 'desktop'}" mat-raised-button (click)="closeDialog()">
+ <mat-icon >exit_to_app</mat-icon>
+ </button>
+</div>
diff --git a/src/app/components/home/_dialogs/demo-video/demo-video.component.scss b/src/app/components/home/_dialogs/demo-video/demo-video.component.scss
new file mode 100644
index 0000000000000000000000000000000000000000..d3acad26e4b4de8f774263f81116711800e3513f
--- /dev/null
+++ b/src/app/components/home/_dialogs/demo-video/demo-video.component.scss
@@ -0,0 +1,56 @@
+.video {
+ position: relative;
+ height: 0;
+ padding-bottom: 56.25%;
+}
+
+.desktopFrame {
+ position: absolute;
+ top: 15%;
+ left: 10%;
+ width: 80%;
+ height: 80%;
+}
+
+.mobileFrame {
+ position: absolute;
+ top: 100%;
+ left: 0;
+ width: 100%;
+ height: 100%;
+}
+
+.desktopText {
+ position: absolute;
+ top: 2%;
+ margin-top: 2%;
+ font-size: xx-large;
+ color: var(--on-surface);
+}
+
+.mobileText {
+ position: absolute;
+ top: 2%;
+ left: 0;
+ margin-top: 2%;
+ font-size: xx-large;
+ color: var(--on-surface);
+}
+
+.desktopButton {
+ background-color: var(--red);
+ color: white;
+ position:absolute;
+ top: 4%;
+ right: 10%;
+ max-height: 100px;
+}
+
+.mobileButton {
+ background-color: var(--red);
+ color: white;
+ position:absolute;
+ top: 4%;
+ right: 0;
+ max-height: 100px;
+}
diff --git a/src/app/components/home/_dialogs/demo-video/demo-video.component.spec.ts b/src/app/components/home/_dialogs/demo-video/demo-video.component.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..79ef253c7c11b2d1f314911babe75ce676b64642
--- /dev/null
+++ b/src/app/components/home/_dialogs/demo-video/demo-video.component.spec.ts
@@ -0,0 +1,25 @@
+/*import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DemoVideoComponent } from './demo-video.component';
+
+describe('DemoVideoComponent', () => {
+ let component: DemoVideoComponent;
+ let fixture: ComponentFixture<DemoVideoComponent>;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ DemoVideoComponent ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(DemoVideoComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});*/
diff --git a/src/app/components/home/_dialogs/demo-video/demo-video.component.ts b/src/app/components/home/_dialogs/demo-video/demo-video.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..812625a2659d31c8b4439efe3a8430a52d688217
--- /dev/null
+++ b/src/app/components/home/_dialogs/demo-video/demo-video.component.ts
@@ -0,0 +1,23 @@
+import { Component, OnInit } from '@angular/core';
+import { MatDialog, MatDialogRef } from '@angular/material';
+
+@Component({
+ selector: 'app-demo-video',
+ templateUrl: './demo-video.component.html',
+ styleUrls: ['./demo-video.component.scss']
+})
+export class DemoVideoComponent implements OnInit {
+
+ deviceType: string;
+
+ constructor(public dialogRef: MatDialogRef<DemoVideoComponent>,
+ public dialog: MatDialog) { }
+
+ ngOnInit() {
+ }
+
+ closeDialog() {
+ this.dialogRef.close();
+ }
+
+}
diff --git a/src/app/components/shared/footer/footer.component.html b/src/app/components/shared/footer/footer.component.html
index 3e226fde7739c20ee97f6064eb1a1162713119b9..a3bc001b0597366fabd3485001a40e9d46c72e87 100644
--- a/src/app/components/shared/footer/footer.component.html
+++ b/src/app/components/shared/footer/footer.component.html
@@ -6,8 +6,8 @@
{{ 'footer.blog' | translate }}
</span>
</button>
- <button (click)="navToDemoSession()" *ngIf="router.url === '/home'" mat-button>
- <mat-icon>input</mat-icon>
+ <button (click)="showDemo()" *ngIf="router.url === '/home'" mat-button>
+ <mat-icon>ondemand_video</mat-icon>
{{ 'footer.demo' | translate}}
</button>
<span class="fill-remaining-space"></span>
diff --git a/src/app/components/shared/footer/footer.component.ts b/src/app/components/shared/footer/footer.component.ts
index 41fc443c123172253974172665e7c9fbc00ffaf3..77b0d03dbb2eb3c55fdce01c3c15274a46c753ab 100644
--- a/src/app/components/shared/footer/footer.component.ts
+++ b/src/app/components/shared/footer/footer.component.ts
@@ -9,6 +9,7 @@ import { AuthenticationService } from '../../../services/http/authentication.ser
import { User } from '../../../models/user';
import { RoomService } from '../../../services/http/room.service';
import { Room } from '../../../models/room';
+import { DemoVideoComponent } from '../../home/_dialogs/demo-video/demo-video.component';
@Component({
selector: 'app-footer',
@@ -36,7 +37,7 @@ export class FooterComponent implements OnInit {
public authenticationService: AuthenticationService,
private roomService: RoomService) {
langService.langEmitter.subscribe(lang => translateService.use(lang));
- }
+ }
ngOnInit() {
this.deviceType = localStorage.getItem('deviceType');
@@ -58,6 +59,7 @@ export class FooterComponent implements OnInit {
}
});
}
+
navToDSGVO() {
this.translateService.get('footer.will-open').subscribe(message => {
this.translateService.get('footer.dsgvo').subscribe(what => {
@@ -72,6 +74,7 @@ export class FooterComponent implements OnInit {
}
});
}
+
navToImprint() {
this.translateService.get('footer.will-open').subscribe(message => {
this.translateService.get('footer.imprint').subscribe(what => {
@@ -86,6 +89,7 @@ export class FooterComponent implements OnInit {
}
});
}
+
navToDemoSession() {
this.roomService.getRoomByShortId(this.demoId)
.subscribe(room => {
@@ -115,4 +119,18 @@ export class FooterComponent implements OnInit {
this.roomService.addToHistory(this.room.id);
this.router.navigate([`/participant/room/${this.room.shortId}/comments`]);
}
+
+ showDemo() {
+ const dialogRef = this.dialog.open(DemoVideoComponent, {
+ position: {
+ left: '10px',
+ right: '10px'
+ },
+ maxWidth: '100vw',
+ maxHeight: '100vh',
+ height: '100%',
+ width: '100%'
+ });
+ dialogRef.componentInstance.deviceType = this.deviceType;
+ }
}
diff --git a/src/assets/i18n/home/de.json b/src/assets/i18n/home/de.json
index 6fee10378df31f42772d05150f19d3285710d383..c3a3e4632dc65336f638a8b83b668f81aaeab41d 100644
--- a/src/assets/i18n/home/de.json
+++ b/src/assets/i18n/home/de.json
@@ -90,7 +90,7 @@
"create-session": "Session erstellen"
},
"footer": {
- "demo": "Öffentliche Session",
+ "demo": "Demo Video",
"dsgvo": "Datenschutz",
"imprint": "Impressum",
"will-open": " wird in einem neuen Fenster geöffnet...",
diff --git a/src/assets/i18n/home/en.json b/src/assets/i18n/home/en.json
index ef3b6ca6040f62ed83272a8adec9a05136651b41..8553f3ec02c8721576ea6ff7b3f9bd21c9366004 100644
--- a/src/assets/i18n/home/en.json
+++ b/src/assets/i18n/home/en.json
@@ -90,7 +90,7 @@
"create-session": "Create session"
},
"footer": {
- "demo": "Public Session",
+ "demo": "Demo video",
"dsgvo": "Data Protection",
"imprint": "Imprint",
"will-open": " will be opened in a new tab...",