I recently decided to reorganize my photo collection (again). And after reviewing many options I decided I didn’t like any of them (again). There are many good enough options for viewing photos. But I haven’t found any that make it easy to sort, manage, organize, and tag over 40,000 files (photos & video)
This time, instead of making do with what I could find, I decided to write my own media manager. I’d mostly finished my last project and had lots of free time over Christmas and it seemed perfect for getting back into C# and Javascript after a couple of years of Java. I also want to work on my blogging/writing so I’ll try to write an article a day on things I find most interesting.
The C# & javascript code for the application is on github (MediaTagger).
It uses a git submodule (drjs) that includes javascript code I’ve been using and extending for 15+ years. I made quite a few improvements for MediaTagger.
For each blog, I’ll create simple example pages & Javascript in another github repository (javascript-examples)
These will not be javascript tutorials. Just explanations of how I’m using javascript and why.
I know everything I’m doing has been done 100s (1000s) of times and there are packages, frameworks, and libraries to make it easier. But I love re-inventing things in my personal projects, and I think understanding some possible implementation details makes me better at using and extending common libraries on client projects.
MediaTagger (The application)
I have 2 functional requirements
- Organize a library of 40,000 (and growing) media files
- Find the files I want
Organization includes
- Dates (taken, modified, ?)
- Hierarchical taxonomy
- Albums
- Groups (different formats of the same shot, exposure brackets, etc)
I have a simple C# web server that
- Scans directories
- Uses imagemagick.net to create thumbnails and extract media information (i.e. EXIF)
- Uses Enterprise Framework to store file data
- Provides an API for the UI to access files and data.
I had a windows UI initially, but quickly decided I’d rather use a browser front-end even if I only planned to use it on the local machine. So I switched to an HTML/javascript/css UI. The application is a single dotnet page. The key parts are
<body>
<section id=’main-content’>
</section>
<script type=”module”>
const {MediaTaggerApp} = await import(‘../js/mt-app.js’);
var app = new MediaTaggerApp();
app.start();
</script>
</body>
The javascript module mt-app.js uses many other modules, HTML templates, and the C# HTTP API to provide the UI. I am able to smoothly view, sort, and tag all of my files (once the browser has cached thumbnails.
Javascript Modules
I have many javascript modules I’ve used for years (basic “scripts” before javascript supported modules). MediaTagger has many application-specific modules. They are in MediaTagger/wwwroot/js on github. The subfolders are
component – each HTML template has a javascript component module
controls – I had planned to do more but only has a barely used tree control
data – data entity modules (MediaFile, Tag, etc)
modules – general purpose modules