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> <span>{{ 'ROOM.JOINING' | translate }}</span>
</div> </div>
} @else { } @else {
@if (viewportService.orientation() === 'landscape') { @if (viewportService.isMobile() && viewportService.orientation() === 'landscape') {
<!-- Landscape orientation warning --> <!-- Landscape orientation warning -->
<div id="landscape-warning" [@inOutAnimation]> <div id="landscape-warning" [@inOutAnimation]>
<div class="warning-message"> <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 // Computed property to determine if we should show collapsed menu
get shouldShowCollapsed(): boolean { get shouldShowCollapsed(): boolean {
return this.viewportService.isMobileView() || this.viewportService.isTabletDown(); return this.viewportService.isMobileView()
} }
// Get count of visible buttons // 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; display: flex;
justify-content: flex-end; justify-content: flex-end;
align-items: center; align-items: center;
ov-toolbar-panel-buttons {
display: contents;
}
} }
::ng-deep .menu-buttons-container:has(.collapsed-menu-container) { ::ng-deep .menu-buttons-container:has(.collapsed-menu-container) {
flex: 0; 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 ==== // ==== PUBLIC REACTIVE SIGNALS ====
/** /**
* Current viewport width (reactive) * Current viewport width
*/ */
readonly width = this._width.asReadonly(); readonly width = this._width.asReadonly();
/** /**
* Current viewport height (reactive) * Current viewport height
*/ */
readonly height = this._height.asReadonly(); readonly height = this._height.asReadonly();
/** /**
* Whether device supports touch interactions (reactive) * Whether device supports touch interactions
*/ */
readonly isTouchDevice = computed(() => this.platform.isTouchDevice()); readonly isTouchDevice = computed(() => this.platform.isTouchDevice());
/** /**
* Current viewport size category (computed) * Current viewport size category
*/ */
readonly viewportSize = computed<ViewportSize>(() => { readonly viewportSize = computed<ViewportSize>(() => {
const width = this._width(); 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'); 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'); 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); 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); 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); 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); readonly isDesktopUp = computed(() => this._width() >= this.BREAKPOINTS.desktop);
/** /**
* Complete viewport information (computed) * Complete viewport information
*/ */
readonly viewportInfo = computed<ViewportInfo>(() => ({ readonly viewportInfo = computed<ViewportInfo>(() => ({
width: this._width(), width: this._width(),