@rtsee/ngx 0.0.56 → 0.0.57

package/projects/ngx/src/lib/components/rtsee-messenger/main-menu/main-menu.component.html

@@ -0,0 +1,32 @@
+<div class="rtsee-messenger-main-menu">
+  <div class="rtsee-messenger-main-menu-home" *ngIf="state.activePanel === MainMenuPanels.HOME">
+    <ul class="rtsee-messenger-controls">
+      <li>
+        <div class="rtsee-messenger-control-item" (click)="onNewGroupClicked()">
+          <div class="rtsee-messenger-control-icon">
+            <span class="material-icons-outlined">people</span>
+          </div>
+          <span>New Group</span>
+        </div>
+      </li>
+      <li>
+        <div class="rtsee-messenger-control-item" (click)="onNewChannelClicked()">
+          <div class="rtsee-messenger-control-icon">
+            <span class="material-icons-outlined">campaign</span>
+          </div>
+          <span>New Channel</span>
+        </div>
+      </li>
+    </ul>
+    <rtsee-search [search]="search" ></rtsee-search>
+  </div>
+
+  <rtsee-manage-chat *ngIf="state.activePanel === MainMenuPanels.MANAGE_CHAT"
+                     [messenger]="messenger"
+                     [menuState]="state"
+  ></rtsee-manage-chat>
+  <rtsee-contacts-multiselect [search]="search"
+                              [menuState]="state"
+                              *ngIf="state.activePanel === MainMenuPanels.CONTACTS_SELECT"
+  ></rtsee-contacts-multiselect>
+</div>

package/projects/ngx/src/lib/components/rtsee-messenger/main-menu/main-menu.component.ts

@@ -0,0 +1,41 @@
+import { Component, Input } from '@angular/core';
+import { RTSeeMessenger, RTSeeMessengerSearch } from '@rtsee/messenger';
+import {
+  DEFAULT_MAIN_MENU_STATE,
+  IMainMenuState,
+  MainMenuPanels,
+} from './components/models/MainMenuState';
+import {NgIf} from "@angular/common";
+import {SearchComponent} from "./components/search/search.component";
+import {ManageChatComponent} from "./components/manage-chat/manage-chat.component";
+import {ContactsMultiselectComponent} from "./components/contacts-multiselect/contacts-multiselect.component";
+
+@Component({
+  selector: 'rtsee-main-menu',
+  templateUrl: './main-menu.component.html',
+  imports: [
+    NgIf,
+    SearchComponent,
+    ManageChatComponent,
+    ContactsMultiselectComponent
+  ],
+  standalone: true
+})
+export class MainMenuComponent {
+  @Input() search!: RTSeeMessengerSearch;
+  @Input() messenger!: RTSeeMessenger;
+
+  readonly MainMenuPanels = MainMenuPanels;
+
+  state: IMainMenuState = {
+    activePanel: DEFAULT_MAIN_MENU_STATE,
+  };
+
+  onNewGroupClicked() {
+    this.state.activePanel = MainMenuPanels.CONTACTS_SELECT;
+  }
+
+  onNewChannelClicked() {
+    this.state.activePanel = MainMenuPanels.MANAGE_CHAT;
+  }
+}

package/projects/ngx/src/lib/components/rtsee-messenger/message/components/message-time-and-status/message-time-and-status.component.html

@@ -0,0 +1,9 @@
+<div class="rtsee-messenger-message-time-and-status">
+  <span class="rtsee-messenger-message-status" *ngIf="!hideStatus" [ngClass]="{'showing-status-inside-chat': inChat }">
+    <span *ngIf="message.status === 'pending'"><rtsee-preloader [diameter]="5"></rtsee-preloader></span>
+    <span *ngIf="message.status === 'sent'" class="material-icons-outlined rtsee-message-sent-status">check</span>
+    <span *ngIf="message.status === 'delivered'" class="material-icons-outlined rtsee-message-delivered-status">check</span>
+    <span *ngIf="message.status === 'seen'" class="material-icons-outlined rtsee-message-seen-status">done_all</span>
+  </span>
+  <span class="rtsee-messenger-message-time">{{timeFormatService.formatTimeOrDate(message.createdAt)}}</span>
+</div>

package/projects/ngx/src/lib/components/rtsee-messenger/message/components/message-time-and-status/message-time-and-status.component.ts

