@rtsee/ngx 0.0.56 → 0.0.57

package/.editorconfig

@@ -0,0 +1,16 @@
+# Editor configuration, see https://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.ts]
+quote_type = single
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false

package/CHANGELOG.md

@@ -0,0 +1,112 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+## 0.0.57 (2025-07-23)
+
+**Note:** Version bump only for package @rtsee/ngx
+
+## 0.0.56 (2025-06-13)
+
+**Note:** Version bump only for package @rtsee/ngx
+
+## 0.0.55 (2025-05-27)
+
+**Note:** Version bump only for package @rtsee/ngx
+
+## 0.0.54 (2025-05-21)
+
+**Note:** Version bump only for package @rtsee/ngx
+
+## 0.0.53 (2025-05-21)
+
+**Note:** Version bump only for package @rtsee/ngx
+
+## 0.0.52 (2025-05-18)
+
+**Note:** Version bump only for package @rtsee/ngx
+
+## 0.0.51 (2025-02-23)
+
+**Note:** Version bump only for package @rtsee/ngx
+
+## 0.0.50 (2025-01-14)
+
+**Note:** Version bump only for package @rtsee/ngx
+
+## 0.0.49 (2024-12-19)
+
+**Note:** Version bump only for package @rtsee/ngx
+
+## 0.0.48 (2024-12-14)
+
+**Note:** Version bump only for package @rtsee/ngx
+
+## 0.0.47 (2024-03-14)
+
+**Note:** Version bump only for package @rtsee/ngx
+
+## 0.0.46 (2024-03-10)
+
+**Note:** Version bump only for package @rtsee/ngx
+
+## 0.0.45 (2024-02-21)
+
+**Note:** Version bump only for package @rtsee/ngx
+
+## 0.0.44 (2024-02-09)
+
+**Note:** Version bump only for package @rtsee/ngx
+
+## 0.0.43 (2023-10-25)
+
+**Note:** Version bump only for package @rtsee/ngx
+
+## 0.0.42 (2023-10-03)
+
+**Note:** Version bump only for package @rtsee/ngx
+
+## 0.0.41 (2023-09-25)
+
+**Note:** Version bump only for package @rtsee/ngx
+
+## 0.0.40 (2023-09-04)
+
+**Note:** Version bump only for package @rtsee/ngx
+
+## 0.0.39 (2023-03-30)
+
+**Note:** Version bump only for package @rtsee/ngx
+
+## 0.0.38 (2023-03-30)
+
+**Note:** Version bump only for package @rtsee/ngx
+
+## 0.0.37 (2023-03-30)
+
+**Note:** Version bump only for package @rtsee/ngx
+
+## 0.0.36 (2023-03-30)
+
+**Note:** Version bump only for package @rtsee/ngx
+
+## 0.0.35 (2023-03-30)
+
+**Note:** Version bump only for package @rtsee/ngx
+
+## 0.0.34 (2023-03-30)
+
+**Note:** Version bump only for package @rtsee/ngx
+
+## 0.0.33 (2022-12-24)
+
+**Note:** Version bump only for package @rtsee/ngx
+
+## 0.0.32 (2022-11-02)
+
+**Note:** Version bump only for package @rtsee/ngx
+
+## 0.0.31 (2022-10-29)
+
+**Note:** Version bump only for package @rtsee/ngx

package/angular.json

