summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--public/css/solarized.css31
-rw-r--r--public/js/index.js3
-rw-r--r--public/js/lib/video.js102
-rw-r--r--public/js/lib/views/index.js13
-rw-r--r--public/js/lib/views/lobby/lobby.js (renamed from public/js/lib/views/lobby/index.js)12
-rw-r--r--public/js/lib/views/login.js6
-rw-r--r--public/js/lib/views/room/chat.js (renamed from public/js/lib/chat.js)30
-rw-r--r--public/js/lib/views/room/index.js10
-rw-r--r--public/js/lib/views/room/room.js29
-rw-r--r--public/js/lib/views/room/userlist.js29
-rw-r--r--public/js/lib/ws.js2
-rw-r--r--public/js/vendor/util.js1
-rw-r--r--public/js/vendor/view/router.js12
-rw-r--r--server/index.js13
-rw-r--r--server/ws.js7
-rw-r--r--views/pages/room.ejs9
-rw-r--r--views/partials/login.ejs6
-rw-r--r--views/partials/scripts.ejs49
18 files changed, 237 insertions, 127 deletions
diff --git a/public/css/solarized.css b/public/css/solarized.css
new file mode 100644
index 0000000..5b4d449
--- /dev/null
+++ b/public/css/solarized.css
@@ -0,0 +1,31 @@
+/* using these again for historical purposes.. */
+
+.base03 { color: #002b36 }
+.base02 { color: #073642 }
+.base01 { color: #586e75 }
+.base00 { color: #657b83 }
+.base0 { color: #839496 }
+.base1 { color: #93a1a1 }
+.base2 { color: #eee8d5 }
+.base3 { color: #fdf6e3 }
+
+.yellow { color: #b58900 }
+.orange { color: #cb4b16 }
+.red { color: #dc322f }
+.magenta { color: #d33682 }
+.violet { color: #6c71c4 }
+.blue { color: #268bd2 }
+.cyan { color: #2aa198 }
+.green { color: #859900 }
+
+.dark .fg { color: #839496 }
+.dark .bg { color: #002b36 }
+.dark .hl { color: #073642 }
+.dark .emph { color: #93a1a1 }
+.dark .comment { color: #586e75 }
+
+.light .fg { color: #657b83 }
+.light .bg { color: #fdf6e3 }
+.light .hl { color: #eee8d5 }
+.light .emph { color: #586e75 }
+.light .comment { color: #93a1a1 } \ No newline at end of file
diff --git a/public/js/index.js b/public/js/index.js
index 6e171fc..f46c1ac 100644
--- a/public/js/index.js
+++ b/public/js/index.js
@@ -5,6 +5,7 @@ var app = (function(){
user.init()
app.router = new SiteRouter ()
+ app.view = null
$(window).on("focus", app.focus)
$(window).on("blur", app.blur)
@@ -21,4 +22,6 @@ var app = (function(){
}
document.addEventListener('DOMContentLoaded', app.init)
+
+ return app
})()
diff --git a/public/js/lib/video.js b/public/js/lib/video.js
index 2eb5c82..aa01d23 100644
--- a/public/js/lib/video.js
+++ b/public/js/lib/video.js
@@ -1,12 +1,16 @@
-var video = (function(){
- var video = {}
- var mx
-
- video.init = function(media){
- video.build()
- }
+var VideoView = View.extend({
+
+ events: {
+ },
+
+ initialize: function(media){
+ this.media = media
+ this.mx
+ this.build(media)
+ },
- video.build = function(media){
+ build: function(media){
+ var mxType
switch (media.type) {
case 'video':
mxType = MX.Video
@@ -21,71 +25,71 @@ var video = (function(){
if (app.muted) {
media.mute = true
}
- mx = new mxType({
+ this.mx = new mxType({
media: media,
backface: false,
})
- video.el.innerHTML = ""
- video.el.appendChild(mx.el)
+ this.el.innerHTML = ""
+ this.el.appendChild(this.mx.el)
- mx.load()
- }
+ this.mx.load()
+ },
- video.play = function(){
- mx.play()
- }
+ play: function(){
+ this.mx.play()
+ },
- video.pause = function(){
- mx.pause()
- }
+ pause: function(){
+ this.mx.pause()
+ },
- video.toggle = function(shouldPause){
+ toggle: function(shouldPause){
if (typeof shouldPause !== "boolean") {
- shouldPause = ! mx.paused
+ shouldPause = ! this.mx.paused
}
- shouldPause ? mx.pause() : mx.play()
+ shouldPause ? this.mx.pause() : this.mx.play()
return shouldPause
- }
+ },
- video.toggleMuted = function(shouldMute){
+ toggleMuted: function(shouldMute){
if (typeof shouldMute !== "boolean") {
- shouldMute = ! mx.muted
+ shouldMute = ! this.mx.muted
}
- shouldMute ? mx.mute() : mx.unmute()
+ shouldMute ? this.mx.mute() : this.mx.unmute()
return shouldMute
- }
+ },
- video.paused = function(){
- return mx.paused
- }
+ paused: function(){
+ return this.mx.paused
+ },
- video.muted = function(){
- return mx.muted
- }
+ muted: function(){
+ return this.mx.muted
+ },
- video.seek = function(n){
- mx.seek(n)
- }
+ seek: function(n){
+ this.mx.seek(n)
+ },
- video.setLoop = function(shouldLoop){
- mx.setLoop(shouldLoop)
- }
+ setLoop: function(shouldLoop){
+ this.mx.setLoop(shouldLoop)
+ },
- video.mute = function(muted){
+ mute: function(muted){
if (muted) {
- mx.mute()
+ this.mx.mute()
}
else {
- mx.unmute()
+ this.mx.unmute()
}
- }
+ },
- video.unmute = function(){
- mx.unmute()
- }
+ unmute: function(){
+ this.mx.unmute()
+ },
- video.setVolume = function(n){
- mx.setVolume(n)
+ setVolume: function(n){
+ this.mx.setVolume(n)
}
-})()
+})
diff --git a/public/js/lib/views/index.js b/public/js/lib/views/index.js
index d5ec35d..a333b45 100644
--- a/public/js/lib/views/index.js
+++ b/public/js/lib/views/index.js
@@ -1,9 +1,9 @@
+var lobby, room
+
var SiteRouter = Router.extend({
+
el: "body",
- events: {
- },
-
routes: {
"/": 'lobby',
"/v/:name": 'room',
@@ -11,7 +11,7 @@ var SiteRouter = Router.extend({
initialize: function(){
if (! user.username) {
- $("#login").show()
+ app.view = new LoginView()
}
else {
this.route()
@@ -19,11 +19,12 @@ var SiteRouter = Router.extend({
},
lobby: function(){
- this.view = new LobbyView ()
+ lobby = app.view = new LobbyView ()
},
room: function(name){
- this.view = new RoomView (name)
+ console.log("hi")
+ room = app.view = new RoomView (name)
},
}) \ No newline at end of file
diff --git a/public/js/lib/views/lobby/index.js b/public/js/lib/views/lobby/lobby.js
index 0306445..6821436 100644
--- a/public/js/lib/views/lobby/index.js
+++ b/public/js/lib/views/lobby/lobby.js
@@ -1,17 +1,23 @@
var LobbyView = View.extend({
+ el: "#lobby",
+
events: {
- "form submit": "join"
+ "submit form": "join"
},
initialize: function(){
this.$createRoom = this.$("#create-room")
},
- join: function(){
+ join: function(e){
+ console.log("hwat")
+ e && e.preventDefault()
var name = this.$createRoom.sanitizeName()
+ console.log("name")
+
if (! name) { return }
window.location.href = "/v/" + name
}
-}) \ No newline at end of file
+})
diff --git a/public/js/lib/views/login.js b/public/js/lib/views/login.js
index 325d22d..280f051 100644
--- a/public/js/lib/views/login.js
+++ b/public/js/lib/views/login.js
@@ -1,12 +1,16 @@
var LoginView = View.extend({
+
el: "#login",
events: {
- "form submit": "save",
+ "submit form": "save",
},
initialize: function(){
this.$el.show()
+ this.$username = this.$("#username")
+ this.$username.focus()
+ console.log(this.$username)
},
save: function(e){
diff --git a/public/js/lib/chat.js b/public/js/lib/views/room/chat.js
index 0968418..0932e47 100644
--- a/public/js/lib/chat.js
+++ b/public/js/lib/views/room/chat.js
@@ -1,36 +1,50 @@
var ChatView = View.extend({
- template: $("#collaborator-template").html(),
+ el: "#chat",
+
+ template: $("#message_template").html(),
events: {
"submit form": "send",
"scroll #messages": "scroll",
},
- initialize: function(){
- this.$msg = this.$("#message")
+ initialize: function(socket){
+ var $msg = this.$msg = this.$("#message")
this.$messages = this.$("#messages")
this.messages = this.$messages.get(0)
+ this.$msg.focus()
+ $(window).focus(function(){ $msg.focus() })
},
+ seen: {},
add: function(msg){
+ var key = msg.date + "_" + msg.nick
+ if (key in this.seen) return
+ this.seen[key] = true
+
var $el = $( this.template )
- $el.find(".nick").html(msg.nick)
- $el.find(".msg").html(msg.msg)
+ $el.find(".nick").html(sanitize(msg.nick))
+ $el.find(".msg").html(sanitizeHTML(msg.msg))
this.$messages.append($el)
if (! this.scrolled) {
this.scrollToBottom()
}
},
- send: function(){
+ send: function(e){
+ e && e.preventDefault()
var val = this.$msg.sanitize()
+ this.$msg.focus()
if (! val) return
+ this.$msg.val("")
var msg = {}
- msg.room = room.name()
+ msg.room = room.name
msg.msg = val
msg.nick = user.username
- // app.socket.send("message", msg)
+ msg.date = +new Date
+ this.add(msg)
+ app.socket.emit("message", msg)
},
empty: function(){
diff --git a/public/js/lib/views/room/index.js b/public/js/lib/views/room/index.js
deleted file mode 100644
index 58d7449..0000000
--- a/public/js/lib/views/room/index.js
+++ /dev/null
@@ -1,10 +0,0 @@
-var RoomView = View.extend({
-
- events: {
- },
-
- initialize: function(name){
- app.socket = ws.connect(name)
- }
-
-}) \ No newline at end of file
diff --git a/public/js/lib/views/room/room.js b/public/js/lib/views/room/room.js
new file mode 100644
index 0000000..13f08ce
--- /dev/null
+++ b/public/js/lib/views/room/room.js
@@ -0,0 +1,29 @@
+var RoomView = View.extend({
+
+ events: {
+ },
+
+ initialize: function(name){
+
+ app.socket = ws.connect(name)
+
+ var base = this
+ this.name = name
+ this.chatView = new ChatView (socket)
+ this.userlist = new UserlistView (socket)
+
+ app.socket.emit("join", { nick: user.username })
+
+ app.socket.on("welcome", function(room){
+ room.messages.forEach(base.chat.add)
+ base.userlist.users = room.users
+ base.userlist.update()
+ })
+
+ app.socket.on("message", function(msg){
+ base.chat.add(msg)
+ })
+
+ }
+
+}) \ No newline at end of file
diff --git a/public/js/lib/views/room/userlist.js b/public/js/lib/views/room/userlist.js
new file mode 100644
index 0000000..600f647
--- /dev/null
+++ b/public/js/lib/views/room/userlist.js
@@ -0,0 +1,29 @@
+var UserlistView = View.extend({
+
+ el: "#userlist",
+
+ events: {
+ },
+
+ users: {},
+ initialize: function(socket){
+ var base = this
+ app.socket.on("joined", function(data){
+ base.users[data.nick] = true
+ base.update()
+ })
+ app.socket.on("parted", function(data){
+ delete base.users[data.nick]
+ base.update()
+ })
+ },
+
+ update: function(){
+ base.el.empty()
+ Object.keys(base.users).sort().forEach(function(nick){
+ var el = document.createElement("div")
+ base.el.appendChild(el)
+ })
+ },
+
+}) \ No newline at end of file
diff --git a/public/js/lib/ws.js b/public/js/lib/ws.js
index 3d62ef0..7d784ba 100644
--- a/public/js/lib/ws.js
+++ b/public/js/lib/ws.js
@@ -2,7 +2,7 @@ var ws = (function(){
var ws = {}
var socket, ready
ws.connect = function (room) {
- if (this.socket) return;
+ if (ws.socket) return;
var path = window.location.origin + '/' + room
diff --git a/public/js/vendor/util.js b/public/js/vendor/util.js
index 73a25ad..3637f49 100644
--- a/public/js/vendor/util.js
+++ b/public/js/vendor/util.js
@@ -14,6 +14,7 @@ function trim (s){ return s.replace(/^\s+/,"").replace(/\s+$/,"") }
function sanitize (s){ return (s || "").replace(new RegExp("[<>&]", 'g'), "") }
function sanitizeName (s){ return (s || "").replace(new RegExp("[^-_a-zA-Z0-9]", 'g'), "") }
function stripHTML (s){ return (s || "").replace(/<[^>]+>/g, "") }
+function sanitizeHTML (s){ return (s || "").replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;") }
function capitalize (s){ return s.split(" ").map(capitalizeWord).join(" ") }
function capitalizeWord (s){ return s.charAt(0).toUpperCase() + s.slice(1) }
function slugify (s){ return (s || "").toLowerCase().replace(/\s/g,"-").replace(/[^-_a-zA-Z0-9]/g, '-').replace(/-+/g,"-") }
diff --git a/public/js/vendor/view/router.js b/public/js/vendor/view/router.js
index 28905b2..ac2b5d4 100644
--- a/public/js/vendor/view/router.js
+++ b/public/js/vendor/view/router.js
@@ -15,7 +15,7 @@ var Router = View.extend({
}
if (pathname in routes) {
- this[this.routes[pathname]](null)
+ this[this.routes[pathname]]()
return
}
@@ -27,27 +27,27 @@ var Router = View.extend({
var routePath = route.split("/")
if (routePath[1] == path[1]) {
if (routePath[2] && routePath[2].indexOf(":") !== -1 && path[2] && (path[3] === routePath[3]) ) {
- this[this.routes[route]](null, path[2])
+ this[this.routes[route]](path[2])
return
}
else if (routePath[2] == path[2]) {
if (routePath[3] && path[3]) {
if (routePath[3].indexOf(":") !== -1) {
- this[this.routes[route]](null, path[3])
+ this[this.routes[route]](path[3])
return
}
else if (routePath[3] == path[3]) {
- this[this.routes[route]](null)
+ this[this.routes[route]]()
return
}
}
else if (! routePath[3] && ! path[3]) {
- this[this.routes[route]](null)
+ this[this.routes[route]]()
return
}
}
else if (! routePath[2] && (! path[2].length || ! path[2])) {
- this[this.routes[route]](null)
+ this[this.routes[route]]()
return
}
}
diff --git a/server/index.js b/server/index.js
index 1843ae0..96bca33 100644
--- a/server/index.js
+++ b/server/index.js
@@ -13,8 +13,6 @@ var http = require('http'),
ws = require("./ws"),
util = require("./util");
-var websocket = require('./websocket')
-
var app = express()
var server, io
@@ -33,15 +31,6 @@ app.use(express.query())
// app.use(require('express-error-handler'))
// }
-server = http.createServer(app)
-server.listen(app.get('port'), function () {
- console.log('asdf-yt server listening on port ' + app.get('port'));
-})
-
-var io = websocket.init(server)
-
-var rooms = {}
-
app.all('*', function(req, res, next){
res.locals.config = config
next()
@@ -65,4 +54,4 @@ server.listen(app.get('port'), function () {
console.log('asdf-yt server listening on port ' + app.get('port'));
})
-ws.listen(server)
+var io = ws.listen(server)
diff --git a/server/ws.js b/server/ws.js
index 5819b94..92c7d5a 100644
--- a/server/ws.js
+++ b/server/ws.js
@@ -11,10 +11,12 @@ ws.listen = function(app){
ws.add = function(name){
if (name in rooms) { return }
var room = rooms[name] = {}
+ var messages = room.messages = []
room.users = {}
sockets = {}
+ console.log("new room >> " + name)
- var ns = base.io.of('/' + name)
+ var ns = ws.io.of('/' + name)
ns.on('connection', function(socket){
@@ -27,6 +29,8 @@ ws.add = function(name){
sockets[nick].disconnect()
sockets[nick] = socket
room.users[nick] = true
+ socket.emit("welcome", room)
+ ns.emit('joined', data)
}
})
@@ -39,6 +43,7 @@ ws.add = function(name){
socket.on('disconnect', function(){
delete sockets[nick]
delete room.users[nick]
+ ns.emit('parted', {nick:nick})
})
})
diff --git a/views/pages/room.ejs b/views/pages/room.ejs
index a457216..29fb027 100644
--- a/views/pages/room.ejs
+++ b/views/pages/room.ejs
@@ -13,15 +13,12 @@
<div id="chat">
<div id="messages"></div>
- <form>
- <input type="text" id="message">
+ <form autocomplete="off">
+ <input type="text" id="message" autocomplete="off">
</form>
</div>
-<div id="login">
- please enter your nick..<br>
- <input type="text" id="username">
-</div>
+<% include ../partials/login %>
<script type="text/html" id="message_template">
<div class="row">
diff --git a/views/partials/login.ejs b/views/partials/login.ejs
new file mode 100644
index 0000000..0c2dc74
--- /dev/null
+++ b/views/partials/login.ejs
@@ -0,0 +1,6 @@
+<div id="login">
+ <form>
+ please enter your nick..<br>
+ <input type="text" id="username">
+ </form>
+</div> \ No newline at end of file
diff --git a/views/partials/scripts.ejs b/views/partials/scripts.ejs
index d67bdc0..d3a8c82 100644
--- a/views/partials/scripts.ejs
+++ b/views/partials/scripts.ejs
@@ -1,27 +1,28 @@
-<script src="//[[- config.host ]]/socket.io/socket.io.js"></script>
-<script src="js/vendor/zepto.min.js"></script>
-<script src="js/vendor/lodash.min.js"></script>
-<script src="js/vendor/mx/mx.js"></script>
-<script src="js/vendor/mx/mx.soundcloud.js"></script>
-<script src="js/vendor/mx/mx.video.js"></script>
-<script src="js/vendor/mx/mx.vimeo.js"></script>
-<script src="js/vendor/mx/mx.youtube.js"></script>
-<script src="js/vendor/oktween.js"></script>
-<script src="js/vendor/parser.js"></script>
-<script src="js/vendor/util.js"></script>
-<script src="js/vendor/view/view.js"></script>
-<script src="js/vendor/view/formview.js"></script>
-<script src="js/vendor/view/router.js"></script>
-<script src="js/lib/bg.js"></script>
-<script src="js/lib/chat.js"></script>
-<script src="js/lib/user.js"></script>
-<script src="js/lib/video.js"></script>
-<script src="js/lib/ws.js"></script>
-<script src="js/lib/views/room/index.js"></script>
-<script src="js/lib/views/lobby/index.js"></script>
-<script src="js/lib/views/login.js"></script>
-<script src="js/lib/views/index.js"></script>
-<script src="js/index.js"></script>
+<script src="//<%- config.host %>/socket.io/socket.io.js"></script>
+<script src="/js/vendor/zepto.min.js"></script>
+<script src="/js/vendor/lodash.min.js"></script>
+<script src="/js/vendor/mx/mx.js"></script>
+<script src="/js/vendor/mx/mx.soundcloud.js"></script>
+<script src="/js/vendor/mx/mx.video.js"></script>
+<script src="/js/vendor/mx/mx.vimeo.js"></script>
+<script src="/js/vendor/mx/mx.youtube.js"></script>
+<script src="/js/vendor/oktween.js"></script>
+<script src="/js/vendor/parser.js"></script>
+<script src="/js/vendor/util.js"></script>
+<script src="/js/vendor/view/view.js"></script>
+<script src="/js/vendor/view/formview.js"></script>
+<script src="/js/vendor/view/router.js"></script>
+<script src="/js/lib/bg.js"></script>
+<script src="/js/lib/user.js"></script>
+<script src="/js/lib/video.js"></script>
+<script src="/js/lib/ws.js"></script>
+<script src="/js/lib/views/room/room.js"></script>
+<script src="/js/lib/views/room/chat.js"></script>
+<script src="/js/lib/views/room/userlist.js"></script>
+<script src="/js/lib/views/lobby/lobby.js"></script>
+<script src="/js/lib/views/login.js"></script>
+<script src="/js/lib/views/index.js"></script>
+<script src="/js/index.js"></script>
<!--
<script type="text/javascript" src="http://www.youtube.com/player_api"></script>
generated by cgit v1.2.3-70-g09d2 (git 2.51.0) at 2025-12-10 04:08:53 +0000