@@ -0,0 +1,23 @@
+import { Component, Input } from '@angular/core';
+import { RTSeeMessage } from '@rtsee/messenger';
+import { IMessageThumbnail } from '@rtsee/common';
+import { TimeFormatHelperService } from '../../../../../services/time-format-helper.service';
+import {NgClass, NgIf} from "@angular/common";
+import {PreloaderComponent} from "../../../../../common/components/preloader/preloader.component";
+
+@Component({
+  selector: 'rtsee-message-time-and-status',
+  templateUrl: './message-time-and-status.component.html',
+  imports: [
+    NgIf,
+    NgClass,
+    PreloaderComponent
+  ],
+  standalone: true
+})
+export class MessageTimeAndStatusComponent {
+  @Input() message!: RTSeeMessage | IMessageThumbnail;
+  @Input() hideStatus?: boolean;
+  @Input() inChat?: boolean;
+  constructor(public timeFormatService: TimeFormatHelperService) {}
+}

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

@@ -0,0 +1,17 @@
+<div class="rtsee-messenger-message-container" #rtsMessageContainer
+     [ngClass]="{'rtsee-message-from-me': message.from.id === messenger.clientId}"
+>
+  <div class="rtsee-messenger-message">
+    <ng-template *ngIf="message.widget" widgetHost></ng-template>
+    <p *ngIf="!message.widget"
+       class="rtsee-messenger-message-text"
+    >{{ message.text }}</p>
+    <div class="rtsee-messenger-message-info" #rtsMessageInfo>
+     <rtsee-message-time-and-status [message]="message"
+                                    [inChat]="true"
+                                    [hideStatus]="message.from.id !== messenger.clientId"
+     ></rtsee-message-time-and-status>
+    </div>
+  </div>
+  <div class="message-tail"></div>
+</div>

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

@@ -0,0 +1,64 @@
+import {
+  AfterViewInit,
+  Component,
+  ComponentFactoryResolver,
+  ComponentRef,
+  Input,
+  ViewChild,
+} from '@angular/core';
+import {
+  RTSeeChat,
+  RTSeeChatMember,
+  RTSeeMessage,
+  RTSeeMessenger,
+} from '@rtsee/messenger';
+import { MessageWidgetsService } from '../../../services/message-widgets.service';
+import { WidgetDirective } from '../../../directives/widget.directive';
+import { TimeFormatHelperService } from '../../../services/time-format-helper.service';
+import {NgClass, NgIf} from "@angular/common";
+import {MessageTimeAndStatusComponent} from "./components/message-time-and-status/message-time-and-status.component";
+
+@Component({
+  selector: 'rtsee-message',
+  templateUrl: './message.component.html',
+  imports: [
+    NgClass,
+    NgIf,
+    MessageTimeAndStatusComponent
+  ],
+  standalone: true
+})
+export class MessageComponent implements AfterViewInit {
+  @Input() chat!: RTSeeChat;
+  @Input() message!: RTSeeMessage;
+  @Input() member!: RTSeeChatMember<any>;
+  @Input() messenger!: RTSeeMessenger;
+  @ViewChild(WidgetDirective, { static: false }) widgetHost!: WidgetDirective;
+  constructor(
+    private widgetsService: MessageWidgetsService,
+    private componentFactoryResolver: ComponentFactoryResolver,
+    public timeFormatService: TimeFormatHelperService,
+  ) {}
+
+  ngAfterViewInit() {
+    /* eslint-disable */
+    if (this.message.widget) {
+      const widget = this.widgetsService.getWidgetComponentByName(
+        this.message.widget,
+      );
+      if (!widget) {
+        return;
+      }
+      const viewContainerRef = this.widgetHost.viewContainerRef;
+      viewContainerRef.clear();
+      const componentToShow =
+        this.componentFactoryResolver.resolveComponentFactory(widget);
+      const componentRef: ComponentRef<typeof widget> =
+        viewContainerRef.createComponent(componentToShow);
+      componentRef.instance.message = this.message;
+      componentRef.instance.messenger = this.messenger;
+      componentRef.changeDetectorRef.detectChanges();
+    }
+    /* eslint-enable */
+  }
+}

package/projects/ngx/src/lib/components/rtsee-messenger/message-widgets/call-widget/call-widget.component.html

