@rtsee/ngx 0.0.59 → 0.0.61

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

@@ -1,43 +0,0 @@
-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

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

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

@@ -1,9 +0,0 @@
-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 {}

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

@@ -1,25 +0,0 @@
-<div class="rtsee-presentation">
-  <div class="rtsee-presentation-header-block">
-    <rtsee-presentation-header [presentation]="presentation"
-    ></rtsee-presentation-header>
-  </div>
-  @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>
-  }
-  @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,24 +0,0 @@
-import {Component, Input} from '@angular/core';
-import { RTSeePresentation } from "@rtsee/presentation";
-import {PresentationHeaderComponent} from "../presentation-header/presentation-header.component";
-import {StoryThumbnailComponent} from "../story-thumbnail/story-thumbnail.component";
-import {StoryPlayerComponent} from "../story-player/story-player.component";
-
-@Component({
-  selector: 'rtsee-presentation',
-  templateUrl: './presentation.component.html',
-  imports: [
-    PresentationHeaderComponent,
-    StoryThumbnailComponent,
-    StoryPlayerComponent
-  ],
-  standalone: true
-})
-export class PresentationComponent {
-  @Input() presentation!: RTSeePresentation;
-
-  constructor() {}
-
-
-
-}

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

@@ -1,14 +0,0 @@
-<div class="rtsee-presentation-header">
-  <div class="rtsee-presentation-room-block">
-    <div class="rtsee-presentation-active-room" *ngIf="presentation.activeRoom">
-      <p>{{presentation.activeRoom.id}}</p>
-      <button (click)="presentation.emitJoinRoomCallEvent()">Join Video Call</button>
-    </div>
-  </div>
-  <div class="rtsee-story-info" *ngIf="presentation.activeStory">
-    <p>{{presentation.activeStory.name}}</p>
-    <span class="rtsee-story-thumbnail-info-time-icon material-icons-outlined"
-          (click)="presentation.disableActiveStory()"
-    >close</span>
-  </div>
-</div>

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

@@ -1,15 +0,0 @@
-import {Component, Input} from '@angular/core';
-import {RTSeePresentation} from "@rtsee/presentation";
-import {NgIf} from "@angular/common";
-
-@Component({
-  selector: 'rtsee-presentation-header',
-  templateUrl: './presentation-header.component.html',
-  imports: [
-    NgIf
-  ],
-  standalone: true
-})
-export class PresentationHeaderComponent {
-  @Input() public presentation!: RTSeePresentation;
-}

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

@@ -1,33 +0,0 @@
-<div class="rtsee-presentation-slide">
-  @if (slide.widget) {
-    <ng-template widgetHost></ng-template>
-  }
-  <div class="rtsee-presentation-slide-default">
-    @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">
-      @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>
-      }
-    </div>
-  </div>
-</div>

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

@@ -1,26 +0,0 @@
-import { Component,  Input } from '@angular/core';
-import {RTSeeStory, RTSeeStorySlide} from "@rtsee/presentation";
-import { NgStyle } from "@angular/common";
-import {WidgetDirective} from "../../../directives/widget.directive";
-
-@Component({
-  selector: 'rtsee-slide',
-  templateUrl: './slide.component.html',
-  imports: [
-    NgStyle,
-    WidgetDirective
-  ],
-  standalone: true
-})
-export class SlideComponent {
-  @Input() story!: RTSeeStory;
-  @Input() slide!: RTSeeStorySlide;
-
-  slideRewindClicked(forward: boolean) {
-    if (forward) {
-      this.story.nextSlide();
-    } else {
-      this.story.previousSlide();
-    }
-  }
-}

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

@@ -1,10 +0,0 @@
-<div class="rtsee-story-player">
-  <div class="rtsee-story-player-slider">
-    <div class="story-player-slide-container"
-         *ngFor="let slide of story.slides"
-         [ngClass]="{'story-player-slide-active': slide.isActive}"
-    >
-      <rtsee-slide [slide]="slide" [story]="story"></rtsee-slide>
-    </div>
-  </div>
-</div>

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

