Merge branch 'feature/combination-of-all-the-things' into 'develop'

Fixed an error in checkBoxes function and uploadContainer "drop" listener... See merge request proj-wise2526-video2document/video2document!15
Implemented audio extractor into IPC call, sooooooo, frontend and backend are now officially linked successfully
2026-06-15 18:01:52 +02:00 · 2025-11-12 20:56:11 +01:00 · 2025-11-12 20:28:55 +01:00 · 2025-11-12 20:24:45 +01:00 · 2025-11-12 20:04:48 +01:00 · 2025-11-12 20:03:09 +01:00
16 changed files with 1670 additions and 161 deletions
@@ -965,3 +965,7 @@ app.*.symbols

 #Storage files
 storage/
+
+*.mp4
+*.wav
+*.flac
@@ -3,15 +3,22 @@
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Video Upload Drag and Drop + Button</title>
+  <title id="title">Video to document</title>
  <link rel="stylesheet" href="style.css">
 </head>
 <body>
 
 <div class="mitte" id="mitte"> 
-  <h1>Video to document</h1> 
+  <div class="flagsBtns" id="flagsBtns">
+    <button class="de_Btn" id="de_Btn" onclick="changeLanguage('de')"><img src="flags/germany-flag-png-large.jpg" width="25px" height="20px"/></button>
+    <button class="eng_Btn" id="eng_Btn" onclick="changeLanguage('en')"><img src="flags/united-kingdom-flag-png-large.jpg" width="25px" height="20px"/></button>
+    <button class="in_Btn" id="in_Btn" onclick="changeLanguage('in')"><img src="flags/india-flag-png-large.png" width="25px" height="20px"/></button>
+  </div>
+
+  <h1 id="h1">Video to document</h1> 
+
  <div class="upload-container" id="uploadContainer">
-    <p>Drag and drop video file</p>
+    <p id="p1">Drag and drop video file</p>
    <div class="file-name" id="fileName">No video chosen</div>
  </div>

@@ -19,19 +26,19 @@
  <input type="file" id="videoUpload" accept="video/*">

 <div class="checkbox-group">
-  <label for="checkbox-group">Choose prefered document style:</label>
+  <label id="checkbox_group" for="checkbox-group">Choose prefered document style:</label>
  <div class="checkbox-container">
-    <input type="checkbox" id="docFormat">
-    <label for "docFormat">Meeting report</label>
+    <input type="checkbox" name ="docFormat" id="docFormat">
+    <label id="label_format" for="docFormat">Meeting report</label>
  </div>

  <div class="checkbox-container">
-    <input type="checkbox" id="docFormatCustom">
-    <label for "docFormatCustom">Summary with timestamps</label>
+    <input type="checkbox" name="docFormat" id="docFormatSummary">
+    <label id="label_summary" for="docFormatSummary">Summary with timestamps</label>
  </div>
 </div>

-<button class="submit-btn" id="submitButton">Submit Video</button>
+<button class="submit-btn" id="submitButton" onclick="checkBoxes()">Submit</button>

 <div class="progressbar">
  <div class="progress_fill"></div>
@@ -2,6 +2,17 @@

 const { contextBridge, ipcRenderer, webUtils } = require('electron')

-contextBridge.exposeInMainWorld("explorer", {
+try {
+    contextBridge.exposeInMainWorld("explorer", {
        onFileDrop: (file) => webUtils.getPathForFile(file)
-})
+    })
+    contextBridge.exposeInMainWorld("extractor", {
+        extract: (file) => ipcRenderer.send("extract", file)
+    })
+    contextBridge.exposeInMainWorld("electronAPI", {
+        getFilePath: (file) => {return webUtils.getPathForFile(file)}
+    })
+} catch (error) {
+    console.log("Error in preload.js");
+}
+
@@ -1,22 +1,31 @@

