feat: add media resolution updates & API endpoints

Introduced a new API endpoint to retrieve media for a given category,
enhancing the user experience by dynamically updating thumbnails
post-upload based on available resolutions. This connects the frontend
to the backend efficiently, ensuring users can see the immediate impact
of their uploads. Additionally, updated serializers and views in the
backend to support this functionality, alongside improving code comments
for future development clarity.

- Implemented `getCategoryMedia` in the JS API for fetching media
resolutions.
- Enabled dynamic thumbnail updates in the user area post file upload,
improving visual feedback.
- Extended the Django REST framework routers to include the new media
endpoint, facilitating easier access to media items.
- Updated the `OriginalMediaSerializer` to include `category` for more
detailed media information.
- Enriched task and views files with necessary TODO comments to guide
future enhancements and exception handling.

This change significantly improves the content management workflow,
making it more interactive and user-friendly.

assets/js/userarea.js

@@ -1,7 +1,7 @@
 import "../scss/frontend.scss";
 import "../css/userarea.css";
 
-import { getCookie, getElementById } from "./api";
+import { getCategoryMedia, getCookie, getElementById } from "./api";
 
 import { Tab } from "bootstrap";
 import DataTable from "datatables.net-dt";
@@ -61,7 +61,7 @@ function handleFiles(files) {
     thumbnailCol.classList.add("col-2");
     const thumbnail = document.createElement("img");
     thumbnail.classList.add("img-fluid", "thumbnail");
-    thumbnail.src = ""; // Placeholder until upload completes
+    thumbnail.src = ""; // TODO: Add a loading spinner or something here
     thumbnailCol.appendChild(thumbnail);
 
     const fileNameCol = document.createElement("div");
@@ -129,11 +129,19 @@ function uploadFile(file, progressBar, thumbnail) {
   xhr.onload = () => {
     if (xhr.status === 201) {
       const response = JSON.parse(xhr.responseText);
-      progressBar.classList.add("bg-success");
-      progressBar.textContent = "Success!";
+      progressBar.textContent = "Converting...";
 
-      // TODO: Check API until the first resolution is available
+      let thumbnailCheck = setInterval(() => {
+        getCategoryMedia(response.category, response.id).then((media) => {
+          if (media.obj.resolutions.length > 0) {
+            clearInterval(thumbnailCheck);
+            thumbnail.src = media.obj.resolutions[0].file;
 
+            progressBar.classList.add("bg-success");
+            progressBar.textContent = "Done!";
+          }
+        });
+      }, 2000);
     } else {
       progressBar.classList.add("bg-danger");
       progressBar.textContent = "Error!";