@@ -0,0 +1,10 @@
+<div class="rtsee-call-widget">
+  <p *ngIf="callerName && callerName !== 'You'"> {{ callerName }} has started a call</p>
+  <p *ngIf="callerName && callerName === 'You'"> You have started a call</p>
+  <p *ngIf="!callerName"> The call has started</p>
+  <button class="rtsee-join-call-btn"
+          [ngClass]="{'rtsee-join-your-call-btn': callerName && callerName === 'You'}"
+          (click)="joinCall()">
+    Join Call
+  </button>
+</div>

package/projects/ngx/src/lib/components/rtsee-messenger/message-widgets/call-widget/call-widget.component.scss

@@ -0,0 +1 @@
+

package/projects/ngx/src/lib/components/rtsee-messenger/message-widgets/call-widget/call-widget.component.ts

@@ -0,0 +1,36 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { RTSeeMessage, RTSeeMessenger } from '@rtsee/messenger';
+import { IRTSeeCall } from '@rtsee/core';
+import {NgClass, NgIf} from "@angular/common";
+
+@Component({
+  selector: 'ngx-call-widget',
+  templateUrl: './call-widget.component.html',
+  styleUrls: ['./call-widget.component.scss'],
+  imports: [
+    NgIf,
+    NgClass
+  ],
+  standalone: true
+})
+export class CallWidgetComponent implements OnInit {
+  @Input() message!: RTSeeMessage<IRTSeeCall>;
+  @Input() messenger!: RTSeeMessenger;
+  callerName?: string;
+
+  ngOnInit(): void {
+    if (this.messenger.clientId === this.message.data?.callerId) {
+      this.callerName = 'You';
+    } else {
+      this.callerName = this.message.data?.caller?.name;
+    }
+  }
+
+  joinCall() {
+    if (!this.messenger || !this.message.data?.roomId) {
+      console.log('No Room Id specified or no messenger!');
+      return;
+    }
+    void this.messenger.joinCall(this.message.data.roomId);
+  }
+}

package/projects/ngx/src/lib/components/rtsee-messenger/messages-list/messages-list.component.html

@@ -0,0 +1,18 @@
+<div class="rtsee-messenger-messages-list"
+     #scrollBlock
+     infiniteScroll
+     [infiniteScrollUpDistance]="2"
+     [infiniteScrollDistance]="2"
+     [infiniteScrollThrottle]="50"
+     [scrollWindow]="false"
+     (scrolledUp)="onScrolledToTop()"
+     (scroll)="onScroll()"
+>
+  @for (message of chat.messages; track message.id; let i = $index) {
+    <div [ngClass]="{'rtsee-messenger-message-wrapper-consecutive': message.from === chat.messages[i+1]?.from}"
+         class="rtsee-messenger-message-wrapper"
+    >
+      <rtsee-message [message]="message" [messenger]="messenger" [chat]="chat"></rtsee-message>
+    </div>
+  }
+</div>

package/projects/ngx/src/lib/components/rtsee-messenger/messages-list/messages-list.component.ts

