+
@if (selectMode) {
-
-
-
-
-
-
+
- @* Mobile: dropdown *@
-
-
-
-
+
+
-
+
+
- @* Mobile: dropdown *@
-
-
-
-
+
+
@if (cosplayerSelectMode) {
-
-
-
-
-
+
- @* Mobile: dropdown *@
-
-
-
-
+
+ You are logged in, but there is no media available at the moment.
@@ -23,13 +23,13 @@ } else { - @if (isLoadingUp) { + @if (controller!.IsLoadingUp) {
@{ var idx = 0; }
- @foreach (var asset in flatList) {
+ @foreach (var asset in controller!.Buffer.FlatList) {
var capturedIndex = idx;
- @if (isLoadingMore) {
+ @if (controller!.IsLoadingMore) {
> allAssetPages = [];
- List flatList = [];
- int currentPage = 1;
- int loadedMinPage = 1;
- int loadedMaxPage = 1;
- bool hasMore = true;
- bool hasMoreUp;
- bool isLoading = true;
- bool isLoadingMore;
- bool isLoadingUp;
+ InfiniteScrollController? controller;
AssetPreviewDto? selectedAsset;
int selectedIndex = -1;
ElementReference sentinelRef;
@@ -137,14 +128,22 @@
DotNetObjectReference? dotNetRef;
Guid randomSeed;
- protected override async Task OnInitializedAsync() {
+ protected override void OnInitialized() {
loginService.LoggedUserChanged += (_, _) => StateHasChanged();
loginService.AuthInfoChanged += (_, _) => StateHasChanged();
- await LoadFirstPage();
+ controller = new InfiniteScrollController(
+ fetchPage: page => assetService.GetAssetsAsync(EAssetType.Image, true, randomSeed, page, 30, includeCount: false),
+ keySelector: a => a.Id,
+ onChanged: StateHasChanged);
+ }
+
+ protected override async Task OnInitializedAsync() {
+ randomSeed = Guid.NewGuid();
+ await controller!.ReloadAsync();
}
protected async override Task OnAfterRenderAsync(bool firstRender) {
- if (flatList.Count > 0 && dotNetRef == null) {
+ if (controller!.Buffer.Count > 0 && dotNetRef == null) {
dotNetRef = DotNetObjectReference.Create(this);
await jsRuntime.InvokeVoidAsync(
"masonryObserver.observeBottom", sentinelRef, dotNetRef
@@ -160,83 +159,11 @@
await jsRuntime.InvokeVoidAsync("masonryObserver.unlockBodyScroll");
}
- async Task LoadFirstPage() {
- randomSeed = Guid.NewGuid();
- isLoading = true;
- var items = await assetService.GetAssetsAsync(EAssetType.Image, true, randomSeed, 0, 30, includeCount: false);
- if (items?.Count > 0) {
- allAssetPages.Add(items);
- RebuildFlatList();
- loadedMinPage = 0;
- loadedMaxPage = 0;
- currentPage = 1;
- hasMoreUp = false;
- }
- hasMore = items?.Count == 30;
- isLoading = false;
- }
+ [JSInvokable]
+ public Task LoadNextPage() => controller!.LoadNextAsync();
[JSInvokable]
- public async Task LoadNextPage() {
- if (isLoadingMore || !hasMore) return;
- isLoadingMore = true;
- StateHasChanged();
-
- var items = await assetService.GetAssetsAsync(EAssetType.Image, true, randomSeed, currentPage, 30, includeCount: false);
- if (items?.Count > 0) {
- allAssetPages.Add(items);
- loadedMaxPage = currentPage;
- currentPage++;
- hasMoreUp = true;
- RebuildFlatList();
-
- if (allAssetPages.Count > 10) {
- allAssetPages.RemoveAt(0);
- loadedMinPage++;
- }
- }
- hasMore = items?.Count == 30;
- isLoadingMore = false;
- StateHasChanged();
- }
-
- [JSInvokable]
- public async Task LoadPreviousPage() {
- if (isLoadingUp || !hasMoreUp || loadedMinPage <= 0) return;
- isLoadingUp = true;
- StateHasChanged();
-
- var pageToLoad = loadedMinPage - 1;
- if (pageToLoad < 0) {
- hasMoreUp = false;
- isLoadingUp = false;
- return;
- }
-
- var items = await assetService.GetAssetsAsync(EAssetType.Image, true, randomSeed, pageToLoad, 30, includeCount: false);
- if (items?.Count > 0) {
- allAssetPages.Insert(0, items);
- loadedMinPage = pageToLoad;
- RebuildFlatList();
-
- if (allAssetPages.Count > 10) {
- allAssetPages.RemoveAt(allAssetPages.Count - 1);
- loadedMaxPage--;
- }
- }
-
- hasMoreUp = loadedMinPage > 0;
- isLoadingUp = false;
- StateHasChanged();
- }
-
- void RebuildFlatList() {
- var seen = new Dictionary();
- foreach (var page in allAssetPages)
- foreach (var asset in page)
- seen.TryAdd(asset.Id, asset);
- flatList = [.. seen.Values];
-}
+ public Task LoadPreviousPage() => controller!.LoadPreviousAsync();
void OpenPreview(AssetPreviewDto asset, int index) {
selectedAsset = asset;
@@ -250,15 +177,16 @@
void NavigatePreview(int direction) {
if (selectedAsset == null) return;
+ var list = controller!.Buffer.FlatList;
var newIndex = selectedIndex + direction;
- if (newIndex < 0 || newIndex >= flatList.Count) return;
- var newAsset = flatList[newIndex];
+ if (newIndex < 0 || newIndex >= list.Count) return;
+ var newAsset = list[newIndex];
if (newAsset.Id != selectedAsset.Id) {
- var found = flatList.FindIndex(a => a.Id == selectedAsset.Id);
+ var found = list.FindIndex(a => a.Id == selectedAsset.Id);
if (found < 0) return;
newIndex = found + direction;
- if (newIndex < 0 || newIndex >= flatList.Count) return;
- newAsset = flatList[newIndex];
+ if (newIndex < 0 || newIndex >= list.Count) return;
+ newAsset = list[newIndex];
}
selectedAsset = newAsset;
selectedIndex = newIndex;
diff --git a/MilkStream.Client/Components/Shared/ActionButton.razor b/MilkStream.Client/Components/Shared/ActionButton.razor
new file mode 100644
index 0000000..f240fec
--- /dev/null
+++ b/MilkStream.Client/Components/Shared/ActionButton.razor
@@ -0,0 +1,81 @@
+@code {
+ [CascadingParameter]
+ public ResponsiveActionVariant Variant { get; set; } = ResponsiveActionVariant.Desktop;
+
+ ///
+ /// Bootstrap icon class rendered before the label (e.g. "bi-trash").
+ ///
+ [Parameter]
+ public string? Icon { get; set; }
+
+ ///
+ /// The button label. May embed a dynamic value such as a selection count.
+ ///
+ [Parameter]
+ public string? Label { get; set; }
+
+ ///
+ /// Extra classes for the desktop button (e.g. "btn-danger", "btn-outline-secondary").
+ ///
+ [Parameter]
+ public string Class { get; set; } = "";
+
+ ///
+ /// Extra classes for the mobile dropdown item (e.g. "text-danger"). Defaults to
+ [Parameter]
+ public string MobileClass { get; set; } = "";
+
+ ///
+ /// Optional icon override for the mobile dropdown item.
+ ///
+ [Parameter]
+ public string? MobileIcon { get; set; }
+
+ ///
+ /// Optional label override for the mobile dropdown item.
+ ///
+ [Parameter]
+ public string? MobileLabel { get; set; }
+
+ ///
+ /// Gets or sets whether the button is disabled.
+ ///
+ [Parameter]
+ public bool Disabled { get; set; }
+
+ ///
+ /// Gets or sets the callback invoked when the button is clicked.
+ ///
+ [Parameter]
+ public EventCallback OnClick { get; set; }
+
+ ///
+ /// Gets or sets the tooltip text shown on hover (desktop).
+ ///
+ [Parameter]
+ public string Title { get; set; } = "";
+}
+
+@if (Variant == ResponsiveActionVariant.Mobile) {
+
+
+
+} else {
+
+}
diff --git a/MilkStream.Client/Components/Shared/AlbumAssetPicker.razor b/MilkStream.Client/Components/Shared/AlbumAssetPicker.razor
index 70526f6..a573274 100644
--- a/MilkStream.Client/Components/Shared/AlbumAssetPicker.razor
+++ b/MilkStream.Client/Components/Shared/AlbumAssetPicker.razor
@@ -12,155 +12,7 @@
@if (Embedded) {
-
-
-
+ @PickerLayout
- @if (isAdminOrCurator && selectedGroup != null) {
-
-
- @if (browseResult?.Directories.Count > 0) {
-
-
- } else if (browseResult.Assets.Count > 0) {
- @if (listView) {
-
-
- } else {
- @if (listView) {
-
-
- }
-
-
- @foreach (var dir in browseResult.Directories.OrderBy(d => d.Name)) {
-
- }
-
- }
- @if (browseResult != null) {
- @if (browseResult.Directories.Count == 0 && browseResult.Assets.Count == 0) {
- @(string.IsNullOrEmpty(searchQuery) ? "This directory contains no assets." : $"No assets matching \"{searchQuery}\".")
-
- @foreach (var asset in browseResult.Assets) {
-
- } else {
-
-
- @(asset.FileName ?? asset.Id.ToString())
-
- }
-
- @foreach (var asset in browseResult.Assets) {
-
- }
-
- @if (asset.HasThumbnail) {
- )
-
- } else {
-
- }
-
- }
-
-
-
-
-
- @(browseResult.TotalAssetCount) assets
-
-
- }
- }
- } else if (!isAdminOrCurator && selectedGroup != null) {
-
- @if (assetPage == null || assetPage.Count == 0) {
- @(string.IsNullOrEmpty(searchQuery) ? "No assets here." : $"No assets matching \"{searchQuery}\".")
-
- @foreach (var asset in assetPage) {
-
- } else {
-
-
- @(asset.FileName ?? asset.Id.ToString())
-
- }
-
- @foreach (var asset in assetPage) {
-
- }
-
- @if (asset.HasThumbnail) {
-
-
- } else {
-
- }
-
- }
-
-
-
-
-
-
-
- }
- } else if (isAdminOrCurator) {
- Choose a folder from the sidebar to browse assets.
-
@if (Mode == PickerMode.Maintenance && selectedIds.Count > 0) {
@@ -180,155 +32,7 @@
@if (isLoading && groups == null) {
-
-
+ @PickerLayout
}
- @if (isAdminOrCurator && selectedGroup != null) {
-
-
- @if (browseResult?.Directories.Count > 0) {
-
-
- } else if (browseResult.Assets.Count > 0) {
- @if (listView) {
-
-
- } else {
- @if (listView) {
-
-
- }
-
-
- @foreach (var dir in browseResult.Directories.OrderBy(d => d.Name)) {
-
- }
-
- }
- @if (browseResult != null) {
- @if (browseResult.Directories.Count == 0 && browseResult.Assets.Count == 0) {
- @(string.IsNullOrEmpty(searchQuery) ? "This directory contains no assets." : $"No assets matching \"{searchQuery}\".")
-
- @foreach (var asset in browseResult.Assets) {
-
- } else {
-
-
- @(asset.FileName ?? asset.Id.ToString())
-
- }
-
- @foreach (var asset in browseResult.Assets) {
-
- }
-
- @if (asset.HasThumbnail) {
-
-
- } else {
-
- }
-
- }
-
-
-
-
-
- @(browseResult.TotalAssetCount) assets
-
-
- }
- }
- } else if (!isAdminOrCurator && selectedGroup != null) {
-
- @if (assetPage == null || assetPage.Count == 0) {
- @(string.IsNullOrEmpty(searchQuery) ? "No assets here." : $"No assets matching \"{searchQuery}\".")
-
- @foreach (var asset in assetPage) {
-
- } else {
-
-
- @(asset.FileName ?? asset.Id.ToString())
-
- }
-
- @foreach (var asset in assetPage) {
-
- }
-
- @if (asset.HasThumbnail) {
-
-
- } else {
-
- }
-
- }
-
-
-
-
-
-
-
- }
- } else if (isAdminOrCurator) {
- Choose a folder from the sidebar to browse assets.
-