You know, I wasn’t planning to release a version 2.6. Right after 2.5 was released a few months ago, I started cranking away on version 3, which is a significant release that adds all the top features you voted for in the poll. It was coming along great when something happened.
A fan of GSP came along and was willing to pay good money if I immediately added two features: (1) on-the-fly encoding of AVI videos to the web-friendly MP4 format, and (2) the ability to select multiple files in one step on the add objects page. So I added those features to the 2.5 codebase and gave it to the client as a custom build. These are features many of you would find useful, so I will soon be releasing version 2.6 to bring them – and a few bonus features - to you. Here is the complete list:
- 15X faster SQL CE performance
- New file upload experience
- Client-side image resizing
- iOS support
- Improved browser caching
- Video and audio encoding
The release is at least three weeks away, but hopefully not more than a couple months. I am putting the finishing touches on it now and will get it to you as soon as I can.
15X faster SQL CE performance
Version 2.5 added SQL CE as a data storage option while retiring SQLite. There were many benefits to SQL CE over SQLite, such as medium trust support, 32/64-bit support in a single package, and strong data typing and referential integrity. But, as many of you noticed, it was slower. One test I did showed that it took about eight seconds to load an album with 250 media objects, while SQL Server could do it in about 0.1 seconds. Although subsequent loads of the same album were almost instantaneous due to caching in the application, first impressions are important, and an eight-second page load is clearly unacceptable.
After profiling the application and database, I found that most of the page load time was spent retrieving the metadata for each media object, one SQL statement at a time. For example, a page with 250 media objects would make 251 calls to the database (one request to the media objects table and 250 to the metadata table). SQL Server does the same thing, but since it does it with a stored procedure whose SQL is compiled and cached, it is very fast. The SQL CE implementation uses Entity Framework 4.1 Code First, which does not cache the query plan (although I hear that is coming).
The solution was to modify the query logic to return the media objects and the metadata in a single SQL call. Instead of 251 trips to the database, it is now one. This change reduced the load time from eight seconds to 0.5 seconds, a 15x improvement. While that is much better, it is *still* about five times slower than SQL Server. For most users, though, it is quite acceptable. If you want the fastest performance and don’t mind the additional responsibilities that come with installing and managing SQL Server, than use SQL Server (even SQL Server Express, which is free, is faster than SQL CE). The rest of you can enjoy 15x faster SQL CE performance.
New file upload experience
Providing a great file upload experience has been challenging for web developers since the dawn of time. The first version of GSP used a nice open source component called NeatUpload. When ComponentArt added an upload component to its suite of controls in 2008, I moved to that one. Both, however, have annoying limitations: (1) You can choose only one file at a time (not exactly true with NeatUpload, but it required a Flash dependency), (2) They require the app to run in full trust.
When I was asked to support multi-file selection for a client, I knew I had to replace the ComponentArt control with something else. Like manna from heaven, I found a wonderful open source component called Plupload, which offers a dream list of features: HTML5 support (like drag and drop!), graceful degradation, support for medium trust, multi-file selection, and more. For example, here is what the add objects page looks like after I drag four image files from Window Explorer onto the page:
While uploading the files, the vast majority of users will see a nice progress bar indicating the status of the upload, even when the app is running in medium trust. The only ones who won’t are those running an old browser without Flash, Silverlight, Google Gears, or BrowserPlus. Not even your grandmother should fit into that category.
The real beauty of this upload control is that it takes advantage of advanced browser capabilities while gracefully degrading when necessary. So, enjoy drag and drop if you’re using Chrome or Firefox, but IE6 users can still upload files using a file selection dialog.
Client-side image resizing
I saved my favorite Plupload feature for its own section - client-side image resizing. Rather than waiting for a hundred 5 MB digital camera photos to crawl their way to the server, you can let the browser create smaller, web-friendly versions for you, resulting in images that upload in a fraction of the time. Now you’re done in seconds instead of minutes (or even hours).
I’ve been wanting to add this feature for a while now, and even went so far as to ask a friend of mine earlier this year to build a prototype using Silverlight and fjcore. But now we get this feature for free, and without any dependencies on plug-ins. Sweet!
The one downside - this feature requires Firefox or Chrome. But as more browsers become HTML5 compliant, expect support to grow.
iOS support
The current version of GSP won’t play video or audio on iOS devices (iPhone, iPod, iPad), even when specifying a supported file type like MP4 and using the HTML 5 video and audio tags. This was because iOS requires HTTP range support, and GSP’s HTTP handler didn’t support that. For 2.6, the handler has been re-written from the ground up to support HTTP range requests.
GSP 2.6 will support any media file in iOS that is natively supported. Currently, that means MP4, MP3, M4V, quicktime, and M4A.
Improved browser caching
Rewriting the HTTP handler provided an opportunity to take another look at how media files are cached in the browser. The 2.5 handler sends HTTP header values to the browser that instruct it to cache the images for thirty days. But in my experience some browsers seem to ignore this advice and request the images from the server anyway, except for after an image rotation, in which case the browser stubbornly likes to show the original, unrotated image, even after the user hits the refresh button or F5. I say that slightly tongue in cheek, but the basic idea is that there was an opportunity to improve the caching.
Here is an example set of response headers for an image in 2.4.8:
The same image in 2.6:
In 2.6, we got rid of the Expires setting and instead use Last-Modified and the Etag. By doing this, the browser will automatically be notified of rotated images and other changes to the media file. Even this isn’t perfect, though, as some browsers don’t check with the server when a user very recently loaded an image. But even in this case a click of the refresh button will force the browser to send the Last-Modified header, which will then cause the updated image to load.
Another change is that the file name is sent in the Content-Disposition tag. This is nice when you right-click an image to save to your hard drive. The value here will be used for the default filename, which is an improvement over getmediaobject.ashx, which is the default filename users saw in 2.5 and earlier versions.
Video/audio encoding
Version 2.6 adds support for encoding video and audio files to other formats after uploading. For example, you can upload an AVI file and have it automatically converted to an HTML5-friendly MP4 video. The original AVI file is still available by clicking the view original button, much like original images are always a click away, even though web-friendly ones are shown by default.
The encoding is done by FFmpeg, a popular open source utility that Gallery Server Pro already uses to generate thumbnail images from videos. FFmpeg is included in the Gallery Server Pro Binary Pack. Note that your gallery must be running at full trust in order to execute FFmpeg.
You have complete control over which files are converted, to what they are converted, and how it is done. For example, look at the Encoder Settings section in this screen shot:
The order of the encoder settings is important – the first one that matches is the one that is used. If it fails for any reason, the next matching one will be used. So, the screen shot shows that the preferred conversion for AVI files is to convert them to MP4 using these command line arguments for FFmpeg:
-i "{SourceFilePath}" -y -vcodec libx264 -fpre "{BinPath}libx264-galleryserver.ffpreset" "{DestinationFilePath}
It basically says to apply H.264 encoding using the options in a file named libx264-galleryserver.ffpreset in the bin directory. The text in brackets {} are parameters that are replaced at runtime. You can use any FFmpeg option to give yourself complete control. I have not yet decided on the exact encoding settings and parameters to use as default values – the ones that ship will likely look different than what you see here.
Continuing with our example, if the AVI to MP4 conversion fails for any reason, the next matching rule instructs the encoder to try converting to FLV. In my experience, this conversion often succeeds when the MP4 conversion fails, so this is a good fallback setting. The “all video” and “all audio” rules are buckets that match on all files with a video or audio MIME type.
The screen shot also shows the encoder queue, which is a list of media files that are waiting to be processed, are being processed, or are completed. Encoding can take a while, so this will be useful to see how things are going and to investigate any encoding errors that occur. The text returned by FFmpeg is shown in the Result column, and it contains all the conversion details – and errors – related to the process. You can also delete completed items or cancel pending ones.
