mirror of https://github.com/OpenVidu/openvidu.git
openvidu-testapp session options form behaviour fixed
pabloFuente
parent
ea78fe073a
commit
cc135f4d8b
|
|
@ -16,8 +16,8 @@
|
|||
|
||||
<div>
|
||||
<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 [(ngModel)]="publishTo" name="publishTo" (click)="toggleRadio()" [disabled]="session">Publish</md-checkbox>
|
||||
<md-checkbox name="subscribeTo" (change)="toggleSubscribeTo()" [checked]="subscribeTo && checkSubscribeTo" [disabled]="disableSubscribeTo">Subscribe</md-checkbox>
|
||||
<md-checkbox name="publishTo" (change)="togglePublishTo()" [checked]="publishTo && checkPublishTo" [disabled]="disablePublishTo">Publish</md-checkbox>
|
||||
</div>
|
||||
|
||||
<div class="inner-card" fxLayout="row" fxLayoutAlign="start start">
|
||||
|
|
@ -26,30 +26,29 @@
|
|||
<div>
|
||||
<h4>Send</h4>
|
||||
<div>
|
||||
<md-checkbox name="sendAudio" [(ngModel)]="sendAudio" [disabled]="!publishTo || session" [checked]="sendAudio && publishTo">Audio</md-checkbox>
|
||||
<md-checkbox name="sendVideo" [(ngModel)]="sendVideo" [disabled]="!publishTo || session" [checked]="sendVideo && publishTo"
|
||||
(click)="toggleRadio()">Video</md-checkbox>
|
||||
<md-checkbox name="sendAudio" (change)="toggleSendAudio()" [checked]="sendAudio && checkSendAudio" [disabled]="disableSendAudio">Audio</md-checkbox>
|
||||
<md-checkbox name="sendVideo" (change)="toggleSendVideo()" [checked]="sendVideo && checkSendVideo" [disabled]="disableSendVideo">Video</md-checkbox>
|
||||
</div>
|
||||
</div>
|
||||
<div style="padding-top: 5px;">
|
||||
<h4>Enter active</h4>
|
||||
<div>
|
||||
<md-checkbox name="activeAudio" [(ngModel)]="activeAudio" [disabled]="!sendAudio || !publishTo || session" [checked]="activeAudio && sendAudio && publishTo">Audio</md-checkbox>
|
||||
<md-checkbox name="activeVideo" [(ngModel)]="activeVideo" [disabled]="!sendVideo || !publishTo || session" [checked]="activeVideo && sendVideo && publishTo">Video</md-checkbox>
|
||||
<md-checkbox name="activeAudio" (change)="toggleActiveAudio()" [checked]="activeAudio && checkActiveAudio" [disabled]="disableActiveAudio">Audio</md-checkbox>
|
||||
<md-checkbox name="activeVideo" (change)="toggleActiveVideo()" [checked]="activeVideo && checkActiveVideo" [disabled]="disableActiveVideo">Video</md-checkbox>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
</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>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -16,25 +16,44 @@ export class OpenviduInstanceComponent implements OnInit, OnDestroy {
|
|||
@Input()
|
||||
openviduSecret: string;
|
||||
|
||||
// Session join data
|
||||
clientData: string;
|
||||
sessionName: string;
|
||||
|
||||
// Session options
|
||||
subscribeTo = true;
|
||||
publishTo = true;
|
||||
sendAudio = true;
|
||||
sendVideo = true;
|
||||
activeAudio = true;
|
||||
activeVideo = true;
|
||||
optionVideo = 'video';
|
||||
sendVideoRadio = true;
|
||||
subscribeToRemote = false;
|
||||
optionsVideo = 'video';
|
||||
|
||||
// Join form
|
||||
clientData: string;
|
||||
sessionName: string;
|
||||
// Form 'check' and 'disable' attributes
|
||||
checkSubscribeTo = true;
|
||||
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
|
||||
OV: OpenVidu;
|
||||
session: Session;
|
||||
publisher: Publisher;
|
||||
|
||||
// Session audio and video status
|
||||
audioMuted = false;
|
||||
videoMuted = false;
|
||||
audioIcon = 'mic';
|
||||
|
|
@ -108,8 +127,10 @@ export class OpenviduInstanceComponent implements OnInit, OnDestroy {
|
|||
this.updateVideoIcon();
|
||||
|
||||
this.publisher = OV.initPublisher('local-vid-' + this.session.connection.connectionId, {
|
||||
audio: this.activeAudio,
|
||||
video: this.activeVideo,
|
||||
audio: this.sendAudio,
|
||||
video: this.sendVideo,
|
||||
activeAudio: this.activeAudio,
|
||||
activeVideo: this.activeVideo,
|
||||
quality: 'MEDIUM'
|
||||
});
|
||||
|
||||
|
|
@ -173,10 +194,82 @@ export class OpenviduInstanceComponent implements OnInit, OnDestroy {
|
|||
$('#remote-vid-' + this.session.connection.connectionId).find('#data-' + connection.connectionId).remove();
|
||||
}
|
||||
|
||||
private toggleRadio(): void {
|
||||
if (this.publishTo && this.sendVideo) {
|
||||
this.optionVideo = 'video';
|
||||
toggleSubscribeTo(): void {
|
||||
this.subscribeTo = !this.subscribeTo;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue