Livestream window should not overlap other elements

client/src/app/site/modules/site-wrapper/components/banner/banner.component.html

@@ -1,18 +1,20 @@
-<div
-    *ngFor="let banner of activeBanners | async"
-    class="banner flex-center background-accent"
-    [ngClass]="[banner.class ? banner.class : '', banner.largerOnMobileView ? 'larger-on-mobile' : '']"
->
-    <ng-container *ngIf="banner.component">
-        <ng-template [cdkPortalOutlet]="createComponentPortal(banner.component)"></ng-template>
-    </ng-container>
-    <ng-container *ngIf="!banner.component">
-        <a class="banner-link" [routerLink]="banner.link" [style.cursor]="banner.link ? 'pointer' : 'default'">
-            <mat-icon>{{ banner.icon }}</mat-icon>
-            <span>{{ banner.text | translate }}</span>
-            <div *ngIf="banner.subText">
-                {{ banner.subText | translate }}
-            </div>
-        </a>
-    </ng-container>
+<div osResized (osResizedHeight)="registerBannerHeight($event)">
+    <div
+        *ngFor="let banner of activeBanners | async"
+        class="banner flex-center background-accent"
+        [ngClass]="[banner.class ? banner.class : '', banner.largerOnMobileView ? 'larger-on-mobile' : '']"
+    >
+        <ng-container *ngIf="banner.component">
+            <ng-template [cdkPortalOutlet]="createComponentPortal(banner.component)"></ng-template>
+        </ng-container>
+        <ng-container *ngIf="!banner.component">
+            <a class="banner-link" [routerLink]="banner.link" [style.cursor]="banner.link ? 'pointer' : 'default'">
+                <mat-icon>{{ banner.icon }}</mat-icon>
+                <span>{{ banner.text | translate }}</span>
+                <div *ngIf="banner.subText">
+                    {{ banner.subText | translate }}
+                </div>
+            </a>
+        </ng-container>
+    </div>
 </div>

client/src/app/site/modules/site-wrapper/components/banner/banner.component.ts

@@ -1,5 +1,5 @@
 import { ComponentPortal } from '@angular/cdk/portal';
-import { Component } from '@angular/core';
+import { Component, OnDestroy } from '@angular/core';
 import { Observable } from 'rxjs';
 import { Constructable } from 'src/app/domain/interfaces/constructable';
 
@@ -10,14 +10,28 @@ import { BannerDefinition, BannerService } from '../../services/banner.service';
     templateUrl: `./banner.component.html`,
     styleUrls: [`./banner.component.scss`]
 })