@@ -1,22 +0,0 @@
-import { Component, Input, OnInit } from '@angular/core';
-import {RTSeeStory} from "@rtsee/presentation";
-import {NgClass, NgForOf} from "@angular/common";
-import {SlideComponent} from "../slide/slide.component";
-
-@Component({
-  selector: 'rtsee-story-player',
-  templateUrl: './story-player.component.html',
-  imports: [
-    NgForOf,
-    NgClass,
-    SlideComponent
-  ],
-  standalone: true
-})
-export class StoryPlayerComponent implements OnInit {
-  @Input() story!: RTSeeStory;
-
-  ngOnInit() {
-    console.log('Story Player: Story = ', this.story);
-  }
-}

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

@@ -1,15 +0,0 @@
-<div class="rtsee-story-thumbnail">
-  <div class="rtsee-story-thumbnail-image-container"
-       [ngStyle]="{'background-image': 'url(' + story.imageUrl + ')'}"
-  >
-  </div>
-  <div class="rtsee-story-thumbnail-body-container">
-    <div class="rtsee-story-thumbnail-title-container">
-      <h4 class="rtsee-story-thumbnail-title">{{story.name}}</h4>
-    </div>
-    <div class="rtsee-story-thumbnail-info-container" *ngIf="story.averageReadTime">
-      <span class="rtsee-story-thumbnail-info-time-icon material-icons-outlined">schedule</span>
-      <span class="rtsee-story-thumbnail-info-read-time">{{ Math.ceil(story.averageReadTime / 60) }} хв</span>
-    </div>
-  </div>
-</div>

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

@@ -1,19 +0,0 @@
-import {Component, Input} from '@angular/core';
-import {RTSeeStory} from "@rtsee/presentation";
-import {NgIf, NgStyle} from "@angular/common";
-
-@Component({
-  selector: 'rtsee-story-thumbnail',
-  templateUrl: './story-thumbnail.component.html',
-  styleUrls: ['./story-thumbnail.component.scss'],
-  imports: [
-    NgStyle,
-    NgIf
-  ],
-  standalone: true
-})
-export class StoryThumbnailComponent {
-  @Input() story!: RTSeeStory;
-
-  protected readonly Math = Math;
-}

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

@@ -1,44 +0,0 @@
-<div class="rtsee-settings" [ngClass]="{'rtsee-full-screen-settings' : fullScreenMode}">
-  <div class="rtsee-devices">
-    <div class="rtsee-device-select-wrapper">
-      <label class="rtsee-select-label" for="audio-input">Audio Input:</label>
-      <select (click)="refreshSelectOptions()"
-              (ngModelChange)="audioInputChanged()"
-              [(ngModel)]="audioInputDeviceId"
-              class="rtsee-select"
-              id="audio-input"
-      >
-        <option *ngFor="let device of rtSee.audioInputDevices"
-                [value]="device.deviceId">
-          {{device.label}}
-        </option>
-      </select>
-    </div>
-    <div class="rtsee-device-select-wrapper">
-      <label class="rtsee-select-label" for="audio-output">Audio Output:</label>
-      <select (click)="refreshSelectOptions()"
-              (ngModelChange)="audioOutputChanged()"
-              [(ngModel)]="audioOutputDeviceId"
-              class="rtsee-select"
-              id="audio-output"
-      >
-        <option *ngFor="let device of rtSee.audioOutputDevices" [value]="device.deviceId" >
-          {{device.label}}
-        </option>
-      </select>
-    </div>
-    <div class="rtsee-device-select-wrapper">
-      <label class="rtsee-select-label" for="video-input">Video Input:</label>
-      <select (click)="refreshSelectOptions()"
-              (ngModelChange)="videoInputChanged()"
-              [(ngModel)]="videoInputDeviceId"
-              class="rtsee-select"
-              id="video-input"
-      >
-        <option *ngFor="let device of rtSee.videoInputDevices" [value]="device.deviceId">
-          {{device.label}}
-        </option>
-      </select>
-    </div>
-  </div>
-</div>

package/projects/ngx/src/lib/components/rtsee-settings/rtsee-settings.component.scss

@@ -1,30 +0,0 @@
-$video-container-height: 240px;
-$container-offset: 16px;
-$container-inner-offset: 8px;
-$controls-panel-height: 60px;
-
-.rtsee-settings {
-  box-sizing: border-box;
-  background-color: #404040;
-  border-bottom: 1px solid;
-  max-height: $video-container-height - $controls-panel-height;
-  padding: $container-offset 0;
-  overflow: auto;
-  color: #ffffff;
-
-
-  .rtsee-device-select-wrapper {
-    padding: 0 10px;
-
-    .rtsee-select-label {
-      font-family: monospace;
-      display: inline-block;
-      margin: $container-inner-offset;
-    }
-  }
-
-  &.rtsee-full-screen-settings {
-    max-height: unset;
-    overflow: unset;
-  }
-}

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

