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

ov-components: refine viewport checks for mobile landscape orientation and improve SCSS for toolbar buttons

master
Carlos Santos 2025-09-22 14:18:01 +02:00
parent f11f0933b4
commit 776c45be3a
4 changed files with 21 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/session/session.component.html
View File

@ -4,7 +4,7 @@
<span>{{ 'ROOM.JOINING' | translate }}</span>
</div>
} @else {
@if (viewportService.orientation() === 'landscape') {
@if (viewportService.isMobile() && viewportService.orientation() === 'landscape') {
<!-- Landscape orientation warning -->
<div id="landscape-warning" [@inOutAnimation]>
<div class="warning-message">

2
openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/toolbar/toolbar-panel-buttons/toolbar-panel-buttons.component.ts
View File

@ -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

4
openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/toolbar/toolbar.component.scss
View File

@ -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;

30
openvidu-components-angular/projects/openvidu-components-angular/src/lib/services/viewport/viewport.service.ts
View File

@ -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<ViewportSize>(() => {
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<ViewportInfo>(() => ({
width: this._width(),