-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #14 from DrNoLife/mediadisplay-rework-and-tag-incl…
…using Changed the media display, and added some tags for the doomscroll
- Loading branch information
Showing
14 changed files
with
291 additions
and
114 deletions.
There are no files selected for viewing
79 changes: 79 additions & 0 deletions
79
Danbooru/Danbooru.UI/Danbooru.UI/Components/MediaComponent.razor
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,79 @@ | ||
| @using Danbooru.ApiWrapper.Models | ||
| @using Danbooru.UI.Interfaces | ||
|
|
||
| <div class="media-result @(DoomScrollService.PostOfInterest?.Id == MediaPost.Id ? "focused-post" : String.Empty)"> | ||
| @if (!MediaPost.IsImage) | ||
| { | ||
| <div class="meta-data"> | ||
| @{ | ||
| string duration = MediaPost.MediaAsset?.Duration?.ToString() ?? "0"; | ||
| double durationInTime = Convert.ToDouble(duration, System.Globalization.CultureInfo.InvariantCulture); | ||
| double durationInTimeRounded = Math.Round(durationInTime, 2); | ||
| } | ||
| <p>@durationInTimeRounded seconds</p> | ||
| <p>@MediaPost.FileExt</p> | ||
| </div> | ||
|
|
||
| <video | ||
| controls="controls" | ||
| src="@_mediaUrl" | ||
| loop="loop" | ||
| poster="@MediaPost.PreviewFileUrl"> | ||
| </video> | ||
| } | ||
| else | ||
| { | ||
| <img | ||
| style="background-image: url(@MediaPost.PreviewFileUrl);" | ||
| src="@_mediaUrl" | ||
| alt="@(MediaPost.TagsCharacter.Count > 0 ? MediaPost.TagsCharacter.First() : "Image!")" /> | ||
| } | ||
|
|
||
| <div class="tag-display-toggle-container" @onclick=ToggleTagDisplay> | ||
| <p>?</p> | ||
| </div> | ||
| </div> | ||
|
|
||
| @code { | ||
| [Inject] | ||
| public IDoomScrollService DoomScrollService { get; set; } = null!; | ||
|
|
||
| [Parameter] | ||
| public Post MediaPost { get; set; } = null!; | ||
|
|
||
| private string _mediaUrl = String.Empty; | ||
|
|
||
| protected override void OnInitialized() | ||
| { | ||
| GetMediaUrl(); | ||
| } | ||
|
|
||
| private void GetMediaUrl() | ||
| { | ||
| string largeFileUrl = MediaPost.LargeFileUrl; | ||
| if (!String.IsNullOrEmpty(largeFileUrl)) | ||
| { | ||
| _mediaUrl = largeFileUrl; | ||
| return; | ||
| } | ||
|
|
||
| string fileUrl = MediaPost.FileUrl; | ||
| if (!String.IsNullOrEmpty(fileUrl)) | ||
| { | ||
| _mediaUrl = fileUrl; | ||
| return; | ||
| } | ||
|
|
||
| string previewUrl = MediaPost.PreviewFileUrl; | ||
| if (!String.IsNullOrEmpty(previewUrl)) | ||
| { | ||
| _mediaUrl = previewUrl; | ||
| return; | ||
| } | ||
| } | ||
|
|
||
| private void ToggleTagDisplay(MouseEventArgs e) | ||
| { | ||
| DoomScrollService.ToggleTagDisplay(MediaPost); | ||
| } | ||
| } |
39 changes: 39 additions & 0 deletions
39
Danbooru/Danbooru.UI/Danbooru.UI/Components/MediaComponent.razor.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,39 @@ | ||
| | ||
| .media-result { | ||
| position: relative; | ||
| } | ||
|
|
||
| .media-result img, | ||
| .media-result video { | ||
| max-width: 100%; | ||
| width: 100%; | ||
| } | ||
|
|
||
| .meta-data { | ||
| position: absolute; | ||
| top: 0; | ||
| right: 0; | ||
| display: flex; | ||
| gap: 10px; | ||
| padding: 5px; | ||
| background-color: rgba(0, 0, 0, 0.75); | ||
| } | ||
|
|
||
| .tag-display-toggle-container { | ||
| position: absolute; | ||
| top: 5px; | ||
| left: 5px; | ||
| background-color: rgba(0, 0, 0, 0.75); | ||
| padding: 15px; | ||
| cursor: pointer; | ||
| display: flex; | ||
| justify-content: center; | ||
| align-content: center; | ||
| text-align: center; | ||
| border-radius: 10px; | ||
| font-weight: bold; | ||
| } | ||
|
|
||
| .focused-post { | ||
| border: 1px solid var(--accent); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
66 changes: 0 additions & 66 deletions
66
Danbooru/Danbooru.UI/Danbooru.UI/Components/Pages/VirtualizationTest.razor
This file was deleted.
Oops, something went wrong.
60 changes: 60 additions & 0 deletions
60
Danbooru/Danbooru.UI/Danbooru.UI/Components/TagContainerComponent.razor
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,60 @@ | ||
| @using Danbooru.UI.Interfaces | ||
|
|
||
| <div class="tag-container-wrapper"> | ||
|
|
||
| <div class="top"> | ||
| <div>Tags</div> | ||
| <div class="close-tags-button" @onclick=CloseTagsContainer> | ||
| <p>❌</p> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="tag-container"> | ||
|
|
||
| <section class="tag-section"> | ||
| <div class="tag-title-container"> | ||
| <p>Character</p> | ||
| </div> | ||
| <div class="tags"> | ||
| @foreach (var tag in DoomScrollService.PostOfInterest!.TagsCharacter) | ||
| { | ||
| <p><a href="/search/@tag">@tag</a></p> | ||
| } | ||
| </div> | ||
| </section> | ||
|
|
||
| <section class="tag-section"> | ||
| <div class="tag-title-container"> | ||
| <p>General</p> | ||
| </div> | ||
| <div class="tags"> | ||
| @foreach (var tag in DoomScrollService.PostOfInterest!.TagsGeneral) | ||
| { | ||
| <p><a href="/search/@tag">@tag</a></p> | ||
| } | ||
| </div> | ||
| </section> | ||
|
|
||
| </div> | ||
|
|
||
| </div> | ||
|
|
||
| @code { | ||
| [Inject] | ||
| public IDoomScrollService DoomScrollService { get; set; } = null!; | ||
|
|
||
| protected override void OnInitialized() | ||
| { | ||
| DoomScrollService.TagContainerToggled += HandleTagContainerToggled; | ||
| } | ||
|
|
||
| private void HandleTagContainerToggled(object? sender, EventArgs args) | ||
| { | ||
| StateHasChanged(); | ||
| } | ||
|
|
||
| private void CloseTagsContainer(MouseEventArgs args) | ||
| { | ||
| DoomScrollService.ToggleTagDisplay(null); | ||
| } | ||
| } |
Oops, something went wrong.