diff --git a/app/assets/javascripts/lib/simplewebrtc.bundle.js b/app/assets/javascripts/lib/simplewebrtc.bundle.js index 2a645420..85930d1f 100644 --- a/app/assets/javascripts/lib/simplewebrtc.bundle.js +++ b/app/assets/javascripts/lib/simplewebrtc.bundle.js @@ -465,7 +465,7 @@ module.exports = SimpleWebRTC; },{"./socketioconnection":2,"attachmediastream":6,"mockconsole":7,"webrtc":4,"webrtcsupport":5,"wildemitter":3}],3:[function(require,module,exports){ /* -WildEmitter.js is a slim little event emitter by @henrikjoreteg largely based +WildEmitter.js is a slim little event emitter by @henrikjoreteg largely based on @visionmedia's Emitter from UI Kit. Why? I wanted it standalone. @@ -473,14 +473,14 @@ Why? I wanted it standalone. I also wanted support for wildcard emitters like this: emitter.on('*', function (eventName, other, event, payloads) { - + }); emitter.on('somenamespace*', function (eventName, payloads) { - + }); -Please note that callbacks triggered by wildcard registered events also get +Please note that callbacks triggered by wildcard registered events also get the event name as the first argument. */ module.exports = WildEmitter; @@ -2384,7 +2384,7 @@ var io = ('undefined' === typeof module ? {} : module.exports); } else if (xhr.status == 403) { self.onError(xhr.responseText); } else { - self.connecting = false; + self.connecting = false; !self.reconnecting && self.onError(xhr.responseText); } } @@ -2428,7 +2428,7 @@ var io = ('undefined' === typeof module ? {} : module.exports); var self = this; self.connecting = true; - + this.handshake(function (sid, heartbeat, close, transports) { self.sessionid = sid; self.closeTimeout = close * 1000; @@ -2550,7 +2550,7 @@ var io = ('undefined' === typeof module ? {} : module.exports); this.transport.payload(this.buffer); this.buffer = []; }; - + /** * Disconnect the established connect. @@ -2610,7 +2610,7 @@ var io = ('undefined' === typeof module ? {} : module.exports); var port = global.location.port || ('https:' == global.location.protocol ? 443 : 80); - return this.options.host !== global.location.hostname + return this.options.host !== global.location.hostname || this.options.port != port; }; @@ -2891,7 +2891,7 @@ var io = ('undefined' === typeof module ? {} : module.exports); * * @api public */ - + SocketNamespace.prototype.emit = function (name) { var args = Array.prototype.slice.call(arguments, 1) , lastArg = args[args.length - 1] @@ -3129,8 +3129,8 @@ var io = ('undefined' === typeof module ? {} : module.exports); * @api public */ - // Do to a bug in the current IDevices browser, we need to wrap the send in a - // setTimeout, when they resume from sleeping the browser will crash if + // Do to a bug in the current IDevices browser, we need to wrap the send in a + // setTimeout, when they resume from sleeping the browser will crash if // we don't allow the browser time to detect the socket has been closed if (io.util.ua.iDevice) { WS.prototype.send = function (data) { @@ -3276,8 +3276,8 @@ var io = ('undefined' === typeof module ? {} : module.exports); Flashsocket.prototype.name = 'flashsocket'; /** - * Disconnect the established `FlashSocket` connection. This is done by adding a - * new task to the FlashSocket. The rest will be handled off by the `WebSocket` + * Disconnect the established `FlashSocket` connection. This is done by adding a + * new task to the FlashSocket. The rest will be handled off by the `WebSocket` * transport. * * @returns {Transport} @@ -3293,10 +3293,10 @@ var io = ('undefined' === typeof module ? {} : module.exports); }); return this; }; - + /** * Sends a message to the Socket.IO server. This is done by adding a new - * task to the FlashSocket. The rest will be handled off by the `WebSocket` + * task to the FlashSocket. The rest will be handled off by the `WebSocket` * transport. * * @returns {Transport} @@ -3390,7 +3390,7 @@ var io = ('undefined' === typeof module ? {} : module.exports); }; /** - * Check if the FlashSocket transport can be used as cross domain / cross origin + * Check if the FlashSocket transport can be used as cross domain / cross origin * transport. Because we can't see which type (secure or insecure) of .swf is used * we will just return true. * @@ -3421,8 +3421,8 @@ var io = ('undefined' === typeof module ? {} : module.exports); 'undefined' != typeof io ? io.Transport : module.exports , 'undefined' != typeof io ? io : module.parent.exports ); -/* SWFObject v2.2 - is released under the MIT License +/* SWFObject v2.2 + is released under the MIT License */ if ('undefined' != typeof window) { var swfobject=function(){var D="undefined",r="object",S="Shockwave Flash",W="ShockwaveFlash.ShockwaveFlash",q="application/x-shockwave-flash",R="SWFObjectExprInst",x="onreadystatechange",O=window,j=document,t=navigator,T=false,U=[h],o=[],N=[],I=[],l,Q,E,B,J=false,a=false,n,G,m=true,M=function(){var aa=typeof j.getElementById!=D&&typeof j.getElementsByTagName!=D&&typeof j.createElement!=D,ah=t.userAgent.toLowerCase(),Y=t.platform.toLowerCase(),ae=Y?/win/.test(Y):/win/.test(ah),ac=Y?/mac/.test(Y):/mac/.test(ah),af=/webkit/.test(ah)?parseFloat(ah.replace(/^.*webkit\/(\d+(\.\d+)?).*$/,"$1")):false,X=!+"\v1",ag=[0,0,0],ab=null;if(typeof t.plugins!=D&&typeof t.plugins[S]==r){ab=t.plugins[S].description;if(ab&&!(typeof t.mimeTypes!=D&&t.mimeTypes[q]&&!t.mimeTypes[q].enabledPlugin)){T=true;X=false;ab=ab.replace(/^.*\s+(\S+\s+\S+$)/,"$1");ag[0]=parseInt(ab.replace(/^(.*)\..*$/,"$1"),10);ag[1]=parseInt(ab.replace(/^.*\.(.*)\s.*$/,"$1"),10);ag[2]=/[a-zA-Z]/.test(ab)?parseInt(ab.replace(/^.*[a-zA-Z]+(.*)$/,"$1"),10):0}}else{if(typeof O[(['Active'].concat('Object').join('X'))]!=D){try{var ad=new window[(['Active'].concat('Object').join('X'))](W);if(ad){ab=ad.GetVariable("$version");if(ab){X=true;ab=ab.split(" ")[1].split(",");ag=[parseInt(ab[0],10),parseInt(ab[1],10),parseInt(ab[2],10)]}}}catch(Z){}}}return{w3:aa,pv:ag,wk:af,ie:X,win:ae,mac:ac}}(),k=function(){if(!M.w3){return}if((typeof j.readyState!=D&&j.readyState=="complete")||(typeof j.readyState==D&&(j.getElementsByTagName("body")[0]||j.body))){f()}if(!J){if(typeof j.addEventListener!=D){j.addEventListener("DOMContentLoaded",f,false)}if(M.ie&&M.win){j.attachEvent(x,function(){if(j.readyState=="complete"){j.detachEvent(x,arguments.callee);f()}});if(O==top){(function(){if(J){return}try{j.documentElement.doScroll("left")}catch(X){setTimeout(arguments.callee,0);return}f()})()}}if(M.wk){(function(){if(J){return}if(!/loaded|complete/.test(j.readyState)){setTimeout(arguments.callee,0);return}f()})()}s(f)}}();function f(){if(J){return}try{var Z=j.getElementsByTagName("body")[0].appendChild(C("span"));Z.parentNode.removeChild(Z)}catch(aa){return}J=true;var X=U.length;for(var Y=0;Y0){for(var af=0;af0){var ae=c(Y);if(ae){if(F(o[af].swfVersion)&&!(M.wk&&M.wk<312)){w(Y,true);if(ab){aa.success=true;aa.ref=z(Y);ab(aa)}}else{if(o[af].expressInstall&&A()){var ai={};ai.data=o[af].expressInstall;ai.width=ae.getAttribute("width")||"0";ai.height=ae.getAttribute("height")||"0";if(ae.getAttribute("class")){ai.styleclass=ae.getAttribute("class")}if(ae.getAttribute("align")){ai.align=ae.getAttribute("align")}var ah={};var X=ae.getElementsByTagName("param");var ac=X.length;for(var ad=0;ad'}}aa.outerHTML='"+af+"";N[N.length]=ai.id;X=c(ai.id)}else{var Z=C(r);Z.setAttribute("type",q);for(var ac in ai){if(ai[ac]!=Object.prototype[ac]){if(ac.toLowerCase()=="styleclass"){Z.setAttribute("class",ai[ac])}else{if(ac.toLowerCase()!="classid"){Z.setAttribute(ac,ai[ac])}}}}for(var ab in ag){if(ag[ab]!=Object.prototype[ab]&&ab.toLowerCase()!="movie"){e(Z,ab,ag[ab])}}aa.parentNode.replaceChild(Z,aa);X=Z}}return X}function e(Z,X,Y){var aa=C("param");aa.setAttribute("name",X);aa.setAttribute("value",Y);Z.appendChild(aa)}function y(Y){var X=c(Y);if(X&&X.nodeName=="OBJECT"){if(M.ie&&M.win){X.style.display="none";(function(){if(X.readyState==4){b(Y)}else{setTimeout(arguments.callee,10)}})()}else{X.parentNode.removeChild(X)}}}function b(Z){var Y=c(Z);if(Y){for(var X in Y){if(typeof Y[X]=="function"){Y[X]=null}}Y.parentNode.removeChild(Y)}}function c(Z){var X=null;try{X=j.getElementById(Z)}catch(Y){}return X}function C(X){return j.createElement(X)}function i(Z,X,Y){Z.attachEvent(X,Y);I[I.length]=[Z,X,Y]}function F(Z){var Y=M.pv,X=Z.split(".");X[0]=parseInt(X[0],10);X[1]=parseInt(X[1],10)||0;X[2]=parseInt(X[2],10)||0;return(Y[0]>X[0]||(Y[0]==X[0]&&Y[1]>X[1])||(Y[0]==X[0]&&Y[1]==X[1]&&Y[2]>=X[2]))?true:false}function v(ac,Y,ad,ab){if(M.ie&&M.mac){return}var aa=j.getElementsByTagName("head")[0];if(!aa){return}var X=(ad&&typeof ad=="string")?ad:"screen";if(ab){n=null;G=null}if(!n||G!=X){var Z=C("style");Z.setAttribute("type","text/css");Z.setAttribute("media",X);n=aa.appendChild(Z);if(M.ie&&M.win&&typeof j.styleSheets!=D&&j.styleSheets.length>0){n=j.styleSheets[j.styleSheets.length-1]}G=X}if(M.ie&&M.win){if(n&&typeof n.addRule==r){n.addRule(ac,Y)}}else{if(n&&typeof j.createTextNode!=D){n.appendChild(j.createTextNode(ac+" {"+Y+"}"))}}}function w(Z,X){if(!m){return}var Y=X?"visible":"hidden";if(J&&c(Z)){c(Z).style.visibility=Y}else{v("#"+Z,"visibility:"+Y)}}function L(Y){var Z=/[\\\"<>\.;]/;var X=Z.exec(Y)!=null;return X&&typeof encodeURIComponent!=D?encodeURIComponent(Y):Y}var d=function(){if(M.ie&&M.win){window.attachEvent("onunload",function(){var ac=I.length;for(var ab=0;ab= 10.0.0 is required."); return; @@ -3579,7 +3579,7 @@ var swfobject=function(){var D="undefined",r="object",S="Shockwave Flash",W="Sho if ("protocol" in flashEvent) { this.protocol = flashEvent.protocol; } - + var jsEvent; if (flashEvent.type == "open" || flashEvent.type == "error") { jsEvent = this.__createSimpleEvent(flashEvent.type); @@ -3592,10 +3592,10 @@ var swfobject=function(){var D="undefined",r="object",S="Shockwave Flash",W="Sho } else { throw "unknown event type: " + flashEvent.type; } - + this.dispatchEvent(jsEvent); }; - + WebSocket.prototype.__createSimpleEvent = function(type) { if (document.createEvent && window.Event) { var event = document.createEvent("Event"); @@ -3605,7 +3605,7 @@ var swfobject=function(){var D="undefined",r="object",S="Shockwave Flash",W="Sho return {type: type, bubbles: false, cancelable: false}; } }; - + WebSocket.prototype.__createMessageEvent = function(type, data) { if (document.createEvent && window.MessageEvent && !window.opera) { var event = document.createEvent("MessageEvent"); @@ -3616,7 +3616,7 @@ var swfobject=function(){var D="undefined",r="object",S="Shockwave Flash",W="Sho return {type: type, data: data, bubbles: false, cancelable: false}; } }; - + /** * Define the WebSocket readyState enumeration. */ @@ -3629,7 +3629,7 @@ var swfobject=function(){var D="undefined",r="object",S="Shockwave Flash",W="Sho WebSocket.__instances = {}; WebSocket.__tasks = []; WebSocket.__nextId = 0; - + /** * Load a new flash security policy file. * @param {string} url @@ -3645,7 +3645,7 @@ var swfobject=function(){var D="undefined",r="object",S="Shockwave Flash",W="Sho */ WebSocket.__initialize = function() { if (WebSocket.__flash) return; - + if (WebSocket.__swfLocation) { // For backword compatibility. window.WEB_SOCKET_SWF_LOCATION = WebSocket.__swfLocation; @@ -3691,7 +3691,7 @@ var swfobject=function(){var D="undefined",r="object",S="Shockwave Flash",W="Sho } }); }; - + /** * Called by Flash to notify JS that it's fully loaded and ready * for communication. @@ -3709,7 +3709,7 @@ var swfobject=function(){var D="undefined",r="object",S="Shockwave Flash",W="Sho WebSocket.__tasks = []; }, 0); }; - + /** * Called by Flash to notify WebSockets events are fired. */ @@ -3729,17 +3729,17 @@ var swfobject=function(){var D="undefined",r="object",S="Shockwave Flash",W="Sho }, 0); return true; }; - + // Called by Flash. WebSocket.__log = function(message) { console.log(decodeURIComponent(message)); }; - + // Called by Flash. WebSocket.__error = function(message) { console.error(decodeURIComponent(message)); }; - + WebSocket.__addTask = function(task) { if (WebSocket.__flash) { task(); @@ -3747,7 +3747,7 @@ var swfobject=function(){var D="undefined",r="object",S="Shockwave Flash",W="Sho WebSocket.__tasks.push(task); } }; - + /** * Test if the browser is running flash lite. * @return {boolean} True if flash lite is running, false otherwise. @@ -3762,7 +3762,7 @@ var swfobject=function(){var D="undefined",r="object",S="Shockwave Flash",W="Sho } return mimeType.enabledPlugin.filename.match(/flashlite/i) ? true : false; }; - + if (!window.WEB_SOCKET_DISABLE_AUTO_INITIALIZATION) { if (window.addEventListener) { window.addEventListener("load", function(){ @@ -3774,7 +3774,7 @@ var swfobject=function(){var D="undefined",r="object",S="Shockwave Flash",W="Sho }); } } - + })(); /** @@ -4009,7 +4009,7 @@ var swfobject=function(){var D="undefined",r="object",S="Shockwave Flash",W="Sho /** * The HTMLFile transport creates a `forever iframe` based transport - * for Internet Explorer. Regular forever iframe implementations will + * for Internet Explorer. Regular forever iframe implementations will * continuously trigger the browsers buzy indicators. If the forever iframe * is created inside a `htmlfile` these indicators will not be trigged. * @@ -4223,7 +4223,7 @@ var swfobject=function(){var D="undefined",r="object",S="Shockwave Flash",W="Sho return false; }; - /** + /** * Establish a connection, for iPhone and Android this will be done once the page * is loaded. * @@ -4275,7 +4275,7 @@ var swfobject=function(){var D="undefined",r="object",S="Shockwave Flash",W="Sho function onerror () { self.retryCounter ++; if(!self.retryCounter || self.retryCounter > 3) { - self.onClose(); + self.onClose(); } else { self.get(); } @@ -5396,9 +5396,11 @@ function Peer(options) { this.pc = new PeerConnection(this.parent.config.peerConnectionConfig, this.parent.config.peerConnectionConstraints); this.pc.on('ice', this.onIceCandidate.bind(this)); this.pc.on('offer', function (offer) { + if (self.parent.config.nick) offer.nick = self.parent.config.nick; self.send('offer', offer); }); this.pc.on('answer', function (offer) { + if (self.parent.config.nick) offer.nick = self.parent.config.nick; self.send('answer', offer); }); this.pc.on('addStream', this.handleRemoteStreamAdded.bind(this)); @@ -5471,6 +5473,8 @@ Peer.prototype.handleMessage = function (message) { if (message.prefix) this.browserPrefix = message.prefix; if (message.type === 'offer') { + if (!this.nick) this.nick = message.payload.nick; + delete message.payload.nick; // workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=1064247 message.payload.sdp = message.payload.sdp.replace('a=fmtp:0 profile-level-id=0x42e00c;packetization-mode=1\r\n', ''); this.pc.handleOffer(message.payload, function (err) { @@ -5483,6 +5487,8 @@ Peer.prototype.handleMessage = function (message) { }); }); } else if (message.type === 'answer') { + if (!this.nick) this.nick = message.payload.nick; + delete message.payload.nick; this.pc.handleAnswer(message.payload); } else if (message.type === 'candidate') { this.pc.processIce(message.payload); @@ -5591,7 +5597,7 @@ Peer.prototype.handleRemoteStreamAdded = function (event) { } else { this.stream = event.stream; // FIXME: addEventListener('ended', ...) would be nicer - // but does not work in firefox + // but does not work in firefox this.stream.onended = function () { self.end(); }; @@ -7134,7 +7140,7 @@ module.exports = LocalMedia; } // Assume equality for cyclic structures. The algorithm for detecting cyclic // structures is adapted from ES 5.1 section 15.12.3, abstract operation `JO`. - + // Initializing stack of traversed objects. // It's done here since we only need them for objects and arrays comparison. aStack = aStack || []; @@ -7298,7 +7304,7 @@ module.exports = LocalMedia; }; }; - // Returns a predicate for checking whether an object has a given set of + // Returns a predicate for checking whether an object has a given set of // `key:value` pairs. _.matcher = _.matches = function(attrs) { attrs = _.extendOwn({}, attrs); @@ -7525,7 +7531,7 @@ module.exports = LocalMedia; // Provide unwrapping proxy for some methods used in engine operations // such as arithmetic and JSON stringification. _.prototype.valueOf = _.prototype.toJSON = _.prototype.value; - + _.prototype.toString = function() { return '' + this._wrapped; }; @@ -7763,7 +7769,7 @@ function PeerConnection(config, constraints) { this.addStream = this.pc.addStream.bind(this.pc); this.removeStream = this.pc.removeStream.bind(this.pc); - // proxy events + // proxy events this.pc.on('*', function () { self.emit.apply(self, arguments); }); @@ -7817,7 +7823,7 @@ function PeerConnection(config, constraints) { // keeping references for all our data channels // so they dont get garbage collected // can be removed once the following bugs have been fixed - // https://crbug.com/405545 + // https://crbug.com/405545 // https://bugzilla.mozilla.org/show_bug.cgi?id=964092 // to be filed for opera this._remoteDataChannels = []; @@ -8260,7 +8266,7 @@ PeerConnection.prototype._answer = function (constraints, cb) { expandedAnswer.jingle = jingle; } if (self.enableChromeNativeSimulcast) { - // native simulcast part 2: + // native simulcast part 2: // signal multiple tracks to the receiver // for anything in the SIM group if (!expandedAnswer.jingle) { @@ -8368,7 +8374,7 @@ PeerConnection.prototype._onIce = function (event) { if (!contents[content.name]) contents[content.name] = content; contents[content.name].transport.candidates.push(content.transport.candidates[0]); }); - var newCand = { + var newCand = { jingle: { contents: [] } @@ -8770,7 +8776,7 @@ module.exports = function(stream, options) { harker.setInterval = function(i) { interval = i; }; - + harker.stop = function() { running = false; harker.emit('volume_change', -100, threshold); @@ -8788,12 +8794,12 @@ module.exports = function(stream, options) { // and emit events if changed var looper = function() { setTimeout(function() { - + //check if stop has been called if(!running) { return; } - + var currentVolume = getMaxVolume(analyser, fftBins); harker.emit('volume_change', currentVolume, threshold); @@ -9799,4 +9805,4 @@ module.exports = TraceablePeerConnection; },{"util":9,"webrtcsupport":5,"wildemitter":3}]},{},[1])(1) }); -; \ No newline at end of file +; diff --git a/app/assets/javascripts/src/Metamaps.js.erb b/app/assets/javascripts/src/Metamaps.js.erb index 77d24474..19079adb 100644 --- a/app/assets/javascripts/src/Metamaps.js.erb +++ b/app/assets/javascripts/src/Metamaps.js.erb @@ -1962,7 +1962,8 @@ Metamaps.Realtime = { media: { video: true, audio: true - } + }, + nick: Metamaps.Active.Mapper.id }); self.webrtc.on('readyToCall', function () { console.log('readyToCall'); @@ -1972,7 +1973,8 @@ Metamaps.Realtime = { $('#wrapper').append(self.localVideo.view.$container); } self.socket.emit('videoAdded', { - avatar: Metamaps.Active.Mapper.get('image') + avatar: Metamaps.Active.Mapper.get('image'), + username: Metamaps.Active.Mapper.get('name') }); self.webrtc.webrtc.peers.forEach(function (p) { p.pc.addStream(self.webrtc.webrtc.localStream); @@ -2061,6 +2063,9 @@ Metamaps.Realtime = { for (id in roomDesc.avatars) { self.webrtc.webrtc.peers.find(function(p) { return p.id === id; }).avatar = roomDesc.avatars[id]; } + for (id in roomDesc.usernames) { + self.webrtc.webrtc.peers.find(function(p) { return p.id === id; }).username = roomDesc.usernames[id]; + } function addVideo(v) { // random position for now diff --git a/app/assets/javascripts/src/views/room.js b/app/assets/javascripts/src/views/room.js index de920fc3..acb0b250 100644 --- a/app/assets/javascripts/src/views/room.js +++ b/app/assets/javascripts/src/views/room.js @@ -67,6 +67,10 @@ Metamaps.Views.room = (function () { this.webrtc.webrtc.off('peerStreamAdded'); this.webrtc.webrtc.off('peerStreamRemoved'); this.webrtc.on('peerStreamAdded', function (peer) { + var mapper = Metamaps.Realtime.mappersOnMap[peer.nick]; + peer.avatar = mapper.image; + peer.username = mapper.name; + console.log(peer); if (self.isActiveRoom) { self.addVideo(peer); } @@ -119,10 +123,12 @@ Metamaps.Views.room = (function () { } } }); + console.log(data); peer.avatar = data.avatar; + peer.username = data.username; self.webrtc.emit('createdPeer', peer); peer.start(); - + // the rest will happen automatically through the 'peerStreamAdded' event and associated event handlers } }); @@ -141,7 +147,10 @@ Metamaps.Views.room = (function () { var id = this.webrtc.getDomId(peer), video = attachMediaStream(peer.stream); - v = new VideoView(video, null, id, false, { DOUBLE_CLICK_TOLERANCE: 200, avatar: peer.avatar }); + + $(video).prop('muted', true); // until the viewer accepts the viewing + var + v = new VideoView(video, null, id, false, { DOUBLE_CLICK_TOLERANCE: 200, avatar: peer.avatar, username: peer.username }); if (this._videoAdded) this._videoAdded(v); this.videos[peer.id] = v; @@ -150,8 +159,10 @@ Metamaps.Views.room = (function () { room.prototype.removeVideo = function (peer) { console.log('removeVideo', peer); var id = typeof peer == 'string' ? peer : peer.id; - this.videos[id].remove(); - delete this.videos[id]; + if (this.videos[id]) { + this.videos[id].remove(); + delete this.videos[id]; + } } room.prototype.sendChatMessage = function (data) { @@ -183,4 +194,4 @@ Metamaps.Views.room = (function () { }; return room; -})(); \ No newline at end of file +})(); diff --git a/app/assets/javascripts/src/views/videoView.js b/app/assets/javascripts/src/views/videoView.js index 7f35dee8..25229cf6 100644 --- a/app/assets/javascripts/src/views/videoView.js +++ b/app/assets/javascripts/src/views/videoView.js @@ -26,7 +26,7 @@ Metamaps.Views.videoView = (function () { this.mouseIsDown = false; if (this.hasMoved) { - + } $(document).trigger(videoView.events.dragEnd); @@ -97,6 +97,14 @@ Metamaps.Views.videoView = (function () { } this.videoStatus = !this.videoStatus; $(document).trigger(videoView.events.videoControlClick, [this]); + }, + yesReceiveClick: function () { + this.$receiveContainer.hide(); + this.$avatar.hide(); + $(this.video).prop('muted', false); + }, + noReceiveClick: function () { + this.$container.hide(); } }; @@ -121,12 +129,23 @@ Metamaps.Views.videoView = (function () { this.$container = $('
'); this.$container.addClass('collaborator-video' + (isMyself ? ' my-video' : '')); this.$container.attr('id', 'container_' + id); - + var $vidContainer = $('
'); $vidContainer.addClass('video-cutoff'); $vidContainer.append(this.video); + if (!isMyself) { + this.$receiveContainer = $('
' + config.username + ' is sharing their audio and video. Do you wish to receive it?
'); + this.$container.append(this.$receiveContainer); + this.$container.find('.btn-yes').on('click', function (event) { + Handlers.yesReceiveClick.call(self, event); + }); + this.$container.find('.btn-no').on('click', function (event) { + Handlers.noReceiveClick.call(self, event); + }); + } + this.avatar = config.avatar; this.$avatar = $(''); $vidContainer.append(this.$avatar); @@ -137,14 +156,17 @@ Metamaps.Views.videoView = (function () { Handlers.mousedown.call(self, event); }); - if (isMyself) Private.addControls.call(this); + if (isMyself) { + this.$avatar.hide(); + Private.addControls.call(this); + } // suppress contextmenu this.video.oncontextmenu = function () { return false; }; if (this.$parent) this.setParent(this.$parent); }; - + videoView.prototype.setParent = function($parent) { var self = this; this.$parent = $parent; @@ -184,5 +206,3 @@ Metamaps.Views.videoView = (function () { return videoView; })(); - - \ No newline at end of file diff --git a/app/assets/stylesheets/junto.css b/app/assets/stylesheets/junto.css index 6807424e..85241b84 100644 --- a/app/assets/stylesheets/junto.css +++ b/app/assets/stylesheets/junto.css @@ -6,6 +6,29 @@ cursor: default; color: #FFF; } +.collaborator-video .video-receive { + position: absolute; + width: 160px; + padding: 20px 20px 20px 170px; + background: #424242; + height: 110px; + border-top-left-radius: 75px; + border-bottom-left-radius: 75px; + border-top-right-radius: 2px; + border-bottom-right-radius: 2px; +} +.collaborator-video .video-receive .video-statement { + margin-bottom: 10px; +} +.collaborator-video .video-receive .btn-group .btn-yes { + margin-right: 10px; +} +.collaborator-video .video-receive .btn-group .btn-no { + background-color: #c04f4f; +} +.collaborator-video .video-receive .btn-group .btn-no:hover { + background-color: #A54242; +} .collaborator-video .video-cutoff { width: 150px; height: 150px; @@ -31,7 +54,6 @@ -o-user-select: none; user-select: none; -webkit-user-drag: none; - display: none; } .collaborator-video .video-audio { position: absolute; diff --git a/app/models/user.rb b/app/models/user.rb index 0969a369..a9389452 100644 --- a/app/models/user.rb +++ b/app/models/user.rb @@ -7,7 +7,7 @@ class User < ActiveRecord::Base has_many :maps has_many :mappings - before_create :generate_code + after_create :generate_code devise :database_authenticatable, :recoverable, :rememberable, :trackable, :registerable diff --git a/realtime/signal.js b/realtime/signal.js index a08d5dfa..5c27a653 100644 --- a/realtime/signal.js +++ b/realtime/signal.js @@ -10,11 +10,13 @@ module.exports = function(io, stunservers) { var clients = io.sockets.clients(name); var result = { clients: {}, - avatars: {} + avatars: {}, + usernames: {} }; clients.forEach(function (client) { result.clients[client.id] = client.resources; result.avatars[client.id] = client.avatar; + result.usernames[client.id] = client.username; }); return result; } @@ -71,9 +73,10 @@ module.exports = function(io, stunservers) { var socketsInRoom = io.sockets.clients(client.room); client.resources.video = true; client.avatar = data.avatar; + client.username = data.username; socketsInRoom.forEach(function(socket) { if (socket.id !== client.id) { - socket.emit('addVideo', { id: client.id, avatar: data.avatar }); + socket.emit('addVideo', { id: client.id, avatar: data.avatar, username: data.username }); } }); } @@ -189,4 +192,4 @@ module.exports = function(io, stunservers) { if (socket.id !== client.id && socket.profile) client.emit('presence', socket.profile); }); }); -}; \ No newline at end of file +};