Here's a new developer release, it has many fixes related to live playback which should reduce the Temporary Loss Of Signal (TLOS #3) people get when watching live, remove a number of crash bugs when changing channels or after a TLOS and other streaming improvements.  Please try it out and let us know your feedback, by channel chat in My Joost or email (support@joost.com).

Download preview release 4 for Windows
Download preview release 4 for Mac

 Thanks for any help testing.

Here's a new developer release, it has many fixes related to live playback which should reduce the Temporary Loss Of Signal (TLOS #3) errors people have been getting.  Please try it out and let us know your feedback, by channel chat in My Joost or email (support@joost.com).

Download preview release 3 for Windows
Download preview release 3 for Mac

Update - Unfortunately Preview Release 3 was found to have a nasty bug, check back later for a new release.

Thanks!

On Wednesday the 27th of February at 7pm (GMT+1) we will be road testing an experimental Joost client which contains a new implementation of our peer to peer technology. We would like for interested parties to come along and give us a couple of hours of their time to participate in this test and help us gather some real world feedback. If you're interested in participating, please visit this web page for further details.

Hi, here's a new developer release, no new features but we've fixed
many little bugs in various places, and we may have a fix for the
"empty explore" Bug. It isn't enabled by default, but if you're seeing
this bug add the preference: user_pref("tvp.ui.spoonMasking",false);
to your prefs file and then see if it works. We're pretty sure the
problem was related to masking issues with some graphics cards, but
are yet to really reproduce.

Download preview release 2 for Windows
Download preview release 2 for Mac

Try it out and let us know anything you find.

If you're using Joost Links in a widget you often need to know if they can be played by the user of your widget. It's a fact of life (and of business) that certain videos are only playable in some regions; and from time to time, a channel line-up may change.

To check that a Joost Link is playable, you can use retrieveURL in the Engine class. Here's a very simple example of how you might check a given URL:

var url="http://joost.com/123456a";

Engine.retrieveURL(url, testChannelListener);