@@ -1,57 +0,0 @@
-import { Component, Input, OnInit } from '@angular/core';
-import { RTSeeConference } from '@rtsee/conference';
-import {NgClass, NgForOf} from "@angular/common";
-import {FormsModule} from "@angular/forms";
-
-@Component({
-  selector: 'ngx-rtsee-settings',
-  templateUrl: './rtsee-settings.component.html',
-  styleUrls: ['./rtsee-settings.component.scss'],
-  imports: [
-    NgClass,
-    FormsModule,
-    NgForOf
-  ],
-  standalone: true
-})
-export class RtseeSettingsComponent implements OnInit {
-  availableAudioInputDevices: MediaDeviceInfo[];
-  availableVideoInputDevices: MediaDeviceInfo[];
-  availableAudioOutputDevices: MediaDeviceInfo[];
-
-  audioOutputDeviceId?: string;
-  videoInputDeviceId?: string;
-  audioInputDeviceId?: string;
-
-  @Input() rtSee!: RTSeeConference;
-  @Input() fullScreenMode!: boolean;
-  constructor() {
-    this.availableAudioInputDevices = [];
-    this.availableVideoInputDevices = [];
-    this.availableAudioOutputDevices = [];
-  }
-
-  ngOnInit(): void {
-    this.refreshSelectOptions();
-  }
-
-  refreshSelectOptions() {
-    void this.rtSee.refreshMediaDevicesList();
-  }
-
-  audioInputChanged() {
-    if (!this.audioInputDeviceId) { return; }
-    this.rtSee.setAudioInputDevice(this.audioInputDeviceId);
-    console.log(this.audioInputDeviceId);
-  }
-
-  audioOutputChanged() {
-    if (!this.audioOutputDeviceId) { return; }
-    this.rtSee.setAudioOutputDevice(this.audioOutputDeviceId);
-  }
-
-  videoInputChanged() {
-    if (!this.videoInputDeviceId) { return; }
-    this.rtSee.setVideoInputDevice(this.videoInputDeviceId);
-  }
-}

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

@@ -1,19 +0,0 @@
-<div class="rtsee-soundbar">
-  <div class="rtsee-soundbar-scale">
-    <div class="rtsee-soundbar-scale-item">
-      <div class="rtsee-soundbar-scale-item-level rtsee-soundbar-scale-item-level-one"
-           [style.height.%]="scaleOneLevel"
-      ></div>
-    </div>
-    <div class="rtsee-soundbar-scale-item">
-      <div class="rtsee-soundbar-scale-item-level rtsee-soundbar-scale-item-level-two"
-           [style.height.%]="scaleTwoLevel"
-      ></div>
-    </div>
-    <div class="rtsee-soundbar-scale-item">
-      <div class="rtsee-soundbar-scale-item-level rtsee-soundbar-scale-item-level-three"
-           [style.height.%]="scaleThreeLevel"
-      ></div>
-    </div>
-  </div>
-</div>

package/projects/ngx/src/lib/components/rtsee-soundbar/rtsee-soundbar.component.scss

@@ -1,56 +0,0 @@
-$scale-item-height: 15px;
-$scale-item-width: 5px;
-$soundbar-inner-offset: 2px;
-$soundbar-height: $scale-item-height + $soundbar-inner-offset * 2;
-$soundbar-width: $scale-item-width * 3 + $soundbar-inner-offset * 4;
-$min-scale-height: 25%;
-$soundbar-scale-item-color: #00CE00;
-
-.rtsee-soundbar {
-  height: $soundbar-height;
-  width: $soundbar-width;
-  padding: $soundbar-inner-offset 0 0 0;
-
-  .rtsee-soundbar-scale {
-    height: 100%;
-
-    .rtsee-soundbar-scale-item {
-      float: left;
-      height: 15px;
-      width: 5px;
-      margin-left: 2px;
-      position: relative;
-      border-radius: 4px;
-
-      &:last-child:after {
-        content: '';
-        display: block;
-        clear: both;
-      }
-
-      .rtsee-soundbar-scale-item-level {
-        position: absolute;
-        bottom: 0;
-        left: 0;
-        height: 10%;
-        width: 100%;
-        transition: height 0.05s;
-        background-color: $soundbar-scale-item-color;
-        min-height: $min-scale-height;
-        border-radius: 1px;
-
-        &.rtsee-soundbar-scale-item-level-one {
-          max-height: 33.3%;
-        }
-
-        &.rtsee-soundbar-scale-item-level-two {
-          max-height: 66.6%;
-        }
-
-        &.rtsee-soundbar-scale-item-level-three {
-          max-height: 100%;
-        }
-      }
-    }
-  }
-}

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

