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

openvidu-components: Updated settings panel style on mobile devices

pull/758/head
Carlos Santos 2022-11-03 16:18:06 +01:00
parent 0341470fc0
commit 4d80f823b4
3 changed files with 46 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/settings-panel/settings-panel.component.css
View File

@ -8,6 +8,9 @@
border-right: 1px solid var(--ov-secondary-color); border-right: 1px solid var(--ov-secondary-color);
width: 170px; width: 170px;
} }
.item-menu.mobile {
width: 50px !important;
}
.item-content { .item-content {
padding: 16px; padding: 16px;

37
openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/settings-panel/settings-panel.component.html
View File

@ -7,19 +7,38 @@
</div> </div>
<div class="settings-container" fxFlex="100%" fxLayoutAlign="space-evenly none"> <div class="settings-container" fxFlex="100%" fxLayoutAlign="space-evenly none">
<div class="item-menu"> <div class="item-menu" [ngClass]="{ mobile: isMobile }">
<mat-selection-list #optionList (selectionChange)="onSelectionChanged(optionList.selectedOptions.selected[0]?.value)" [multiple]="false"> <mat-selection-list
<mat-list-option class="option" id="general-opt" [selected]="selectedOption === settingsOptions.GENERAL" [value]="settingsOptions.GENERAL"> #optionList
(selectionChange)="onSelectionChanged(optionList.selectedOptions.selected[0]?.value)"
[multiple]="false"
>
<mat-list-option
class="option"
id="general-opt"
[selected]="selectedOption === settingsOptions.GENERAL"
[value]="settingsOptions.GENERAL"
>
<mat-icon mat-list-icon>manage_accounts</mat-icon> <mat-icon mat-list-icon>manage_accounts</mat-icon>
<div mat-line>{{ 'PANEL.SETTINGS.GENERAL' | translate }}</div> <div mat-line *ngIf="!isMobile">{{ 'PANEL.SETTINGS.GENERAL' | translate }}</div>
</mat-list-option> </mat-list-option>
<mat-list-option class="option" id="video-opt" [selected]="selectedOption === settingsOptions.VIDEO" [value]="settingsOptions.VIDEO"> <mat-list-option
class="option"
id="video-opt"
[selected]="selectedOption === settingsOptions.VIDEO"
[value]="settingsOptions.VIDEO"
>
<mat-icon mat-list-icon>videocam</mat-icon> <mat-icon mat-list-icon>videocam</mat-icon>
<div mat-line>{{ 'PANEL.SETTINGS.VIDEO' | translate }}</div> <div mat-line *ngIf="!isMobile">{{ 'PANEL.SETTINGS.VIDEO' | translate }}</div>
</mat-list-option> </mat-list-option>
<mat-list-option class="option" id="audio-opt" [selected]="selectedOption === settingsOptions.AUDIO" [value]="settingsOptions.AUDIO"> <mat-list-option
class="option"
id="audio-opt"
[selected]="selectedOption === settingsOptions.AUDIO"
[value]="settingsOptions.AUDIO"
>
<mat-icon mat-list-icon>mic</mat-icon> <mat-icon mat-list-icon>mic</mat-icon>
<div mat-line>{{ 'PANEL.SETTINGS.AUDIO' | translate }}</div> <div mat-line *ngIf="!isMobile">{{ 'PANEL.SETTINGS.AUDIO' | translate }}</div>
</mat-list-option> </mat-list-option>
<mat-list-option <mat-list-option
*ngIf="showCaptions" *ngIf="showCaptions"
@ -29,7 +48,7 @@
id="captions-opt" id="captions-opt"
> >
<mat-icon mat-list-icon>closed_caption</mat-icon> <mat-icon mat-list-icon>closed_caption</mat-icon>
<div mat-line>{{ 'PANEL.SETTINGS.CAPTIONS' | translate }}</div> <div mat-line *ngIf="!isMobile">{{ 'PANEL.SETTINGS.CAPTIONS' | translate }}</div>
</mat-list-option> </mat-list-option>
</mat-selection-list> </mat-selection-list>
</div> </div>

25
openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/settings-panel/settings-panel.component.ts
View File

@ -3,6 +3,7 @@ import { Subscription } from 'rxjs';
import { PanelSettingsOptions, PanelType } from '../../../models/panel.model'; import { PanelSettingsOptions, PanelType } from '../../../models/panel.model';
import { OpenViduAngularConfigService } from '../../../services/config/openvidu-angular.config.service'; import { OpenViduAngularConfigService } from '../../../services/config/openvidu-angular.config.service';
import { PanelEvent, PanelService } from '../../../services/panel/panel.service'; import { PanelEvent, PanelService } from '../../../services/panel/panel.service';
import { PlatformService } from '../../../services/platform/platform.service';
/** /**
* @internal * @internal
@ -16,10 +17,16 @@ export class SettingsPanelComponent implements OnInit {
settingsOptions: typeof PanelSettingsOptions = PanelSettingsOptions; settingsOptions: typeof PanelSettingsOptions = PanelSettingsOptions;
selectedOption: PanelSettingsOptions = PanelSettingsOptions.GENERAL; selectedOption: PanelSettingsOptions = PanelSettingsOptions.GENERAL;
showCaptions: boolean = true; showCaptions: boolean = true;
private captionsSubs: Subscription;
panelSubscription: Subscription; panelSubscription: Subscription;
constructor(private panelService: PanelService, private libService: OpenViduAngularConfigService) {} isMobile: boolean = false;
private captionsSubs: Subscription;
constructor(
private panelService: PanelService,
private platformService: PlatformService,
private libService: OpenViduAngularConfigService
) {}
ngOnInit() { ngOnInit() {
this.isMobile = this.platformService.isMobile();
this.subscribeToPanelToggling(); this.subscribeToPanelToggling();
this.subscribeToDirectives(); this.subscribeToDirectives();
} }
@ -31,9 +38,9 @@ export class SettingsPanelComponent implements OnInit {
close() { close() {
this.panelService.togglePanel(PanelType.SETTINGS); this.panelService.togglePanel(PanelType.SETTINGS);
} }
onSelectionChanged(option: PanelSettingsOptions){ onSelectionChanged(option: PanelSettingsOptions) {
this.selectedOption = option; this.selectedOption = option;
} }
private subscribeToDirectives() { private subscribeToDirectives() {
this.captionsSubs = this.libService.captionsButtonObs.subscribe((value: boolean) => { this.captionsSubs = this.libService.captionsButtonObs.subscribe((value: boolean) => {
@ -42,12 +49,10 @@ export class SettingsPanelComponent implements OnInit {
} }
private subscribeToPanelToggling() { private subscribeToPanelToggling() {
this.panelSubscription = this.panelService.panelOpenedObs.subscribe( this.panelSubscription = this.panelService.panelOpenedObs.subscribe((ev: PanelEvent) => {
(ev: PanelEvent) => { if (ev.type === PanelType.SETTINGS && !!ev.expand) {
if (ev.type === PanelType.SETTINGS && !!ev.expand) { this.selectedOption = ev.expand as PanelSettingsOptions;
this.selectedOption = ev.expand as PanelSettingsOptions;
}
} }
); });
} }
} }