From b4ac10c006f65d2f6293bd9a769c457e8fd2c4c6 Mon Sep 17 00:00:00 2001
From: ju09279 <julian.schlueter@studmail.w-hs.de>
Date: Fri, 16 Aug 2024 00:28:14 +0200
Subject: [PATCH] resizing images ondemand

---
 backend/Program.cs                         | 123 ++++++++++++++++-----
 backend/Properties/launchSettings.json     |   9 +-
 backend/shitweb.csproj                     |   1 +
 frontend/src/components/CollectionItem.vue |   8 +-
 frontend/src/components/NowPlaying.vue     |   7 +-
 frontend/src/components/SongItem.vue       |   6 +-
 frontend/src/stores/userStore.ts           |  14 +--
 frontend/src/views/CollectionView.vue      |   9 +-
 frontend/src/views/NowPlayingView.vue      |  11 +-
 9 files changed, 119 insertions(+), 69 deletions(-)

diff --git a/backend/Program.cs b/backend/Program.cs
index f2a8e2c..26a861c 100644
--- a/backend/Program.cs
+++ b/backend/Program.cs
@@ -2,20 +2,23 @@ using Microsoft.AspNetCore.Builder;
 using Microsoft.AspNetCore.Mvc;
 using Microsoft.Extensions.Caching.Memory;
 using Microsoft.Extensions.Hosting;
+using System.Drawing;
+using System.Drawing.Drawing2D;
+using System.Drawing.Imaging;
 
 var builder = WebApplication.CreateBuilder(args);
 
 builder.Services.AddMemoryCache();
 
