[nodebb-plugin-imdb] IMDB Information

Scuzz

I am actually working on a NodeBB plugin. I know, I’m as shocked as you guys. Scuzz actually doing something productive.

The movie thread got me thinking about a plugin that would pull down some film information from IMDb, title, poster and a short plot when someone posts a link to an IMDb page.

I started working on this the other night and should have carried on last night but some Vodka took control and I kinda didn’t do anything.

Today have managed to get some regex working with the help of @Almost and @Schamper.
Currently I have some test code to select the ID of the film from an IMDb link and add it to a OMDb URL.

OMDB

The OMDb API is a free web service to obtain movie information, all content and images on the site are contributed and maintained by our users.

var omdurl;
var html = 'dassdffdgf<a href="http://www.imdb.com/title/tt0816692/asdfsdfg">Interstellar</a>sfgfgsfgxxregadfsdfggrereaer';
omdburl = 'http://www.omdbapi.com/?i=' + html.split(/<a href="(?:https?:\/\/)?(?:www\.)?(?:imdb\.com)\/(?:title)\/(.+)\/.+">.+<\/a>/g)[1] + '&plot=short&r=json';
console.log(omdburl);

The link that is created returns a JSON object with a tone of information that can be used.

Tonight I will try and add this code to the code I already have working with a NodeBB instance. Then I will be looking into adding the content into an actual post.

Almost

@Scuzz

var omdurl;
var regex = /<a href="(?:https?:\/\/)?(?:www\.)?(?:imdb\.com)\/(?:title)\/(.+)\/.+">(.+)<\/a>/g;
var html = 'dassdffdgf<a href="http://www.imdb.com/title/tt0816692/asdfsdfg">Interstellar</a>sfgfgsfgxxregadfsdfggrereaer';

function omdburl(match, id, text) {
    omdburl = '<a href="http://www.omdbapi.com/?i=' + id + '">' + text + '</a>';
    console.log(omdburl);
    return omdburl;
}

html = html.replace(regex, omdburl);
console.log(html);

Note that I changed the regex slightly to also capture the text of the link.

the output should be:

<a href="http://www.omdbapi.com/?i=tt0816692">Interstellar</a>
dassdffdgf<a href="http://www.omdbapi.com/i=tt0816692">Interstellar</a>sfgfgsfgxxregadfsdfggrereaer

Schamper

To simplify @Almost’s answer, you can also use this:
html.replace(regex, '<a href="http://www.omdbapi.com/?i=$1">$2</a>')

The $1 and $2 will be whatever is in the capture group from the regex.

Scuzz

Spending way to much fucking time on this…
This currently outputs the film title to the console.

(function(module) {
	'use strict'

	var request = module.parent.require("request");

	var OMDB = {};
	var embed;
	var omdburl;
	var film;
	var regex = /.+<a href="(?:https?:\/\/)?(?:www\.)?(?:imdb\.com)\/(?:title)\/(.+)\/">.+<\/a>.+/g;
	var regex2 = /.+<a href="(?:https?:\/\/)?(?:www\.)?(?:imdb\.com)\/(?:title)\/(.+)\/.+">.+<\/a>.+/g;

	OMDB.parse = function(data, callback) {
		if (!data || !data.postData || !data.postData.content) {
			return callback(null, data);
		}

		if (data.postData.content.match(regex)) {
			omdburl = data.postData.content.replace(regex, 'http://www.omdbapi.com/?i=$1&plot=short&r=json');

			request(omdburl, function (error, status, response) {
				if (!error && status.statusCode == 200){
					film = JSON.parse(response);
					console.log(film.Title);
				}
			})
		}

		if (data.postData.content.match(regex2)) {
		}
		callback(null, data);
	};

	module.exports = OMDB;
}(module));

I have spent hours trying to get the URLs to change to the correct title but I can only get them all to change to the first one. I’m sure it may be something simple but I think my brain is dead.

If i do

			request(omdburl, function (error, status, response) {
				if (!error && status.statusCode == 200){
					film = JSON.parse(response);
					embed = "<h1>" + film.Title + "</h1>";
					data.postData.content = data.postData.content.replace(regex, embed);
				}
			})

The content does not change but when I put it outside the request call the post do actually change, but they all change to the same name.

Almost

omdburl = data.postData.content.replace(regex, 'http://www.omdbapi.com/?i=$1&plot=short&r=json');

I assume you were expecting omdburl to be one link to omdb, right?

That’s not quite how string.replace works. It returns a copy of the original string with whatever is matched by regex replaced with the omdb url.

So for example, the original data

<a href="http://www.imdb.com/title/tt0816692/">www.imdb.com/title/tt0816692/</a></p>
<a href="http://www.imdb.com/title/tt0369610/?ref_=nv_sr_1">www.imdb.com/title/tt0369610/?ref_=nv_sr_1</a>

will make omdburl equal to

http://www.omdbapi.com/?i=tt0816692&plot=short&r=json
<a href="http://www.imdb.com/title/tt0369610/?ref_=nv_sr_1">www.imdb.com/title/tt0369610/?ref_=nv_sr_1</a><

which will certainly not work if you try to do a request on it.

What you’re trying to do here is:
Foreach match
call request
log result (or use it to insert markup)

You can do that with my example above. Alternatively, you might want to look into regex.exec

Scuzz

Currently I can make it out put the correct film titles with a console.log(film.Title);.

If I did a console.log(omdburl); it shows 4 different URLs corresponding to the films that have been posted.

Scuzz

Updated code with some of @Almost s help.

