@rtsee/ngx 0.0.44 → 0.0.46

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -185,7 +185,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.3", ngImpor
185
185
  type: Input
186
186
  }] } });
187
187
 
188
- class RTSeeComponent {
188
+ class RTSeeConferenceComponent {
189
189
  settingsViewEnabled;
190
190
  fullScreenModeEnabled;
191
191
  rtSee;
@@ -199,12 +199,12 @@ class RTSeeComponent {
199
199
  toggleFullScreenMode() {
200
200
  this.fullScreenModeEnabled = !this.fullScreenModeEnabled;
201
201
  }
202
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: RTSeeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
203
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.3", type: RTSeeComponent, selector: "ngx-rtsee", inputs: { rtSee: "rtSee" }, ngImport: i0, template: "<div class=\"rtsee-shell\" [ngClass]=\"{\n'rtsee-shell-expanded': rtSee.uiControls.isExpanded || fullScreenModeEnabled,\n'rtsee-shell-no-companions': !rtSee.rtcPeerConnections.connections?.length\n}\">\n <div class=\"rtsee-local-peer\" *ngIf=\"rtSee.localStream && rtSee.camera\">\n <video class=\"rtsee-local-video\"\n [autoplay]=\"true\"\n [muted]=\"true\"\n [srcObject]=\"rtSee.localStream\"\n playsinline=\"true\"\n ></video>\n </div>\n <div class=\"rtsee-window-controls\">\n <button mat-icon-button matSuffix\n type=\"button\"\n (click)=\"this.toggleSettings()\"\n class=\"rtsee-window-controls-button rtsee-ripple-button\"\n >\n <span class=\"material-icons-outlined\">settings</span>\n </button>\n <button mat-icon-button matSuffix\n type=\"button\"\n (click)=\"this.toggleFullScreenMode()\"\n class=\"rtsee-window-controls-button rtsee-ripple-button\"\n >\n <span class=\"material-icons-outlined\">open_in_full</span>\n </button>\n </div>\n <div class=\"rtsee-settings-container\" *ngIf=\"settingsViewEnabled\">\n <button mat-icon-button matSuffix\n type=\"button\"\n (click)=\"this.toggleSettings()\"\n class=\"rtsee-close-settings-button\"\n >\n <span class=\"material-icons-outlined\">close</span>\n </button>\n <ngx-rtsee-settings [rtSee]=\"rtSee\" [fullScreenMode]=\"fullScreenModeEnabled\"></ngx-rtsee-settings>\n </div>\n <div class=\"rtsee-screen-share\" *ngIf=\"rtSee.screenSharePeer\" >\n <video [autoplay]=\"true\"\n [muted]=\"true\"\n [srcObject]=\"rtSee.screenSharePeer.remoteVideoStream\"\n playsinline=\"true\"\n class=\"rtsee-screen-share-video\"\n ></video>\n </div>\n <div class=\"rtsee-peers\" [ngClass]=\"{\n 'rtsee-peers-alone': !rtSee.rtcPeerConnections.connections?.length,\n 'rtsee-peers-one': rtSee.rtcPeerConnections.connections?.length === 1,\n 'rtsee-peers-three-grid': rtSee.rtcPeerConnections.connections?.length\n && rtSee.rtcPeerConnections.connections.length > 1\n && rtSee.rtcPeerConnections.connections.length < 4,\n 'rtsee-peers-six-grid': rtSee.rtcPeerConnections.connections?.length\n && rtSee.rtcPeerConnections.connections.length > 3\n && rtSee.rtcPeerConnections.connections.length < 7,\n 'rtsee-peers-nine-grid': rtSee.rtcPeerConnections.connections?.length\n && rtSee.rtcPeerConnections.connections.length >= 7\n }\">\n <div class=\"rtsee-peer-wrapper\"\n *ngFor=\"let peer of rtSee.rtcPeerConnections.connections\"\n >\n <ngx-rtsee-peer [peer]=\"peer\"></ngx-rtsee-peer>\n </div>\n </div>\n <div class=\"rtsee-peers-list\"></div>\n <div class=\"rtsee-controls-wrapper\">\n <ngx-rtsee-controls [rtsee]=\"rtSee\" [fullScreenMode]=\"fullScreenModeEnabled\"></ngx-rtsee-controls>\n </div>\n</div>\n\n", styles: [".rtsee-shell{position:fixed;z-index:10;right:16px;bottom:16px;background-color:#333;width:100%;max-width:320px;height:240px;overflow:hidden;border-radius:8px}.rtsee-shell:hover .rtsee-controls-wrapper{bottom:8px}.rtsee-shell:hover .rtsee-window-controls{top:8px}.rtsee-shell .rtsee-local-peer{position:absolute;top:8px;left:8px;width:80px;height:60px;text-align:center}.rtsee-shell .rtsee-local-peer .rtsee-local-video{height:100%;max-width:100%;border-radius:8px}.rtsee-shell .rtsee-screen-share{height:100%}.rtsee-shell .rtsee-screen-share .rtsee-screen-share-video{width:100%;height:calc(100% - 50px)}.rtsee-shell .rtsee-peers{height:100%}.rtsee-shell .rtsee-peers .rtsee-peer-wrapper{padding:8px;box-sizing:border-box;height:100%}.rtsee-shell .rtsee-peers .rtsee-peer-wrapper .rtsee-peer{position:relative}.rtsee-shell .rtsee-peers .rtsee-peer-wrapper .rtsee-peer ::ng-deep .rtsee-peer-video{border-radius:8px}.rtsee-shell .rtsee-controls-wrapper{height:60px;width:100%;position:absolute;left:0;bottom:-60px;transition:bottom .1s;text-align:center}.rtsee-shell .rtsee-window-controls{position:absolute;top:-60px;right:8px;transition:top .1s;z-index:4}.rtsee-shell .rtsee-window-controls .rtsee-window-controls-button{margin-left:8px;background-color:#000000b3;color:#fff}.rtsee-shell .rtsee-settings-container{position:absolute;inset:0;overflow:auto;z-index:4}.rtsee-shell.rtsee-shell-no-companions .rtsee-local-peer{box-sizing:border-box;padding:8px;height:100%;width:100%;top:0;bottom:0;left:0}.rtsee-shell .rtsee-close-settings-button{position:absolute;right:25px;top:5px;width:30px;height:30px;line-height:30px}.rtsee-shell.rtsee-shell-expanded{position:absolute;border-radius:0;max-width:unset;height:unset;width:unset;inset:0}.rtsee-shell.rtsee-shell-expanded:hover .rtsee-controls-wrapper{bottom:16px}.rtsee-shell.rtsee-shell-expanded:hover .rtsee-window-controls{top:16px;right:16px}.rtsee-shell.rtsee-shell-expanded .rtsee-local-peer{top:unset;left:unset;width:211.2px;height:158.4px;bottom:16px;right:16px;padding:0;z-index:5}.rtsee-shell.rtsee-shell-expanded .rtsee-peers{width:100%;height:100%;display:table;table-layout:fixed}.rtsee-shell.rtsee-shell-expanded .rtsee-peers .rtsee-peer-wrapper{display:table-cell;vertical-align:middle}.rtsee-shell.rtsee-shell-expanded .rtsee-peers .rtsee-peer-wrapper ::ng-deep .rtsee-peer-video{border-radius:0}.rtsee-shell.rtsee-shell-expanded .rtsee-peers.rtsee-peers-one .rtsee-peer-wrapper{width:100%;height:100%}.rtsee-shell.rtsee-shell-expanded .rtsee-peers.rtsee-peers-one .rtsee-peer-wrapper ::ng-deep .rtsee-peer{height:70%;position:relative}.rtsee-shell.rtsee-shell-expanded .rtsee-peers.rtsee-peers-three-grid .rtsee-peer-wrapper{width:50%;height:100%}.rtsee-shell.rtsee-shell-expanded .rtsee-peers.rtsee-peers-three-grid .rtsee-peer-wrapper ::ng-deep .rtsee-peer{height:70%;position:relative}.rtsee-shell.rtsee-shell-expanded .rtsee-peers.rtsee-peers-six-grid .rtsee-peer-wrapper{width:33.3%;height:50%;float:left}.rtsee-shell.rtsee-shell-expanded .rtsee-peers.rtsee-shell-no-companions .rtsee-local-peer{height:100%;max-width:100%}.rtsee-shell.rtsee-shell-expanded .rtsee-controls-wrapper{height:84px;bottom:-84px}::ng-deep .rtsee-ripple-button{background-position:center;transition:background .2s;outline:none}::ng-deep .rtsee-ripple-button:hover{background:rgba(245,245,245,.1) radial-gradient(circle,transparent 1%,rgba(245,245,245,.1) 1%) center/15000%}::ng-deep .rtsee-ripple-button:active{background-size:100%;transition:background 0s}::ng-deep .rtsee-select{padding:8px;border-radius:4px;width:100%;outline:none}::ng-deep .material-icons-outlined{font-size:18px}::ng-deep .rtsee-shell.rtsee-shell-expanded .material-icons-outlined{font-size:24px}::ng-deep .rtsee-shell.rtsee-shell-expanded .rtsee-ripple-button{height:60px;width:60px;line-height:60px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: RTSeeControlsComponent, selector: "ngx-rtsee-controls", inputs: ["rtsee", "fullScreenMode"] }, { kind: "component", type: RtseePeerComponent, selector: "ngx-rtsee-peer", inputs: ["peer"] }, { kind: "component", type: RtseeSettingsComponent, selector: "ngx-rtsee-settings", inputs: ["rtSee", "fullScreenMode"] }] });
202
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: RTSeeConferenceComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
203
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.3", type: RTSeeConferenceComponent, selector: "rtsee-conference", inputs: { rtSee: "rtSee" }, ngImport: i0, template: "<div class=\"rtsee-shell\" [ngClass]=\"{\n'rtsee-shell-expanded': rtSee.uiControls.isExpanded || fullScreenModeEnabled,\n'rtsee-shell-no-companions': !rtSee.rtcPeerConnections.connections?.length\n}\">\n <div class=\"rtsee-local-peer\" *ngIf=\"rtSee.localStream && rtSee.camera\">\n <video class=\"rtsee-local-video\"\n [autoplay]=\"true\"\n [muted]=\"true\"\n [srcObject]=\"rtSee.localStream\"\n playsinline=\"true\"\n ></video>\n </div>\n <div class=\"rtsee-window-controls\">\n <button mat-icon-button matSuffix\n type=\"button\"\n (click)=\"this.toggleSettings()\"\n class=\"rtsee-window-controls-button rtsee-ripple-button\"\n >\n <span class=\"material-icons-outlined\">settings</span>\n </button>\n <button mat-icon-button matSuffix\n type=\"button\"\n (click)=\"this.toggleFullScreenMode()\"\n class=\"rtsee-window-controls-button rtsee-ripple-button\"\n >\n <span class=\"material-icons-outlined\">open_in_full</span>\n </button>\n </div>\n <div class=\"rtsee-settings-container\" *ngIf=\"settingsViewEnabled\">\n <button mat-icon-button matSuffix\n type=\"button\"\n (click)=\"this.toggleSettings()\"\n class=\"rtsee-close-settings-button\"\n >\n <span class=\"material-icons-outlined\">close</span>\n </button>\n <ngx-rtsee-settings [rtSee]=\"rtSee\" [fullScreenMode]=\"fullScreenModeEnabled\"></ngx-rtsee-settings>\n </div>\n <div class=\"rtsee-screen-share\" *ngIf=\"rtSee.screenSharePeer\" >\n <video [autoplay]=\"true\"\n [muted]=\"true\"\n [srcObject]=\"rtSee.screenSharePeer.remoteVideoStream\"\n playsinline=\"true\"\n class=\"rtsee-screen-share-video\"\n ></video>\n </div>\n <div class=\"rtsee-peers\" [ngClass]=\"{\n 'rtsee-peers-alone': !rtSee.rtcPeerConnections.connections?.length,\n 'rtsee-peers-one': rtSee.rtcPeerConnections.connections?.length === 1,\n 'rtsee-peers-three-grid': rtSee.rtcPeerConnections.connections?.length\n && rtSee.rtcPeerConnections.connections.length > 1\n && rtSee.rtcPeerConnections.connections.length < 4,\n 'rtsee-peers-six-grid': rtSee.rtcPeerConnections.connections?.length\n && rtSee.rtcPeerConnections.connections.length > 3\n && rtSee.rtcPeerConnections.connections.length < 7,\n 'rtsee-peers-nine-grid': rtSee.rtcPeerConnections.connections?.length\n && rtSee.rtcPeerConnections.connections.length >= 7\n }\">\n <div class=\"rtsee-peer-wrapper\"\n *ngFor=\"let peer of rtSee.rtcPeerConnections.connections\"\n >\n <ngx-rtsee-peer [peer]=\"peer\"></ngx-rtsee-peer>\n </div>\n </div>\n <div class=\"rtsee-peers-list\"></div>\n <div class=\"rtsee-controls-wrapper\">\n <ngx-rtsee-controls [rtsee]=\"rtSee\" [fullScreenMode]=\"fullScreenModeEnabled\"></ngx-rtsee-controls>\n </div>\n</div>\n\n", styles: [".rtsee-shell{background-color:#333;width:100%;max-width:320px;height:240px;overflow:hidden;border-radius:8px}.rtsee-shell:hover .rtsee-controls-wrapper{bottom:8px}.rtsee-shell:hover .rtsee-window-controls{top:8px}.rtsee-shell .rtsee-local-peer{position:absolute;top:8px;left:8px;width:80px;height:60px;text-align:center}.rtsee-shell .rtsee-local-peer .rtsee-local-video{height:100%;max-width:100%;border-radius:8px}.rtsee-shell .rtsee-screen-share{height:100%}.rtsee-shell .rtsee-screen-share .rtsee-screen-share-video{width:100%;height:calc(100% - 50px)}.rtsee-shell .rtsee-peers{height:100%}.rtsee-shell .rtsee-peers .rtsee-peer-wrapper{padding:8px;box-sizing:border-box;height:100%}.rtsee-shell .rtsee-peers .rtsee-peer-wrapper .rtsee-peer{position:relative}.rtsee-shell .rtsee-peers .rtsee-peer-wrapper .rtsee-peer ::ng-deep .rtsee-peer-video{border-radius:8px}.rtsee-shell .rtsee-controls-wrapper{height:60px;width:100%;position:absolute;left:0;bottom:-60px;transition:bottom .1s;text-align:center}.rtsee-shell .rtsee-window-controls{position:absolute;top:-60px;right:8px;transition:top .1s;z-index:4}.rtsee-shell .rtsee-window-controls .rtsee-window-controls-button{margin-left:8px;background-color:#000000b3;color:#fff}.rtsee-shell .rtsee-settings-container{position:absolute;inset:0;overflow:auto;z-index:4}.rtsee-shell.rtsee-shell-no-companions .rtsee-local-peer{box-sizing:border-box;padding:8px;height:100%;width:100%;top:0;bottom:0;left:0}.rtsee-shell .rtsee-close-settings-button{position:absolute;right:25px;top:5px;width:30px;height:30px;line-height:30px}.rtsee-shell.rtsee-shell-expanded{position:absolute;border-radius:0;max-width:unset;height:unset;width:unset;inset:0}.rtsee-shell.rtsee-shell-expanded:hover .rtsee-controls-wrapper{bottom:16px}.rtsee-shell.rtsee-shell-expanded:hover .rtsee-window-controls{top:16px;right:16px}.rtsee-shell.rtsee-shell-expanded .rtsee-local-peer{top:unset;left:unset;width:211.2px;height:158.4px;bottom:16px;right:16px;padding:0;z-index:5}.rtsee-shell.rtsee-shell-expanded .rtsee-peers{width:100%;height:100%;display:table;table-layout:fixed}.rtsee-shell.rtsee-shell-expanded .rtsee-peers .rtsee-peer-wrapper{display:table-cell;vertical-align:middle}.rtsee-shell.rtsee-shell-expanded .rtsee-peers .rtsee-peer-wrapper ::ng-deep .rtsee-peer-video{border-radius:0}.rtsee-shell.rtsee-shell-expanded .rtsee-peers.rtsee-peers-one .rtsee-peer-wrapper{width:100%;height:100%}.rtsee-shell.rtsee-shell-expanded .rtsee-peers.rtsee-peers-one .rtsee-peer-wrapper ::ng-deep .rtsee-peer{height:70%;position:relative}.rtsee-shell.rtsee-shell-expanded .rtsee-peers.rtsee-peers-three-grid .rtsee-peer-wrapper{width:50%;height:100%}.rtsee-shell.rtsee-shell-expanded .rtsee-peers.rtsee-peers-three-grid .rtsee-peer-wrapper ::ng-deep .rtsee-peer{height:70%;position:relative}.rtsee-shell.rtsee-shell-expanded .rtsee-peers.rtsee-peers-six-grid .rtsee-peer-wrapper{width:33.3%;height:50%;float:left}.rtsee-shell.rtsee-shell-expanded .rtsee-peers.rtsee-shell-no-companions .rtsee-local-peer{height:100%;max-width:100%}.rtsee-shell.rtsee-shell-expanded .rtsee-controls-wrapper{height:84px;bottom:-84px}::ng-deep .rtsee-ripple-button{background-position:center;transition:background .2s;outline:none}::ng-deep .rtsee-ripple-button:hover{background:rgba(245,245,245,.1) radial-gradient(circle,transparent 1%,rgba(245,245,245,.1) 1%) center/15000%}::ng-deep .rtsee-ripple-button:active{background-size:100%;transition:background 0s}::ng-deep .rtsee-select{padding:8px;border-radius:4px;width:100%;outline:none}::ng-deep .material-icons-outlined{font-size:18px}::ng-deep .rtsee-shell.rtsee-shell-expanded .material-icons-outlined{font-size:24px}::ng-deep .rtsee-shell.rtsee-shell-expanded .rtsee-ripple-button{height:60px;width:60px;line-height:60px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: RTSeeControlsComponent, selector: "ngx-rtsee-controls", inputs: ["rtsee", "fullScreenMode"] }, { kind: "component", type: RtseePeerComponent, selector: "ngx-rtsee-peer", inputs: ["peer"] }, { kind: "component", type: RtseeSettingsComponent, selector: "ngx-rtsee-settings", inputs: ["rtSee", "fullScreenMode"] }] });
204
204
  }
205
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: RTSeeComponent, decorators: [{
205
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: RTSeeConferenceComponent, decorators: [{
206
206
  type: Component,
207
- args: [{ selector: 'ngx-rtsee', template: "<div class=\"rtsee-shell\" [ngClass]=\"{\n'rtsee-shell-expanded': rtSee.uiControls.isExpanded || fullScreenModeEnabled,\n'rtsee-shell-no-companions': !rtSee.rtcPeerConnections.connections?.length\n}\">\n <div class=\"rtsee-local-peer\" *ngIf=\"rtSee.localStream && rtSee.camera\">\n <video class=\"rtsee-local-video\"\n [autoplay]=\"true\"\n [muted]=\"true\"\n [srcObject]=\"rtSee.localStream\"\n playsinline=\"true\"\n ></video>\n </div>\n <div class=\"rtsee-window-controls\">\n <button mat-icon-button matSuffix\n type=\"button\"\n (click)=\"this.toggleSettings()\"\n class=\"rtsee-window-controls-button rtsee-ripple-button\"\n >\n <span class=\"material-icons-outlined\">settings</span>\n </button>\n <button mat-icon-button matSuffix\n type=\"button\"\n (click)=\"this.toggleFullScreenMode()\"\n class=\"rtsee-window-controls-button rtsee-ripple-button\"\n >\n <span class=\"material-icons-outlined\">open_in_full</span>\n </button>\n </div>\n <div class=\"rtsee-settings-container\" *ngIf=\"settingsViewEnabled\">\n <button mat-icon-button matSuffix\n type=\"button\"\n (click)=\"this.toggleSettings()\"\n class=\"rtsee-close-settings-button\"\n >\n <span class=\"material-icons-outlined\">close</span>\n </button>\n <ngx-rtsee-settings [rtSee]=\"rtSee\" [fullScreenMode]=\"fullScreenModeEnabled\"></ngx-rtsee-settings>\n </div>\n <div class=\"rtsee-screen-share\" *ngIf=\"rtSee.screenSharePeer\" >\n <video [autoplay]=\"true\"\n [muted]=\"true\"\n [srcObject]=\"rtSee.screenSharePeer.remoteVideoStream\"\n playsinline=\"true\"\n class=\"rtsee-screen-share-video\"\n ></video>\n </div>\n <div class=\"rtsee-peers\" [ngClass]=\"{\n 'rtsee-peers-alone': !rtSee.rtcPeerConnections.connections?.length,\n 'rtsee-peers-one': rtSee.rtcPeerConnections.connections?.length === 1,\n 'rtsee-peers-three-grid': rtSee.rtcPeerConnections.connections?.length\n && rtSee.rtcPeerConnections.connections.length > 1\n && rtSee.rtcPeerConnections.connections.length < 4,\n 'rtsee-peers-six-grid': rtSee.rtcPeerConnections.connections?.length\n && rtSee.rtcPeerConnections.connections.length > 3\n && rtSee.rtcPeerConnections.connections.length < 7,\n 'rtsee-peers-nine-grid': rtSee.rtcPeerConnections.connections?.length\n && rtSee.rtcPeerConnections.connections.length >= 7\n }\">\n <div class=\"rtsee-peer-wrapper\"\n *ngFor=\"let peer of rtSee.rtcPeerConnections.connections\"\n >\n <ngx-rtsee-peer [peer]=\"peer\"></ngx-rtsee-peer>\n </div>\n </div>\n <div class=\"rtsee-peers-list\"></div>\n <div class=\"rtsee-controls-wrapper\">\n <ngx-rtsee-controls [rtsee]=\"rtSee\" [fullScreenMode]=\"fullScreenModeEnabled\"></ngx-rtsee-controls>\n </div>\n</div>\n\n", styles: [".rtsee-shell{position:fixed;z-index:10;right:16px;bottom:16px;background-color:#333;width:100%;max-width:320px;height:240px;overflow:hidden;border-radius:8px}.rtsee-shell:hover .rtsee-controls-wrapper{bottom:8px}.rtsee-shell:hover .rtsee-window-controls{top:8px}.rtsee-shell .rtsee-local-peer{position:absolute;top:8px;left:8px;width:80px;height:60px;text-align:center}.rtsee-shell .rtsee-local-peer .rtsee-local-video{height:100%;max-width:100%;border-radius:8px}.rtsee-shell .rtsee-screen-share{height:100%}.rtsee-shell .rtsee-screen-share .rtsee-screen-share-video{width:100%;height:calc(100% - 50px)}.rtsee-shell .rtsee-peers{height:100%}.rtsee-shell .rtsee-peers .rtsee-peer-wrapper{padding:8px;box-sizing:border-box;height:100%}.rtsee-shell .rtsee-peers .rtsee-peer-wrapper .rtsee-peer{position:relative}.rtsee-shell .rtsee-peers .rtsee-peer-wrapper .rtsee-peer ::ng-deep .rtsee-peer-video{border-radius:8px}.rtsee-shell .rtsee-controls-wrapper{height:60px;width:100%;position:absolute;left:0;bottom:-60px;transition:bottom .1s;text-align:center}.rtsee-shell .rtsee-window-controls{position:absolute;top:-60px;right:8px;transition:top .1s;z-index:4}.rtsee-shell .rtsee-window-controls .rtsee-window-controls-button{margin-left:8px;background-color:#000000b3;color:#fff}.rtsee-shell .rtsee-settings-container{position:absolute;inset:0;overflow:auto;z-index:4}.rtsee-shell.rtsee-shell-no-companions .rtsee-local-peer{box-sizing:border-box;padding:8px;height:100%;width:100%;top:0;bottom:0;left:0}.rtsee-shell .rtsee-close-settings-button{position:absolute;right:25px;top:5px;width:30px;height:30px;line-height:30px}.rtsee-shell.rtsee-shell-expanded{position:absolute;border-radius:0;max-width:unset;height:unset;width:unset;inset:0}.rtsee-shell.rtsee-shell-expanded:hover .rtsee-controls-wrapper{bottom:16px}.rtsee-shell.rtsee-shell-expanded:hover .rtsee-window-controls{top:16px;right:16px}.rtsee-shell.rtsee-shell-expanded .rtsee-local-peer{top:unset;left:unset;width:211.2px;height:158.4px;bottom:16px;right:16px;padding:0;z-index:5}.rtsee-shell.rtsee-shell-expanded .rtsee-peers{width:100%;height:100%;display:table;table-layout:fixed}.rtsee-shell.rtsee-shell-expanded .rtsee-peers .rtsee-peer-wrapper{display:table-cell;vertical-align:middle}.rtsee-shell.rtsee-shell-expanded .rtsee-peers .rtsee-peer-wrapper ::ng-deep .rtsee-peer-video{border-radius:0}.rtsee-shell.rtsee-shell-expanded .rtsee-peers.rtsee-peers-one .rtsee-peer-wrapper{width:100%;height:100%}.rtsee-shell.rtsee-shell-expanded .rtsee-peers.rtsee-peers-one .rtsee-peer-wrapper ::ng-deep .rtsee-peer{height:70%;position:relative}.rtsee-shell.rtsee-shell-expanded .rtsee-peers.rtsee-peers-three-grid .rtsee-peer-wrapper{width:50%;height:100%}.rtsee-shell.rtsee-shell-expanded .rtsee-peers.rtsee-peers-three-grid .rtsee-peer-wrapper ::ng-deep .rtsee-peer{height:70%;position:relative}.rtsee-shell.rtsee-shell-expanded .rtsee-peers.rtsee-peers-six-grid .rtsee-peer-wrapper{width:33.3%;height:50%;float:left}.rtsee-shell.rtsee-shell-expanded .rtsee-peers.rtsee-shell-no-companions .rtsee-local-peer{height:100%;max-width:100%}.rtsee-shell.rtsee-shell-expanded .rtsee-controls-wrapper{height:84px;bottom:-84px}::ng-deep .rtsee-ripple-button{background-position:center;transition:background .2s;outline:none}::ng-deep .rtsee-ripple-button:hover{background:rgba(245,245,245,.1) radial-gradient(circle,transparent 1%,rgba(245,245,245,.1) 1%) center/15000%}::ng-deep .rtsee-ripple-button:active{background-size:100%;transition:background 0s}::ng-deep .rtsee-select{padding:8px;border-radius:4px;width:100%;outline:none}::ng-deep .material-icons-outlined{font-size:18px}::ng-deep .rtsee-shell.rtsee-shell-expanded .material-icons-outlined{font-size:24px}::ng-deep .rtsee-shell.rtsee-shell-expanded .rtsee-ripple-button{height:60px;width:60px;line-height:60px}\n"] }]
207
+ args: [{ selector: 'rtsee-conference', template: "<div class=\"rtsee-shell\" [ngClass]=\"{\n'rtsee-shell-expanded': rtSee.uiControls.isExpanded || fullScreenModeEnabled,\n'rtsee-shell-no-companions': !rtSee.rtcPeerConnections.connections?.length\n}\">\n <div class=\"rtsee-local-peer\" *ngIf=\"rtSee.localStream && rtSee.camera\">\n <video class=\"rtsee-local-video\"\n [autoplay]=\"true\"\n [muted]=\"true\"\n [srcObject]=\"rtSee.localStream\"\n playsinline=\"true\"\n ></video>\n </div>\n <div class=\"rtsee-window-controls\">\n <button mat-icon-button matSuffix\n type=\"button\"\n (click)=\"this.toggleSettings()\"\n class=\"rtsee-window-controls-button rtsee-ripple-button\"\n >\n <span class=\"material-icons-outlined\">settings</span>\n </button>\n <button mat-icon-button matSuffix\n type=\"button\"\n (click)=\"this.toggleFullScreenMode()\"\n class=\"rtsee-window-controls-button rtsee-ripple-button\"\n >\n <span class=\"material-icons-outlined\">open_in_full</span>\n </button>\n </div>\n <div class=\"rtsee-settings-container\" *ngIf=\"settingsViewEnabled\">\n <button mat-icon-button matSuffix\n type=\"button\"\n (click)=\"this.toggleSettings()\"\n class=\"rtsee-close-settings-button\"\n >\n <span class=\"material-icons-outlined\">close</span>\n </button>\n <ngx-rtsee-settings [rtSee]=\"rtSee\" [fullScreenMode]=\"fullScreenModeEnabled\"></ngx-rtsee-settings>\n </div>\n <div class=\"rtsee-screen-share\" *ngIf=\"rtSee.screenSharePeer\" >\n <video [autoplay]=\"true\"\n [muted]=\"true\"\n [srcObject]=\"rtSee.screenSharePeer.remoteVideoStream\"\n playsinline=\"true\"\n class=\"rtsee-screen-share-video\"\n ></video>\n </div>\n <div class=\"rtsee-peers\" [ngClass]=\"{\n 'rtsee-peers-alone': !rtSee.rtcPeerConnections.connections?.length,\n 'rtsee-peers-one': rtSee.rtcPeerConnections.connections?.length === 1,\n 'rtsee-peers-three-grid': rtSee.rtcPeerConnections.connections?.length\n && rtSee.rtcPeerConnections.connections.length > 1\n && rtSee.rtcPeerConnections.connections.length < 4,\n 'rtsee-peers-six-grid': rtSee.rtcPeerConnections.connections?.length\n && rtSee.rtcPeerConnections.connections.length > 3\n && rtSee.rtcPeerConnections.connections.length < 7,\n 'rtsee-peers-nine-grid': rtSee.rtcPeerConnections.connections?.length\n && rtSee.rtcPeerConnections.connections.length >= 7\n }\">\n <div class=\"rtsee-peer-wrapper\"\n *ngFor=\"let peer of rtSee.rtcPeerConnections.connections\"\n >\n <ngx-rtsee-peer [peer]=\"peer\"></ngx-rtsee-peer>\n </div>\n </div>\n <div class=\"rtsee-peers-list\"></div>\n <div class=\"rtsee-controls-wrapper\">\n <ngx-rtsee-controls [rtsee]=\"rtSee\" [fullScreenMode]=\"fullScreenModeEnabled\"></ngx-rtsee-controls>\n </div>\n</div>\n\n", styles: [".rtsee-shell{background-color:#333;width:100%;max-width:320px;height:240px;overflow:hidden;border-radius:8px}.rtsee-shell:hover .rtsee-controls-wrapper{bottom:8px}.rtsee-shell:hover .rtsee-window-controls{top:8px}.rtsee-shell .rtsee-local-peer{position:absolute;top:8px;left:8px;width:80px;height:60px;text-align:center}.rtsee-shell .rtsee-local-peer .rtsee-local-video{height:100%;max-width:100%;border-radius:8px}.rtsee-shell .rtsee-screen-share{height:100%}.rtsee-shell .rtsee-screen-share .rtsee-screen-share-video{width:100%;height:calc(100% - 50px)}.rtsee-shell .rtsee-peers{height:100%}.rtsee-shell .rtsee-peers .rtsee-peer-wrapper{padding:8px;box-sizing:border-box;height:100%}.rtsee-shell .rtsee-peers .rtsee-peer-wrapper .rtsee-peer{position:relative}.rtsee-shell .rtsee-peers .rtsee-peer-wrapper .rtsee-peer ::ng-deep .rtsee-peer-video{border-radius:8px}.rtsee-shell .rtsee-controls-wrapper{height:60px;width:100%;position:absolute;left:0;bottom:-60px;transition:bottom .1s;text-align:center}.rtsee-shell .rtsee-window-controls{position:absolute;top:-60px;right:8px;transition:top .1s;z-index:4}.rtsee-shell .rtsee-window-controls .rtsee-window-controls-button{margin-left:8px;background-color:#000000b3;color:#fff}.rtsee-shell .rtsee-settings-container{position:absolute;inset:0;overflow:auto;z-index:4}.rtsee-shell.rtsee-shell-no-companions .rtsee-local-peer{box-sizing:border-box;padding:8px;height:100%;width:100%;top:0;bottom:0;left:0}.rtsee-shell .rtsee-close-settings-button{position:absolute;right:25px;top:5px;width:30px;height:30px;line-height:30px}.rtsee-shell.rtsee-shell-expanded{position:absolute;border-radius:0;max-width:unset;height:unset;width:unset;inset:0}.rtsee-shell.rtsee-shell-expanded:hover .rtsee-controls-wrapper{bottom:16px}.rtsee-shell.rtsee-shell-expanded:hover .rtsee-window-controls{top:16px;right:16px}.rtsee-shell.rtsee-shell-expanded .rtsee-local-peer{top:unset;left:unset;width:211.2px;height:158.4px;bottom:16px;right:16px;padding:0;z-index:5}.rtsee-shell.rtsee-shell-expanded .rtsee-peers{width:100%;height:100%;display:table;table-layout:fixed}.rtsee-shell.rtsee-shell-expanded .rtsee-peers .rtsee-peer-wrapper{display:table-cell;vertical-align:middle}.rtsee-shell.rtsee-shell-expanded .rtsee-peers .rtsee-peer-wrapper ::ng-deep .rtsee-peer-video{border-radius:0}.rtsee-shell.rtsee-shell-expanded .rtsee-peers.rtsee-peers-one .rtsee-peer-wrapper{width:100%;height:100%}.rtsee-shell.rtsee-shell-expanded .rtsee-peers.rtsee-peers-one .rtsee-peer-wrapper ::ng-deep .rtsee-peer{height:70%;position:relative}.rtsee-shell.rtsee-shell-expanded .rtsee-peers.rtsee-peers-three-grid .rtsee-peer-wrapper{width:50%;height:100%}.rtsee-shell.rtsee-shell-expanded .rtsee-peers.rtsee-peers-three-grid .rtsee-peer-wrapper ::ng-deep .rtsee-peer{height:70%;position:relative}.rtsee-shell.rtsee-shell-expanded .rtsee-peers.rtsee-peers-six-grid .rtsee-peer-wrapper{width:33.3%;height:50%;float:left}.rtsee-shell.rtsee-shell-expanded .rtsee-peers.rtsee-shell-no-companions .rtsee-local-peer{height:100%;max-width:100%}.rtsee-shell.rtsee-shell-expanded .rtsee-controls-wrapper{height:84px;bottom:-84px}::ng-deep .rtsee-ripple-button{background-position:center;transition:background .2s;outline:none}::ng-deep .rtsee-ripple-button:hover{background:rgba(245,245,245,.1) radial-gradient(circle,transparent 1%,rgba(245,245,245,.1) 1%) center/15000%}::ng-deep .rtsee-ripple-button:active{background-size:100%;transition:background 0s}::ng-deep .rtsee-select{padding:8px;border-radius:4px;width:100%;outline:none}::ng-deep .material-icons-outlined{font-size:18px}::ng-deep .rtsee-shell.rtsee-shell-expanded .material-icons-outlined{font-size:24px}::ng-deep .rtsee-shell.rtsee-shell-expanded .rtsee-ripple-button{height:60px;width:60px;line-height:60px}\n"] }]
208
208
  }], ctorParameters: function () { return []; }, propDecorators: { rtSee: [{
209
209
  type: Input
210
210
  }] } });
@@ -519,11 +519,11 @@ class MessagesListComponent {
519
519
  return this.timeFormatService.formatDate(message.createdAt);
520
520
  }
521
521
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: MessagesListComponent, deps: [{ token: TimeFormatHelperService }], target: i0.ɵɵFactoryTarget.Component });
522
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.3", type: MessagesListComponent, selector: "rtsee-messages-list", inputs: { chat: "chat", messenger: "messenger" }, viewQueries: [{ propertyName: "scrollContainer", first: true, predicate: ["scrollBlock"], descendants: true }], ngImport: i0, template: "<div class=\"rtsee-messenger-messages-list\"\n #scrollBlock\n infiniteScroll\n [infiniteScrollUpDistance]=\"2\"\n [infiniteScrollDistance]=\"2\"\n [infiniteScrollThrottle]=\"50\"\n [scrollWindow]=\"false\"\n (scrolledUp)=\"onScrolledToTop()\"\n (scroll)=\"onScroll()\"\n>\n <div *ngFor=\"let message of chat.messages; let i = index;\"\n [ngClass]=\"{'rtsee-messenger-message-wrapper-consecutive': message.from === chat.messages[i+1]?.from}\"\n class=\"rtsee-messenger-message-wrapper\"\n >\n <div *ngIf=\"message.hasDateChanged\" class=\"rtsee-messenger-message-date\">\n <span>{{formatDate(message)}}</span>\n </div>\n <rtsee-message [message]=\"message\" [messenger]=\"messenger\" [chat]=\"chat\"></rtsee-message>\n </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "component", type: MessageComponent, selector: "rtsee-message", inputs: ["chat", "message", "member", "messenger"] }] });
522
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.3", type: MessagesListComponent, selector: "rtsee-messages-list", inputs: { chat: "chat", messenger: "messenger" }, viewQueries: [{ propertyName: "scrollContainer", first: true, predicate: ["scrollBlock"], descendants: true }], ngImport: i0, template: "<div class=\"rtsee-messenger-messages-list\"\n #scrollBlock\n infiniteScroll\n [infiniteScrollUpDistance]=\"2\"\n [infiniteScrollDistance]=\"2\"\n [infiniteScrollThrottle]=\"50\"\n [scrollWindow]=\"false\"\n (scrolledUp)=\"onScrolledToTop()\"\n (scroll)=\"onScroll()\"\n>\n <div *ngFor=\"let message of chat.messages; let i = index;\"\n [ngClass]=\"{'rtsee-messenger-message-wrapper-consecutive': message.from === chat.messages[i+1]?.from}\"\n class=\"rtsee-messenger-message-wrapper\"\n >\n <rtsee-message [message]=\"message\" [messenger]=\"messenger\" [chat]=\"chat\"></rtsee-message>\n </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "component", type: MessageComponent, selector: "rtsee-message", inputs: ["chat", "message", "member", "messenger"] }] });
523
523
  }
524
524
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: MessagesListComponent, decorators: [{
525
525
  type: Component,
526
- args: [{ selector: 'rtsee-messages-list', template: "<div class=\"rtsee-messenger-messages-list\"\n #scrollBlock\n infiniteScroll\n [infiniteScrollUpDistance]=\"2\"\n [infiniteScrollDistance]=\"2\"\n [infiniteScrollThrottle]=\"50\"\n [scrollWindow]=\"false\"\n (scrolledUp)=\"onScrolledToTop()\"\n (scroll)=\"onScroll()\"\n>\n <div *ngFor=\"let message of chat.messages; let i = index;\"\n [ngClass]=\"{'rtsee-messenger-message-wrapper-consecutive': message.from === chat.messages[i+1]?.from}\"\n class=\"rtsee-messenger-message-wrapper\"\n >\n <div *ngIf=\"message.hasDateChanged\" class=\"rtsee-messenger-message-date\">\n <span>{{formatDate(message)}}</span>\n </div>\n <rtsee-message [message]=\"message\" [messenger]=\"messenger\" [chat]=\"chat\"></rtsee-message>\n </div>\n</div>\n" }]
526
+ args: [{ selector: 'rtsee-messages-list', template: "<div class=\"rtsee-messenger-messages-list\"\n #scrollBlock\n infiniteScroll\n [infiniteScrollUpDistance]=\"2\"\n [infiniteScrollDistance]=\"2\"\n [infiniteScrollThrottle]=\"50\"\n [scrollWindow]=\"false\"\n (scrolledUp)=\"onScrolledToTop()\"\n (scroll)=\"onScroll()\"\n>\n <div *ngFor=\"let message of chat.messages; let i = index;\"\n [ngClass]=\"{'rtsee-messenger-message-wrapper-consecutive': message.from === chat.messages[i+1]?.from}\"\n class=\"rtsee-messenger-message-wrapper\"\n >\n <rtsee-message [message]=\"message\" [messenger]=\"messenger\" [chat]=\"chat\"></rtsee-message>\n </div>\n</div>\n" }]
527
527
  }], ctorParameters: function () { return [{ type: TimeFormatHelperService }]; }, propDecorators: { chat: [{
528
528
  type: Input
529
529
  }], messenger: [{
@@ -604,11 +604,11 @@ class ChatThumbnailComponent {
604
604
  this.timeFormatService = timeFormatService;
605
605
  }
606
606
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: ChatThumbnailComponent, deps: [{ token: TimeFormatHelperService }], target: i0.ɵɵFactoryTarget.Component });
607
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.3", type: ChatThumbnailComponent, selector: "rtsee-chat-thumbnail", inputs: { chat: "chat", messenger: "messenger" }, ngImport: i0, template: "<div class=\"rtsee-chat-thumbnail\" (click)=\"messenger.openChatById(chat.chatId)\">\n <div class=\"rtsee-chat-thumbnail-image\">\n <img [src]=\"chat.chatImageUrl\" alt=\"chat-img\">\n </div>\n <div class=\"rtsee-chat-thumbnail-left\">\n <div class=\"rtsee-chat-thumbnail-name\">\n <span>{{ chat.chatName }}</span>\n <div class=\"rtsee-chat-thumbnail-status\">\n <rtsee-message-time-and-status [message]=\"chat\"></rtsee-message-time-and-status>\n </div>\n </div>\n <div class=\"rtsee-chat-thumbnail-last-message\"\n [ngClass]=\"{'rtsee-has-unread': chat.unreadMessagesCount}\"\n rtseeShave>\n <span class=\"rtsee-chat-thumbnail-last-message-sender\"\n *ngIf=\"chat.chatType !== RTSeeChatTypes.INDIVIDUAL && chat.senderName\"\n >{{chat.senderName}}</span>\n <span class=\"rtsee-chat-thumbnail-last-message-text\"\n *ngIf=\"chat.text\"\n >{{chat.text}}</span>\n <div class=\"rtsee-messenger-thumbnail-unread\" *ngIf=\"chat.unreadMessagesCount\">\n <span class=\"rtsee-messenger-thumbnail-unread-count\">{{chat.unreadMessagesCount}}</span>\n </div>\n </div>\n </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MessageTimeAndStatusComponent, selector: "rtsee-message-time-and-status", inputs: ["message", "hideStatus"] }, { kind: "directive", type: ShaveDirective, selector: "[rtseeShave]" }] });
607
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.3", type: ChatThumbnailComponent, selector: "rtsee-chat-thumbnail", inputs: { chat: "chat", messenger: "messenger" }, ngImport: i0, template: "<div class=\"rtsee-chat-thumbnail\" (click)=\"messenger.openChatById(chat.chatId)\">\n <div class=\"rtsee-chat-thumbnail-image\">\n <img [src]=\"chat.chatImageUrl\" alt=\"chat-img\">\n </div>\n <div class=\"rtsee-chat-thumbnail-left\">\n <div class=\"rtsee-chat-thumbnail-name\">\n <span>{{ chat.chatName }}</span>\n <div class=\"rtsee-chat-thumbnail-status\">\n <rtsee-message-time-and-status [message]=\"chat\"\n [hideStatus]=\"chat && !!(chat.unreadMessagesCount)\">\n </rtsee-message-time-and-status>\n </div>\n </div>\n <div class=\"rtsee-chat-thumbnail-last-message\"\n [ngClass]=\"{'rtsee-has-unread': chat.unreadMessagesCount}\"\n rtseeShave>\n <span class=\"rtsee-chat-thumbnail-last-message-sender\"\n *ngIf=\"chat.chatType !== RTSeeChatTypes.INDIVIDUAL && chat.senderName\"\n >{{chat.senderName}}</span>\n <span class=\"rtsee-chat-thumbnail-last-message-text\"\n *ngIf=\"chat.text\"\n >{{chat.text}}</span>\n <div class=\"rtsee-messenger-thumbnail-unread\" *ngIf=\"chat.unreadMessagesCount\">\n <span class=\"rtsee-messenger-thumbnail-unread-count\">{{chat.unreadMessagesCount}}</span>\n </div>\n </div>\n </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MessageTimeAndStatusComponent, selector: "rtsee-message-time-and-status", inputs: ["message", "hideStatus"] }, { kind: "directive", type: ShaveDirective, selector: "[rtseeShave]" }] });
608
608
  }
609
609
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: ChatThumbnailComponent, decorators: [{
610
610
  type: Component,
611
- args: [{ selector: 'rtsee-chat-thumbnail', template: "<div class=\"rtsee-chat-thumbnail\" (click)=\"messenger.openChatById(chat.chatId)\">\n <div class=\"rtsee-chat-thumbnail-image\">\n <img [src]=\"chat.chatImageUrl\" alt=\"chat-img\">\n </div>\n <div class=\"rtsee-chat-thumbnail-left\">\n <div class=\"rtsee-chat-thumbnail-name\">\n <span>{{ chat.chatName }}</span>\n <div class=\"rtsee-chat-thumbnail-status\">\n <rtsee-message-time-and-status [message]=\"chat\"></rtsee-message-time-and-status>\n </div>\n </div>\n <div class=\"rtsee-chat-thumbnail-last-message\"\n [ngClass]=\"{'rtsee-has-unread': chat.unreadMessagesCount}\"\n rtseeShave>\n <span class=\"rtsee-chat-thumbnail-last-message-sender\"\n *ngIf=\"chat.chatType !== RTSeeChatTypes.INDIVIDUAL && chat.senderName\"\n >{{chat.senderName}}</span>\n <span class=\"rtsee-chat-thumbnail-last-message-text\"\n *ngIf=\"chat.text\"\n >{{chat.text}}</span>\n <div class=\"rtsee-messenger-thumbnail-unread\" *ngIf=\"chat.unreadMessagesCount\">\n <span class=\"rtsee-messenger-thumbnail-unread-count\">{{chat.unreadMessagesCount}}</span>\n </div>\n </div>\n </div>\n</div>\n" }]
611
+ args: [{ selector: 'rtsee-chat-thumbnail', template: "<div class=\"rtsee-chat-thumbnail\" (click)=\"messenger.openChatById(chat.chatId)\">\n <div class=\"rtsee-chat-thumbnail-image\">\n <img [src]=\"chat.chatImageUrl\" alt=\"chat-img\">\n </div>\n <div class=\"rtsee-chat-thumbnail-left\">\n <div class=\"rtsee-chat-thumbnail-name\">\n <span>{{ chat.chatName }}</span>\n <div class=\"rtsee-chat-thumbnail-status\">\n <rtsee-message-time-and-status [message]=\"chat\"\n [hideStatus]=\"chat && !!(chat.unreadMessagesCount)\">\n </rtsee-message-time-and-status>\n </div>\n </div>\n <div class=\"rtsee-chat-thumbnail-last-message\"\n [ngClass]=\"{'rtsee-has-unread': chat.unreadMessagesCount}\"\n rtseeShave>\n <span class=\"rtsee-chat-thumbnail-last-message-sender\"\n *ngIf=\"chat.chatType !== RTSeeChatTypes.INDIVIDUAL && chat.senderName\"\n >{{chat.senderName}}</span>\n <span class=\"rtsee-chat-thumbnail-last-message-text\"\n *ngIf=\"chat.text\"\n >{{chat.text}}</span>\n <div class=\"rtsee-messenger-thumbnail-unread\" *ngIf=\"chat.unreadMessagesCount\">\n <span class=\"rtsee-messenger-thumbnail-unread-count\">{{chat.unreadMessagesCount}}</span>\n </div>\n </div>\n </div>\n</div>\n" }]
612
612
  }], ctorParameters: function () { return [{ type: TimeFormatHelperService }]; }, propDecorators: { chat: [{
613
613
  type: Input
614
614
  }], messenger: [{
@@ -684,11 +684,11 @@ class MessengerHeaderComponent {
684
684
  this.expandToggled.emit(this.isExpanded);
685
685
  }
686
686
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: MessengerHeaderComponent, deps: [{ token: DefaultImagesService }], target: i0.ɵɵFactoryTarget.Component });
687
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.3", type: MessengerHeaderComponent, selector: "rtsee-messenger-header", inputs: { isExpanded: "isExpanded", messenger: "messenger" }, outputs: { expandToggled: "expandToggled" }, ngImport: i0, template: "<div class=\"rtsee-messenger-header\"\n [ngClass]=\"{\n 'rtsee-messenger-header-chat-opened': messenger.openedChat,\n 'rtsee-messenger-header-expanded': isExpanded\n }\"\n>\n <div class=\"rtsee-messenger-profile-image-container \">\n <div *ngIf=\"!messenger.openedChat\"\n [style.background-image]=\"'url(' + messenger.myPeer?.imageUrl || defaultImagesService.PROFILE + ')'\"\n class=\"rtsee-messenger-profile-image\">\n </div>\n </div>\n\n <button class=\"rtsee-messenger-close-chat\"\n *ngIf=\"messenger.openedChat\"\n (click)=\"messenger.closeChat()\"\n >\n <span class=\"material-icons-outlined\">arrow_back</span>\n <span class=\"unread-count\" *ngIf=\"messenger.unreadMessagesCount\">{{messenger.unreadMessagesCount}}</span>\n </button>\n\n <button class=\"rtsee-messenger-menu-toggle\"\n *ngIf=\"!messenger.openedChat\"\n (click)=\"messenger.openMainMenu(true)\"\n >\n <span class=\"material-icons-outlined rtsee-messenger-menu-toggle-icon\">menu</span>\n </button>\n <div *ngIf=\"messenger.openedChat\"\n [ngClass]=\"{'rtsee-messenger-header-opened-chat-info-expanded': isExpanded}\"\n class=\"rtsee-messenger-header-opened-chat-info\">\n <div class=\"rtsee-messenger-profile-header-placeholder\">\n <p *ngIf=\"messenger.openedChat\"\n class=\"rtsee-messenger-header-chat-title\"\n >{{ messenger.openedChat.name }}</p>\n <div class=\"rtsee-messenger-profile-image-container\" (click)=\"toggleExpand()\">\n <div class=\"rtsee-messenger-profile-image\"\n [style.background-image]=\"'url(' + messenger.openedChat.imageUrl || defaultImagesService.PROFILE + ')'\"\n ></div>\n </div>\n </div>\n <div class=\"rtsee-messenger-profile-data-container\">\n <rtsee-profile *ngIf=\"isExpanded\" [messenger]=\"messenger\"></rtsee-profile>\n </div>\n </div>\n\n <p *ngIf=\"!messenger.openedChat\"\n class=\"rtsee-messenger-header-title\"\n >Messaging</p>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ProfileComponent, selector: "rtsee-profile", inputs: ["messenger"] }] });
687
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.3", type: MessengerHeaderComponent, selector: "rtsee-messenger-header", inputs: { isExpanded: "isExpanded", messenger: "messenger" }, outputs: { expandToggled: "expandToggled" }, ngImport: i0, template: "<div class=\"rtsee-messenger-header\"\n [ngClass]=\"{\n 'rtsee-messenger-header-chat-opened': messenger.openedChat,\n 'rtsee-messenger-header-expanded': isExpanded\n }\"\n>\n <div class=\"rtsee-messenger-profile-image-container \">\n <div *ngIf=\"!messenger.openedChat\"\n [style.background-image]=\"'url(' + messenger.myPeer?.imageUrl || defaultImagesService.PROFILE + ')'\"\n class=\"rtsee-messenger-profile-image\">\n </div>\n </div>\n\n <button class=\"rtsee-messenger-close-chat\"\n *ngIf=\"messenger.openedChat\"\n (click)=\"messenger.closeChat()\"\n >\n <span class=\"material-icons-outlined\">arrow_back</span>\n <span class=\"unread-count\" *ngIf=\"messenger.unreadMessagesCount\">{{messenger.unreadMessagesCount}}</span>\n </button>\n\n <button class=\"rtsee-messenger-menu-toggle\"\n *ngIf=\"!messenger.openedChat && false\"\n (click)=\"messenger.openMainMenu(true)\"\n >\n <span class=\"material-icons-outlined rtsee-messenger-menu-toggle-icon\">menu</span>\n </button>\n <div *ngIf=\"messenger.openedChat\"\n [ngClass]=\"{'rtsee-messenger-header-opened-chat-info-expanded': isExpanded}\"\n class=\"rtsee-messenger-header-opened-chat-info\">\n <div class=\"rtsee-messenger-profile-header-placeholder\">\n <p *ngIf=\"messenger.openedChat\"\n class=\"rtsee-messenger-header-chat-title\"\n >{{ messenger.openedChat.name }}</p>\n <div class=\"rtsee-messenger-profile-image-container\" (click)=\"toggleExpand()\">\n <div class=\"rtsee-messenger-profile-image\"\n [style.background-image]=\"'url(' + messenger.openedChat.imageUrl || defaultImagesService.PROFILE + ')'\"\n ></div>\n </div>\n </div>\n <div class=\"rtsee-messenger-profile-data-container\">\n <rtsee-profile *ngIf=\"isExpanded\" [messenger]=\"messenger\"></rtsee-profile>\n </div>\n </div>\n\n <p *ngIf=\"!messenger.openedChat\"\n class=\"rtsee-messenger-header-title\"\n >Messaging</p>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ProfileComponent, selector: "rtsee-profile", inputs: ["messenger"] }] });
688
688
  }
689
689
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: MessengerHeaderComponent, decorators: [{
690
690
  type: Component,
691
- args: [{ selector: 'rtsee-messenger-header', template: "<div class=\"rtsee-messenger-header\"\n [ngClass]=\"{\n 'rtsee-messenger-header-chat-opened': messenger.openedChat,\n 'rtsee-messenger-header-expanded': isExpanded\n }\"\n>\n <div class=\"rtsee-messenger-profile-image-container \">\n <div *ngIf=\"!messenger.openedChat\"\n [style.background-image]=\"'url(' + messenger.myPeer?.imageUrl || defaultImagesService.PROFILE + ')'\"\n class=\"rtsee-messenger-profile-image\">\n </div>\n </div>\n\n <button class=\"rtsee-messenger-close-chat\"\n *ngIf=\"messenger.openedChat\"\n (click)=\"messenger.closeChat()\"\n >\n <span class=\"material-icons-outlined\">arrow_back</span>\n <span class=\"unread-count\" *ngIf=\"messenger.unreadMessagesCount\">{{messenger.unreadMessagesCount}}</span>\n </button>\n\n <button class=\"rtsee-messenger-menu-toggle\"\n *ngIf=\"!messenger.openedChat\"\n (click)=\"messenger.openMainMenu(true)\"\n >\n <span class=\"material-icons-outlined rtsee-messenger-menu-toggle-icon\">menu</span>\n </button>\n <div *ngIf=\"messenger.openedChat\"\n [ngClass]=\"{'rtsee-messenger-header-opened-chat-info-expanded': isExpanded}\"\n class=\"rtsee-messenger-header-opened-chat-info\">\n <div class=\"rtsee-messenger-profile-header-placeholder\">\n <p *ngIf=\"messenger.openedChat\"\n class=\"rtsee-messenger-header-chat-title\"\n >{{ messenger.openedChat.name }}</p>\n <div class=\"rtsee-messenger-profile-image-container\" (click)=\"toggleExpand()\">\n <div class=\"rtsee-messenger-profile-image\"\n [style.background-image]=\"'url(' + messenger.openedChat.imageUrl || defaultImagesService.PROFILE + ')'\"\n ></div>\n </div>\n </div>\n <div class=\"rtsee-messenger-profile-data-container\">\n <rtsee-profile *ngIf=\"isExpanded\" [messenger]=\"messenger\"></rtsee-profile>\n </div>\n </div>\n\n <p *ngIf=\"!messenger.openedChat\"\n class=\"rtsee-messenger-header-title\"\n >Messaging</p>\n</div>\n" }]
691
+ args: [{ selector: 'rtsee-messenger-header', template: "<div class=\"rtsee-messenger-header\"\n [ngClass]=\"{\n 'rtsee-messenger-header-chat-opened': messenger.openedChat,\n 'rtsee-messenger-header-expanded': isExpanded\n }\"\n>\n <div class=\"rtsee-messenger-profile-image-container \">\n <div *ngIf=\"!messenger.openedChat\"\n [style.background-image]=\"'url(' + messenger.myPeer?.imageUrl || defaultImagesService.PROFILE + ')'\"\n class=\"rtsee-messenger-profile-image\">\n </div>\n </div>\n\n <button class=\"rtsee-messenger-close-chat\"\n *ngIf=\"messenger.openedChat\"\n (click)=\"messenger.closeChat()\"\n >\n <span class=\"material-icons-outlined\">arrow_back</span>\n <span class=\"unread-count\" *ngIf=\"messenger.unreadMessagesCount\">{{messenger.unreadMessagesCount}}</span>\n </button>\n\n <button class=\"rtsee-messenger-menu-toggle\"\n *ngIf=\"!messenger.openedChat && false\"\n (click)=\"messenger.openMainMenu(true)\"\n >\n <span class=\"material-icons-outlined rtsee-messenger-menu-toggle-icon\">menu</span>\n </button>\n <div *ngIf=\"messenger.openedChat\"\n [ngClass]=\"{'rtsee-messenger-header-opened-chat-info-expanded': isExpanded}\"\n class=\"rtsee-messenger-header-opened-chat-info\">\n <div class=\"rtsee-messenger-profile-header-placeholder\">\n <p *ngIf=\"messenger.openedChat\"\n class=\"rtsee-messenger-header-chat-title\"\n >{{ messenger.openedChat.name }}</p>\n <div class=\"rtsee-messenger-profile-image-container\" (click)=\"toggleExpand()\">\n <div class=\"rtsee-messenger-profile-image\"\n [style.background-image]=\"'url(' + messenger.openedChat.imageUrl || defaultImagesService.PROFILE + ')'\"\n ></div>\n </div>\n </div>\n <div class=\"rtsee-messenger-profile-data-container\">\n <rtsee-profile *ngIf=\"isExpanded\" [messenger]=\"messenger\"></rtsee-profile>\n </div>\n </div>\n\n <p *ngIf=\"!messenger.openedChat\"\n class=\"rtsee-messenger-header-title\"\n >Messaging</p>\n</div>\n" }]
692
692
  }], ctorParameters: function () { return [{ type: DefaultImagesService }]; }, propDecorators: { expandToggled: [{
693
693
  type: Output
694
694
  }], isExpanded: [{
@@ -960,6 +960,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.3", ngImpor
960
960
  type: Input
961
961
  }] } });
