From 776c45be3aec396f2a198d6514498e0adbc42aac Mon Sep 17 00:00:00 2001 From: Carlos Santos <4a.santos@gmail.com> Date: Mon, 22 Sep 2025 14:18:01 +0200 Subject: [PATCH] ov-components: refine viewport checks for mobile landscape orientation and improve SCSS for toolbar buttons --- .../components/session/session.component.html | 2 +- .../toolbar-panel-buttons.component.ts | 2 +- .../components/toolbar/toolbar.component.scss | 4 +++ .../lib/services/viewport/viewport.service.ts | 30 +++++++++---------- 4 files changed, 21 insertions(+), 17 deletions(-) diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/session/session.component.html b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/session/session.component.html index c04f5534..eaf7dc2e 100644 --- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/session/session.component.html +++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/session/session.component.html @@ -4,7 +4,7 @@ {{ 'ROOM.JOINING' | translate }} } @else { - @if (viewportService.orientation() === 'landscape') { + @if (viewportService.isMobile() && viewportService.orientation() === 'landscape') {
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/toolbar/toolbar-panel-buttons/toolbar-panel-buttons.component.ts b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/toolbar/toolbar-panel-buttons/toolbar-panel-buttons.component.ts index c9a2c951..aa68a9b8 100644 --- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/toolbar/toolbar-panel-buttons/toolbar-panel-buttons.component.ts +++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/toolbar/toolbar-panel-buttons/toolbar-panel-buttons.component.ts @@ -33,7 +33,7 @@ export class ToolbarPanelButtonsComponent { // Computed property to determine if we should show collapsed menu get shouldShowCollapsed(): boolean { - return this.viewportService.isMobileView() || this.viewportService.isTabletDown(); + return this.viewportService.isMobileView() } // Get count of visible buttons diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/toolbar/toolbar.component.scss b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/toolbar/toolbar.component.scss index 18464795..6dd15b65 100644 --- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/toolbar/toolbar.component.scss +++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/toolbar/toolbar.component.scss @@ -44,6 +44,10 @@ display: flex; justify-content: flex-end; align-items: center; + + ov-toolbar-panel-buttons { + display: contents; + } } ::ng-deep .menu-buttons-container:has(.collapsed-menu-container) { flex: 0; diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/services/viewport/viewport.service.ts b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/services/viewport/viewport.service.ts index ab5b8e45..af2b9d7b 100644 --- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/services/viewport/viewport.service.ts +++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/services/viewport/viewport.service.ts @@ -35,22 +35,22 @@ export class ViewportService implements OnDestroy { // ==== PUBLIC REACTIVE SIGNALS ==== /** - * Current viewport width (reactive) + * Current viewport width */ readonly width = this._width.asReadonly(); /** - * Current viewport height (reactive) + * Current viewport height */ readonly height = this._height.asReadonly(); /** - * Whether device supports touch interactions (reactive) + * Whether device supports touch interactions */ readonly isTouchDevice = computed(() => this.platform.isTouchDevice()); /** - * Current viewport size category (computed) + * Current viewport size category */ readonly viewportSize = computed(() => { const width = this._width(); @@ -68,47 +68,47 @@ export class ViewportService implements OnDestroy { }); /** - * Whether current viewport is mobile size (computed) + * Whether current viewport is mobile size */ - readonly isMobile = computed(() => this.viewportSize() === 'mobile'); + readonly isMobile = computed(() => this.viewportSize() === 'mobile' && this.platform.isTouchDevice()); /** - * Whether current viewport is tablet size (computed) + * Whether current viewport is tablet size */ - readonly isTablet = computed(() => this.viewportSize() === 'tablet'); + readonly isTablet = computed(() => this.viewportSize() === 'tablet' && this.platform.isTouchDevice()); /** - * Whether current viewport is desktop size (computed) + * Whether current viewport is desktop size */ readonly isDesktop = computed(() => this.viewportSize() === 'desktop'); /** - * Whether current viewport is wide desktop size (computed) + * Whether current viewport is wide desktop size */ readonly isWide = computed(() => this.viewportSize() === 'wide'); /** - * Whether current viewport is mobile or smaller (computed) + * Whether current viewport is mobile or smaller */ readonly isMobileView = computed(() => this._width() < this.BREAKPOINTS.tablet); /** - * Whether current viewport is tablet or smaller (computed) + * Whether current viewport is tablet or smaller */ readonly isTabletDown = computed(() => this._width() < this.BREAKPOINTS.desktop); /** - * Whether current viewport is tablet or larger (computed) + * Whether current viewport is tablet or larger */ readonly isTabletUp = computed(() => this._width() >= this.BREAKPOINTS.tablet); /** - * Whether current viewport is desktop or larger (computed) + * Whether current viewport is desktop or larger */ readonly isDesktopUp = computed(() => this._width() >= this.BREAKPOINTS.desktop); /** - * Complete viewport information (computed) + * Complete viewport information */ readonly viewportInfo = computed(() => ({ width: this._width(),