From 23bc4d5d0e2e0e5172f539242e78cf86ddd05a92 Mon Sep 17 00:00:00 2001
From: Jake Mannens <jake@asger.xyz>
Date: Wed, 8 Apr 2026 03:58:07 +1000
Subject: v0.7a

---
 Pages/ViewMedia.razor | 204 ++++++++++++++++++++++++++------------------------
 1 file changed, 108 insertions(+), 96 deletions(-)

(limited to 'Pages/ViewMedia.razor')

diff --git a/Pages/ViewMedia.razor b/Pages/ViewMedia.razor
index b5a33a2..c6ff2ce 100644
--- a/Pages/ViewMedia.razor
+++ b/Pages/ViewMedia.razor
@@ -11,105 +11,117 @@
 
 <script suppress-warning="BL9992">
     function toggleSidebar() {
-        document.getElementById("metadata").classList.toggle("hidden");
+        document.getElementById("hcontainer").classList.toggle("hide-metadata");
     }
+
+	function showSidebar(visible) {
+		document.getElementById("hcontainer").classList.toggle("hide-metadata", !visible)
+	}
 </script>
 
-<div id="content">
-    <div id="image-container">
-        <img
-            src="/media/@(media.Guid)"
-            width=@media.CurrentUploadedFile.Width
-            height=@media.CurrentUploadedFile.Height
-            onclick="toggleSidebar()"/>
-    </div>
-    <div id="metadata">
-        <div id="metadata-container">
-            <div id="metadata-fileinfo">
-                @if(infoEditMode) {
-                    <form action="javascript:;" @onsubmit=@(() => ApplyInfoEdit(true))>
-                        <table id="edit-metadata">
-                            <tr>
-                                <td>Title:</td>
-                                <td><input type="text" @bind=shortDescription @ref=shortDescriptionInput/></td>
-                            </tr>
-                            <tr>
-                                <td>Description:</td>
-                                <td><textarea rows="4" @bind=longDescription/></td>
-                            </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 class="heading">Upload history</p>
-                <hr/>
-                <table id="uploaded-files" class="data-table">
-                    <tr>
-                        <th>Created On</th>
-                        <th>Last Write</th>
-                        <th>Uploaded On</th>
-                        <th>Filename</th>
-                        <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>
-                    }
-                </table>
-            </div>
-            <div id="metadata-tags">
-                <p class="heading">Tags</p>
-                <hr/>
-                <MediaTagTable Media=media @ref=mediaTagTable/>
-            </div>
-        </div>
-        <div id="button-container">
-            <ButtonContainer>
-                <button @onclick=@(() => deleteDialog.Show()) class="warning" data-keyboard-shortcut="d"><u>D</u>elete</button>
-                <button @onclick=@(() => tagDialog.Show()) class="secondary" data-keyboard-shortcut="t">Add <u>T</u>ag</button>
-                <button @onclick=@(() => ocrDialog.Show()) class="secondary" data-keyboard-shortcut="o">View <u>O</u>CR</button>
-                @if(infoEditMode) {
-                    <button @onclick=@(() => ApplyInfoEdit(false)) class="secondary">Cancel</button>
-                    <button @onclick=@(() => ApplyInfoEdit(true))>Apply</button>
-                } else {
-                    <button @onclick=@(() => InfoEditMode = true) class="secondary" data-keyboard-shortcut="e"><u>E</u>dit Info</button>
-                }
-                @if(media.IsIngest) {
-                    <button @onclick=@(() => SetIngest(false)) data-keyboard-shortcut="c">Mark Tagging <u>C</u>omplete</button>
-                } else {
-                    <button class="secondary" @onclick=@(() => SetIngest(true)) data-keyboard-shortcut="c">Mark Tagging In<u>c</u>omplete</button>
-                }
-            </ButtonContainer>
-        </div>
-    </div>
+<div id="vcontainer">
+	<div id="hcontainer" class="hide-metadata">
+		<div id="image-container">
+			<img
+				src="/media/@(media.Guid)"
+				width=@media.CurrentUploadedFile.Width
+				height=@media.CurrentUploadedFile.Height/>
+		</div>
+		<div id="metadata-show-button">
+			<a href="javascript:toggleSidebar();"></a>
+		</div>
+		<div id="metadata">
+			<div id="metadata-container">
+				<div id="metadata-fileinfo">
+					@if(infoEditMode) {
+						<form action="javascript:;" @onsubmit=@(() => ApplyInfoEdit(true))>
+							<table id="edit-metadata">
+								<tr>
+									<td>Title:</td>
+									<td><input type="text" @bind=shortDescription @ref=shortDescriptionInput/></td>
+								</tr>
+								<tr>
+									<td>Description:</td>
+									<td><textarea rows="4" @bind=longDescription/></td>
+								</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 class="heading">Upload history</p>
+					<hr/>
+					<table id="uploaded-files" class="data-table">
+						<tr>
+							<th>Created On</th>
+							<th>Last Write</th>
+							<th>Uploaded On</th>
+							<th>Filename</th>
+							<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>
+						}
+					</table>
+				</div>
+				<div id="metadata-tags">
+					<p class="heading">Tags</p>
+					<hr/>
+					<MediaTagTable Media=media @ref=mediaTagTable/>
+				</div>
+			</div>
+			<div id="button-container">
+				<ButtonContainer>
+					<button @onclick=@(() => deleteDialog.Show()) class="warning" data-keyboard-shortcut="d"><u>D</u>elete</button>
+					<button @onclick=@(() => tagDialog.Show()) class="secondary" data-keyboard-shortcut="t">Add <u>T</u>ag</button>
+					<button @onclick=@(() => ocrDialog.Show()) class="secondary" data-keyboard-shortcut="o">View <u>O</u>CR</button>
+					@if(infoEditMode) {
+						<button @onclick=@(() => ApplyInfoEdit(false)) class="secondary">Cancel</button>
+						<button @onclick=@(() => ApplyInfoEdit(true))>Apply</button>
+					} else {
+						<button @onclick=@(() => InfoEditMode = true) class="secondary" data-keyboard-shortcut="e"><u>E</u>dit Info</button>
+					}
+					@if(media.IsIngest) {
+						<button @onclick=@(() => SetIngest(false)) data-keyboard-shortcut="c">Mark Tagging <u>C</u>omplete</button>
+					} else {
+						<button class="secondary" @onclick=@(() => SetIngest(true)) data-keyboard-shortcut="c">Mark Tagging In<u>c</u>omplete</button>
+					}
+				</ButtonContainer>
+			</div>
+		</div>
+	</div>
+	<div id="bottom-bar">
+		<a href="javascript:showSidebar(false);">&#x1F5BC;</a>
+		<a href="javascript:showSidebar(true);">&#x1F6C8;</a>
+	</div>
 </div>
 
 <Dialog Title="Delete this media?" @ref=deleteDialog>
-- 
cgit v1.3