var testChannelListener = {

    updateSuccess : function(channel, entry) {
        logMessage("updateSuccess() "+channel.title+" "+entry.title);
    },

    updateFailure : function(errorCode) {
        if(errorCode=="load:404"){
        logMessage("Cannot be played because not a Joost link");
        }else
        if(errorCode=="load:403"){
        logMessage("Cannot be played because of geo restrictions);
        }else{
        logMessage("Cannot be played for some reason "+errorCode);
        }
    }
    
}

Let's walk though it:

First, get your URL and send it to retrieveURL

var url="http://joost.com/123456a";

Engine.retrieveURL(url, testChannelListener);

Engine.retrieveURL takes two arguments, the URL you want to check and a listener callback which is called when retrieveURL has the information about the URL.

I find callbacks rather strange, as from what I can remember of my Java days I never used anything like them - but here we can just think of them as functions to be called when something that takes time has been completed, in this case the lookup about the URL, (the downside about callbacks is that it's a bit complicated to send arguments to them, but never mind that here as we don't need to).

Second, write a listener

The second argument is our class, testChannelListener. What we want to happen here is for this class to listen for two possible function calls which the Joost engine might provide depending on what it finds for the URL.

updateSuccess

If it is a Joost Link and we can play it we get a success. Here we just print to the console (see output to the console by calling it up using control-shift-D)

    updateSuccess : function(channel, entry) {
        logMessage("updateSuccess() "+channel.title+" "+entry.title);
    },

If we get this we can use the channel and the entry and the various methods associated with those.

updateFailure

If there's a problem we usually get a failure:

    updateFailure : function(errorCode) {
        if(errorCode=="load:404"){
        logMessage("Cannot be played because not a Joost link");
        }else
        if(errorCode=="load:403"){
        logMessage("Cannot be played because of geo restrictions);
        }else{
        logMessage("Cannot be played for some reason "+errorCode);
        }
    }

and an errorCode is returned.

This functionality is very useful for bookmarks or the retrieval of other Joost content that you might want to suggest to the user, for example with the URL methods. I use it for making suggestions to the user.

The detail of this part of the Joost Widget API is in the Engine section - see retrieveURL.

Links are important in Joost. Every video and channel in Joost has a "Joost Link" - a URL and associated web page. Joost Links allow people to link directly to Joost videos on the Web - and you can use Joost Links in widgets to play videos in Joost.

The general form of a Joost Link is:

http://joost.com/<publicID>#param1=value1,param2=value2

The publicID must contain exactly 7 characters, from the set a-z 0-9.

There is no way to distinguish Joost Links for channels and videos except by de-referencing them.

There are also some more complex Joost Links. For example:

http://joost.com/0440001#program=044000u

describes the channel Aardman Animations, starting with the video "Creature Comforts - The Sea";

http://joost.com/0440001#program=0440007,start=20000 

Describes the show "Town Called Panic: Cow Hulk" in channel "Aardman Animations", starting 20 seconds in.

Within a Joost Widget you can play one of these links like this:

<a onclick=\'navigate("http://joost.com/0440001#program=044000u")\'>Play video inside channel</a>

To open a web page that is not a Joost Link, just use navigate in the following way:

<a href='#' onclick='navigate(\"http://dev.joost.com\")'>Joost Developer Site</a>

You can see some example code here and the API definition is here.

Next time we'll see how to test these Joost Links to make sure they can be played by the viewer.

To get some real interactivity in your widget you'll probably want to use some Javascript. Joost Widgets use Javascript in just the same way as web pages do, except that you only have to code for one browser (the Joost player, based on Mozilla) rather than several.

Let's suppose you've done the first tutorial and made a 'hello world' widget. You can put Javascript straight into your HTML file like this:

<html>
    <head>
        <style type="text/css">
          * { color:white }
        </style>
        <script>
        //your Javascript here
        </script>
    </head>
    <body>
        <div id="output"><p>My first widget</p></div>
    </body>
</html>

(I've put an extra div in there for more fun later).

Or you can link to it in another file like this:

<html>
    <head>
        <style type="text/css">
          * { color:white }
        </style>
        <script src="hello.js"></script>
    </head>
    <body>
        <div id="output"><p>My first widget</p></div>
    </body>
</html>

Where 'hello.js' needs to be in the same folder as your index.html.

With Javascript you can use all the usual DOM methods to change values, for example:

        <script>
        var div = document.getElementById("output");
        div.innerHTML="<p>This is my new output</p>";
        </script>

This means that once you've zipped it up and run it inside Joost as usual the text in your hello widget will look like this:

This is my new output

instead of

My first widget

Once you've got the hang of some simple Javascript you might like to try some of the Joost-specific methods. So how about this:

        <script>
        var div = document.getElementById("output");
        div.innerHTML="<p>Hello "+Joost.firstName+"</p>";
        </script>

(see here for the API calls in the Joost class; and note that the user can prevent you seeing this information).

If, like me, you're something of a copy-and-paste coder, you might want to look at Dive Into Greasemonkey, an excellent place to look for Javascript examples for common things you want to do, including DOM manipulation, or the Mozilla Javascript reference which is useful for looking up API calls. There are Joost Widget code examples available for you to reuse as you wish (there's a BSD-like license).

The Joost API is here, and as always we welcome suggestions about that or about these blogposts.

Why might you want to write a Joost Widget?

Personally, I write them to enhance my own use of Joost. For example, lately I've been writing Greasemonkey scripts that allow me to bookmark Joost links on the web, and use a widget to find those bookmarks later inside Joost. So when I want some entertainment, I've got a bunch of things lined up to watch. I'll show you some of what's possible in later posts, but first, you'll need to know the basics.

Widgets are basically web pages packaged as zips.

The best thing to do is to create a new directory (a new folder in Windows) and write a little HTML file in your favourite editor, e.g.

<html>
    <body>
        <p>My first widget</p>
    </body>
</html>

Save that as index.html.

Then write a little congfiguration file:

<widget-manifest>
        <id>http://nicecupoftea.org/widgets/hello</id>
        <website>http://nicecupoftea.org/</website>
        <name>Hello World</name>
</widget-manifest>

Save that as config.xml.

Zip up those two files together using your favourite zip tool. On Windows you select them and add them to a zip. For me it's the command-line zip on the Mac:

sh-2.05b$ cd hello
sh-2.05b$ ls
config.xml      index.html
sh-2.05b$ zip -r hello.zip *
  adding: config.xml (deflated 42%)
  adding: index.html (deflated 18%)

If you have access to a web server it's nice to put it up on there - then you can start Joost, go into my Joost / Widget Menu / Widget Manager and simply add the widget by putting the URL for it into the box at the bottom. There are other reasons to put it on a web server, which we'll come to in a later post.

If you don't have access to a server, you'll need to create a .joda - which is still a zip file but with a different suffix - and load it from your hard drive using the same 'add widget' button. Creating a .joda on the Mac you can do this:

sh-2.05b$ zip -r hello.joda *

While on windows you'll need to add the files to a zip archive and then change the suffix to .joda.

If this all sounds a bit involved, we do have some tools for Windows that we'll make available soon to speed up the development cycle - I'll let Colm 'baby' O'Connor talk you through those in a later post.

Once installed you should be able to see a small black box with a title pane of 'Hello World' which it gets from config.xml and the words 'my first widget' in black in the box. Since the default text is black on slightly-less-opaque-black you might want to add a bit of css to make it more visible, e.g.

<html>
    <head>
        <style type="text/css">
          * { color:white }
        </style>
    </head>
    <body>
        <p>My first widget</p>
    </body>
</html>

A few more tips:

• Widgets have a default size - but you can specify your own using height and width tags in config.xml, e.g.

  <width>450</width>
  <height>30</height>

The values are in pixels.

• You can specify a specific file as your main file if you don't want it to be called index.html. Do this in config.xml like this:

  <main-file>hello.html</main-file>

• main-files can be HTML or XML, and it picks this up from the suffix. Normally you are probably better off using html, but be warned that the HTML parser we use doesn't like self-closing tags and there are some other "gotchas" if you are used to XML or XHTML. I'll post separately about migrating from our old widget format to this new one.

• You can add any tag you like into config.xml and Joost will just ignore it. I use <description> to help manage widgets in our developer area.

As promised at our London developer workshop, over the next few weeks we will use this blog to let you know about some of the features of the Joost widget API, and also the data services which provide the information environment in which widgets live. You'll be hearing a lot about Joost widgets; the hows and whys of creating and publishing them, alongside tips and tricks for making a richer, more social and connected way of watching television.

Our high level overview of Joost Widgets says:

"Built from simple, powerful, and standardised Web technologies, widgets are independently developed software components that run in the Joost software."

We'll be diving into widget details more in later posts. But before we do that, we should say a few words about Joost itself. Joost's desktop client, underneath that glossy exterior, is in fact a highly customised web browser (Firefox, in fact). But this is no ordinary web browser! Rather than browsing traditional web pages, it fetches video content from the network and presents it to users in a TV-like manner. Right now Joost provides on-demand streaming access to thousands of professionally-produced videos, films and TV shows. As a developer, you'll primarily work with widgets within the Joost UI, and with web-based data services for search, information lookup and storage.

A Joost Widget is basically a special kind of web page that's packaged up and so viewers can load it into Joost. It can have access to information about Joost content, as well as having "remote control"-like powers for navigating within and between shows. The facilities we expose to you as third-party developers are based on those we've used ourselves to build Joost. With a little HTML, Javascript and CSS, you can create Joost add-ons that provide additional interactive features, connect users with external websites, or provide recommendation and community features.

We're big fans of standards; the Joost client simply wouldn't exist without HTML, SVG, XML, CSS, Javascript and other Web standards. But we also want to let you make use of some of the unique features of the Joost environment, such as the ability to display sprites on the screen, to access content protected by the Joost P2P network, and to make the most of new Joost features as we unveil them. So we expect to see a variety of widgets. Some may work with little or no changes from other widget platforms, while others will be integrated tightly into the shiny, video-filled world of Joost, and may not make sense outside of Joost. But in all cases they'll be using the same underlying web standards, and we hope that as a potential widget-maker you'll find Joost to be a uniquely engaging environment to show off and develop your skills.

As we evolve the widget platform, we really value your feedback and suggestions. We'll be watching for blog posts that link here, as well as participating via our public joost-dev discussion list. We want it to be as easy as possible for you to make fun and useful Joost extensions, and to link your sites and tools into Joost.

By all accounts, our first Joost Developer Day in London was quite a success. Hopefully all of the developers learned something about Joost and are excited to start developing for our platform – Dan, Libby, Colm and I all came away with great ideas.

Unfortunately, due to the busy holiday season, we’re postponing the upcoming Developer Days in Amsterdam and New York. 

We'll be rescheduling these events for early 2008, and, in the meantime, we've added the presentation from the London Developer Day to this site - and the widget tutorials remain here as well. So if you're thinking about starting work on a Joost Widget over the holidays, the tools available here should help you get started, and you can always join us in the Google group or the IRC channel if you have any questions.