feat: video-to-audio converter implemented without logic

backend/package-lock.json

@@ -17,7 +17,8 @@
         "fastify-multipart": "^5.3.1",
         "libreoffice-convert": "^1.6.0",
         "luxon": "^3.5.0",
-        "qrcode": "^1.5.4"
+        "qrcode": "^1.5.4",
+        "video-to-audio": "^1.0.1"
       },
       "devDependencies": {
         "@types/luxon": "^3.4.2",
@@ -1317,6 +1318,12 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/video-to-audio": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/video-to-audio/-/video-to-audio-1.0.1.tgz",
+      "integrity": "sha512-6+h79x2kSO60PYTT2cXcgXIsqw/3X8a5qshsZanxH0cxbGUVxVllwQdNOWr/8ywDNcgGgecSmk8Q6TJ79gtFjQ==",
+      "license": "MIT"
+    },
     "node_modules/which-module": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/which-module/-/which-module-2.0.1.tgz",

backend/package.json

@@ -20,7 +20,8 @@
     "fastify-multipart": "^5.3.1",
     "libreoffice-convert": "^1.6.0",
     "luxon": "^3.5.0",
-    "qrcode": "^1.5.4"
+    "qrcode": "^1.5.4",
+    "video-to-audio": "^1.0.1"
   },
   "devDependencies": {
     "@types/luxon": "^3.4.2",

backend/server.ts

@@ -8,6 +8,7 @@ import { regexTest } from "./src/routes/regextest.route";
 import { tmzConvert } from "./src/routes/tmzconvert.route";
 import { generateQRCode } from "./src/routes/generateqrcode.route";
 import { wordCounter } from "./src/routes/wordcounter.route";
+import { videoConvert } from "./src/routes/videoconvert.route";
 
 const app = Fastify({ logger: true });
 
@@ -25,6 +26,7 @@ app.register(regexTest);
 app.register(tmzConvert);
 app.register(generateQRCode);
 app.register(wordCounter);
+app.register(videoConvert);
 
 const PORT = process.env.PORT || 4000;
 app.listen({ port: Number(PORT), host: "0.0.0.0" }, () => {

backend/src/routes/videoconvert.route.ts

@@ -0,0 +1,70 @@
+import { FastifyInstance, FastifyReply, FastifyRequest } from "fastify";
+import * as libre from "libreoffice-convert";
+import { promisify } from "util";
+import { MultipartValue } from "@fastify/multipart";
+
+const libreConvertAsync = promisify(libre.convert);
+
+const mimeTypes: { [key: string]: string } = {
+  mp4: "video/mp4",
+  avi: "video/x-msvideo",
+  mkv: "video/x-matroska",
+};
+
+export async function videoConvert(app: FastifyInstance) {
+  app.post(
+    "/api/video-convert",
+    async (request: FastifyRequest, reply: FastifyReply) => {
+      try {
+        const parts = request.parts();
+
+        let fileBuffer: Buffer | null = null;
+        let outputFileExt = "";
+
+        for await (const part of parts) {
+          if (part.type === "file") {
+            fileBuffer = await part.toBuffer();
+          } else if (
+            part.fieldname === "outputFormat" &&
+            part.type === "field"
+          ) {
+            outputFileExt = (part as MultipartValue<string>).value;
+          }
+        }
+
+        if (!fileBuffer) {
+          return reply.status(400).send({ error: "No file uploaded!" });
+        }
+        if (!outputFileExt) {
+          return reply
+            .status(400)
+            .send({ error: "No output format provided!" });
+        }
+        if (!outputFileExt.startsWith(".")) {
+          outputFileExt = "." + outputFileExt;
+        }
+
+        const format = outputFileExt.substring(1);
+        const mimeType = mimeTypes[format] || "application/octet-stream";
+
+        const convertedBuffer = await libreConvertAsync(
+          fileBuffer,
+          outputFileExt,
+          undefined,
+        );
+
+        reply
+          .header("Content-Type", mimeType)
+          .header(
+            "Content-Disposition",
+            `attachment; filename="converted${outputFileExt}"`,
+          )
+          .status(200)
+          .send(convertedBuffer);
+      } catch (error) {
+        console.error("Convert error:", error);
+        reply.status(500).send({ error: "Error while converting!" });
+      }
+    },
+  );
+}

frontend/src/app/video-to-audio/layout.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import type { Metadata } from "next";
+import { toolLinks } from "@/constants";
+
+export const metadata: Metadata = {
+  title: toolLinks[8].title,
+  description: "MP4 to MP3 converter!",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body className={`antialiased`}>{children}</body>
+    </html>
+  );
+}

frontend/src/app/video-to-audio/page.tsx

@@ -0,0 +1,186 @@
+"use client";
+import React, { useState } from "react";
+import Navbar from "../../components/Navbar";
+import Footer from "../../components/Footer";
+import Button from "../../components/Button";
+import { ChevronDown, ChevronUp } from "lucide-react";
+import Dropdown from "@/components/Dropdown";
+import {
+  FileFormatsTable,
+  outputFileFormats,
+  videoAudioFormats,
+  videoAudioFormatsTable,
+} from "@/constants";
+
+export default function DocConverter() {
+  const [file, setFile] = useState<File | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [tableOpen, setTableOpen] = useState(false);
+  const [filteredOptions, setFilteredOptions] = useState<string[]>([]);
+  const [selectedOutputFormat, setSelectedOutputFormat] = useState<string | "">(
+    "",
+  );
+
+  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    event.preventDefault();
+
+    if (event.target.files && event.target.files.length > 0) {
+      const selectedFile = event.target.files[0];
+      const fileExtension = selectedFile.name.split(".").pop()?.toLowerCase();
+
+      const isSupported = videoAudioFormats.some((format) =>
+        format.input.toLowerCase().includes(fileExtension || ""),
+      );
+
+      if (!isSupported) {
+        alert("File format not supported!");
+        event.target.value = "";
+        return;
+      }
+
+      setFile(selectedFile);
+      setSelectedOutputFormat("");
+
+      const matchedFormat = videoAudioFormats.find((format) =>
+        format.input.toLowerCase().includes(fileExtension || ""),
+      );
+      setFilteredOptions(matchedFormat ? matchedFormat.output : []);
+    }
+  };
+
+  const convertDoc = async () => {
+    if (!file) {
+      alert("No file selected");
+      return;
+    }
+
+    const formData = new FormData();
+    formData.append("file", file);
+    formData.append("outputFormat", selectedOutputFormat);
+
+    setLoading(true);
+
+    try {
+      const response = await fetch(
+        process.env.backend_url + "/api/video-convert",
+        {
+          method: "POST",
+          body: formData,
+        },
+      );
+
+      if (!response.ok) {
+        console.error(`Error: ${response.statusText}`);
+      }
+
+      const blob = await response.blob();
+      const url = window.URL.createObjectURL(blob);
+      const filename = file.name.split(".")[0];
+
+      const a = document.createElement("a");
+      a.href = url;
+      a.download = `${filename}${selectedOutputFormat}`;
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+
+      setTimeout(() => {
+        URL.revokeObjectURL(url);
+      }, 5000);
+    } catch (error) {
+      console.error("Error while converting:", error);
+      alert("Error while converting!");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="w-screen h-auto min-h-screen bg-black text-white font-noto flex flex-col items-center">
+      <Navbar renderHomeLink={true} />
+      <div className="w-screen h-auto min-h-[calc(100vh-80px-60px)] flex flex-1 flex-col items-center justify-center">
+        <h2 className="text-5xl font-bold text-white mb-16">doc-converter</h2>
+        <div className="h-36 flex flex-row items-center justify-center gap-4">
+          <input
+            type="file"
+            className="h-16 border-2 border-white p-3 rounded-xl text-2xl text-center text-white"
+            id="audioUpload"
+            onChange={handleFileChange}
+          />
+          <Dropdown
+            content={
+              file
+                ? `Convert to: ${selectedOutputFormat}`
+                : "output file format"
+            }
+            options={filteredOptions.length > 0 ? filteredOptions : [""]}
+            onClick={(event) => {
+              const selectedFormat =
+                event.currentTarget.textContent?.trim() || "";
+              setSelectedOutputFormat(selectedFormat);
+            }}
+          />
+        </div>
+        <div className={"flex flex-row items-center gap-4 mt-4 mb-16"}>
+          <Button
+            content={
+              loading ? (
+                <div className="h-10 w-10 border-8 border-blue-100 border-t-blue-500 rounded-full animate-spin" />
+              ) : (
+                "convert"
+              )
+            }
+            onClick={convertDoc}
+          />
+        </div>
+        <div className="overflow-hidden text-xl rounded-lg border border-white mb-16 transition-all duration-300 ease-in-out hover:border-blue-400">
+          <div
+            className="cursor-pointer flex justify-between items-center"
+            onClick={() => setTableOpen(!tableOpen)}
+          >
+            <table className="px-6 py-4 border-b">
+              <thead>
+                <tr className="border-b border-white">
+                  <th className="min-w-96 px-6 py-4 border-r border-white">
+                    📥 Input Format
+                  </th>
+                  <th className="min-w-[398px] px-6 py-4 flex flex-row justify-between items-center">
+                    <p className="pr-4 mx-auto">📤 Output Format</p>
+                    <div className="flex items-end justify-end place-content-end">
+                      {tableOpen ? (
+                        <ChevronUp className="h-6 w-6" />
+                      ) : (
+                        <ChevronDown className="h-6 w-6" />
+                      )}
+                    </div>
+                  </th>
+                </tr>
+              </thead>
+            </table>
+          </div>
+
+          <div
+            className={`
+          }overflow-hidden transition-all duration-700 ease-in-out ${tableOpen ? "max-h-[900px]" : "max-h-0"}`}
+          >
+            <table className="w-full h-auto text-left border-collapse border-white">
+              <tbody>
+                {videoAudioFormatsTable.map((format) => (
+                  <tr key={format.input} className="border-b">
+                    <td className="min-w-96 px-6 py-4 border-r">
+                      {format.input}
+                    </td>
+                    <td className="min-w-96 px-6 py-4">
+                      {format.output.join(", ")}
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+      <Footer className="flex justify-center items-end" />
+    </div>
+  );
+}

frontend/src/constants/index.ts

@@ -154,3 +154,33 @@ export const FileFormatsTable = [
     output: [".pdf", ".ppt", ".pptx"],
   },
 ];
+
+export const videoAudioFormats = [
+  {
+    input: ".mp4",
+    output: [".mp3", ".wav", ".aac"],
+  },
+  {
+    input: ".avi",
+    output: [".mp3", ".wav", ".aac"],
+  },
+  {
+    input: ".mov",
+    output: [".mp3", ".wav", ".aac"],
+  },
+];
+
+export const videoAudioFormatsTable = [
+  {
+    input: ".mp4",
+    output: [".mp3", ".wav", ".aac"],
+  },
+  {
+    input: ".avi",
+    output: [".mp3", ".wav", ".aac"],
+  },
+  {
+    input: ".mov",
+    output: [".mp3", ".wav", ".aac"],
+  },
+];