(function(module) {
	'use strict'

	var request = module.parent.require("request");

	var OMDB = {};
	var embed;
	var film;
	var omdburl;
	var urls;
	var regex = new RegExp('<a href="(?:https?:\/\/)?(?:www\.)?(?:imdb\.com)\/(?:title)\/(.+)\/">.+<\/a>', 'g');
	var regex2 = /<a href="(?:https?:\/\/)?(?:www\.)?(?:imdb\.com)\/(?:title)\/(.+)\/.+">.+<\/a>/g;

	OMDB.parse = function(data, callback) {
		if (!data || !data.postData || !data.postData.content) {
			return callback(null, data);
		}
		if (data.postData.content.match(regex)) {
			while ((urls = regex.exec(data.postData.content)) != null) {
				data.postData.content = data.postData.content.replace(urls[0], urls[1]);
			}
		}
		if (data.postData.content.match(regex2)) {
		}
		callback(null, data);
	};

	module.exports = OMDB;
}(module));

One issue i am facing at now is that it only replaces the first link in a post, the second link stays the same.

Edit - Fixed it with @Almost

(function(module) {
	'use strict'

	var request = module.parent.require("request");

	var OMDB = {};
	var embed;
	var film;
	var omdburl;
	var urls;
	var regex = new RegExp('<a href="(?:https?:\/\/)?(?:www\.)?(?:imdb\.com)\/(?:title)\/(.+)\/">.+<\/a>', 'g');
	var regex2 = /<a href="(?:https?:\/\/)?(?:www\.)?(?:imdb\.com)\/(?:title)\/(.+)\/.+">.+<\/a>/g;

	OMDB.parse = function(data, callback) {
		if (!data || !data.postData || !data.postData.content) {
			return callback(null, data);
		}
		var postCopy = data.postData.content;
		while ((urls = regex.exec(data.postData.content)) != null) {
			postCopy = postCopy.replace(urls[0], urls[1]);
		}
		data.postData.content = postCopy;
		callback(null, data);
	};

	module.exports = OMDB;
}(module));

Scuzz

I have been working on the client side javascript for this plugin tonight. After an hour of trying to get it working and then suddenly realising I have been pretty stupid for that hour. I forgot to include the javascript in the plugin.json…

Once I managed to get some feedback from the console I went ahead and tried to get to where @Almost recommended me to get to. I can now output the Title of the films onto the client console when hovering over an IMDB link. Kinda cool :)

(function(window) {

	var imdburls
	var regex = new RegExp('(?:https?:\/\/)?(?:www\.)?(?:imdb\.com)\/(?:title)\/(.+)\/', 'g');
	var urls;
	var omdburl;

	function createOMDB(id){
		var omdburl = 'http://www.omdbapi.com/?i=' + id + '&plot=short&r=json';
		return omdburl;
	}

	function getFilmInfo(url){
		var filmData;
		$.get(url, function(data){
			filmData = JSON.parse(data);
			console.log(filmData.Title);
		});
	}

	$(document).ready(function() {

		urls = document.links;
		for (var i = 0; i < urls.length; i++) {
			while ((imdburls = regex.exec(urls[i].href)) != null) {
				omdburl = createOMDB(imdburls[1]);
				getFilmInfo(omdburl);
			}
		}
	});
})(window);

Updated for auto console output for each imdb link, no need to mouseover now.

Schamper

@Scuzz now to create a template and parse that data!

Scuzz

@Schamper A template will be simple i think, not sure how I would add it to a post though?

Almost

@Scuzz look at cards and polls. It’ll probably also be useful for you to read a bit about jQuery as well.

Scuzz

I have literally been doing that . Had a tab open with cards plugin and a tab open with jquery methods.

Many many tabs… :P

Scuzz

While testing out this API I have realised that IMDB does not allow hotlinking so the poster part of this plugin will have to wait until I can come up with a solution to include poster images.

In its current state the plugin will display a popover, similar to @Schamper user cards plugin, with the films title, rating, genre and small plot.

Like this:

Here is the code.

(function(window) {

	var urls;
	var href;
	var omdburl;
	var target;
	var regex = new RegExp('(?:https?:\/\/)?(?:www\.)?(?:imdb\.com)\/(?:title)\/(.+)\/', 'g');

	function createOMDB(id){
		var url = 'http://www.omdbapi.com/?i=' + id + '&plot=short&r=json';
		return url;
	}

	function getFilmInfo(url, callback){
		$.get(url, function(data){
			//showPopover(JSON.parse(data), target);
			callback(JSON.parse(data), target);
		});
	}

	function showPopover(filmData, target){
		target.popover({
			trigger: 'manual',
			placement: 'right',
			html: true,
			title: '<b>' + filmData.Title + '</b>',
			content: '<h5>Rating: '+ filmData.imdbRating +'</h5><h5>Genre: ' + filmData.Genre + '</h5><p>' + filmData.Plot + '</p>'
		}).popover('show');
	}

	$(document).ready(function() {
		$(document).on('mouseenter', 'a', function(e){
			target = $(e.currentTarget);
			href = $(this).attr('href');
			while((urls = regex.exec(href)) !== null) {
				omdburl = createOMDB(urls[1]);
				getFilmInfo(omdburl, function(filmData, target){
					showPopover(filmData, target);
				});
			}
		}).on('mouseleave', 'a', function(){
			target.popover('destroy');
		});
	});
})(window);

I think I may have the hang of callbacks but I’m not to sure at the moment, I did manage to implement one in the code though. I suppose that’s a start.

I have also notice a bug that when you mover your mouse over the link fast the popover will open but not close. You have to hover you mouse over the link again for it to be removed.

Also, bold title :P

Almost

Look at you getting things to work! Nice job.

[nodebb-plugin-imdb] IMDB Information

Online Users