stram pic fall back

package.json

@@ -34,6 +34,7 @@
     "@capacitor/haptics": "7.0.2",
     "@capacitor/ios": "^7.2.0",
     "@capacitor/keyboard": "7.0.1",
+    "@capacitor/network": "^7.0.4",
     "@capacitor/preferences": "^7.0.1",
     "@capacitor/status-bar": "7.0.1",
     "@ionic/angular": "^8.0.0",

src/app/components/snapcast-group-preview/snapcast-group-preview.component.html

@@ -11,8 +11,18 @@
 
   <ng-container *ngIf="activeStream && activeStream.properties.metadata else noStreamData">
 
-    <img *ngIf="activeStream.properties.metadata.artData as artData"
+    <img *ngIf="activeStream.properties.metadata.artData as artData; else noBase64"
       [src]="convertCoverDataBase64(artData.data, artData.extension)" class="cover">
+
+    <ng-template #noBase64>
+      <!-- try url if no url show placeholder -->
+      <img *ngIf="activeStream.properties.metadata.artUrl as artUrl; else noArtUrl" [src]="artUrl" class="cover"
+        alt="Album Art">
+      <ng-template #noArtUrl>
+        <img [src]="'assets/placeholder/cover_art_placeholder.svg'" class="cover" alt="Placeholder Image">
+      </ng-template>
+    </ng-template>
+
     <ng-conainer [ngSwitch]="activeStream.status">
       <ng-container *ngSwitchCase="'playing'">
         <ion-icon class="status-icon" name="play-circle"></ion-icon>

src/app/components/snapcast-stream-preview/snapcast-stream-preview.component.html

@@ -19,8 +19,11 @@
 
     <div *ngIf="stream.properties.metadata as meta"
       class="d-flex flex-column align-items-center justify-content-center ion-text-center">
-      <img *ngIf="meta.artData as artData" class="cover-image"
+      <img *ngIf="meta.artData as artData; else noBase64" class="cover-image"
         [src]="convertCoverDataBase64(artData.data, artData.extension)" alt="Album Art" />
+      <ng-template #noBase64>
+        <img class="cover-image" src="/assets/streams/default-cover.svg" alt="Default Album Art" />
+      </ng-template>
 
 
       <p>{{ meta.album }}<br>

src/app/pages/setup/ble-wifi-setup/ble-wifi-setup.page.html

@@ -28,10 +28,11 @@
           <div class="ion-margin">
             <ion-text color="medium">
               <p>
-                Plug in your Beatnik. Hold the setup button for 5 seconds until the LED pulses blue. Then tap "Scan
+                Plug in your Beatnik. Make sure you're connected to your home Wi-Fi. Hold the setup button for 5 seconds until the LED pulses blue. Then tap "Scan
                 for
                 Devices".
               </p>
+              <p *ngIf="smartphoneNetworkStatus">Your smartphone is currently {{ smartphoneNetworkStatus.connected ? 'connected' : 'disconnected' }} to {{smartphoneNetworkStatus.connectionType }}</p>
             </ion-text>
           </div>
           <div class="animation-container">

src/app/pages/setup/ble-wifi-setup/ble-wifi-setup.page.ts

@@ -4,6 +4,8 @@ import { NavController } from '@ionic/angular';
 import { firstValueFrom, Observable } from 'rxjs';
 import { BeatnikBlenoService, BleNetwork, WifiStatus } from 'src/app/services/beatnik-bleno.service';
 import Swiper, { SwiperOptions } from 'swiper';
+import { Network, ConnectionStatus } from '@capacitor/network';
+
 
 @Component({
   selector: 'app-ble-wifi-setup',
@@ -35,13 +37,21 @@ export class BleWifiSetupPage implements OnInit {
   private swiperInstance: Swiper | undefined;
   public slideIndex: number = 0;
 
+  smartphoneNetworkStatus: ConnectionStatus | null = null;
+
   constructor(
     private beatikBlenoService: BeatnikBlenoService,
     private router: Router,
     private navCtrl: NavController
   ) { }
 
-  ngOnInit() {
+  async ngOnInit() {
+    this.smartphoneNetworkStatus = await Network.getStatus();
+    console.log('Initial smartphone network status:', this.smartphoneNetworkStatus);
+    Network.addListener('networkStatusChange', status => {
+      console.log('Network status changed', status);
+      this.smartphoneNetworkStatus = status;
+    });
   }
 
   async scanForServices() {
@@ -50,6 +60,7 @@ export class BleWifiSetupPage implements OnInit {
     const result = await this.beatikBlenoService.findAndConnectWithouhtDialog();
     console.log('Scan result:', result);
     this.subsribeToDeviceConnectionStatus();
+
   }
 
   stopScan() {