Updated mooncore dependencies. Improved ux for the system file manager

Moonlight.Client/Implementations/SysFileSystemProvider.cs

@@ -1,5 +1,7 @@
-using MoonCore.Blazor.Tailwind.Fm;
+using MoonCore.Blazor.Services;
+using MoonCore.Blazor.Tailwind.Fm;
 using MoonCore.Blazor.Tailwind.Fm.Models;
+using MoonCore.Blazor.Tailwind.Services;
 using MoonCore.Helpers;
 using Moonlight.Shared.Http.Requests.Admin.Sys.Files;
 using Moonlight.Shared.Http.Responses.Admin.Sys;
@@ -8,7 +10,9 @@ namespace Moonlight.Client.Implementations;
 
 public class SysFileSystemProvider : IFileSystemProvider, ICompressFileSystemProvider
 {
+    private readonly DownloadService DownloadService;
     private readonly HttpApiClient HttpApiClient;
+    private readonly LocalStorageService LocalStorageService;
     private readonly string BaseApiUrl = "api/admin/system/files";
 
     public CompressType[] CompressTypes { get; } =
@@ -25,9 +29,11 @@ public class SysFileSystemProvider : IFileSystemProvider, ICompressFileSystemPro
         }
     ];
 
-    public SysFileSystemProvider(HttpApiClient httpApiClient)
+    public SysFileSystemProvider(HttpApiClient httpApiClient, DownloadService downloadService, LocalStorageService localStorageService)
     {
         HttpApiClient = httpApiClient;
+        DownloadService = downloadService;
+        LocalStorageService = localStorageService;
     }
 
     public async Task<FileSystemEntry[]> List(string path)
@@ -67,6 +73,29 @@ public class SysFileSystemProvider : IFileSystemProvider, ICompressFileSystemPro
     public async Task<Stream> Read(string path)
         => await HttpApiClient.GetStream($"{BaseApiUrl}/read?path={path}");
 
+    public async Task Download(Func<long, Task> updateProgress, string path, string fileName)
+    {
+        var accessToken = await LocalStorageService.GetString("AccessToken");
+        
+        await DownloadService.DownloadUrl(fileName, $"{BaseApiUrl}/read?path={path}", async (bytes, _) =>
+        {
+            await updateProgress.Invoke(bytes);
+        }, headers =>
+        {
+            headers.Add("Authorization", $"Bearer {accessToken}");
+        });
+    }
+
+    public async Task Upload(Func<long, Task> updateProgress, string path, Stream stream)
+    {
+        var progressStream = new ProgressStream(stream, onReadChanged: new Progress<long>(async bytes =>
+        {
+            await updateProgress.Invoke(bytes);
+        }));
+
+        await Create(path, progressStream);
+    }
+
     public async Task Compress(CompressType type, string path, string[] itemsToCompress)
     {
         await HttpApiClient.Post($"{BaseApiUrl}/compress", new CompressRequest()

Moonlight.Client/Moonlight.Client.csproj

@@ -27,7 +27,7 @@
         <PackageReference Include="MoonCore" Version="1.8.5" />
         <PackageReference Include="MoonCore.Blazor" Version="1.2.9" />
         <PackageReference Include="MoonCore.PluginFramework" Version="1.0.5"/>
-        <PackageReference Include="MoonCore.Blazor.Tailwind" Version="1.3.4" />
+        <PackageReference Include="MoonCore.Blazor.Tailwind" Version="1.3.6" />
     </ItemGroup>
 
     <!-- 

Moonlight.Client/UI/Views/Admin/Sys/Files.razor

@@ -1,6 +1,7 @@
 @page "/admin/system/files"
 
 @using MoonCore.Attributes
+@using MoonCore.Blazor.Services
 @using MoonCore.Helpers
 @using MoonCore.Blazor.Tailwind.Fm
 @using Moonlight.Client.Implementations
@@ -8,6 +9,8 @@
 @attribute [RequirePermission("admin.system.overview")]
 
 @inject HttpApiClient ApiClient
+@inject DownloadService DownloadService
+@inject LocalStorageService LocalStorageService
 
 <div class="mb-3">
     <NavTabs Index="2" Names="UiConstants.AdminNavNames" Links="UiConstants.AdminNavLinks" />
@@ -21,6 +24,6 @@
 
     protected override void OnInitialized()
     {
-        FileSystemProvider = new SysFileSystemProvider(ApiClient);
+        FileSystemProvider = new SysFileSystemProvider(ApiClient, DownloadService, LocalStorageService);
     }
 }

Moonlight.Client/wwwroot/js/downloadService.js

@@ -1,6 +1,6 @@
 window.moonCoreDownloadService = {
     download: async function (fileName, contentStreamReference, id, reportRef) {
-
+        const promise = new Promise(async resolve => {
             const stream = await contentStreamReference.stream();
             const reader = stream.getReader();
 
@@ -15,8 +15,7 @@ window.moonCoreDownloadService = {
                 chunks.push(value);
                 receivedLength += value.length;
 
-            if(reportRef)
+                if (reportRef) {
-            {
                     const now = Date.now();
 
                     if (now - lastReportTime >= 500) { // Only log once per second
@@ -28,6 +27,58 @@ window.moonCoreDownloadService = {
 
             // Combine chunks into a single Blob
             const blob = new Blob(chunks);
+
+            this.downloadBlob(fileName, blob);
+
+            if (reportRef)
+                await reportRef.invokeMethodAsync("ReceiveReport", id, receivedLength, true);
+            
+            resolve();
+        });
+        
+        await promise;
+    },
+    downloadUrl: async function (fileName, url, reportRef, id, headers) {
+        const promise = new Promise(async resolve => {
+            let loadRequest = new XMLHttpRequest();
+            let lastReported = Date.now();
+
+            loadRequest.open("GET", url, true);
+
+            for(let headerKey in headers) {
+                loadRequest.setRequestHeader(headerKey, headers[headerKey]);
+            }
+            
+            loadRequest.responseType = "blob";
+
+            if (reportRef) {
+                loadRequest.onprogress = async ev => {
+                    const now = Date.now();
+
+                    if (now - lastReported >= 500) {
+                        await reportRef.invokeMethodAsync("ReceiveReport", id, ev.loaded, false);
+                        lastReported = now;
+                    }
+                };
+
+                loadRequest.onloadend = async ev => {
+                    await reportRef.invokeMethodAsync("ReceiveReport", id, ev.loaded, true);
+                }
+            }
+
+            loadRequest.onload = _ => {
+                this.downloadBlob(fileName, loadRequest.response);
+                
+                resolve();
+            }
+
+            loadRequest.send();
+        });
+        
+        await promise;
+    },
+    downloadBlob: function (fileName, blob)
+    {
         const url = URL.createObjectURL(blob);
 
         // Trigger file download
@@ -39,8 +90,5 @@ window.moonCoreDownloadService = {
 
         document.body.removeChild(anchor);
         URL.revokeObjectURL(url);
-
-        if(reportRef)
-            await reportRef.invokeMethodAsync("ReceiveReport", id, receivedLength, true);
     }
 }