@rtsee/ngx 0.0.57 → 0.0.59

package/projects/ngx/src/lib/components/rtsee-container/rtsee-container.component.html

@@ -1,5 +1,4 @@
 <div class="rtsee-shell"
-     [class.rtseeShellConferenceMode]="rtsee.eventsDashboard && rtsee.activeTab === 'events-dashboard'"
      [ngClass]="{
      'rtsee-shell-conference-mode': rtsee.conference && rtsee.conference.isInActiveCall,
      'rtsee-shell-messenger-active': rtsee.messenger && rtsee.activeTab === 'messenger',
@@ -8,43 +7,40 @@
      'rtsee-shell-side-nav-expanded': isSidenavExpanded
      }"
 >
-  <div class="rtsee-sidenav-block">
-    <rtsee-sidenav [config]="navigationConfig" [isExpanded]="isSidenavExpanded" (toggleClicked)="onSidenavToggleClicked()"></rtsee-sidenav>
+  <div class="rtsee-nav-block">
+    <rtsee-nav [config]="navigationConfig"></rtsee-nav>
   </div>
 
   <div class="rtsee-shell-panel">
-    <div class="rtsee-conference-container"
-         *ngIf="rtsee.conference && rtsee.conference.isInActiveCall"
-    >
-      <rtsee-conference [rtSee]="rtsee.conference"
-      ></rtsee-conference>
-    </div>
+    @if (rtsee.conference && rtsee.conference.isInActiveCall) {
+      <div class="rtsee-conference-container">
+        <rtsee-conference [rtSee]="rtsee.conference"
+        ></rtsee-conference>
+      </div>
+    }
 
-    <div class="rtsee-messenger-container"
-         *ngIf="rtsee.messenger"
-    >
-      <rtsee-messenger [messenger]="rtsee.messenger"
-      ></rtsee-messenger>
-    </div>
+    @if (rtsee.messenger) {
+      <div class="rtsee-messenger-container">
+        <rtsee-messenger [messenger]="rtsee.messenger"
+        ></rtsee-messenger>
+      </div>
+    }
 
-    <div class="rtsee-events-dashboard-container"
-         *ngIf="rtsee.eventsDashboard && rtsee.eventsDashboard.isReady"
-    >
-      <rtsee-events-dashboard [eventsDashboard]="rtsee.eventsDashboard"
-      ></rtsee-events-dashboard>
-    </div>
+    @if (rtsee.eventsDashboard && rtsee.eventsDashboard.isReady) {
+      <div class="rtsee-events-dashboard-container">
+        <rtsee-events-dashboard [eventsDashboard]="rtsee.eventsDashboard"
+        ></rtsee-events-dashboard>
+      </div>
+    }
 
-    <div class="rtsee-presentation-container"
-         *ngIf="rtsee.presentation && rtsee.presentation.isActive"
-    >
-      <rtsee-presentation [presentation]="rtsee.presentation"></rtsee-presentation>
-    </div>
+    @if (rtsee.presentation && rtsee.presentation.isActive) {
+      <div class="rtsee-presentation-container">
+        <rtsee-presentation [presentation]="rtsee.presentation"></rtsee-presentation>
+      </div>
+    }
   </div>
 
   <div class="rtsee-content">
       <ng-content></ng-content>
   </div>
-  <div class="rtsee-bottom-nav-block">
-    <rtsee-bottom-nav [config]="navigationConfig"></rtsee-bottom-nav>
-  </div>
 </div>

package/projects/ngx/src/lib/components/rtsee-container/rtsee-container.component.ts

@@ -1,12 +1,11 @@
 import {Component, Input} from '@angular/core';
-import {RTSee, INavigationConfig} from "@rtsee/factory";
-import {NgClass, NgIf} from "@angular/common";
-import {RtseeSidenavComponent} from "./rtsee-sidenav/rtsee-sidenav.component";
+import {RTSee, INavigationConfig, IRouteConfig} from "@rtsee/factory";
+import {NgClass} from "@angular/common";
 import {RTSeeConferenceComponent} from "../rtsee/rtsee-conference.component";
 import {MessengerComponent} from "../rtsee-messenger/messenger/messenger.component";
 import {RtseeEventsDashboardComponent} from "../rtsee-events-dashboard/rtsee-events-dashboard.component";
 import {PresentationComponent} from "../rtsee-presentation/presentation/presentation.component";
