Add 'online' icon button to player

src/frontend-box/src/app/player/player.page.html

@@ -73,7 +73,16 @@
         }
       }
     </ion-title>
-    <span slot="end" class="mupihat-icon-container"><mupihat-icon></mupihat-icon></span>
+    <ion-buttons slot="end">
+      <ion-button class="status-icons" (click)="settingsButtonPressed()">
+        @if (isOnline()) {
+          <ion-icon name="cloud-outline"></ion-icon>
+        } @else {
+          <ion-icon name="cloud-offline-outline"></ion-icon>
+        }
+        <mupihat-icon></mupihat-icon>
+      </ion-button>
+    </ion-buttons>
   </ion-toolbar>
 </ion-header>
 

src/frontend-box/src/app/player/player.page.scss

@@ -76,3 +76,17 @@ ion-back-button {
 .mupihat-icon-container {
     padding-right: 20px;
 }
+
+.status-icons {
+    --padding-start: 0px !important;
+    --padding-end: 0px !important;
+    height: 70px !important;
+    width: 70px !important;
+    font-size: 20px !important;
+
+    ion-icon {
+        font-size: 28px !important;
+        color: rgb(255, 255, 255);
+        opacity: 1.0;
+    }
+}

src/frontend-box/src/app/player/player.page.ts

@@ -1,5 +1,6 @@
 import { AsyncPipe } from '@angular/common'
-import { Component, OnInit, ViewChild } from '@angular/core'
+import { Component, OnInit, Signal, ViewChild } from '@angular/core'
+import { toSignal } from '@angular/core/rxjs-interop'
 import { FormsModule } from '@angular/forms'
 import { ActivatedRoute, Router } from '@angular/router'
 import {
@@ -21,6 +22,8 @@ import {
 import { addIcons } from 'ionicons'
 import {
   arrowBackOutline,
+  cloudOutline,
+  cloudOfflineOutline,
   pause,
   play,
   playBack,
@@ -86,6 +89,9 @@ export class PlayerPage implements OnInit {
   progress = 0
   shufflechanged = 0
   tmpProgressTime = 0
+  protected settingsButtonClickCount = 0
+  protected settingsClickTimer = 0
+  protected isOnline: Signal<boolean>
   public readonly spotify$: Observable<CurrentSpotify>
   public readonly local$: Observable<CurrentMPlayer>
 
@@ -100,6 +106,7 @@ export class PlayerPage implements OnInit {
   ) {
     this.spotify$ = this.mediaService.current$
     this.local$ = this.mediaService.local$
+    this.isOnline = toSignal(this.mediaService.isOnline())
 
     if (this.router.currentNavigation()?.extras.state?.media) {
       this.media = this.router.currentNavigation().extras.state.media
@@ -112,6 +119,8 @@ export class PlayerPage implements OnInit {
     }
     addIcons({
       arrowBackOutline,
+      cloudOutline,
+      cloudOfflineOutline,
       volumeLowOutline,
       pause,
       play,
@@ -448,4 +457,19 @@ export class PlayerPage implements OnInit {
   seekBack() {
     this.playerService.sendCmd(PlayerCmds.SEEKBACK)
   }
+
+  protected settingsButtonPressed(): void {
+    window.clearTimeout(this.settingsClickTimer)
+
+    if (this.settingsButtonClickCount < 9) {
+      this.settingsButtonClickCount++
+
+      this.settingsClickTimer = window.setTimeout(() => {
+        this.settingsButtonClickCount = 0
+      }, 500)
+    } else {
+      this.settingsButtonClickCount = 0
+      this.router.navigate(['/settings'])
+    }
+  }
 }