diff options
Diffstat (limited to 'static')
| -rw-r--r-- | static/base.css | 7 | ||||
| -rw-r--r-- | static/jquery.hive.pollen.min.js | 3 | ||||
| -rw-r--r-- | static/poller.js | 33 | ||||
| -rw-r--r-- | static/script.js | 87 |
4 files changed, 94 insertions, 36 deletions
diff --git a/static/base.css b/static/base.css index c932d6f..00ad6f1 100644 --- a/static/base.css +++ b/static/base.css @@ -63,6 +63,7 @@ header label[for="user"] { } header input#user { left: 570px; + top: 0px; } header label[for="song"] { left: 300px; @@ -137,7 +138,7 @@ section.song div.user { } section.song div.remove { position: absolute; - top: 0px; + top: 0; right: 5px; font-weight: bold; cursor: pointer; @@ -145,8 +146,12 @@ section.song div.remove { section.song div.thumb { float: left; width: 150px; + height: 90px; overflow: hidden; } +section.song div.thumb img { + height: 90px; +} section.song canvas, section.song > img { position: relative; top: 20px; diff --git a/static/jquery.hive.pollen.min.js b/static/jquery.hive.pollen.min.js new file mode 100644 index 0000000..e2557b3 --- /dev/null +++ b/static/jquery.hive.pollen.min.js @@ -0,0 +1,3 @@ +// https://github.com/rwldrn/jquery-hive +// http://dev.pollenjs.com +if(!Array.prototype.forEach){Array.prototype.forEach=function(a){var b=this.length||0,c=0,d=arguments[1];if(typeof a!=="function"){throw new TypeError}for(;c<b;c++){if(c in this){a.call(d,this[c],c,this)}}}}(function(WorkerGlobalScope){var Pollen=function(){this[0]=WorkerGlobalScope;return this},each=Array.prototype.forEach,indexOf=Array.prototype.indexOf,push=Array.prototype.push,slice=Array.prototype.slice,hasOwn=Object.prototype.hasOwnProperty,toStr=Object.prototype.toString,trim=String.prototype.trim;Pollen.prototype={identity:0,identify:{identify:function(){return Pollen.identity}},date:{now:function(a){return a?Math.round((new Date).getTime()/1e3):+(new Date)}},func:{noop:function(){},bind:function(a,b,c){if(a===null){return b}if(b&&a){return function(){return a.apply(b,c)}}}},evaluate:{isObj:function(a){if(!a){return false}if(a.constructor&&!hasOwn.call(a,"constructor")&&!hasOwn.call(a.constructor.prototype,"isPrototypeOf")){return false}var b;for(b in a){}return b===undefined||hasOwn.call(a,b)},isArr:function(a){return a!==null&&typeof a=="object"&&"splice"in a&&"join"in a},isRegExp:function(a){if(a){if((new RegExp(/([[\]\/\\])/g)).test(a)===false){return false}return(new RegExp(a)).test(null)||toStr.call(a)=="[object RegExp]"}return false},isFn:function(a){return a!==null&&toStr.call(a)==="[object Function]"&&typeof a=="function"},isStr:function(a){return a!==null&&typeof a=="string"&&isNaN(a)},isNum:function(a){return a!==null&&typeof a=="number"},isJson:function(a){if(a===null)return false;var b=Pollen.evaluate.isObj(a)?JSON.stringify(a):a;return(new RegExp('^("(\\\\.|[^"\\\\\\n\\r])*?"|[,:{}\\[\\]0-9.\\-+Eaeflnr-u \\n\\r\\t])+?$')).test(b)},isDef:function(a){if(!a||a===null||typeof a==="undefined"||Pollen.evaluate.isEmpty(a)){return false}return true},isNull:function(a){return a===null},isEmpty:function(a){return a==null||a==""},eq:function(a,b){var c=0,d=b.length,e=false;for(;c<d;c++){if(a===b[c]){e=true;break}}return e}},string:{trim:function(a){if(typeof a==="undefined"||a==null)return"";a=a+"";return a==""?"":a.replace(/^\s\s*/,"").replace(/\s\s*$/,"")},inStr:function(a,b){if(!a){return false}if(a.indexOf(b)>=0||(new RegExp(b,"ig")).test(a)){return true}return false},_regExpEscape:function(a){if((new RegExp(/([[\]\/\\])/g)).test(a)===false){return String(a).replace(/([.*+?^=!:${}()|[\]\/\\])/g,"\\$1")}return a}},array:{each:function(a,b){var c=0,d=a.length;if(Pollen.evaluate.isArr(a)){for(;c<d;c++){b.call(a,c,a[c])}}if(Pollen.evaluate.isObj(a)){for(var e in a){if(a[e]){b.call(a[e],e,a[e],c++)}}}},toArray:function(a){if(!a){return[]}if(Pollen.evaluate.isArr(a)){return a}if(Pollen.evaluate.isStr(a)){return a.split("")}var b=a.length||0,c=[];while(b--){c[b]=a[b]}return c},isAtIndex:function(a,b,c){if(a[b]==c){return true}return false},inArray:function(a,b){var c;for(c in a){if(a[c]==b){return true}}return false},clone:function(a){if(Pollen.evaluate.isArr(a)){return[].concat(a)}var b=Pollen.evaluate.isArr(a)?[]:{};for(var c in obj){if(hasOwn.call(obj,c)){b[c]=this.clone(obj[c])}}return b},last:function(a){return a[a.length-1]},first:function(a){return a[0]},unique:function(a){var b=0,c=[],d=[];for(var e in a){if(!Pollen.array.inArray(d,JSON.stringify(a[e]))){c[c.length]=a[e];d[d.length]=JSON.stringify(a[e])}}return c},merge:function(a){var b=a,c=0;for(;c<arguments.length;c++){b=Pollen.evaluate.isArr(arguments[c])?b.concat(arguments[c]):Pollen.object.extend(b,arguments[c])}return Pollen.evaluate.isArr(b)?this.unique(b):b},combine:function(a,b){var c=0,d=a.length,e={};if(!a||!b||!Pollen.evaluate.isArr(a)||!Pollen.evaluate.isArr(b)){return false}if(d!=b.length){throw"Cannot combine arrays, key length does not match value length"}for(;c<d;c++){e[a[c]]=b[c]}return e},filter:function(a,b,c){var d=0,e=a.length,f=[];if(!Pollen.evaluate.isArr(a)){f={};for(var g in a){if(b(a[g],d)){f[g]=a[g]}}return f}for(;d<e;d++){if(b(a[d],d)){f[f.length]=a[d]}}return f},map:function(a,b){var c=[],d=0,e=a.length;for(;d<e;d++){var f=b(a[d],d);if(f!==null){c[c.length]=f}}return c.concat.apply([],c)},grep:function(a,b,c){var d=[],e;if(Pollen.evaluate.isFn(b)){return Pollen.array.filter(a,b)}e=!Pollen.evaluate.isRegExp(b)?Pollen.string._regExpEscape(b):b;Pollen.array.each(a,function(b,f){if(typeof f==="number"){f=f+""}if(f.match(e)){d[d.length]=c?c.call(a,f,b):f}});return d},size:function(a){if(Pollen.evaluate.isArr(a)||Pollen.evaluate.isStr(a)){return Pollen.array.toArray(a).length}if(Pollen.evaluate.isObj(a)){var b=0;for(var c in a){if(!Pollen.evaluate.isNull(a[c])){b++}}return b}return Pollen.array.toArray(a).length},pick:function(a,b){var c=[];Pollen.array.each(a,function(a,d){c[c.length]=d[b]});return c},sortBy:function(a,b,c){return Pollen.array.map(a,function(a,d){return{value:a,criteria:b.call(c,a,d)}}).sort(function(a,b){var c=a.criteria,d=b.criteria;return c<d?-1:c>d?1:0}).pick("value")},compact:function(a){var b=[undefined,null,false],c=Pollen.evaluate.isArr(a)?[]:{},d=function(a){var b=a.length,e="";for(var f in a){e=a[f];if(Pollen.evaluate.isArr(e)){d(e)}else{if(!Pollen.evaluate.eq(e,[undefined,null,false])){if(Pollen.evaluate.isArr(c)){c[c.length]=e}else{c[e]=e}}}}return true};d(a);return c}},object:{keys:function(a){var b=[];for(var c in a){if(a[c]){b[b.length]=c}}return b},values:function(a){var b=[];for(var c in a){if(a[c]){b[b.length]=a[c]}}return b},extend:function(a,b){if(Pollen.evaluate.isNull(a)&&Pollen.evaluate.isDef(b)){return b}for(var c in b){if(hasOwn.call(b,c)){var d=b[c],e=a[c];if(!Pollen.evaluate.isNull(d)){a[c]=e&&typeof d=="object"&&typeof e=="object"?Pollen.array.merge(e,d):d}}}return a}},ajax:{_options:{url:"",data:"",dataType:"",success:Pollen.noop,type:"GET",sync:navigator.userAgent.toLowerCase().indexOf("safari/")!=-1?false:true,xhr:function(){return new XMLHttpRequest}},get:function(a){a.type="GET";this._ajax(a)},post:function(a){a.type="POST";this._ajax(a)},_ajax:function(a){var b=Pollen.object.extend(this._options,a),c=b.dataType=="json"?true:false,d=b.type.toLowerCase(),e=b.xhr(),f=b.success;if(!Pollen.evaluate.isStr(b.data)){b.data=Pollen.data.param(b.data)}if(d=="get"&&b.data.length){b.url+=((new RegExp(/\?/)).test(b.url)?"&":"?")+b.data}if(e){Pollen.ajax._confXHR(e,b,c,f);e.open(b.type,b.url,b.sync);e.setRequestHeader("X-Requested-With","Worker-XMLHttpRequest");e.setRequestHeader("X-Worker-Hive","Pollen-JS");if(Pollen.evaluate.isDef(Pollen.identity)){e.setRequestHeader("X-Pollen-Thread-Id",Pollen.identity)}if(d=="post"){e.setRequestHeader("Content-Type","application/x-www-form-urlencoded")}e.send(d=="post"?b.data:null)}},_confXHR:function(a,b,c,d){function h(){if(d){d.call(a,e)}}var e,f;var g=a.onreadystatechange=function(){if(a.readyState==4){f=Pollen.evaluate.isJson(a.responseText)?JSON.parse(a.responseText):null;e=c?f:{text:a.responseText,xml:a.responseXML,json:f};h()}};return a}},data:{param:function(a){function c(a,c){c=Pollen.evaluate.isFn(c)?c():c;b[b.length]=encodeURIComponent(a)+"="+encodeURIComponent(c)}var b=[];Pollen.array.each(a,function(a,b){c(a,b)});if(arguments.length==2&&arguments[1]===true){c("WORKER_ID",Pollen.identity)}return b.join("&").replace(/%20/g,"+")},cache:{pollen:+(new Date)},storage:function(a,b){if(a&&b===undefined){return Pollen.data.cache[a]?Pollen.data.cache[a]:false}Pollen.data.cache[a]=b;return Pollen.data.cache[a]},query:function(){function distinctFilter(a,b){var c=[],d={},e=a.length,f=0;for(;f<e;++f){var g=a[f];if(b(g,f,a)){if(typeof g=="object"&&g){if(!g.__included){g.__included=true;c[c.length]=g}}else if(!d[g+typeof g]){d[g+typeof g]=true;c[c.length]=g}}}for(f=0,e=c.length;f<e;++f){if(c[f]){delete c[f].__included}}return c}function expand(a,b){function d(a){if(b){if(b===true&&!(a instanceof Array)){c[c.length]=a}else if(a[b]){c[c.length]=a[b]}}for(var e in a){var f=a[e];if(!b){c[c.length]=f}else if(f&&typeof f=="object"){d(f)}}}var c=[];if(Pollen.evaluate.isArr(b)){if(b.length==1){return a[b[0]]}for(var e=0;e<b.length;e++){c[c.length]=a[b[e]]}}else{d(a)}return c}function slice(a,b,c,d){var e=a.length,f=[];c=c||e;b=b<0?Math.max(0,b+e):Math.min(e,b);c=c<0?Math.max(0,c+e):Math.min(e,c);for(var g=b;g<c;g+=d){f[f.length]=a[g]}return f}return function(query,obj){function makeRegex(a,b,c,d,e){return strs[e].match(/[\*\?]/)||d=="~"?"/^"+strs[e].substring(1,strs[e].length-1).replace(/\\([btnfr\\"'])|([^\w\*\?])/g,"\\$1$2").replace(/([\*\?])/g,".$1")+(d=="~"?"$/i":"$/")+".test("+b+")":a}function pcall(a){prefix=a+"("+prefix}var depth=0,strs=[],prefix="",executor="";query=query.replace(/"(\\.|[^"\\])*"|'(\\.|[^'\\])*'|[\[\]]/g,function(a){depth+=a=="["?1:a=="]"?-1:0;return a=="]"&&depth>0?"`]":a.charAt(0)=='"'||a.charAt(0)=="'"?"`"+(strs.push(a)-1):a}).replace(/([^<>=]=)([^=])/g,"$1=$2").replace(/@|(\.\s*)?[a-zA-Z\$_]+(\s*:)?/g,function(a){return a.charAt(0)=="."?a:a=="@"?"$obj":(a.match(/:|^(\$|Math|true|false|null)$/)?"":"$obj.")+a}).replace(/\.?\.?\[(`\]|[^\]])*\]|\?.*|\.\.([\w\$_]+)|\.\*/g,function(a,b,c){var d=a.match(/^\.?\.?(\[\s*\^?\?|\^?\?|\[\s*==)(.*?)\]?$/);if(d){var e="";if(a.match(/^\./)){pcall("expand");e=",true)"}pcall(d[1].match(/\=/)?"Pollen.array.map":d[1].match(/\^/)?"distinctFilter":"Pollen.array.filter");return e+",function($obj){return "+d[2]+"})"}d=a.match(/^\[\s*([\/\\].*)\]/);if(d){return".concat().sort(function(a,b){"+d[1].replace(/\s*,?\s*([\/\\])\s*([^,\\\/]+)/g,function(a,b,c){return"var av= "+c.replace(/\$obj/,"a")+",bv= "+c.replace(/\$obj/,"b")+";if(av>bv||bv==null){return "+(b=="/"?1:-1)+";}\n"+"if(bv>av||av==null){return "+(b=="/"?-1:1)+";}\n"})+"})"}d=a.match(/^\[(-?[0-9]*):(-?[0-9]*):?(-?[0-9]*)\]/);if(d){pcall("slice");return","+(d[1]||0)+","+(d[2]||0)+","+(d[3]||1)+")"}if(a.match(/^\.\.|\.\*|\[\s*\*\s*\]|,/)){pcall("expand");return(a.charAt(1)=="."?",'"+c+"'":a.match(/,/)?","+a:"")+")"}return a}).replace(/(\$obj\s*(\.\s*[\w_$]+\s*)*)(==|~)\s*`([0-9]+)/g,makeRegex).replace(/`([0-9]+)\s*(==|~)\s*(\$obj(\s*\.\s*[\w_$]+)*)/g,function(a,b,c,d,e){return makeRegex(a,d,e,c,b)});query=prefix+(query.charAt(0)=="$"?"":"$")+query.replace(/`([0-9]+|\])/g,function(a,b){return b=="]"?"]":strs[b]});executor=eval("1&&function($,$1,$2,$3,$4,$5,$6,$7,$8,$9){var $obj=$;return "+query+"}");for(var i=0;i<arguments.length-1;i++){arguments[i]=arguments[i+1]}return obj?executor.apply(this,arguments):executor}}()},worker:{send:function(a){var b=a,c;if(!Pollen.evaluate.isDef(a)){return}if(!Pollen.evaluate.isObj(a)){b={message:a}}if(a.SEND_TO){b.SEND_FROM=Pollen.identity}b.WORKER_ID=Pollen.identity;return postMessage(b)},reply:function(a){return Pollen.worker.send(a)},receive:function(a){return addEventListener("message",function(b){var c=b.data;if(Pollen.identity==""){Pollen.identity=c.WORKER_ID}return a.call(b,c)},false)}},json:{encode:JSON.parse,decode:JSON.stringify}};Pollen=new Pollen;p=$=new function WorkerOnMessage(){if(arguments.length){if(Pollen.evaluate.isFn(arguments[0])){return Pollen.worker.receive(arguments[0])}}return WorkerOnMessage};p.ajax=$.ajax=Pollen.ajax;"identify date string evaluate reflection array func object data json worker".split(" ").forEach(function(a){for(var b in Pollen[a]){p[b]=$[b]=Pollen[a][b]}})})(this) diff --git a/static/poller.js b/static/poller.js new file mode 100644 index 0000000..31d6799 --- /dev/null +++ b/static/poller.js @@ -0,0 +1,33 @@ +importScripts('/static/jquery.hive.pollen.min.js'); + +var pid; +var timestamp = '0'; + +function getUpdates() { + $.ajax.get({ + url: '/poll/', + dataType: 'json', + data: {pid: pid, timestamp: timestamp}, + timeout: 1000 * 30, + success: handleUpdates + }); +} +function handleUpdates(data) { + var updates = []; + for (var i = 0; i < data.length; i++) { + updates.push({ + 'action': data[i].Action, + 'yid': data[i].Song.Yid, + 'title': data[i].Song.Title, + 'user': data[i].Song.User + }); + timestamp = data[i].Timestamp; + } + $.send({updates: updates}); + getUpdates(); +} + +$(function (data) { + pid = data.pid; + getUpdates(); +}); diff --git a/static/script.js b/static/script.js index d4e24ab..9407689 100644 --- a/static/script.js +++ b/static/script.js @@ -11,6 +11,18 @@ $(document).ready(function () { for (var i = 0; i < ids.length; i++) { drawBar(ids[i]); } + var poller = new Worker('/static/poller.js'); + poller.onmessage = function (e) { + for (var i = 0; i < e.data.updates.length; i++) { + update = e.data.updates[i]; + switch (update.action) { + case 0: + drawAdd(update); + break; + } + } + } + poller.postMessage({'pid': pid}); }); function drawBar(id) { @@ -42,6 +54,7 @@ function drawBar(id) { } } +// function name is defined by youtube player api function onYouTubePlayerReady(playerId) { player = document.getElementById('player'); player.addEventListener('onStateChange', 'onStateChange'); @@ -49,16 +62,16 @@ function onYouTubePlayerReady(playerId) { function onStateChange(state) { switch (state) { - case 1: //playing - interval = setInterval(drawBar, 100, current_id); - break; - case 0: //ended - showPlay(current_id); - case -1: //unstarted - case 2: //paused - case 3: //buffering - case 5: //cued - clearInterval(interval); + case 1: //playing + interval = setInterval(drawBar, 100, current_id); + break; + case 0: //ended + showPlay(current_id); + case -1: //unstarted + case 2: //paused + case 3: //buffering + case 5: //cued + clearInterval(interval); } } @@ -118,7 +131,7 @@ function search(query) { 'key': 'AI39si7SaaRqtvAZTa8lePOq6XC5r7S5Xzp3AB6oYPfeCArPbA4dIq7tSVeuIDwAkcFFDeI3rzNmYxkyN_fg8X_7w800pIvVOA' } $.getJSON('https://gdata.youtube.com/feeds/api/videos', params, - function(data) { + function (data) { var entries = data.feed.entry; var items = []; for (var i = 0; i < entries.length; i++) { @@ -147,34 +160,38 @@ function add(id, title) { 'user': user } $.getJSON('/add/', params, - function(data) { + function (data) { if (data != 1) return; - $('article').append('\ - <section class="song" id="' + id + '">\ - <div class="info">\ - <a href="http://www.youtube.com/watch?v=' + id + '">' + title + '</a>\ - </div>\ - <div class="user">' + user + '</div>\ - <div class="remove" onclick="remove(\'' + id + '\')">×</div>\ - <br class="clear">\ - <div class="thumb">\ - <img src="http://i.ytimg.com/vi/' + id + '/1.jpg" alt="' + id + '">\ - </div>\ - <canvas id="c_' + id + '" width="700" height="20"></canvas>\ - <br>\ - <img src="/static/player_play.png" alt="Play" onclick="play(\'' + id + '\')" id="play_' + id + '">\ - <img src="/static/player_pause.png" alt="Pause" onclick="pause(\'' + id + '\')" id="pause_' + id + '">\ - <img src="/static/player_stop.png" alt="Stop" onclick="stop(\'' + id + '\')">\ - <br class="clear">\ - </section>\ - '); - ids.push(id); - drawBar(id); + drawAdd(params); } ); } +function drawAdd(s) { + $('article').append('\ + <section class="song" id="' + s.yid + '">\ + <div class="info">\ + <a href="http://www.youtube.com/watch?v=' + s.yid + '">' + s.title + '</a>\ + </div>\ + <div class="user">' + s.user + '</div>\ + <div class="remove" onclick="remove(\'' + s.yid + '\')">×</div>\ + <br class="clear">\ + <div class="thumb">\ + <img src="http://i.ytimg.com/vi/' + s.yid + '/1.jpg" alt="' + s.yid + '">\ + </div>\ + <canvas id="c_' + s.yid + '" width="700" height="20"></canvas>\ + <br>\ + <img src="/static/player_play.png" alt="Play" onclick="play(\'' + s.yid + '\')" id="play_' + s.yid + '">\ + <img src="/static/player_pause.png" alt="Pause" onclick="pause(\'' + s.yid + '\')" id="pause_' + s.yid + '">\ + <img src="/static/player_stop.png" alt="Stop" onclick="stop(\'' + s.yid + '\')">\ + <br class="clear">\ + </section>\ + '); + ids.push(s.yid); + drawBar(s.yid); +} + function remove(id) { var user = $('#user').val(); params = { @@ -182,10 +199,10 @@ function remove(id) { 'yid': id, } $.getJSON('/remove/', params, - function(data) { + function (data) { if (data == 1) { var element = $('#' + id); - element.slideUp(100, function() { + element.slideUp(100, function () { element.remove(); }); } |