Generate thumbnails with SAR correctly & Upper also keep the scroll position

backend/util.ts

@@ -247,14 +247,20 @@ export async function generateThumbnail(videoPath: string, thumbnailPath: string
     // The 20% of the video duration
     const target = Math.floor(duration * 0.2);
 
+    const targetWidth = 512;
+
     command = new Deno.Command(ffmpeg, {
         args: [
             "-ss",
             target + "",
             "-i",
             videoPath,
             "-vf",
-            "scale=512:-1",
+            // Generate thumbnail's width is always fixed
+            // SAR = Storage Aspect Ratio, some videos let's say original resolution is 1440x1080, but the video is 16:9, so the SAR is 1.3333
+            // Width: 512px
+            // Height Formula = Height * (512 / Width) * (1 / SAR)
+            `scale=${targetWidth}:ih*(1/sar)*(${targetWidth}/iw)`,
             "-vframes",
             "1",
             thumbnailPath,

frontend/src/pages/List.vue

@@ -276,16 +276,6 @@ async function updateDirConfig() {
 
 // history api previous page
 function previous() {
-    // Check if previous page is our website
-    if (historyLength.value > 0) {
-        const previousUrl = window.history.state?.url;
-        if (previousUrl && previousUrl.startsWith(baseURL)) {
-            // Go back to the previous page
-            router.back();
-            return;
-        }
-    }
-
     router.back();
 }
 
@@ -294,19 +284,28 @@ function forward() {
 }
 
 function upper() {
+    const historyBackPath = window.history.state?.back;
+
     // vue router go to previousDir
     if (previousDir.value) {
-        router.push({
-            name: "list",
-            params: {
-                requestPath: encodeRequestPath(previousDir.value),
-            },
-        });
+        const targetPath = "/list/" + encodeRequestPath(previousDir.value);
+
+        // Since we want to keep the scroll position, if they are same, use history.back().
+        if (historyBackPath === targetPath) {
+            router.back();
+        } else {
+            router.push(targetPath);
+        }
     } else {
-        // go to home
-        router.push({
-            name: "home",
-        });
+        // Since we want to keep the scroll position, if they are same, use history.back().
+        if (historyBackPath === "/") {
+            router.back();
+        } else {
+            // go to home
+            router.push({
+                name: "home",
+            });
+        }
     }
 }