Giter VIP home page Giter VIP logo

scout's Introduction

Introduction

Scout is a cross platform File Browser. At the moment, functionality is pretty limited. Try back later.

Sample video showing file browsing

Features

  • List File names
  • 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?

Two problems

  • Handle Why 1?

I have a lot of photos on a windows machine in HEIC format. Some folders have thousands of images. My goal is to organize them into folders like cats, weather, etc. But it takes a while for windows explorer 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?

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, 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 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. Thanks Bootstrap!

Next up

  • Add modified timestamp, file type and size to table list
  • Allow sorting table list
  • Allow searching table list by prefix
  • When using arrow keys and viewing a file, go back/foward
  • 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
  • Create video thumbnails
  • Set up left hand panel with favorites. Drag to change size.
  • View basic files like txt and images
  • Move files
  • Copy files
  • Folder sizes
  • Select file and multiple files
  • Upgrade to tslint strict
  • remove unused packages
  • On windows, when you go to root "/", display the list of drives to go to
  • Update top menu to indicate current state of file listing mode. Is it table or icons?
  • Update top menu to have dropdowns with options like view hidden files
  • Support image caching for thumbnails of various sizes
  • Choose a file thumbnail size
  • Better Readme with screenshots and gifs

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.