From c10e6ef1a001fde7c1ab834784d68b003619b408 Mon Sep 17 00:00:00 2001
From: Jake Mannens <jake@asger.xyz>
Date: Mon, 25 May 2026 01:06:59 +1000
Subject: Re-implemented existing features via the API

---
 Pages/ViewMedia.razor | 302 ++++++++++++++++++++++++++++++--------------------
 1 file changed, 184 insertions(+), 118 deletions(-)

(limited to 'Pages/ViewMedia.razor')

diff --git a/Pages/ViewMedia.razor b/Pages/ViewMedia.razor
index e210e79..be8f7f3 100644
--- a/Pages/ViewMedia.razor
+++ b/Pages/ViewMedia.razor
@@ -1,9 +1,9 @@
 @page "/ViewMedia"
-@* @using HyperBooru.Util*@
+@inject ISourceService sourceService
 @inject HBSession hb
 @inject IJSRuntime jsRuntime
 
-<PageTitle>@title</PageTitle>
+<PageTitle>@Title</PageTitle>
 
 <script suppress-warning="BL9992">
     function toggleSidebar() {
@@ -44,7 +44,6 @@
 			<div id="metadata-container">
 				<div id="metadata-fileinfo">
 					@if(infoEditMode) {
-@*
 						<form action="javascript:;" @onsubmit=@(() => ApplyInfoEdit(true))>
 							<table id="edit-metadata">
 								<tr>
@@ -57,13 +56,11 @@
 								</tr>
 							</table>
 						</form>
-*@
 					} else {
 						<p>Title: <i>@(media?.ShortDescription ?? "None")</i></p>
 						<p class="newlines">Description:<br/><i>@(media?.LongDescription ?? "None")</i></p>
 					}
-@*
-                   <p>Resolution: @(media.CurrentUploadedFile.Width)x@(media.CurrentUploadedFile.Height)</p>
+					@*<p>Resolution: @(media.CurrentUploadedFile.Width)x@(media.CurrentUploadedFile.Height)</p>*@
 					<p class="heading">Upload history</p>
 					<hr/>
 					<table id="uploaded-files" class="data-table">
@@ -75,36 +72,45 @@
 							<th>Size</th>
 							<th>Original Checksum</th>
 						</tr>
-						@foreach(var file in media.UploadedFiles.OrderByDescending(uf => uf.UploadTime)) {
-							string? sourceUrl = null;
-							if(file.Filename is not null)
-								sourceUrl = sourceService.GetUrlFromFilename(file.Filename);
-							<tr>
-								<td title=@file.CreateTime?.ToString()>
-									@(file.CreateTime?.ToString("d") ?? "N/A")
-								</td>
-								<td title=@file.LastWriteTime?.ToString()>
-									@(file.LastWriteTime?.ToString("d") ?? "N/A")
-								</td>
-								<td title=@file.UploadTime>@(file.UploadTime.ToString("d"))</td>
-								<td title=@(file.Path is not null ? $"{file.Path.Replace('\\', '/')}/{file.Filename}" : file.Filename)>
-									@if(sourceUrl is not null) {
-										<a class="nondecorated" target="_blank" href=@sourceUrl>@file.Filename</a>
-									} else {
-										@file.Filename
-									}
-								</td>
-								<td title=@file.Length>@file.Length.ToBytesSI()</td>
-								<td
-									title=@(file.Checksum + (file.ChecksumVerified ? " (verified)" : ""))
-									class=@(file.ChecksumVerified ? "verified" : null)>
-									
-									@file.Checksum.Substring(0, 8)
-								</td>
-							</tr>
-						}
+						<LoadableContent T="List<UploadedFile>" DataSource=LoadUploadedFiles @ref=uploadedFilesContent>
+							<LoadingState>
+								<p><i>Loading...</i></p>
+							</LoadingState>
+							<ErrorState>
+								<p><i>Unable to fetch file info for this item!</i></p>
+							</ErrorState>
+							<LoadedState>
+								@foreach(var file in uploadedFilesContent.Data!) {
+									string? sourceUrl = null;
+									if(file.Filename is not null)
+										sourceUrl = sourceService.GetUrlFromFilename(file.Filename);
+									<tr>
+										<td title=@file.CreateTime?.ToString()>
+											@(file.CreateTime?.ToString("d") ?? "N/A")
+										</td>
+										<td title=@file.LastWriteTime?.ToString()>
+											@(file.LastWriteTime?.ToString("d") ?? "N/A")
+										</td>
+										<td title=@file.UploadTime>@(file.UploadTime.ToString("d"))</td>
+										<td title=@(file.Path is not null ? $"{file.Path.Replace('\\', '/')}/{file.Filename}" : file.Filename)>
+											@if(sourceUrl is not null) {
+												<a class="nondecorated" target="_blank" href=@sourceUrl>@file.Filename</a>
+											} else {
+												@file.Filename
+											}
+										</td>
+										<td title=@file.Length>@file.Length.ToBytesSI()</td>
+										<td
+											title=@(file.Checksum + (file.ChecksumVerified ? " (verified)" : ""))
+											class=@(file.ChecksumVerified ? "verified" : null)>
+
+											@file.Checksum.Substring(0, 8)
+										</td>
+									</tr>
+								}
+							</LoadedState>
+						</LoadableContent>
 					</table>
-*@
 				</div>
 				<div id="metadata-tags">
 					<p class="heading">Tags</p>
@@ -114,49 +120,76 @@
 			</div>
 			<div id="button-container">
 				<ButtonContainer>
-@*
-                                        <button @onclick=@(() => deleteDialog.Show()) class="warning" data-keyboard-shortcut="d">
-						<img src="/images/trash.svg"/>
+					<Button
+						BackgroundColor=Color.ButtonWarning
+						FontSize=8
+						IconUrl="/images/trash.svg"
+						ShortcutKey=@('d')
+						OnClick=@(async () => deleteDialog.Show())>
+
 						<p><u>D</u>elete</p>
-					</button>
-					<button @onclick=@(() => tagDialog.Show()) class="secondary" data-keyboard-shortcut="t">
-						<img src="/images/tag.svg"/>
+					</Button>
+					<Button
+						FontSize=8
+						IconUrl="/images/tag.svg"
+						ShortcutKey=@('t')
+						OnClick=@(async () => tagDialog.Show())>
+
 						<p>Add <u>T</u>ag</p>
-					</button>
-					<button @onclick=@(() => ocrDialog.Show()) class="secondary" data-keyboard-shortcut="o">
-						<img src="/images/book.svg"/>
+					</Button>
+					<Button
+						FontSize=8
+						IconUrl="/images/book.svg"
+						ShortcutKey=@('o')
+						OnClick=@(async () => ocrDialog.Show())>
+
 						<p>View <u>O</u>CR</p>
-					</button>
-*@
+					</Button>
                     @if(infoEditMode) {
-@*
-                        <button @onclick=@(() => ApplyInfoEdit(false)) class="secondary">
-							<img src="/images/cross.svg"/>
+                        <Button
+							FontSize=8
+							IconUrl="/images/cross.svg"
+							OnClick=@(async () => await ApplyInfoEdit(false))>
+
 							<p>Cancel</p>
-						</button>
-						<button @onclick=@(() => ApplyInfoEdit(true))>
-							<img src="/images/checkmark.svg"/>
+						</Button>
+						<Button
+							FontSize=8
+							IconUrl="/images/checkmark.svg"
+							OnClick=@(async () => await ApplyInfoEdit(true))>
+
 							<p>Apply</p>
-						</button>
-*@
+						</Button>
                     } else {
-						<button @onclick=@(() => InfoEditMode = true) class="secondary" data-keyboard-shortcut="e">
-							<img src="/images/edit.svg"/>
+						<Button
+							FontSize=8
+							IconUrl="/images/edit.svg"
+							ShortcutKey=@('e')
+							OnClick=@(async () => InfoEditMode = true)>
+
 							<p><u>E</u>dit Info</p>
-						</button>
+						</Button>
 					}
 @*
                     @if(media.IsIngest) {
-						<button @onclick=@(() => SetIngest(false)) data-keyboard-shortcut="c">
-							<img src="/images/checkmark.svg"/>
+						<Button
+							BackgroundColor=Color.ButtonPrimary
+							IconUrl="/images/checkmark.svg"
+							ShortcutKey=@('c')
+							OnClick=@(async () => SetIngest(false))>
+
 							<p>Mark Tagging <u>C</u>omplete</p>
-						</button>
+						</Button>
 					} else {
 *@
-                        <button class="secondary" @onclick=@(() => SetIngest(true)) data-keyboard-shortcut="c">
-							<img src="/images/cross.svg"/>
+                        <Button
+							FontSize=8
+							IconUrl="/images/cross.svg"
+							ShortcutKey=@('c')
+							OnClick=@(async () => SetIngest(true))>
+
 							<p>Mark Tagging In<u>c</u>omplete</p>
-						</button>
+						</Button>
 					@* } *@
 				</ButtonContainer>
 			</div>
@@ -168,37 +201,44 @@
 	</div>
 </div>
 
-@*
 <Dialog Title="Delete this media?" @ref=deleteDialog>
     <ButtonContainer>
-        <button @onclick=@(() => deleteDialog.Hide()) class="secondary">Cancel</button>
-        <button @onclick=DeleteMedia class="warning">Confirm</button>
+        <Button OnClick=@(async () => deleteDialog.Hide())>Cancel</Button>
+        <Button OnClick=DeleteMedia BackgroundColor=Color.ButtonWarning>Confirm</Button>
     </ButtonContainer>
 </Dialog>
 
 <Dialog Title="OCR Data" @ref=ocrDialog>
-    @if(media.OcrData is null) {
+	@*@if(media.OcrData is null) {*@
         <p><center>This media item hasn't been scanned yet!</center></p>
+@*
     } else {
         <code style="max-height:400px;">@media.OcrData?.Text</code>
     }
+*@
     <ButtonContainer>
-        <button @onclick=@(() => ocrDialog.Hide())>Close</button>
+        <Button
+			BackgroundColor=Color.ButtonPrimary
+			OnClick=@(async () => ocrDialog.Hide())>
+
+			Close
+		</Button>
     </ButtonContainer>
 </Dialog>
 
 <TagSelectDialog
     Title="Select one or more tag(s) to add"
-    OnSubmit=AddTags
+    OnSubmit=AddTagsAsync
     @ref=tagDialog/>
-*@
 
 @code {
 	[Parameter]
 	[SupplyParameterFromQuery(Name = "m")]
 	public Guid MediaId { get; set; }
 
-	private ApiModels.Media media;
+	private ApiModels.Media? media;
+
+	private LoadableContent<List<UploadedFile>> uploadedFilesContent;
 
 	private string title;
 
@@ -207,9 +247,9 @@
 	private string? longDescription;
 
 	private MediaTagTable   mediaTagTable;
-	// private Dialog          deleteDialog;
-	// private Dialog          ocrDialog;
-	// private TagSelectDialog tagDialog;
+	private Dialog          deleteDialog;
+	private Dialog          ocrDialog;
+	private TagSelectDialog tagDialog;
 
 	private ElementReference shortDescriptionInput;
 
@@ -223,56 +263,82 @@
 
 	private async void LoadMedia() {
 		media = await hb.Media.GetAsync(MediaId);
-		// using var db = dbFactory.CreateDbContext();
-		// media = db.Media
-		//     .Include(m => m.Tags)
-		//     .ThenInclude(t => t.TagDefinition)
-		//     .Include(m => m.CurrentUploadedFile)
-		//     .Include(m => m.UploadedFiles)
-		//     .Include(m => m.OcrData)
-		//     .First(m => m.Guid == MediaId);
-
-		// title = media.DisplayName ?? "Media View";
-		// InvokeAsync(() => StateHasChanged());
+		await InvokeAsync(() => StateHasChanged());
 	}
 
-    // private void AddTags(TagDefinition[] tagDefs) {
-    //     foreach(var tagDef in tagDefs)
-    //         tagService.AddTag(media, tagDef);
-    //     mediaTagTable.Refresh();
-    // }
+	private async Task<List<UploadedFile>> LoadUploadedFiles() {
+		return (await hb.Media.GetUploadedFilesAsync(MediaId))
+			.OrderByDescending(uf => uf.UploadTime)
+			.ToList();
+	}
 
-    private async void SetIngest(bool ingest) {
-        // mediaService.SetIngest(media, ingest);
-        LoadMedia();
+	private async Task AddTagsAsync(TagDefinition[] tagDefs) {
+		var tagIds = tagDefs.Select(td => td.TagDefinitionId).ToArray();
 
-        if(ingest)
-            StateHasChanged();
-        else
-            await jsRuntime.InvokeVoidAsync("history.back");
-    }
+		await hb.Media.AddTagsAsync(MediaId, tagIds);
+		mediaTagTable.Load();
+	}
 
-    private bool InfoEditMode {
-        get => infoEditMode;
-        set {
-            shortDescription = media.ShortDescription;
-            longDescription  = media.LongDescription;
-            infoEditMode     = value;
-            StateHasChanged();
-        }
-    }
+	private async void SetIngest(bool ingest) {
+		// mediaService.SetIngest(media, ingest);
+		LoadMedia();
 
-    // private void ApplyInfoEdit(bool apply) {
-    //     if(apply) {
-    //         mediaService.SetDescription(media, shortDescription, longDescription);
-    //         LoadMedia();
-    //     }
+		if(ingest)
+			StateHasChanged();
+		else
+			await jsRuntime.InvokeVoidAsync("history.back");
+	}
+
+	private string Title {
+		get {
+			if(media is null)
+				return "View Media";
+
+			if(media.ShortDescription is not null)
+				return media.ShortDescription;
 
-    //     infoEditMode = false;
-    // }
+			if(uploadedFilesContent.Data is null)
+				return $"Media ({media.MediaId.ToString().ToUpper().Substring(0, 8)})";
+
+			return uploadedFilesContent.Data
+				.OrderBy(f => f.UploadTime)
+				.FirstOrDefault()?.Filename ?? media.MediaId.ToString().ToUpper();
+		}
+	}
 
-    // private async void DeleteMedia() {
-    //     mediaService.Delete(media);
-    //     await jsRuntime.InvokeVoidAsync("history.back");
-    // }
+	private bool InfoEditMode {
+		get => infoEditMode;
+		set {
+			shortDescription = media.ShortDescription;
+			longDescription  = media.LongDescription;
+			infoEditMode     = value;
+			InvokeAsync(() => StateHasChanged());
+		}
+	}
+
+	private async Task ApplyInfoEdit(bool apply) {
+		if(apply) {
+			var updatedMedia = new ApiModels.Media() {
+				MediaId			 = MediaId,
+				ShortDescription = shortDescription?.NullIfEmpty(),
+				LongDescription  = longDescription?.NullIfEmpty()
+			};
+
+			await hb.Media.UpdateAsync(updatedMedia);
+
+			media = updatedMedia;
+		}
+
+		infoEditMode = false;
+		await InvokeAsync(() => StateHasChanged());
+	}
+
+    private async Task DeleteMedia() {
+		await hb.Media.DeleteAsync(MediaId);
+
+		deleteDialog.Hide();
+
+		// TODO: Use the NavigationManager properly
+        await jsRuntime.InvokeVoidAsync("history.back");
+    }
 }
-- 
cgit v1.3