@@ -0,0 +1,67 @@
+{
+  "$schema": "../../../node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "ngx": {
+      "projectType": "library",
+      "root": "projects/ngx",
+      "sourceRoot": "projects/ngx/src",
+      "prefix": "rtsee",
+      "schematics": {
+        "@schematics/angular:component": {
+          "style": "scss"
+        }
+      },
+      "architect": {
+        "build": {
+          "builder": "@angular/build:ng-packagr",
+          "options": {
+            "project": "projects/ngx/ng-package.json"
+          },
+          "configurations": {
+            "production": {
+              "tsConfig": "projects/ngx/tsconfig.lib.prod.json"
+            },
+            "development": {
+              "tsConfig": "projects/ngx/tsconfig.lib.json"
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "test": {
+          "builder": "@angular/build:karma",
+          "options": {
+            "tsConfig": "projects/my-lib/tsconfig.spec.json"
+          }
+        }
+      }
+    }
+  },
+  "schematics": {
+    "@schematics/angular:component": {
+      "type": "component"
+    },
+    "@schematics/angular:directive": {
+      "type": "directive"
+    },
+    "@schematics/angular:service": {
+      "type": "service"
+    },
+    "@schematics/angular:guard": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:interceptor": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:module": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:pipe": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:resolver": {
+      "typeSeparator": "."
+    }
+  }
+}

package/jest.config.ts

@@ -0,0 +1,9 @@
+import type { Config } from 'jest';
+
+const jestConfig: Config = {
+  preset: 'jest-preset-angular',
+  setupFilesAfterEnv: ['./setup-jest.ts'],
+  globalSetup: 'jest-preset-angular/global-setup',
+};
+
+export default jestConfig;

package/package.json

@@ -1,11 +1,8 @@
 {
-  "version": "0.0.56",
+  "version": "0.0.57",
   "name": "@rtsee/ngx",
-  "module": "./dist/ngx/esm2022/public-api.mjs",
+  "module": "./dist/ngx/fesm2022/rtsee-ngx.mjs",
   "types": "./dist/ngx/index.d.ts",
-  "files": [
-    "dist"
-  ],
   "license": "ISC",
   "scripts": {
     "ng": "ng",
@@ -14,7 +11,7 @@
     "test": "jest",
     "prepublishOnly": "yarn build",
     "clean": "rm -rf ./dist",
-    "build": "yarn build-scss && yarn clean && yarn compile",
+    "build": "yarn clean && yarn compile",
     "build-scss": "scss-bundle -p scss-bundle.config.json",
     "compile": "ng build",
     "lint-file:eslint": "yarn eslint",
@@ -24,44 +21,42 @@
   },
   "private": false,
   "dependencies": {
-    "@angular/animations": "~18.2.13",
-    "@angular/cdk": "~16.2.2",
-    "@angular/common": "~18.2.13",
-    "@angular/compiler": "~18.2.13",
-    "@angular/core": "~18.2.13",
-    "@angular/forms": "~18.2.13",
-    "@angular/material": "~16.2.2",
-    "@angular/platform-browser": "~18.2.13",
-    "@angular/platform-browser-dynamic": "~18.2.13",
-    "@angular/router": "~18.2.13",
-    "@rtsee/common": "^0.0.26",
-    "@rtsee/conference": "^0.0.27",
-    "@rtsee/events-dashboard": "^0.0.60",
-    "@rtsee/factory": "^0.0.69",
-    "@rtsee/messenger": "^0.0.60",
+    "@angular/animations": "~20.1.2",
+    "@angular/cdk": "~20.1.2",
+    "@angular/common": "~20.1.2",
+    "@angular/compiler": "~20.1.2",
+    "@angular/core": "~20.1.2",
+    "@angular/forms": "~20.1.2",
+    "@angular/platform-browser": "~20.1.2",
+    "@angular/platform-browser-dynamic": "~20.1.2",
+    "@angular/router": "~20.1.2",
+    "@rtsee/common": "^0.0.27",
+    "@rtsee/conference": "^0.0.28",
+    "@rtsee/events-dashboard": "^0.0.61",
+    "@rtsee/factory": "^0.0.70",
+    "@rtsee/messenger": "^0.0.61",
     "@rtsee/signaling-client": "^0.0.66",
     "dayjs": "^1.11.9",
     "ngx-autosize": "^2.0.4",
-    "ngx-infinite-scroll": "19.0.0",
-    "rxjs": "~6.6.0",
-    "scss-bundle": "^3.1.2",
+    "ngx-infinite-scroll": "20.0.0",
+    "rxjs": "~7.8.0",
     "shave": "^5.0.0",
     "swiper": "^11.1.15",
-    "tslib": "^2.2.0",
-    "zone.js": "^0.14.10"
+    "tslib": "^2.3.0",
+    "zone.js": "^0.15.1"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~18.2.19",
-    "@angular/cli": "~18.2.19",
-    "@angular/compiler-cli": "~18.2.13",
-    "@types/node": "~20.5.1",
+    "@angular/build": "^20.1.1",
+    "@angular/cli": "~20.1.1",
+    "@angular/compiler-cli": "~20.1.2",
+    "@types/node": "~24.0.14",
     "jest-preset-angular": "^14.5.5",
     "jest-watch-yarn-workspaces": "^1.1.0",
-    "ng-packagr": "^18.2.1",
-    "typescript": "5.4.5"
+    "ng-packagr": "^20.1.0",
+    "typescript": "5.8.3"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "5e4f98329a3ce5639b5eadf012ad01d58f3eebf8"
+  "gitHead": "741e30dc35daea6122d5bd94a6c070e02a31bc62"
 }

package/projects/ngx/ng-package.json

@@ -0,0 +1,8 @@
+{
+  "$schema": "../../../../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/ngx",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  },
+  "assets": ["src/lib/theme/**/*.scss"]
+}

package/projects/ngx/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "@rtsee/ngx",
+  "description": "Angular component wrappers around rtsee plugins.",
+  "version": "0.0.1",
+  "license": "ISC",
+  "homepage": "https://rtsee.io",
+  "repository": {
+    "type": "git",
+    "url": "git@github.com:thewerf/rtsee.git",
+    "directory": "packages/@rtsee/ngx/projects/ngx"
+  },
+  "peerDependencies": {
+    "@angular/common": "~20.1.2",
+    "@angular/core": "~20.1.2"
+  },
+  "dependencies": {
+    "tslib": "^2.2.0"
+  },
+  "sideEffects": false
+}

