On 24frames I have a feature that allows users to catalog their collection of movies. Currently it only “supports” one format. When I say support it’s because there’s not really a format option available. Instead, movies in users collections are shown with a DVD cover overlay, to add some extra flair.
I wanted to expand on that and add support for more formats, such as BluRay, DigitalCopy and others. I had been debating with myself on how to do this. I had considered a modal window that popped up when a user clicked the “I own this”-button. A dropdown was also in the running for a while, and lastly a series of format icons was considered. None of them really felt right.
It wasn’t until I chatted with Caius and he directed me to the Apple Trailers site, that a solution presented itself. Apple Trailers has a dropdown button, that has two purposes; 1) There’s a button that activates a default setting, and 2) there’s a dropdown for choosing resolution and whether to play the trailer in the browser or download the trailer to your computer.
So, I did what any self-respecting artist in that situation would do. I nicked the idea, and wrote my own implementation in HTML, CSS and jQuery. First up, here’s a screenshot of what it looks like.
Anyway, here’s the code on how I did it. First up, HTML.
And then a bit of CSS to make things pretty. Take note, here, though – many of the properties listed here are CSS3 (and some are even Webkit specific), and you shouldn’t expect them to work in all browsers.
.dropdown-button {
display: block;
height: 23px;
line-height: 22px;
margin: 6px 0 10px -1px;
text-decoration: none;
width: 186px;
}
.dropdown-button a.default-media {
background: url('leftcap_off.png') top left no-repeat;
width: 150px;
height: 23px;
float: left;
padding: 1px 0 0;
text-align: center;
text-transform: uppercase;
}
.dropdown-button a.default-media:hover {
background: url('leftcap_on.png') top left no-repeat;
color: #fff;
}
.dropdown-button .select-media {
background: url('rightcap_off.png') top left no-repeat;
width: 25px;
height: 23px;
display: block;
float: left;
cursor: pointer;
}
.media-list {
display: block;
position: absolute;
z-index: 3;
}
.media-list ul {
background: #eee;
width: 125px;
border: 1px solid #ccc;
-webkit-border-bottom-right-radius: 3px;
-webkit-border-bottom-left-radius: 3px;
-webkit-border-top-right-radius: 3px;
-webkit-box-shadow: rgba(0, 0, 0, 0.5) 1px 1px 1px;
list-style: none;
padding: 5px;
position: absolute;
z-index: 3;
}
.media-list ul li {
margin: 0;
padding: 3px;
line-height: 16px;
}
.media-list ul li a {
color: #222;
}
.media-list ul li a:hover {
font-weight: bold;
}
And finally, to create the pretty transitions and what-not we have a bit of jQuery goodness.
$(".select-media").click(function() {
var mlist = $('.media-list');
if(mlist.css("display") == "none") {
$('.media-list').fadeOut(); // hide any other open drop downs
mlist.fadeIn();
} else {
mlist.fadeOut();
}
});
$('.select-media').click(function(e) {
e.stopPropagation();
});
$(document).click(function() {
$('.media-list').hide();
});
$('a.media').click( function() {
alert('You clicked a media link');
return false;
});
And that’s that. And of course there’s a demo you can try out, right here!
Currently, 24frames has ~40 users. Not a lot, but a big percentage of these actually use the service the site provides quite often. And I have received numerous feature requests in the two months or so the site has been open to the public.
In this post I plan to go over some of the features that have been requested, and will talk shortly about each of them, and whether or not they will be implemented. If not, I will explain why.
But, first I’d like to take the opportunity to talk a little about why I built 24frames.
When I first got the idea for 24frames it was because I needed somewhere to track the movies I’d seen. I watch alot of movies, and often use movies like other people use music when they work. At the time my site also featured a lifestream (something I’ll be looking at implementing again) and much like that included my music (via Last.fm), I also wanted it to include the movies I’d seen.
I poked around the web, and was unable to find something that suited my needs (to be honest, I was unable to find a single site that would allow to both track my movies and let me pull that data out). So I started working on 24frames. Easy, eh?
Anyway, let’s dive into this shiznits! I’ll begin by listing stuff that I believe should be in the “major features” category, and will move slowly down to minor stuff. Also, I am not saying that all this stuff will be available when the new design goes live, just that it’s on my to-do list, and I wanted you guys to know that I take every request seriously.
Following and Followers
Some users have asked for easier ways to discover new users to follow. Currently the site allows you to follow a user only by going directly to a specific users personal timeline (ie. http://24fram.es/timeline/tmertz/). It works, but it’s cumbersome and stupid.
So that’ll be changed. First of all it’ll be easier to see the global timeline, and through that discover other users. Secondly, on your profile page you’ll be able to see the users who follow you, and give some love back.
Recommendation/statistical based following will have to wait until we have more users and more data. Without the data it’s nigh on impossible to trend what sort of people you share tastes with.
Recommendations
While we do not yet have enough data to do statistical recommendations, it will however be possible to recommend movies to fellow users. Keep in mind, you will only be able recommend movies to those you follow. And, as will be explained below, it’s not guaranteed that they will receive your recommendation.
Notifications
Currently there’s not much to be notified of, except when a new user follows you. But I’ll be remedying that, and you should be able to receive notifications for the following:
- When you get a new follower
- When someone recommends you a movie
Naturally, notifications can be switched off in your profile settings. Notifications will be sent to your email address. 24frames will not feature yet another personal messaging system for you to keep track of.
Collection Management
Shortly after the first release, people asked if I could implement a collection management side to 24frames. In essence the users wanted to be able to manage the bajillions of DVDs and BluRays they own via 24frames. And currently it is possible to add movies to your collection. Sadly, that’s about all it does right now. The plan however is to allow you to add and remove movies, as well as enable you to use 24frames to manage who has borrowed a DVD or such. Furthermore adding a movie currently will display it in a DVD case, where the plan as it stands is to support three formats, ie.: DVD, BluRay and DigitalCopies.
Movie Discovery by Actor
Searching for movies via actors, say in case you can’t remember what the movie was called, but you can remember it starred Scarlett Johansson (that’s happened to all of us, I am sure). Anyway, I can see the logic in searching by actors, and I will definitely look into the possibility of this.
Custom Twitter Notification
Twitter support was one of the most asked for features, and it’s now implemented and it works splendidly. Recently I was asked on Twitter whether it was possible to personalize the message, and while it certainly is possible, I won’t be implementing it for a variety of reasons, the biggest of which are: 1) Twitter is limited to 140 characters, and movie titles have varying lengths. 2) I really do want the link in the Twitter post as well as the 24frames hashtag to exist, if for no other reason than to generate awareness and perhaps lure in new willing victims … eh … users. Incidentally I’ve considered an even shorter pre-text to the movie title in the automatically generated tweet, that will probably be used when the new design goes live.
User-updated Movie Data
While the datasource used for 24frames does have quite an extensive database every now and again something is missing from a movie, such as summaries, production year and what have you. I plan to add support for updating this information, sorta kinda wiki-style. All changes will be logged and abuse will result in bans, but I want to start out with having a community based on trust and the common goal of useful data.
Anyway, this is what is on the drawing board. If there are comments and suggestions, please feel to use the form below. In fact, I encourage you to do so…
Lately work on 24frames has slowed to a crawl. I am sorry for that, but you should know that I have not been sitting on my fat lazy ass. No sir.
Instead I have been working on redesigning the site, because I felt that the old design wasn’t really quite there, and also it was hard to accomodate certain planned features into the current design.
So instead I started working on v2. Doing so has also granted me the opportunity to do some much needed code refactoring.
I’ll go into more depth later on with what changes will be coming, and I’ll also write a little about some feature requests I’ve received, as well, why some will or won’t be implemented.
Being trendy like so many others, 24frames has now launched into its “open beta” stage.
There’s really nothing much to say at this point.
Being in open beta hopefully means more people will use the service, which in turn will lead to more feedback, which again will lead to better stuff for everyone.
So tell your friends to go sign up. And you should too …
The dashboard has received a much needed update. Hopefully it’ll now be even more friendly and useful. Also, a few new features have been added.
As you’ve probably noticed the dashboard has received a much needed overhaul. Whether you like it or not is probably a matter of taste, but none the less I much prefer the new to the old.
Among the new things are the poster view on the timeline. Whether or not this will be kept as a standard is up the users, so let me know whether you prefer this to the old style or not.
Another new thing is this inline blog, rather than the tumblr-hosted stuff. And while I liked the hosted solution by tumblr I kinda felt I was never going to take full advantage of the possibilities that engine provided. So I rolled this little thing. Still lacks comments, categories and feeds, and a host of other shenanigans, but that’ll get added as we move along.
Finally I’ve introduced the “24frames Score” and an achievement system. You can view your score from the current dashboard, and you get points toward said score whenever you log a watched movie, rate a movie or comment on a movie. With regards to achivements – well, they’ll get unlocked along the way as you dig into certain parts of the site, and start using it. I’ll post more on the achievements later, and add a page listing them all. And don’t worry, the achievements and points are retroactive, so everything you’ve done so far still counts.
Anyway, as always leave your feedback via the link in the footer.