@rtsee/ngx 0.0.7 → 0.0.11
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 +3 -5
- 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-peer/rtsee-peer.component.js +2 -4
- package/dist/ngx/fesm2015/rtsee-ngx.js +3 -5
- package/dist/ngx/fesm2015/rtsee-ngx.js.map +1 -1
- package/dist/ngx/lib/components/rtsee-peer/rtsee-peer.component.d.ts +1 -2
- package/package.json +5 -5
|
@@ -55,7 +55,7 @@
|
|
|
55
55
|
return RTSeeControlsComponent;
|
|
56
56
|
}());
|
|
57
57
|
RTSeeControlsComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: RTSeeControlsComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
|
|
58
|
-
RTSeeControlsComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.2", type: RTSeeControlsComponent, selector: "ngx-rtsee-controls", inputs: { rtsee: "rtsee", fullScreenMode: "fullScreenMode" }, ngImport: i0__namespace, 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:
|
|
58
|
+
RTSeeControlsComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.2", type: RTSeeControlsComponent, selector: "ngx-rtsee-controls", inputs: { rtsee: "rtsee", fullScreenMode: "fullScreenMode" }, ngImport: i0__namespace, 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__namespace.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__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace.MatSuffix, selector: "[matSuffix]" }] });
|
|
59
59
|
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: RTSeeControlsComponent, decorators: [{
|
|
60
60
|
type: i0.Component,
|
|
61
61
|
args: [{
|
|
@@ -179,7 +179,7 @@
|
|
|
179
179
|
return RtseePeerComponent;
|
|
180
180
|
}());
|
|
181
181
|
RtseePeerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: RtseePeerComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
|
|
182
|
-
RtseePeerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.2", type: RtseePeerComponent, selector: "ngx-rtsee-peer", inputs: { peer: "peer"
|
|
182
|
+
RtseePeerComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, 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__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
183
183
|
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: RtseePeerComponent, decorators: [{
|
|
184
184
|
type: i0.Component,
|
|
185
185
|
args: [{
|
|
@@ -195,8 +195,6 @@
|
|
|
195
195
|
args: ['videoOutput']
|
|
196
196
|
}], peer: [{
|
|
197
197
|
type: i0.Input
|
|
198
|
-
}], fullScreenMode: [{
|
|
199
|
-
type: i0.Input
|
|
200
198
|
}] } });
|
|
201
199
|
|
|
202
200
|
var RTSeeComponent = /** @class */ (function () {
|
|
@@ -213,7 +211,7 @@
|
|
|
213
211
|
return RTSeeComponent;
|
|
214
212
|
}());
|
|
215
213
|
RTSeeComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: RTSeeComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
|
|
216
|
-
RTSeeComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.2", type: RTSeeComponent, selector: "ngx-rtsee", inputs: { rtSee: "rtSee" }, ngImport: i0__namespace, 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
|
|
214
|
+
RTSeeComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.2", type: RTSeeComponent, selector: "ngx-rtsee", inputs: { rtSee: "rtSee" }, ngImport: i0__namespace, 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__namespace.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__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace.MatSuffix, selector: "[matSuffix]" }, { type: i2__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
|
|
217
215
|
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: RTSeeComponent, decorators: [{
|
|
218
216
|
type: i0.Component,
|
|
219
217
|
args: [{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"rtsee-ngx.umd.js","sources":["../../../projects/ngx/src/lib/ngx.service.ts","../../../projects/ngx/src/lib/components/rtsee/rtsee-controls/rtsee-controls.component.ts","../../../projects/ngx/src/lib/components/rtsee/rtsee-controls/rtsee-controls.component.html","../../../projects/ngx/src/lib/components/rtsee-settings/rtsee-settings.component.ts","../../../projects/ngx/src/lib/components/rtsee-settings/rtsee-settings.component.html","../../../projects/ngx/src/lib/components/rtsee-soundbar/rtsee-soundbar.component.ts","../../../projects/ngx/src/lib/components/rtsee-soundbar/rtsee-soundbar.component.html","../../../projects/ngx/src/lib/components/rtsee-peer/rtsee-peer.component.ts","../../../projects/ngx/src/lib/components/rtsee-peer/rtsee-peer.component.html","../../../projects/ngx/src/lib/components/rtsee/rtsee.component.ts","../../../projects/ngx/src/lib/components/rtsee/rtsee.component.html","../../../projects/ngx/src/lib/components/rtsee-peers-list/rtsee-peers-list.component.ts","../../../projects/ngx/src/lib/components/rtsee-peers-list/rtsee-peers-list.component.html","../../../projects/ngx/src/lib/ngx.module.ts","../../../projects/ngx/src/public-api.ts","../../../projects/ngx/src/rtsee-ngx.ts"],"sourcesContent":["import { Injectable } from '@angular/core';\n\n@Injectable({\n providedIn: 'root',\n})\nexport class NgxService {\n lol: string;\n constructor() {\n this.lol = 'lol';\n }\n}\n","import { Component, Input } from '@angular/core';\nimport { RTSee } from '@rtsee/core';\n\n@Component({\n selector: 'ngx-rtsee-controls',\n templateUrl: './rtsee-controls.component.html',\n styleUrls: ['./rtsee-controls.component.scss'],\n})\nexport class RTSeeControlsComponent {\n @Input() rtsee!: RTSee;\n @Input() fullScreenMode?: boolean;\n\n onPresentClicked() {\n return this.rtsee.isPresenter\n ? this.rtsee.stopScreenShare()\n : this.rtsee.startScreenShare();\n }\n}\n","<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","import { Component, Input, OnInit } from '@angular/core';\nimport { RTSee } from '@rtsee/core';\n\n@Component({\n selector: 'ngx-rtsee-settings',\n templateUrl: './rtsee-settings.component.html',\n styleUrls: ['./rtsee-settings.component.scss'],\n})\nexport class RtseeSettingsComponent implements OnInit {\n availableAudioInputDevices: MediaDeviceInfo[];\n availableVideoInputDevices: MediaDeviceInfo[];\n availableAudioOutputDevices: MediaDeviceInfo[];\n\n @Input() rtSee!: RTSee;\n @Input() fullScreenMode!: boolean;\n constructor() {\n this.availableAudioInputDevices = [];\n this.availableVideoInputDevices = [];\n this.availableAudioOutputDevices = [];\n }\n\n ngOnInit(): void {\n this.refreshSelectOptions();\n }\n\n refreshSelectOptions() {\n void this.rtSee.refreshMediaDevicesList();\n }\n\n setAudioInput(deviceId: string) {\n this.rtSee.setAudioInputDevice(deviceId);\n console.log(deviceId);\n }\n\n setAudioOutput(deviceId: string) {\n this.rtSee.setAudioOutputDevice(deviceId);\n }\n\n setVideoInput(deviceId: string) {\n this.rtSee.setVideoInputDevice(deviceId);\n }\n}\n","<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","import { Component, Input, OnInit } from '@angular/core';\nimport { RTSeePeerConnection } from '@rtsee/core';\nimport { interval } from 'rxjs';\n\n@Component({\n selector: 'ngx-rtsee-soundbar',\n templateUrl: './rtsee-soundbar.component.html',\n styleUrls: ['./rtsee-soundbar.component.scss'],\n})\nexport class RtseeSoundbarComponent implements OnInit {\n intervalLength: number;\n noiceLevel: number;\n scaleOneLevel: number;\n scaleTwoLevel: number;\n scaleThreeLevel: number;\n\n @Input() peer!: RTSeePeerConnection;\n constructor() {\n this.intervalLength = 1000;\n this.noiceLevel = 0;\n this.scaleOneLevel = 0;\n this.scaleTwoLevel = 0;\n this.scaleThreeLevel = 0;\n }\n\n ngOnInit(): void {\n this.startSoundMeterListening();\n }\n\n startSoundMeterListening() {\n const step = interval(1000 / 10);\n step.subscribe(() => {\n if (!this.peer.soundMeter || !this.peer.soundMeter.level) {\n this.noiceLevel = 0;\n } else {\n this.noiceLevel = this.peer.soundMeter?.level * 100 || 0;\n }\n\n this.setSoundMeterHeights();\n });\n }\n\n setSoundMeterHeights() {\n const ZERO_LEVEL = 25;\n const SCALE_STEP = 25;\n const SCALE_ONE_TOP = ZERO_LEVEL + SCALE_STEP;\n const SCALE_TWO_TOP = SCALE_ONE_TOP + SCALE_STEP;\n\n if (!this.peer || !this.peer.soundMeter || this.noiceLevel < ZERO_LEVEL) {\n this.scaleOneLevel = 0;\n this.scaleTwoLevel = 0;\n this.scaleThreeLevel = 0;\n }\n\n const scaleOneValue = ((this.noiceLevel - ZERO_LEVEL) / SCALE_STEP) * 100;\n const scaleTwoValue =\n ((this.noiceLevel - SCALE_ONE_TOP) / SCALE_STEP) * 100;\n const scaleThreeValue =\n ((this.noiceLevel - SCALE_TWO_TOP) / SCALE_STEP) * 100;\n\n this.scaleOneLevel = scaleOneValue > 0 ? scaleOneValue : 0;\n this.scaleTwoLevel = scaleTwoValue > 0 ? scaleTwoValue : 0;\n this.scaleThreeLevel = scaleThreeValue > 0 ? scaleTwoValue : 0;\n }\n}\n","<div class=\"rtsee-soundbar\">\n <div class=\"rtsee-soundbar-scale\">\n <div class=\"rtsee-soundbar-scale-item\">\n <div class=\"rtsee-soundbar-scale-item-level rtsee-soundbar-scale-item-level-one\"\n [style.height.%]=\"scaleOneLevel\"\n ></div>\n </div>\n <div class=\"rtsee-soundbar-scale-item\">\n <div class=\"rtsee-soundbar-scale-item-level rtsee-soundbar-scale-item-level-two\"\n [style.height.%]=\"scaleTwoLevel\"\n ></div>\n </div>\n <div class=\"rtsee-soundbar-scale-item\">\n <div class=\"rtsee-soundbar-scale-item-level rtsee-soundbar-scale-item-level-three\"\n [style.height.%]=\"scaleThreeLevel\"\n ></div>\n </div>\n </div>\n</div>\n","import {\n AfterViewInit,\n Component,\n ElementRef,\n Input,\n ViewChild,\n} from '@angular/core';\nimport { RTSeePeerConnection } from '@rtsee/core';\n\n@Component({\n selector: 'ngx-rtsee-peer',\n templateUrl: './rtsee-peer.component.html',\n styleUrls: ['./rtsee-peer.component.scss'],\n})\nexport class RtseePeerComponent implements AfterViewInit {\n intervalLength: number;\n noiceLevel: number;\n\n @ViewChild('audioOutput') audioOutput?: ElementRef;\n @ViewChild('videoOutput') videoOutput?: ElementRef;\n @Input() peer!: RTSeePeerConnection;\n @Input() fullScreenMode?: boolean;\n constructor() {\n this.intervalLength = 1000;\n this.noiceLevel = 0;\n }\n\n ngAfterViewInit(): void {\n if (!this.audioOutput) {\n return;\n }\n this.peer.setAudioOutputElement(\n this.audioOutput.nativeElement as HTMLAudioElement\n );\n }\n}\n","<div class=\"rtsee-peer\" [ngClass]=\"{\n'rtsee-peer-video-disabled': !peer.remoteVideoStream || !peer.camera,\n'rtsee-full-screen-mode-peer': fullScreenMode\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 [muted]=\"true\"\n [srcObject]=\"peer.remoteVideoStream\"\n playsinline=\"true\"\n >\n <audio #audioOutput [srcObject]=\"peer.remoteAudioStream\" autoplay=\"true\"></audio>\n </video>\n <div class=\"rtsee-peer-soundbar\">\n <ngx-rtsee-soundbar [peer]=\"peer\"></ngx-rtsee-soundbar>\n </div>\n </div>\n</div>\n","import { Component, Input } from '@angular/core';\nimport { RTSee } from '@rtsee/core';\n\n@Component({\n selector: 'ngx-rtsee',\n templateUrl: './rtsee.component.html',\n styleUrls: ['./rtsee.component.scss'],\n})\nexport class RTSeeComponent {\n settingsViewEnabled: boolean;\n fullScreenModeEnabled: boolean;\n\n @Input() rtSee!: RTSee;\n constructor() {\n this.settingsViewEnabled = false;\n this.fullScreenModeEnabled = false;\n }\n\n toggleSettings() {\n this.settingsViewEnabled = !this.settingsViewEnabled;\n }\n\n toggleFullScreenMode() {\n this.fullScreenModeEnabled = !this.fullScreenModeEnabled;\n }\n}\n","<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 [ngClass]=\"{'rtsee-peer-active-speaker': peer.isActiveSpeaker}\"\n >\n <ngx-rtsee-peer [peer]=\"peer\" [fullScreenMode]=\"fullScreenModeEnabled\"></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","import { Component } from '@angular/core';\n\n@Component({\n selector: 'ngx-rtsee-peers-list',\n templateUrl: './rtsee-peers-list.component.html',\n styleUrls: ['./rtsee-peers-list.component.scss'],\n})\nexport class RtseePeersListComponent {}\n","<p>rtsee-peers-list works!</p>\n","import { NgModule } from '@angular/core';\nimport { RTSeeComponent } from './components/rtsee/rtsee.component';\nimport { RTSeeControlsComponent } from './components/rtsee/rtsee-controls/rtsee-controls.component';\nimport { CommonModule } from '@angular/common';\nimport { RtseePeerComponent } from './components/rtsee-peer/rtsee-peer.component';\nimport { RtseeSoundbarComponent } from './components/rtsee-soundbar/rtsee-soundbar.component';\nimport { RtseePeersListComponent } from './components/rtsee-peers-list/rtsee-peers-list.component';\nimport { MatIconModule } from '@angular/material/icon';\nimport { MatButtonModule } from '@angular/material/button';\nimport { RtseeSettingsComponent } from './components/rtsee-settings/rtsee-settings.component';\nimport { MatSelectModule } from '@angular/material/select';\nimport { BrowserAnimationsModule } from '@angular/platform-browser/animations';\nimport { MatFormFieldModule } from '@angular/material/form-field';\n\n@NgModule({\n declarations: [\n RTSeeComponent,\n RTSeeControlsComponent,\n RtseePeerComponent,\n RtseeSoundbarComponent,\n RtseePeersListComponent,\n RtseeSettingsComponent,\n ],\n imports: [\n CommonModule,\n MatIconModule,\n MatButtonModule,\n MatSelectModule,\n BrowserAnimationsModule,\n MatFormFieldModule,\n ],\n exports: [RTSeeComponent],\n})\nexport class RTSeeModule {}\n","/*\n * Public API Surface of ngx\n */\n\nexport * from './lib/ngx.service';\nexport * from './lib/components/rtsee/rtsee-controls/rtsee-controls.component';\nexport * from './lib/components/rtsee/rtsee.component';\nexport * from './lib/ngx.module';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":["Injectable","Component","Input","interval","ViewChild","CommonModule","MatIconModule","MatButtonModule","MatSelectModule","BrowserAnimationsModule","MatFormFieldModule","NgModule"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"rtsee-ngx.umd.js","sources":["../../../projects/ngx/src/lib/ngx.service.ts","../../../projects/ngx/src/lib/components/rtsee/rtsee-controls/rtsee-controls.component.ts","../../../projects/ngx/src/lib/components/rtsee/rtsee-controls/rtsee-controls.component.html","../../../projects/ngx/src/lib/components/rtsee-settings/rtsee-settings.component.ts","../../../projects/ngx/src/lib/components/rtsee-settings/rtsee-settings.component.html","../../../projects/ngx/src/lib/components/rtsee-soundbar/rtsee-soundbar.component.ts","../../../projects/ngx/src/lib/components/rtsee-soundbar/rtsee-soundbar.component.html","../../../projects/ngx/src/lib/components/rtsee-peer/rtsee-peer.component.ts","../../../projects/ngx/src/lib/components/rtsee-peer/rtsee-peer.component.html","../../../projects/ngx/src/lib/components/rtsee/rtsee.component.ts","../../../projects/ngx/src/lib/components/rtsee/rtsee.component.html","../../../projects/ngx/src/lib/components/rtsee-peers-list/rtsee-peers-list.component.ts","../../../projects/ngx/src/lib/components/rtsee-peers-list/rtsee-peers-list.component.html","../../../projects/ngx/src/lib/ngx.module.ts","../../../projects/ngx/src/public-api.ts","../../../projects/ngx/src/rtsee-ngx.ts"],"sourcesContent":["import { Injectable } from '@angular/core';\n\n@Injectable({\n providedIn: 'root',\n})\nexport class NgxService {\n lol: string;\n constructor() {\n this.lol = 'lol';\n }\n}\n","import { Component, Input } from '@angular/core';\nimport { RTSee } from '@rtsee/core';\n\n@Component({\n selector: 'ngx-rtsee-controls',\n templateUrl: './rtsee-controls.component.html',\n styleUrls: ['./rtsee-controls.component.scss'],\n})\nexport class RTSeeControlsComponent {\n @Input() rtsee!: RTSee;\n @Input() fullScreenMode?: boolean;\n\n onPresentClicked() {\n return this.rtsee.isPresenter\n ? this.rtsee.stopScreenShare()\n : this.rtsee.startScreenShare();\n }\n}\n","<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","import { Component, Input, OnInit } from '@angular/core';\nimport { RTSee } from '@rtsee/core';\n\n@Component({\n selector: 'ngx-rtsee-settings',\n templateUrl: './rtsee-settings.component.html',\n styleUrls: ['./rtsee-settings.component.scss'],\n})\nexport class RtseeSettingsComponent implements OnInit {\n availableAudioInputDevices: MediaDeviceInfo[];\n availableVideoInputDevices: MediaDeviceInfo[];\n availableAudioOutputDevices: MediaDeviceInfo[];\n\n @Input() rtSee!: RTSee;\n @Input() fullScreenMode!: boolean;\n constructor() {\n this.availableAudioInputDevices = [];\n this.availableVideoInputDevices = [];\n this.availableAudioOutputDevices = [];\n }\n\n ngOnInit(): void {\n this.refreshSelectOptions();\n }\n\n refreshSelectOptions() {\n void this.rtSee.refreshMediaDevicesList();\n }\n\n setAudioInput(deviceId: string) {\n this.rtSee.setAudioInputDevice(deviceId);\n console.log(deviceId);\n }\n\n setAudioOutput(deviceId: string) {\n this.rtSee.setAudioOutputDevice(deviceId);\n }\n\n setVideoInput(deviceId: string) {\n this.rtSee.setVideoInputDevice(deviceId);\n }\n}\n","<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","import { Component, Input, OnInit } from '@angular/core';\nimport { RTSeePeerConnection } from '@rtsee/core';\nimport { interval } from 'rxjs';\n\n@Component({\n selector: 'ngx-rtsee-soundbar',\n templateUrl: './rtsee-soundbar.component.html',\n styleUrls: ['./rtsee-soundbar.component.scss'],\n})\nexport class RtseeSoundbarComponent implements OnInit {\n intervalLength: number;\n noiceLevel: number;\n scaleOneLevel: number;\n scaleTwoLevel: number;\n scaleThreeLevel: number;\n\n @Input() peer!: RTSeePeerConnection;\n constructor() {\n this.intervalLength = 1000;\n this.noiceLevel = 0;\n this.scaleOneLevel = 0;\n this.scaleTwoLevel = 0;\n this.scaleThreeLevel = 0;\n }\n\n ngOnInit(): void {\n this.startSoundMeterListening();\n }\n\n startSoundMeterListening() {\n const step = interval(1000 / 10);\n step.subscribe(() => {\n if (!this.peer.soundMeter || !this.peer.soundMeter.level) {\n this.noiceLevel = 0;\n } else {\n this.noiceLevel = this.peer.soundMeter?.level * 100 || 0;\n }\n\n this.setSoundMeterHeights();\n });\n }\n\n setSoundMeterHeights() {\n const ZERO_LEVEL = 25;\n const SCALE_STEP = 25;\n const SCALE_ONE_TOP = ZERO_LEVEL + SCALE_STEP;\n const SCALE_TWO_TOP = SCALE_ONE_TOP + SCALE_STEP;\n\n if (!this.peer || !this.peer.soundMeter || this.noiceLevel < ZERO_LEVEL) {\n this.scaleOneLevel = 0;\n this.scaleTwoLevel = 0;\n this.scaleThreeLevel = 0;\n }\n\n const scaleOneValue = ((this.noiceLevel - ZERO_LEVEL) / SCALE_STEP) * 100;\n const scaleTwoValue =\n ((this.noiceLevel - SCALE_ONE_TOP) / SCALE_STEP) * 100;\n const scaleThreeValue =\n ((this.noiceLevel - SCALE_TWO_TOP) / SCALE_STEP) * 100;\n\n this.scaleOneLevel = scaleOneValue > 0 ? scaleOneValue : 0;\n this.scaleTwoLevel = scaleTwoValue > 0 ? scaleTwoValue : 0;\n this.scaleThreeLevel = scaleThreeValue > 0 ? scaleTwoValue : 0;\n }\n}\n","<div class=\"rtsee-soundbar\">\n <div class=\"rtsee-soundbar-scale\">\n <div class=\"rtsee-soundbar-scale-item\">\n <div class=\"rtsee-soundbar-scale-item-level rtsee-soundbar-scale-item-level-one\"\n [style.height.%]=\"scaleOneLevel\"\n ></div>\n </div>\n <div class=\"rtsee-soundbar-scale-item\">\n <div class=\"rtsee-soundbar-scale-item-level rtsee-soundbar-scale-item-level-two\"\n [style.height.%]=\"scaleTwoLevel\"\n ></div>\n </div>\n <div class=\"rtsee-soundbar-scale-item\">\n <div class=\"rtsee-soundbar-scale-item-level rtsee-soundbar-scale-item-level-three\"\n [style.height.%]=\"scaleThreeLevel\"\n ></div>\n </div>\n </div>\n</div>\n","import {\n AfterViewInit,\n Component,\n ElementRef,\n Input,\n ViewChild,\n} from '@angular/core';\nimport { RTSeePeerConnection } from '@rtsee/core';\n\n@Component({\n selector: 'ngx-rtsee-peer',\n templateUrl: './rtsee-peer.component.html',\n styleUrls: ['./rtsee-peer.component.scss'],\n})\nexport class RtseePeerComponent implements AfterViewInit {\n intervalLength: number;\n noiceLevel: number;\n\n @ViewChild('audioOutput') audioOutput?: ElementRef;\n @ViewChild('videoOutput') videoOutput?: ElementRef;\n @Input() peer!: RTSeePeerConnection;\n\n constructor() {\n this.intervalLength = 1000;\n this.noiceLevel = 0;\n }\n\n ngAfterViewInit(): void {\n if (!this.audioOutput) {\n return;\n }\n this.peer.setAudioOutputElement(\n this.audioOutput.nativeElement as HTMLAudioElement\n );\n }\n}\n","<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","import { Component, Input } from '@angular/core';\nimport { RTSee } from '@rtsee/core';\n\n@Component({\n selector: 'ngx-rtsee',\n templateUrl: './rtsee.component.html',\n styleUrls: ['./rtsee.component.scss'],\n})\nexport class RTSeeComponent {\n settingsViewEnabled: boolean;\n fullScreenModeEnabled: boolean;\n\n @Input() rtSee!: RTSee;\n constructor() {\n this.settingsViewEnabled = false;\n this.fullScreenModeEnabled = false;\n }\n\n toggleSettings() {\n this.settingsViewEnabled = !this.settingsViewEnabled;\n }\n\n toggleFullScreenMode() {\n this.fullScreenModeEnabled = !this.fullScreenModeEnabled;\n }\n}\n","<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","import { Component } from '@angular/core';\n\n@Component({\n selector: 'ngx-rtsee-peers-list',\n templateUrl: './rtsee-peers-list.component.html',\n styleUrls: ['./rtsee-peers-list.component.scss'],\n})\nexport class RtseePeersListComponent {}\n","<p>rtsee-peers-list works!</p>\n","import { NgModule } from '@angular/core';\nimport { RTSeeComponent } from './components/rtsee/rtsee.component';\nimport { RTSeeControlsComponent } from './components/rtsee/rtsee-controls/rtsee-controls.component';\nimport { CommonModule } from '@angular/common';\nimport { RtseePeerComponent } from './components/rtsee-peer/rtsee-peer.component';\nimport { RtseeSoundbarComponent } from './components/rtsee-soundbar/rtsee-soundbar.component';\nimport { RtseePeersListComponent } from './components/rtsee-peers-list/rtsee-peers-list.component';\nimport { MatIconModule } from '@angular/material/icon';\nimport { MatButtonModule } from '@angular/material/button';\nimport { RtseeSettingsComponent } from './components/rtsee-settings/rtsee-settings.component';\nimport { MatSelectModule } from '@angular/material/select';\nimport { BrowserAnimationsModule } from '@angular/platform-browser/animations';\nimport { MatFormFieldModule } from '@angular/material/form-field';\n\n@NgModule({\n declarations: [\n RTSeeComponent,\n RTSeeControlsComponent,\n RtseePeerComponent,\n RtseeSoundbarComponent,\n RtseePeersListComponent,\n RtseeSettingsComponent,\n ],\n imports: [\n CommonModule,\n MatIconModule,\n MatButtonModule,\n MatSelectModule,\n BrowserAnimationsModule,\n MatFormFieldModule,\n ],\n exports: [RTSeeComponent],\n})\nexport class RTSeeModule {}\n","/*\n * Public API Surface of ngx\n */\n\nexport * from './lib/ngx.service';\nexport * from './lib/components/rtsee/rtsee-controls/rtsee-controls.component';\nexport * from './lib/components/rtsee/rtsee.component';\nexport * from './lib/ngx.module';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":["Injectable","Component","Input","interval","ViewChild","CommonModule","MatIconModule","MatButtonModule","MatSelectModule","BrowserAnimationsModule","MatFormFieldModule","NgModule"],"mappings":"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"}
|
|
@@ -11,7 +11,7 @@ export class RTSeeControlsComponent {
|
|
|
11
11
|
}
|
|
12
12
|
}
|
|
13
13
|
RTSeeControlsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0, type: RTSeeControlsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
14
|
-
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:
|
|
14
|
+
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]" }] });
|
|
15
15
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0, type: RTSeeControlsComponent, decorators: [{
|
|
16
16
|
type: Component,
|
|
17
17
|
args: [{
|
|
@@ -19,7 +19,7 @@ export class RTSeeComponent {
|
|
|
19
19
|
}
|
|
20
20
|
}
|
|
21
21
|
RTSeeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0, type: RTSeeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
22
|
-
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
|
|
22
|
+
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: i2.RtseeSettingsComponent, selector: "ngx-rtsee-settings", inputs: ["rtSee", "fullScreenMode"] }, { type: i3.RtseePeerComponent, selector: "ngx-rtsee-peer", inputs: ["peer"] }, { type: i4.RTSeeControlsComponent, selector: "ngx-rtsee-controls", inputs: ["rtsee", "fullScreenMode"] }], directives: [{ type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.MatSuffix, selector: "[matSuffix]" }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
|
|
23
23
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0, type: RTSeeComponent, decorators: [{
|
|
24
24
|
type: Component,
|
|
25
25
|
args: [{
|
|
@@ -30,4 +30,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.2", ngImpor
|
|
|
30
30
|
}], ctorParameters: function () { return []; }, propDecorators: { rtSee: [{
|
|
31
31
|
type: Input
|
|
32
32
|
}] } });
|
|
33
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
33
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicnRzZWUuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4L3NyYy9saWIvY29tcG9uZW50cy9ydHNlZS9ydHNlZS5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gvc3JjL2xpYi9jb21wb25lbnRzL3J0c2VlL3J0c2VlLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFFLE1BQU0sZUFBZSxDQUFDOzs7Ozs7OztBQVFqRCxNQUFNLE9BQU8sY0FBYztJQUt6QjtRQUNFLElBQUksQ0FBQyxtQkFBbUIsR0FBRyxLQUFLLENBQUM7UUFDakMsSUFBSSxDQUFDLHFCQUFxQixHQUFHLEtBQUssQ0FBQztJQUNyQyxDQUFDO0lBRUQsY0FBYztRQUNaLElBQUksQ0FBQyxtQkFBbUIsR0FBRyxDQUFDLElBQUksQ0FBQyxtQkFBbUIsQ0FBQztJQUN2RCxDQUFDO0lBRUQsb0JBQW9CO1FBQ2xCLElBQUksQ0FBQyxxQkFBcUIsR0FBRyxDQUFDLElBQUksQ0FBQyxxQkFBcUIsQ0FBQztJQUMzRCxDQUFDOzsyR0FoQlUsY0FBYzsrRkFBZCxjQUFjLDZFQ1IzQixzNUZBc0VBOzJGRDlEYSxjQUFjO2tCQUwxQixTQUFTO21CQUFDO29CQUNULFFBQVEsRUFBRSxXQUFXO29CQUNyQixXQUFXLEVBQUUsd0JBQXdCO29CQUNyQyxTQUFTLEVBQUUsQ0FBQyx3QkFBd0IsQ0FBQztpQkFDdEM7MEVBS1UsS0FBSztzQkFBYixLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBJbnB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgUlRTZWUgfSBmcm9tICdAcnRzZWUvY29yZSc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ25neC1ydHNlZScsXG4gIHRlbXBsYXRlVXJsOiAnLi9ydHNlZS5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL3J0c2VlLmNvbXBvbmVudC5zY3NzJ10sXG59KVxuZXhwb3J0IGNsYXNzIFJUU2VlQ29tcG9uZW50IHtcbiAgc2V0dGluZ3NWaWV3RW5hYmxlZDogYm9vbGVhbjtcbiAgZnVsbFNjcmVlbk1vZGVFbmFibGVkOiBib29sZWFuO1xuXG4gIEBJbnB1dCgpIHJ0U2VlITogUlRTZWU7XG4gIGNvbnN0cnVjdG9yKCkge1xuICAgIHRoaXMuc2V0dGluZ3NWaWV3RW5hYmxlZCA9IGZhbHNlO1xuICAgIHRoaXMuZnVsbFNjcmVlbk1vZGVFbmFibGVkID0gZmFsc2U7XG4gIH1cblxuICB0b2dnbGVTZXR0aW5ncygpIHtcbiAgICB0aGlzLnNldHRpbmdzVmlld0VuYWJsZWQgPSAhdGhpcy5zZXR0aW5nc1ZpZXdFbmFibGVkO1xuICB9XG5cbiAgdG9nZ2xlRnVsbFNjcmVlbk1vZGUoKSB7XG4gICAgdGhpcy5mdWxsU2NyZWVuTW9kZUVuYWJsZWQgPSAhdGhpcy5mdWxsU2NyZWVuTW9kZUVuYWJsZWQ7XG4gIH1cbn1cbiIsIjxkaXYgY2xhc3M9XCJydHNlZS1zaGVsbFwiIFtuZ0NsYXNzXT1cIntcbidydHNlZS1zaGVsbC1leHBhbmRlZCc6IHJ0U2VlLnVpQ29udHJvbHMuaXNFeHBhbmRlZCB8fCBmdWxsU2NyZWVuTW9kZUVuYWJsZWQsXG4ncnRzZWUtc2hlbGwtbm8tY29tcGFuaW9ucyc6ICFydFNlZS5ydGNQZWVyQ29ubmVjdGlvbnMuY29ubmVjdGlvbnM/Lmxlbmd0aFxufVwiPlxuICA8ZGl2IGNsYXNzPVwicnRzZWUtbG9jYWwtcGVlclwiICpuZ0lmPVwicnRTZWUubG9jYWxTdHJlYW0gJiYgcnRTZWUuY2FtZXJhXCI+XG4gICAgPHZpZGVvIGNsYXNzPVwicnRzZWUtbG9jYWwtdmlkZW9cIlxuICAgICAgICAgICBbYXV0b3BsYXldPVwidHJ1ZVwiXG4gICAgICAgICAgIFttdXRlZF09XCJ0cnVlXCJcbiAgICAgICAgICAgW3NyY09iamVjdF09XCJydFNlZS5sb2NhbFN0cmVhbVwiXG4gICAgICAgICAgIHBsYXlzaW5saW5lPVwidHJ1ZVwiXG4gICAgPjwvdmlkZW8+XG4gIDwvZGl2PlxuICA8ZGl2IGNsYXNzPVwicnRzZWUtd2luZG93LWNvbnRyb2xzXCI+XG4gICAgPGJ1dHRvbiBtYXQtaWNvbi1idXR0b24gbWF0U3VmZml4XG4gICAgICAgICAgICB0eXBlPVwiYnV0dG9uXCJcbiAgICAgICAgICAgIChjbGljayk9XCJ0aGlzLnRvZ2dsZVNldHRpbmdzKClcIlxuICAgICAgICAgICAgY2xhc3M9XCJydHNlZS13aW5kb3ctY29udHJvbHMtYnV0dG9uIHJ0c2VlLXJpcHBsZS1idXR0b25cIlxuICAgID5cbiAgICAgIDxzcGFuIGNsYXNzPVwibWF0ZXJpYWwtaWNvbnMtb3V0bGluZWRcIj5zZXR0aW5nczwvc3Bhbj5cbiAgICA8L2J1dHRvbj5cbiAgICA8YnV0dG9uIG1hdC1pY29uLWJ1dHRvbiBtYXRTdWZmaXhcbiAgICAgICAgICAgIHR5cGU9XCJidXR0b25cIlxuICAgICAgICAgICAgKGNsaWNrKT1cInRoaXMudG9nZ2xlRnVsbFNjcmVlbk1vZGUoKVwiXG4gICAgICAgICAgICBjbGFzcz1cInJ0c2VlLXdpbmRvdy1jb250cm9scy1idXR0b24gcnRzZWUtcmlwcGxlLWJ1dHRvblwiXG4gICAgPlxuICAgICAgPHNwYW4gY2xhc3M9XCJtYXRlcmlhbC1pY29ucy1vdXRsaW5lZFwiPm9wZW5faW5fZnVsbDwvc3Bhbj5cbiAgICA8L2J1dHRvbj5cbiAgPC9kaXY+XG4gIDxkaXYgY2xhc3M9XCJydHNlZS1zZXR0aW5ncy1jb250YWluZXJcIiAqbmdJZj1cInNldHRpbmdzVmlld0VuYWJsZWRcIj5cbiAgICA8YnV0dG9uIG1hdC1pY29uLWJ1dHRvbiBtYXRTdWZmaXhcbiAgICAgICAgICAgIHR5cGU9XCJidXR0b25cIlxuICAgICAgICAgICAgKGNsaWNrKT1cInRoaXMudG9nZ2xlU2V0dGluZ3MoKVwiXG4gICAgICAgICAgICBjbGFzcz1cInJ0c2VlLWNsb3NlLXNldHRpbmdzLWJ1dHRvblwiXG4gICAgPlxuICAgICAgPHNwYW4gY2xhc3M9XCJtYXRlcmlhbC1pY29ucy1vdXRsaW5lZFwiPmNsb3NlPC9zcGFuPlxuICAgIDwvYnV0dG9uPlxuICAgIDxuZ3gtcnRzZWUtc2V0dGluZ3MgW3J0U2VlXT1cInJ0U2VlXCIgW2Z1bGxTY3JlZW5Nb2RlXT1cImZ1bGxTY3JlZW5Nb2RlRW5hYmxlZFwiPjwvbmd4LXJ0c2VlLXNldHRpbmdzPlxuICA8L2Rpdj5cbiAgPGRpdiBjbGFzcz1cInJ0c2VlLXNjcmVlbi1zaGFyZVwiICpuZ0lmPVwicnRTZWUuc2NyZWVuU2hhcmVQZWVyXCIgPlxuICAgIDx2aWRlbyBbYXV0b3BsYXldPVwidHJ1ZVwiXG4gICAgICAgICAgIFttdXRlZF09XCJ0cnVlXCJcbiAgICAgICAgICAgW3NyY09iamVjdF09XCJydFNlZS5zY3JlZW5TaGFyZVBlZXIucmVtb3RlVmlkZW9TdHJlYW1cIlxuICAgICAgICAgICBwbGF5c2lubGluZT1cInRydWVcIlxuICAgICAgICAgICBjbGFzcz1cInJ0c2VlLXNjcmVlbi1zaGFyZS12aWRlb1wiXG4gICAgPjwvdmlkZW8+XG4gIDwvZGl2PlxuICA8ZGl2IGNsYXNzPVwicnRzZWUtcGVlcnNcIiBbbmdDbGFzc109XCJ7XG4gICAgJ3J0c2VlLXBlZXJzLWFsb25lJzogIXJ0U2VlLnJ0Y1BlZXJDb25uZWN0aW9ucy5jb25uZWN0aW9ucz8ubGVuZ3RoLFxuICAgICdydHNlZS1wZWVycy1vbmUnOiBydFNlZS5ydGNQZWVyQ29ubmVjdGlvbnMuY29ubmVjdGlvbnM/Lmxlbmd0aCA9PT0gMSxcbiAgICAncnRzZWUtcGVlcnMtdGhyZWUtZ3JpZCc6IHJ0U2VlLnJ0Y1BlZXJDb25uZWN0aW9ucy5jb25uZWN0aW9ucz8ubGVuZ3RoXG4gICAgICAmJiBydFNlZS5ydGNQZWVyQ29ubmVjdGlvbnMuY29ubmVjdGlvbnMubGVuZ3RoID4gMVxuICAgICAgJiYgcnRTZWUucnRjUGVlckNvbm5lY3Rpb25zLmNvbm5lY3Rpb25zLmxlbmd0aCA8IDQsXG4gICAgJ3J0c2VlLXBlZXJzLXNpeC1ncmlkJzogcnRTZWUucnRjUGVlckNvbm5lY3Rpb25zLmNvbm5lY3Rpb25zPy5sZW5ndGhcbiAgICAgICYmIHJ0U2VlLnJ0Y1BlZXJDb25uZWN0aW9ucy5jb25uZWN0aW9ucy5sZW5ndGggPiAzXG4gICAgICAmJiBydFNlZS5ydGNQZWVyQ29ubmVjdGlvbnMuY29ubmVjdGlvbnMubGVuZ3RoIDwgNyxcbiAgICAncnRzZWUtcGVlcnMtbmluZS1ncmlkJzogcnRTZWUucnRjUGVlckNvbm5lY3Rpb25zLmNvbm5lY3Rpb25zPy5sZW5ndGhcbiAgICAgICYmIHJ0U2VlLnJ0Y1BlZXJDb25uZWN0aW9ucy5jb25uZWN0aW9ucy5sZW5ndGggPj0gN1xuICB9XCI+XG4gICAgPGRpdiBjbGFzcz1cInJ0c2VlLXBlZXItd3JhcHBlclwiXG4gICAgICAgICAqbmdGb3I9XCJsZXQgcGVlciBvZiBydFNlZS5ydGNQZWVyQ29ubmVjdGlvbnMuY29ubmVjdGlvbnNcIlxuICAgID5cbiAgICAgIDxuZ3gtcnRzZWUtcGVlciBbcGVlcl09XCJwZWVyXCI+PC9uZ3gtcnRzZWUtcGVlcj5cbiAgICA8L2Rpdj5cbiAgPC9kaXY+XG4gIDxkaXYgY2xhc3M9XCJydHNlZS1wZWVycy1saXN0XCI+PC9kaXY+XG4gIDxkaXYgY2xhc3M9XCJydHNlZS1jb250cm9scy13cmFwcGVyXCI+XG4gICAgPG5neC1ydHNlZS1jb250cm9scyBbcnRzZWVdPVwicnRTZWVcIiBbZnVsbFNjcmVlbk1vZGVdPVwiZnVsbFNjcmVlbk1vZGVFbmFibGVkXCI+PC9uZ3gtcnRzZWUtY29udHJvbHM+XG4gIDwvZGl2PlxuPC9kaXY+XG5cbiJdfQ==
|
|
@@ -15,7 +15,7 @@ export class RtseePeerComponent {
|
|
|
15
15
|
}
|
|
16
16
|
}
|
|
17
17
|
RtseePeerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0, type: RtseePeerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
18
|
-
RtseePeerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.2", type: RtseePeerComponent, selector: "ngx-rtsee-peer", inputs: { peer: "peer"
|
|
18
|
+
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: i1.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"] }] });
|
|
19
19
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0, type: RtseePeerComponent, decorators: [{
|
|
20
20
|
type: Component,
|
|
21
21
|
args: [{
|
|
@@ -31,7 +31,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.2", ngImpor
|
|
|
31
31
|
args: ['videoOutput']
|
|
32
32
|
}], peer: [{
|
|
33
33
|
type: Input
|
|
34
|
-
}], fullScreenMode: [{
|
|
35
|
-
type: Input
|
|
36
34
|
}] } });
|
|
37
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
35
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicnRzZWUtcGVlci5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gvc3JjL2xpYi9jb21wb25lbnRzL3J0c2VlLXBlZXIvcnRzZWUtcGVlci5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gvc3JjL2xpYi9jb21wb25lbnRzL3J0c2VlLXBlZXIvcnRzZWUtcGVlci5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBRUwsU0FBUyxFQUVULEtBQUssRUFDTCxTQUFTLEdBQ1YsTUFBTSxlQUFlLENBQUM7Ozs7QUFRdkIsTUFBTSxPQUFPLGtCQUFrQjtJQVE3QjtRQUNFLElBQUksQ0FBQyxjQUFjLEdBQUcsSUFBSSxDQUFDO1FBQzNCLElBQUksQ0FBQyxVQUFVLEdBQUcsQ0FBQyxDQUFDO0lBQ3RCLENBQUM7SUFFRCxlQUFlO1FBQ2IsSUFBSSxDQUFDLElBQUksQ0FBQyxXQUFXLEVBQUU7WUFDckIsT0FBTztTQUNSO1FBQ0QsSUFBSSxDQUFDLElBQUksQ0FBQyxxQkFBcUIsQ0FDN0IsSUFBSSxDQUFDLFdBQVcsQ0FBQyxhQUFpQyxDQUNuRCxDQUFDO0lBQ0osQ0FBQzs7K0dBcEJVLGtCQUFrQjttR0FBbEIsa0JBQWtCLHlSQ2QvQiw0aENBNEJBOzJGRGRhLGtCQUFrQjtrQkFMOUIsU0FBUzttQkFBQztvQkFDVCxRQUFRLEVBQUUsZ0JBQWdCO29CQUMxQixXQUFXLEVBQUUsNkJBQTZCO29CQUMxQyxTQUFTLEVBQUUsQ0FBQyw2QkFBNkIsQ0FBQztpQkFDM0M7MEVBSzJCLFdBQVc7c0JBQXBDLFNBQVM7dUJBQUMsYUFBYTtnQkFDRSxXQUFXO3NCQUFwQyxTQUFTO3VCQUFDLGFBQWE7Z0JBQ2YsSUFBSTtzQkFBWixLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgQWZ0ZXJWaWV3SW5pdCxcbiAgQ29tcG9uZW50LFxuICBFbGVtZW50UmVmLFxuICBJbnB1dCxcbiAgVmlld0NoaWxkLFxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IFJUU2VlUGVlckNvbm5lY3Rpb24gfSBmcm9tICdAcnRzZWUvY29yZSc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ25neC1ydHNlZS1wZWVyJyxcbiAgdGVtcGxhdGVVcmw6ICcuL3J0c2VlLXBlZXIuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9ydHNlZS1wZWVyLmNvbXBvbmVudC5zY3NzJ10sXG59KVxuZXhwb3J0IGNsYXNzIFJ0c2VlUGVlckNvbXBvbmVudCBpbXBsZW1lbnRzIEFmdGVyVmlld0luaXQge1xuICBpbnRlcnZhbExlbmd0aDogbnVtYmVyO1xuICBub2ljZUxldmVsOiBudW1iZXI7XG5cbiAgQFZpZXdDaGlsZCgnYXVkaW9PdXRwdXQnKSBhdWRpb091dHB1dD86IEVsZW1lbnRSZWY7XG4gIEBWaWV3Q2hpbGQoJ3ZpZGVvT3V0cHV0JykgdmlkZW9PdXRwdXQ/OiBFbGVtZW50UmVmO1xuICBASW5wdXQoKSBwZWVyITogUlRTZWVQZWVyQ29ubmVjdGlvbjtcblxuICBjb25zdHJ1Y3RvcigpIHtcbiAgICB0aGlzLmludGVydmFsTGVuZ3RoID0gMTAwMDtcbiAgICB0aGlzLm5vaWNlTGV2ZWwgPSAwO1xuICB9XG5cbiAgbmdBZnRlclZpZXdJbml0KCk6IHZvaWQge1xuICAgIGlmICghdGhpcy5hdWRpb091dHB1dCkge1xuICAgICAgcmV0dXJuO1xuICAgIH1cbiAgICB0aGlzLnBlZXIuc2V0QXVkaW9PdXRwdXRFbGVtZW50KFxuICAgICAgdGhpcy5hdWRpb091dHB1dC5uYXRpdmVFbGVtZW50IGFzIEhUTUxBdWRpb0VsZW1lbnRcbiAgICApO1xuICB9XG59XG4iLCI8ZGl2IGNsYXNzPVwicnRzZWUtcGVlclwiIFtuZ0NsYXNzXT1cIntcbidydHNlZS1wZWVyLXZpZGVvLWRpc2FibGVkJzogIXBlZXIucmVtb3RlVmlkZW9TdHJlYW0gfHwgIXBlZXIuY2FtZXJhXG59XCI+XG4gIDxkaXYgY2xhc3M9XCJydHNlZS1wZWVyLWNvbnRlbnRcIj5cbiAgICA8ZGl2IGNsYXNzPVwicnRzZWUtcGVlci1waG90b1wiICpuZ0lmPVwiIXBlZXIuY2FtZXJhXCI+XG4gICAgICA8ZGl2IGNsYXNzPVwicnRzZWUtcGVlci1waG90by13cmFwcGVyXCI+XG4gICAgICAgIDxkaXYgICpuZ0lmPVwicGVlci5pbWFnZVVybFwiXG4gICAgICAgICAgICAgIFtzdHlsZS5iYWNrZ3JvdW5kLWltYWdlXT1cIid1cmwoJyArIHBlZXIuaW1hZ2VVcmwgKyAnKSdcIlxuICAgICAgICAgICAgICBjbGFzcz1cInJ0c2VlLXBlZXItcGhvdG8taW1hZ2VcIlxuICAgICAgICA+PC9kaXY+XG4gICAgICAgIDxpbWcgKm5nSWY9XCIhcGVlci5pbWFnZVVybFwiIFtzcmNdPVwiXCIgYWx0PVwicGVlcl9waG90b1wiIGNsYXNzPVwicnRzZWUtcGVlci1waG90by1pbWFnZVwiPlxuICAgICAgPC9kaXY+XG4gICAgICA8ZGl2IGNsYXNzPVwicnRzZWUtcGVlci1pbmZvXCI+XG4gICAgICAgIDxwIGNsYXNzPVwicnRzZWUtcGVlci1uYW1lXCIgKm5nSWY9XCJwZWVyLm5hbWVcIj57e3BlZXIubmFtZX19PC9wPlxuICAgICAgPC9kaXY+XG4gICAgPC9kaXY+XG4gICAgICA8dmlkZW8gI3ZpZGVvT3V0cHV0XG4gICAgICAgICAgICAgY2xhc3M9XCJydHNlZS1wZWVyLXZpZGVvXCJcbiAgICAgICAgICAgICBbYXV0b3BsYXldPVwidHJ1ZVwiXG4gICAgICAgICAgICAgW3NyY09iamVjdF09XCJwZWVyLnJlbW90ZVZpZGVvU3RyZWFtXCJcbiAgICAgICAgICAgICBwbGF5c2lubGluZT1cInRydWVcIlxuICAgICAgPlxuICAgICAgPC92aWRlbz5cbiAgICA8ZGl2IGNsYXNzPVwicnRzZWUtcGVlci1zb3VuZGJhclwiPlxuICAgICAgPG5neC1ydHNlZS1zb3VuZGJhciBbcGVlcl09XCJwZWVyXCI+PC9uZ3gtcnRzZWUtc291bmRiYXI+XG4gICAgPC9kaXY+XG4gIDwvZGl2PlxuPC9kaXY+XG4iXX0=
|
|
@@ -33,7 +33,7 @@ class RTSeeControlsComponent {
|
|
|
33
33
|
}
|
|
34
34
|
}
|
|
35
35
|
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:
|
|
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: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
37
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0, type: RTSeeControlsComponent, decorators: [{
|
|
38
38
|
type: Component,
|
|
39
39
|
args: [{
|
|
@@ -153,7 +153,7 @@ class RtseePeerComponent {
|
|
|
153
153
|
}
|
|
154
154
|
}
|
|
155
155
|
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"
|
|
156
|
+
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
157
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0, type: RtseePeerComponent, decorators: [{
|
|
158
158
|
type: Component,
|
|
159
159
|
args: [{
|
|
@@ -169,8 +169,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.2", ngImpor
|
|
|
169
169
|
args: ['videoOutput']
|
|
170
170
|
}], peer: [{
|
|
171
171
|
type: Input
|
|
172
|
-
}], fullScreenMode: [{
|
|
173
|
-
type: Input
|
|
174
172
|
}] } });
|
|
175
173
|
|
|
176
174
|
class RTSeeComponent {
|
|
@@ -186,7 +184,7 @@ class RTSeeComponent {
|
|
|
186
184
|
}
|
|
187
185
|
}
|
|
188
186
|
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
|
|
187
|
+
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
188
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0, type: RTSeeComponent, decorators: [{
|
|
191
189
|
type: Component,
|
|
192
190
|
args: [{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"rtsee-ngx.js","sources":["../../../projects/ngx/src/lib/ngx.service.ts","../../../projects/ngx/src/lib/components/rtsee/rtsee-controls/rtsee-controls.component.ts","../../../projects/ngx/src/lib/components/rtsee/rtsee-controls/rtsee-controls.component.html","../../../projects/ngx/src/lib/components/rtsee-settings/rtsee-settings.component.ts","../../../projects/ngx/src/lib/components/rtsee-settings/rtsee-settings.component.html","../../../projects/ngx/src/lib/components/rtsee-soundbar/rtsee-soundbar.component.ts","../../../projects/ngx/src/lib/components/rtsee-soundbar/rtsee-soundbar.component.html","../../../projects/ngx/src/lib/components/rtsee-peer/rtsee-peer.component.ts","../../../projects/ngx/src/lib/components/rtsee-peer/rtsee-peer.component.html","../../../projects/ngx/src/lib/components/rtsee/rtsee.component.ts","../../../projects/ngx/src/lib/components/rtsee/rtsee.component.html","../../../projects/ngx/src/lib/components/rtsee-peers-list/rtsee-peers-list.component.ts","../../../projects/ngx/src/lib/components/rtsee-peers-list/rtsee-peers-list.component.html","../../../projects/ngx/src/lib/ngx.module.ts","../../../projects/ngx/src/public-api.ts","../../../projects/ngx/src/rtsee-ngx.ts"],"sourcesContent":["import { Injectable } from '@angular/core';\n\n@Injectable({\n providedIn: 'root',\n})\nexport class NgxService {\n lol: string;\n constructor() {\n this.lol = 'lol';\n }\n}\n","import { Component, Input } from '@angular/core';\nimport { RTSee } from '@rtsee/core';\n\n@Component({\n selector: 'ngx-rtsee-controls',\n templateUrl: './rtsee-controls.component.html',\n styleUrls: ['./rtsee-controls.component.scss'],\n})\nexport class RTSeeControlsComponent {\n @Input() rtsee!: RTSee;\n @Input() fullScreenMode?: boolean;\n\n onPresentClicked() {\n return this.rtsee.isPresenter\n ? this.rtsee.stopScreenShare()\n : this.rtsee.startScreenShare();\n }\n}\n","<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","import { Component, Input, OnInit } from '@angular/core';\nimport { RTSee } from '@rtsee/core';\n\n@Component({\n selector: 'ngx-rtsee-settings',\n templateUrl: './rtsee-settings.component.html',\n styleUrls: ['./rtsee-settings.component.scss'],\n})\nexport class RtseeSettingsComponent implements OnInit {\n availableAudioInputDevices: MediaDeviceInfo[];\n availableVideoInputDevices: MediaDeviceInfo[];\n availableAudioOutputDevices: MediaDeviceInfo[];\n\n @Input() rtSee!: RTSee;\n @Input() fullScreenMode!: boolean;\n constructor() {\n this.availableAudioInputDevices = [];\n this.availableVideoInputDevices = [];\n this.availableAudioOutputDevices = [];\n }\n\n ngOnInit(): void {\n this.refreshSelectOptions();\n }\n\n refreshSelectOptions() {\n void this.rtSee.refreshMediaDevicesList();\n }\n\n setAudioInput(deviceId: string) {\n this.rtSee.setAudioInputDevice(deviceId);\n console.log(deviceId);\n }\n\n setAudioOutput(deviceId: string) {\n this.rtSee.setAudioOutputDevice(deviceId);\n }\n\n setVideoInput(deviceId: string) {\n this.rtSee.setVideoInputDevice(deviceId);\n }\n}\n","<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","import { Component, Input, OnInit } from '@angular/core';\nimport { RTSeePeerConnection } from '@rtsee/core';\nimport { interval } from 'rxjs';\n\n@Component({\n selector: 'ngx-rtsee-soundbar',\n templateUrl: './rtsee-soundbar.component.html',\n styleUrls: ['./rtsee-soundbar.component.scss'],\n})\nexport class RtseeSoundbarComponent implements OnInit {\n intervalLength: number;\n noiceLevel: number;\n scaleOneLevel: number;\n scaleTwoLevel: number;\n scaleThreeLevel: number;\n\n @Input() peer!: RTSeePeerConnection;\n constructor() {\n this.intervalLength = 1000;\n this.noiceLevel = 0;\n this.scaleOneLevel = 0;\n this.scaleTwoLevel = 0;\n this.scaleThreeLevel = 0;\n }\n\n ngOnInit(): void {\n this.startSoundMeterListening();\n }\n\n startSoundMeterListening() {\n const step = interval(1000 / 10);\n step.subscribe(() => {\n if (!this.peer.soundMeter || !this.peer.soundMeter.level) {\n this.noiceLevel = 0;\n } else {\n this.noiceLevel = this.peer.soundMeter?.level * 100 || 0;\n }\n\n this.setSoundMeterHeights();\n });\n }\n\n setSoundMeterHeights() {\n const ZERO_LEVEL = 25;\n const SCALE_STEP = 25;\n const SCALE_ONE_TOP = ZERO_LEVEL + SCALE_STEP;\n const SCALE_TWO_TOP = SCALE_ONE_TOP + SCALE_STEP;\n\n if (!this.peer || !this.peer.soundMeter || this.noiceLevel < ZERO_LEVEL) {\n this.scaleOneLevel = 0;\n this.scaleTwoLevel = 0;\n this.scaleThreeLevel = 0;\n }\n\n const scaleOneValue = ((this.noiceLevel - ZERO_LEVEL) / SCALE_STEP) * 100;\n const scaleTwoValue =\n ((this.noiceLevel - SCALE_ONE_TOP) / SCALE_STEP) * 100;\n const scaleThreeValue =\n ((this.noiceLevel - SCALE_TWO_TOP) / SCALE_STEP) * 100;\n\n this.scaleOneLevel = scaleOneValue > 0 ? scaleOneValue : 0;\n this.scaleTwoLevel = scaleTwoValue > 0 ? scaleTwoValue : 0;\n this.scaleThreeLevel = scaleThreeValue > 0 ? scaleTwoValue : 0;\n }\n}\n","<div class=\"rtsee-soundbar\">\n <div class=\"rtsee-soundbar-scale\">\n <div class=\"rtsee-soundbar-scale-item\">\n <div class=\"rtsee-soundbar-scale-item-level rtsee-soundbar-scale-item-level-one\"\n [style.height.%]=\"scaleOneLevel\"\n ></div>\n </div>\n <div class=\"rtsee-soundbar-scale-item\">\n <div class=\"rtsee-soundbar-scale-item-level rtsee-soundbar-scale-item-level-two\"\n [style.height.%]=\"scaleTwoLevel\"\n ></div>\n </div>\n <div class=\"rtsee-soundbar-scale-item\">\n <div class=\"rtsee-soundbar-scale-item-level rtsee-soundbar-scale-item-level-three\"\n [style.height.%]=\"scaleThreeLevel\"\n ></div>\n </div>\n </div>\n</div>\n","import {\n AfterViewInit,\n Component,\n ElementRef,\n Input,\n ViewChild,\n} from '@angular/core';\nimport { RTSeePeerConnection } from '@rtsee/core';\n\n@Component({\n selector: 'ngx-rtsee-peer',\n templateUrl: './rtsee-peer.component.html',\n styleUrls: ['./rtsee-peer.component.scss'],\n})\nexport class RtseePeerComponent implements AfterViewInit {\n intervalLength: number;\n noiceLevel: number;\n\n @ViewChild('audioOutput') audioOutput?: ElementRef;\n @ViewChild('videoOutput') videoOutput?: ElementRef;\n @Input() peer!: RTSeePeerConnection;\n @Input() fullScreenMode?: boolean;\n constructor() {\n this.intervalLength = 1000;\n this.noiceLevel = 0;\n }\n\n ngAfterViewInit(): void {\n if (!this.audioOutput) {\n return;\n }\n this.peer.setAudioOutputElement(\n this.audioOutput.nativeElement as HTMLAudioElement\n );\n }\n}\n","<div class=\"rtsee-peer\" [ngClass]=\"{\n'rtsee-peer-video-disabled': !peer.remoteVideoStream || !peer.camera,\n'rtsee-full-screen-mode-peer': fullScreenMode\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 [muted]=\"true\"\n [srcObject]=\"peer.remoteVideoStream\"\n playsinline=\"true\"\n >\n <audio #audioOutput [srcObject]=\"peer.remoteAudioStream\" autoplay=\"true\"></audio>\n </video>\n <div class=\"rtsee-peer-soundbar\">\n <ngx-rtsee-soundbar [peer]=\"peer\"></ngx-rtsee-soundbar>\n </div>\n </div>\n</div>\n","import { Component, Input } from '@angular/core';\nimport { RTSee } from '@rtsee/core';\n\n@Component({\n selector: 'ngx-rtsee',\n templateUrl: './rtsee.component.html',\n styleUrls: ['./rtsee.component.scss'],\n})\nexport class RTSeeComponent {\n settingsViewEnabled: boolean;\n fullScreenModeEnabled: boolean;\n\n @Input() rtSee!: RTSee;\n constructor() {\n this.settingsViewEnabled = false;\n this.fullScreenModeEnabled = false;\n }\n\n toggleSettings() {\n this.settingsViewEnabled = !this.settingsViewEnabled;\n }\n\n toggleFullScreenMode() {\n this.fullScreenModeEnabled = !this.fullScreenModeEnabled;\n }\n}\n","<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 [ngClass]=\"{'rtsee-peer-active-speaker': peer.isActiveSpeaker}\"\n >\n <ngx-rtsee-peer [peer]=\"peer\" [fullScreenMode]=\"fullScreenModeEnabled\"></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","import { Component } from '@angular/core';\n\n@Component({\n selector: 'ngx-rtsee-peers-list',\n templateUrl: './rtsee-peers-list.component.html',\n styleUrls: ['./rtsee-peers-list.component.scss'],\n})\nexport class RtseePeersListComponent {}\n","<p>rtsee-peers-list works!</p>\n","import { NgModule } from '@angular/core';\nimport { RTSeeComponent } from './components/rtsee/rtsee.component';\nimport { RTSeeControlsComponent } from './components/rtsee/rtsee-controls/rtsee-controls.component';\nimport { CommonModule } from '@angular/common';\nimport { RtseePeerComponent } from './components/rtsee-peer/rtsee-peer.component';\nimport { RtseeSoundbarComponent } from './components/rtsee-soundbar/rtsee-soundbar.component';\nimport { RtseePeersListComponent } from './components/rtsee-peers-list/rtsee-peers-list.component';\nimport { MatIconModule } from '@angular/material/icon';\nimport { MatButtonModule } from '@angular/material/button';\nimport { RtseeSettingsComponent } from './components/rtsee-settings/rtsee-settings.component';\nimport { MatSelectModule } from '@angular/material/select';\nimport { BrowserAnimationsModule } from '@angular/platform-browser/animations';\nimport { MatFormFieldModule } from '@angular/material/form-field';\n\n@NgModule({\n declarations: [\n RTSeeComponent,\n RTSeeControlsComponent,\n RtseePeerComponent,\n RtseeSoundbarComponent,\n RtseePeersListComponent,\n RtseeSettingsComponent,\n ],\n imports: [\n CommonModule,\n MatIconModule,\n MatButtonModule,\n MatSelectModule,\n BrowserAnimationsModule,\n MatFormFieldModule,\n ],\n exports: [RTSeeComponent],\n})\nexport class RTSeeModule {}\n","/*\n * Public API Surface of ngx\n */\n\nexport * from './lib/ngx.service';\nexport * from './lib/components/rtsee/rtsee-controls/rtsee-controls.component';\nexport * from './lib/components/rtsee/rtsee.component';\nexport * from './lib/ngx.module';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"rtsee-ngx.js","sources":["../../../projects/ngx/src/lib/ngx.service.ts","../../../projects/ngx/src/lib/components/rtsee/rtsee-controls/rtsee-controls.component.ts","../../../projects/ngx/src/lib/components/rtsee/rtsee-controls/rtsee-controls.component.html","../../../projects/ngx/src/lib/components/rtsee-settings/rtsee-settings.component.ts","../../../projects/ngx/src/lib/components/rtsee-settings/rtsee-settings.component.html","../../../projects/ngx/src/lib/components/rtsee-soundbar/rtsee-soundbar.component.ts","../../../projects/ngx/src/lib/components/rtsee-soundbar/rtsee-soundbar.component.html","../../../projects/ngx/src/lib/components/rtsee-peer/rtsee-peer.component.ts","../../../projects/ngx/src/lib/components/rtsee-peer/rtsee-peer.component.html","../../../projects/ngx/src/lib/components/rtsee/rtsee.component.ts","../../../projects/ngx/src/lib/components/rtsee/rtsee.component.html","../../../projects/ngx/src/lib/components/rtsee-peers-list/rtsee-peers-list.component.ts","../../../projects/ngx/src/lib/components/rtsee-peers-list/rtsee-peers-list.component.html","../../../projects/ngx/src/lib/ngx.module.ts","../../../projects/ngx/src/public-api.ts","../../../projects/ngx/src/rtsee-ngx.ts"],"sourcesContent":["import { Injectable } from '@angular/core';\n\n@Injectable({\n providedIn: 'root',\n})\nexport class NgxService {\n lol: string;\n constructor() {\n this.lol = 'lol';\n }\n}\n","import { Component, Input } from '@angular/core';\nimport { RTSee } from '@rtsee/core';\n\n@Component({\n selector: 'ngx-rtsee-controls',\n templateUrl: './rtsee-controls.component.html',\n styleUrls: ['./rtsee-controls.component.scss'],\n})\nexport class RTSeeControlsComponent {\n @Input() rtsee!: RTSee;\n @Input() fullScreenMode?: boolean;\n\n onPresentClicked() {\n return this.rtsee.isPresenter\n ? this.rtsee.stopScreenShare()\n : this.rtsee.startScreenShare();\n }\n}\n","<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","import { Component, Input, OnInit } from '@angular/core';\nimport { RTSee } from '@rtsee/core';\n\n@Component({\n selector: 'ngx-rtsee-settings',\n templateUrl: './rtsee-settings.component.html',\n styleUrls: ['./rtsee-settings.component.scss'],\n})\nexport class RtseeSettingsComponent implements OnInit {\n availableAudioInputDevices: MediaDeviceInfo[];\n availableVideoInputDevices: MediaDeviceInfo[];\n availableAudioOutputDevices: MediaDeviceInfo[];\n\n @Input() rtSee!: RTSee;\n @Input() fullScreenMode!: boolean;\n constructor() {\n this.availableAudioInputDevices = [];\n this.availableVideoInputDevices = [];\n this.availableAudioOutputDevices = [];\n }\n\n ngOnInit(): void {\n this.refreshSelectOptions();\n }\n\n refreshSelectOptions() {\n void this.rtSee.refreshMediaDevicesList();\n }\n\n setAudioInput(deviceId: string) {\n this.rtSee.setAudioInputDevice(deviceId);\n console.log(deviceId);\n }\n\n setAudioOutput(deviceId: string) {\n this.rtSee.setAudioOutputDevice(deviceId);\n }\n\n setVideoInput(deviceId: string) {\n this.rtSee.setVideoInputDevice(deviceId);\n }\n}\n","<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","import { Component, Input, OnInit } from '@angular/core';\nimport { RTSeePeerConnection } from '@rtsee/core';\nimport { interval } from 'rxjs';\n\n@Component({\n selector: 'ngx-rtsee-soundbar',\n templateUrl: './rtsee-soundbar.component.html',\n styleUrls: ['./rtsee-soundbar.component.scss'],\n})\nexport class RtseeSoundbarComponent implements OnInit {\n intervalLength: number;\n noiceLevel: number;\n scaleOneLevel: number;\n scaleTwoLevel: number;\n scaleThreeLevel: number;\n\n @Input() peer!: RTSeePeerConnection;\n constructor() {\n this.intervalLength = 1000;\n this.noiceLevel = 0;\n this.scaleOneLevel = 0;\n this.scaleTwoLevel = 0;\n this.scaleThreeLevel = 0;\n }\n\n ngOnInit(): void {\n this.startSoundMeterListening();\n }\n\n startSoundMeterListening() {\n const step = interval(1000 / 10);\n step.subscribe(() => {\n if (!this.peer.soundMeter || !this.peer.soundMeter.level) {\n this.noiceLevel = 0;\n } else {\n this.noiceLevel = this.peer.soundMeter?.level * 100 || 0;\n }\n\n this.setSoundMeterHeights();\n });\n }\n\n setSoundMeterHeights() {\n const ZERO_LEVEL = 25;\n const SCALE_STEP = 25;\n const SCALE_ONE_TOP = ZERO_LEVEL + SCALE_STEP;\n const SCALE_TWO_TOP = SCALE_ONE_TOP + SCALE_STEP;\n\n if (!this.peer || !this.peer.soundMeter || this.noiceLevel < ZERO_LEVEL) {\n this.scaleOneLevel = 0;\n this.scaleTwoLevel = 0;\n this.scaleThreeLevel = 0;\n }\n\n const scaleOneValue = ((this.noiceLevel - ZERO_LEVEL) / SCALE_STEP) * 100;\n const scaleTwoValue =\n ((this.noiceLevel - SCALE_ONE_TOP) / SCALE_STEP) * 100;\n const scaleThreeValue =\n ((this.noiceLevel - SCALE_TWO_TOP) / SCALE_STEP) * 100;\n\n this.scaleOneLevel = scaleOneValue > 0 ? scaleOneValue : 0;\n this.scaleTwoLevel = scaleTwoValue > 0 ? scaleTwoValue : 0;\n this.scaleThreeLevel = scaleThreeValue > 0 ? scaleTwoValue : 0;\n }\n}\n","<div class=\"rtsee-soundbar\">\n <div class=\"rtsee-soundbar-scale\">\n <div class=\"rtsee-soundbar-scale-item\">\n <div class=\"rtsee-soundbar-scale-item-level rtsee-soundbar-scale-item-level-one\"\n [style.height.%]=\"scaleOneLevel\"\n ></div>\n </div>\n <div class=\"rtsee-soundbar-scale-item\">\n <div class=\"rtsee-soundbar-scale-item-level rtsee-soundbar-scale-item-level-two\"\n [style.height.%]=\"scaleTwoLevel\"\n ></div>\n </div>\n <div class=\"rtsee-soundbar-scale-item\">\n <div class=\"rtsee-soundbar-scale-item-level rtsee-soundbar-scale-item-level-three\"\n [style.height.%]=\"scaleThreeLevel\"\n ></div>\n </div>\n </div>\n</div>\n","import {\n AfterViewInit,\n Component,\n ElementRef,\n Input,\n ViewChild,\n} from '@angular/core';\nimport { RTSeePeerConnection } from '@rtsee/core';\n\n@Component({\n selector: 'ngx-rtsee-peer',\n templateUrl: './rtsee-peer.component.html',\n styleUrls: ['./rtsee-peer.component.scss'],\n})\nexport class RtseePeerComponent implements AfterViewInit {\n intervalLength: number;\n noiceLevel: number;\n\n @ViewChild('audioOutput') audioOutput?: ElementRef;\n @ViewChild('videoOutput') videoOutput?: ElementRef;\n @Input() peer!: RTSeePeerConnection;\n\n constructor() {\n this.intervalLength = 1000;\n this.noiceLevel = 0;\n }\n\n ngAfterViewInit(): void {\n if (!this.audioOutput) {\n return;\n }\n this.peer.setAudioOutputElement(\n this.audioOutput.nativeElement as HTMLAudioElement\n );\n }\n}\n","<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","import { Component, Input } from '@angular/core';\nimport { RTSee } from '@rtsee/core';\n\n@Component({\n selector: 'ngx-rtsee',\n templateUrl: './rtsee.component.html',\n styleUrls: ['./rtsee.component.scss'],\n})\nexport class RTSeeComponent {\n settingsViewEnabled: boolean;\n fullScreenModeEnabled: boolean;\n\n @Input() rtSee!: RTSee;\n constructor() {\n this.settingsViewEnabled = false;\n this.fullScreenModeEnabled = false;\n }\n\n toggleSettings() {\n this.settingsViewEnabled = !this.settingsViewEnabled;\n }\n\n toggleFullScreenMode() {\n this.fullScreenModeEnabled = !this.fullScreenModeEnabled;\n }\n}\n","<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","import { Component } from '@angular/core';\n\n@Component({\n selector: 'ngx-rtsee-peers-list',\n templateUrl: './rtsee-peers-list.component.html',\n styleUrls: ['./rtsee-peers-list.component.scss'],\n})\nexport class RtseePeersListComponent {}\n","<p>rtsee-peers-list works!</p>\n","import { NgModule } from '@angular/core';\nimport { RTSeeComponent } from './components/rtsee/rtsee.component';\nimport { RTSeeControlsComponent } from './components/rtsee/rtsee-controls/rtsee-controls.component';\nimport { CommonModule } from '@angular/common';\nimport { RtseePeerComponent } from './components/rtsee-peer/rtsee-peer.component';\nimport { RtseeSoundbarComponent } from './components/rtsee-soundbar/rtsee-soundbar.component';\nimport { RtseePeersListComponent } from './components/rtsee-peers-list/rtsee-peers-list.component';\nimport { MatIconModule } from '@angular/material/icon';\nimport { MatButtonModule } from '@angular/material/button';\nimport { RtseeSettingsComponent } from './components/rtsee-settings/rtsee-settings.component';\nimport { MatSelectModule } from '@angular/material/select';\nimport { BrowserAnimationsModule } from '@angular/platform-browser/animations';\nimport { MatFormFieldModule } from '@angular/material/form-field';\n\n@NgModule({\n declarations: [\n RTSeeComponent,\n RTSeeControlsComponent,\n RtseePeerComponent,\n RtseeSoundbarComponent,\n RtseePeersListComponent,\n RtseeSettingsComponent,\n ],\n imports: [\n CommonModule,\n MatIconModule,\n MatButtonModule,\n MatSelectModule,\n BrowserAnimationsModule,\n MatFormFieldModule,\n ],\n exports: [RTSeeComponent],\n})\nexport class RTSeeModule {}\n","/*\n * Public API Surface of ngx\n */\n\nexport * from './lib/ngx.service';\nexport * from './lib/components/rtsee/rtsee-controls/rtsee-controls.component';\nexport * from './lib/components/rtsee/rtsee.component';\nexport * from './lib/ngx.module';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|
|
@@ -7,9 +7,8 @@ export declare class RtseePeerComponent implements AfterViewInit {
|
|
|
7
7
|
audioOutput?: ElementRef;
|
|
8
8
|
videoOutput?: ElementRef;
|
|
9
9
|
peer: RTSeePeerConnection;
|
|
10
|
-
fullScreenMode?: boolean;
|
|
11
10
|
constructor();
|
|
12
11
|
ngAfterViewInit(): void;
|
|
13
12
|
static ɵfac: i0.ɵɵFactoryDeclaration<RtseePeerComponent, never>;
|
|
14
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<RtseePeerComponent, "ngx-rtsee-peer", never, { "peer": "peer";
|
|
13
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<RtseePeerComponent, "ngx-rtsee-peer", never, { "peer": "peer"; }, {}, never, never>;
|
|
15
14
|
}
|
package/package.json
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
{
|
|
2
|
-
"version": "0.0.
|
|
2
|
+
"version": "0.0.11",
|
|
3
3
|
"name": "@rtsee/ngx",
|
|
4
4
|
"module": "./dist/ngx/esm2015/public-api.js",
|
|
5
5
|
"types": "./dist/ngx/rtsee-ngx.d.ts",
|
|
@@ -43,9 +43,9 @@
|
|
|
43
43
|
"@angular/compiler-cli": "~12.1.2",
|
|
44
44
|
"@types/jest": "^26.0.24",
|
|
45
45
|
"@types/node": "^12.11.1",
|
|
46
|
-
"@typescript-eslint/eslint-plugin": "^
|
|
47
|
-
"@typescript-eslint/parser": "^
|
|
48
|
-
"eslint": "^
|
|
46
|
+
"@typescript-eslint/eslint-plugin": "^4.33.0",
|
|
47
|
+
"@typescript-eslint/parser": "^4.33.0",
|
|
48
|
+
"eslint": "^7.32.0",
|
|
49
49
|
"eslint-config-prettier": "^8.3.0",
|
|
50
50
|
"eslint-plugin-jest": "^23.1.1",
|
|
51
51
|
"jest": "^27.0.6",
|
|
@@ -58,5 +58,5 @@
|
|
|
58
58
|
"publishConfig": {
|
|
59
59
|
"access": "public"
|
|
60
60
|
},
|
|
61
|
-
"gitHead": "
|
|
61
|
+
"gitHead": "6fb37b8b1a2d3c83a56dbdaad7f71d9a665bd94b"
|
|
62
62
|
}
|