package/projects/ngx/src/lib/common/components/preloader/preloader.component.html

@@ -0,0 +1,5 @@
+<div class="rtsee-preloader">
+  <svg [style.max-width.px]="diameter" #canvas [attr.viewBox]="viewBox">
+    <path [attr.d]="d" [attr.stroke]="color"/>
+  </svg>
+</div>

package/projects/ngx/src/lib/common/components/preloader/preloader.component.ts

@@ -0,0 +1,30 @@
+import { Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core';
+
+@Component({
+    selector: 'rtsee-preloader',
+    templateUrl: './preloader.component.html',
+    standalone: true
+})
+export class PreloaderComponent implements OnInit {
+  viewBox = '0 0 100 100';
+  d = 'M 50 96 a 46 46 0 0 1 0 -92 46 46 0 0 1 0 92';
+
+  @ViewChild('canvas') canvas?: ElementRef<SVGElement>;
+  @Input() diameter?: number;
+  @Input() color?: string = '#000000';
+  constructor() {
+    if (this.diameter) {
+      this.viewBox = `0 0 ${this.diameter} ${this.diameter}`;
+      this.d = `M ${this.diameter / 2} ${this.diameter * 0.96} a ${
+        this.diameter * 0.46
+      } ${this.diameter * 0.46} 0 0 1 0 -${this.diameter * 0.92} ${
+        this.diameter * 0.46
+      } ${this.diameter * 0.46} 0 0 1 0 ${this.diameter * 0.92}`;
+    }
+  }
+
+  ngOnInit(): void {
+    //viewBox="0 0 100 100"
+    //d="M 50 96 a 46 46 0 0 1 0 -92 46 46 0 0 1 0 92"
+  }
+}

package/projects/ngx/src/lib/components/constans/common.const.ts

@@ -0,0 +1,8 @@
+export const COMMON_CONSTANTS = {
+  minPasswordLength: 8,
+  requestItemLimit: 20,
+  customTimeFormat: 'HH:mm',
+  customDateFormat: 'dd/MM/YYYY',
+  customDateFormatDaysJs: 'DD/MM/YYYY',
+  customDateTimeFormat: 'dd/MM/YYYY HH:mm',
+};

package/projects/ngx/src/lib/components/enums/form.enum.ts

@@ -0,0 +1,8 @@
+export enum FormErrorKey {
+  required = 'required',
+  email = 'email',
+  minLength = 'minlength',
+  maxLength = 'maxlength',
+  requiredLength = 'requiredLength',
+  passwordsMismatch = 'passwordsMismatch'
+}

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

@@ -0,0 +1,70 @@
+<div class="rtsee-conference-shell" [ngClass]="{
+'rtsee-conference-shell-expanded': rtSee.uiControls.isExpanded,
+'rtsee-conference-shell-no-companions': !rtSee.rtcPeerConnections.connections?.length
+}">
+  <div class="rtsee-local-peer" *ngIf="rtSee.localStream && rtSee.camera">
+    <video class="rtsee-local-video"
+           [autoplay]="true"
+           [muted]="true"
+           [srcObject]="rtSee.localStream"
+           playsinline="true"
+    ></video>
+  </div>
+  <div class="rtsee-window-controls">
+    <button mat-icon-button matSuffix
+            type="button"
+            (click)="this.toggleSettings()"
+            class="rtsee-window-controls-button rtsee-ripple-button"
+    >
+      <span class="material-icons-outlined">settings</span>
+    </button>
+    <button mat-icon-button matSuffix
+            type="button"
+            (click)="this.toggleFullScreenMode()"
+            class="rtsee-window-controls-button rtsee-ripple-button"
+    >
+      <span class="material-icons-outlined">open_in_full</span>
+    </button>
+  </div>
+  <div class="rtsee-settings-container" *ngIf="settingsViewEnabled">
+    <button mat-icon-button matSuffix
+            type="button"
+            (click)="this.toggleSettings()"
+            class="rtsee-close-settings-button"
+    >
+      <span class="material-icons-outlined">close</span>
+    </button>
+    <ngx-rtsee-settings [rtSee]="rtSee" [fullScreenMode]="rtSee.uiControls.isExpanded"></ngx-rtsee-settings>
+  </div>
+  <div class="rtsee-screen-share" *ngIf="rtSee.screenSharePeer" >
+    <video [autoplay]="true"
+           [muted]="true"
+           [srcObject]="rtSee.screenSharePeer.remoteVideoStream"
+           playsinline="true"
+           class="rtsee-screen-share-video"
+    ></video>
+  </div>
+  <div class="rtsee-peers" [ngClass]="{
+    'rtsee-peers-alone': !rtSee.rtcPeerConnections.connections?.length,
+    'rtsee-peers-one': rtSee.rtcPeerConnections.connections?.length === 1,
+    'rtsee-peers-three-grid': rtSee.rtcPeerConnections.connections?.length
+      && rtSee.rtcPeerConnections.connections.length > 1
+      && rtSee.rtcPeerConnections.connections.length < 4,
+    'rtsee-peers-six-grid': rtSee.rtcPeerConnections.connections?.length
+      && rtSee.rtcPeerConnections.connections.length > 3
+      && rtSee.rtcPeerConnections.connections.length < 7,
+    'rtsee-peers-nine-grid': rtSee.rtcPeerConnections.connections?.length
+      && rtSee.rtcPeerConnections.connections.length >= 7
+  }">
+    <div class="rtsee-peer-wrapper"
+         *ngFor="let peer of rtSee.rtcPeerConnections.connections"
+    >
+      <ngx-rtsee-peer [peer]="peer"></ngx-rtsee-peer>
+    </div>
+  </div>
+  <div class="rtsee-peers-list"></div>
+  <div class="rtsee-controls-wrapper">
+    <ngx-rtsee-controls [rtsee]="rtSee" [fullScreenMode]="rtSee.uiControls.isExpanded"></ngx-rtsee-controls>
+  </div>
+</div>
+

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