@@ -0,0 +1,91 @@
+import {
+  AfterViewInit,
+  Component,
+  ElementRef,
+  Input,
+  OnDestroy,
+  OnInit,
+  ViewChild,
+} from '@angular/core';
+import {
+  RTSeeChat,
+  RTSeeMessenger,
+  RTSeeMessage,
+  RTSeeChatEvents,
+} from '@rtsee/messenger';
+import { TimeFormatHelperService } from '../../../services/time-format-helper.service';
+import {InfiniteScrollDirective} from "ngx-infinite-scroll";
+import {NgClass, NgForOf} from "@angular/common";
+import {MessageComponent} from "../message/message.component";
+
+@Component({
+  selector: 'rtsee-messages-list',
+  templateUrl: './messages-list.component.html',
+  imports: [
+    InfiniteScrollDirective,
+    NgClass,
+    NgForOf,
+    MessageComponent
+  ],
+  standalone: true
+})
+export class MessagesListComponent implements AfterViewInit, OnDestroy, OnInit {
+  bindScrollFunction: () => void;
+
+  @Input() chat!: RTSeeChat;
+  @Input() messenger!: RTSeeMessenger;
+  @ViewChild('scrollBlock') scrollContainer!: ElementRef<HTMLDivElement>;
+  constructor(private timeFormatService: TimeFormatHelperService) {
+    this.bindScrollFunction = this.scrollToBottom.bind(this) as () => void;
+  }
+
+  ngOnInit() {
+    this.chat.on(RTSeeChatEvents.MESSAGE_ADDED, this.bindScrollFunction);
+  }
+
+  ngAfterViewInit() {
+    this.scrollToBottom();
+  }
+
+  onMessageSent() {
+    this.scrollToBottom();
+  }
+
+  ngOnDestroy() {
+    this.chat.off(RTSeeChatEvents.MESSAGE_ADDED, this.bindScrollFunction);
+  }
+
+  onScrolledToTop() {
+    if (this.chat.messagesLoadInProgress) {
+      return;
+    }
+    this.chat.loadRemoteMessages('back');
+  }
+
+  onScroll() {
+    // if (this.scrollContainer.nativeElement.scrollTop < 1) {
+    //   this.scrollContainer.nativeElement.scrollTop = 1;
+    // }
+    if (this.chat.messagesLoadInProgress) {
+      return;
+    }
+    this.chat.loadRemoteMessages('front');
+  }
+
+  scrollToBottom() {
+    if (!this.scrollContainer?.nativeElement?.scrollHeight) {
+      return;
+    }
+
+    try {
+      this.scrollContainer.nativeElement.scrollTop =
+        this.scrollContainer.nativeElement.scrollHeight;
+    } catch (err) {
+      console.log('Failed to Scroll');
+    }
+  }
+
+  formatDate(message: RTSeeMessage) {
+    return this.timeFormatService.formatDate(message.createdAt);
+  }
+}

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

@@ -0,0 +1,31 @@
+<div class="rtsee-messenger" [ngClass]="{
+  'rtsee-messenger-main-menu-opened': messenger.mainMenuOpened,
+  'rtsee-messenger-header-expanded': isHeaderExpanded,
+  'rtsee-messenger-folded': messenger.folded
+}">
+  <div class="rtsee-messenger-header-container">
+    <rtsee-messenger-header [messenger]="messenger"
+                            (expandToggled)="onHeaderExpandToggled($event)"
+    ></rtsee-messenger-header>
+  </div>
+  <div class="rtsee-messenger-body-container"
+       infiniteScroll
+       [infiniteScrollDistance]="2"
+       [infiniteScrollThrottle]="50"
+       [scrollWindow]="false"
+       (scrolled)="onScroll()"
+  >
+    <rtsee-chats-list *ngIf="!messenger.openedChat" [chats]="messenger.chats" [messenger]="messenger"></rtsee-chats-list>
+    <rtsee-chat *ngIf="messenger.openedChat" [messenger]="messenger" [chat]="messenger.openedChat"></rtsee-chat>
+    <rtsee-preloader [diameter]="50" *ngIf="messenger.loadingChatsInProgress" ></rtsee-preloader>
+  </div>
+  <div class="rtsee-messenger-main-menu-container">
+    <rtsee-main-menu
+      *ngIf="messenger.mainMenuOpened"
+      [search]="messenger.search"
+      [messenger]="messenger"></rtsee-main-menu>
+  </div>
+  <div class="rtsee-messenger-overlay" (click)="messenger.openMainMenu(false)"></div>
+</div>
+
+

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

@@ -0,0 +1,45 @@
+import { Component, Input } from '@angular/core';
+import { RTSeeMessenger } from '@rtsee/messenger';
+import {MessengerHeaderComponent} from "../messenger-header/messenger-header.component";
+import {InfiniteScrollDirective} from "ngx-infinite-scroll";
+import {NgClass, NgIf} from "@angular/common";
+import {ChatsListComponent} from "../chats-list/chats-list.component";
+import {ChatComponent} from "../chat/chat.component";
+import {PreloaderComponent} from "../../../common/components/preloader/preloader.component";
+import {MainMenuComponent} from "../main-menu/main-menu.component";
+
+@Component({
+  selector: 'rtsee-messenger',
+  templateUrl: './messenger.component.html',
+  imports: [
+    MessengerHeaderComponent,
+    InfiniteScrollDirective,
+    NgClass,
+    ChatsListComponent,
+    ChatComponent,
+    PreloaderComponent,
+    MainMenuComponent,
+    NgIf
+  ],
+  standalone: true
+})
+export class MessengerComponent {
+  isHeaderExpanded: boolean;
+
+  @Input() messenger!: RTSeeMessenger;
+  constructor() {
+    this.isHeaderExpanded = false;
+  }
+
+  onScroll() {
+    this.messenger.loadChats();
+  }
+
+  // onGeneralScroll($event) {
+  //   // $event.stopPropagation();
+  // }
+
+  onHeaderExpandToggled(value: boolean) {
+    this.isHeaderExpanded = value;
+  }
+}

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

