Merge pull request #2 from Vafilor/feat/image-cache

Add image caching and local database

.eslintrc.js

@@ -19,7 +19,7 @@ module.exports = {
     "tsconfigRootDir": __dirname,
   },
   root: true,
-  ignorePatterns: ["webpack.*", ".eslintrc.js", "forge.config.ts"],
+  ignorePatterns: ["webpack.*", ".eslintrc.js", "forge.config.ts", "drizzle.config.ts", "util/*"],
   plugins: ["import"],
   settings: {
     "import/resolver": {

README.md

@@ -10,6 +10,9 @@ Scout is a cross platform File Browser. At the moment, functionality is pretty l
 * Navigate across directories and drives
 * View basic image, video, and text files
 * Use arrow keys (<- and ->) to navigate files while viewing in a directory
+* Create and show icons for images, including heic files, and video files
+* View heic files 
+
 
 ## Why?
 
@@ -22,12 +25,42 @@ My goal is to organize them into folders like cats, weather, etc. But it takes a
 to generate thumbnails for all of the photos and videos. Worse yet, there's no way (afaik) to trigger the process for all files in a folder - so I have to scroll, wait. Scroll, wait. Directory Opus does a decent job, 
 but the image cache size seemed to be not working when I tried it last, so the images generated then regenerated later. Maybe this is fixed now.
 
-- [ ] Handle Why 2?
+- [x] Handle Why 2?
 
 I want to be able to see images and navigate forward/back with arrow keys. Windows 10/11 kinda does this with the default photo app, but sometimes it has a hard time figuring next/previous images. I could swear it worked in Windows 7, but, who knows.
 
 I want to see if I can create an electron program to help me with these problems.
 
+## Build
+
+The build produces different artifacts on different operating systems. 
+If you encounter an issue with packaging or building (possibly with ffmpeg)
+try clearing the `node_modules` folder and running npm install again.
+
+See `Ffmpeg binary` below for more details. 
+
+### Thumbnail Generation
+
+#### Ffmpeg binary
+
+To create video thumbnails, ffmpeg is used. This is bundled with the app.
+The process is a bit round-a-bout right now. 
+
+1. [Ffmpeg-static](https://github.com/eugeneware/ffmpeg-static), an NPM package, is used to download an appropriate version based on the OS
+2. An environment variable, APP_MODE, is used to determine how to properly build for developoment vs packaging.
+3. APP_MODE = dev: during the build process with Webpack, this binary is copied into the output. Then, the permissions are modified to make it executable.
+4. APP_MODE != dev: the forge.config.js has `extraResources` set to copy ffmpeg
+5. The app uses `src/configuration/constants.ts` to determine the proper path for the ffmpeg binary for the main app code, or for the workers.
+
+Ideally this could be done with a loader, and this mostly works with asset/resource, but I haven't found a nice way to add execution permissions.
+
+#### Fluent-ffmpeg
+
+To use Ffmpeg, [Fluent-ffmpeg](https://github.com/fluent-ffmpeg/node-fluent-ffmpeg) is used. 
+This doesn't play nicely with webpack as of `2.1.24` due to conditional imports in the `index.js` file.
+It also seems to create issues with building on windows and loading other modules. For this reason, it
+is currently copied over with `CopyPlugin` (see webpack.main.config.ts), and marked as external. 
+
 ## Sources
 
 * Icons are from [Bootstrap](https://icons.getbootstrap.com/). Thanks Bootstrap!
@@ -41,7 +74,8 @@ I want to see if I can create an electron program to help me with these problems
 - [ ] Add a UI to indicate going forward/back when viewing a file
 - [ ] Add footer UI to indicate info: total files in directory, how many selected, total size selected
 - [ ] View hidden files correctly on windows
-- [ ] Cache image icons
+- [x] Cache image icons
+- [x] Create video thumbnails
 - [ ] Set up left hand panel with favorites. Drag to change size.
 - [x] View basic files like txt and images
 - [ ] Move files

drizzle.config.ts

@@ -0,0 +1,7 @@
+import type { Config } from 'drizzle-kit';
+
+export default {
+    schema: './src/db/schema/*',
+    out: './drizzle',
+    driver: 'better-sqlite',
+} satisfies Config;

drizzle/0000_brave_garia.sql

@@ -0,0 +1,9 @@
+CREATE TABLE `image_cache` (
+	`id` integer PRIMARY KEY AUTOINCREMENT NOT NULL,
+	`key` text NOT NULL,
+	`last_modified_time_ms` integer NOT NULL,
+	`cache_path` text NOT NULL
+);
+--> statement-breakpoint
+CREATE UNIQUE INDEX `image_cache_key_unique` ON `image_cache` (`key`);--> statement-breakpoint
+CREATE INDEX `key_index` ON `image_cache` (`key`);

drizzle/meta/0000_snapshot.json

@@ -0,0 +1,66 @@
+{
+  "version": "5",
+  "dialect": "sqlite",
+  "id": "5075dd4b-d9a9-4feb-86f0-7a014e1df027",
+  "prevId": "00000000-0000-0000-0000-000000000000",
+  "tables": {
+    "image_cache": {
+      "name": "image_cache",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "integer",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": true
+        },
+        "key": {
+          "name": "key",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "last_modified_time_ms": {
+          "name": "last_modified_time_ms",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "cache_path": {
+          "name": "cache_path",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "image_cache_key_unique": {
+          "name": "image_cache_key_unique",
+          "columns": [
+            "key"
+          ],
+          "isUnique": true
+        },
+        "key_index": {
+          "name": "key_index",
+          "columns": [
+            "key"
+          ],
+          "isUnique": false
+        }
+      },
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {}
+    }
+  },
+  "enums": {},
+  "_meta": {
+    "schemas": {},
+    "tables": {},
+    "columns": {}
+  }
+}

drizzle/meta/_journal.json

@@ -0,0 +1,13 @@
+{
+  "version": "5",
+  "dialect": "sqlite",
+  "entries": [
+    {
+      "idx": 0,
+      "version": "5",
+      "when": 1705690187768,
+      "tag": "0000_brave_garia",
+      "breakpoints": true
+    }
+  ]
+}

forge.config.ts

@@ -8,10 +8,18 @@ import { WebpackPlugin } from '@electron-forge/plugin-webpack';
 
 import { mainConfig } from './webpack.main.config';
 import { rendererConfig } from './webpack.renderer.config';
+import { join } from "node:path";
+import { platform } from "node:os";
+
+const binExtension = platform() === "win32" ? ".exe" : "";
 
 const config: ForgeConfig = {
   packagerConfig: {
     asar: true,
+    extraResource: [
+      join(__dirname, "node_modules", "ffmpeg-static", "ffmpeg" + binExtension), // downloaded ffmpeg
+      join(__dirname, "drizzle") // db migrations
+    ]
   },
   rebuildConfig: {},
   makers: [new MakerSquirrel({}), new MakerZIP({}, ['darwin']), new MakerRpm({}), new MakerDeb({})],