From c7c22e3db1c826bcfb2bc66651ec480aae0d4ae0 Mon Sep 17 00:00:00 2001 From: yo mama Date: Sat, 4 Apr 2015 01:00:59 -0700 Subject: first --- view/poc/chat.html | 56 ++++++++++++++ view/poc/class/chat.js | 164 +++++++++++++++++++++++++++++++++++++++++ view/poc/class/playList.js | 83 +++++++++++++++++++++ view/poc/css/chat.css | 153 ++++++++++++++++++++++++++++++++++++++ view/poc/js/chat.js | 81 ++++++++++++++++++++ view/poc/util/base64-binary.js | 53 +++++++++++++ view/poc/worker/loadAudio.js | 0 7 files changed, 590 insertions(+) create mode 100644 view/poc/chat.html create mode 100644 view/poc/class/chat.js create mode 100644 view/poc/class/playList.js create mode 100644 view/poc/css/chat.css create mode 100644 view/poc/js/chat.js create mode 100644 view/poc/util/base64-binary.js create mode 100644 view/poc/worker/loadAudio.js (limited to 'view') diff --git a/view/poc/chat.html b/view/poc/chat.html new file mode 100644 index 0000000..bee39b2 --- /dev/null +++ b/view/poc/chat.html @@ -0,0 +1,56 @@ + + + + Chaos Chat + + + + + + + + + +
+

Chaos Chat

