Merge branch '287-embed-a-youtube-video-on-the-home-page' into 'master'

Resolve "Embed a Youtube video on the home page"

Closes #287

See merge request arsnova/arsnova-lite!352

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,

src/app/components/home/_dialogs/demo-video/demo-video.component.html

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

src/app/components/home/_dialogs/demo-video/demo-video.component.scss

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

src/app/components/home/_dialogs/demo-video/demo-video.component.spec.ts

+/*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();
+  });
+});*/

src/app/components/home/_dialogs/demo-video/demo-video.component.ts

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

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>

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

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

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