@rtsee/ngx 0.0.48 → 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-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 +108 -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,
|
|
@@ -971,6 +983,65 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.3", ngImpor
|
|
|
971
983
|
args: [{ selector: 'rtsee-container', template: "<div class=\"rtsee-container\">\n <ng-content></ng-content>\n</div>\n" }]
|
|
972
984
|
}] });
|
|
973
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
|
+
|
|
974
1045
|
class RtseePeersListComponent {
|
|
975
1046
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: RtseePeersListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
976
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: [""] });
|
|
@@ -1020,7 +1091,11 @@ class RTSeeModule {
|
|
|
1020
1091
|
ProfileComponent,
|
|
1021
1092
|
EventThumbnailComponent,
|
|
1022
1093
|
RtseeEventsDashboardSessionComponent,
|
|
1023
|
-
RTSeeContainerComponent
|
|
1094
|
+
RTSeeContainerComponent,
|
|
1095
|
+
PresentationComponent,
|
|
1096
|
+
StoryPlayerComponent,
|
|
1097
|
+
SlideComponent,
|
|
1098
|
+
StoryThumbnailComponent], imports: [CommonModule,
|
|
1024
1099
|
MatIconModule,
|
|
1025
1100
|
MatButtonModule,
|
|
1026
1101
|
MatSelectModule,
|
|
@@ -1028,10 +1103,13 @@ class RTSeeModule {
|
|
|
1028
1103
|
MatFormFieldModule,
|
|
1029
1104
|
ReactiveFormsModule,
|
|
1030
1105
|
AutosizeModule,
|
|
1031
|
-
InfiniteScrollModule
|
|
1106
|
+
InfiniteScrollModule,
|
|
1107
|
+
FormsModule,
|
|
1108
|
+
NgOptimizedImage], exports: [RTSeeConferenceComponent,
|
|
1032
1109
|
MessengerComponent,
|
|
1033
1110
|
RtseeEventsDashboardComponent,
|
|
1034
|
-
RTSeeContainerComponent
|
|
1111
|
+
RTSeeContainerComponent,
|
|
1112
|
+
PresentationComponent] });
|
|
1035
1113
|
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: RTSeeModule, imports: [CommonModule,
|
|
1036
1114
|
MatIconModule,
|
|
1037
1115
|
MatButtonModule,
|
|
@@ -1040,7 +1118,8 @@ class RTSeeModule {
|
|
|
1040
1118
|
MatFormFieldModule,
|
|
1041
1119
|
ReactiveFormsModule,
|
|
1042
1120
|
AutosizeModule,
|
|
1043
|
-
InfiniteScrollModule
|
|
1121
|
+
InfiniteScrollModule,
|
|
1122
|
+
FormsModule] });
|
|
1044
1123
|
}
|
|
1045
1124
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: RTSeeModule, decorators: [{
|
|
1046
1125
|
type: NgModule,
|
|
@@ -1076,6 +1155,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.3", ngImpor
|
|
|
1076
1155
|
EventThumbnailComponent,
|
|
1077
1156
|
RtseeEventsDashboardSessionComponent,
|
|
1078
1157
|
RTSeeContainerComponent,
|
|
1158
|
+
PresentationComponent,
|
|
1159
|
+
StoryPlayerComponent,
|
|
1160
|
+
SlideComponent,
|
|
1161
|
+
StoryThumbnailComponent,
|
|
1079
1162
|
],
|
|
1080
1163
|
imports: [
|
|
1081
1164
|
CommonModule,
|
|
@@ -1087,12 +1170,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.3", ngImpor
|
|
|
1087
1170
|
ReactiveFormsModule,
|
|
1088
1171
|
AutosizeModule,
|
|
1089
1172
|
InfiniteScrollModule,
|
|
1173
|
+
FormsModule,
|
|
1174
|
+
NgOptimizedImage,
|
|
1090
1175
|
],
|
|
1091
1176
|
exports: [
|
|
1092
1177
|
RTSeeConferenceComponent,
|
|
1093
1178
|
MessengerComponent,
|
|
1094
1179
|
RtseeEventsDashboardComponent,
|
|
1095
1180
|
RTSeeContainerComponent,
|
|
1181
|
+
PresentationComponent,
|
|
1096
1182
|
],
|
|
1097
1183
|
}]
|
|
1098
1184
|
}] });
|
|
@@ -1105,5 +1191,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.3", ngImpor
|
|
|
1105
1191
|
* Generated bundle index. Do not edit.
|
|
1106
1192
|
*/
|
|
1107
1193
|
|
|
1108
|
-
export { MessengerComponent, NgxService, RTSeeConferenceComponent, RTSeeContainerComponent, RTSeeControlsComponent, RTSeeModule, RtseeEventsDashboardComponent };
|
|
1194
|
+
export { MessengerComponent, NgxService, PresentationComponent, RTSeeConferenceComponent, RTSeeContainerComponent, RTSeeControlsComponent, RTSeeModule, RtseeEventsDashboardComponent };
|
|
1109
1195
|
//# sourceMappingURL=rtsee-ngx.mjs.map
|