-import {RtseeBottomNavComponent} from "./rtsee-bottom-nav/rtsee-bottom-nav.component";
+import {RtseeNavComponent} from "./rtsee-nav/rtsee-nav.component";
 
 
 @Component({
@@ -14,19 +13,17 @@ import {RtseeBottomNavComponent} from "./rtsee-bottom-nav/rtsee-bottom-nav.compo
   templateUrl: './rtsee-container.component.html',
   imports: [
     NgClass,
-    NgIf,
-    RtseeSidenavComponent,
     RTSeeConferenceComponent,
     MessengerComponent,
     RtseeEventsDashboardComponent,
     PresentationComponent,
-    RtseeBottomNavComponent
+    RtseeNavComponent
   ],
   standalone: true
 })
 export class RTSeeContainerComponent {
   @Input() rtsee!: RTSee;
-  @Input() public navigationConfig!: INavigationConfig;
+  @Input() public navigationConfig!: INavigationConfig<IRouteConfig>;
 
   isSidenavExpanded: boolean = true;
   isSidenavExpandededed: boolean = true;

package/projects/ngx/src/lib/components/rtsee-container/rtsee-nav/rtsee-nav.component.html

@@ -0,0 +1,25 @@
+<div class="rtsee-nav">
+  @if (config.siteLogo) {
+    <div class="rtsee-site-logo">
+      <p-image [src]="config.siteLogo.src" class="rtsee-site-logo-image"></p-image>
+      <p-divider class="rtsee-site-logo-divider" />
+    </div>
+  }
+  <div class="rtsee-nav-bar">
+    @for (route of config.routes; track route.name) {
+      <a [routerLink]="route.link"
+         routerLinkActive="rtsee-nav-item-active"
+         [ngClass]="{'rtsee-nav-item-hidden': !route.isEnabled || !route.iconClassName}"
+         [routerLinkActiveOptions]="{ exact: route.exactActiveLinkMatcher || false }"
+         class="rtsee-nav-item"
+      >
+        <span [ngClass]="route.iconClassName"
+          class="rtsee-nav-item-icon" >
+        </span>
+      </a>
+    }
+    <p-avatar [image]="'https://primefaces.org/cdn/primeng/images/demo/avatar/amyelsner.png'"
+              class="rtsee-nav-item rtsee-nav-image rtsee-nav-profile"
+    ></p-avatar>
+  </div>
+</div>

package/projects/ngx/src/lib/components/rtsee-container/rtsee-nav/rtsee-nav.component.ts

@@ -0,0 +1,26 @@
+import {Component, Input} from '@angular/core';
+import {INavigationConfig} from "@rtsee/factory/dist/factory/src/interfaces/NavigationConfig";
+import {RouterLink, RouterLinkActive} from "@angular/router";
+import {NgClass} from "@angular/common";
+import {IRouteConfig} from "@rtsee/factory/src/interfaces/NavigationConfig";
+import {Avatar} from "primeng/avatar";
+import {Image} from "primeng/image";
+import {Divider} from "primeng/divider";
+
+
+@Component({
+  selector: 'rtsee-nav',
+  templateUrl: './rtsee-nav.component.html',
+  imports: [
+    RouterLink,
+    RouterLinkActive,
+    NgClass,
+    Avatar,
+    Image,
+    Divider
+  ],
+  standalone: true
+})
+export class RtseeNavComponent {
+  @Input() public config!: INavigationConfig<IRouteConfig>;
+}

package/projects/ngx/src/lib/components/rtsee-presentation/presentation/presentation.component.html

@@ -3,22 +3,23 @@
     <rtsee-presentation-header [presentation]="presentation"
     ></rtsee-presentation-header>
   </div>
-  <div class="rtsee-presentation-stories-list"
-       *ngIf="!presentation.activeStory"
-  >
-    <div class="rtsee-presentation-story-thumbnail-container"
-         *ngFor="let story of presentation.stories"
-         (click)="presentation.setActiveStory(story)"
-    >
-      <rtsee-story-thumbnail
-        [story]="story"
-      ></rtsee-story-thumbnail>
+  @if (!presentation.activeStory) {
+    <div class="rtsee-presentation-stories-list">
+      @for (story of presentation.stories; track story.id) {
+        <div class="rtsee-presentation-story-thumbnail-container"
+             (click)="presentation.setActiveStory(story)"
+        >
+          <rtsee-story-thumbnail
+            [story]="story"
+          ></rtsee-story-thumbnail>
+        </div>
+      }
     </div>
-  </div>
-  <div class="rtsee-presentation-story-viewer-container"
-       *ngIf="presentation.activeStory"
-  >
-    <rtsee-story-player [story]="presentation.activeStory"
-    ></rtsee-story-player>
-  </div>
+  }
+  @if (presentation.activeStory) {
+    <div class="rtsee-presentation-story-viewer-container">
+      <rtsee-story-player [story]="presentation.activeStory"
+      ></rtsee-story-player>
+    </div>
+  }
 </div>

package/projects/ngx/src/lib/components/rtsee-presentation/presentation/presentation.component.ts

@@ -1,7 +1,6 @@
 import {Component, Input} from '@angular/core';
 import { RTSeePresentation } from "@rtsee/presentation";
 import {PresentationHeaderComponent} from "../presentation-header/presentation-header.component";
-import {NgForOf, NgIf} from "@angular/common";
 import {StoryThumbnailComponent} from "../story-thumbnail/story-thumbnail.component";
 import {StoryPlayerComponent} from "../story-player/story-player.component";
 
@@ -10,7 +9,6 @@ import {StoryPlayerComponent} from "../story-player/story-player.component";
   templateUrl: './presentation.component.html',
   imports: [
     PresentationHeaderComponent,
-    NgIf,
     StoryThumbnailComponent,
     StoryPlayerComponent
   ],

package/projects/ngx/src/lib/components/rtsee-presentation/slide/slide.component.html

@@ -1,29 +1,33 @@
 <div class="rtsee-presentation-slide">
-  <ng-template *ngIf="slide.widget" widgetHost></ng-template>
+  @if (slide.widget) {
+    <ng-template widgetHost></ng-template>
+  }
   <div class="rtsee-presentation-slide-default">
-    <div class="rtsee-presentation-slide-image-container"
-         [ngStyle]="" ]="{'background-image': 'url(' + slide.imageUrl + ')'}"
-         *ngIf="slide.imageUrl"
-    >
-    </div>
+    @if (slide.imageUrl) {
+      <div class="rtsee-presentation-slide-image-container"
+           [ngStyle]="{'background-image': 'url(' + slide.imageUrl + ')'}"
+      >
+      </div>
+    }
     <div class="rtsee-presentation-slide-text">
       <p>{{slide.text}}</p>
     </div>
     <div class="rtsee-presentation-slide-controls">