@@ -0,0 +1,35 @@
+import { Component, Input } from '@angular/core';
+import { RTSeeConference } from '@rtsee/conference';
+import {NgClass, NgIf} from "@angular/common";
+import {RtseeSettingsComponent} from "../rtsee-settings/rtsee-settings.component";
+import {RtseePeerComponent} from "../rtsee-peer/rtsee-peer.component";
+import {RTSeeControlsComponent} from "./rtsee-controls/rtsee-controls.component";
+
+@Component({
+  selector: 'rtsee-conference',
+  templateUrl: './rtsee-conference.component.html',
+  imports: [
+    NgClass,
+    NgIf,
+    RtseeSettingsComponent,
+    RtseePeerComponent,
+    RTSeeControlsComponent
+  ],
+  standalone: true
+})
+export class RTSeeConferenceComponent {
+  settingsViewEnabled: boolean;
+
+  @Input() rtSee!: RTSeeConference;
+  constructor() {
+    this.settingsViewEnabled = false;
+  }
+
+  toggleSettings() {
+    this.settingsViewEnabled = !this.settingsViewEnabled;
+  }
+
+  toggleFullScreenMode() {
+    this.rtSee.uiControls.toggle();
+  }
+}

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

@@ -0,0 +1,54 @@
+<div class="rtsee-controls" [ngClass]="{'rtsee-full-screen-controls' : fullScreenMode }">
+  <div class="rtsee-bottom-panel">
+    <div class="mic rtsee-buttons-container">
+      <button class="rtsee-ripple-button"
+              *ngIf="rtsee.microphone"
+              type="button"
+              (click)="this.rtsee.disableMicrophone()"
+      >
+        <span class="material-icons-outlined">mic_none</span>
+      </button>
+      <button class="rtsee-ripple-button"
+              *ngIf="!rtsee.microphone"
+              type="button" (click)="this.rtsee.enableMicrophone()"
+      >
+        <span class="material-icons-outlined">mic_off</span>
+      </button>
+    </div>
+
+    <div class="video-camera rtsee-buttons-container">
+      <button class="rtsee-ripple-button"
+              *ngIf="rtsee.camera"
+              type="button"
+              (click)="rtsee.disableCamera()"
+      >
+        <span class="material-icons-outlined">videocam</span>
+      </button>
+      <button class="rtsee-ripple-button"
+              *ngIf="!rtsee.camera"
+              type="button"
+              (click)="rtsee.enableCamera()"
+      >
+        <span class="material-icons-outlined">videocam_off</span>
+      </button>
+    </div>
+    <div class="present rtsee-buttons-container"
+         [ngClass]="{'rtsee-present-button-container': rtsee.isPresenter}"
+    >
+      <button class="rtsee-ripple-button"
+              type="button"
+              (click)="onPresentClicked()"
+      >
+        <span class="material-icons-outlined">present_to_all</span>
+      </button>
+    </div>
+    <div class="call-end rtsee-buttons-container">
+      <button class="rtsee-ripple-button"
+              type="button"
+              (click)="rtsee.end()"
+      >
+        <span class="material-icons-outlined">call_end</span>
+      </button>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,70 @@
+$buttons-container-height: 35px;
+$expanded-buttons-container-height: 60px;
+
+.rtsee-controls {
+  display: inline-block;
+  height: 100%;
+
+  .rtsee-buttons-container {
+    height: $buttons-container-height;
+    width: $buttons-container-height;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 0 9px;
+    cursor: pointer;
+
+    &:last-child {
+      margin-right: 0;
+    }
+
+    &:first-child {
+      margin-left: 0;
+    }
+
+    .mdc-icon-button {
+      background-color: #333;
+      color: #ffffff;
+    }
+
+    &.call-end {
+      .mdc-icon-button {
+        background-color: #ff0000;
+      }
+    }
+
+    &.rtsee-present-button-container {
+      .mdc-icon-button {
+        background-color: #009900;
+      }
+    }
+
+    &:hover {
+      //height: 40px;
+      //width: 40px;
+    }
+  }
+
+  .full-screen {
+    align-self: flex-end;
+    padding: 12px;
+    cursor: pointer;
+  }
+
+  .rtsee-bottom-panel {
+    padding: 12px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 45px;
+    background-color: rgba(0,0,0,0.7);
+  }
+
+  &.rtsee-full-screen-controls {
+    .rtsee-buttons-container {
+      height: $expanded-buttons-container-height;
+      width: $expanded-buttons-container-height;
+    }
+  }
+}

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