962
962
 
963
+ class RTSeeContainerComponent {
964
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: RTSeeContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
965
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.3", type: RTSeeContainerComponent, selector: "rtsee-container", ngImport: i0, template: "<div class=\"rtsee-container\">\n <ng-content></ng-content>\n</div>\n" });
966
+ }
967
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: RTSeeContainerComponent, decorators: [{
968
+ type: Component,
969
+ args: [{ selector: 'rtsee-container', template: "<div class=\"rtsee-container\">\n <ng-content></ng-content>\n</div>\n" }]
970
+ }] });
971
+
963
972
  class RtseePeersListComponent {
964
973
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: RtseePeersListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
965
974
  static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.3", type: RtseePeersListComponent, selector: "ngx-rtsee-peers-list", ngImport: i0, template: "<p>rtsee-peers-list works!</p>\n", styles: [""] });
@@ -978,18 +987,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.3", ngImpor
978
987
  args: [{ selector: 'ngx-rtsee-events-dashboard-client', template: "<p>rtsee-events-dashboard-client works!</p>\n" }]
979
988
  }] });
980
989
 
981
- class RtseeContainerComponent {
982
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: RtseeContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
983
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.3", type: RtseeContainerComponent, selector: "rtsee-rtsee-container", ngImport: i0, template: "<p>rtsee-container works!</p>\n" });
984
- }
985
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: RtseeContainerComponent, decorators: [{
986
- type: Component,
987
- args: [{ selector: 'rtsee-rtsee-container', template: "<p>rtsee-container works!</p>\n" }]
988
- }] });
989
-
990
990
  class RTSeeModule {
991
991
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: RTSeeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
992
- static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.3", ngImport: i0, type: RTSeeModule, declarations: [RTSeeComponent,
992
+ static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.3", ngImport: i0, type: RTSeeModule, declarations: [RTSeeConferenceComponent,
993
993
  RTSeeControlsComponent,
994
994
  RtseePeerComponent,
995
995
  RtseeSoundbarComponent,
@@ -1018,7 +1018,7 @@ class RTSeeModule {
1018
1018
  ProfileComponent,
1019
1019
  EventThumbnailComponent,
1020
1020
  RtseeEventsDashboardSessionComponent,
1021
- RtseeContainerComponent], imports: [CommonModule,
1021
+ RTSeeContainerComponent], imports: [CommonModule,
1022
1022
  MatIconModule,
1023
1023
  MatButtonModule,
1024
1024
  MatSelectModule,
@@ -1026,7 +1026,10 @@ class RTSeeModule {
1026
1026
  MatFormFieldModule,
1027
1027
  ReactiveFormsModule,
1028
1028
  AutosizeModule,
1029
- InfiniteScrollModule], exports: [RTSeeComponent, MessengerComponent, RtseeEventsDashboardComponent] });
1029
+ InfiniteScrollModule], exports: [RTSeeConferenceComponent,
1030
+ MessengerComponent,
1031
+ RtseeEventsDashboardComponent,
1032
+ RTSeeContainerComponent] });
1030
1033
  static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: RTSeeModule, imports: [CommonModule,
1031
1034
  MatIconModule,
1032
1035
  MatButtonModule,
@@ -1041,7 +1044,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.3", ngImpor
1041
1044
  type: NgModule,
1042
1045
  args: [{
1043
1046
  declarations: [
1044
- RTSeeComponent,
1047
+ RTSeeConferenceComponent,
1045
1048
  RTSeeControlsComponent,
1046
1049
  RtseePeerComponent,
1047
1050
  RtseeSoundbarComponent,
@@ -1070,7 +1073,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.3", ngImpor
1070
1073
  ProfileComponent,
1071
1074
  EventThumbnailComponent,
1072
1075
  RtseeEventsDashboardSessionComponent,
1073
- RtseeContainerComponent,
1076
+ RTSeeContainerComponent,
1074
1077
  ],
1075
1078
  imports: [
1076
1079
  CommonModule,
@@ -1083,7 +1086,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.3", ngImpor
1083
1086
  AutosizeModule,
1084
1087
  InfiniteScrollModule,
1085
1088
  ],
1086
- exports: [RTSeeComponent, MessengerComponent, RtseeEventsDashboardComponent],
1089
+ exports: [
1090
+ RTSeeConferenceComponent,
1091
+ MessengerComponent,
1092
+ RtseeEventsDashboardComponent,
1093
+ RTSeeContainerComponent,
1094
+ ],
1087
1095
  }]
1088
1096
  }] });
1089
1097
 
@@ -1095,5 +1103,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.3", ngImpor
1095
1103
  * Generated bundle index. Do not edit.
1096
1104
  */
1097
1105
 
1098
- export { MessengerComponent, NgxService, RTSeeComponent, RTSeeControlsComponent, RTSeeModule, RtseeEventsDashboardComponent };
1106
+ export { MessengerComponent, NgxService, RTSeeConferenceComponent, RTSeeContainerComponent, RTSeeControlsComponent, RTSeeModule, RtseeEventsDashboardComponent };
1099
1107
  //# sourceMappingURL=rtsee-ngx.mjs.map