-builder.Services.AddCors(options =>
-{
-    options.AddPolicy("AllowAll",
-        policy =>
-        {
-            policy.AllowAnyOrigin()
-                  .AllowAnyHeader()
-                  .AllowAnyMethod();
-        });
+builder.Services.AddCors(options =>
+{
+    options.AddPolicy("AllowAll",
+        policy =>
+        {
+            policy.AllowAnyOrigin()
+                  .AllowAnyHeader()
+                  .AllowAnyMethod();
+        });
 });
 
 var app = builder.Build();
@@ -28,14 +31,14 @@ app.MapGet("/ping", () => "pong");
 app.MapGet("/api/v1/songs/{hash}", (string hash) =>
     {
 
-        return Results.Ok(new { hash });
+        return Results.Ok(new { hash });
     });
 
 app.MapGet("/api/v1/songs/recent", (int? limit, int? offset) =>
     {
         var limitValue = limit ?? 100; // default to 10 if not provided
         var offsetValue = offset ?? 0; // default to 0 if not provided
-
+
         return Results.Json(Osudb.Instance.GetRecent(limitValue, offsetValue));
     });
 
@@ -54,22 +57,22 @@ app.MapGet("/api/v1/songs/{hash}", (string hash) =>
 
 app.MapGet("/api/v1/collections/", async (int? limit, int? offset, [FromServices] IMemoryCache cache) =>
     {
-        const string cacheKey = "collections";
-
-        if (!cache.TryGetValue(cacheKey, out var collections))
-        {
-         
-            collections = Osudb.Instance.GetCollections();
-
-            var cacheEntryOptions = new MemoryCacheEntryOptions()
-                .SetSlidingExpiration(TimeSpan.FromDays(1)) 
-                .SetAbsoluteExpiration(TimeSpan.FromDays(3));  
-
-            cache.Set(cacheKey, collections, cacheEntryOptions);
+        const string cacheKey = "collections";
+
+        if (!cache.TryGetValue(cacheKey, out var collections))
+        {
+         
+            collections = Osudb.Instance.GetCollections();
+
+            var cacheEntryOptions = new MemoryCacheEntryOptions()
+                .SetSlidingExpiration(TimeSpan.FromDays(1)) 
+                .SetAbsoluteExpiration(TimeSpan.FromDays(3));
+
+            cache.Set(cacheKey, collections, cacheEntryOptions);
         }
 
-        return Results.Json(collections);
-
+        return Results.Json(collections);
+
     });
 
 app.MapGet("/api/v1/collection/{index}", (int index) =>
@@ -103,7 +106,7 @@ app.MapGet("/api/v1/audio/{*fileName}", async (string fileName, HttpContext cont
 });
 
 
-app.MapGet("/api/v1/images/{*filename}", async (string filename) =>
+app.MapGet("/api/v1/images/{*filename}", async (string filename, int? h, int? w) =>
 {
     var decodedFileName = Uri.UnescapeDataString(filename);
     var filePath = Path.Combine(Osudb.osufolder, "Songs", decodedFileName);
@@ -124,12 +127,72 @@ app.MapGet("/api/v1/images/{*filename}", async (string filename) =>
         ".webp" => "image/webp",
         _ => "application/octet-stream",
     };
-
-    var fileStream = new FileStream(filePath, FileMode.Open, FileAccess.Read, FileShare.Read, 4096, useAsync: true);
+    
+    if (w == null || h == null)
+    {
+        var fileStream = new FileStream(filePath, FileMode.Open, FileAccess.Read, FileShare.Read, 4096, useAsync: true);
+        return Results.Stream(fileStream, contentType, filename);
+    }
+    using var originalImage = new Bitmap(filePath);
+
+
+    // If resizing is requested, resize the image
+    Bitmap resizedImage;
+    if (w.HasValue || h.HasValue)
+    {
+        resizedImage = ResizeImage(originalImage, w, h);
+    }
+    else
+    {
+        resizedImage = new Bitmap(originalImage); // Keep original size
+    }
+
+    // Convert the resized image to a memory stream
+    var memoryStream = new MemoryStream();
+    resizedImage.Save(memoryStream, GetImageFormat(fileExtension));
+    memoryStream.Position = 0; // Reset stream position
+
+    return Results.File(memoryStream, contentType);
 
-    return Results.Stream(fileStream, contentType, filename);
 });
 
-
+static Bitmap ResizeImage(Image originalImage, int? width, int? height)
+{
+    int newWidth = width ?? originalImage.Width;
+    int newHeight = height ?? originalImage.Height;
+
+    if (width == null)
+    {
+        newWidth = originalImage.Width * newHeight / originalImage.Height;
+    }
+    else if (height == null)
+    {
+        newHeight = originalImage.Height * newWidth / originalImage.Width;
+    }
+
+    var resizedImage = new Bitmap(newWidth, newHeight);
+    using (var graphics = Graphics.FromImage(resizedImage))
+    {
+        graphics.CompositingQuality = CompositingQuality.HighQuality;
+        graphics.InterpolationMode = InterpolationMode.HighQualityBicubic;
+        graphics.SmoothingMode = SmoothingMode.HighQuality;
+        graphics.DrawImage(originalImage, 0, 0, newWidth, newHeight);
+    }
+
+    return resizedImage;
+}
+
+static ImageFormat GetImageFormat(string extension)
+{
+    return extension switch
+    {
+        ".jpg" or ".jpeg" => ImageFormat.Jpeg,
+        ".png" => ImageFormat.Png,
+        ".gif" => ImageFormat.Gif,
+        ".bmp" => ImageFormat.Bmp,
+        ".webp" => ImageFormat.Webp,
+        _ => ImageFormat.Png,
+    };
+}
 
 app.Run();
diff --git a/backend/Properties/launchSettings.json b/backend/Properties/launchSettings.json
index ebdcf8c..e81a762 100644
--- a/backend/Properties/launchSettings.json
+++ b/backend/Properties/launchSettings.json
@@ -12,14 +12,7 @@
       "commandName": "Project",
       "dotnetRunMessages": true,
       "launchBrowser": true,
-      "applicationUrl": "https://localhost:7254;http://localhost:5153",
-      "environmentVariables": {
-        "ASPNETCORE_ENVIRONMENT": "Development"
-      }
-    },
-    "IIS Express": {
-      "commandName": "IISExpress",
-      "launchBrowser": true,
+      "applicationUrl": "http://localhost:5153",
       "environmentVariables": {
         "ASPNETCORE_ENVIRONMENT": "Development"
       }
diff --git a/backend/shitweb.csproj b/backend/shitweb.csproj
index 1d5a263..07f4bfa 100644
--- a/backend/shitweb.csproj
+++ b/backend/shitweb.csproj
@@ -8,6 +8,7 @@
 
   <ItemGroup>
     <PackageReference Include="OsuParsers" Version="1.7.1" />
+    <PackageReference Include="System.Drawing.Common" Version="8.0.8" />
   </ItemGroup>
 
 </Project>
diff --git a/frontend/src/components/CollectionItem.vue b/frontend/src/components/CollectionItem.vue
index a586825..b2ef669 100644
--- a/frontend/src/components/CollectionItem.vue
+++ b/frontend/src/components/CollectionItem.vue
@@ -17,7 +17,7 @@ const name = ref('name');
 onMounted(async () => {
   const data = await userStore.fetchCollection(Number(route.params.id));
   console.log(data)
-  
+
   data.songs.forEach(song => {
     song.previewimage = `${userStore.baseUrl}api/v1/images/${song.previewimage}`;
     song.url = `${userStore.baseUrl}api/v1/audio/${song.url}`;
@@ -47,10 +47,6 @@ onMounted(async () => {
 
   <div class="flex-1 flex-col h-full overflow-scroll">
 
-      <SongItem 
-        v-for="(song, index) in songs"
-        :key="index"
-        :song="song"
-      />
+    <SongItem v-for="(song, index) in songs" :key="index" :song="song" />
   </div>
 </template>
diff --git a/frontend/src/components/NowPlaying.vue b/frontend/src/components/NowPlaying.vue
index 08d1cff..75e9f9f 100644
--- a/frontend/src/components/NowPlaying.vue
+++ b/frontend/src/components/NowPlaying.vue
@@ -11,8 +11,8 @@ const audioStore = useAudioStore();
     <hr>
     <div class="relative wrapper p-1 grow text-yellow-500">
 
-      <img :src="encodeURI(audioStore.bgimg)" class="absolute top-0 left-0 w-full h-full"
-       :style="{ 'filter': 'blur(2px)', 'opacity': '0.5' }" alt="Background Image" />
+      <img :src="encodeURI(audioStore.bgimg + '?h=150&w=400')" class="absolute top-0 left-0 w-full h-full"
+        :style="{ 'filter': 'blur(2px)', 'opacity': '0.5' }" alt="Background Image" />
 
       <nav class="relative flex justify-around my-2 z-10">
 
@@ -37,7 +37,8 @@ const audioStore = useAudioStore();
         <i class="fa-solid fa-arrow-up"></i>
       </RouterLink>
 
-      <marquee class="relative mx-16 text-2xl font-bold text-pink-500" behavior="scroll">{{ audioStore.artist }} - {{ audioStore.title
+      <marquee class="relative mx-16 text-2xl font-bold text-pink-500" behavior="scroll">{{ audioStore.artist }} - {{
+        audioStore.title
         }}</marquee>
       <audio controls class="hidden" id="audio-player" :src="audioStore.songSrc"
         @timeupdate="audioStore.update"></audio>
diff --git a/frontend/src/components/SongItem.vue b/frontend/src/components/SongItem.vue
index 8d44df1..0161a19 100644
--- a/frontend/src/components/SongItem.vue
+++ b/frontend/src/components/SongItem.vue
@@ -4,11 +4,11 @@ import { useAudioStore } from '@/stores/audioStore';
 import { useUserStore } from '@/stores/userStore';
 import type { Song } from '@/script/types';
 
-const props = defineProps<{ song: Song}>();
+const props = defineProps<{ song: Song }>();
 const userStore = useUserStore();
 const audioStore = useAudioStore();
 
-function updateSong(){
+function updateSong() {
 
   let updated = props.song;
   audioStore.setSong(updated)
@@ -19,7 +19,7 @@ function updateSong(){
 <template>
 
   <div @click="updateSong" class="m-2 border border-pink-500 rounded-lg flex">
-    <img class="h-16 w-16 m-1 rounded-lg" :src="encodeURI(props.song.previewimage)" loading="lazy" />
+    <img class="h-16 w-16 m-1 rounded-lg" :src="encodeURI(props.song.previewimage + '?h=64&w=64')" loading="lazy" />
     <div class="flex flex-col">
       <h3 class="text-nowrap overflow-scroll">
         <slot name="songName">{{ props.song.name }}</slot>
diff --git a/frontend/src/stores/userStore.ts b/frontend/src/stores/userStore.ts
index 79151ee..5c97220 100644
--- a/frontend/src/stores/userStore.ts
+++ b/frontend/src/stores/userStore.ts
@@ -4,7 +4,7 @@ import type { Song, CollectionPreview } from '@/script/types';
 
 export const useUserStore = defineStore('userStore', () => {
   const userId = ref(null)
-  const baseUrl = ref('https://localhost:7254/')
+  const baseUrl = ref('https://service.illegalesachen.download/')
 
   async function fetchSong(hash: string): Promise<Song> {
     try {
@@ -20,12 +20,12 @@ export const useUserStore = defineStore('userStore', () => {
       console.error('Failed to fetch songs:', error);
       return {
         hash: "-1",
-    name: "song name",
-    artist: "artist name",
-    length: 0,
-    url: "song.mp3",
-    previewimage: "404.im5",
-    mapper: "map",
+        name: "song name",
+        artist: "artist name",
+        length: 0,
+        url: "song.mp3",
+        previewimage: "404.im5",
+        mapper: "map",
       } as Song;
     }
   }
diff --git a/frontend/src/views/CollectionView.vue b/frontend/src/views/CollectionView.vue
index 5479c06..86c5bf1 100644
--- a/frontend/src/views/CollectionView.vue
+++ b/frontend/src/views/CollectionView.vue
@@ -11,7 +11,7 @@ const collections = ref<CollectionPreview[]>([]);
 onMounted(async () => {
   const data = await userStore.fetchCollections();
   data.forEach(song => {
-    song.previewimage = `${userStore.baseUrl}api/v1/images/${song.previewimage}`;
+    song.previewimage = `${userStore.baseUrl}api/v1/images/${song.previewimage}?h=80&w=80`;
   })
   collections.value = data;
 
@@ -21,12 +21,7 @@ onMounted(async () => {
 <template>
   <main class="flex-1 text-center flex flex-col h-full overflow-scroll">
     <div class="flex flex-col overflow-scroll">
-      <CollectionListItem 
-        v-for="(collection, index) in collections"
-        :key="index"
-        :collection="collection"
-      />
+      <CollectionListItem v-for="(collection, index) in collections" :key="index" :collection="collection" />
     </div>
   </main>
 </template>
-
diff --git a/frontend/src/views/NowPlayingView.vue b/frontend/src/views/NowPlayingView.vue
index 9017f17..d364f66 100644
--- a/frontend/src/views/NowPlayingView.vue
+++ b/frontend/src/views/NowPlayingView.vue
@@ -23,8 +23,9 @@ const audioStore = useAudioStore();
     <div class="flex flex-col justify-around">
       <div class="relative">
         <i class="relative p-36 fa-solid fa-play">
-         
-          <img class="h-72 absolute top-4 left-0 bottom-0 right-0 bg-center bg-cover rounded-lg" :src="encodeURI(audioStore.bgimg)" :key="audioStore.bgimg" />
+
+          <img class="h-72 absolute top-4 left-0 bottom-0 right-0 bg-center bg-cover rounded-lg"
+            :src="encodeURI(audioStore.bgimg + '?h=500&w=500')" :key="audioStore.bgimg" />
         </i>
       </div>
 
@@ -46,11 +47,11 @@ const audioStore = useAudioStore();
             <p>{{ audioStore.artist }}</p>
           </div>
           <div class="flex flex-col justify-between mb-4">
-          <i @click="audioStore.toggleRepeat" :class="[audioStore.repeat ? 'text-pink-500' : '']"
-            class="fa-solid fa-repeat"></i>
+            <i @click="audioStore.toggleRepeat" :class="[audioStore.repeat ? 'text-pink-500' : '']"
+              class="fa-solid fa-repeat"></i>
             <i @click="this.$router.go(-1);" class="fa-solid fa-arrow-down"></i>
+          </div>
         </div>
-      </div>
         <div class="flex">
           <input
             class="appearance-none mx-4 flex-1 bg-yellow-200 bg-opacity-20 accent-yellow-600 rounded-lg outline-none slider"