feat: manual emote resize

1 files changed, 183 insertions, 62 deletions

diff --git a/public/emotes/upload.php b/public/emotes/upload.php
index b5a11aa..0b79b5c 100644
--- a/public/emotes/upload.php
+++ b/public/emotes/upload.php
@@ -67,10 +67,29 @@ if ($_SERVER['REQUEST_METHOD'] != "POST") {
                         </div>
                         <div class="box content">
                             <form action="/emotes/upload.php" method="POST" enctype="multipart/form-data">
+                                <h3>Image<span style="color:red;">*</span></h3>
+
+                                <input type="file" name="file" id="form-file" accept=".gif,.jpg,.jpeg,.png,.webp" required>
+
+                                <div id="form-manual-files" style="display:none;">
+                                    <input type="file" name="file-1x" id="form-file-1x" accept=".gif,.jpg,.jpeg,.png,.webp">
+                                    <label class="inline"
+                                        for="file-1x"><?php echo sprintf("%dx%d", EMOTE_MAX_SIZE[0] / 4, EMOTE_MAX_SIZE[1] / 4) ?></label>
+                                    <input type="file" name="file-2x" id="form-file-2x" accept=".gif,.jpg,.jpeg,.png,.webp">
+                                    <label class="inline"
+                                        for="file-2x"><?php echo sprintf("%dx%d", EMOTE_MAX_SIZE[0] / 2, EMOTE_MAX_SIZE[1] / 2) ?></label>
+                                    <input type="file" name="file-3x" id="form-file-3x" accept=".gif,.jpg,.jpeg,.png,.webp">
+                                    <label class="inline"
+                                        for="file-3x"><?php echo sprintf("%dx%d", EMOTE_MAX_SIZE[0], EMOTE_MAX_SIZE[1]) ?></label>
+                                </div>
+
+                                <div>
+                                    <label for="manual" class="inline">Manual resize</label>
+                                    <input type="checkbox" name="manual" value="1" onchange="display_manual_resize()">
+                                </div>
+
                                 <h3>Emote name<span style="color:red;">*</span></h3>
                                 <input type="text" name="code" id="code" required>
-                                <h3>Image<span style="color:red;">*</span></h3>
-                                <input type="file" name="file" id="file" accept=".gif,.jpg,.jpeg,.png,.webp" required>
 
                                 <div>
                                     <label for="visibility" class="inline">Emote visibility: </label>
@@ -96,7 +115,7 @@ if ($_SERVER['REQUEST_METHOD'] != "POST") {
                         </div>
                     </section>
 
-                    <section class="box" id="emote-showcase" style="display: none;">
+                    <section class="box column" id="emote-showcase" style="display: none;">
                         <div class="emote-showcase">
                             <div class="emote-image">
                                 <img src="" alt="" id="emote-image-1x">
@@ -114,6 +133,7 @@ if ($_SERVER['REQUEST_METHOD'] != "POST") {
                                 <p class="size"></p>
                             </div>
                         </div>
+                        <p style="font-size: 12px;">The result may differ.</p>
                     </section>
                 </section>
             </div>
@@ -121,12 +141,18 @@ if ($_SERVER['REQUEST_METHOD'] != "POST") {
     </body>
 
     <script>
-        const fileInput = document.getElementById("file");
+        const max_width = <?php echo EMOTE_MAX_SIZE[0] ?>;
+        const max_height = <?php echo EMOTE_MAX_SIZE[1] ?>;
+
+        const fileInput = document.getElementById("form-file");
         const showcase = document.getElementById("emote-showcase");
         const reader = new FileReader();
-        let isImage = false;
+
+        let manual = false;
+
         fileInput.addEventListener("change", (e) => {
-            isImage = false;
+            if (manual) return;
+
             showcase.style.display = "flex";
             reader.readAsDataURL(e.target.files[0]);
             reader.onload = (e) => {
@@ -134,26 +160,9 @@ if ($_SERVER['REQUEST_METHOD'] != "POST") {
                 image.src = e.target.result;
                 image.onload = () => {
                     let m = 1;
-                    let max_width = <?php echo EMOTE_MAX_SIZE[0] ?>;
-                    let max_height = <?php echo EMOTE_MAX_SIZE[1] ?>;
-                    isImage = true;
 
                     for (let i = 3; i > 0; i--) {
-                        let max_w = max_width / m;
-                        let max_h = max_height / m;
-
-                        const parentId = `emote-image-${i}x`;
-                        const img = document.getElementById(parentId);
-                        img.setAttribute("src", e.target.result);
-
-                        let ratio = Math.min(max_w / image.width, max_h / image.height);
-
-                        img.setAttribute("width", Math.floor(image.width * ratio));
-                        img.setAttribute("height", Math.floor(image.height * ratio));
-
-                        const sizeElement = document.querySelector(`.emote-image:has(#${parentId}) .size`);
-                        sizeElement.innerHTML = `${img.getAttribute("width")}x${img.getAttribute("height")}`;
-
+                        place_image(i, m, e, image);
                         m *= 2;
                     }
                 };
@@ -189,6 +198,99 @@ if ($_SERVER['REQUEST_METHOD'] != "POST") {
         }
 
         set_form_visibility_description(visibility.value);
+
+        // Manual resize
+        function display_manual_resize() {
+            const manual_files = document.getElementById("form-manual-files");
+
+            // resetting previous values
+            const files = document.querySelectorAll("input[type=file]");
+
+            for (let file of files) {
+                file.value = null;
+                file.removeAttribute("required");
+            }
+
+            const fileImages = document.querySelectorAll(".emote-image img");
+
+            for (let file of fileImages) {
+                file.setAttribute("src", "");
+                file.setAttribute("width", "0");
+                file.setAttribute("height", "0");
+            }
+
+            const fileSizes = document.querySelectorAll(".emote-image .size");
+
+            for (let file of fileImages) {
+                file.innerHTML = "";
+            }
+
+            manual = !manual;
+
+            if (manual) {
+                manual_files.style.display = "block";
+                fileInput.style.display = "none";
+                const elements = document.querySelectorAll("#form-manual-files input[type=file]");
+                for (let elem of elements) {
+                    elem.setAttribute("required", "true");
+                }
+            } else {
+                manual_files.style.display = "none";
+                fileInput.style.display = "block";
+                fileInput.setAttribute("required", "true");
+            }
+
+            showcase.style.display = "none";
+        }
+
+        document.getElementById("form-file-1x").addEventListener("change", (e) => {
+            showcase.style.display = "flex";
+            place_image(1, 4, e, null);
+        });
+
+        document.getElementById("form-file-2x").addEventListener("change", (e) => {
+            showcase.style.display = "flex";
+            place_image(2, 2, e, null);
+        });
+
+        document.getElementById("form-file-3x").addEventListener("change", (e) => {
+            showcase.style.display = "flex";
+            place_image(3, 1, e, null);
+        });
+
+        function place_image(image_index, multiplier, e, image) {
+            let ee = e;
+
+            if (image == null) {
+                reader.readAsDataURL(e.target.files[0]);
+                reader.onload = (e) => {
+                    const image = new Image();
+                    image.src = e.target.result;
+                    image.onload = () => {
+                        insert_image(image_index, multiplier, e, image);
+                    };
+                }
+            } else {
+                insert_image(image_index, multiplier, e, image);
+            }
+
+            function insert_image(i, m, e, image) {
+                const max_w = max_width / multiplier;
+                const max_h = max_height / multiplier;
+
+                const parentId = `emote-image-${image_index}x`;
+                const img = document.getElementById(parentId);
+                img.setAttribute("src", e.target.result);
+
+                let ratio = Math.min(max_w / image.width, max_h / image.height);
+
+                img.setAttribute("width", Math.floor(image.width * ratio));
+                img.setAttribute("height", Math.floor(image.height * ratio));
+
+                const sizeElement = document.querySelector(`.emote-image:has(#${parentId}) .size`);
+                sizeElement.innerHTML = `${img.getAttribute("width")}x${img.getAttribute("height")}`;
+            }
+        }
     </script>
 
     </html>
@@ -197,30 +299,25 @@ if ($_SERVER['REQUEST_METHOD'] != "POST") {
     exit;
 }
 
-if (!isset($_FILES["file"])) {
-    http_response_code(400);
-    echo json_encode([
-        "status_code" => 400,
-        "message" => "No file set",
-        "data" => null
-    ]);
+$is_manual = intval($_POST["manual"] ?? "0") == 1;
+
+if ($is_manual && !isset($_FILES["file-1x"], $_FILES["file-2x"], $_FILES["file-3x"])) {
+    generate_alert("/emotes/upload.php", "No files set");
+    exit;
+}
+
+if (!$is_manual && !isset($_FILES["file"])) {
+    generate_alert("/emotes/upload.php", "No file set");
     exit;
 }
 
 $code = str_safe($_POST["code"] ?? "", EMOTE_NAME_MAX_LENGTH);
 
 if ($code == "" || !preg_match(EMOTE_NAME_REGEX, $code)) {
-    http_response_code(400);
-    echo json_encode([
-        "status_code" => 400,
-        "message" => "Invalid code",
-        "data" => null
-    ]);
+    generate_alert("/emotes/upload.php", "Invalid code");
     exit;
 }
 
-$image = $_FILES["file"];
-
 $notes = str_safe($_POST["notes"] ?? "", EMOTE_COMMENT_MAX_LENGTH);
 if (empty($notes)) {
     $notes = null;
@@ -245,41 +342,65 @@ if (!is_dir($path)) {
     mkdir($path, 0777, true);
 }
 
-// resizing the image
-if ($err = resize_image($image["tmp_name"], "$path/3x", $max_width, $max_height)) {
-    error_log("Error processing image: $err");
-    generate_alert("/emotes/upload.php", "Error occurred while processing the image ($err)", 500);
-    abort_upload($path, $db, $id);
-    exit;
-}
-if ($err = resize_image($image["tmp_name"], "$path/2x", $max_width / 2, $max_height / 2)) {
-    error_log("Error processing image: $err");
-    generate_alert("/emotes/upload.php", "Error occurred while processing the image ($err)", 500);
-    abort_upload($path, $db, $id);
-    exit;
-}
-if ($err = resize_image($image["tmp_name"], "$path/1x", $max_width / 4, $max_height / 4)) {
-    error_log("Error processing image: $err");
-    generate_alert("/emotes/upload.php", "Error occurred while processing the image ($err)", 500);
-    abort_upload($path, $db, $id);
-    exit;
+if ($is_manual) {
+    $image_1x = $_FILES["file-1x"];
+    $image_2x = $_FILES["file-2x"];
+    $image_3x = $_FILES["file-3x"];
+
+    $file_1x = does_file_meet_requirements($image_1x["tmp_name"], $max_width / 4, $max_height / 4);
+    $file_2x = does_file_meet_requirements($image_2x["tmp_name"], $max_width / 2, $max_height / 2);
+    $file_3x = does_file_meet_requirements($image_3x["tmp_name"], $max_width, $max_height);
+
+    if (!$file_1x[0] || !$file_2x[0] || !$file_3x[0]) {
+        generate_alert("/emotes/upload.php", "Files don't meet requirements");
+        abort_upload($path, $db, $id);
+        exit;
+    }
+
+    if (
+        !move_uploaded_file($image_1x["tmp_name"], "$path/1x.$file_1x[1]") ||
+        !move_uploaded_file($image_2x["tmp_name"], "$path/2x.$file_2x[1]") ||
+        !move_uploaded_file($image_3x["tmp_name"], "$path/3x.$file_3x[1]")
+    ) {
+        generate_alert("/emotes/upload.php", "Failed to move the uploaded files");
+        abort_upload($path, $db, $id);
+        exit;
+    }
+} else {
+    $image = $_FILES["file"];
+    // resizing the image
+    if ($err = resize_image($image["tmp_name"], "$path/3x", $max_width, $max_height)) {
+        error_log("Error processing image: $err");
+        generate_alert("/emotes/upload.php", "Error occurred while processing the image ($err)", 500);
+        abort_upload($path, $db, $id);
+        exit;
+    }
+    if ($err = resize_image($image["tmp_name"], "$path/2x", $max_width / 2, $max_height / 2)) {
+        error_log("Error processing image: $err");
+        generate_alert("/emotes/upload.php", "Error occurred while processing the image ($err)", 500);
+        abort_upload($path, $db, $id);
+        exit;
+    }
+    if ($err = resize_image($image["tmp_name"], "$path/1x", $max_width / 4, $max_height / 4)) {
+        error_log("Error processing image: $err");
+        generate_alert("/emotes/upload.php", "Error occurred while processing the image ($err)", 500);
+        abort_upload($path, $db, $id);
+        exit;
+    }
 }
 
 $db = null;
 
 if (CLIENT_REQUIRES_JSON) {
-    http_response_code(201);
-    echo json_encode([
+    json_response([
         "status_code" => 201,
         "message" => null,
         "data" => [
             "id" => $id,
             "code" => $code,
-            "ext" => $ext,
-            "mime" => $mime,
             "uploaded_by" => $uploaded_by
         ]
-    ]);
+    ], 201);
     exit;
 }