From addd45b3569ad3e3066b0bcac657c42df46d852b Mon Sep 17 00:00:00 2001
From: Kumi <git@kumi.email>
Date: Tue, 12 Dec 2023 14:17:13 +0100
Subject: [PATCH] Refactor UI updates and AJAX logic

Flattened AJAX success handling and pruned conditional branches for clarity, enhancing code readability and maintainability. Optimized UI card element creation for handling image and video content, reducing DOM manipulation frequency for improved performance. Eliminated inefficient video thumbnail refresh intervals, switching to static resource loading to alleviate server load.
---
 src/pix360core/static/js/worker.js | 106 +++++++++++++----------------
 src/pix360core/views.py            |   2 +-
 2 files changed, 50 insertions(+), 58 deletions(-)

diff --git a/src/pix360core/static/js/worker.js b/src/pix360core/static/js/worker.js
index 4336d9d..f1266ac 100644
--- a/src/pix360core/static/js/worker.js
+++ b/src/pix360core/static/js/worker.js
@@ -29,48 +29,44 @@ function deletecard(jobid) {
 }
 
 function checkServerForFile(jobid, title, interval) {
-    $.ajax({
-      type: "GET",
-      cache: false,
-      url: "/status/" + jobid,
-      statusCode: {
-        403: function () {
-          Notification.requestPermission(function (permission) {
-            if (permission === "granted") {
-              var notification = new Notification("PIX360", {
-                body: "Your session has expired. Please log in again.",
-              });
-            }
-          });
-          window.location.href = "/";
-        },
-        404: function () {
-          clearInterval(intervals[jobid]);
-          failcard(jobid, title);
-          return;
-        },
-        200: function (data, tstatus, xhr) {
-          if (data.status == "completed") {
-            clearInterval(intervals[jobid]);
-            finishcard(
-              jobid,
-              title,
-              data.content_type == "video/mp4"
-            );
-            return;
-          } else if (data.status == "failed") {
-            clearInterval(intervals[jobid]);
-            failcard(jobid, title);
-            return;
+  $.ajax({
+    type: "GET",
+    cache: false,
+    url: "/status/" + jobid,
+    statusCode: {
+      403: function () {
+        Notification.requestPermission(function (permission) {
+          if (permission === "granted") {
+            var notification = new Notification("PIX360", {
+              body: "Your session has expired. Please log in again.",
+            });
           }
-        },
-        500: function () {
+        });
+        window.location.href = "/";
+      },
+      404: function () {
+        clearInterval(intervals[jobid]);
+        failcard(jobid, title);
+        return;
+      },
+      200: function (data, tstatus, xhr) {
+        if (data.status == "completed") {
+          clearInterval(intervals[jobid]);
+          finishcard(jobid, title, data.content_type == "video/mp4");
+          return;
+        } else if (data.status == "failed") {
           clearInterval(intervals[jobid]);
           failcard(jobid, title);
           return;
-        },
+        }
       },
-    });
+      500: function () {
+        clearInterval(intervals[jobid]);
+        failcard(jobid, title);
+        return;
+      },
+    },
+  });
 }
 
 function addcard(jobid, title) {
@@ -108,7 +104,9 @@ function failcard(jobid, title) {
     '<div class="card"> <div style="text-align: center; color: red; font-weight: bold;" class="card-block">' +
     title +
     ': Export failed.</div><div style="text-align: center;" class="card-block"><a style="color: white;" onclick="restartconversion (\'' +
-    jobid + '\', \'' + title +
+    jobid +
+    "', '" +
+    title +
     '\');" class="btn btn-info">Retry</a> <a style="color: white;" onclick="deletecard(\'' +
     jobid +
     '\');" class="btn btn-danger">Hide</a></div> </div>';
@@ -124,33 +122,27 @@ function finishcard(jobid, title, video) {
     }
   });
   var text =
-    '<div class="card"> <img ' +
-    (video ? 'id="' + jobid + '-thumb"' : "") +
+    '<div class="card"> <' +
+    (video ? "video" : "img") +
     ' class="card-img-top img-fluid" download src="/download/' +
     jobid +
-    (video ? "-thumb" : "") +
     '" alt="Final ' +
     (video ? "Video" : "Image") +
-    '"><div style="text-align: center; font-weight: bold;" class="card-block">' +
+    '">' +
+    (video ? "</video>" : "") +
+    '<div style="text-align: center; font-weight: bold;" class="card-block">' +
     title +
-    '</div> <div style="text-align: center; color: white;" class="card-block"><a style="color: white;" onclick="restartconversion (\'' +
-    jobid + '\', \'' + title +
-    '\');" class="btn btn-info">Retry</a><a href="/download/' +
+    '</div> <div style="text-align: center; color: white;" class="card-block"><a style="color: white;" onclick="restartconversion(\'' +
+    jobid +
+    "', '" +
+    title +
+    '\');" class="btn btn-info">Retry</a> <a href="/download/' +
     jobid +
     '" class="btn btn-primary">Download</a> <a onclick="deletecard(\'' +
     jobid +
     '\');" class="btn btn-danger">Hide</a> </div> </div>';
   $("#" + jobid).html(text);
 
-  var counter = 0;
-  var interval = setInterval(function () {
-    var image = document.getElementById(jobid + "-thumb");
-    image.src = "/download/" + jobid + "-thumb?rand=" + Math.random();
-    if (++counter === 10) {
-      window.clearInterval(interval);
-    }
-  }, 2000);
-
   $("#" + jobid + " img").on("click", function () {
     imgurl = $(this).attr("src");
     pannellum.viewer("panorama", {
@@ -193,13 +185,13 @@ function initialize() {
           intervals[job.id] = interval;
         }
       }
-    }
+    },
   });
 }
 
 $(document).ready(function () {
   if (Notification.permission !== "granted") {
     Notification.requestPermission();
-  };
+  }
   initialize();
-});
\ No newline at end of file
+});
diff --git a/src/pix360core/views.py b/src/pix360core/views.py
index 66ce770..23f1486 100644
--- a/src/pix360core/views.py
+++ b/src/pix360core/views.py
@@ -184,4 +184,4 @@ class ConversionDownloadView(LoginRequiredMixin, View):
         content = file.file.read()
         response = HttpResponse(content, content_type=file.mime_type)
         response['Content-Disposition'] = f'attachment; filename="{conversion.get_result_filename()}"'
-        return response
\ No newline at end of file
+        return response