-const dropzone = document.getElementById("uploadContainer");
-
-dropzone.addEventListener("dragover", (e) =>{
+uploadContainer.addEventListener("dragover", (e) =>{
+    try {
        e.stopPropagation();
        e.preventDefault();
+    } catch (error) {
+        console.log("Error in renderer.js dragover listener function")
+    }
+    
 });

-dropzone.addEventListener("drop", (e) => {
+//listener for when a file get dropped on the drag&drop field
+uploadContainer.addEventListener("drop", (e) => {
+    try {
        e.stopPropagation()
        e.preventDefault()
        const files = e.dataTransfer.files
        const filePath = window.explorer.onFileDrop(files[0])
        var holdy = filePath + "";
-    if(holdy.endsWith(".mp4")){
+        if(holdy.endsWith(".mp4") || holdy.endsWith(".mov") || holdy.endsWith(".avi") || holdy.endsWith( ".mkv")){
            console.log(filePath)

            const files1 = e.dataTransfer.files;
            handleFiles(files1);
        }
+    } catch (error) {
+        console.log("Error in renderer.js with the listerner for the drop function");
+    }
+    
    
 })
@@ -1,37 +1,115 @@
-const uploadContainer = document.getElementById('uploadContainer');
-const fileInput = document.getElementById('videoUpload');
-const fileName = document.getElementById('fileName');
-const manualBtn = document.getElementById('manualUploadBtn');
-const videoPreview = document.getElementById('videoPreview');

+//listener for the file explorer search
+manualUploadBtn.addEventListener('click', () => {
+  try {
+    videoUpload.click();
+  } catch (error) {
+    console.log("Error in manualBtn EventListener click");
+  }
  
-
-
-
-manualBtn.addEventListener('click', () => {
-  fileInput.click();
 });

+//function to check if one checkbox is at least klicked
+function checkBoxes() {
+  try {
+    const checkboxes = document.querySelectorAll('input[name="docFormat"]');
+    let isChecked = false;
+
+    checkboxes.forEach(function(checkbox){
+      if(checkbox.checked){
+        isChecked = true;
+      }
+    });
+
+    if(isChecked){
+      //Code to submit the video
+      var pathTest = window.electronAPI.getFilePath(videoUpload.files[0]);
+      if(pathTest.endsWith(".mp4") || holdy.endsWith(".mov") || holdy.endsWith(".avi") || holdy.endsWith( ".mkv")){
+        window.extractor.extract({inputVideoPath: pathTest, outputType:"wav"})
+      }
+    } else {
+      //language only english at the moment
+      alert('Please select at least one document type.');
+    }
+  } catch (error) {
+    console.log(error)
+  }
+  
+// mapFunctions.get("extraction-video-to-audio").function({inputVideoPath:"./a.mp4", outputType:"wav"})
+}
+
+//language changing feature
+function changeLanguage(language) {
+    if (language === 'en') {
+        document.getElementById('title').textContent = 'Video to document';
+        document.getElementById('h1').textContent = 'Video to document';
+        document.getElementById('p1').textContent = 'Drag and drop video file';
+        document.getElementById('fileName').textContent = 'No video chosen';
+        document.getElementById('manualUploadBtn').textContent = 'Search video';
+        document.getElementById('checkbox_group').textContent = 'Choose prefered document style:';
+        document.getElementById('label_format').textContent = 'Meeting report';
+        document.getElementById('label_summary').textContent = 'Summary with timestamps';
+        document.getElementById('submitButton').textContent = 'Submit';
+    } else if (language === 'de') {
+        document.getElementById('title').textContent = 'Video zu Dokument';
+        document.getElementById('h1').textContent = 'Video zu Dokument';
+        document.getElementById('p1').textContent = 'Video per Drag & Drop ablegen';
+        document.getElementById('fileName').textContent = 'Kein Video ausgewaehlt';
+        document.getElementById('manualUploadBtn').textContent = 'Video suchen';
+        document.getElementById('checkbox_group').textContent = 'Bevorzugte Dokumentvarianten:';
+        document.getElementById('label_format').textContent = 'Meeting Bericht';
+        document.getElementById('label_summary').textContent = 'Zusammenfassung mit Zeitstempeln';
+        document.getElementById('submitButton').textContent = 'Absenden';
+    } else if(language == "in") {
+        document.getElementById('title').textContent = 'दस्तावेज़ के लिए वीडियो';
+        document.getElementById('h1').textContent = 'दस्तावेज़ के लिए वीडियो';
+        document.getElementById('p1').textContent = 'वीडियो फ़ाइल खींचें और छोड़ें';
+        document.getElementById('fileName').textContent = 'कोई वीडियो नहीं चुना गया';
+        document.getElementById('manualUploadBtn').textContent = 'वीडियो खोजें';
+        document.getElementById('checkbox_group').textContent = 'पसंदीदा दस्तावेज़ शैली चुनें:';
+        document.getElementById('label_format').textContent = 'बैठक रिपोर्ट';
+        document.getElementById('label_summary').textContent = 'टाइमस्टैम्प के साथ सारांश';
+        document.getElementById('submitButton').textContent = 'जमा करना';
+    }
+}
+
+
+//listener for the file explorer search when something got selected
+videoUpload.addEventListener('change', () => {
+  try {
+    handleFiles(videoUpload.files);
+  } catch (error) {
+    console.log("Error in manualBtn EventListener change");
+  }
  
-fileInput.addEventListener('change', () => {
-  handleFiles(fileInput.files);
 });



-
+//function to display the file path in the drop down box
 function handleFiles(files) {
+  try {
    if (files.length > 0) {
      const file = files[0];
      if (file.type.startsWith('video/')) {
-      fileInput.files = files;
+        videoUpload.files = files;
        fileName.textContent = `Chosen video: ${file.name}`;
      }
-}
+    }
+  } catch (error) {
+    console.log("Error in script.js handleFiles function");
+  }
+  
 }

+//function to regulate the progress on the progressbar
 function updateProgressBar(bar, value){
+  try {
    value = Math.round(value);
    bar.querySelector(".progress_fill").style.width = `${value}%`;
    bar.querySelector(".progress_text").textContent = `${value}%`;
+  } catch (error) {
+    console.log("Error in scripts.js updateProgressBar function");
+  }
+  
 }
@@ -5,7 +5,7 @@ body {
  justify-content: center;
  align-items: center;
  height: 100vh;
-  background-color: #444;
+  background-color: #555;
  gap: 15px;
  margin: 0;
 }
@@ -75,6 +75,7 @@ gap: 5px;

 .checkbox-group {
  margin-top: 15px;
+  margin-bottom: 15px;
  display: flex;
  flex-direction: column;
  gap: 10px;
@@ -92,14 +93,14 @@ gap: 5px;
 }

 .mitte {
-  background-color: #eaf0ff;
+  background-color: #f2f3f4;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 5% 50px;
  margin-top: 20px;
  gap: 10px;
-  border: 2px;
+  border: 1px;
  border-color: black;
  border-style: solid;
 }
@@ -112,7 +113,7 @@ h1 {
  position: relative;
  width: 210px;
  height: 30px;
-  background: darkslategray;
+  background: rgb(42, 46, 78);
  border-radius: 5px;
  overflow: hidden;
 }
@@ -129,4 +130,18 @@ h1 {
  top: 50%;
  right: 5px;
  transform: translateY(-50%);
+  color: white;
+}
+
+.flagsBtns {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.de_Btn, .eng_Btn, .in_Btn {
+  padding: 8px 16px;
+  color: white;
+  border: none;
+  border-radius: 8px;
+  cursor: pointer;
 }
@@ -55,4 +55,25 @@ rl.on("line", data =>{

 // ----------------------------------------------------------- ELECTRON ----------------------------------------------------------- //

-// TODO - Add Electron support to the project
+let mainWindow;
+
+function createWindow() {
+  mainWindow = new electron.BrowserWindow({
+    width: 800,
+    height: 600,
+    webPreferences: {
+      nodeIntegration: false,
+      contextIsolation: true,
+      preload: `${mainDir}/electron/main/preload.js`
+    }
+  });
+
+  mainWindow.loadFile('./electron/main/index.html');
+}
+
+electron.app.whenReady().then(createWindow);
+
+
+electron.ipcMain.on("extract", (event, args) => {
+    mapFunctions.get("extraction-video-to-audio").function(args)
+})
@@ -1,10 +1,10 @@
 {
-  "type": "module",
  "dependencies": {
    "cli-progress": "^3.12.0",
+    "electron": "^39.1.1",
+    "express": "^5.1.0",
    "ffmpeg-static": "^5.2.0",
-    "fluent-ffmpeg": "^2.1.3",
-    "express": "^5.1.0"
+    "fluent-ffmpeg": "^2.1.3"
  },
  "devDependencies": {
    "@types/cli-progress": "^3.11.6",
@@ -22,6 +22,7 @@
    "test": "tests"
  },
  "scripts": {
+    "start": "electron main.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
@@ -31,5 +32,3 @@
  "author": "",
  "license": "ISC"
 }
-
-
@@ -8,3 +8,11 @@ fs              = require("fs")
 readline        = require("readline")
 config          = require("./config/config")

+ffmpegPath = require('ffmpeg-static');
+ffmpeg = require('fluent-ffmpeg');
+path = require('path');
+cliProgress = require('cli-progress');
+
+// { app, BrowserWindow, ipcMain, dialog } = require('electron');
+
+electron = require('electron');
@@ -0,0 +1,93 @@
+
+// Ensure ffmpeg binary is available
+if (!ffmpegPath) {
+    throw new Error('FFmpeg binary not found!');
+}
+ffmpeg.setFfmpegPath(ffmpegPath);
+
+// Prepare output directory (always storage/audio under project root)
+const outputDir = `${__dirname}/../../../storage/audio`;
+if (!fs.existsSync(outputDir)) {
+    fs.mkdirSync(outputDir, { recursive: true });
+}
+
+
+
+module.exports = {
+    name:"extraction-video-to-audio", // Unique name for our function that will later be used to get the function from the map via "mapFunctions.get("example").function()"
+    type:"extractor", // value used to differentiate each module to order them in the UI
+    displayname:"Default extractor", // The displayname used within the UI
+    async function(parameter){
+        /*
+        parameter structure:
+        {
+            inputVideoPath: String, // Path to the file
+            outputType: String      // Audio file output format
+        }
+        */
+        let progressBar = new cliProgress.SingleBar({
+            format: 'Processing |{bar}| {percentage}% | {timemark}',
+            barCompleteChar: '\u2588',
+            barIncompleteChar: '\u2591',
+            hideCursor: true
+        });
+        try {
+            // if (meta.url === `file://${process.argv[1]}`) {
+                this.extractAudioFromVideo(parameter.inputVideoPath, progressBar, parameter.outputType)
+                    .then(() => console.log('Audio extraction successful.'))
+                    .catch((err) => console.error(err));
+            // }
+        } catch (error) {
+            console.log(parameter.outputType);
+            
+        }
+
+    },
+    // Derive input and output paths
+    // const inputVideoPath = process.argv[2];
+    // console.log(process.argv);
+
+    /**
+     * Extracts audio from a video using ffmpeg.
+     * - Converts video to WAV (16 kHz, Mono, PCM optional if needed)
+     * - Shows CLI progress bar
+     * - Handles errors gracefully (without errors)
+     */
+    extractAudioFromVideo: async function (videoFilePath, progressBar, outputType){
+        let inputVideoName = path.basename(videoFilePath, path.extname(videoFilePath));
+        let outputAudioPath = path.join(outputDir, `${inputVideoName}.${outputType}`);
+
+        return new Promise((resolve, reject) => {
+            try {
+                ffmpeg(videoFilePath)
+                .outputFormat(outputType)
+                // .audioCodec('pcm_s16le')
+                .audioChannels(1)
+                .audioFrequency(16000)
+                // .setFfmpegPath("./ffmpeg.exe")
+                .on('progress', (progress) => {
+                    if (!progressBar.isActive) progressBar.start(100, 0, { timemark: '00:00:00' });
+                    if (progress.percent) {
+                    progressBar.update(progress.percent, { timemark: progress.timemark });
+                    }
+                })
+                .on('end', () => {
+                    progressBar.update(100, { timemark: 'done' });
+                    progressBar.stop();
+                    console.log(`Extraction completed: ${outputAudioPath}`);
+                    resolve();
+                })
+                .on('error', (err) => {
+                    progressBar.stop();
+                    console.error(`failed_audio_extraction on type ${outputType}: ${err.message}`);
+                    reject(err);
+                })
+                .save(outputAudioPath);
+
+            } catch (error) {
+                console.log();
+            }
+        });
+    }
+
+}
@@ -1,90 +0,0 @@
-import ffmpegPath from 'ffmpeg-static';
-import ffmpeg from 'fluent-ffmpeg';
-import path from 'path';
-import fs from 'fs';
-import cliProgress from 'cli-progress';
-import { fileURLToPath } from 'url';
-
-// Base code reference: https://docs.yemreak.com/arsiv/programming/extract-audio-from-video-with-typescript-and-ffmpeg
-// Test command: npx ts-node ./extract.ts /path/to/video.mp4
-
-/**
- * Extracts audio from a video file and saves it as WAV.
- * @param videoFilePath Path to the input video file.
- */
-
-// Ensure ffmpeg binary is available
-if (!ffmpegPath) {
-  throw new Error('FFmpeg binary not found!');
-}
-ffmpeg.setFfmpegPath(ffmpegPath);
-
-// Ensure an input video path is provided via CLI
-if (process.argv.length < 3) {
-  console.error('Usage: ts-node ./extract.ts <input-video-path>');
-  process.exit(1);
-}
-
-// Resolve __dirname equivalent in ESM
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
-
-// Prepare output directory (always storage/audio under project root)
-const outputDir = path.join(__dirname, '..', '..', '..', 'storage', 'audio');
-if (!fs.existsSync(outputDir)) {
-  fs.mkdirSync(outputDir, { recursive: true });
-}
-
-// Derive input and output paths
-const inputVideoPath = process.argv[2];
-const inputVideoName = path.basename(inputVideoPath, path.extname(inputVideoPath));
-const outputAudioPath = path.join(outputDir, `${inputVideoName}.wav`);
-
-// Initialize CLI progress bar
-const progressBar = new cliProgress.SingleBar({
-  format: 'Processing |{bar}| {percentage}% | {timemark}',
-  barCompleteChar: '\u2588',
-  barIncompleteChar: '\u2591',
-  hideCursor: true
-});
-
-/**
- * Extracts audio from a video using ffmpeg.
- * - Converts video to WAV (16 kHz, Mono, PCM optional if needed)
- * - Shows CLI progress bar
- * - Handles errors gracefully (without errors)
- */
-export function extractAudioFromVideo(videoFilePath: string): Promise<void> {
-  return new Promise((resolve, reject) => {
-    ffmpeg(videoFilePath)
-      .outputFormat('wav')
-      .audioCodec('pcm_s16le')
-      .audioChannels(1)
-      .audioFrequency(16000)
-      .on('progress', (progress) => {
-        if (!progressBar.isActive) progressBar.start(100, 0, { timemark: '00:00:00' });
-        if (progress.percent) {
-          progressBar.update(progress.percent, { timemark: progress.timemark });
-        }
-      })
-      .on('end', () => {
-        progressBar.update(100, { timemark: 'done' });
-        progressBar.stop();
-        console.log(`Extraction completed: ${outputAudioPath}`);
-        resolve();
-      })
-      .on('error', (err) => {
-        progressBar.stop();
-        console.error(`failed_audio_extraction: ${err.message}`);
-        reject(err);
-      })
-      .save(outputAudioPath);
-  });
-}
-
-// Run extraction if executed directly from CLI
-if (import.meta.url === `file://${process.argv[1]}`) {
-  extractAudioFromVideo(inputVideoPath)
-    .then(() => console.log('Audio extraction successful.'))
-    .catch((err) => console.error(err));
-}
@@ -5,5 +5,9 @@ module.exports = {

        // We are now calling the example function from the example folder
        mapFunctions.get("example").function("Startup")
+
+        // mapFunctions.get("extraction-video-to-audio").function({inputVideoPath:"./a.mp4", outputType:"wav"})
+        // mapFunctions.get("extraction-video-to-audio").function({inputVideoPath:"./b.mp4", outputType:"wav"})
+        // mapFunctions.get("extraction-video-to-audio").function({inputVideoPath:"./b.mp4", outputType:"flac"})
    }
 }
Author	SHA1	Message	Date
Spanier, Pit	80392874bb	Merge branch 'feature/combination-of-all-the-things' into 'develop' Fixed an error in checkBoxes function and uploadContainer "drop" listener... See merge request proj-wise2526-video2document/video2document!15	2025-11-12 20:56:11 +01:00
emily	94f390f28b	Implemented audio extractor into IPC call, sooooooo, frontend and backend are now officially linked successfully	2025-11-12 20:28:55 +01:00
emily	73f6fa7524	fixed the code so that it now returns the actual path of the file	2025-11-12 20:24:45 +01:00
emily	87e3368a9a	fixed code	2025-11-12 20:04:48 +01:00
emily	6d9c94c685	removed some debug console outputs	2025-11-12 20:03:09 +01:00
emily	fbd5368223	Implemented functionality to have the UI be able to communicate with the backend	2025-11-12 20:00:25 +01:00
emily	449255dda1	Merge commit 'c8cbd4e92a034fa108d06337a3e63d24e529432f' into feature/combination-of-all-the-things	2025-11-12 19:55:50 +01:00
eric.minning	c8cbd4e92a	Fixed an error in checkBoxes function and uploadContainer "drop" listener regarding file path testing	2025-11-12 18:52:28 +01:00
eric.minning	0f54edb0aa	Removed the variables at the start of the script.js file	2025-11-12 18:44:27 +01:00
eric.minning	54f1f6c135	Added the check if a path is selected and the call to the transcript functio.	2025-11-12 18:16:27 +01:00
Verena Schulz	a32e7e5744	Checkboxes check (with alert)	2025-11-12 17:39:02 +01:00
Verena Schulz	d9e96316c0	Language selection implemented and UI reworked	2025-11-11 18:31:01 +01:00
eric.minning	da3a8c7d8c	Added try/catch handling and some comments	2025-11-11 16:02:07 +01:00
emily	dfe91bb15a	Merge commit '3a8963b49d96d0746b64244fa17458d4ae68ec45' into feature/combination-of-all-the-things	2025-11-10 17:01:30 +01:00
emily	92043440fe	Combined Frontend with backend, and implemented the extractor function into the module structure	2025-11-10 16:18:57 +01:00
emily	bd8ed1bf81	added mp4, flac and wav files to gitignore	2025-11-10 16:12:59 +01:00