Node.js Video Gallery

A few months ago, I wrote a Metro-style video gallery with Ajax, infinite scrolling and other fun stuff. I’ve now rewritten it in Node.js, which was surprisingly cathartic after coding the PHP original.

There’s a load of bumf about the original PHP version here (mostly relevant) and some supplementary info about this version here, though probably the best thing to do is to try the demo site. Yay!

Source on GitHub

Nota bene

The front end code is (almost) identical to that in the PHP version. It could do with updating a bit, e.g. to use the HTML5 history API rather than #! and moving the jQuery events over to on. But other than that I think it works fine.

I redid an existing project so I could focus on how Node, and not the app itself, works. It was definitely a learning process for me, and I’m sure I could have done things better (and would probably do some bits better if I were starting again now). So if you have any feedback on how I could improve things, I’d love to hear.

With those health warnings out of the way…

Settings

You’ll need to set up a MySQL database first (see sample content). Then there are some configuration things to do

/config/app.json (Please rename app-sample.json.)

  • localPort – Local port to use
  • sessionSecret – Session secret for Express
  • siteUrl – Public URL for your site
  • modedevelopment or production. development gives more error messages, while production uses minimized, combined public JS files that load a lot faster.
  • batchSize – Number of videos to load at once in infinite scroll.
  • videoCount – Approximate number of videos in the database. Just used for bragging rights in a few places.
  • cookiePath – Cookie path to use. Unless you want to restrict it to a subfolder, I’d suggest using /.
  • siteTitle – Name of the site. Used in browser title bar and elsewhere.
  • siteTitlePost – Text to stick in the title bar after the video name (where appropriate).
  • siteDescription – Meta description content.
  • maxRelatedVideos – If we haven’t come via a search (via a link or refresh), show this many related videos at the side of a video.
  • maxSimilarVideos – Show this many similar videos at the bottom of a video. See video.js for more. This number should obviously work for the largest video size offered.
  • prettyLink – Prepend this to each video’s URL for SEO, so if this were amazing-stunts, the URLs would be something like http://example.com/#!amazing-stunts/name-of-this-video.
  • jQueryCdnUrl – In production mode, load jQuery from here.
  • gaAccount – Your Google Analytics UA number.
  • gaDomain – Your Analytis domain.

Example

{
	"localPort": 3000,
	"sessionSecret": "session secret",
	"siteUrl": "http://bits.meloncholy.com/node-video-gallery/",
	"mode": "development",
	"batchSize": 20,
	"videoCount": 300,
	"cookiePath": "/",
	"siteTitle": "Video Gallery",
	"siteTitlePost": " | Video Gallery",
	"siteDescription": "This Video Gallery is a web app with lots of jQuery and Node goodness. Yum.",
	"maxRelatedVideos": 19,
	"maxSimilarVideos": 7,
	"prettyLink": "video",
	"jQueryCdnUrl": "http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js",
	"gaAccount": "UA-XXXXXXXX-X",
	"gaDomain": "meloncholy.com"
}

/config/database.json

  • host – Database host
  • database – Database name
  • user – Database user
  • password – Database password

Example

{
	"host": "localhost",
	"database": "database",
	"user": "user",
	"password": "password"
}

Dependencies

To get it to work, you’ll also need

Sample content

If you want to get going quickly, you can use the sample videos, photos and database from the PHP Video Gallery on GitHub (placeholder and database folders resp.).

And try something like this for vidStreamer.json (in /node_modules/vid-streamer/config) to get it to serve up the sample content.

{
	"mode": "development",
	"forceDownload": false,
	"random": true,
	"rootFolder": "/path/to/express/public/",
	"rootPath": "node-video-gallery/",
	"server": "VidStreamer.js/0.1"
}

Thanks

The download includes Longtail Video’s JW Player, released under Attribution-NonCommercial-ShareAlike 3.0 Unported (CC BY-NC-SA 3.0) licence. Commercial licences are also available. You’re of course welcome to swap the player for another one if you don’t like it, though you’ll need to change some of the source files that set up parameters to pass to the player.

The sample video footage comprises some short video clips and still images of these video clips by Catrin Hedström and released under a Attribution-NonCommercial-ShareAlike 3.0 Unported (CC BY-NC-SA 3.0) licence. It’s gorgeous footage too – do check it out!

Source on GitHub

Legal fun

Copyright © 2012 Andrew Weeks http://meloncholy.com

Video Gallery is licensed under the MIT licence.

Includes some code written by others; see source for credits and licence details (though it’s all permissive).

9 thoughts on Node.js Video Gallery

  1. Pingback: Node Roundup: Video Gallery, Restie, xml-literals, Revised Console

  2. when doing : sudo node app.js
    i get:
    node.js:201
    throw e; // process.nextTick error, or ‘error’ event on first tick
    ^
    Error: Could not find configuration file for database domain
    at Module._compile (module.js:441:26)
    at Object..js (module.js:459:10)
    at Module.load (module.js:348:32)
    at Function._load (module.js:308:12)
    at Array.0 (module.js:479:10)

    • Looks like you’ve missed a config step. You need to rename database-sample.js to database.js (and add your database details too of course). It’s in the config folder.

      Also thanks for the nudge on this — have another post I really must finish writing on how the search works. :)

  3. renamed the json file in config(you specified .js i tried that too, i created the db on the mysql db), but still getting errors :
    Maybe something wrong with the package version?
    /models/spell.js:187
    for (var i = 0, len = queryResults.length; i < len; i++) {
    ^
    TypeError: Cannot read property 'length' of undefined
    at loadDicDone

  4. when i execute :sudo npm install i am getting the following errors:
    npm ERR! Error: Invalid ‘version’ field: 0.1
    npm ERR! ‘version’ Must be X.Y.Z, with an optional trailing tag.
    npm ERR! See the section on ‘version’ in `npm help json`

    I tried manually installing the modules, but with no luck

  5. OK, the npm problem is basically what it says: npm requires all packages to have a x.y.z version number. I assume you’re trying to update the video gallery via npm, which won’t work as it’s not on there (it’s not really a package, so I didn’t think it was appropriate). I haven’t updated the code recently, so I assume you’ve got the latest version from Github.

    For the other error: looking through the source, it seems that the place where you have the error is the first time it touches the database.

    Are you using the sample database I supplied? This should give you a working site, though obviously not one with the things you want in it. :) I’m afraid the code doesn’t create the tables for you at the moment, so you’ll need to populate them yourself.

    For the error, I’m guessing the code can’t find the table it requires at that point (dic). I haven’t used node-mysql for a little while, but it probably returns null or undefined if there’s nothing in the database for that query.

    (Also, jumping ahead a little, you’ll need to set up a route to use exports.train in spell.js, which stores your dictionary in the database. Again, I should probably talk about this in more depth somewhere. :)

  6. thank you, i will try to fix it then.Thank you for your support!
    P.S it looks great!
    i will let you know once i get it working.
    The version number has to be 0.1.0(otherwise i get an error when installing the modules).

  7. Thank you! I imported the sql(in mysql db table), and …it works!! great :)
    I am learning Node(i am still a Noob).
    “We’re up on port 3000 in development mode.”
    :) Works great!! Nice work!!
    Really an excellent video gallery! My most sincere compliments, for your support, this makes you definitely stand out with other Developers!

Let me know what you think

Your email address will not be published. Required fields are marked *