@@ -0,0 +1,57 @@
+<div class="rtsee-messenger-header"
+     [ngClass]="{
+     'rtsee-messenger-header-chat-opened': messenger.openedChat,
+     'rtsee-chat-header-unread': messenger.openedChat && !messenger.unreadMessagesCount,
+     'rtsee-messenger-header-expanded': isExpanded
+      }"
+>
+  <div class="rtsee-messenger-profile-image-container ">
+    <div *ngIf="!messenger.openedChat"
+         [style.background-image]="'url(' + messenger.myPeer?.imageUrl || defaultImagesService.PROFILE + ')'"
+         class="rtsee-messenger-profile-image">
+    </div>
+  </div>
+
+  <button class="rtsee-messenger-close-chat"
+          *ngIf="messenger.openedChat"
+          (click)="messenger.closeChat()"
+  >
+    <span class="material-icons-outlined">arrow_back</span>
+    <span class="unread-count" *ngIf="messenger.unreadMessagesCount">{{messenger.unreadMessagesCount}}</span>
+  </button>
+
+  <button class="rtsee-messenger-menu-toggle"
+          *ngIf="!messenger.openedChat && false"
+          (click)="messenger.openMainMenu(true)"
+  >
+    <span class="material-icons-outlined rtsee-messenger-menu-toggle-icon">menu</span>
+  </button>
+  <button class="rtsee-messenger-fold-toggle"
+          (click)="messenger.changeChatFoldState(!messenger.folded)"
+  >
+    <span *ngIf="!messenger.folded" class="material-icons-outlined rtsee-messenger-menu-toggle-icon">expand_more</span>
+    <span *ngIf="messenger.folded" class="material-icons-outlined rtsee-messenger-menu-toggle-icon">expand_less</span>
+  </button>
+
+  <div *ngIf="messenger.openedChat"
+       [ngClass]="{'rtsee-messenger-header-opened-chat-info-expanded': isExpanded}"
+       class="rtsee-messenger-header-opened-chat-info">
+    <div class="rtsee-messenger-profile-header-placeholder">
+      <p *ngIf="messenger.openedChat"
+         class="rtsee-messenger-header-chat-title"
+      >{{ messenger.openedChat.name }}</p>
+      <div class="rtsee-messenger-profile-image-container" (click)="toggleExpand()">
+        <div class="rtsee-messenger-profile-image"
+             [style.background-image]="'url(' + messenger.openedChat.imageUrl || defaultImagesService.PROFILE + ')'"
+        ></div>
+      </div>
+    </div>
+    <div class="rtsee-messenger-profile-data-container">
+      <rtsee-profile *ngIf="isExpanded" [messenger]="messenger"></rtsee-profile>
+    </div>
+  </div>
+
+  <p *ngIf="!messenger.openedChat"
+     class="rtsee-messenger-header-title"
+  >Messaging</p>
+</div>

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

@@ -0,0 +1,30 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { RTSeeMessenger } from '@rtsee/messenger';
+import { DefaultImagesService } from '../../../services/default-images.service';
+import {NgClass, NgIf} from "@angular/common";
+import {ProfileComponent} from "../profile/profile.component";
+
+@Component({
+  selector: 'rtsee-messenger-header',
+  templateUrl: './messenger-header.component.html',
+  imports: [
+    NgClass,
+    NgIf,
+    ProfileComponent
+  ],
+  standalone: true
+})
+export class MessengerHeaderComponent {
+  @Output() expandToggled = new EventEmitter();
+  @Input() isExpanded?: boolean;
+  @Input() messenger!: RTSeeMessenger;
+  constructor(public defaultImagesService: DefaultImagesService) {
+    this.isExpanded = false;
+    this.expandToggled.emit(this.isExpanded);
+  }
+
+  toggleExpand() {
+    this.isExpanded = !this.isExpanded;
+    this.expandToggled.emit(this.isExpanded);
+  }
+}

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

