test

radio.sock.js

/**
 * radio.sock.js (noradi client prototype 0)
 * @version 0.0
 * @author Yuki KAN <@kanreisa>
**/

Event.observe(window, 'load', init, false);

function init()
{
	$('ready').appear();
}

/* 親 */
function initParent()
{
	var json  = null;
	var mych  = null;
	var regex = /^[a-z0-9]+$/i;
	
	$('ready').hide();
	$$('h1')[0].update('配信者(親)モード/radio.sock');
	$$('p')[0].update('trying connect...');

	//接続
	var socket = new io.Socket('nessa.pixely.jp', {port: 13401});
	socket.connect();
	//タイムアウト
	var timeout = setTimeout(function()
	{
		$$('h1')[0].update('timeout/radio.sock');
		$$('p')[0].update('[!]接続できませんでした');
		$('ready').appear();
	}, 5000);

	//つながった
	socket.on('connect', function()
	{
		//タイムアウト解除
		clearTimeout(timeout);
		//表示を更新
		$$('p')[0].update('connection established.');
		$('status').appear();
		$('config-parent').appear();
	});

	//メッセージが来たぞ
	socket.on('message', function(message)
	{
		json = message.evalJSON();
		//デバッグ
		console.log(JSON.stringify(json));
		//ステータスを更新
		$('count').update(json.count);
		$('count-chs').update(lengthArray(json.chs));
	});
	
	//チャンネル作成
	$('create').observe('click', function()
	{
		var chName = $('ch-name').value;
		var opName = $('op-name').value;
		if(!chName.match(regex)) return false;
		if(!opName.match(regex)) return false;
		if(json.chs[chName])     return false;
		//設定を送信
		socket.send(JSON.stringify({
			'method' : 'create',
			'chName' : chName,
			'opName' : opName,
		}));
		//表示を更新
		mych = chName;
		$$('h1')[0].update('ch:' + mych + '/' + $$('h1')[0].innerHTML);
		$('config-parent').hide();
		$('controller').show();
	});
	
	//ソース設定
	$('config').observe('click', function()
	{
		//入力チェック
		var src  = $('src').value;
		var type = $('type').value;
		if(!src.match(/^.+$/)) return false;
		if(!type.match(/^.+$/)) return false;
		//設定を送信
		socket.send(JSON.stringify({
			'method' : 'config_source',
			'chName' : mych,
			'src'    : src,
			'type'   : type,
		}));
		//表示を更新
		var html = '<video id="video" class="video-js" width="800" height="450" controls preload>'
		          + '<source src="' + src + '" type="' + type + '">'
		          + '</video>'
		$('player').show();
		$('player').update(html);
		setTimeout(VideoJS.setupAllWhenReady, 300);
		//適当に状態チェック
		var video = $('video');
		if(int) clearInterval(int);
		var stat = {
			'currentTime' : video.currentTime,
			'paused'      : video.paused,
		};
		var int = setInterval(function()
		{
			if(video.paused!=stat.paused){
				if(video.paused) var state = 'stop';
				else             var state = 'play';
				socket.send(JSON.stringify({
					'method' : 'config_state',
					'chName' : mych,
					'state'  : state,
				}));
				stat.paused = video.paused;
			}
			if(video.currentTime!=stat.currentTime){
				socket.send(JSON.stringify({
					'method' : 'config_time',
					'chName' : mych,
					'time'   : video.currentTime,
				}));
				stat.currentTime = video.currentTime;
			}
		}, 800);
	});

	//接続が切れた
	socket.on('disconnect', function()
	{
		$$('h1')[0].update('disconnected/radio.sock');
		$$('p')[0].update('[!]切断されました');
		$('status').hide();
		$('config-parent').hide();
		$('controller').hide();
		$('ready').appear();
	});
}

/* 子 */
function initChild()
{
	var json  = null;
	var mych  = null;
	var stat  = {};
	var regex = /^[a-z0-9]+$/i;
	
	$('ready').hide();
	$$('h1')[0].update('視聴者(子)モード/radio.sock');
	$$('p')[0].update('trying connect...');

	//接続
	var socket = new io.Socket('nessa.pixely.jp', {port: 13401});
	socket.connect();
	//タイムアウト
	var timeout = setTimeout(function()
	{
		$$('h1')[0].update('timeout/radio.sock');
		$$('p')[0].update('[!]接続できませんでした');
		$('ready').appear();
	}, 5000);

	//つながった
	socket.on('connect', function()
	{
		//タイムアウト解除
		clearTimeout(timeout);
		//表示を更新
		$$('p')[0].update('connection established.');
		$('status').appear();
		$('config-child').appear();
	});

	//メッセージが来たぞ
	socket.on('message', function(message)
	{
		json = message.evalJSON();
		//デバッグ
		//console.log(JSON.stringify(json));
		//ステータスを更新
		$('count').update(json.count);
		$('count-chs').update(lengthArray(json.chs));
		//入室済みの場合続行
		if(mych == null) return;
		//<video>同期
		if(stat.src != json.chs[mych].src){
			var html = '<video id="video" width="800" height="450" preload>'
					  + '<source src="' + json.chs[mych].src + '" type="' + json.chs[mych].type + '">'
					  + '</video>';
			$('player').update(html);
			$('video').observe('click', function(e){ e.preventDefault(); });
			stat.src = json.chs[mych].src;
		}
		//適当に状態を同期
		var video = $('video');
		if(stat.state != json.chs[mych].state){
			stat.state = json.chs[mych].state;
			if(stat.state=='play'){
				video.play();
			}
			if(stat.state=='stop'){
				video.pause();
			}
		}
		if(stat.state == 'play'){
			var child_time  = Math.floor(video.currentTime);
			var parent_time = Math.floor(json.chs[mych].time);
			if((child_time != parent_time) && ((child_time+1) != parent_time) && ((child_time-1) != parent_time)
			&& ((child_time+2) != parent_time) && ((child_time-2) != parent_time)){
				try{
					video.currentTime = json.chs[mych].time;
				}catch(e){}
			}
		}
		//チャット
		if(stat.comment_content != json.chs[mych].comment.content){
			stat.comment_name    = json.chs[mych].comment.name;
			stat.comment_content = json.chs[mych].comment.content;
			$('chatlog').innerHTML = stat.comment_name + ' > ' + stat.comment_content + "\n" + $('chatlog').innerHTML;
		}
	});
	
	//チャンネル入室
	$('join').observe('click', function()
	{
		var chName = $('join-ch-name').value;
		if(!json.chs[chName]) return false;
		mych = chName;
		$$('h1')[0].update('ch:' + mych + '/' + $$('h1')[0].innerHTML);
		$('config-child').hide();
		$('player').show();
		$('chat').show();
		//チャット
		window.document.onkeydown = function(e)
		{
			if(e.keyCode == 13){
				var nick    = $('nick');
				var content = $('content');
				socket.send(JSON.stringify({
					'method'  : 'chat_update',
					'chName' : mych,
					'name'    : nick.value,
					'content' : content.value,
				}));
				content.value = '';
			}
		};
	});
	
	//接続が切れた
	socket.on('disconnect', function()
	{
		$$('h1')[0].update('disconnected/radio.sock');
		$$('p')[0].update('[!]切断されました');
		$('status').hide();
		$('config-child').hide();
		$('ready').appear();
	});
}

function yudoufull()
{
	var video = $('video');
	video.style.position = 'absolute';
	video.style.top = '0';
	video.style.right = '0';
	video.style.left = '0';
	video.style.bottom = '0';
	video.width = document.body.getWidth();
	video.height = document.body.getHeight();
}

function lengthArray(array)
{
	var cnt = 0;
	for(key in array){ cnt++; }
	return cnt;
}