1/*
2 * Copyright (C) 2022 The Android Open Source Project
3 *
4 * Licensed under the Apache License, Version 2.0 (the "License");
5 * you may not use this file except in compliance with the License.
6 * You may obtain a copy of the License at
7 *
8 *      http://www.apache.org/licenses/LICENSE-2.0
9 *
10 * Unless required by applicable law or agreed to in writing, software
11 * distributed under the License is distributed on an "AS IS" BASIS,
12 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 * See the License for the specific language governing permissions and
14 * limitations under the License.
15 */
16
17import {Component, Input} from '@angular/core';
18
19@Component({
20  selector: 'load-progress',
21  template: `
22    <div class="container-progress">
23      <p class="mat-body-3">
24        <mat-icon [fontIcon]="icon"> </mat-icon>
25      </p>
26
27      <mat-progress-bar *ngIf="progressPercentage === undefined" mode="indeterminate">
28      </mat-progress-bar>
29      <mat-progress-bar
30        *ngIf="progressPercentage !== undefined"
31        mode="determinate"
32        [value]="progressPercentage">
33      </mat-progress-bar>
34
35      <p class="mat-body-1">{{ message }}</p>
36    </div>
37  `,
38  styles: [
39    `
40      .container-progress {
41        display: flex;
42        height: 100%;
43        flex-direction: column;
44        justify-content: center;
45        align-content: center;
46        align-items: center;
47      }
48      p {
49        opacity: 0.6;
50      }
51      mat-icon {
52        font-size: 3rem;
53        width: unset;
54        height: unset;
55      }
56      mat-progress-bar {
57        max-width: 250px;
58      }
59      mat-card-content {
60        flex-grow: 1;
61      }
62    `,
63  ],
64})
65export class LoadProgressComponent {
66  @Input() progressPercentage?: number;
67  @Input() message = 'Loading...';
68  @Input() icon = 'sync';
69  private static readonly MIN_UI_UPDATE_PERIOD_MS = 200;
70
71  static canUpdateComponent(lastUpdateTimeMs: number | undefined): boolean {
72    if (lastUpdateTimeMs === undefined) {
73      return true;
74    }
75    // Limit the amount of UI updates, because the progress bar component
76    // renders weird stuff when updated too frequently.
77    // Also, this way we save some resources.
78    return (
79      Date.now() - lastUpdateTimeMs >=
80      LoadProgressComponent.MIN_UI_UPDATE_PERIOD_MS
81    );
82  }
83}
84