@@ -0,0 +1,24 @@
+import { Component, Input } from '@angular/core';
+import { RTSeeConference } from '@rtsee/conference';
+import {NgClass, NgIf} from "@angular/common";
+
+@Component({
+  selector: 'ngx-rtsee-controls',
+  templateUrl: './rtsee-controls.component.html',
+  styleUrls: ['./rtsee-controls.component.scss'],
+  imports: [
+    NgClass,
+    NgIf
+  ],
+  standalone: true
+})
+export class RTSeeControlsComponent {
+  @Input() rtsee!: RTSeeConference;
+  @Input() fullScreenMode?: boolean;
+
+  onPresentClicked() {
+    return this.rtsee.isPresenter
+      ? this.rtsee.stopScreenShare()
+      : this.rtsee.startScreenShare();
+  }
+}

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

@@ -0,0 +1,12 @@
+<div class="rtsee-auth">
+  <button (click)="activeComponent = 'sign-in'">Sing In</button>
+  <button (click)="activeComponent = 'sign-up'">Sing Up</button>
+  <button (click)="activeComponent = 'forgot-password'">Forgot Password</button>
+  <button (click)="activeComponent = 'reset-password'">Reset Password</button>
+
+
+  <rtsee-sign-in *ngIf="activeComponent === 'sign-in'"></rtsee-sign-in>
+  <rtsee-sign-up *ngIf="activeComponent === 'sign-up'"></rtsee-sign-up>
+  <rtsee-forgot-password *ngIf="activeComponent === 'forgot-password'"></rtsee-forgot-password>
+  <rtsee-reset-password *ngIf="activeComponent === 'reset-password'"></rtsee-reset-password>
+</div>