ambiser
/
openvidu
mirror of https://github.com/OpenVidu/openvidu.git
8
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

openvidu-testapp session options form behaviour fixed

pull/20/head
pabloFuente 2017-09-29 16:19:23 +02:00
parent ea78fe073a
commit cc135f4d8b
2 changed files with 112 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
openvidu-testapp/src/app/components/openvidu-instance/openvidu-instance.component.html
View File

@ -16,8 +16,8 @@
<div> <div>
<button id="join-btn" md-button (click)="joinSession()" [disabled]="session">JOIN</button> <button id="join-btn" md-button (click)="joinSession()" [disabled]="session">JOIN</button>
<md-checkbox [(ngModel)]="subscribeTo" name="subscribeTo" [disabled]="session">Subscribe</md-checkbox> <md-checkbox name="subscribeTo" (change)="toggleSubscribeTo()" [checked]="subscribeTo && checkSubscribeTo" [disabled]="disableSubscribeTo">Subscribe</md-checkbox>
<md-checkbox [(ngModel)]="publishTo" name="publishTo" (click)="toggleRadio()" [disabled]="session">Publish</md-checkbox> <md-checkbox name="publishTo" (change)="togglePublishTo()" [checked]="publishTo && checkPublishTo" [disabled]="disablePublishTo">Publish</md-checkbox>
</div> </div>
<div class="inner-card" fxLayout="row" fxLayoutAlign="start start"> <div class="inner-card" fxLayout="row" fxLayoutAlign="start start">
@ -26,30 +26,29 @@
<div> <div>
<h4>Send</h4> <h4>Send</h4>
<div> <div>
<md-checkbox name="sendAudio" [(ngModel)]="sendAudio" [disabled]="!publishTo || session" [checked]="sendAudio && publishTo">Audio</md-checkbox> <md-checkbox name="sendAudio" (change)="toggleSendAudio()" [checked]="sendAudio && checkSendAudio" [disabled]="disableSendAudio">Audio</md-checkbox>
<md-checkbox name="sendVideo" [(ngModel)]="sendVideo" [disabled]="!publishTo || session" [checked]="sendVideo && publishTo" <md-checkbox name="sendVideo" (change)="toggleSendVideo()" [checked]="sendVideo && checkSendVideo" [disabled]="disableSendVideo">Video</md-checkbox>
(click)="toggleRadio()">Video</md-checkbox>
</div> </div>
</div> </div>
<div style="padding-top: 5px;"> <div style="padding-top: 5px;">
<h4>Enter active</h4> <h4>Enter active</h4>
<div> <div>
<md-checkbox name="activeAudio" [(ngModel)]="activeAudio" [disabled]="!sendAudio || !publishTo || session" [checked]="activeAudio && sendAudio && publishTo">Audio</md-checkbox> <md-checkbox name="activeAudio" (change)="toggleActiveAudio()" [checked]="activeAudio && checkActiveAudio" [disabled]="disableActiveAudio">Audio</md-checkbox>
<md-checkbox name="activeVideo" [(ngModel)]="activeVideo" [disabled]="!sendVideo || !publishTo || session" [checked]="activeVideo && sendVideo && publishTo">Video</md-checkbox> <md-checkbox name="activeVideo" (change)="toggleActiveVideo()" [checked]="activeVideo && checkActiveVideo" [disabled]="disableActiveVideo">Video</md-checkbox>
</div> </div>
</div> </div>
</div> </div>
<div fxFlex="40"> <div fxFlex="40">
<md-radio-group [(ngModel)]="optionVideo" [disabled]="!sendVideo || !publishTo || session" [ngModelOptions]="{standalone: true}"> <md-radio-group [(ngModel)]="optionsVideo" [disabled]="disableRadioButtons" [ngModelOptions]="{standalone: true}">
<div> <div>
<md-radio-button value="video" [checked]="publishTo && sendVideo">Video</md-radio-button> <md-radio-button value="video" [checked]="checkRadioVideo && optionsVideo==='video'">Video</md-radio-button>
</div> </div>
<div> <div>
<md-radio-button value="screen" [checked]="publishTo && sendVideo && optionVideo==='screen'">Screen</md-radio-button> <md-radio-button value="screen" [checked]="checkRadioScreen && optionsVideo==='screen'">Screen</md-radio-button>
</div> </div>
</md-radio-group> </md-radio-group>
<md-checkbox class="subscribe-remote-check" name="subscribeToRemote" [(ngModel)]="subscribeToRemote" [disabled]="(!sendAudio && !sendVideo) || !publishTo || session" <md-checkbox class="subscribe-remote-check" name="subscribeToRemote" (change)="subscribeToRemote = !subscribeToRemote" [disabled]="(!sendAudio && !sendVideo) || !publishTo || session"
[checked]="(sendAudio || sendVideo) && publishTo && subscribeToRemote">Subscribe<br>to remote</md-checkbox> [checked]="(sendAudio || sendVideo) && publishTo && subscribeToRemote">Subscribe<br>to remote</md-checkbox>
</div> </div>