-      <button class="slide-navigation-btn navigation-prev"
-              (click)="slideRewindClicked(false)"
-              *ngIf="story.activeSlideNumber !== 1"
-      >
-        <span class="rtsee-story-thumbnail-info-time-icon material-icons-outlined"
-        >arrow_back_ios</span>
-      </button>
-      <button class="slide-navigation-btn navigation-next"
-              (click)="slideRewindClicked(true)"
-              *ngIf="story.activeSlideNumber !== this.story.totalSlides"
-      >
+      @if (story.activeSlideNumber !== 1) {
+        <button class="slide-navigation-btn navigation-prev"
+                (click)="slideRewindClicked(false)"
+        >
+          <span class="rtsee-story-thumbnail-info-time-icon material-icons-outlined">arrow_back_ios</span>
+        </button>
+      }
+      @if (story.activeSlideNumber !== this.story.totalSlides) {
+        <button class="slide-navigation-btn navigation-next"
+                (click)="slideRewindClicked(true)"
+        >
         <span class="rtsee-story-thumbnail-info-time-icon material-icons-outlined"
         >arrow_forward_ios</span>
-      </button>
+        </button>
+      }
     </div>
   </div>
 </div>

package/projects/ngx/src/lib/components/rtsee-presentation/slide/slide.component.ts

