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);
width: 170px;
}
.item-menu.mobile {
width: 50px !important;
}
.item-content {
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 class="settings-container" fxFlex="100%" fxLayoutAlign="space-evenly none">
<div class="item-menu">
<mat-selection-list #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">
<div class="item-menu" [ngClass]="{ mobile: isMobile }">
<mat-selection-list
#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>
<div mat-line>{{ 'PANEL.SETTINGS.GENERAL' | translate }}</div>
<div mat-line *ngIf="!isMobile">{{ 'PANEL.SETTINGS.GENERAL' | translate }}</div>
</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>
<div mat-line>{{ 'PANEL.SETTINGS.VIDEO' | translate }}</div>
<div mat-line *ngIf="!isMobile">{{ 'PANEL.SETTINGS.VIDEO' | translate }}</div>
</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>
<div mat-line>{{ 'PANEL.SETTINGS.AUDIO' | translate }}</div>
<div mat-line *ngIf="!isMobile">{{ 'PANEL.SETTINGS.AUDIO' | translate }}</div>
</mat-list-option>
<mat-list-option
*ngIf="showCaptions"
@ -29,7 +48,7 @@
id="captions-opt"
>
<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-selection-list>
</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 { OpenViduAngularConfigService } from '../../../services/config/openvidu-angular.config.service';
import { PanelEvent, PanelService } from '../../../services/panel/panel.service';
import { PlatformService } from '../../../services/platform/platform.service';
/**
* @internal
@ -16,10 +17,16 @@ export class SettingsPanelComponent implements OnInit {
settingsOptions: typeof PanelSettingsOptions = PanelSettingsOptions;
selectedOption: PanelSettingsOptions = PanelSettingsOptions.GENERAL;
showCaptions: boolean = true;
private captionsSubs: 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() {
this.isMobile = this.platformService.isMobile();
this.subscribeToPanelToggling();
this.subscribeToDirectives();
}
@ -31,9 +38,9 @@ export class SettingsPanelComponent implements OnInit {
close() {
this.panelService.togglePanel(PanelType.SETTINGS);
}
onSelectionChanged(option: PanelSettingsOptions){
onSelectionChanged(option: PanelSettingsOptions) {
this.selectedOption = option;
}
}
private subscribeToDirectives() {
this.captionsSubs = this.libService.captionsButtonObs.subscribe((value: boolean) => {
@ -42,12 +49,10 @@ export class SettingsPanelComponent implements OnInit {
}
private subscribeToPanelToggling() {
this.panelSubscription = this.panelService.panelOpenedObs.subscribe(
(ev: PanelEvent) => {
if (ev.type === PanelType.SETTINGS && !!ev.expand) {
this.selectedOption = ev.expand as PanelSettingsOptions;
}
this.panelSubscription = this.panelService.panelOpenedObs.subscribe((ev: PanelEvent) => {
if (ev.type === PanelType.SETTINGS && !!ev.expand) {
this.selectedOption = ev.expand as PanelSettingsOptions;
}
);
});
}
}