Add default resolution

- add quick resolution buttons - detect default images resolution - check images before video creating resolve #1
Aurora-Hunters · Feb 16, 2021 · efe565f · efe565f
1 parent 7e4f8b8
commit efe565f
Show file tree

Hide file tree

Showing 4 changed files with 93 additions and 2 deletions.
diff --git a/app/styles/base.pcss b/app/styles/base.pcss
@@ -135,3 +135,26 @@ button:focus {
     cursor: pointer;
   }
 }
+
+.video-resolution {
+  font-size: 10px;
+  font-weight: bold;
+  vertical-align: middle;
+  border: 1px solid #fff9;
+  border-radius: 4px;
+  padding: 3px;
+  -webkit-font-smoothing: auto;
+
+  &:hover {
+    background-color: #fff;
+    border: 1px solid #fff;
+    color: #0F0F26;
+    cursor: pointer;
+  }
+
+  &:active {
+    background-color: #fffd;
+    border: 1px solid #fffd;
+    cursor: pointer;
+  }
+}
diff --git a/index.html b/index.html
@@ -51,6 +51,12 @@
       <div class="row">
         <div class="cell">
           Video resolution
+          <br>
+          <span class="video-resolution" onclick="updateResolution('', '')">Source</span>
+          <span class="video-resolution" onclick="updateResolution('?', '720')">HD</span>
+          <span class="video-resolution" onclick="updateResolution('?', '1080')">Full HD</span>
+          <span class="video-resolution" onclick="updateResolution('?', '2160')">4K</span>
+          <span class="video-resolution" onclick="updateResolution('?', '4320')">8K</span>
         </div>
         <div class="cell cell--stretched">
           <input type="text" id="videoWidth" value="?" class="short-number">
@@ -92,14 +98,24 @@
     const fs = require('fs');
     const open = require('open');
     const FileToObject = require('./app/utils/file-to-object');
+    const sizeOf = require('image-size');
 
+    /**
+     * Global variable
+     * List of images
+     */
     let images = [];
 
     /**
      * Global variable for ffmpeg command
      */
     let command;
 
+    const sourceResolution = {
+      width: 0,
+      height: 0
+    }
+
     const versionHolder = document.getElementById('version');
 
     versionHolder.innerText = `v${version}`;
@@ -214,6 +230,8 @@
     })
 
     createTlButton.addEventListener('click', async (event) => {
+      checkSelectedImages();
+
       createMovie({
         images: images,
         filename: timelapseName.value,
@@ -231,6 +249,16 @@
       } catch (e) {}
     });
 
+    const updateResolution = (width = '?', height = '?') => {
+      if (!width && !height) {
+        width = sourceResolution.width;
+        height = sourceResolution.height;
+      }
+
+      videoWidth.value = width;
+      videoHeight.value = height;
+    }
+
     const directorySelected = async (chosenFiles) => {
       let filesList = [];
 
@@ -276,13 +304,36 @@
 
       selectedDirectoryImages.innerText = `${images.length} images`;
 
+      selectedDirectoryImages.addEventListener('click', checkSelectedImages)
+
+      const dimensions = sizeOf(images[0]);
+      sourceResolution.width = dimensions.width;
+      sourceResolution.height = dimensions.height;
+      updateResolution(sourceResolution.width, sourceResolution.height);
+
       const dirname = path.basename(shortestDirname);
       selectedDirectoryName.innerText = dirname;
 
       selectedDirectory.classList.remove('hidden');
       tlOptions.classList.remove('hidden');
     };
 
+    const checkSelectedImages = () => {
+      images = images.filter(image => {
+        try {
+          if (fs.existsSync(image)) {
+            return true;
+          }
+        } catch(err) {
+          console.error(err)
+        }
+
+        return false;
+      })
+
+      selectedDirectoryImages.innerText = `${images.length} images`;
+    }
+
     const createMovie = async function (options) {
       const defaultOptions = {
         images: [],
@@ -314,7 +365,9 @@
 
       let list = '';
       options.images.forEach(file => {
-          list += `file '${file}'\n`;
+        if (!fs.existsSync(file)) return;
+
+        list += `file '${file}'\n`;
       });
 
       await fs.writeFileSync(LISTFILENAME, list);

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "tlmaker",
   "productName": "Time Lapse Maker",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "description": "Create amazing videos from separate images",
   "main": "index.js",
   "scripts": {
@@ -36,6 +36,7 @@
     "electron-is-dev": "^1.2.0",
     "electron-updater": "^4.3.5",
     "fluent-ffmpeg": "^2.1.2",
+    "image-size": "^0.9.3",
     "open": "^7.3.1",
     "winston": "^3.3.3",
     "winston-daily-rotate-file": "^4.5.0"

diff --git a/yarn.lock b/yarn.lock
@@ -2156,6 +2156,13 @@ image-q@^1.1.1:
   resolved "https://registry.yarnpkg.com/image-q/-/image-q-1.1.1.tgz#fc84099664460b90ca862d9300b6bfbbbfbf8056"
   integrity sha1-/IQJlmRGC5DKhi2TALa/u7+/gFY=
 
+image-size@^0.9.3:
+  version "0.9.3"
+  resolved "https://registry.yarnpkg.com/image-size/-/image-size-0.9.3.tgz#f7efce6b0a1649b44b9bc43b9d9a5acf272264b6"
+  integrity sha512-5SakFa79uhUVSjKeQE30GVzzLJ0QNzB53+I+/VD1vIesD6GP6uatWIlgU0uisFNLt1u0d6kBydp7yfk+lLJhLQ==
+  dependencies:
+    queue "6.0.1"
+
 import-fresh@^3.2.1:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-3.3.0.tgz#37162c25fcb9ebaa2e6e53d5b4d88ce17d9e0c2b"
@@ -3281,6 +3288,13 @@ qs@~6.5.2:
   resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.2.tgz#cb3ae806e8740444584ef154ce8ee98d403f3e36"
   integrity sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA==
 
+[email protected]:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/queue/-/queue-6.0.1.tgz#abd5a5b0376912f070a25729e0b6a7d565683791"
+  integrity sha512-AJBQabRCCNr9ANq8v77RJEv73DPbn55cdTb+Giq4X0AVnNVZvMHlYp7XlQiN+1npCZj1DuSmaA2hYVUUDgxFDg==
+  dependencies:
+    inherits "~2.0.3"
+
 randombytes@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/randombytes/-/randombytes-2.1.0.tgz#df6f84372f0270dc65cdf6291349ab7a473d4f2a"