Skip to content

Instantly share code, notes, and snippets.

@kanreisa
Created March 30, 2011 10:14
Show Gist options
  • Save kanreisa/894168 to your computer and use it in GitHub Desktop.
Save kanreisa/894168 to your computer and use it in GitHub Desktop.
test
/**
* 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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment