livibetter/jtv-onair.css

## jtv-onair.css
@import url(ttp://fonts.googleapis.com/css?family=Ruda:900);

.JTVOnAir {
  background-color: #000;
  color: #800;
  border: 0.125ex solid #222;
  font-family: Ruda, sans-serif;
  font-weight: 900;
  line-height: 1em;
  height: 1em;
  padding: 0 0.25ex;
  cursor: pointer;
  vertical-align: middle;
}

.JTVOnAir.live {
  color: #F00;
  text-shadow: 0 0 0.125ex #F00;
}

## jtv-onair.js
/* Copyright (c) 2012 Yu-Jie Lin
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy of
 * this software and associated documentation files (the "Software"), to deal in
 * the Software without restriction, including without limitation the rights to
 * use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
 * of the Software, and to permit persons to whom the Software is furnished to do
 * so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in all
 * copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 * SOFTWARE.
 */

/*********
 * Model *
 *********/

function JTVOnAirModel(channel) {
  var self = this;
  // ------
  this.update = function() {
    // Justin.tv API returns only "[]" when channel is not on air. Which is not
    // a callback'd response, must use YQL to wrap it in order to get callback
    // working.
    var API = 'http://api.justin.tv/api/stream/list.json?limit=1&channel=' + self.channel;
    var YQL = 'http://query.yahooapis.com/v1/public/yql?q=' +
              encodeURIComponent("select * from json where url='" + API + "'") +
              '&format=json&callback=?';
    $.getJSON(YQL, function(data){
      var live = data.query.results !== null;
      if (data.query.results) {
        self.data = data.query.results.json;
      }
      if (live == self.live)
        return;
      self.live = live;
      $(self).trigger('live_change');
    });
  }
  // ------
  var channel = this.channel = channel;
  this.live = null;
  this.interval = 10 * 60 * 1000;
  setInterval(this.update, this.interval);
}

/********
 * View *
 ********/

function JTVOnAirView(target, model) {
  var self = this;
  // ------
  this.update = function() {
    if (self.model.live) {
      self.$onair.addClass('live')
                 .attr('title', self.model.channel + ' is Live. ' + self.model.data.channel_count + ' viewers');
    } else {
      self.$onair.removeClass('live')
                 .attr('title', self.model.channel + ' is Offline.');
    }
  }
  // ------
  this.model = model;
  $(model).bind('live_change', this.update);

  this.$onair = $('<span/>').addClass('JTVOnAir')
                            .attr('title', 'Live')
                            .text('ON AIR')
                            .click(function(){window.open('http://www.justin.tv/' + self.model.channel)});
  this.$onair.appendTo('#' + target);
}

/***********
 * Control *
 ***********/

function JTVOnAir(target, channel) {
  var self = this;
  // ------
  var model = this.model = new JTVOnAirModel(channel);
  var view = this.view = new JTVOnAirView(target, model);
  model.update();
}

## test.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8"/>
  <title>Justin.tv ON AIR test page</title>
  <link rel="stylesheet" type="text/css" href="css/main.css"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
  <link rel="stylesheet" type="text/css" href="jtv-onair.css"/>
  <script src="jtv-onair.js"></script>
<style>
body {
  background-color: gray;
  text-align: center;
}
.target {
  font-size: 12px;
}
</style>
<script>
$(function(){
  $.getJSON('http://api.justin.tv/api/stream/list.json?jsonp=?&limit=1', function(data) {
    new JTVOnAir('target-on', data[0].channel.login);
    new JTVOnAir('target-off', 'blahblahblah-xyz-foobar');
  });
});
</script>
</head>
<body>
<span id="target-on" class="target"></span>
<span id="target-off" class="target"></span>
</body>
</html>
	@import url(ttp://fonts.googleapis.com/css?family=Ruda:900);

	.JTVOnAir {
	background-color: #000;
	color: #800;
	border: 0.125ex solid #222;
	font-family: Ruda, sans-serif;
	font-weight: 900;
	line-height: 1em;
	height: 1em;
	padding: 0 0.25ex;
	cursor: pointer;
	vertical-align: middle;
	}

	.JTVOnAir.live {
	color: #F00;
	text-shadow: 0 0 0.125ex #F00;
	}
	/* Copyright (c) 2012 Yu-Jie Lin
	*
	* Permission is hereby granted, free of charge, to any person obtaining a copy of
	* this software and associated documentation files (the "Software"), to deal in
	* the Software without restriction, including without limitation the rights to
	* use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
	* of the Software, and to permit persons to whom the Software is furnished to do
	* so, subject to the following conditions:
	*
	* The above copyright notice and this permission notice shall be included in all
	* copies or substantial portions of the Software.
	*
	* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
	* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
	* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
	* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
	* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
	* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
	* SOFTWARE.
	*/

	/*********
	* Model *
	*********/

	function JTVOnAirModel(channel) {
	var self = this;
	// ------
	this.update = function() {
	// Justin.tv API returns only "[]" when channel is not on air. Which is not
	// a callback'd response, must use YQL to wrap it in order to get callback
	// working.
	var API = 'http://api.justin.tv/api/stream/list.json?limit=1&channel=' + self.channel;
	var YQL = 'http://query.yahooapis.com/v1/public/yql?q=' +
	encodeURIComponent("select * from json where url='" + API + "'") +
	'&format=json&callback=?';
	$.getJSON(YQL, function(data){
	var live = data.query.results !== null;
	if (data.query.results) {
	self.data = data.query.results.json;
	}
	if (live == self.live)
	return;
	self.live = live;
	$(self).trigger('live_change');
	});
	}
	// ------
	var channel = this.channel = channel;
	this.live = null;
	this.interval = 10 * 60 * 1000;
	setInterval(this.update, this.interval);
	}

	/********
	* View *
	********/

	function JTVOnAirView(target, model) {
	var self = this;
	// ------
	this.update = function() {
	if (self.model.live) {
	self.$onair.addClass('live')
	.attr('title', self.model.channel + ' is Live. ' + self.model.data.channel_count + ' viewers');
	} else {
	self.$onair.removeClass('live')
	.attr('title', self.model.channel + ' is Offline.');
	}
	}
	// ------
	this.model = model;
	$(model).bind('live_change', this.update);

	this.$onair = $('<span/>').addClass('JTVOnAir')
	.attr('title', 'Live')
	.text('ON AIR')
	.click(function(){window.open('http://www.justin.tv/' + self.model.channel)});
	this.$onair.appendTo('#' + target);
	}

	/***********
	* Control *
	***********/

	function JTVOnAir(target, channel) {
	var self = this;
	// ------
	var model = this.model = new JTVOnAirModel(channel);
	var view = this.view = new JTVOnAirView(target, model);
	model.update();
	}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8"/>
	<title>Justin.tv ON AIR test page</title>
	<link rel="stylesheet" type="text/css" href="css/main.css"/>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
	<!--[if IE]>
	<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->
	<link rel="stylesheet" type="text/css" href="jtv-onair.css"/>
	<script src="jtv-onair.js"></script>
	<style>
	body {
	background-color: gray;
	text-align: center;
	}
	.target {
	font-size: 12px;
	}
	</style>
	<script>
	$(function(){
	$.getJSON('http://api.justin.tv/api/stream/list.json?jsonp=?&limit=1', function(data) {
	new JTVOnAir('target-on', data[0].channel.login);
	new JTVOnAir('target-off', 'blahblahblah-xyz-foobar');
	});
	});
	</script>
	</head>
	<body>
	<span id="target-on" class="target"></span>
	<span id="target-off" class="target"></span>
	</body>
	</html>