@@ -0,0 +1,20 @@
+<div class="rtsee-messenger-profile">
+  <ul class="rtsee-messenger-profile-controls">
+    <li class="rtsee-messenger-profile-control">
+      <div class="rtsee-messenger-control-item" (click)="call()">
+        <div class="rtsee-messenger-control-icon">
+          <span class="material-icons-outlined">call</span>
+        </div>
+        <span>Call</span>
+      </div>
+    </li>
+    <li class="rtsee-messenger-profile-control">
+      <div class="rtsee-messenger-control-item" (click)="videoCall()">
+        <div class="rtsee-messenger-control-icon">
+          <span class="material-icons-outlined">videocam</span>
+        </div>
+        <span>Video</span>
+      </div>
+    </li>
+  </ul>
+</div>

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

@@ -0,0 +1,25 @@
+import { Component, Input } from '@angular/core';
+import { RTSeeMessenger } from '@rtsee/messenger';
+
+@Component({
+    selector: 'rtsee-profile',
+    templateUrl: './profile.component.html',
+    standalone: true
+})
+export class ProfileComponent {
+  @Input() messenger!: RTSeeMessenger;
+
+  call() {
+    if (!this.messenger.openedChat) {
+      return;
+    }
+    void this.messenger.initializeVideoCall(this.messenger.openedChat);
+  }
+
+  videoCall() {
+    if (!this.messenger.openedChat) {
+      return;
+    }
+    void this.messenger.initializeVideoCall(this.messenger.openedChat);
+  }
+}

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

@@ -0,0 +1,28 @@
+<div class="rtsee-peer" [ngClass]="{
+'rtsee-peer-video-disabled': !peer.remoteVideoStream || !peer.camera
+}">
+  <div class="rtsee-peer-content">
+    <div class="rtsee-peer-photo" *ngIf="!peer.camera">
+      <div class="rtsee-peer-photo-wrapper">
+        <div  *ngIf="peer.imageUrl"
+              [style.background-image]="'url(' + peer.imageUrl + ')'"
+              class="rtsee-peer-photo-image"
+        ></div>
+        <img *ngIf="!peer.imageUrl" [src]="" alt="peer_photo" class="rtsee-peer-photo-image">
+      </div>
+      <div class="rtsee-peer-info">
+        <p class="rtsee-peer-name" *ngIf="peer.name">{{peer.name}}</p>
+      </div>
+    </div>
+      <video #videoOutput
+             class="rtsee-peer-video"
+             [autoplay]="true"
+             [srcObject]="peer.remoteVideoStream"
+             playsinline="true"
+      >
+      </video>
+    <div class="rtsee-peer-soundbar">
+      <ngx-rtsee-soundbar [peer]="peer"></ngx-rtsee-soundbar>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,43 @@
+import {
+  AfterViewInit,
+  Component,
+  ElementRef,
+  Input,
+  ViewChild,
+} from '@angular/core';
+import { RTSeePeerConnection } from '@rtsee/conference';
+import {NgClass, NgIf} from "@angular/common";
+import {RtseeSoundbarComponent} from "../rtsee-soundbar/rtsee-soundbar.component";
+
+@Component({
+  selector: 'ngx-rtsee-peer',
+  templateUrl: './rtsee-peer.component.html',
+  imports: [
+    NgClass,
+    NgIf,
+    RtseeSoundbarComponent
+  ],
+  standalone: true
+})
+export class RtseePeerComponent implements AfterViewInit {
+  intervalLength: number;
+  noiceLevel: number;
+
+  @ViewChild('audioOutput') audioOutput?: ElementRef;
+  @ViewChild('videoOutput') videoOutput?: ElementRef;
+  @Input() peer!: RTSeePeerConnection;
+
+  constructor() {
+    this.intervalLength = 1000;
+    this.noiceLevel = 0;
+  }
+
+  ngAfterViewInit(): void {
+    if (!this.audioOutput) {
+      return;
+    }
+    this.peer.setAudioOutputElement(
+      this.audioOutput.nativeElement as HTMLAudioElement,
+    );
+  }
+}

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

@@ -0,0 +1 @@
+<p>rtsee-peers-list works!</p>

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

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'ngx-rtsee-peers-list',
+    templateUrl: './rtsee-peers-list.component.html',
+    styleUrls: ['./rtsee-peers-list.component.scss'],
+    standalone: true
+})
+export class RtseePeersListComponent {}