path: root/Pages/ViewMedia.razor

@page "/ViewMedia"
@inject ISourceService sourceService
@inject HBSession hb
@inject IJSRuntime jsRuntime

<PageTitle>@Title</PageTitle>

<script suppress-warning="BL9992">
    function toggleSidebar() {
        document.getElementById("hcontainer").classList.toggle("hide-metadata");
    }

	function setMobilePane(pane) {
		var panes = Array.from(document.querySelectorAll('[class^="mobile-pane-"]'));

		panes.forEach(e => e.classList.remove('visible'));
		panes
			.filter(e => e.classList.contains(`mobile-pane-${pane}`))
			.forEach(e => e.classList.add('visible'));
	}

	function pageKeyDownHandler(e) {
		if(!e.ctrlKey && !e.metaKey && !e.altKey && !e.shiftKey && !e.isComposing)
			if(e.key == 's')
				toggleSidebar();
	}
</script>

<div id="vcontainer">
	<div id="hcontainer">
		<div id="image-container" class="mobile-pane-image visible">
			<img src="/media/@(MediaId)"/>
@*
			<img
				src="/media/@(media.Guid)"
				width=@media.CurrentUploadedFile.Width
				height=@media.CurrentUploadedFile.Height/>
*@
                </div>
		<div id="metadata-show-button">
			<a href="javascript:toggleSidebar();" title="Toggle sidebar (S)"></a>
		</div>
		<div id="metadata" class="mobile-pane-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>
						<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>
					<hr/>
					<MediaTagTable MediaId=MediaId @ref=mediaTagTable/>
				</div>
			</div>
			<div id="button-container">
				<ButtonContainer>
					<Button
						BackgroundColor=Color.ButtonWarning
						FontSize=8
						IconUrl="/images/trash.svg"
						ShortcutKey=@('d')
						OnClick=@(async () => deleteDialog.Show())>

						<p><u>D</u>elete</p>
					</Button>
					<Button
						FontSize=8
						IconUrl="/images/tag.svg"
						ShortcutKey=@('t')
						OnClick=@(async () => tagDialog.Show())>

						<p>Add <u>T</u>ag</p>
					</Button>
					<Button
						FontSize=8
						IconUrl="/images/book.svg"
						ShortcutKey=@('o')
						OnClick=@(async () => ocrDialog.Show())>

						<p>View <u>O</u>CR</p>
					</Button>
                    @if(infoEditMode) {
                        <Button
							FontSize=8
							IconUrl="/images/cross.svg"
							OnClick=@(async () => ApplyInfoEdit(false))>

							<p>Cancel</p>
						</Button>
						<Button
							FontSize=8
							IconUrl="/images/checkmark.svg"
							OnClick=@(async () => ApplyInfoEdit(true))>

							<p>Apply</p>
						</Button>
                    } else {
						<Button
							FontSize=8
							IconUrl="/images/edit.svg"
							ShortcutKey=@('e')
							OnClick=@(async () => InfoEditMode = true)>

							<p><u>E</u>dit Info</p>
						</Button>
					}
@*
                    @if(media.IsIngest) {
						<Button
							BackgroundColor=Color.ButtonPrimary
							IconUrl="/images/checkmark.svg"
							ShortcutKey=@('c')
							OnClick=@(async () => SetIngest(false))>

							<p>Mark Tagging <u>C</u>omplete</p>
						</Button>
					} else {
*@
                        <Button
							FontSize=8
							IconUrl="/images/cross.svg"
							ShortcutKey=@('c')
							OnClick=@(async () => SetIngest(true))
							>

							<p>Mark Tagging In<u>c</u>omplete</p>
						</Button>
					@* } *@
				</ButtonContainer>
			</div>
		</div>
	</div>
	<div id="bottom-bar">
		<img onclick="setMobilePane('image');" src="/images/photo.svg" width="25" height="25"/>
		<img onclick="setMobilePane('metadata');" src="/images/info.svg" width="25" height="25"/>
	</div>
</div>

<Dialog Title="Delete this media?" @ref=deleteDialog>
    <ButtonContainer>
        <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) {*@
        <p><center>This media item hasn't been scanned yet!</center></p>
@*
    } else {
        <code style="max-height:400px;">@media.OcrData?.Text</code>
    }
*@
    <ButtonContainer>
        <Button
			BackgroundColor=Color.ButtonPrimary
			OnClick=@(async () => ocrDialog.Hide())>

			Close
		</Button>
    </ButtonContainer>
</Dialog>

<TagSelectDialog
    Title="Select one or more tag(s) to add"
    OnSubmit=AddTags
    @ref=tagDialog/>

@code {
	[Parameter]
	[SupplyParameterFromQuery(Name = "m")]
	public Guid MediaId { get; set; }

	private ApiModels.Media? media;

	private LoadableContent<List<UploadedFile>> uploadedFilesContent;

	private string title;

	private bool    infoEditMode = false;
	private string? shortDescription;
	private string? longDescription;

	private MediaTagTable   mediaTagTable;
	private Dialog          deleteDialog;
	private Dialog          ocrDialog;
	private TagSelectDialog tagDialog;

	private ElementReference shortDescriptionInput;

	protected override void OnInitialized() =>
		LoadMedia();

	protected override async void OnAfterRender(bool firstRender) {
		if(infoEditMode)
			await shortDescriptionInput.FocusAsync();
	}

	private async void LoadMedia() {
		media = await hb.Media.GetAsync(MediaId);
		await InvokeAsync(() => StateHasChanged());
	}

	private async Task<List<UploadedFile>> LoadUploadedFiles() {
		return (await hb.Media.GetUploadedFilesAsync(MediaId))
			.OrderByDescending(uf => uf.UploadTime)
			.ToList();
	}

    private void AddTags(TagDefinition[] tagDefs) {
        // foreach(var tagDef in tagDefs)
        //     tagService.AddTag(media, tagDef);
        // mediaTagTable.Refresh();
    }

    private async void SetIngest(bool ingest) {
        // mediaService.SetIngest(media, ingest);
        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;

			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 bool InfoEditMode {
        get => infoEditMode;
        set {
            shortDescription = media.ShortDescription;
            longDescription  = media.LongDescription;
            infoEditMode     = value;
            StateHasChanged();
        }
    }

    private void ApplyInfoEdit(bool apply) {
        if(apply) {
            //mediaService.SetDescription(media, shortDescription, longDescription);
            //LoadMedia();
        }

        infoEditMode = false;
    }

    private async Task DeleteMedia() {
        // mediaService.Delete(media);
        // await jsRuntime.InvokeVoidAsync("history.back");
    }
}