@@ -1,66 +0,0 @@
-import { Component, Input, OnInit } from '@angular/core';
-import { RTSeePeerConnection } from '@rtsee/conference';
-import { interval } from 'rxjs';
-
-@Component({
-    selector: 'ngx-rtsee-soundbar',
-    templateUrl: './rtsee-soundbar.component.html',
-    styleUrls: ['./rtsee-soundbar.component.scss'],
-    standalone: true
-})
-export class RtseeSoundbarComponent implements OnInit {
-  intervalLength: number;
-  noiceLevel: number;
-  scaleOneLevel: number;
-  scaleTwoLevel: number;
-  scaleThreeLevel: number;
-
-  @Input() peer!: RTSeePeerConnection;
-  constructor() {
-    this.intervalLength = 1000;
-    this.noiceLevel = 0;
-    this.scaleOneLevel = 0;
-    this.scaleTwoLevel = 0;
-    this.scaleThreeLevel = 0;
-  }
-
-  ngOnInit(): void {
-    this.startSoundMeterListening();
-  }
-
-  startSoundMeterListening() {
-    const step = interval(1000 / 10);
-    step.subscribe(() => {
-      if (!this.peer.soundMeter || !this.peer.soundMeter.level) {
-        this.noiceLevel = 0;
-      } else {
-        this.noiceLevel = this.peer.soundMeter?.level * 100 || 0;
-      }
-
-      this.setSoundMeterHeights();
-    });
-  }
-
-  setSoundMeterHeights() {
-    const ZERO_LEVEL = 25;
-    const SCALE_STEP = 25;
-    const SCALE_ONE_TOP = ZERO_LEVEL + SCALE_STEP;
-    const SCALE_TWO_TOP = SCALE_ONE_TOP + SCALE_STEP;
-
-    if (!this.peer || !this.peer.soundMeter || this.noiceLevel < ZERO_LEVEL) {
-      this.scaleOneLevel = 0;
-      this.scaleTwoLevel = 0;
-      this.scaleThreeLevel = 0;
-    }
-
-    const scaleOneValue = ((this.noiceLevel - ZERO_LEVEL) / SCALE_STEP) * 100;
-    const scaleTwoValue =
-      ((this.noiceLevel - SCALE_ONE_TOP) / SCALE_STEP) * 100;
-    const scaleThreeValue =
-      ((this.noiceLevel - SCALE_TWO_TOP) / SCALE_STEP) * 100;
-
-    this.scaleOneLevel = scaleOneValue > 0 ? scaleOneValue : 0;
-    this.scaleTwoLevel = scaleTwoValue > 0 ? scaleTwoValue : 0;
-    this.scaleThreeLevel = scaleThreeValue > 0 ? scaleTwoValue : 0;
-  }
-}

package/projects/ngx/src/lib/directives/shave.directive.ts

@@ -1,15 +0,0 @@
-import { AfterViewInit, Directive, ElementRef } from '@angular/core';
-import shave from 'shave';
-
-@Directive({
-    selector: '[rtseeShave]',
-    standalone: true
-})
-export class ShaveDirective implements AfterViewInit {
-  constructor(private elem: ElementRef<HTMLDivElement>) {}
-
-  ngAfterViewInit() {
-    const height = this.elem.nativeElement?.offsetHeight;
-    shave(this.elem.nativeElement as unknown as NodeList, height);
-  }
-}

package/projects/ngx/src/lib/directives/widget.directive.ts

@@ -1,9 +0,0 @@
-import { Directive, ViewContainerRef } from '@angular/core';
-
-@Directive({
-    selector: '[widgetHost]',
-    standalone: true
-})
-export class WidgetDirective {
-  constructor(public viewContainerRef: ViewContainerRef) {}
-}