-export class BannerComponent {
+export class BannerComponent implements OnDestroy {
     public readonly activeBanners: Observable<BannerDefinition[]>;
 
+    private ownHeight = 0;
+
     public constructor(bannerService: BannerService) {
         this.activeBanners = bannerService.getActiveBannersObservable();
     }
 
+    public ngOnDestroy(): void {
+        this.registerBannerHeight(0);
+    }
+
     public createComponentPortal(component: Constructable): ComponentPortal<any> {
         return new ComponentPortal(component);
     }
+
+    public registerBannerHeight(height: number): void {
+        const areaHeight =
+            Number(document.documentElement.style.getPropertyValue(`--banner-area-height`).replace(`px`, ``)) || 0;
+        const newHeight = areaHeight === this.ownHeight ? height : areaHeight - this.ownHeight + height;
+        document.documentElement.style.setProperty(`--banner-area-height`, `${newHeight}px`);
+        this.ownHeight = height;
+    }
 }

client/src/app/site/modules/site-wrapper/site-wrapper.module.ts

@@ -5,6 +5,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
 import { RouterModule } from '@angular/router';
 import { OpenSlidesTranslationModule } from 'src/app/site/modules/translations';
+import { DirectivesModule } from 'src/app/ui/directives';
 
 import { BannerComponent } from './components/banner/banner.component';
 import { SiteWrapperComponent } from './components/site-wrapper/site-wrapper.component';
@@ -14,6 +15,7 @@ import { SiteWrapperServiceModule } from './services/site-wrapper-service.module
     declarations: [SiteWrapperComponent, BannerComponent],
     imports: [
         CommonModule,
+        DirectivesModule,
         RouterModule,
         PortalModule,
         MatButtonModule,

client/src/app/site/modules/user-components/components/user-detail-view/user-detail-view.component.html

@@ -1,4 +1,4 @@
-<div class="content-container">
+<div class="content-container spacer-bottom-60">
     <ng-container *ngIf="isEditing">
         <ng-container *ngIf="useMatcard">
             <mat-card class="os-card">

client/src/app/site/pages/meetings/modules/list-of-speakers-content/components/list-of-speakers-content/list-of-speakers-content.component.html

@@ -1,4 +1,4 @@
-<mat-card class="os-card">
+<mat-card class="os-card" [ngClass]="{ 'spacer-bottom-60': addBottomSpacer }">
     <!-- Title -->
     <os-projectable-title class="los-title" *ngIf="!explicitTitleContent" [model]="listOfSpeakers">
         <mat-icon

client/src/app/site/pages/meetings/modules/list-of-speakers-content/components/list-of-speakers-content/list-of-speakers-content.component.ts

@@ -51,6 +51,9 @@ export class ListOfSpeakersContentComponent extends BaseMeetingComponent impleme
     @ViewChild(SortingListComponent)
     public listElement!: SortingListComponent;
 
+    @Input()
+    public addBottomSpacer = false;
+
     public finishedSpeakers: ViewSpeaker[] = [];
     public waitingSpeakers: ViewSpeaker[] = [];
     public activeSpeaker: ViewSpeaker | null = null;

client/src/app/site/pages/meetings/modules/meetings-component-collector/projectable-list/components/projectable-list/projectable-list.component.html

@@ -14,6 +14,7 @@
     [showMenu]="showMenu"
     [sortService]="sortService"
     [vScrollFixed]="vScrollFixed"
+    [addBottomSpacer]="hasInteractionState | async"
     (selectedRowsChange)="selectedRowsChange.emit($event)"
     (searchFilterUpdated)="searchFilterUpdated.emit($event)"
 >

client/src/app/site/pages/meetings/modules/meetings-component-collector/projectable-list/components/projectable-list/projectable-list.component.ts

@@ -1,7 +1,9 @@
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input } from '@angular/core';
+import { map, Observable } from 'rxjs';
 import { Permission } from 'src/app/domain/definitions/permission';
 import { BaseViewModel } from 'src/app/site/base/base-view-model';
 import { HasListOfSpeakers, hasListOfSpeakers } from 'src/app/site/pages/meetings/pages/agenda';
+import { InteractionService } from 'src/app/site/pages/meetings/pages/interaction/services/interaction.service';
 import { BaseProjectableViewModel } from 'src/app/site/pages/meetings/view-models/base-projectable-model';
 import { OperatorService } from 'src/app/site/services/operator.service';
 import { ViewPortService } from 'src/app/site/services/view-port.service';
@@ -84,6 +86,10 @@ export class ProjectableListComponent<V extends BaseViewModel | BaseProjectableV
         }
     }
 
+    public get hasInteractionState(): Observable<boolean> {
+        return this.interactionService.isConfStateNone.pipe(map(isNone => !isNone));
+    }
+
     public readonly permission = Permission;
 
     public readonly isProjectedFn = (model: BaseProjectableViewModel) => this.service.isProjected(model);
@@ -93,7 +99,8 @@ export class ProjectableListComponent<V extends BaseViewModel | BaseProjectableV
         cd: ChangeDetectorRef,
         scrollingTableManager: ScrollingTableManageService,
         private operator: OperatorService,
-        private service: ProjectableListService
+        private service: ProjectableListService,
+        private interactionService: InteractionService
     ) {
         super(vp, cd, scrollingTableManager);
     }

client/src/app/site/pages/meetings/modules/meetings-navigation/components/meetings-navigation-wrapper/meetings-navigation-wrapper.component.html

@@ -66,7 +66,9 @@
     <ng-template osSidenavMainContent>
         <div class="content">
             <os-global-headbar></os-global-headbar>
-            <router-outlet #o="outlet"></router-outlet>
+            <div class="scrollable-content">
+                <router-outlet #o="outlet"></router-outlet>
+            </div>
         </div>
         <div class="toolbars">
             <os-action-bar></os-action-bar>

client/src/app/site/pages/meetings/modules/meetings-navigation/components/meetings-navigation-wrapper/meetings-navigation-wrapper.component.scss

