feat: Add fullscreen mode

DSD-DBS · Sep 11, 2023 · 87bdd82 · 87bdd82
1 parent 2644e05
commit 87bdd82
Show file tree

Hide file tree

Showing 6 changed files with 91 additions and 28 deletions.
diff --git a/frontend/src/app/app.component.html b/frontend/src/app/app.component.html
@@ -8,14 +8,29 @@
     <app-nav-bar-menu></app-nav-bar-menu>
   </mat-drawer>
   <mat-drawer-content class="overall-wrapper">
-    <div class="navBar">
+    <div
+      class="navBar"
+      *ngIf="(fullscreenService.isFullscreen$ | async) === false"
+    >
       <app-header *ngIf="pageLayoutService.showHeader"></app-header>
     </div>
-    <div class="wrapper">
-      <app-notice *ngIf="pageLayoutService.showNotice"></app-notice>
+    <div
+      [ngClass]="{
+        wrapper: (fullscreenService.isFullscreen$ | async) === false
+      }"
+    >
+      <app-notice
+        *ngIf="
+          (fullscreenService.isFullscreen$ | async) === false &&
+          pageLayoutService.showNotice
+        "
+      ></app-notice>
       <router-outlet></router-outlet>
     </div>
-    <div class="footer">
+    <div
+      class="footer"
+      *ngIf="(fullscreenService.isFullscreen$ | async) === false"
+    >
       <app-version id="left"></app-version>
       <div id="middle">
         <app-footer

diff --git a/frontend/src/app/app.component.ts b/frontend/src/app/app.component.ts
@@ -7,6 +7,7 @@ import { AfterViewInit, Component, ViewChild } from '@angular/core';
 import { MatSidenav } from '@angular/material/sidenav';
 import { NavBarService } from 'src/app/general/nav-bar/nav-bar.service';
 import { PageLayoutService } from './page-layout/page-layout.service';
