v1.0.3

package.json

@@ -1,22 +1,24 @@
 {
   "name": "veditbox",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "description": "Utility Box to paste url, image data or record audio then drag it out as an file to another application.",
   "main": "src/main/index.js",
   "scripts": {
-    "postinstall": "install-app-deps",
+    "postinstall": "electron-builder install-app-deps",
     "start": "electron .",
-    "build": "electron-builder --dir"
+    "build": "electron-builder --dir",
+    "dist": "electron-builder"
   },
   "author": "Mayk Brito <maykbrito@gmail.com>",
   "license": "MIT",
   "devDependencies": {
     "electron": "^21",
-    "electron-builder": "^22.9.1"
+    "electron-builder": "23.0.2"
   },
   "dependencies": {
     "@electron/remote": "^2.0.11",
     "@ffmpeg-installer/ffmpeg": "^1.0.20",
+    "axios": "^1.5.1",
     "fluent-ffmpeg": "^2.1.2",
     "imagemagick": "^0.1.3",
     "request": "^2.88.2",

src/renderer/index.js

@@ -1,14 +1,8 @@
 // create directory if not exists
-const fs = require('fs');
-const homedir = require('os').homedir();
-const dir = globalThis.destDownloadFolder = homedir + '/veditbox';
+require('../utils/create-download-directory').create()
 
-if (!fs.existsSync(dir)){
-    fs.mkdirSync(dir);
-}
-
-// ----
-let { showStatus } = require('./lib/utils.js')
+// globals
+require('../utils/globals')
 
 require('./lib/control-window.js')
 require('./lib/modal.js')

src/renderer/lib/control-window.js

@@ -1,5 +1,8 @@
-const { getCurrentWindow } = require('@electron/remote')
+const { windowAlwaysOnTop } = require('../../utils/window-always-on-top')
+const { ELEMENTS } = require('../../utils/elements')
+
+const settingsForm = ELEMENTS.settingsForm
 
 settingsForm.alwaysOnTop.onchange = () => {
-  getCurrentWindow().setAlwaysOnTop(settingsForm.alwaysOnTop.checked)
+  windowAlwaysOnTop(settingsForm.alwaysOnTop.checked)
 }

src/renderer/lib/file/ImageFile.js

@@ -1,7 +1,12 @@
 const { ipcRenderer } = require('electron')
-const FileModel = require('./FileModel')
 const magick = require('imagemagick');
-const { imageFilePath } = require('../utils')
+
+const FileModel = require('./FileModel')
+
+const { ELEMENTS } = require('../../../utils/elements')
+const mainArea = ELEMENTS.mainArea
+
+const { CONSTANTS } = require('../../../utils/constants')
 
 class ImageFile extends FileModel {
   /**
@@ -19,7 +24,7 @@ class ImageFile extends FileModel {
     this.file = this.file || (await this.createFile())
     this.el.src = URL.createObjectURL(this.file)
     this.fileType = this.fileType || 'png'
-    this.name = imageFilePath(this.fileType)
+    this.name = CONSTANTS.imageFilePath(this.fileType)
     this.arrayBuffer = await this.file.arrayBuffer()
     return this
   }

src/renderer/lib/file/VideoFile.js

@@ -1,6 +1,10 @@
 const { ipcRenderer } = require('electron')
 const FileModel = require('./FileModel')
-const { videoFilePath } = require('../utils')
+
+const { ELEMENTS } = require('../../../utils/elements')
+const mainArea = ELEMENTS.mainArea
+
+const { CONSTANTS } = require('../../../utils/constants')
 
 class VideoFile extends FileModel {
   constructor(url = null) {
@@ -17,7 +21,7 @@ class VideoFile extends FileModel {
   async generate(blobFile = null) {
     this.file = await this.createFile(blobFile)
     this.el.src = URL.createObjectURL(this.file)
-    this.name = videoFilePath
+    this.name = CONSTANTS.videoFilePath()
     this.arrayBuffer = await this.file.arrayBuffer()
     return this
   }

src/renderer/lib/file/index.js

@@ -1,6 +1,9 @@
-let { showStatus } = require('../utils.js')
+const { showStatus } = require('../../../utils/show-status')
 const { getHandlers } = require('./handlers.js')
 
+const { ELEMENTS } = require('../../../utils/elements')
+const mainArea = ELEMENTS.mainArea
+
 // Paste content from clipboard
 document.onpaste = async (e) => {
   e.preventDefault()

src/renderer/lib/modal.js

@@ -1,5 +1,4 @@
-const modal = document.querySelector('dialog')
-helpBtn.onclick = () => modal.showModal()
+const { ELEMENTS } = require('../../utils/elements')
 
-const closeBtn = modal.querySelector('button')
-closeBtn.onclick = () => modal.close()
+ELEMENTS.helpBtn.onclick = () => ELEMENTS.modal.showModal()
+ELEMENTS.closeBtn.onclick = () => ELEMENTS.modal.close()

src/renderer/lib/recorder/audio/index.js

@@ -1,7 +1,13 @@
 const { Buffer } = require('buffer')
 const { ipcRenderer } = require('electron')
-const { showStatus, audioFilePath } = require('../../utils.js')
 const { createWaveformDisplay } = require('./waveform-display.js')
+
+const { ELEMENTS } = require('../../../../utils/elements.js')
+const mainArea = ELEMENTS.mainArea
+
+const { CONSTANTS } = require('../../../../utils/constants')
+
+const { showStatus } = require('../../../../utils/show-status')
 const { getMediaStream } = require('./media-stream.js')
 
 window.onkeydown = (e) => {
@@ -99,7 +105,7 @@ async function toggleRecording({ noiseSuppression }) {
     const waveBuffer = audioBufferToWav(audioBuffer)
 
     const audio = document.createElement('audio')
-    const name = audioFilePath
+    const name = CONSTANTS.audioFilePath()
     const blob = new Blob([waveBuffer], { type: 'audio/wav' })
     audio.src = URL.createObjectURL(blob)
 

src/renderer/lib/recorder/screen/handlers.js

@@ -1,7 +1,12 @@
 const fs = require('fs')
 const { createVideoFile } = require('./ffmpeg')
-const { videoFilePath } = require('../../utils')
+
+const { showStatus } = require('../../../../utils/show-status')
 const VideoFile = require('../../file/VideoFile.js')
+const { CONSTANTS } = require('../../../../utils/constants')
+
+const { ELEMENTS } = require('../../../../utils/elements')
+const mainArea = ELEMENTS.mainArea
 
 let recordedChunks = []
 
@@ -21,6 +26,9 @@ async function handleStop() {
 
 async function onstop() {
   const videoBuffer = await handleStop()
+
+  const videoFilePath = CONSTANTS.videoFilePath()
+
   // temp file
   fs.writeFileSync(videoFilePath + '.webm', videoBuffer)
 

src/renderer/lib/recorder/screen/index.js

@@ -1,6 +1,9 @@
 const { ipcRenderer } = require('electron')
 const { getVideoSources, createMediaRecorder } = require('./video-sources')
-const { showStatus } = require('../../utils.js')
+const { showStatus } = require('../../../../utils/show-status')
+
+const { ELEMENTS } = require('../../../../utils/elements')
+const mainArea = ELEMENTS.mainArea
 
 // start default video source
 ;(async () => {

src/renderer/lib/video-downloader.js

@@ -1,29 +1,13 @@
-const YTDlpWrap = require('yt-dlp-wrap').default;
-const youtubedl = new YTDlpWrap();
+const youtubedl = require('../../utils/get-yt-dlp')
 
 const fs = require('fs')
+const { CONSTANTS } = require('../../utils/constants')
+const { showStatus } = require('../../utils/show-status')
 
-const { videoFilePath, showStatus } = require('./utils.js')
-
-// async function download(url) {
-//   try { 
-//     const response = await fetch(url)
-//     const file = await response.blob()
-//     const link = document.createElement('a')
-//     link.href = URL.createObjectURL(file)
-//     link.download = videoFilePath
-//     link.hidden = true;
-//     link.click()
-//     showStatus('done downloading video file', 'green')
-//     return videoFilePath
-//   } catch(err) {
-//     showStatus('error downloading video', 'red')
-//   }
-// }
-
-function download(url) {
+const download = (url) => {
   let err = false
-  return new Promise((resolve, reject) => {
+  return new Promise(async (resolve, reject) => {
+    const videoFilePath = CONSTANTS.videoFilePath()
     let video = youtubedl.execStream([
       '-o', videoFilePath,
       url,

src/utils/constants.js

@@ -0,0 +1,17 @@
+const path = require('path')
+const homedir = require('os').homedir();
+
+const destDownloadFolder = homedir + '/veditbox'
+
+class CONSTANTS {
+  static destDownloadFolder = destDownloadFolder;
+  static videoFilePath = (ext = 'mp4') => createPath(ext);
+  static audioFilePath = (ext = 'wav') => createPath(ext);
+  static imageFilePath = (ext = 'png') => createPath(ext);
+}
+
+function createPath(ext) {
+  return path.join(destDownloadFolder, `${new Date().toJSON().replace(/\W/g, '')}.${ext}`)
+}
+
+module.exports = { CONSTANTS }

src/utils/create-download-directory.js

@@ -0,0 +1,12 @@
+const fs = require('fs');
+const { CONSTANTS } = require('./constants')
+
+const create = () => { 
+  const dir = CONSTANTS.destDownloadFolder 
+
+  if (!fs.existsSync(dir)){
+      fs.mkdirSync(dir);
+  }
+}
+
+module.exports = { create }

src/utils/elements.js

@@ -0,0 +1,16 @@
+class ELEMENTS {
+  static getElement = (selector) => document.querySelector(selector)
+
+  static setElement = (name, selector) => {
+    return this[name] = this.getElement(selector)
+  }
+}
+
+ELEMENTS.setElement('mainArea', '#mainArea')
+ELEMENTS.setElement('settingsForm', '#settingsForm')
+ELEMENTS.setElement('statusText', '#statusText')
+ELEMENTS.setElement('modal', 'dialog')
+ELEMENTS.setElement('helpBtn', '#helpBtn')
+ELEMENTS.setElement('closeBtn', 'dialog button')
+
+module.exports = { ELEMENTS }

src/utils/get-yt-dlp.js

@@ -0,0 +1,55 @@
+const axios = require('axios')
+// const os = require('os')
+const fs = require('fs')
+const YTDlpWrap = require('yt-dlp-wrap').default;
+const DownloadDirectory = require('./create-download-directory')
+const { CONSTANTS } = require('./constants');
+
+const filePath = `${CONSTANTS.destDownloadFolder}/yt-dlp`
+
+async function downloadLatestRelease() {
+    try {
+        if(fs.existsSync(filePath)) return
+
+        console.log('downloading yt-dlp')
+        //Get the data from the github releases API. In this case get page 1 with a maximum of 5 items.
+        let githubReleasesData = await YTDlpWrap.getGithubReleases(1, 5);
+
+        // const platform = os.platform();
+        const assets = githubReleasesData[0].assets
+        // let releases = assets.filter(asset => asset.name.includes(platform));
+        let release = assets.find(asset => asset.name === "yt-dlp");
+
+        // if (releases.length === 0) {
+        //     throw new Error(`No release assets found for platform: ${platform}`);
+        // }
+
+        if(!release) throw new Error('No release found')
+
+        const downloadUrl = release.browser_download_url;
+        const downloadResponse = await axios.get(downloadUrl, { responseType: 'stream' });
+
+        const fileWriter = fs.createWriteStream(filePath);
+        downloadResponse.data.pipe(fileWriter);
+
+        return new Promise((resolve, reject) => {
+            fileWriter.on('finish', resolve);
+            fileWriter.on('error', reject);
+        });
+    } catch (error) {
+        console.error('Error occurred while downloading release:', error);
+    }
+}
+
+
+(async() => {
+    DownloadDirectory.create()
+
+    await downloadLatestRelease()
+    //Download the yt-dlp binary for the given version and platform to the provided path.
+    //By default the latest version will be downloaded to "./yt-dlp" and platform = os.platform().
+    await YTDlpWrap.downloadFromGithub(filePath);
+
+})()
+
+module.exports = new YTDlpWrap(filePath);

src/utils/globals.js

@@ -0,0 +1,10 @@
+const { CONSTANTS } = require('./constants')
+const { showStatus } = require('./show-status')
+
+globalThis.destDownloadFolder = CONSTANTS.destDownloadFolder
+
+globalThis.activeThing = { dispose: () => {} }
+module.exports.activeThing = globalThis.activeThing
+
+globalThis.showStatus = showStatus
+module.exports.showStatus = showStatus

src/utils/show-status.js

@@ -0,0 +1,8 @@
+const { ELEMENTS } = require('./elements')
+
+const showStatus = (text, color = 'white') => {
+  ELEMENTS.statusText.textContent = text
+  ELEMENTS.statusText.style.color = color
+}
+
+module.exports = { showStatus }

src/utils/window-always-on-top.js

@@ -0,0 +1,7 @@
+const { getCurrentWindow } = require('@electron/remote')
+
+const windowAlwaysOnTop = (onTop) => {
+  getCurrentWindow().setAlwaysOnTop(onTop)
+}
+
+module.exports = { windowAlwaysOnTop }