@@ -65,7 +65,7 @@ mat-icon {
 }
 
 .scrollable-content {
-    height: calc(100% - var(--global-headbar-height));
+    height: calc(100vh - var(--global-headbar-height) - var(--view-headbar-height) - var(--banner-area-height));
     width: 100%;
     overflow: auto;
 }

client/src/app/site/pages/meetings/pages/agenda/modules/list-of-speakers/components/list-of-speakers/list-of-speakers.component.html

@@ -33,6 +33,7 @@ <h2>
         #content
         [listOfSpeakers]="viewListOfSpeakers"
         [sortMode]="manualSortMode"
+        [addBottomSpacer]="true"
         (isListOfSpeakersEmptyEvent)="isListOfSpeakersEmpty = $event"
         (canReaddLastSpeakerEvent)="canReaddLastSpeaker = $event"
     ></os-list-of-speakers-content>

client/src/app/site/pages/meetings/pages/agenda/modules/topics/pages/topic-detail/components/topic-detail/topic-detail.component.html

@@ -110,7 +110,7 @@ <h4>{{ 'Text' | translate }}</h4>
         </form>
     </mat-card>
 
-    <div *ngIf="!editTopic">
+    <div *ngIf="!editTopic" class="spacer-bottom-60">
         <ng-container *ngIf="topic && topic.poll_ids?.length">
             <ng-container *ngFor="let poll of topic.poll_ids | reverse; trackBy: trackById">
                 <os-topic-poll [pollId]="poll" (dialogOpened)="openDialog(poll)"></os-topic-poll>

client/src/app/site/pages/meetings/pages/agenda/pages/agenda-sort/components/agenda-sort/agenda-sort.component.html

@@ -36,7 +36,7 @@ <h2>{{ 'Sort agenda' | translate }}</h2>
         </mat-menu>
     </div>
 </div>
-<mat-card>
+<mat-card class="spacer-bottom-60">
     <div class="current-nodes">
         {{ seenNodes[0] }}
         <span>{{ 'of' | translate }}</span>

client/src/app/site/pages/meetings/pages/mediafiles/modules/mediafile-list/components/mediafile-list/mediafile-list.component.html

@@ -38,6 +38,7 @@ <h2>{{ 'Files' | translate }}</h2>
     [editFolderTemplate]="fileEditDialog"
     [fileMenuTemplate]="fileMenuTemplate"
     [shouldShowFileMenuFn]="shouldShowFileMenuFn"
+    [addBottomSpacer]="hasInteractionState | async"
     (directoryChanged)="changeDirectory($event.directoryId)"
     (beforeEditing)="onEditFile($event.file)"
     (saved)="onSaveFile($event.update)"

client/src/app/site/pages/meetings/pages/mediafiles/modules/mediafile-list/components/mediafile-list/mediafile-list.component.ts

