diff options
Diffstat (limited to 'Pages/ViewMedia.razor')
| -rw-r--r-- | Pages/ViewMedia.razor | 204 |
1 files changed, 108 insertions, 96 deletions
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);">🖼</a> + <a href="javascript:showSidebar(true);">🛈</a> + </div> </div> <Dialog Title="Delete this media?" @ref=deleteDialog> |