From 3c629c8511783656408f662102584b47d0a6a7a5 Mon Sep 17 00:00:00 2001 From: Carlos Santos <4a.santos@gmail.com> Date: Fri, 4 Jul 2025 12:16:26 +0200 Subject: [PATCH] frontend: refactor room recordings page layout and enhance loading state styling --- .../room-recordings.component.html | 96 ++++++----- .../room-recordings.component.scss | 150 ++++++++++++++++-- .../room-recordings.component.ts | 6 +- 3 files changed, 184 insertions(+), 68 deletions(-) diff --git a/frontend/projects/shared-meet-components/src/lib/pages/room-recordings/room-recordings.component.html b/frontend/projects/shared-meet-components/src/lib/pages/room-recordings/room-recordings.component.html index a31c027..d2ce311 100644 --- a/frontend/projects/shared-meet-components/src/lib/pages/room-recordings/room-recordings.component.html +++ b/frontend/projects/shared-meet-components/src/lib/pages/room-recordings/room-recordings.component.html @@ -1,55 +1,49 @@ -
- - - Recordings for room: {{ roomId }} - - +
+ +
+
+ video_library +
+

+ Recordings for room + + {{ roomId }} + +

+
+
+
-
- @if (isLoading) { - @if (showLoadingSpinner) { - -
-
-
-
- video_library -

Loading Recordings

-
-

Please wait while we fetch your recordings...

-
- - -
-
- } - } @else { -
-
-
- video_library -

Recordings

-
-

- Manage recordings from room, play, download, and share them with others. -

-
- -
- - + + @if (isLoading && showLoadingSpinner) { +
+
+ video_library +

Loading Recordings

+

Please wait while we fetch your recordings...

+
- } -
+
+ } + + + @if (!isLoading || recordings().length > 0) { +
+
+ + +
+
+ }
diff --git a/frontend/projects/shared-meet-components/src/lib/pages/room-recordings/room-recordings.component.scss b/frontend/projects/shared-meet-components/src/lib/pages/room-recordings/room-recordings.component.scss index f8b6169..114b7d9 100644 --- a/frontend/projects/shared-meet-components/src/lib/pages/room-recordings/room-recordings.component.scss +++ b/frontend/projects/shared-meet-components/src/lib/pages/room-recordings/room-recordings.component.scss @@ -1,26 +1,146 @@ @import '../../../../../../src/assets/styles/design-tokens'; -.dashboard-container { - height: 100%; +// === ROOM RECORDINGS PAGE LAYOUT === + +.recordings-page-header { + @include ov-container; + @include ov-page-content; + padding-top: var(--ov-meet-spacing-xxl); + background: var(--ov-meet-background-color); + gap: var(--ov-meet-spacing-xxl); } -.header { - height: 50px; - background-color: var(--ov-primary-action-color); - color: var(--ov-text-primary-color); - justify-content: space-between; +// Room Header +.recordings-header { + @include ov-flex-center; + flex-direction: row; + gap: var(--ov-meet-spacing-md); + text-align: center; + + .room-icon { + @include ov-icon(xl); + color: var(--ov-meet-icon-recordings); + margin-bottom: var(--ov-meet-spacing-sm); + } + + .room-info { + .room-title { + margin: 0; + font-size: var(--ov-meet-font-size-xl); + font-weight: var(--ov-meet-font-weight-light); + color: var(--ov-meet-text-primary); + line-height: var(--ov-meet-line-height-tight); + + .room-id { + font-weight: var(--ov-meet-font-weight-semibold); + color: var(--ov-meet-text-primary); + } + } + } } -#header-title { - font-weight: bold; +// === CONTENT SECTIONS === + +.recordings-content { + @include ov-container; + @include ov-page-content; + margin-top: var(--ov-meet-spacing-xl); } -#room-id { - font-weight: normal; - font-style: italic; +// === LOADING STATE === + +.recordings-loading-container { + @include ov-container; + @include ov-flex-center; + min-height: 60vh; + padding: var(--ov-meet-spacing-xxl); } -.dashboard-body { - background-color: var(--ov-secondary-action-color); - height: 100%; +.loading-card { + @include ov-card; + @include ov-flex-center; + flex-direction: column; + gap: var(--ov-meet-spacing-lg); + text-align: center; + max-width: 400px; + padding: var(--ov-meet-spacing-xxl); + + .loading-icon { + @include ov-icon(xl); + color: var(--ov-meet-icon-recordings); + margin-bottom: var(--ov-meet-spacing-md); + } + + .loading-title { + margin: 0; + font-size: var(--ov-meet-font-size-xl); + font-weight: var(--ov-meet-font-weight-medium); + color: var(--ov-meet-text-primary); + } + + .loading-subtitle { + margin: 0; + font-size: var(--ov-meet-font-size-md); + color: var(--ov-meet-text-secondary); + line-height: var(--ov-meet-line-height-relaxed); + } + + .loading-spinner-container { + margin-top: var(--ov-meet-spacing-lg); + } +} + +// === RESPONSIVE DESIGN === + +@include ov-tablet-down { + .recordings-page-header { + padding-top: var(--ov-meet-spacing-lg); + gap: var(--ov-meet-spacing-lg); + } + + .recordings-header { + .room-icon { + @include ov-icon(lg); + } + + .room-info { + .room-title { + font-size: var(--ov-meet-font-size-xxl); + } + + .room-subtitle { + font-size: var(--ov-meet-font-size-md); + } + } + } + + .description-card { + padding: var(--ov-meet-spacing-md); + + .description-content .description-text { + font-size: var(--ov-meet-font-size-sm); + } + } +} + +@include ov-mobile-down { + .recordings-page-header { + padding: var(--ov-meet-spacing-md); + } + + .loading-card { + padding: var(--ov-meet-spacing-lg); + + .loading-icon { + @include ov-icon(lg); + } + + .loading-title { + font-size: var(--ov-meet-font-size-lg); + } + + .loading-subtitle { + font-size: var(--ov-meet-font-size-sm); + } + } } diff --git a/frontend/projects/shared-meet-components/src/lib/pages/room-recordings/room-recordings.component.ts b/frontend/projects/shared-meet-components/src/lib/pages/room-recordings/room-recordings.component.ts index d7aec4f..8c00316 100644 --- a/frontend/projects/shared-meet-components/src/lib/pages/room-recordings/room-recordings.component.ts +++ b/frontend/projects/shared-meet-components/src/lib/pages/room-recordings/room-recordings.component.ts @@ -1,10 +1,11 @@ import { Component, OnInit, signal } from '@angular/core'; +import { MatButtonModule } from '@angular/material/button'; import { MatIconModule } from '@angular/material/icon'; import { MatProgressSpinnerModule } from '@angular/material/progress-spinner'; import { MatToolbarModule } from '@angular/material/toolbar'; import { ActivatedRoute } from '@angular/router'; import { RecordingListsComponent, RecordingTableAction } from '@lib/components'; -import { NotificationService, RecordingManagerService } from '@lib/services'; +import { NavigationService, NotificationService, RecordingManagerService } from '@lib/services'; import { MeetRecordingFilters, MeetRecordingInfo } from '@lib/typings/ce'; import { ILogger, LoggerService } from 'openvidu-components-angular'; @@ -13,7 +14,7 @@ import { ILogger, LoggerService } from 'openvidu-components-angular'; templateUrl: './room-recordings.component.html', styleUrls: ['./room-recordings.component.scss'], standalone: true, - imports: [MatToolbarModule, RecordingListsComponent, MatIconModule, MatProgressSpinnerModule] + imports: [MatToolbarModule, MatButtonModule, RecordingListsComponent, MatIconModule, MatProgressSpinnerModule] }) export class RoomRecordingsComponent implements OnInit { recordings = signal([]); @@ -33,6 +34,7 @@ export class RoomRecordingsComponent implements OnInit { protected loggerService: LoggerService, protected recordingService: RecordingManagerService, protected notificationService: NotificationService, + protected navigationService: NavigationService, protected route: ActivatedRoute ) { this.log = this.loggerService.get('OpenVidu Meet - RoomRecordingsComponent');