@@ -1,13 +1,14 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { Component,  Input } from '@angular/core';
 import {RTSeeStory, RTSeeStorySlide} from "@rtsee/presentation";
-import {NgIf, NgStyle} from "@angular/common";
+import { NgStyle } from "@angular/common";
+import {WidgetDirective} from "../../../directives/widget.directive";
 
 @Component({
   selector: 'rtsee-slide',
   templateUrl: './slide.component.html',
   imports: [
     NgStyle,
-    NgIf
+    WidgetDirective
   ],
   standalone: true
 })

package/projects/ngx/src/lib/ngx.module.ts

@@ -41,17 +41,27 @@ import { SignUpComponent } from "./components/rtsee-auth/sign-up/sign-up.compone
 import { SignInComponent } from "./components/rtsee-auth/sign-in/sign-in.component";
 import { ForgotPasswordComponent } from "./components/rtsee-auth/forgot-password/forgot-password.component";
 import { VendorsComponent } from "./components/rtsee-auth/vendors/vendors.component";
-import { AuthComponent } from './components/rtsee-auth/auth/auth.component';
-import { RtseeSidenavComponent } from './components/rtsee-container/rtsee-sidenav/rtsee-sidenav.component';
-import { RtseeBottomNavComponent } from './components/rtsee-container/rtsee-bottom-nav/rtsee-bottom-nav.component';
+import { RTSeeAuthComponent } from './components/rtsee-auth/auth/auth.component';
 import { RouterLink, RouterLinkActive } from "@angular/router";
 import { ResetPasswordComponent } from './components/rtsee-auth/reset-password/reset-password.component';
 import { PresentationHeaderComponent } from './components/rtsee-presentation/presentation-header/presentation-header.component';
+import { NgxCaptchaModule } from "ngx-captcha";
+import { provideAnimationsAsync } from "@angular/platform-browser/animations/async";
+import { providePrimeNG } from "primeng/config";
+import Aura from '@primeuix/themes/aura';
 
 @NgModule({
+  providers: [
+    provideAnimationsAsync(),
+    providePrimeNG({
+      theme: {
+        preset: Aura
+      }
+    })
+  ],
   declarations: [],
   imports: [
-    AuthComponent,
+    RTSeeAuthComponent,
     VendorsComponent,
     ForgotPasswordComponent,
     SignInComponent,
@@ -80,7 +90,6 @@ import { PresentationHeaderComponent } from './components/rtsee-presentation/pre
     RtseePeerComponent,
     RtseeSoundbarComponent,
     RtseeSettingsComponent,
-    RtseeSidenavComponent,
     MessengerHeaderComponent,
     ChatsListComponent,
     ProfileComponent,
@@ -92,7 +101,6 @@ import { PresentationHeaderComponent } from './components/rtsee-presentation/pre
     StoryPlayerComponent,
     SlideComponent,
     StoryThumbnailComponent,
-    RtseeBottomNavComponent,
     PresentationHeaderComponent,
     CommonModule,
     ReactiveFormsModule,
@@ -102,6 +110,7 @@ import { PresentationHeaderComponent } from './components/rtsee-presentation/pre
     NgOptimizedImage,
     RouterLink,
     RouterLinkActive,
+    NgxCaptchaModule
   ],
   exports: [
     RTSeeConferenceComponent,
@@ -109,11 +118,10 @@ import { PresentationHeaderComponent } from './components/rtsee-presentation/pre
     RtseeEventsDashboardComponent,
     RTSeeContainerComponent,
     PresentationComponent,
-    AuthComponent
+    RTSeeAuthComponent
   ],
   schemas: [
     CUSTOM_ELEMENTS_SCHEMA,
-  ],
-
+  ]
 })
 export class RTSeeModule {}