111
openvidu-testapp/src/app/components/openvidu-instance/openvidu-instance.component.ts
View File

@ -16,25 +16,44 @@ export class OpenviduInstanceComponent implements OnInit, OnDestroy {
@Input() @Input()
openviduSecret: string; openviduSecret: string;
// Session join data
clientData: string;
sessionName: string;
// Session options
subscribeTo = true; subscribeTo = true;
publishTo = true; publishTo = true;
sendAudio = true; sendAudio = true;
sendVideo = true; sendVideo = true;
activeAudio = true; activeAudio = true;
activeVideo = true; activeVideo = true;
optionVideo = 'video';
sendVideoRadio = true; sendVideoRadio = true;
subscribeToRemote = false; subscribeToRemote = false;
optionsVideo = 'video';
// Join form // Form 'check' and 'disable' attributes
clientData: string; checkSubscribeTo = true;
sessionName: string; checkPublishTo = true;
checkSendAudio = true;
checkSendVideo = true;
checkActiveAudio = true;
checkActiveVideo = true;
checkRadioVideo = true;
checkRadioScreen = false;
disableSubscribeTo = false;
disablePublishTo = false;
disableSendAudio = false;
disableSendVideo = false;
disableActiveAudio = false;
disableActiveVideo = false;
disableRadioButtons = false;
// OpenVidu objects // OpenVidu objects
OV: OpenVidu; OV: OpenVidu;
session: Session; session: Session;
publisher: Publisher; publisher: Publisher;
// Session audio and video status
audioMuted = false; audioMuted = false;
videoMuted = false; videoMuted = false;
audioIcon = 'mic'; audioIcon = 'mic';
@ -108,8 +127,10 @@ export class OpenviduInstanceComponent implements OnInit, OnDestroy {
this.updateVideoIcon(); this.updateVideoIcon();
this.publisher = OV.initPublisher('local-vid-' + this.session.connection.connectionId, { this.publisher = OV.initPublisher('local-vid-' + this.session.connection.connectionId, {
audio: this.activeAudio, audio: this.sendAudio,
video: this.activeVideo, video: this.sendVideo,
activeAudio: this.activeAudio,
activeVideo: this.activeVideo,
quality: 'MEDIUM' quality: 'MEDIUM'
}); });
@ -173,10 +194,82 @@ export class OpenviduInstanceComponent implements OnInit, OnDestroy {
$('#remote-vid-' + this.session.connection.connectionId).find('#data-' + connection.connectionId).remove(); $('#remote-vid-' + this.session.connection.connectionId).find('#data-' + connection.connectionId).remove();
} }
private toggleRadio(): void { toggleSubscribeTo(): void {
if (this.publishTo && this.sendVideo) { this.subscribeTo = !this.subscribeTo;
this.optionVideo = 'video'; }
togglePublishTo(): void {
this.publishTo = !this.publishTo;
this.sendAudio = this.publishTo;
this.sendVideo = this.publishTo;
this.activeAudio = this.publishTo;
this.activeVideo = this.publishTo;
this.checkPublishTo = this.publishTo;
this.checkSendAudio = this.publishTo;
this.checkSendVideo = this.publishTo;
this.checkActiveAudio = this.publishTo;
this.checkActiveVideo = this.publishTo;
if (this.publishTo) {
this.checkRadioVideo = true;
this.optionsVideo = 'video';
} else {
this.checkRadioVideo = false;
this.optionsVideo = '';
}
this.disableSendAudio = !this.publishTo;
this.disableSendVideo = !this.publishTo;
this.disableActiveAudio = !this.publishTo;
this.disableActiveVideo = !this.publishTo;
this.disableRadioButtons = !this.publishTo;
this.subscribeToRemote = false;
}
toggleSendAudio(): void {
this.sendAudio = !this.sendAudio;
this.activeAudio = this.sendAudio;
this.checkActiveAudio = this.sendAudio;
this.disableActiveAudio = !this.sendAudio;
if (!this.sendAudio && !this.sendVideo && this.publishTo) {
this.togglePublishTo();
} }
} }
toggleSendVideo(): void {
this.sendVideo = !this.sendVideo;
this.activeVideo = this.sendVideo;
this.checkActiveVideo = this.sendVideo;
this.checkRadioScreen = false;
if (this.sendVideo) {
this.checkRadioVideo = true;
this.optionsVideo = 'video';
} else {
this.checkRadioVideo = false;
this.optionsVideo = '';
}
this.disableActiveVideo = !this.sendVideo;
this.disableRadioButtons = !this.sendVideo;
if (!this.sendAudio && !this.sendVideo && this.publishTo) {
this.togglePublishTo();
}
}
toggleActiveAudio(): void {
this.activeAudio = !this.activeAudio;
}
toggleActiveVideo(): void {
this.activeVideo = !this.activeVideo;
}
} }