+import { FullscreenService } from './sessions/service/fullscreen.service';
 
 @Component({
   selector: 'app-root',
@@ -16,6 +17,7 @@ import { PageLayoutService } from './page-layout/page-layout.service';
 export class AppComponent implements AfterViewInit {
   constructor(
     public pageLayoutService: PageLayoutService,
+    public fullscreenService: FullscreenService,
     private navBarService: NavBarService
   ) {}
 

diff --git a/frontend/src/app/sessions/service/fullscreen.service.ts b/frontend/src/app/sessions/service/fullscreen.service.ts
@@ -0,0 +1,19 @@
+/*
+ * SPDX-FileCopyrightText: Copyright DB Netz AG and the capella-collab-manager contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { Injectable } from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class FullscreenService {
+  private _isFullscreen = new BehaviorSubject<boolean>(false);
+  isFullscreen$ = this._isFullscreen.asObservable();
+
+  toggleFullscreen(): void {
+    this._isFullscreen.next(!this._isFullscreen.value);
+  }
+}
diff --git a/frontend/src/app/sessions/session/session.component.css b/frontend/src/app/sessions/session/session.component.css
@@ -7,10 +7,6 @@
   height: calc(100vh - 2vh - 65px - 110px);
 }
 
-.iframe-container {
-  position: relative;
-}
-
 .iframe-overlay {
   position: absolute;
   top: 0;
@@ -20,8 +16,3 @@
 
   z-index: 40;
 }
-
-iframe {
-  width: 100%;
-  height: 100%;
-}
diff --git a/frontend/src/app/sessions/session/session.component.html b/frontend/src/app/sessions/session/session.component.html
@@ -11,6 +11,7 @@
   <div *ngIf="cachedSessions && !cachedSessions.length">
     No sessions found. Please create a session in the 'Sessions' tab first.
   </div>
+
   <div *ngIf="cachedSessions === undefined">
     <ngx-skeleton-loader
       *ngFor="let _ of [0, 1, 2, 3]"
@@ -24,6 +25,7 @@
       }"
     ></ngx-skeleton-loader>
   </div>
+
   <div class="flex flex-col" *ngIf="cachedSessions && cachedSessions.length">
     <mat-checkbox
       class="w-fit"
@@ -40,6 +42,7 @@
       >, created at {{ session.created_at | date: "EE, dd MMM y HH:mm:ss" }}
     </mat-checkbox>
   </div>
+
   <div class="border-2 p-2 mt-2 rounded w-fit">
     Please note: We're not technically preventing that you select two
     Eclipse-based sessions (for example two Capella sessions), <br />but the
@@ -59,18 +62,23 @@
   </div>
 </div>
 
-<div class="w-full height flex gap-2" *ngIf="selectedSessions.length">
+<div class="flex gap-0.5" *ngIf="selectedSessions.length">
   <div
-    class="w-full height active:z-30"
-    [ngClass]="session.focused ? 'z-20' : 'z-10'"
+    class="flex flex-col w-full active:z-30"
+    [ngClass]="{
+      'z-20': session.focused,
+      'z-10': !session.focused,
+      height: (fullscreenService.isFullscreen$ | async) === false,
+      'h-screen': fullscreenService.isFullscreen$ | async
+    }"
     (click)="focusSession(session)"
     *ngFor="let session of selectedSessions"
     cdkDrag
     (cdkDragStarted)="dragStart()"
     (cdkDragEnded)="dragStop()"
   >
     <div
-      class="flex gap-2 rounded-t p-2 cursor-grab active:cursor-grabbing items-center justify-between"
+      class="flex gap-2 p-1 rounded-t cursor-grab active:cursor-grabbing items-center justify-between"
       [ngClass]="session.focused ? 'bg-slate-100' : 'bg-slate-300'"
       cdkDragHandle
     >
@@ -92,18 +100,34 @@
         <mat-icon>phonelink_off</mat-icon>
       </div>
     </div>
-    <div class="iframe-container">
+
+    <div class="relative grow">
       <div
         [ngClass]="session.focused ? '' : 'iframe-overlay opacity-10 bg-black'"
       ></div>
       <div [ngClass]="draggingActive ? 'iframe-overlay' : ''"></div>
       <iframe
         [id]="'session-' + session.id"
-        class="w-full height"
         [src]="session.safeResourceURL"
+        class="w-full h-full"
         allow="clipboard-read; clipboard-write"
       >
       </iframe>
     </div>
   </div>
 </div>
+
+<div class="fixed bottom-4 right-4 z-50">
+  <button
+    mat-fab
+    color="primary"
+    (click)="fullscreenService.toggleFullscreen()"
+  >
+    <mat-icon *ngIf="(fullscreenService.isFullscreen$ | async) === false"
+      >fullscreen</mat-icon
+    >
+    <mat-icon *ngIf="fullscreenService.isFullscreen$ | async"
+      >fullscreen_exit</mat-icon
+    >
+  </button>
+</div>
diff --git a/frontend/src/app/sessions/session/session.component.ts b/frontend/src/app/sessions/session/session.component.ts
@@ -6,10 +6,12 @@
 import { Component, HostListener, OnInit } from '@angular/core';
 import { MatLegacyCheckboxChange as MatCheckboxChange } from '@angular/material/legacy-checkbox';
 import { DomSanitizer } from '@angular/platform-browser';
+import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import { filter, take } from 'rxjs';
 import { LocalStorageService } from 'src/app/general/auth/local-storage/local-storage.service';
 import { Session } from 'src/app/schemes';
 import { GuacamoleService } from 'src/app/services/guacamole/guacamole.service';
+import { FullscreenService } from 'src/app/sessions/service/fullscreen.service';
 import { SessionService } from 'src/app/sessions/service/session.service';
 import { UserSessionService } from 'src/app/sessions/service/user-session.service';
 
@@ -18,6 +20,7 @@ import { UserSessionService } from 'src/app/sessions/service/user-session.servic
   templateUrl: './session.component.html',
   styleUrls: ['./session.component.css'],
 })
+@UntilDestroy()
 export class SessionComponent implements OnInit {
   cachedSessions?: CachedSession[] = undefined;
   selectedSessions: Session[] = [];
@@ -28,6 +31,7 @@ export class SessionComponent implements OnInit {
   constructor(
     public userSessionService: UserSessionService,
     public sessionService: SessionService,
+    public fullscreenService: FullscreenService,
     private guacamoleService: GuacamoleService,
     private localStorageService: LocalStorageService,
     private domSanitizer: DomSanitizer
@@ -45,6 +49,10 @@ export class SessionComponent implements OnInit {
 
   ngOnInit(): void {
     this.initializeCachedSessions();
+
+    this.fullscreenService.isFullscreen$
+      .pipe(untilDestroyed(this))
+      .subscribe(() => this.resizeSessions());
   }
 
   initializeCachedSessions() {
@@ -109,18 +117,22 @@ export class SessionComponent implements OnInit {
     window.clearTimeout(this.debounceTimer);
 
     this.debounceTimer = window.setTimeout(() => {
-      Array.from(document.getElementsByTagName('iframe')).forEach((iframe) => {
-        const session = this.selectedSessions.find(
-          (session) => 'session-' + session.id === iframe.id
-        );
-
-        if (session?.reloadToResize) {
-          this.reloadIFrame(iframe);
-        }
-      });
+      this.resizeSessions();
     }, 250);
   }
 
+  resizeSessions() {
+    Array.from(document.getElementsByTagName('iframe')).forEach((iframe) => {
+      const session = this.selectedSessions.find(
+        (session) => 'session-' + session.id === iframe.id
+      );
+
+      if (session?.reloadToResize) {
+        this.reloadIFrame(iframe);
+      }
+    });
+  }
+
   reloadIFrame(iframe: HTMLIFrameElement) {
     const src = iframe.src;