+
+
+
+
    + + +
    +
    +

    + Playlist +

    +
      +
      +
      + + + + + diff --git a/view/poc/class/chat.js b/view/poc/class/chat.js new file mode 100644 index 0000000..23baeda --- /dev/null +++ b/view/poc/class/chat.js @@ -0,0 +1,164 @@ +var Chat=function(){ + function joinRoom(){ + var room=document.getElementById( + 'room-name' + ).value; + + if(socket.room) + leaveRoom(); + + socket.room=room; + socket.emit( + 'room.join', + { + room:socket.room + } + ); + + document.getElementById('user-current-room').innerHTML=socket.room; + var join=document.getElementById('modal-join'); + join.style.opacity=0; + join.style.zIndex=0; + document.getElementById('chat-primary').style.opacity=1; + document.getElementById('playlist-area').style.opacity=1; + document.querySelector('main').style.zIndex=5 + } + + function leaveRoom(){ + socket.emit( + 'room.leave', + { + room:socket.room + } + ); + + document.getElementById('user-current-room').innerHTML='nowhere'; + } + + function setHandle(e){ + if (webkitNotifications.checkPermission() != 0) { + webkitNotifications.requestPermission(); + } + + socket.handle=document.getElementById( + 'user-handle' + ).value + + socket.emit( + 'set.handle', + { + handle:socket.handle + } + ) + + document.getElementById('user-current-handle').innerHTML=socket.handle; + var handle=document.getElementById('modal-handle'); + handle.style.opacity=0; + handle.style.zIndex=0; + var join=document.getElementById('modal-join'); + join.style.opacity=1; + join.style.zIndex=5; + } + + function fromRoom(data){ + var box=document.getElementById( + 'chat-primary-window' + ), + newItem=document.createElement('li'); + + newItem.innerHTML+='

      '+ + data.handle+':

      '+
+            data.msg+
+        '

      '; + //box.insertBefore(newItem,box.getElementsByTagName('li')[0]); + box.appendChild(newItem); + box.scrollTop=box.scrollHeight; + //should not scroll down if user is not at the bottom. + } + + function toRoom(){ + if(!socket.room) + return; + + var input=document.getElementById( + 'chat-primary-input' + ); + var data={ + msg:input.value + } + input.value=''; + socket.emit( + 'room.chat', + data + ); + } + + function fromUser(data){ + //show private message + } + + function toUser(){ + //send private message + } + + function userOnline(data){ + var notification=webkitNotifications.createNotification( + '', + data.handle+' is Online', + data.handle+' has just come online on the server' + ); + notification.show(); + ( + function(){ + setTimeout( + function() { + notification.close(); + }, + 1000 + ); + } + )(notification) + } + + function reConnect(){ + if(socket.handle) + socket.emit( + 'set.handle', + { + handle:socket.handle + } + ); + + if(socket.room) + socket.emit( + 'room.join', + { + room:socket.room + } + ); + } + + return { + room : { + join : joinRoom, + leave : leaveRoom, + chat : toRoom + }, + user : { + chat:toUser + }, + set : { + handle:setHandle + }, + on : { + room : { + chat:fromRoom + }, + user : { + chat : fromUser, + online : userOnline + }, + connect : reConnect + } + }; +} \ No newline at end of file diff --git a/view/poc/class/playList.js b/view/poc/class/playList.js new file mode 100644 index 0000000..b161ce8 --- /dev/null +++ b/view/poc/class/playList.js @@ -0,0 +1,83 @@ +var PlayList=function(el){ + var playList= el, + files={}, + list=[], + loops=4, + status = { + playing : false, + current : 0, + currentLoop : 0 + }, + audioBuffer = null; + + window.AudioContext = window.AudioContext || window.webkitAudioContext; + var context = new AudioContext(); + + function addItem(data){ + list.push(data.url); + playList.innerHTML+='
    • '+ + data.url+ + '
      • '; + + if(!status.playing) + play(data.url); + } + + function play(data){ + audioBuffer = context.createBufferSource(); + audioBuffer.buffer=(typeof data=='string')? + ( + function(){ + status.currentLoop=0; + return files[data]; + } + )():data; + audioBuffer.connect(context.destination); + status.playing=true; + audioBuffer.start(0); + audioBuffer.onended=function(){ + status.currentLoop++; + if(status.currentLoop>=loops){ + status.playing=false; + next(); + return; + } + play(this.buffer); + } + } + + function next(){ + var count = list.length; + status.current++; + if(status.current>=count) + status.current=0; + if(!status.playing) + play(list[status.current]); + } + + function recievedAudio(data){ + if(files[data.url]){ + data.file=null; + addItem(data); + return; + } + + var audioBinary=Base64Binary.decodeArrayBuffer(data.file); + context.decodeAudioData( + audioBinary, + function(buffer) { + files[data.url]=buffer; + data.file=null; + addItem(data); + } + ); + } + + return { + add : addItem, + is : status, + on : { + add:recievedAudio + } + } +} \ No newline at end of file diff --git a/view/poc/css/chat.css b/view/poc/css/chat.css new file mode 100644 index 0000000..e0903fe --- /dev/null +++ b/view/poc/css/chat.css @@ -0,0 +1,153 @@ +html,body{ + padding:0; + margin:0; + height:100%; +} + +body{ + font-family:helvetica, arial, verdana; + font-size:16px; + background:rgb(231,249,255); + color:rgb(167,185,191); + overflow:auto; +} + +body *{ + position:relative; +} + +header{ + background:rgb(69,142,166); + box-shadow:0 4px 5px rgba(167,185,191,.5); + padding:20px; + position:fixed; + top:0; + left:0; + width:calc(100% - 40px); + color:rgb(231,249,255); + z-index:1000; +} + +header h1 { + margin:0; +} + +main{ + height:calc(100% - 120px); + top:80px; +} + +footer{ + background:rgb(69,142,166); + box-shadow:0 -3px 4px rgba(167,185,191,.5); + padding:10px; + position:fixed; + bottom:0; + left:0; + width:calc(100% - 20px); + height:20px; + color:rgb(231,249,255); +} + +.chat-primary{ + width:calc(75% - 20px); + padding:10px; + height:300px; + opacity:0; + position:absolute; + left:0; + top:0; + transition:opacity 500ms; +} + +.chat-window{ + list-style:none; + height:250px; + box-shadow:inset 0 0 30px rgb(212,244,255), + 0 0 4px rgb(167,185,191); + margin:0; + padding:2px 9px; + z-index:100; + margin-bottom:5px; + overflow-y:auto; + resize:both; +} + +.chat-window img, +.chat-window video, +.chat-window audio, +.chat-window iFrame{ + max-width:100%; +} + +.chat-window video, +.chat-window iFrame{ + width:100; + resize:both; +} + +.chat-input{ + width:100%; + height:50px; + border:none; +} + +textarea, +input{ + height:50px; + border:none; + box-shadow:inset 0 26px 30px rgb(212, 244, 255), + 0 0 4px rgba(167,185,191,.75); + border-radius:5px; +} + +input{ + line-height:50px; + font-size:20px; +} + +.playlist{ + width:calc(25% - 10px); + padding:5px; + height:300px; + opacity:0; + position:absolute; + right:0; + top:0; + transition:opacity 500ms; +} + +.playlist ul{ + list-style:none; + padding:0; + margin:0; + overflow:auto; + height:83%; +} + +.playlist li{ + padding:10px 0; + background:rgba(167,185,191,.7); + margin:2px 0; +} + +.modal{ + position:absolute; + top:200px; + left:50%; + padding:50px; + margin:0 0 0 -150px; + background:rgb(212,244,255); + border-radius:8px; + box-shadow:0 0 8px rgba(167,185,191,.7), + inset 0 5px 20px rgb(231,249,255); + transition:opacity 500ms; +} + +.modal h2{ + margin-top:0; +} + +.modal-join{ + opacity:0; +} diff --git a/view/poc/js/chat.js b/view/poc/js/chat.js new file mode 100644 index 0000000..7371f75 --- /dev/null +++ b/view/poc/js/chat.js @@ -0,0 +1,81 @@ +//config +var conf={ + remote:{ + base : 'http://chaos-audio-platform.riaevangelist.c9.io', + socket : '', + port : ':80' + } +}; + + + +//begin chat app code + + +if(!io) + document.location.reload(); + +var socket = io.connect( + [ + conf.remote.base, + conf.remote.socket, + conf.remote.port + ].join(''), + { + 'max reconnection attempts':'Infinity', + 'reconnection delay':1500 + } +); + +function init(){ + var setHandle = document.getElementById('set-handle'), + roomJoin = document.getElementById('room-join'), + chatPost = document.getElementById('chat-primary-post'); + + var chat = new Chat(), + playlist= new PlayList( + document.getElementById('playlist') + ); + + setHandle.addEventListener( + 'click', + chat.set.handle + ); + + roomJoin.addEventListener( + 'click', + chat.room.join + ); + + chatPost.addEventListener( + 'click', + chat.room.chat + ); + + socket.on( + 'room.chat', + chat.on.room.chat + ) + + socket.on( + 'online', + chat.on.user.online + ) + + socket.on( + 'connect', + chat.on.connect + ) + + socket.on( + 'playlist.add', + playlist.on.add + ) + + //NEED to add private chatting functionality and UI +} + +window.addEventListener( + 'load', + init +); \ No newline at end of file diff --git a/view/poc/util/base64-binary.js b/view/poc/util/base64-binary.js new file mode 100644 index 0000000..84b084f --- /dev/null +++ b/view/poc/util/base64-binary.js @@ -0,0 +1,53 @@ +var Base64Binary = { + _keyStr : "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=", + + /* will return a Uint8Array type */ + decodeArrayBuffer: function(input) { + var bytes = (input.length/4) * 3; + var ab = new ArrayBuffer(bytes); + this.decode(input, ab); + + return ab; + }, + + decode: function(input, arrayBuffer) { + //get last chars to see if are valid + var lkey1 = this._keyStr.indexOf(input.charAt(input.length-1)); + var lkey2 = this._keyStr.indexOf(input.charAt(input.length-2)); + + var bytes = (input.length/4) * 3; + if (lkey1 == 64) bytes--; //padding chars, so skip + if (lkey2 == 64) bytes--; //padding chars, so skip + + var uarray; + var chr1, chr2, chr3; + var enc1, enc2, enc3, enc4; + var i = 0; + var j = 0; + + if (arrayBuffer) + uarray = new Uint8Array(arrayBuffer); + else + uarray = new Uint8Array(bytes); + + input = input.replace(/[^A-Za-z0-9\+\/\=]/g, ""); + + for (i=0; i> 4); + chr2 = ((enc2 & 15) << 4) | (enc3 >> 2); + chr3 = ((enc3 & 3) << 6) | enc4; + + uarray[i] = chr1; + if (enc3 != 64) uarray[i+1] = chr2; + if (enc4 != 64) uarray[i+2] = chr3; + } + + return uarray; + } +} diff --git a/view/poc/worker/loadAudio.js b/view/poc/worker/loadAudio.js new file mode 100644 index 0000000..e69de29 -- cgit v1.2.3-70-g09d2