@rtsee/ngx 0.0.47 → 0.0.49
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.
- package/dist/ngx/esm2022/lib/components/rtsee/rtsee-conference.component.mjs +2 -2
- package/dist/ngx/esm2022/lib/components/rtsee-events-dashboard/components/rtsee-events-dashboard-client-thumbnail/rtsee-events-dashboard-client-thumbnail.component.mjs +2 -1
- package/dist/ngx/esm2022/lib/components/rtsee-presentation/presentation/presentation.component.mjs +18 -0
- package/dist/ngx/esm2022/lib/components/rtsee-presentation/slide/slide.component.mjs +16 -0
- package/dist/ngx/esm2022/lib/components/rtsee-presentation/story-player/story-player.component.mjs +25 -0
- package/dist/ngx/esm2022/lib/components/rtsee-presentation/story-thumbnail/story-thumbnail.component.mjs +16 -0
- package/dist/ngx/esm2022/lib/components/rtsee-settings/rtsee-settings.component.mjs +22 -10
- package/dist/ngx/esm2022/lib/ngx.module.mjs +26 -7
- package/dist/ngx/esm2022/public-api.mjs +2 -1
- package/dist/ngx/fesm2022/rtsee-ngx.mjs +109 -22
- package/dist/ngx/fesm2022/rtsee-ngx.mjs.map +1 -1
- package/dist/ngx/lib/components/rtsee-presentation/presentation/presentation.component.d.ts +8 -0
- package/dist/ngx/lib/components/rtsee-presentation/slide/slide.component.d.ts +7 -0
- package/dist/ngx/lib/components/rtsee-presentation/story-player/story-player.component.d.ts +11 -0
- package/dist/ngx/lib/components/rtsee-presentation/story-thumbnail/story-thumbnail.component.d.ts +8 -0
- package/dist/ngx/lib/components/rtsee-settings/rtsee-settings.component.d.ts +6 -3
- package/dist/ngx/lib/ngx.module.d.ts +14 -10
- package/dist/ngx/public-api.d.ts +1 -0
- package/dist/ngx/src/lib/common/compiled-scss/styles.scss +130 -58
- package/package.json +5 -5
|
@@ -1,20 +1,20 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
2
|
import { Injectable, Component, Input, ViewChild, Directive, EventEmitter, Output, NgModule } from '@angular/core';
|
|
3
3
|
import * as i1 from '@angular/common';
|
|
4
|
-
import { CommonModule } from '@angular/common';
|
|
4
|
+
import { CommonModule, NgOptimizedImage } from '@angular/common';
|
|
5
5
|
import * as i2 from '@angular/material/button';
|
|
6
6
|
import { MatButtonModule } from '@angular/material/button';
|
|
7
7
|
import * as i3 from '@angular/material/form-field';
|
|
8
8
|
import { MatFormFieldModule } from '@angular/material/form-field';
|
|
9
9
|
import { interval } from 'rxjs';
|
|
10
|
-
import * as
|
|
11
|
-
import { FormGroup, FormControl, Validators, ReactiveFormsModule } from '@angular/forms';
|
|
10
|
+
import * as i2$1 from '@angular/forms';
|
|
11
|
+
import { FormGroup, FormControl, Validators, ReactiveFormsModule, FormsModule } from '@angular/forms';
|
|
12
12
|
import * as i3$1 from 'ngx-infinite-scroll';
|
|
13
13
|
import { InfiniteScrollModule } from 'ngx-infinite-scroll';
|
|
14
14
|
import { RTSeeChatEvents } from '@rtsee/messenger';
|
|
15
15
|
import dayjs from 'dayjs';
|
|
16
16
|
import relativeTime from 'dayjs/plugin/relativeTime';
|
|
17
|
-
import * as i2$
|
|
17
|
+
import * as i2$2 from 'ngx-autosize';
|
|
18
18
|
import { AutosizeModule } from 'ngx-autosize';
|
|
19
19
|
import { RTSeeChatTypes } from '@rtsee/common';
|
|
20
20
|
import shave from 'shave';
|
|
@@ -150,6 +150,9 @@ class RtseeSettingsComponent {
|
|
|
150
150
|
availableAudioInputDevices;
|
|
151
151
|
availableVideoInputDevices;
|
|
152
152
|
availableAudioOutputDevices;
|
|
153
|
+
audioOutputDeviceId;
|
|
154
|
+
videoInputDeviceId;
|
|
155
|
+
audioInputDeviceId;
|
|
153
156
|
rtSee;
|
|
154
157
|
fullScreenMode;
|
|
155
158
|
constructor() {
|
|
@@ -163,22 +166,31 @@ class RtseeSettingsComponent {
|
|
|
163
166
|
refreshSelectOptions() {
|
|
164
167
|
void this.rtSee.refreshMediaDevicesList();
|
|
165
168
|
}
|
|
166
|
-
|
|
167
|
-
this.
|
|
168
|
-
|
|
169
|
+
audioInputChanged() {
|
|
170
|
+
if (!this.audioInputDeviceId) {
|
|
171
|
+
return;
|
|
172
|
+
}
|
|
173
|
+
this.rtSee.setAudioInputDevice(this.audioInputDeviceId);
|
|
174
|
+
console.log(this.audioInputDeviceId);
|
|
169
175
|
}
|
|
170
|
-
|
|
171
|
-
this.
|
|
176
|
+
audioOutputChanged() {
|
|
177
|
+
if (!this.audioOutputDeviceId) {
|
|
178
|
+
return;
|
|
179
|
+
}
|
|
180
|
+
this.rtSee.setAudioOutputDevice(this.audioOutputDeviceId);
|
|
172
181
|
}
|
|
173
|
-
|
|
174
|
-
this.
|
|
182
|
+
videoInputChanged() {
|
|
183
|
+
if (!this.videoInputDeviceId) {
|
|
184
|
+
return;
|
|
185
|
+
}
|
|
186
|
+
this.rtSee.setVideoInputDevice(this.videoInputDeviceId);
|
|
175
187
|
}
|
|
176
188
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: RtseeSettingsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
177
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.3", type: RtseeSettingsComponent, selector: "ngx-rtsee-settings", inputs: { rtSee: "rtSee", fullScreenMode: "fullScreenMode" }, ngImport: i0, template: "<div class=\"rtsee-settings\" [ngClass]=\"{'rtsee-full-screen-settings' : fullScreenMode}\">\n <div class=\"rtsee-devices\">\n <div class=\"rtsee-device-select-wrapper\">\n <label class=\"rtsee-select-label\" for=\"audio-input\">Audio Input:</label>\n <select class=\"rtsee-select\"
|
|
189
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.3", type: RtseeSettingsComponent, selector: "ngx-rtsee-settings", inputs: { rtSee: "rtSee", fullScreenMode: "fullScreenMode" }, ngImport: i0, template: "<div class=\"rtsee-settings\" [ngClass]=\"{'rtsee-full-screen-settings' : fullScreenMode}\">\n <div class=\"rtsee-devices\">\n <div class=\"rtsee-device-select-wrapper\">\n <label class=\"rtsee-select-label\" for=\"audio-input\">Audio Input:</label>\n <select (click)=\"refreshSelectOptions()\"\n (ngModelChange)=\"audioInputChanged()\"\n [(ngModel)]=\"audioInputDeviceId\"\n class=\"rtsee-select\"\n id=\"audio-input\"\n >\n <option *ngFor=\"let device of rtSee.audioInputDevices\"\n [value]=\"device.deviceId\">\n {{device.label}}\n </option>\n </select>\n </div>\n <div class=\"rtsee-device-select-wrapper\">\n <label class=\"rtsee-select-label\" for=\"audio-output\">Audio Output:</label>\n <select (click)=\"refreshSelectOptions()\"\n (ngModelChange)=\"audioOutputChanged()\"\n [(ngModel)]=\"audioOutputDeviceId\"\n class=\"rtsee-select\"\n id=\"audio-output\"\n >\n <option *ngFor=\"let device of rtSee.audioOutputDevices\" [value]=\"device.deviceId\" >\n {{device.label}}\n </option>\n </select>\n </div>\n <div class=\"rtsee-device-select-wrapper\">\n <label class=\"rtsee-select-label\" for=\"video-input\">Video Input:</label>\n <select (click)=\"refreshSelectOptions()\"\n (ngModelChange)=\"videoInputChanged()\"\n [(ngModel)]=\"videoInputDeviceId\"\n class=\"rtsee-select\"\n id=\"video-input\"\n >\n <option *ngFor=\"let device of rtSee.videoInputDevices\" [value]=\"device.deviceId\">\n {{device.label}}\n </option>\n </select>\n </div>\n </div>\n</div>\n", styles: [".rtsee-settings{box-sizing:border-box;background-color:#404040;border-bottom:1px solid;max-height:180px;padding:16px 0;overflow:auto;color:#fff}.rtsee-settings .rtsee-device-select-wrapper{padding:0 10px}.rtsee-settings .rtsee-device-select-wrapper .rtsee-select-label{font-family:monospace;display:inline-block;margin:8px}.rtsee-settings.rtsee-full-screen-settings{max-height:unset;overflow:unset}\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: i2$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
|
|
178
190
|
}
|
|
179
191
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: RtseeSettingsComponent, decorators: [{
|
|
180
192
|
type: Component,
|
|
181
|
-
args: [{ selector: 'ngx-rtsee-settings', template: "<div class=\"rtsee-settings\" [ngClass]=\"{'rtsee-full-screen-settings' : fullScreenMode}\">\n <div class=\"rtsee-devices\">\n <div class=\"rtsee-device-select-wrapper\">\n <label class=\"rtsee-select-label\" for=\"audio-input\">Audio Input:</label>\n <select class=\"rtsee-select\"
|
|
193
|
+
args: [{ selector: 'ngx-rtsee-settings', template: "<div class=\"rtsee-settings\" [ngClass]=\"{'rtsee-full-screen-settings' : fullScreenMode}\">\n <div class=\"rtsee-devices\">\n <div class=\"rtsee-device-select-wrapper\">\n <label class=\"rtsee-select-label\" for=\"audio-input\">Audio Input:</label>\n <select (click)=\"refreshSelectOptions()\"\n (ngModelChange)=\"audioInputChanged()\"\n [(ngModel)]=\"audioInputDeviceId\"\n class=\"rtsee-select\"\n id=\"audio-input\"\n >\n <option *ngFor=\"let device of rtSee.audioInputDevices\"\n [value]=\"device.deviceId\">\n {{device.label}}\n </option>\n </select>\n </div>\n <div class=\"rtsee-device-select-wrapper\">\n <label class=\"rtsee-select-label\" for=\"audio-output\">Audio Output:</label>\n <select (click)=\"refreshSelectOptions()\"\n (ngModelChange)=\"audioOutputChanged()\"\n [(ngModel)]=\"audioOutputDeviceId\"\n class=\"rtsee-select\"\n id=\"audio-output\"\n >\n <option *ngFor=\"let device of rtSee.audioOutputDevices\" [value]=\"device.deviceId\" >\n {{device.label}}\n </option>\n </select>\n </div>\n <div class=\"rtsee-device-select-wrapper\">\n <label class=\"rtsee-select-label\" for=\"video-input\">Video Input:</label>\n <select (click)=\"refreshSelectOptions()\"\n (ngModelChange)=\"videoInputChanged()\"\n [(ngModel)]=\"videoInputDeviceId\"\n class=\"rtsee-select\"\n id=\"video-input\"\n >\n <option *ngFor=\"let device of rtSee.videoInputDevices\" [value]=\"device.deviceId\">\n {{device.label}}\n </option>\n </select>\n </div>\n </div>\n</div>\n", styles: [".rtsee-settings{box-sizing:border-box;background-color:#404040;border-bottom:1px solid;max-height:180px;padding:16px 0;overflow:auto;color:#fff}.rtsee-settings .rtsee-device-select-wrapper{padding:0 10px}.rtsee-settings .rtsee-device-select-wrapper .rtsee-select-label{font-family:monospace;display:inline-block;margin:8px}.rtsee-settings.rtsee-full-screen-settings{max-height:unset;overflow:unset}\n"] }]
|
|
182
194
|
}], ctorParameters: function () { return []; }, propDecorators: { rtSee: [{
|
|
183
195
|
type: Input
|
|
184
196
|
}], fullScreenMode: [{
|
|
@@ -198,11 +210,11 @@ class RTSeeConferenceComponent {
|
|
|
198
210
|
this.rtSee.uiControls.toggle();
|
|
199
211
|
}
|
|
200
212
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: RTSeeConferenceComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
201
|
-
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,\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]=\"rtSee.uiControls.isExpanded\"></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]=\"rtSee.uiControls.isExpanded\"></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;position:relative}.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{
|
|
213
|
+
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,\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]=\"rtSee.uiControls.isExpanded\"></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]=\"rtSee.uiControls.isExpanded\"></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;position:relative}.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{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:fixed;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:45px}\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
214
|
}
|
|
203
215
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: RTSeeConferenceComponent, decorators: [{
|
|
204
216
|
type: Component,
|
|
205
|
-
args: [{ selector: 'rtsee-conference', template: "<div class=\"rtsee-shell\" [ngClass]=\"{\n'rtsee-shell-expanded': rtSee.uiControls.isExpanded,\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]=\"rtSee.uiControls.isExpanded\"></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]=\"rtSee.uiControls.isExpanded\"></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;position:relative}.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{
|
|
217
|
+
args: [{ selector: 'rtsee-conference', template: "<div class=\"rtsee-shell\" [ngClass]=\"{\n'rtsee-shell-expanded': rtSee.uiControls.isExpanded,\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]=\"rtSee.uiControls.isExpanded\"></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]=\"rtSee.uiControls.isExpanded\"></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;position:relative}.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{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:fixed;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:45px}\n"] }]
|
|
206
218
|
}], ctorParameters: function () { return []; }, propDecorators: { rtSee: [{
|
|
207
219
|
type: Input
|
|
208
220
|
}] } });
|
|
@@ -551,7 +563,7 @@ class ChatInputComponent {
|
|
|
551
563
|
this.sendMessageForm.get('message')?.setValue('');
|
|
552
564
|
}
|
|
553
565
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: ChatInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
554
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.3", type: ChatInputComponent, selector: "rtsee-chat-input", inputs: { messenger: "messenger", chat: "chat" }, ngImport: i0, template: "<div class=\"rtsee-chat-input\" xmlns=\"http://www.w3.org/1999/html\">\n <div class=\"rtsee-send-message\">\n <form [formGroup]=\"sendMessageForm\" class=\"rtsee-chat-input-form\">\n <textarea\n placeholder=\"Type message...\"\n type=\"text\"\n formControlName=\"message\"\n class=\"rtsee-chat-input-field\"\n autosize\n required\n (keyup.enter)=\"sendMessage()\"\n ></textarea>\n </form>\n </div>\n <button (click)=\"sendMessage()\"\n class=\"rtsee-send-message-button\"\n type=\"submit\">\n <span class=\"material-icons-outlined\">send</span>\n </button>\n</div>\n", dependencies: [{ kind: "directive", type:
|
|
566
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.3", type: ChatInputComponent, selector: "rtsee-chat-input", inputs: { messenger: "messenger", chat: "chat" }, ngImport: i0, template: "<div class=\"rtsee-chat-input\" xmlns=\"http://www.w3.org/1999/html\">\n <div class=\"rtsee-send-message\">\n <form [formGroup]=\"sendMessageForm\" class=\"rtsee-chat-input-form\">\n <textarea\n placeholder=\"Type message...\"\n type=\"text\"\n formControlName=\"message\"\n class=\"rtsee-chat-input-field\"\n autosize\n required\n (keyup.enter)=\"sendMessage()\"\n ></textarea>\n </form>\n </div>\n <button (click)=\"sendMessage()\"\n class=\"rtsee-send-message-button\"\n type=\"submit\">\n <span class=\"material-icons-outlined\">send</span>\n </button>\n</div>\n", dependencies: [{ kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2$2.AutosizeDirective, selector: "[autosize]", inputs: ["minRows", "autosize", "maxRows", "onlyGrow", "useImportant"], outputs: ["resized"] }] });
|
|
555
567
|
}
|
|
556
568
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: ChatInputComponent, decorators: [{
|
|
557
569
|
type: Component,
|
|
@@ -721,7 +733,7 @@ class SearchComponent {
|
|
|
721
733
|
}
|
|
722
734
|
}
|
|
723
735
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: SearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
724
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.3", type: SearchComponent, selector: "rtsee-search", inputs: { search: "search" }, ngImport: i0, template: "<div class=\"rtsee-messenger-search\">\n <input type=\"text\"\n [formControl]=\"queryControl\"\n class=\"rtsee-messenger-search-input\"\n placeholder=\"Search\"/>\n</div>\n\n<div class=\"rtsee-messenger-search-results\">\n <rtsee-preloader [diameter]=\"50\" *ngIf=\"search.searchInProgress\"></rtsee-preloader>\n <p>Chats</p>\n <div class=\"rtsee-messenger-search-results-chats\">\n <div *ngFor=\"let chat of search.results.chats\" class=\"rtsee-messenger-search-results-chat-wrapper\">\n <p>{{chat.name}}</p>\n </div>\n </div>\n <p>Messages</p>\n <div class=\"rtsee-messenger-search-results-messages\">\n <div *ngFor=\"let message of search.results.messages\" class=\"rtsee-messenger-search-results-message-wrapper\">\n <p>{{message.chatName || message.senderName }}</p>\n </div>\n </div>\n</div>\n", dependencies: [{ 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:
|
|
736
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.3", type: SearchComponent, selector: "rtsee-search", inputs: { search: "search" }, ngImport: i0, template: "<div class=\"rtsee-messenger-search\">\n <input type=\"text\"\n [formControl]=\"queryControl\"\n class=\"rtsee-messenger-search-input\"\n placeholder=\"Search\"/>\n</div>\n\n<div class=\"rtsee-messenger-search-results\">\n <rtsee-preloader [diameter]=\"50\" *ngIf=\"search.searchInProgress\"></rtsee-preloader>\n <p>Chats</p>\n <div class=\"rtsee-messenger-search-results-chats\">\n <div *ngFor=\"let chat of search.results.chats\" class=\"rtsee-messenger-search-results-chat-wrapper\">\n <p>{{chat.name}}</p>\n </div>\n </div>\n <p>Messages</p>\n <div class=\"rtsee-messenger-search-results-messages\">\n <div *ngFor=\"let message of search.results.messages\" class=\"rtsee-messenger-search-results-message-wrapper\">\n <p>{{message.chatName || message.senderName }}</p>\n </div>\n </div>\n</div>\n", dependencies: [{ 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: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: PreloaderComponent, selector: "rtsee-preloader", inputs: ["diameter", "color"] }] });
|
|
725
737
|
}
|
|
726
738
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: SearchComponent, decorators: [{
|
|
727
739
|
type: Component,
|
|
@@ -935,6 +947,7 @@ class RtseeEventsDashboardClientThumbnailComponent {
|
|
|
935
947
|
console.log('client id', this.client.id);
|
|
936
948
|
}
|
|
937
949
|
openChat() {
|
|
950
|
+
console.log('Open Chat Clicked! Client ID #', this.client.id);
|
|
938
951
|
this.dashboard.openChat(this.client);
|
|
939
952
|
}
|
|
940
953
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: RtseeEventsDashboardClientThumbnailComponent, deps: [{ token: TimeFormatHelperService }, { token: DefaultImagesService }], target: i0.ɵɵFactoryTarget.Component });
|
|
@@ -970,6 +983,65 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.3", ngImpor
|
|
|
970
983
|
args: [{ selector: 'rtsee-container', template: "<div class=\"rtsee-container\">\n <ng-content></ng-content>\n</div>\n" }]
|
|
971
984
|
}] });
|
|
972
985
|
|
|
986
|
+
class SlideComponent {
|
|
987
|
+
slide;
|
|
988
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: SlideComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
989
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.3", type: SlideComponent, selector: "rtsee-slide", inputs: { slide: "slide" }, ngImport: i0, template: "<div class=\"rtsee-presentation-slide\">\n <ng-template *ngIf=\"slide.widget\" widgetHost></ng-template>\n <div class=\"rtsee-presentation-slide-default\">\n <div class=\"rtsee-presentation-slide-image-container\"\n *ngIf=\"slide.imageUrl\"\n >\n <img [src]=\"slide.imageUrl\" width=\"100%\" alt=\"Slide Image\">\n </div>\n <div class=\"rtsee-presentation-slide-text\">\n <p>{{slide.text}}</p>\n </div>\n <div class=\"rtsee-presentation-slide-controls\">\n <button>\n <span class=\"rtsee-story-thumbnail-info-time-icon material-icons-outlined\"\n >arrow_forward_ios</span>\n </button>\n <button>\n <span class=\"rtsee-story-thumbnail-info-time-icon material-icons-outlined\"\n >arrow_back_ios</span>\n </button>\n </div>\n </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: WidgetDirective, selector: "[widgetHost]" }] });
|
|
990
|
+
}
|
|
991
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: SlideComponent, decorators: [{
|
|
992
|
+
type: Component,
|
|
993
|
+
args: [{ selector: 'rtsee-slide', template: "<div class=\"rtsee-presentation-slide\">\n <ng-template *ngIf=\"slide.widget\" widgetHost></ng-template>\n <div class=\"rtsee-presentation-slide-default\">\n <div class=\"rtsee-presentation-slide-image-container\"\n *ngIf=\"slide.imageUrl\"\n >\n <img [src]=\"slide.imageUrl\" width=\"100%\" alt=\"Slide Image\">\n </div>\n <div class=\"rtsee-presentation-slide-text\">\n <p>{{slide.text}}</p>\n </div>\n <div class=\"rtsee-presentation-slide-controls\">\n <button>\n <span class=\"rtsee-story-thumbnail-info-time-icon material-icons-outlined\"\n >arrow_forward_ios</span>\n </button>\n <button>\n <span class=\"rtsee-story-thumbnail-info-time-icon material-icons-outlined\"\n >arrow_back_ios</span>\n </button>\n </div>\n </div>\n</div>\n" }]
|
|
994
|
+
}], propDecorators: { slide: [{
|
|
995
|
+
type: Input
|
|
996
|
+
}] } });
|
|
997
|
+
|
|
998
|
+
class StoryPlayerComponent {
|
|
999
|
+
story;
|
|
1000
|
+
closeClicked = new EventEmitter();
|
|
1001
|
+
ngOnInit() {
|
|
1002
|
+
console.log('Story Player: Story = ', this.story);
|
|
1003
|
+
}
|
|
1004
|
+
onCloseClicked() {
|
|
1005
|
+
this.closeClicked.emit();
|
|
1006
|
+
}
|
|
1007
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: StoryPlayerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1008
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.3", type: StoryPlayerComponent, selector: "rtsee-story-player", inputs: { story: "story" }, outputs: { closeClicked: "closeClicked" }, ngImport: i0, template: "<div class=\"rtsee-story-player\">\n <div class=\"rtsee-story-player-header\">\n <p>{{story.name}}</p>\n <span class=\"rtsee-story-thumbnail-info-time-icon material-icons-outlined\"\n (click)=\"onCloseClicked()\"\n >close</span>\n </div>\n <div class=\"rtsee-story-player-slider\">\n <div class=\"story-player-slide-container\"\n *ngFor=\"let slide of story.slides\"\n >\n <rtsee-slide [slide]=\"slide\"></rtsee-slide>\n </div>\n </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: SlideComponent, selector: "rtsee-slide", inputs: ["slide"] }] });
|
|
1009
|
+
}
|
|
1010
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: StoryPlayerComponent, decorators: [{
|
|
1011
|
+
type: Component,
|
|
1012
|
+
args: [{ selector: 'rtsee-story-player', template: "<div class=\"rtsee-story-player\">\n <div class=\"rtsee-story-player-header\">\n <p>{{story.name}}</p>\n <span class=\"rtsee-story-thumbnail-info-time-icon material-icons-outlined\"\n (click)=\"onCloseClicked()\"\n >close</span>\n </div>\n <div class=\"rtsee-story-player-slider\">\n <div class=\"story-player-slide-container\"\n *ngFor=\"let slide of story.slides\"\n >\n <rtsee-slide [slide]=\"slide\"></rtsee-slide>\n </div>\n </div>\n</div>\n" }]
|
|
1013
|
+
}], propDecorators: { story: [{
|
|
1014
|
+
type: Input
|
|
1015
|
+
}], closeClicked: [{
|
|
1016
|
+
type: Output
|
|
1017
|
+
}] } });
|
|
1018
|
+
|
|
1019
|
+
class StoryThumbnailComponent {
|
|
1020
|
+
story;
|
|
1021
|
+
Math = Math;
|
|
1022
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: StoryThumbnailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1023
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.3", type: StoryThumbnailComponent, selector: "rtsee-story-thumbnail", inputs: { story: "story" }, ngImport: i0, template: "<div class=\"rtsee-story-thumbnail\">\n <div class=\"rtsee-story-thumbnail-image-container\"\n [ngStyle]=\"{'background-image': 'url(' + story.imageUrl + ')'}\"\n >\n </div>\n <div class=\"rtsee-story-thumbnail-body-container\">\n <div class=\"rtsee-story-thumbnail-title-container\">\n <h4 class=\"rtsee-story-thumbnail-title\">{{story.name}}</h4>\n </div>\n <div class=\"rtsee-story-thumbnail-info-container\" *ngIf=\"story.averageReadTime\">\n <span class=\"rtsee-story-thumbnail-info-time-icon material-icons-outlined\">schedule</span>\n <span class=\"rtsee-story-thumbnail-info-read-time\">{{ Math.ceil(story.averageReadTime / 60) }} \u0445\u0432</span>\n </div>\n </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
1024
|
+
}
|
|
1025
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: StoryThumbnailComponent, decorators: [{
|
|
1026
|
+
type: Component,
|
|
1027
|
+
args: [{ selector: 'rtsee-story-thumbnail', template: "<div class=\"rtsee-story-thumbnail\">\n <div class=\"rtsee-story-thumbnail-image-container\"\n [ngStyle]=\"{'background-image': 'url(' + story.imageUrl + ')'}\"\n >\n </div>\n <div class=\"rtsee-story-thumbnail-body-container\">\n <div class=\"rtsee-story-thumbnail-title-container\">\n <h4 class=\"rtsee-story-thumbnail-title\">{{story.name}}</h4>\n </div>\n <div class=\"rtsee-story-thumbnail-info-container\" *ngIf=\"story.averageReadTime\">\n <span class=\"rtsee-story-thumbnail-info-time-icon material-icons-outlined\">schedule</span>\n <span class=\"rtsee-story-thumbnail-info-read-time\">{{ Math.ceil(story.averageReadTime / 60) }} \u0445\u0432</span>\n </div>\n </div>\n</div>\n" }]
|
|
1028
|
+
}], propDecorators: { story: [{
|
|
1029
|
+
type: Input
|
|
1030
|
+
}] } });
|
|
1031
|
+
|
|
1032
|
+
class PresentationComponent {
|
|
1033
|
+
rtSeePresentation;
|
|
1034
|
+
constructor() { }
|
|
1035
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: PresentationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1036
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.3", type: PresentationComponent, selector: "rtsee-presentation", inputs: { rtSeePresentation: "rtSeePresentation" }, ngImport: i0, template: "<div class=\"rtsee-presentation\">\n <div class=\"rtsee-presentation-stories-list\"\n *ngIf=\"!rtSeePresentation.activeStory\"\n >\n <div class=\"rtsee-presentation-story-thumbnail-container\"\n *ngFor=\"let story of rtSeePresentation.stories\"\n (click)=\"rtSeePresentation.setActiveStory(story)\"\n >\n <rtsee-story-thumbnail\n [story]=\"story\"\n ></rtsee-story-thumbnail>\n </div>\n </div>\n <div class=\"rtsee-presentation-story-viewer-container\"\n *ngIf=\"rtSeePresentation.activeStory\"\n >\n <rtsee-story-player [story]=\"rtSeePresentation.activeStory\"\n (closeClicked)=\"rtSeePresentation.disableActiveStory()\"\n ></rtsee-story-player>\n </div>\n</div>\n", styles: [""], dependencies: [{ 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: StoryPlayerComponent, selector: "rtsee-story-player", inputs: ["story"], outputs: ["closeClicked"] }, { kind: "component", type: StoryThumbnailComponent, selector: "rtsee-story-thumbnail", inputs: ["story"] }] });
|
|
1037
|
+
}
|
|
1038
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: PresentationComponent, decorators: [{
|
|
1039
|
+
type: Component,
|
|
1040
|
+
args: [{ selector: 'rtsee-presentation', template: "<div class=\"rtsee-presentation\">\n <div class=\"rtsee-presentation-stories-list\"\n *ngIf=\"!rtSeePresentation.activeStory\"\n >\n <div class=\"rtsee-presentation-story-thumbnail-container\"\n *ngFor=\"let story of rtSeePresentation.stories\"\n (click)=\"rtSeePresentation.setActiveStory(story)\"\n >\n <rtsee-story-thumbnail\n [story]=\"story\"\n ></rtsee-story-thumbnail>\n </div>\n </div>\n <div class=\"rtsee-presentation-story-viewer-container\"\n *ngIf=\"rtSeePresentation.activeStory\"\n >\n <rtsee-story-player [story]=\"rtSeePresentation.activeStory\"\n (closeClicked)=\"rtSeePresentation.disableActiveStory()\"\n ></rtsee-story-player>\n </div>\n</div>\n" }]
|
|
1041
|
+
}], ctorParameters: function () { return []; }, propDecorators: { rtSeePresentation: [{
|
|
1042
|
+
type: Input
|
|
1043
|
+
}] } });
|
|
1044
|
+
|
|
973
1045
|
class RtseePeersListComponent {
|
|
974
1046
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: RtseePeersListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
975
1047
|
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: [""] });
|
|
@@ -1019,7 +1091,11 @@ class RTSeeModule {
|
|
|
1019
1091
|
ProfileComponent,
|
|
1020
1092
|
EventThumbnailComponent,
|
|
1021
1093
|
RtseeEventsDashboardSessionComponent,
|
|
1022
|
-
RTSeeContainerComponent
|
|
1094
|
+
RTSeeContainerComponent,
|
|
1095
|
+
PresentationComponent,
|
|
1096
|
+
StoryPlayerComponent,
|
|
1097
|
+
SlideComponent,
|
|
1098
|
+
StoryThumbnailComponent], imports: [CommonModule,
|
|
1023
1099
|
MatIconModule,
|
|
1024
1100
|
MatButtonModule,
|
|
1025
1101
|
MatSelectModule,
|
|
@@ -1027,10 +1103,13 @@ class RTSeeModule {
|
|
|
1027
1103
|
MatFormFieldModule,
|
|
1028
1104
|
ReactiveFormsModule,
|
|
1029
1105
|
AutosizeModule,
|
|
1030
|
-
InfiniteScrollModule
|
|
1106
|
+
InfiniteScrollModule,
|
|
1107
|
+
FormsModule,
|
|
1108
|
+
NgOptimizedImage], exports: [RTSeeConferenceComponent,
|
|
1031
1109
|
MessengerComponent,
|
|
1032
1110
|
RtseeEventsDashboardComponent,
|
|
1033
|
-
RTSeeContainerComponent
|
|
1111
|
+
RTSeeContainerComponent,
|
|
1112
|
+
PresentationComponent] });
|
|
1034
1113
|
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: RTSeeModule, imports: [CommonModule,
|
|
1035
1114
|
MatIconModule,
|
|
1036
1115
|
MatButtonModule,
|
|
@@ -1039,7 +1118,8 @@ class RTSeeModule {
|
|
|
1039
1118
|
MatFormFieldModule,
|
|
1040
1119
|
ReactiveFormsModule,
|
|
1041
1120
|
AutosizeModule,
|
|
1042
|
-
InfiniteScrollModule
|
|
1121
|
+
InfiniteScrollModule,
|
|
1122
|
+
FormsModule] });
|
|
1043
1123
|
}
|
|
1044
1124
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: RTSeeModule, decorators: [{
|
|
1045
1125
|
type: NgModule,
|
|
@@ -1075,6 +1155,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.3", ngImpor
|
|
|
1075
1155
|
EventThumbnailComponent,
|
|
1076
1156
|
RtseeEventsDashboardSessionComponent,
|
|
1077
1157
|
RTSeeContainerComponent,
|
|
1158
|
+
PresentationComponent,
|
|
1159
|
+
StoryPlayerComponent,
|
|
1160
|
+
SlideComponent,
|
|
1161
|
+
StoryThumbnailComponent,
|
|
1078
1162
|
],
|
|
1079
1163
|
imports: [
|
|
1080
1164
|
CommonModule,
|
|
@@ -1086,12 +1170,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.3", ngImpor
|
|
|
1086
1170
|
ReactiveFormsModule,
|
|
1087
1171
|
AutosizeModule,
|
|
1088
1172
|
InfiniteScrollModule,
|
|
1173
|
+
FormsModule,
|
|
1174
|
+
NgOptimizedImage,
|
|
1089
1175
|
],
|
|
1090
1176
|
exports: [
|
|
1091
1177
|
RTSeeConferenceComponent,
|
|
1092
1178
|
MessengerComponent,
|
|
1093
1179
|
RtseeEventsDashboardComponent,
|
|
1094
1180
|
RTSeeContainerComponent,
|
|
1181
|
+
PresentationComponent,
|
|
1095
1182
|
],
|
|
1096
1183
|
}]
|
|
1097
1184
|
}] });
|
|
@@ -1104,5 +1191,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.3", ngImpor
|
|
|
1104
1191
|
* Generated bundle index. Do not edit.
|
|
1105
1192
|
*/
|
|
1106
1193
|
|
|
1107
|
-
export { MessengerComponent, NgxService, RTSeeConferenceComponent, RTSeeContainerComponent, RTSeeControlsComponent, RTSeeModule, RtseeEventsDashboardComponent };
|
|
1194
|
+
export { MessengerComponent, NgxService, PresentationComponent, RTSeeConferenceComponent, RTSeeContainerComponent, RTSeeControlsComponent, RTSeeModule, RtseeEventsDashboardComponent };
|
|
1108
1195
|
//# sourceMappingURL=rtsee-ngx.mjs.map
|