@rtsee/ngx 0.0.8 → 0.0.14
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/bundles/rtsee-ngx.umd.js +295 -13
- package/dist/ngx/bundles/rtsee-ngx.umd.js.map +1 -1
- package/dist/ngx/esm2015/lib/components/rtsee/rtsee-controls/rtsee-controls.component.js +1 -1
- package/dist/ngx/esm2015/lib/components/rtsee/rtsee.component.js +2 -2
- package/dist/ngx/esm2015/lib/components/rtsee-events-dashboard/components/rtsee-events-dashboard-client/rtsee-events-dashboard-client.component.js +15 -0
- package/dist/ngx/esm2015/lib/components/rtsee-events-dashboard/components/rtsee-events-dashboard-client-thumbnail/rtsee-events-dashboard-client-thumbnail.component.js +30 -0
- package/dist/ngx/esm2015/lib/components/rtsee-events-dashboard/rtsee-events-dashboard.component.js +19 -0
- package/dist/ngx/esm2015/lib/components/rtsee-messenger/chat/chat.component.js +21 -0
- package/dist/ngx/esm2015/lib/components/rtsee-messenger/chat-input/chat-input.component.js +38 -0
- package/dist/ngx/esm2015/lib/components/rtsee-messenger/chat-thumbnail/chat-thumbnail.component.js +19 -0
- package/dist/ngx/esm2015/lib/components/rtsee-messenger/chats-list/chats-list.component.js +24 -0
- package/dist/ngx/esm2015/lib/components/rtsee-messenger/message/message.component.js +19 -0
- package/dist/ngx/esm2015/lib/components/rtsee-messenger/messages-list/messages-list.component.js +21 -0
- package/dist/ngx/esm2015/lib/components/rtsee-messenger/messenger/messenger.component.js +21 -0
- package/dist/ngx/esm2015/lib/components/rtsee-messenger/messenger-header/messenger-header.component.js +18 -0
- package/dist/ngx/esm2015/lib/components/rtsee-peer/rtsee-peer.component.js +2 -4
- package/dist/ngx/esm2015/lib/components/rtsee-settings/rtsee-settings.component.js +3 -2
- package/dist/ngx/esm2015/lib/ngx.module.js +41 -4
- package/dist/ngx/esm2015/lib/services/time-format-helper.service.js +21 -0
- package/dist/ngx/esm2015/public-api.js +3 -1
- package/dist/ngx/fesm2015/rtsee-ngx.js +259 -10
- package/dist/ngx/fesm2015/rtsee-ngx.js.map +1 -1
- package/dist/ngx/lib/components/rtsee-events-dashboard/components/rtsee-events-dashboard-client/rtsee-events-dashboard-client.component.d.ts +5 -0
- package/dist/ngx/lib/components/rtsee-events-dashboard/components/rtsee-events-dashboard-client-thumbnail/rtsee-events-dashboard-client-thumbnail.component.d.ts +14 -0
- package/dist/ngx/lib/components/rtsee-events-dashboard/rtsee-events-dashboard.component.d.ts +7 -0
- package/dist/ngx/lib/components/rtsee-messenger/chat/chat.component.d.ts +8 -0
- package/dist/ngx/lib/components/rtsee-messenger/chat-input/chat-input.component.d.ts +11 -0
- package/dist/ngx/lib/components/rtsee-messenger/chat-thumbnail/chat-thumbnail.component.d.ts +8 -0
- package/dist/ngx/lib/components/rtsee-messenger/chats-list/chats-list.component.d.ts +10 -0
- package/dist/ngx/lib/components/rtsee-messenger/message/message.component.d.ts +8 -0
- package/dist/ngx/lib/components/rtsee-messenger/messages-list/messages-list.component.d.ts +8 -0
- package/dist/ngx/lib/components/rtsee-messenger/messenger/messenger.component.d.ts +7 -0
- package/dist/ngx/lib/components/rtsee-messenger/messenger-header/messenger-header.component.d.ts +7 -0
- package/dist/ngx/lib/components/rtsee-peer/rtsee-peer.component.d.ts +1 -2
- package/dist/ngx/lib/ngx.module.d.ts +19 -7
- package/dist/ngx/lib/services/time-format-helper.service.d.ts +6 -0
- package/dist/ngx/public-api.d.ts +2 -0
- package/package.json +6 -5
|
@@ -6,7 +6,11 @@ import * as i2 from '@angular/common';
|
|
|
6
6
|
import { CommonModule } from '@angular/common';
|
|
7
7
|
import * as i3 from '@angular/material/form-field';
|
|
8
8
|
import { MatFormFieldModule } from '@angular/material/form-field';
|
|
9
|
+
import * as i2$1 from '@angular/forms';
|
|
10
|
+
import { FormGroup, FormControl, Validators, ReactiveFormsModule } from '@angular/forms';
|
|
9
11
|
import { interval } from 'rxjs';
|
|
12
|
+
import * as dayjs from 'dayjs';
|
|
13
|
+
import * as relativeTime from 'dayjs/plugin/relativeTime';
|
|
10
14
|
import { MatIconModule } from '@angular/material/icon';
|
|
11
15
|
import { MatSelectModule } from '@angular/material/select';
|
|
12
16
|
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
|
|
@@ -33,7 +37,7 @@ class RTSeeControlsComponent {
|
|
|
33
37
|
}
|
|
34
38
|
}
|
|
35
39
|
RTSeeControlsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0, type: RTSeeControlsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
36
|
-
RTSeeControlsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.2", type: RTSeeControlsComponent, selector: "ngx-rtsee-controls", inputs: { rtsee: "rtsee", fullScreenMode: "fullScreenMode" }, ngImport: i0, template: "<div class=\"rtsee-controls\" [ngClass]=\"{'rtsee-full-screen-controls' : fullScreenMode }\">\n <div class=\"rtsee-bottom-panel\">\n <div class=\"mic rtsee-buttons-container\">\n <button mat-icon-button matSuffix\n class=\"rtsee-ripple-button\"\n *ngIf=\"rtsee.microphone\"\n type=\"button\"\n (click)=\"this.rtsee.disableMicrophone()\"\n >\n <span class=\"material-icons-outlined\">mic_none</span>\n </button>\n <button mat-icon-button matSuffix\n class=\"rtsee-ripple-button\"\n *ngIf=\"!rtsee.microphone\"\n type=\"button\" (click)=\"this.rtsee.enableMicrophone()\"\n >\n <span class=\"material-icons-outlined\">mic_off</span>\n </button>\n </div>\n\n <div class=\"video-camera rtsee-buttons-container\">\n <button mat-icon-button matSuffix\n class=\"rtsee-ripple-button\"\n *ngIf=\"rtsee.camera\"\n type=\"button\"\n (click)=\"rtsee.disableCamera()\"\n >\n <span class=\"material-icons-outlined\">videocam</span>\n </button>\n <button mat-icon-button matSuffix\n class=\"rtsee-ripple-button\"\n *ngIf=\"!rtsee.camera\"\n type=\"button\"\n (click)=\"rtsee.enableCamera()\"\n >\n <span class=\"material-icons-outlined\">videocam_off</span>\n </button>\n </div>\n <div class=\"present rtsee-buttons-container\" [ngClass]=\"{'rtsee-present-button-container': rtsee.isPresenter}\">\n <button mat-icon-button matSuffix\n class=\"rtsee-ripple-button\"\n type=\"button\"\n (click)=\"onPresentClicked()\"\n >\n <span class=\"material-icons-outlined\">present_to_all</span>\n </button>\n </div>\n <div class=\"call-end rtsee-buttons-container\">\n <button mat-icon-button matSuffix\n class=\"rtsee-ripple-button\"\n type=\"button\"\n (click)=\"rtsee.end()\"\n >\n <span class=\"material-icons-outlined\">call_end</span>\n </button>\n </div>\n </div>\n</div>\n", styles: [".rtsee-controls{display:
|
|
40
|
+
RTSeeControlsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.2", type: RTSeeControlsComponent, selector: "ngx-rtsee-controls", inputs: { rtsee: "rtsee", fullScreenMode: "fullScreenMode" }, ngImport: i0, template: "<div class=\"rtsee-controls\" [ngClass]=\"{'rtsee-full-screen-controls' : fullScreenMode }\">\n <div class=\"rtsee-bottom-panel\">\n <div class=\"mic rtsee-buttons-container\">\n <button mat-icon-button matSuffix\n class=\"rtsee-ripple-button\"\n *ngIf=\"rtsee.microphone\"\n type=\"button\"\n (click)=\"this.rtsee.disableMicrophone()\"\n >\n <span class=\"material-icons-outlined\">mic_none</span>\n </button>\n <button mat-icon-button matSuffix\n class=\"rtsee-ripple-button\"\n *ngIf=\"!rtsee.microphone\"\n type=\"button\" (click)=\"this.rtsee.enableMicrophone()\"\n >\n <span class=\"material-icons-outlined\">mic_off</span>\n </button>\n </div>\n\n <div class=\"video-camera rtsee-buttons-container\">\n <button mat-icon-button matSuffix\n class=\"rtsee-ripple-button\"\n *ngIf=\"rtsee.camera\"\n type=\"button\"\n (click)=\"rtsee.disableCamera()\"\n >\n <span class=\"material-icons-outlined\">videocam</span>\n </button>\n <button mat-icon-button matSuffix\n class=\"rtsee-ripple-button\"\n *ngIf=\"!rtsee.camera\"\n type=\"button\"\n (click)=\"rtsee.enableCamera()\"\n >\n <span class=\"material-icons-outlined\">videocam_off</span>\n </button>\n </div>\n <div class=\"present rtsee-buttons-container\" [ngClass]=\"{'rtsee-present-button-container': rtsee.isPresenter}\">\n <button mat-icon-button matSuffix\n class=\"rtsee-ripple-button\"\n type=\"button\"\n (click)=\"onPresentClicked()\"\n >\n <span class=\"material-icons-outlined\">present_to_all</span>\n </button>\n </div>\n <div class=\"call-end rtsee-buttons-container\">\n <button mat-icon-button matSuffix\n class=\"rtsee-ripple-button\"\n type=\"button\"\n (click)=\"rtsee.end()\"\n >\n <span class=\"material-icons-outlined\">call_end</span>\n </button>\n </div>\n </div>\n</div>\n", styles: [".rtsee-controls{display:inline-block;height:100%}.rtsee-controls .rtsee-buttons-container{height:35px;width:35px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 6px;cursor:pointer}.rtsee-controls .rtsee-buttons-container:last-child{margin-right:0}.rtsee-controls .rtsee-buttons-container:first-child{margin-left:0}.rtsee-controls .rtsee-buttons-container .mat-icon-button{background-color:#333;color:#fff}.rtsee-controls .rtsee-buttons-container.call-end .mat-icon-button{background-color:red}.rtsee-controls .rtsee-buttons-container.rtsee-present-button-container .mat-icon-button{background-color:#090}.rtsee-controls .full-screen{align-self:flex-end;padding:12px;cursor:pointer}.rtsee-controls .rtsee-bottom-panel{padding:12px;display:flex;justify-content:center;align-items:center;border-radius:45px;background-color:rgba(0,0,0,.7)}.rtsee-controls.rtsee-full-screen-controls .rtsee-buttons-container{height:60px;width:60px}"], components: [{ type: i1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.MatSuffix, selector: "[matSuffix]" }] });
|
|
37
41
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0, type: RTSeeControlsComponent, decorators: [{
|
|
38
42
|
type: Component,
|
|
39
43
|
args: [{
|
|
@@ -71,7 +75,7 @@ class RtseeSettingsComponent {
|
|
|
71
75
|
}
|
|
72
76
|
}
|
|
73
77
|
RtseeSettingsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0, type: RtseeSettingsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
74
|
-
RtseeSettingsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.2", 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\" id=\"audio-input\" (click)=\"refreshSelectOptions()\">\n <option *ngFor=\"let device of rtSee.audioInputDevices\" [value]=\"device.deviceId\" (click)=\"setAudioInput(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 class=\"rtsee-select\" id=\"audio-output\" (click)=\"refreshSelectOptions()\">\n <option *ngFor=\"let device of rtSee.audioOutputDevices\" [value]=\"device.deviceId\" (click)=\"setAudioOutput(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 class=\"rtsee-select\" id=\"video-input\" (click)=\"refreshSelectOptions()\">\n <option *ngFor=\"let device of rtSee.videoInputDevices\" [value]=\"device.deviceId\" (click)=\"setVideoInput(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}"], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
|
|
78
|
+
RtseeSettingsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.2", 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\" id=\"audio-input\" (click)=\"refreshSelectOptions()\">\n <option *ngFor=\"let device of rtSee.audioInputDevices\" [value]=\"device.deviceId\" (click)=\"setAudioInput(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 class=\"rtsee-select\" id=\"audio-output\" (click)=\"refreshSelectOptions()\">\n <option *ngFor=\"let device of rtSee.audioOutputDevices\" [value]=\"device.deviceId\" (click)=\"setAudioOutput(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 class=\"rtsee-select\" id=\"video-input\" (click)=\"refreshSelectOptions()\">\n <option *ngFor=\"let device of rtSee.videoInputDevices\" [value]=\"device.deviceId\" (click)=\"setVideoInput(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}"], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i2$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }] });
|
|
75
79
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0, type: RtseeSettingsComponent, decorators: [{
|
|
76
80
|
type: Component,
|
|
77
81
|
args: [{
|
|
@@ -153,7 +157,7 @@ class RtseePeerComponent {
|
|
|
153
157
|
}
|
|
154
158
|
}
|
|
155
159
|
RtseePeerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0, type: RtseePeerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
156
|
-
RtseePeerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.2", type: RtseePeerComponent, selector: "ngx-rtsee-peer", inputs: { peer: "peer"
|
|
160
|
+
RtseePeerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.2", type: RtseePeerComponent, selector: "ngx-rtsee-peer", inputs: { peer: "peer" }, viewQueries: [{ propertyName: "audioOutput", first: true, predicate: ["audioOutput"], descendants: true }, { propertyName: "videoOutput", first: true, predicate: ["videoOutput"], descendants: true }], ngImport: i0, template: "<div class=\"rtsee-peer\" [ngClass]=\"{\n'rtsee-peer-video-disabled': !peer.remoteVideoStream || !peer.camera\n}\">\n <div class=\"rtsee-peer-content\">\n <div class=\"rtsee-peer-photo\" *ngIf=\"!peer.camera\">\n <div class=\"rtsee-peer-photo-wrapper\">\n <div *ngIf=\"peer.imageUrl\"\n [style.background-image]=\"'url(' + peer.imageUrl + ')'\"\n class=\"rtsee-peer-photo-image\"\n ></div>\n <img *ngIf=\"!peer.imageUrl\" [src]=\"\" alt=\"peer_photo\" class=\"rtsee-peer-photo-image\">\n </div>\n <div class=\"rtsee-peer-info\">\n <p class=\"rtsee-peer-name\" *ngIf=\"peer.name\">{{peer.name}}</p>\n </div>\n </div>\n <video #videoOutput\n class=\"rtsee-peer-video\"\n [autoplay]=\"true\"\n [srcObject]=\"peer.remoteVideoStream\"\n playsinline=\"true\"\n >\n </video>\n <div class=\"rtsee-peer-soundbar\">\n <ngx-rtsee-soundbar [peer]=\"peer\"></ngx-rtsee-soundbar>\n </div>\n </div>\n</div>\n", styles: [".rtsee-peer{height:100%;width:100%;overflow:hidden}.rtsee-peer .rtsee-peer-content{height:100%;text-align:center;background-color:#404040;border-radius:4px}.rtsee-peer .rtsee-peer-content .rtsee-peer-photo .rtsee-peer-photo-wrapper{display:inline-block;height:120px;width:120px;border-radius:50%;position:relative;border:0 solid #fff}.rtsee-peer .rtsee-peer-content .rtsee-peer-photo .rtsee-peer-photo-wrapper .rtsee-peer-photo-image{border:0 solid #fff;height:100%;left:0;background-size:cover;border-radius:50%}.rtsee-peer .rtsee-peer-content .rtsee-peer-info{color:#fff}.rtsee-peer .rtsee-peer-content .rtsee-peer-info .rtsee-peer-name{font-family:monospace;padding:8px 0 0;margin-top:-8px}.rtsee-peer .rtsee-peer-content .rtsee-peer-soundbar{position:absolute;right:16px;bottom:16px;background:#404040;padding:7px 6px 8px;border-radius:50%;border:1px solid}.rtsee-peer .rtsee-peer-video{height:100%;max-width:100%}.rtsee-peer.rtsee-peer-video-disabled .rtsee-peer-video{position:absolute;left:-3000px}"], components: [{ type: RtseeSoundbarComponent, selector: "ngx-rtsee-soundbar", inputs: ["peer"] }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
157
161
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0, type: RtseePeerComponent, decorators: [{
|
|
158
162
|
type: Component,
|
|
159
163
|
args: [{
|
|
@@ -169,8 +173,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.2", ngImpor
|
|
|
169
173
|
args: ['videoOutput']
|
|
170
174
|
}], peer: [{
|
|
171
175
|
type: Input
|
|
172
|
-
}], fullScreenMode: [{
|
|
173
|
-
type: Input
|
|
174
176
|
}] } });
|
|
175
177
|
|
|
176
178
|
class RTSeeComponent {
|
|
@@ -186,7 +188,7 @@ class RTSeeComponent {
|
|
|
186
188
|
}
|
|
187
189
|
}
|
|
188
190
|
RTSeeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0, type: RTSeeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
189
|
-
RTSeeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.2", type: RTSeeComponent, selector: "ngx-rtsee", inputs: { rtSee: "rtSee" }, ngImport: i0, template: "<div class=\"rtsee-shell\" [ngClass]=\"{\n'rtsee-shell-expanded': rtSee.uiControls.isExpanded || fullScreenModeEnabled,\n'rtsee-shell-no-companions': !rtSee.rtcPeerConnections.connections?.length\n}\">\n <div class=\"rtsee-local-peer\" *ngIf=\"rtSee.localStream && rtSee.camera\">\n <video class=\"rtsee-local-video\"\n [autoplay]=\"true\"\n [muted]=\"true\"\n [srcObject]=\"rtSee.localStream\"\n playsinline=\"true\"\n ></video>\n </div>\n <div class=\"rtsee-window-controls\">\n <button mat-icon-button matSuffix\n type=\"button\"\n (click)=\"this.toggleSettings()\"\n class=\"rtsee-window-controls-button rtsee-ripple-button\"\n >\n <span class=\"material-icons-outlined\">settings</span>\n </button>\n <button mat-icon-button matSuffix\n type=\"button\"\n (click)=\"this.toggleFullScreenMode()\"\n class=\"rtsee-window-controls-button rtsee-ripple-button\"\n >\n <span class=\"material-icons-outlined\">open_in_full</span>\n </button>\n </div>\n <div class=\"rtsee-settings-container\" *ngIf=\"settingsViewEnabled\">\n <button mat-icon-button matSuffix\n type=\"button\"\n (click)=\"this.toggleSettings()\"\n class=\"rtsee-close-settings-button\"\n >\n <span class=\"material-icons-outlined\">close</span>\n </button>\n <ngx-rtsee-settings [rtSee]=\"rtSee\" [fullScreenMode]=\"fullScreenModeEnabled\"></ngx-rtsee-settings>\n </div>\n <div class=\"rtsee-screen-share\" *ngIf=\"rtSee.screenSharePeer\" >\n <video [autoplay]=\"true\"\n [muted]=\"true\"\n [srcObject]=\"rtSee.screenSharePeer.remoteVideoStream\"\n playsinline=\"true\"\n class=\"rtsee-screen-share-video\"\n ></video>\n </div>\n <div class=\"rtsee-peers\">\n <div class=\"rtsee-peer-wrapper\"\n *ngFor=\"let peer of rtSee.rtcPeerConnections.connections\"\n
|
|
191
|
+
RTSeeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.2", type: RTSeeComponent, selector: "ngx-rtsee", inputs: { rtSee: "rtSee" }, ngImport: i0, template: "<div class=\"rtsee-shell\" [ngClass]=\"{\n'rtsee-shell-expanded': rtSee.uiControls.isExpanded || fullScreenModeEnabled,\n'rtsee-shell-no-companions': !rtSee.rtcPeerConnections.connections?.length\n}\">\n <div class=\"rtsee-local-peer\" *ngIf=\"rtSee.localStream && rtSee.camera\">\n <video class=\"rtsee-local-video\"\n [autoplay]=\"true\"\n [muted]=\"true\"\n [srcObject]=\"rtSee.localStream\"\n playsinline=\"true\"\n ></video>\n </div>\n <div class=\"rtsee-window-controls\">\n <button mat-icon-button matSuffix\n type=\"button\"\n (click)=\"this.toggleSettings()\"\n class=\"rtsee-window-controls-button rtsee-ripple-button\"\n >\n <span class=\"material-icons-outlined\">settings</span>\n </button>\n <button mat-icon-button matSuffix\n type=\"button\"\n (click)=\"this.toggleFullScreenMode()\"\n class=\"rtsee-window-controls-button rtsee-ripple-button\"\n >\n <span class=\"material-icons-outlined\">open_in_full</span>\n </button>\n </div>\n <div class=\"rtsee-settings-container\" *ngIf=\"settingsViewEnabled\">\n <button mat-icon-button matSuffix\n type=\"button\"\n (click)=\"this.toggleSettings()\"\n class=\"rtsee-close-settings-button\"\n >\n <span class=\"material-icons-outlined\">close</span>\n </button>\n <ngx-rtsee-settings [rtSee]=\"rtSee\" [fullScreenMode]=\"fullScreenModeEnabled\"></ngx-rtsee-settings>\n </div>\n <div class=\"rtsee-screen-share\" *ngIf=\"rtSee.screenSharePeer\" >\n <video [autoplay]=\"true\"\n [muted]=\"true\"\n [srcObject]=\"rtSee.screenSharePeer.remoteVideoStream\"\n playsinline=\"true\"\n class=\"rtsee-screen-share-video\"\n ></video>\n </div>\n <div class=\"rtsee-peers\" [ngClass]=\"{\n 'rtsee-peers-alone': !rtSee.rtcPeerConnections.connections?.length,\n 'rtsee-peers-one': rtSee.rtcPeerConnections.connections?.length === 1,\n 'rtsee-peers-three-grid': rtSee.rtcPeerConnections.connections?.length\n && rtSee.rtcPeerConnections.connections.length > 1\n && rtSee.rtcPeerConnections.connections.length < 4,\n 'rtsee-peers-six-grid': rtSee.rtcPeerConnections.connections?.length\n && rtSee.rtcPeerConnections.connections.length > 3\n && rtSee.rtcPeerConnections.connections.length < 7,\n 'rtsee-peers-nine-grid': rtSee.rtcPeerConnections.connections?.length\n && rtSee.rtcPeerConnections.connections.length >= 7\n }\">\n <div class=\"rtsee-peer-wrapper\"\n *ngFor=\"let peer of rtSee.rtcPeerConnections.connections\"\n >\n <ngx-rtsee-peer [peer]=\"peer\"></ngx-rtsee-peer>\n </div>\n </div>\n <div class=\"rtsee-peers-list\"></div>\n <div class=\"rtsee-controls-wrapper\">\n <ngx-rtsee-controls [rtsee]=\"rtSee\" [fullScreenMode]=\"fullScreenModeEnabled\"></ngx-rtsee-controls>\n </div>\n</div>\n\n", styles: [".rtsee-shell{position:fixed;z-index:10;right:16px;bottom:16px;background-color:#333;width:100%;max-width:320px;height:240px;overflow:hidden;border-radius:8px}.rtsee-shell:hover .rtsee-controls-wrapper{bottom:8px}.rtsee-shell:hover .rtsee-window-controls{top:8px}.rtsee-shell .rtsee-local-peer{position:absolute;top:8px;left:8px;width:80px;height:60px;text-align:center}.rtsee-shell .rtsee-local-peer .rtsee-local-video{height:100%;max-width:100%;border-radius:8px}.rtsee-shell .rtsee-screen-share{height:100%}.rtsee-shell .rtsee-screen-share .rtsee-screen-share-video{width:100%;height:calc(100% - 50px)}.rtsee-shell .rtsee-peers{height:100%}.rtsee-shell .rtsee-peers .rtsee-peer-wrapper{padding:8px;box-sizing:border-box;height:100%}.rtsee-shell .rtsee-peers .rtsee-peer-wrapper .rtsee-peer{position:relative}.rtsee-shell .rtsee-peers .rtsee-peer-wrapper .rtsee-peer ::ng-deep .rtsee-peer-video{border-radius:8px}.rtsee-shell .rtsee-controls-wrapper{height:60px;width:100%;position:absolute;left:0;bottom:-60px;transition:bottom .1s;text-align:center}.rtsee-shell .rtsee-window-controls{position:absolute;top:-60px;right:8px;transition:top .1s;z-index:4}.rtsee-shell .rtsee-window-controls .rtsee-window-controls-button{margin-left:8px;background-color:rgba(0,0,0,.7);color:#fff}.rtsee-shell .rtsee-settings-container{position:absolute;top:0;right:0;bottom:0;left:0;overflow:auto;z-index:4}.rtsee-shell.rtsee-shell-no-companions .rtsee-local-peer{box-sizing:border-box;padding:8px;height:100%;width:100%;top:0;bottom:0;left:0}.rtsee-shell .rtsee-close-settings-button{position:absolute;right:25px;top:5px;width:30px;height:30px;line-height:30px}.rtsee-shell.rtsee-shell-expanded{position:absolute;border-radius:0;max-width:unset;height:unset;width:unset;bottom:0;right:0;left:0;top: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:50%;transition:background .2s;outline:none}::ng-deep .rtsee-ripple-button:hover{background:hsla(0,0%,96%,.1) radial-gradient(circle,transparent 1%,hsla(0,0%,96%,.1) 0) 50%/15000%}::ng-deep .rtsee-ripple-button:active{background-size:100%;transition:background 0s}::ng-deep .rtsee-select{padding:8px;border-radius:4px;width:100%;outline:none}::ng-deep .material-icons-outlined{font-size:18px}::ng-deep .rtsee-shell.rtsee-shell-expanded .material-icons-outlined{font-size:24px}::ng-deep .rtsee-shell.rtsee-shell-expanded .rtsee-ripple-button{height:60px;width:60px;line-height:60px}"], components: [{ type: i1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: RtseeSettingsComponent, selector: "ngx-rtsee-settings", inputs: ["rtSee", "fullScreenMode"] }, { type: RtseePeerComponent, selector: "ngx-rtsee-peer", inputs: ["peer"] }, { type: RTSeeControlsComponent, selector: "ngx-rtsee-controls", inputs: ["rtsee", "fullScreenMode"] }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.MatSuffix, selector: "[matSuffix]" }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
|
|
190
192
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0, type: RTSeeComponent, decorators: [{
|
|
191
193
|
type: Component,
|
|
192
194
|
args: [{
|
|
@@ -198,6 +200,215 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.2", ngImpor
|
|
|
198
200
|
type: Input
|
|
199
201
|
}] } });
|
|
200
202
|
|
|
203
|
+
class MessengerHeaderComponent {
|
|
204
|
+
}
|
|
205
|
+
MessengerHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0, type: MessengerHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
206
|
+
MessengerHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.2", type: MessengerHeaderComponent, selector: "ngx-messenger-header", inputs: { messenger: "messenger" }, ngImport: i0, template: "<div class=\"rtsee-messenger-header\">\n <button *ngIf=\"messenger.openedChat\" (click)=\"messenger.closeChat()\">Back</button>\n <p class=\"title\" *ngIf=\"!messenger.openedChat\">Wessenger</p>\n <p class=\"title\" *ngIf=\"messenger.openedChat\">{{ messenger.openedChat.name }}</p>\n</div>\n", styles: [""], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
207
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0, type: MessengerHeaderComponent, decorators: [{
|
|
208
|
+
type: Component,
|
|
209
|
+
args: [{
|
|
210
|
+
selector: 'ngx-messenger-header',
|
|
211
|
+
templateUrl: './messenger-header.component.html',
|
|
212
|
+
styleUrls: ['./messenger-header.component.css'],
|
|
213
|
+
}]
|
|
214
|
+
}], propDecorators: { messenger: [{
|
|
215
|
+
type: Input
|
|
216
|
+
}] } });
|
|
217
|
+
|
|
218
|
+
class ChatThumbnailComponent {
|
|
219
|
+
}
|
|
220
|
+
ChatThumbnailComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0, type: ChatThumbnailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
221
|
+
ChatThumbnailComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.2", type: ChatThumbnailComponent, selector: "ngx-chat-thumbnail", inputs: { chat: "chat", messenger: "messenger" }, ngImport: i0, template: "<div class=\"rtsee-chat-thumbnail\" (click)=\"messenger.openChat(chat)\">\n <div class=\"rtsee-chat-thumbnail-image\">\n <img [src]=\"chat.imageUrl\">\n </div>\n <p class=\"rtsee-chat-thumbnail-name\">{{ chat.name }}</p>\n <p class=\"rtsee-chat-thumbnail-last-message\"> {{ chat.getLastSenderName() }} </p>\n <p class=\"rtsee-chat-thumbnail-last-message\"> {{ chat.getLastSentMessageText() }} </p>\n</div>\n", styles: [""] });
|
|
222
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0, type: ChatThumbnailComponent, decorators: [{
|
|
223
|
+
type: Component,
|
|
224
|
+
args: [{
|
|
225
|
+
selector: 'ngx-chat-thumbnail',
|
|
226
|
+
templateUrl: './chat-thumbnail.component.html',
|
|
227
|
+
styleUrls: ['./chat-thumbnail.component.css'],
|
|
228
|
+
}]
|
|
229
|
+
}], propDecorators: { chat: [{
|
|
230
|
+
type: Input
|
|
231
|
+
}], messenger: [{
|
|
232
|
+
type: Input
|
|
233
|
+
}] } });
|
|
234
|
+
|
|
235
|
+
class ChatsListComponent {
|
|
236
|
+
ngOnInit() {
|
|
237
|
+
console.log(this.chats);
|
|
238
|
+
}
|
|
239
|
+
}
|
|
240
|
+
ChatsListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0, type: ChatsListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
241
|
+
ChatsListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.2", type: ChatsListComponent, selector: "ngx-chats-list", inputs: { messenger: "messenger", chats: "chats" }, ngImport: i0, template: "<div class=\"rtsee-chats-list\">\n <div class=\"rtsee-chat-thumbnail-container\" *ngFor=\"let chat of chats; let last = last;\">\n <ngx-chat-thumbnail [chat]=\"chat\" [messenger]=\"messenger\"></ngx-chat-thumbnail>\n <div class=\"rtsee-chat-separator\"></div>\n </div>\n</div>\n", styles: [".rtsee-chat-separator{width:100%;color:#fff;height:1px;opacity:.7}"], components: [{ type: ChatThumbnailComponent, selector: "ngx-chat-thumbnail", inputs: ["chat", "messenger"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
|
|
242
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0, type: ChatsListComponent, decorators: [{
|
|
243
|
+
type: Component,
|
|
244
|
+
args: [{
|
|
245
|
+
selector: 'ngx-chats-list',
|
|
246
|
+
templateUrl: './chats-list.component.html',
|
|
247
|
+
styleUrls: ['./chats-list.component.css'],
|
|
248
|
+
}]
|
|
249
|
+
}], propDecorators: { messenger: [{
|
|
250
|
+
type: Input
|
|
251
|
+
}], chats: [{
|
|
252
|
+
type: Input
|
|
253
|
+
}] } });
|
|
254
|
+
|
|
255
|
+
class MessageComponent {
|
|
256
|
+
}
|
|
257
|
+
MessageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0, type: MessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
258
|
+
MessageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.2", type: MessageComponent, selector: "ngx-message", inputs: { message: "message", member: "member" }, ngImport: i0, template: "<div class=\"rtsee-messenger-message\">\n <p>{{ message.text }}</p>\n</div>\n", styles: [""] });
|
|
259
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0, type: MessageComponent, decorators: [{
|
|
260
|
+
type: Component,
|
|
261
|
+
args: [{
|
|
262
|
+
selector: 'ngx-message',
|
|
263
|
+
templateUrl: './message.component.html',
|
|
264
|
+
styleUrls: ['./message.component.css'],
|
|
265
|
+
}]
|
|
266
|
+
}], propDecorators: { message: [{
|
|
267
|
+
type: Input
|
|
268
|
+
}], member: [{
|
|
269
|
+
type: Input
|
|
270
|
+
}] } });
|
|
271
|
+
|
|
272
|
+
class MessagesListComponent {
|
|
273
|
+
}
|
|
274
|
+
MessagesListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0, type: MessagesListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
275
|
+
MessagesListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.2", type: MessagesListComponent, selector: "ngx-messages-list", inputs: { chat: "chat", messenger: "messenger" }, ngImport: i0, template: "<div class=\"rtsee-messenger-messages-list\">\n <div class=\"rtsee-messenger-message\" *ngFor=\"let message of chat.messages\">\n <ngx-message [message]=\"message\"></ngx-message>\n </div>\n</div>\n", styles: [""], components: [{ type: MessageComponent, selector: "ngx-message", inputs: ["message", "member"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
|
|
276
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0, type: MessagesListComponent, decorators: [{
|
|
277
|
+
type: Component,
|
|
278
|
+
args: [{
|
|
279
|
+
selector: 'ngx-messages-list',
|
|
280
|
+
templateUrl: './messages-list.component.html',
|
|
281
|
+
styleUrls: ['./messages-list.component.css'],
|
|
282
|
+
}]
|
|
283
|
+
}], propDecorators: { chat: [{
|
|
284
|
+
type: Input
|
|
285
|
+
}], messenger: [{
|
|
286
|
+
type: Input
|
|
287
|
+
}] } });
|
|
288
|
+
|
|
289
|
+
class ChatInputComponent {
|
|
290
|
+
constructor() {
|
|
291
|
+
this.sendMessageForm = new FormGroup({
|
|
292
|
+
/* eslint-disable */
|
|
293
|
+
message: new FormControl('', Validators.required),
|
|
294
|
+
/* eslint-enable */
|
|
295
|
+
});
|
|
296
|
+
}
|
|
297
|
+
sendMessage() {
|
|
298
|
+
var _a, _b;
|
|
299
|
+
const text = (_a = this.sendMessageForm.get('message')) === null || _a === void 0 ? void 0 : _a.value;
|
|
300
|
+
if (!text) {
|
|
301
|
+
return;
|
|
302
|
+
}
|
|
303
|
+
this.chat.sendMessage(text);
|
|
304
|
+
(_b = this.sendMessageForm.get('message')) === null || _b === void 0 ? void 0 : _b.setValue('');
|
|
305
|
+
}
|
|
306
|
+
}
|
|
307
|
+
ChatInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0, type: ChatInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
308
|
+
ChatInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.2", type: ChatInputComponent, selector: "ngx-chat-input", inputs: { messenger: "messenger", chat: "chat" }, ngImport: i0, template: "<div class=\"rtsee-chat-input\">\n <div class=\"rtsee-send-message\">\n <form [formGroup]=\"sendMessageForm\">\n <input placeholder=\"Type message...\" type=\"text\" formControlName=\"message\" required>\n <button mat-raised-button\n (click)=\"sendMessage()\"\n class=\"rtsee-send-message-button\"\n type=\"submit\">\n <span>Send</span>\n </button>\n </form>\n </div>\n</div>\n", styles: [""], components: [{ type: i1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { 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]" }, { type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }, { type: i2$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }] });
|
|
309
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0, type: ChatInputComponent, decorators: [{
|
|
310
|
+
type: Component,
|
|
311
|
+
args: [{
|
|
312
|
+
selector: 'ngx-chat-input',
|
|
313
|
+
templateUrl: './chat-input.component.html',
|
|
314
|
+
styleUrls: ['./chat-input.component.css'],
|
|
315
|
+
}]
|
|
316
|
+
}], propDecorators: { messenger: [{
|
|
317
|
+
type: Input
|
|
318
|
+
}], chat: [{
|
|
319
|
+
type: Input
|
|
320
|
+
}] } });
|
|
321
|
+
|
|
322
|
+
class ChatComponent {
|
|
323
|
+
}
|
|
324
|
+
ChatComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0, type: ChatComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
325
|
+
ChatComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.2", type: ChatComponent, selector: "ngx-chat", inputs: { chat: "chat", messenger: "messenger" }, ngImport: i0, template: "<div class=\"rtsee-chat\">\n <div class=\"rtsee-chat-body-container\">\n <ngx-messages-list [messenger]=\"messenger\" [chat]=\"chat\"></ngx-messages-list>\n </div>\n <div class=\"input-container\">\n <ngx-chat-input [messenger]=\"messenger\" [chat]=\"chat\"></ngx-chat-input>\n </div>\n</div>\n", styles: [""], components: [{ type: MessagesListComponent, selector: "ngx-messages-list", inputs: ["chat", "messenger"] }, { type: ChatInputComponent, selector: "ngx-chat-input", inputs: ["messenger", "chat"] }] });
|
|
326
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0, type: ChatComponent, decorators: [{
|
|
327
|
+
type: Component,
|
|
328
|
+
args: [{
|
|
329
|
+
selector: 'ngx-chat',
|
|
330
|
+
templateUrl: './chat.component.html',
|
|
331
|
+
styleUrls: ['./chat.component.css'],
|
|
332
|
+
}]
|
|
333
|
+
}], propDecorators: { chat: [{
|
|
334
|
+
type: Input
|
|
335
|
+
}], messenger: [{
|
|
336
|
+
type: Input
|
|
337
|
+
}] } });
|
|
338
|
+
|
|
339
|
+
class MessengerComponent {
|
|
340
|
+
}
|
|
341
|
+
MessengerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0, type: MessengerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
342
|
+
MessengerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.2", type: MessengerComponent, selector: "ngx-messenger", inputs: { messenger: "messenger" }, ngImport: i0, template: "<div class=\"rtsee-messenger\">\n <div class=\"rtsee-messenger-header-container\">\n <ngx-messenger-header [messenger]=\"messenger\"></ngx-messenger-header>\n </div>\n <div class=\"rtsee-messenger-body-container\">\n <ngx-chats-list *ngIf=\"!messenger.openedChat\" [chats]=\"messenger.chats\" [messenger]=\"messenger\"></ngx-chats-list>\n <ngx-chat *ngIf=\"messenger.openedChat\" [messenger]=\"messenger\" [chat]=\"messenger.openedChat\"></ngx-chat>\n </div>\n</div>\n\n\n", styles: ["*{box-sizing:border-box}.rtsee-messenger{max-width:450px;background-color:#333;min-width:320px;min-height:520px;padding:58px 8px 8px;color:#fff;position:relative;border-radius:8px;overflow:hidden}.rtsee-messenger .rtsee-messenger-header-container{position:absolute;top:0;left:0;width:100%;height:50px}"], components: [{ type: MessengerHeaderComponent, selector: "ngx-messenger-header", inputs: ["messenger"] }, { type: ChatsListComponent, selector: "ngx-chats-list", inputs: ["messenger", "chats"] }, { type: ChatComponent, selector: "ngx-chat", inputs: ["chat", "messenger"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
343
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0, type: MessengerComponent, decorators: [{
|
|
344
|
+
type: Component,
|
|
345
|
+
args: [{
|
|
346
|
+
selector: 'ngx-messenger',
|
|
347
|
+
templateUrl: './messenger.component.html',
|
|
348
|
+
styleUrls: ['./messenger.component.scss'],
|
|
349
|
+
}]
|
|
350
|
+
}], propDecorators: { messenger: [{
|
|
351
|
+
type: Input
|
|
352
|
+
}] } });
|
|
353
|
+
|
|
354
|
+
dayjs.extend(relativeTime);
|
|
355
|
+
class TimeFormatHelperService {
|
|
356
|
+
toAgo(time) {
|
|
357
|
+
/* eslint-disable */
|
|
358
|
+
return dayjs(time).fromNow();
|
|
359
|
+
/* eslint-enable */
|
|
360
|
+
}
|
|
361
|
+
}
|
|
362
|
+
TimeFormatHelperService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0, type: TimeFormatHelperService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
363
|
+
TimeFormatHelperService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0, type: TimeFormatHelperService, providedIn: 'root' });
|
|
364
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0, type: TimeFormatHelperService, decorators: [{
|
|
365
|
+
type: Injectable,
|
|
366
|
+
args: [{
|
|
367
|
+
providedIn: 'root',
|
|
368
|
+
}]
|
|
369
|
+
}] });
|
|
370
|
+
|
|
371
|
+
class RtseeEventsDashboardClientThumbnailComponent {
|
|
372
|
+
constructor(timeFormatService) {
|
|
373
|
+
this.timeFormatService = timeFormatService;
|
|
374
|
+
}
|
|
375
|
+
ngOnInit() {
|
|
376
|
+
console.log(this.client);
|
|
377
|
+
}
|
|
378
|
+
openChat() {
|
|
379
|
+
this.dashboard.openChat(this.client);
|
|
380
|
+
}
|
|
381
|
+
}
|
|
382
|
+
RtseeEventsDashboardClientThumbnailComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0, type: RtseeEventsDashboardClientThumbnailComponent, deps: [{ token: TimeFormatHelperService }], target: i0.ɵɵFactoryTarget.Component });
|
|
383
|
+
RtseeEventsDashboardClientThumbnailComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.2", type: RtseeEventsDashboardClientThumbnailComponent, selector: "ngx-rtsee-events-dashboard-client-thumbnail", inputs: { dashboard: "dashboard", client: "client" }, ngImport: i0, template: "<div class=\"rtsee-dashboard-client-thumbnail\">\n <p>{{ client.id }}</p>\n <p>{{ client.name || client.id }}</p>\n <div class=\"rtsee-dashboard-client-thumbnail-events\">\n <div class=\"rtsee-dashboard-client-thumbnail-event\"\n *ngFor=\"let event of client.events\">\n <p>\n <span>{{event.name}}</span>\n <span> </span>\n <span>{{ timeFormatService.toAgo(event.createdAt) }}</span>\n </p>\n </div>\n <div class=\"rtsee-dashboard-client-thumbnail-actions\">\n <button (click)=\"openChat()\">Chat</button>\n </div>\n </div>\n</div>\n", styles: [""], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
|
|
384
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0, type: RtseeEventsDashboardClientThumbnailComponent, decorators: [{
|
|
385
|
+
type: Component,
|
|
386
|
+
args: [{
|
|
387
|
+
selector: 'ngx-rtsee-events-dashboard-client-thumbnail',
|
|
388
|
+
templateUrl: './rtsee-events-dashboard-client-thumbnail.component.html',
|
|
389
|
+
styleUrls: ['./rtsee-events-dashboard-client-thumbnail.component.scss'],
|
|
390
|
+
}]
|
|
391
|
+
}], ctorParameters: function () { return [{ type: TimeFormatHelperService }]; }, propDecorators: { dashboard: [{
|
|
392
|
+
type: Input
|
|
393
|
+
}], client: [{
|
|
394
|
+
type: Input
|
|
395
|
+
}] } });
|
|
396
|
+
|
|
397
|
+
class RtseeEventsDashboardComponent {
|
|
398
|
+
}
|
|
399
|
+
RtseeEventsDashboardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0, type: RtseeEventsDashboardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
400
|
+
RtseeEventsDashboardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.2", type: RtseeEventsDashboardComponent, selector: "ngx-rtsee-events-dashboard", inputs: { eventsDashboard: "eventsDashboard" }, ngImport: i0, template: "<div class=\"rtsee-events-dashboard\">\n <div class=\"rtsee-events-dashboard-client-thumbnails\">\n <div class=\"rtsee-events-dashboard-client-thumbnail-wrapper\"\n *ngFor=\"let client of eventsDashboard.clients\">\n <ngx-rtsee-events-dashboard-client-thumbnail\n [client]=\"client\"\n [dashboard]=\"eventsDashboard\"\n ></ngx-rtsee-events-dashboard-client-thumbnail>\n </div>\n </div>\n</div>\n", styles: [".rtsee-events-dashboard{background-color:#333;padding:16px}.rtsee-events-dashboard .rtsee-events-dashboard-client-thumbnails .rtsee-events-dashboard-client-thumbnail-wrapper{background-color:#fff;margin-bottom:16px}"], components: [{ type: RtseeEventsDashboardClientThumbnailComponent, selector: "ngx-rtsee-events-dashboard-client-thumbnail", inputs: ["dashboard", "client"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
|
|
401
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0, type: RtseeEventsDashboardComponent, decorators: [{
|
|
402
|
+
type: Component,
|
|
403
|
+
args: [{
|
|
404
|
+
selector: 'ngx-rtsee-events-dashboard',
|
|
405
|
+
templateUrl: './rtsee-events-dashboard.component.html',
|
|
406
|
+
styleUrls: ['./rtsee-events-dashboard.component.scss'],
|
|
407
|
+
}]
|
|
408
|
+
}], propDecorators: { eventsDashboard: [{
|
|
409
|
+
type: Input
|
|
410
|
+
}] } });
|
|
411
|
+
|
|
201
412
|
class RtseePeersListComponent {
|
|
202
413
|
}
|
|
203
414
|
RtseePeersListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0, type: RtseePeersListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
@@ -211,6 +422,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.2", ngImpor
|
|
|
211
422
|
}]
|
|
212
423
|
}] });
|
|
213
424
|
|
|
425
|
+
class RtseeEventsDashboardClientComponent {
|
|
426
|
+
}
|
|
427
|
+
RtseeEventsDashboardClientComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0, type: RtseeEventsDashboardClientComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
428
|
+
RtseeEventsDashboardClientComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.2", type: RtseeEventsDashboardClientComponent, selector: "ngx-rtsee-events-dashboard-client", ngImport: i0, template: "<p>rtsee-events-dashboard-client works!</p>\n", styles: [""] });
|
|
429
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0, type: RtseeEventsDashboardClientComponent, decorators: [{
|
|
430
|
+
type: Component,
|
|
431
|
+
args: [{
|
|
432
|
+
selector: 'ngx-rtsee-events-dashboard-client',
|
|
433
|
+
templateUrl: './rtsee-events-dashboard-client.component.html',
|
|
434
|
+
styleUrls: ['./rtsee-events-dashboard-client.component.css'],
|
|
435
|
+
}]
|
|
436
|
+
}] });
|
|
437
|
+
|
|
214
438
|
class RTSeeModule {
|
|
215
439
|
}
|
|
216
440
|
RTSeeModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0, type: RTSeeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
@@ -219,12 +443,24 @@ RTSeeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "1
|
|
|
219
443
|
RtseePeerComponent,
|
|
220
444
|
RtseeSoundbarComponent,
|
|
221
445
|
RtseePeersListComponent,
|
|
222
|
-
RtseeSettingsComponent
|
|
446
|
+
RtseeSettingsComponent,
|
|
447
|
+
MessengerComponent,
|
|
448
|
+
ChatComponent,
|
|
449
|
+
MessageComponent,
|
|
450
|
+
ChatsListComponent,
|
|
451
|
+
MessagesListComponent,
|
|
452
|
+
ChatThumbnailComponent,
|
|
453
|
+
ChatInputComponent,
|
|
454
|
+
MessengerHeaderComponent,
|
|
455
|
+
RtseeEventsDashboardComponent,
|
|
456
|
+
RtseeEventsDashboardClientComponent,
|
|
457
|
+
RtseeEventsDashboardClientThumbnailComponent], imports: [CommonModule,
|
|
223
458
|
MatIconModule,
|
|
224
459
|
MatButtonModule,
|
|
225
460
|
MatSelectModule,
|
|
226
461
|
BrowserAnimationsModule,
|
|
227
|
-
MatFormFieldModule
|
|
462
|
+
MatFormFieldModule,
|
|
463
|
+
ReactiveFormsModule], exports: [RTSeeComponent, MessengerComponent, RtseeEventsDashboardComponent] });
|
|
228
464
|
RTSeeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0, type: RTSeeModule, imports: [[
|
|
229
465
|
CommonModule,
|
|
230
466
|
MatIconModule,
|
|
@@ -232,6 +468,7 @@ RTSeeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "1
|
|
|
232
468
|
MatSelectModule,
|
|
233
469
|
BrowserAnimationsModule,
|
|
234
470
|
MatFormFieldModule,
|
|
471
|
+
ReactiveFormsModule,
|
|
235
472
|
]] });
|
|
236
473
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0, type: RTSeeModule, decorators: [{
|
|
237
474
|
type: NgModule,
|
|
@@ -243,6 +480,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.2", ngImpor
|
|
|
243
480
|
RtseeSoundbarComponent,
|
|
244
481
|
RtseePeersListComponent,
|
|
245
482
|
RtseeSettingsComponent,
|
|
483
|
+
MessengerComponent,
|
|
484
|
+
ChatComponent,
|
|
485
|
+
MessageComponent,
|
|
486
|
+
ChatsListComponent,
|
|
487
|
+
MessagesListComponent,
|
|
488
|
+
ChatThumbnailComponent,
|
|
489
|
+
ChatInputComponent,
|
|
490
|
+
MessengerHeaderComponent,
|
|
491
|
+
RtseeEventsDashboardComponent,
|
|
492
|
+
RtseeEventsDashboardClientComponent,
|
|
493
|
+
RtseeEventsDashboardClientThumbnailComponent,
|
|
246
494
|
],
|
|
247
495
|
imports: [
|
|
248
496
|
CommonModule,
|
|
@@ -251,8 +499,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.2", ngImpor
|
|
|
251
499
|
MatSelectModule,
|
|
252
500
|
BrowserAnimationsModule,
|
|
253
501
|
MatFormFieldModule,
|
|
502
|
+
ReactiveFormsModule,
|
|
254
503
|
],
|
|
255
|
-
exports: [RTSeeComponent],
|
|
504
|
+
exports: [RTSeeComponent, MessengerComponent, RtseeEventsDashboardComponent],
|
|
256
505
|
}]
|
|
257
506
|
}] });
|
|
258
507
|
|
|
@@ -264,5 +513,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.2", ngImpor
|
|
|
264
513
|
* Generated bundle index. Do not edit.
|
|
265
514
|
*/
|
|
266
515
|
|
|
267
|
-
export { NgxService, RTSeeComponent, RTSeeControlsComponent, RTSeeModule };
|
|
516
|
+
export { MessengerComponent, NgxService, RTSeeComponent, RTSeeControlsComponent, RTSeeModule, RtseeEventsDashboardComponent };
|
|
268
517
|
//# sourceMappingURL=rtsee-ngx.js.map
|