Show notice when album not preserved.

Author: soup-bowl

frontend/src/components/AlbumGrid.css

@@ -19,6 +19,12 @@
 	background-position: center;
 }
 
+.album-art-container .nodl {
+	position: absolute;
+	bottom: 0;
+	right: 0;
+}
+
 .album-art {
 	position: absolute;
 	top: 0;

frontend/src/components/AlbumGrid.tsx

@@ -1,6 +1,7 @@
-import { IonCol, IonGrid, IonRow, IonText } from "@ionic/react"
+import { IonCol, IonGrid, IonIcon, IonRow, IonText } from "@ionic/react"
 import { IReleases } from "../api"
 import { splitRecordsByArtist, splitRecordsByLabel, splitRecordsByYear } from "../utils"
+import { cloudOfflineOutline } from "ionicons/icons"
 import "./AlbumGrid.css"
 
 interface AlbumProps {
@@ -14,6 +15,7 @@ const AlbumGridEntry: React.FC<AlbumProps> = ({ album, index, staticImage = unde
 	<IonCol size="6" sizeMd="4" sizeLg="3" key={index}>
 		<div className="album-art-container" onClick={() => onClickAlbum(album)}>
 			<img src={staticImage ? staticImage : album.basic_information.thumb} className="album-art" alt="" />
+			{!staticImage && <IonIcon className="nodl" aria-hidden="true" icon={cloudOfflineOutline} size="large" />}
 		</div>
 		<strong style={{ margin: 0 }}>{album.basic_information.title}</strong>
 		<br />

frontend/src/modal/ViewAlbumDetails.tsx

@@ -9,7 +9,10 @@ import {
 	IonItem,
 	IonLabel,
 	IonList,
+	IonIcon,
+	IonPopover,
 } from "@ionic/react"
+import { cloudOfflineOutline } from "ionicons/icons"
 import { IReleases } from "../api"
 
 interface DisplayProps {
@@ -25,6 +28,18 @@ const ViewAlbumDetails: React.FC<DisplayProps> = ({ album, open, onClose }) => (
 				<IonButtons slot="start">
 					<IonButton onClick={() => onClose()}>Close</IonButton>
 				</IonButtons>
+				{!album.image_base64 && (
+					<IonButtons slot="end">
+						<IonButton id="not-downloaded-notice" color="dark">
+							<IonIcon slot="icon-only" icon={cloudOfflineOutline}></IonIcon>
+						</IonButton>
+						<IonPopover trigger="not-downloaded-notice" triggerAction="click">
+							<IonContent class="ion-padding">
+								Image and additional details are still being collected, please reload a few hours later.
+							</IonContent>
+						</IonPopover>
+					</IonButtons>
+				)}
 				<IonTitle>{album.basic_information.title}</IonTitle>
 			</IonToolbar>
 		</IonHeader>