Remote Photo Management System

This project is a work in progress. It's not quite ready for any practical use yet. See here for an up-to-date public demo.

It has three main goals:

• To provide a powerful photo management system (like, for example, Picasa)
• To allow for connection to a self-hosted file server
• To be open source

Example use case: I want to be able to remotely synchronise the photos on my phone and my computer, and organise them on either one. But, I don't want the cost/privacy issues of uploading to a third-party site.

See also Photo-Manager-Server for the Django-based server-side code. This client does not yet function without a server to connect to.

Installation

1. Install NPM
2. Clone this repository (git clone https://github.com/zsmith3/Photo-Manager-Client/) and enter the directory (cd Photo-Manager-Client)
3. Install NPM dependencies (npm install)
4. Get a Google Maps Javascript API Key (see here) and add it to the ./build_config.js file.
5. For Cordova:
   • Install Cordova globally (npm install -g cordova)
   • Enter the cordova directory (cd cordova) and run mkdir www then cordova prepare to install required platforms/plugins
   • To generate icons/splash screen:
     • Install ImageMagick (including legacy tools)
     • Install cordova-splash and cordova-icon (npm install -g cordova-icon cordova-splash)
     • Run (from cordova directory) cordova-icon and cordova-splash
   • Install external requirements to build to certain platforms (e.g. see here for Android)

Note: to avoid errors with google-maps-react, change type Style = Object<string, string | number | boolean> to type Style = { [key: string]: string | number | boolean } in index.d.ts.

Building

npm run build can be used to build the client, with various options:

• platform (required) - The platform to build for ("browser" or "cordova")
• buildType (required) - The build environment ("production" or "development")
• server - The back-end server URL to connect to (should end in "/")
• outDir - The local directory to output build to
• publicUrl - The (relative) public URL at which files will be hosted
• preScript - The local path to an HTML file, containing any additional content which should be injected into the output index.html (before other scripts)

The default values for non-required options can be found (and edited) in ./build_config.js. This is a user-specific file, the defaults for which are found in ./scripts/default_build_config.js. Since named arguments are not yet supported, all options must be given in order, and null can be used as a placeholder to skip unwanted arguments.

Example Usage:

npm run build browser development

npm run build browser production https:localhost/fileserver/ null null extra-script.html

In order to build/run Cordova, you will then need to cd cordova and run the relevant Cordova build command.

Features/To-Do

Here is a list of existing features, as well as features which I intend to add in the future. This list may not be comprehensive.

• Sorting capabilities
  • Albums
    • Albums can have (infinitely recursive) child albums
      • Files added to child albums are automatically included in parent albums
    • Files can be added to (multiple) albums
  • People
    • New files are scanned for contained faces
    • Faces can be manually identified as belonging to certain people
    • Predictions for people to which faces belong
      • Run this automatically
      • Users can confirm predictions
    • Allow undetected faces to be added manually
  • Geotags
    • Geotags are read from EXIF data
    • Files can be given a geotag, which includes co-ordinates, and an "area"
    • Geotag areas include a name, address, co-ordinates and area radius
  • Scanned photos can be added, cropped automatically and saved to main folder
  • Feature tags
• Page components
  • Navigation drawer
    • Links to scanned photos
    • Lists albums
      • Shows a hierarchical list, with collapsible lists of child albums
      • Albums can be renamed, moved to different parents and removed
      • New albums can be added as child or root albums
    • Lists people
      • Shows a list of person groups, each with a collapsible list of people
      • Groups can be created, renamed and removed
      • People can be created within a group, renamed, moved to a different group and removed
      • People can be opened
    • List geotag areas
    • Persistent on large screens, temporary on small screens
  • Address bar
    • Shows current folder/person/album path
    • Has back, forward, "up" and "home" (root folders) buttons
    • Contains a search bar
  • Main files container
    • Items can be selected and modified (see Sorting capabilities)
      • Allow renaming of files
      • Allow creation of albums from within 'Add to album' dialog
    • Show details for selected items
    • Different views
      • Map view
      • Option to show files containing person or faces within folder
  • Open file
    • Image files can be displayed full screen
      • Images can be panned and zoomed
      • Users can move forwards and backwards through a list of images
      • Display outlines of faces in images
      • Show options menu for open images
    • Allow other file types to be opened
  • Accessibility
    • Make context menu available anywhere in page
    • Make keystrokes for most features
  • Users can upload files to certain folders
  • Users can download files/folders/albums
    • Provide a progress bar for large downloads
• Navigation
  • 3 main hiearachies
    • Folders
      • Displays folders and files in separate lists
      • Option to show all files in subfolders, rather than just immediate children
    • People
      • Displays faces for different people
      • Optionally show files belonging to a person
    • Albums
      • Displays all files in an album and its children
      • List child albums
  • Separate view for scanned photos
    • Editor with cropping function
      • Allow crop lines to be deleted
  • Filtering
    • Searching
      • Files
        • Found using file name, and names of related people, geotags, albums and folders
      • Folders
        • Found using folder name
        • Find using name of any parent folder
      • Allow searching of faces (via their file)
      • Can search search only immediate children, or optionally all subfolder contents
    • (possibly) More explicit filtering system
  • Access to all objects limited by user groups
    • Guest access available through url-based authorisation
    • Allow users to create access groups and/or urls
    • Distinguish between read and write access
    • Note: access groups currently behave 'as the user expects' - nothing is automatically changed unless requested. This can allow for odd behaviour, but it is at least fully user-controlled behaviour. It might make sense to remove access groups for folders/albums/people/etc. and instead just look at which files a user has access to, and whether any are included in that album/folder/person/etc.
• Cross-platform
  • Web
  • Mobile application
    • Use Cordova to package for mobile
    • Use React-Native to build native application
  • Desktop application
    • Use Electron to package for desktop
    • (possibly) Use Proton-Native to build native application
  • Local (mobile and desktop) features
    • Synchronise files to display images faster
    • Synchronise full database to allow offline usage
    • Allow fully local usage with local-only files

Known bugs

• Some issues with ordering - e.g. user-uploaded files are not ordered correctly until after refreshing the page
• TSC errors
• Currently album paths are computed locally rather than exposed in the API. This means that if a user has access to a child album but not its parent, then the full path is not displayed. Not sure if this is a bug or a feature.

Contributing

Any contribution would be welcomed and greatly appreciated, even if just in the form of suggestions/bug reports.