summaryrefslogtreecommitdiff
path: root/view
diff options
context:
space:
mode:
Diffstat (limited to 'view')
-rw-r--r--view/poc/chat.html56
-rw-r--r--view/poc/class/chat.js164
-rw-r--r--view/poc/class/playList.js83
-rw-r--r--view/poc/css/chat.css153
-rw-r--r--view/poc/js/chat.js81
-rw-r--r--view/poc/util/base64-binary.js53
-rw-r--r--view/poc/worker/loadAudio.js0
7 files changed, 590 insertions, 0 deletions
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 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Chaos Chat</title>
+ <link rel='stylesheet' href='css/chat.css'/>
+ <!-- NEED TO FIX URL!! -->
+ <script src='http://chaos-audio-platform.riaevangelist.c9.io/socket.io/socket.io.js'></script>
+ <script src='util/base64-binary.js'></script>
+ <script src='class/chat.js'></script>
+ <script src='class/playList.js'></script>
+ <script src='js/chat.js'></script>
+ </head>
+ <body>
+ <header>
+ <h1>Chaos Chat</h1>
+ </header>
+ <main>
+ <section
+ id='chat-primary'
+ class='chat-primary'>
+ <ul
+ id='chat-primary-window'
+ class='chat-window'></ul>
+ <textarea
+ id='chat-primary-input'
+ class='chat-input'></textarea>
+ <button
+ id='chat-primary-post' class='post'>post</button>
+ </section>
+ <section id='playlist-area' class='playlist'>
+ <h2>
+ Playlist
+ </h2>
+ <ul id='playlist'></ul>
+ </section>
+ </main>
+ <section id='modal-join' class='modal modal-join'>
+ <h2>Join a Room</h2>
+ <p>try chaos</p>
+ <input id='room-name'/>
+ <button
+ id='room-join'
+ data-event='room.join'>Join</button>
+ </section>
+ <section id='modal-handle' class='modal modal-handle'>
+ <h2>Set Your Handle</h2>
+ <input id='user-handle' />
+ <button
+ id='set-handle'
+ data-event='set.handle'>Set</button>
+ </section>
+ <footer>
+ Chatting as <span id='user-current-handle'>nobody</span> in <span id='user-current-room'>nowhere</span> room
+ </footer>
+ </body>
+</html>
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+='<p>'+
+ data.handle+':<pre>'+
+ data.msg+
+ '</pre></p>';
+ //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+='<li>'+
+ data.url+
+ '</li>';
+
+ 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<bytes; i+=3) {
+ //get the 3 octects in 4 ascii chars
+ enc1 = this._keyStr.indexOf(input.charAt(j++));
+ enc2 = this._keyStr.indexOf(input.charAt(j++));
+ enc3 = this._keyStr.indexOf(input.charAt(j++));
+ enc4 = this._keyStr.indexOf(input.charAt(j++));
+
+ chr1 = (enc1 << 2) | (enc2 >> 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
--- /dev/null
+++ b/view/poc/worker/loadAudio.js
generated by cgit v1.2.3-70-g09d2 (git 2.51.0) at 2025-12-10 11:26:05 +0000