@@ -2,7 +2,7 @@ import { ChangeDetectorRef, Component, OnDestroy, OnInit, TemplateRef, ViewChild
 import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
 import { ActivatedRoute } from '@angular/router';
 import { TranslateService } from '@ngx-translate/core';
-import { BehaviorSubject, Observable, Subscription } from 'rxjs';
+import { BehaviorSubject, map, Observable, Subscription } from 'rxjs';
 import { Permission } from 'src/app/domain/definitions/permission';
 import { Mediafile } from 'src/app/domain/models/mediafiles/mediafile';
 import {
@@ -20,6 +20,7 @@ import { OperatorService } from 'src/app/site/services/operator.service';
 import { ViewPortService } from 'src/app/site/services/view-port.service';
 import { FileListComponent } from 'src/app/ui/modules/file-list/components/file-list/file-list.component';
 
+import { InteractionService } from '../../../../../interaction/services/interaction.service';
 import { ViewGroup } from '../../../../../participants/modules/groups/view-models/view-group';
 import { MEDIAFILES_SUBSCRIPTION } from '../../../../mediafiles.subscription';
 import { MediafileCommonService } from '../../../../services/mediafile-common.service';
@@ -76,6 +77,10 @@ export class MediafileListComponent extends BaseMeetingListViewComponent<ViewMed
      */
     public fileEditForm: UntypedFormGroup | null = null;
 
+    public get hasInteractionState(): Observable<boolean> {
+        return this.interactionService.isConfStateNone.pipe(map(isNone => !isNone));
+    }
+
     private folderSubscription: Subscription | null = null;
     private directorySubscription: Subscription | null = null;
     public directory: ViewMediafile | null = null;
@@ -96,7 +101,8 @@ export class MediafileListComponent extends BaseMeetingListViewComponent<ViewMed
         private formBuilder: UntypedFormBuilder,
         private groupRepo: MediafileListGroupService,
         private cd: ChangeDetectorRef,
-        private commonService: MediafileCommonService
+        private commonService: MediafileCommonService,
+        private interactionService: InteractionService
     ) {
         super(componentServiceCollector, translate);
         this.canMultiSelect = true;

client/src/app/site/pages/meetings/pages/mediafiles/modules/mediafile-upload/components/mediafile-upload/mediafile-upload.component.html

@@ -12,7 +12,7 @@ <h2>{{ 'Upload files' | translate }}</h2>
     </div> -->
 </os-head-bar>
 
-<mat-card class="os-card">
+<mat-card class="os-card spacer-bottom-60">
     <os-media-upload-content
         [parallel]="parallel"
         [directoryId]="directoryId"

client/src/app/site/pages/meetings/pages/meeting-settings/pages/meeting-settings-group-list/components/meeting-settings-group-list/meeting-settings-group-list.component.html

@@ -9,18 +9,25 @@ <h2>{{ 'Settings' | translate }}</h2>
     </div>
 </os-head-bar>
 
-<os-grid>
-    <os-tile *ngFor="let group of this.groups" orientation="vertical" [preferredSize]="2">
-        <div class="settings-group-card" [osPaper]="2" [osPaperRaise]="true" [routerLink]="group.label.toLowerCase()">
-            <div class="flex-center background-selected">
-                <mat-icon>{{ group.icon }}</mat-icon>
+<div class="spacer-bottom-60">
+    <os-grid>
+        <os-tile *ngFor="let group of this.groups" orientation="vertical" [preferredSize]="2">
+            <div
+                class="settings-group-card"
+                [osPaper]="2"
+                [osPaperRaise]="true"
+                [routerLink]="group.label.toLowerCase()"
+            >
+                <div class="flex-center background-selected">
+                    <mat-icon>{{ group.icon }}</mat-icon>
+                </div>
+                <div class="flex-center-unsafe text-center background-card">
+                    {{ group.label | translate }}
+                </div>
             </div>
-            <div class="flex-center-unsafe text-center background-card">
-                {{ group.label | translate }}
-            </div>
-        </div>
-    </os-tile>
-</os-grid>
+        </os-tile>
+    </os-grid>
+</div>
 
 <mat-menu #settingsMenu="matMenu">
     <button mat-menu-item (click)="resetAll()">

client/src/app/site/pages/meetings/pages/motions/pages/categories/components/category-detail-sort/category-detail-sort.component.html

@@ -6,7 +6,7 @@ <h2 *ngIf="category">{{ 'Sort motions' | translate }} ({{ category.prefixedName
         </div>
     </os-head-bar>
 
-    <mat-card class="os-form-card">
+    <mat-card class="os-card spacer-bottom-60">
         <div *ngIf="isMultiSelect">
             <span>{{ sortSelector.multiSelectedIndex.length }}&nbsp;</span>
             <span>{{ 'selected' | translate }}</span>

client/src/app/site/pages/meetings/pages/motions/pages/categories/components/category-detail/category-detail.component.html

@@ -17,7 +17,7 @@ <h2 *ngIf="selectedCategory">
         </div>
     </os-head-bar>
 
-    <mat-card>
+    <mat-card class="os-card spacer-bottom-60">
         <div *ngFor="let category of categories">
             <h2>
                 <span>{{ getLevelDashes(category) }}</span>

client/src/app/site/pages/meetings/pages/motions/pages/categories/components/category-list-sort/category-list-sort.component.html

@@ -5,7 +5,7 @@ <h2>{{ 'Sort categories' | translate }}</h2>
     </div>
 </os-head-bar>
 
-<mat-card>
+<mat-card class="os-card spacer-bottom-60">
     <os-sorting-tree
         #osSortedTree
         parentKey="parent_id"