initial commit
This commit is contained in:
Philipp Hancke
parent
bfd9f2f99c
commit
62530ef123
1
LICENSE
1
LICENSE
|
|
@ -1,6 +1,7 @@
|
||||||
The MIT License (MIT)
|
The MIT License (MIT)
|
||||||
|
|
||||||
Copyright (c) 2013 ESTOS GmbH
|
Copyright (c) 2013 ESTOS GmbH
|
||||||
|
Copyright (c) 2013 BlueJimp SARL
|
||||||
|
|
||||||
Permission is hereby granted, free of charge, to any person obtaining a copy of
|
Permission is hereby granted, free of charge, to any person obtaining a copy of
|
||||||
this software and associated documentation files (the "Software"), to deal in
|
this software and associated documentation files (the "Software"), to deal in
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,5 @@
|
||||||
meet
|
meet - a colibri.js sample application
|
||||||
====
|
====
|
||||||
|
A WebRTC-powered multi-user videochat. For a live demo, check out either https://meet.estos.de/ or https://meet.jit.si/.
|
||||||
|
|
||||||
colibri.js sample application
|
Built using [colibri.js](https://github.com/ESTOS/colibri.js) and [strophe.jingle](https://github.com/ESTOS/strophe.jingle), powered by the [jitsi-videobridge](https://github.com/jitsi/jitsi-videobridge) and [prosody](http://prosody.im/).
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,427 @@
|
||||||
|
/* jshint -W117 */
|
||||||
|
/* application specific logic */
|
||||||
|
var connection = null;
|
||||||
|
var focus = null;
|
||||||
|
var RTC;
|
||||||
|
var RTCPeerConnection = null;
|
||||||
|
var nickname = null;
|
||||||
|
var sharedKey = '';
|
||||||
|
var roomUrl = null;
|
||||||
|
|
||||||
|
function init() {
|
||||||
|
RTC = setupRTC();
|
||||||
|
if (RTC === null) {
|
||||||
|
window.location.href = '/webrtcrequired.html';
|
||||||
|
return;
|
||||||
|
} else if (RTC.browser != 'chrome') {
|
||||||
|
window.location.href = '/chromeonly.html';
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
RTCPeerconnection = RTC.peerconnection;
|
||||||
|
|
||||||
|
connection = new Strophe.Connection(document.getElementById('boshURL').value || config.bosh || '/http-bind');
|
||||||
|
/*
|
||||||
|
connection.rawInput = function (data) { console.log('RECV: ' + data); };
|
||||||
|
connection.rawOutput = function (data) { console.log('SEND: ' + data); };
|
||||||
|
*/
|
||||||
|
connection.jingle.pc_constraints = RTC.pc_constraints;
|
||||||
|
|
||||||
|
var jid = document.getElementById('jid').value || config.hosts.domain || window.location.hostname;
|
||||||
|
|
||||||
|
connection.connect(jid, document.getElementById('password').value, function (status) {
|
||||||
|
if (status == Strophe.Status.CONNECTED) {
|
||||||
|
console.log('connected');
|
||||||
|
getUserMediaWithConstraints(['audio', 'video'], '360');
|
||||||
|
document.getElementById('connect').disabled = true;
|
||||||
|
} else {
|
||||||
|
console.log('status', status);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function doJoin() {
|
||||||
|
var roomnode = null;
|
||||||
|
var path = window.location.pathname;
|
||||||
|
var roomjid;
|
||||||
|
if (path.length > 1) {
|
||||||
|
roomnode = path.substr(1).toLowerCase();
|
||||||
|
} else {
|
||||||
|
roomnode = Math.random().toString(36).substr(2, 20);
|
||||||
|
window.history.pushState('VideoChat', 'Room: ' + roomnode, window.location.pathname + roomnode);
|
||||||
|
}
|
||||||
|
roomjid = roomnode + '@' + config.hosts.muc;
|
||||||
|
|
||||||
|
if (config.useNicks) {
|
||||||
|
var nick = window.prompt('Your nickname (optional)');
|
||||||
|
if (nick) {
|
||||||
|
roomjid += '/' + nick;
|
||||||
|
} else {
|
||||||
|
roomjid += '/' + Strophe.getNodeFromJid(connection.jid);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
roomjid += '/' + Strophe.getNodeFromJid(connection.jid);
|
||||||
|
}
|
||||||
|
connection.emuc.doJoin(roomjid);
|
||||||
|
}
|
||||||
|
|
||||||
|
$(document).bind('mediaready.jingle', function (event, stream) {
|
||||||
|
connection.jingle.localStream = stream;
|
||||||
|
RTC.attachMediaStream($('#localVideo'), stream);
|
||||||
|
document.getElementById('localVideo').muted = true;
|
||||||
|
document.getElementById('localVideo').autoplay = true;
|
||||||
|
document.getElementById('localVideo').volume = 0;
|
||||||
|
|
||||||
|
document.getElementById('largeVideo').volume = 0;
|
||||||
|
document.getElementById('largeVideo').src = document.getElementById('localVideo').src;
|
||||||
|
doJoin();
|
||||||
|
});
|
||||||
|
|
||||||
|
$(document).bind('mediafailure.jingle', function () {
|
||||||
|
// FIXME
|
||||||
|
});
|
||||||
|
|
||||||
|
$(document).bind('remotestreamadded.jingle', function (event, data, sid) {
|
||||||
|
function waitForRemoteVideo(selector, sid) {
|
||||||
|
var sess = connection.jingle.sessions[sid];
|
||||||
|
videoTracks = data.stream.getVideoTracks();
|
||||||
|
if (videoTracks.length === 0 || selector[0].currentTime > 0) {
|
||||||
|
RTC.attachMediaStream(selector, data.stream); // FIXME: why do i have to do this for FF?
|
||||||
|
$(document).trigger('callactive.jingle', [selector, sid]);
|
||||||
|
console.log('waitForremotevideo', sess.peerconnection.iceConnectionState, sess.peerconnection.signalingState);
|
||||||
|
} else {
|
||||||
|
setTimeout(function () { waitForRemoteVideo(selector, sid); }, 100);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
var sess = connection.jingle.sessions[sid];
|
||||||
|
var vid = document.createElement('video');
|
||||||
|
var id = 'remoteVideo_' + sid + '_' + data.stream.id;
|
||||||
|
vid.id = id;
|
||||||
|
vid.autoplay = true;
|
||||||
|
vid.oncontextmenu = function () { return false; };
|
||||||
|
var remotes = document.getElementById('remoteVideos');
|
||||||
|
remotes.appendChild(vid);
|
||||||
|
var sel = $('#' + id);
|
||||||
|
sel.hide();
|
||||||
|
RTC.attachMediaStream(sel, data.stream);
|
||||||
|
waitForRemoteVideo(sel, sid);
|
||||||
|
data.stream.onended = function () {
|
||||||
|
console.log('stream ended', this.id);
|
||||||
|
var src = $('#' + id).attr('src');
|
||||||
|
$('#' + id).remove();
|
||||||
|
if (src === $('#largeVideo').attr('src')) {
|
||||||
|
// this is currently displayed as large
|
||||||
|
// pick the last visible video in the row
|
||||||
|
// if nobody else is left, this picks the local video
|
||||||
|
var pick = $('#remoteVideos :visible:last').get(0);
|
||||||
|
// mute if localvideo
|
||||||
|
document.getElementById('largeVideo').volume = pick.volume;
|
||||||
|
document.getElementById('largeVideo').src = pick.src;
|
||||||
|
}
|
||||||
|
resizeThumbnails();
|
||||||
|
};
|
||||||
|
sel.click(
|
||||||
|
function () {
|
||||||
|
console.log('hover in', $(this).attr('src'));
|
||||||
|
var newSrc = $(this).attr('src');
|
||||||
|
if ($('#largeVideo').attr('src') != newSrc) {
|
||||||
|
document.getElementById('largeVideo').volume = 1;
|
||||||
|
$('#largeVideo').fadeOut(300, function () {
|
||||||
|
$(this).attr('src', newSrc);
|
||||||
|
$(this).fadeIn(300);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
$(document).bind('callincoming.jingle', function (event, sid) {
|
||||||
|
var sess = connection.jingle.sessions[sid];
|
||||||
|
// TODO: check affiliation and/or role
|
||||||
|
console.log('emuc data for', sess.peerjid, connection.emuc.members[sess.peerjid]);
|
||||||
|
sess.sendAnswer();
|
||||||
|
sess.accept();
|
||||||
|
});
|
||||||
|
|
||||||
|
$(document).bind('callactive.jingle', function (event, videoelem, sid) {
|
||||||
|
console.log('call active');
|
||||||
|
if (videoelem.attr('id').indexOf('mixedmslabel') == -1) {
|
||||||
|
// ignore mixedmslabela0 and v0
|
||||||
|
videoelem.show();
|
||||||
|
resizeThumbnails();
|
||||||
|
|
||||||
|
document.getElementById('largeVideo').volume = 1;
|
||||||
|
$('#largeVideo').attr('src', videoelem.attr('src'));
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
$(document).bind('callterminated.jingle', function (event, sid, reason) {
|
||||||
|
// FIXME
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
$(document).bind('joined.muc', function (event, jid, info) {
|
||||||
|
console.log('onJoinComplete', info);
|
||||||
|
updateRoomUrl(window.location.href);
|
||||||
|
if (Object.keys(connection.emuc.members).length < 1) {
|
||||||
|
focus = new ColibriFocus(connection, config.hosts.bridge);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
$(document).bind('entered.muc', function (event, jid, info) {
|
||||||
|
console.log('entered', jid, info);
|
||||||
|
console.log(focus);
|
||||||
|
if (focus !== null) {
|
||||||
|
// FIXME: this should prepare the video
|
||||||
|
if (focus.confid === null) {
|
||||||
|
console.log('make new conference with', jid);
|
||||||
|
focus.makeConference(Object.keys(connection.emuc.members));
|
||||||
|
} else {
|
||||||
|
console.log('invite', jid, 'into conference');
|
||||||
|
focus.addNewParticipant(jid);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
$(document).bind('left.muc', function (event, jid) {
|
||||||
|
console.log('left', jid);
|
||||||
|
connection.jingle.terminateByJid(jid);
|
||||||
|
// FIXME: this should actually hide the video already for a nicer UX
|
||||||
|
|
||||||
|
if (Object.keys(connection.emuc.members).length === 0) {
|
||||||
|
console.log('everyone left');
|
||||||
|
if (focus !== null) {
|
||||||
|
// FIXME: closing the connection is a hack to avoid some
|
||||||
|
// problemswith reinit
|
||||||
|
if (focus.peerconnection !== null) {
|
||||||
|
focus.peerconnection.close();
|
||||||
|
}
|
||||||
|
focus = new ColibriFocus(connection, config.hosts.bridge);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
function toggleVideo() {
|
||||||
|
if (!(connection && connection.jingle.localStream)) return;
|
||||||
|
for (var idx = 0; idx < connection.jingle.localStream.getVideoTracks().length; idx++) {
|
||||||
|
connection.jingle.localStream.getVideoTracks()[idx].enabled = !connection.jingle.localStream.getVideoTracks()[idx].enabled;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function toggleAudio() {
|
||||||
|
if (!(connection && connection.jingle.localStream)) return;
|
||||||
|
for (var idx = 0; idx < connection.jingle.localStream.getAudioTracks().length; idx++) {
|
||||||
|
connection.jingle.localStream.getAudioTracks()[idx].enabled = !connection.jingle.localStream.getAudioTracks()[idx].enabled;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function resizeLarge() {
|
||||||
|
var availableHeight = window.innerHeight;
|
||||||
|
var chatspaceWidth = $('#chatspace').width();
|
||||||
|
|
||||||
|
var numvids = $('#remoteVideos>video:visible').length;
|
||||||
|
if (numvids < 5)
|
||||||
|
availableHeight -= 100; // min thumbnail height for up to 4 videos
|
||||||
|
else
|
||||||
|
availableHeight -= 50; // min thumbnail height for more than 5 videos
|
||||||
|
|
||||||
|
availableHeight -= 79; // padding + link ontop
|
||||||
|
var availableWidth = window.innerWidth - chatspaceWidth;
|
||||||
|
var aspectRatio = 16.0 / 9.0;
|
||||||
|
if (availableHeight < availableWidth / aspectRatio) {
|
||||||
|
availableWidth = Math.floor(availableHeight * aspectRatio);
|
||||||
|
}
|
||||||
|
if (availableWidth < 0 || availableHeight < 0) return;
|
||||||
|
$('#largeVideo').width(availableWidth);
|
||||||
|
$('#largeVideo').height(availableWidth / aspectRatio);
|
||||||
|
resizeThumbnails();
|
||||||
|
}
|
||||||
|
|
||||||
|
function resizeThumbnails() {
|
||||||
|
// Calculate the available height, which is the inner window height minus 39px for the header
|
||||||
|
// minus 4px for the delimiter lines on the top and bottom of the large video,
|
||||||
|
// minus the 36px space inside the remoteVideos container used for highlighting shadow.
|
||||||
|
var availableHeight = window.innerHeight - $('#largeVideo').height() - 79;
|
||||||
|
var numvids = $('#remoteVideos>video:visible').length;
|
||||||
|
// Remove the 1px borders arround videos.
|
||||||
|
var availableWinWidth = $('#remoteVideos').width() - 2 * numvids;
|
||||||
|
var availableWidth = availableWinWidth / numvids;
|
||||||
|
var aspectRatio = 16.0 / 9.0;
|
||||||
|
var maxHeight = Math.min(160, availableHeight);
|
||||||
|
availableHeight = Math.min(maxHeight, availableWidth / aspectRatio);
|
||||||
|
if (availableHeight < availableWidth / aspectRatio) {
|
||||||
|
availableWidth = Math.floor(availableHeight * aspectRatio);
|
||||||
|
}
|
||||||
|
// size videos so that while keeping AR and max height, we have a nice fit
|
||||||
|
$('#remoteVideos').height(availableHeight + 36); // add the 2*18px border used for highlighting shadow.
|
||||||
|
$('#remoteVideos>video:visible').width(availableWidth);
|
||||||
|
$('#remoteVideos>video:visible').height(availableHeight);
|
||||||
|
}
|
||||||
|
|
||||||
|
$(document).ready(function () {
|
||||||
|
$('#nickinput').keydown(function(event) {
|
||||||
|
if (event.keyCode == 13) {
|
||||||
|
event.preventDefault();
|
||||||
|
var val = this.value;
|
||||||
|
this.value = '';
|
||||||
|
if (!nickname) {
|
||||||
|
nickname = val;
|
||||||
|
$('#nickname').css({visibility:"hidden"});
|
||||||
|
$('#chatconversation').css({visibility:'visible'});
|
||||||
|
$('#usermsg').css({visibility:'visible'});
|
||||||
|
$('#usermsg').focus();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
$('#usermsg').keydown(function(event) {
|
||||||
|
if (event.keyCode == 13) {
|
||||||
|
event.preventDefault();
|
||||||
|
var message = this.value;
|
||||||
|
$('#usermsg').val('').trigger('autosize.resize');
|
||||||
|
this.focus();
|
||||||
|
connection.emuc.sendMessage(message, nickname);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
$('#usermsg').autosize();
|
||||||
|
|
||||||
|
resizeLarge();
|
||||||
|
$(window).resize(function () {
|
||||||
|
resizeLarge();
|
||||||
|
});
|
||||||
|
if (!$('#settings').is(':visible')) {
|
||||||
|
console.log('init');
|
||||||
|
init();
|
||||||
|
} else {
|
||||||
|
loginInfo.onsubmit = function (e) {
|
||||||
|
if (e.preventDefault) e.preventDefault();
|
||||||
|
$('#settings').hide();
|
||||||
|
init();
|
||||||
|
};
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
$(window).bind('beforeunload', function () {
|
||||||
|
if (connection && connection.connected) {
|
||||||
|
// ensure signout
|
||||||
|
$.ajax({
|
||||||
|
type: 'POST',
|
||||||
|
url: config.bosh,
|
||||||
|
async: false,
|
||||||
|
cache: false,
|
||||||
|
contentType: 'application/xml',
|
||||||
|
data: "<body rid='" + (connection.rid || connection._proto.rid) + "' xmlns='http://jabber.org/protocol/httpbind' sid='" + (connection.sid || connection._proto.sid) + "' type='terminate'><presence xmlns='jabber:client' type='unavailable'/></body>",
|
||||||
|
success: function (data) {
|
||||||
|
console.log('signed out');
|
||||||
|
console.log(data);
|
||||||
|
},
|
||||||
|
error: function (XMLHttpRequest, textStatus, errorThrown) {
|
||||||
|
console.log('signout error', textStatus + ' (' + errorThrown + ')');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
function updateChatConversation(nick, message)
|
||||||
|
{
|
||||||
|
var divClassName = '';
|
||||||
|
if (nickname == nick)
|
||||||
|
divClassName = "localuser";
|
||||||
|
else
|
||||||
|
divClassName = "remoteuser";
|
||||||
|
|
||||||
|
$('#chatconversation').append('<div class="' + divClassName + '"><b>' + nick + ': </b>' + message + '</div>');
|
||||||
|
$('#chatconversation').animate({ scrollTop: $('#chatconversation')[0].scrollHeight}, 1000);
|
||||||
|
}
|
||||||
|
|
||||||
|
function buttonClick(id, classname) {
|
||||||
|
$(id).toggleClass(classname); // add the class to the clicked element
|
||||||
|
}
|
||||||
|
|
||||||
|
function openLockDialog() {
|
||||||
|
if (sharedKey)
|
||||||
|
$.prompt("Are you sure you would like to remove your secret key?",
|
||||||
|
{
|
||||||
|
title: "Remove secrect key",
|
||||||
|
persistent: false,
|
||||||
|
buttons: { "Remove": true, "Cancel": false},
|
||||||
|
defaultButton: 1,
|
||||||
|
submit: function(e,v,m,f){
|
||||||
|
if(v)
|
||||||
|
{
|
||||||
|
sharedKey = '';
|
||||||
|
lockRoom();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
else
|
||||||
|
$.prompt('<h2>Set a secrect key to lock your room</h2>' +
|
||||||
|
'<input id="lockKey" type="text" placeholder="your shared key" autofocus>',
|
||||||
|
{
|
||||||
|
persistent: false,
|
||||||
|
buttons: { "Save": true , "Cancel": false},
|
||||||
|
defaultButton: 1,
|
||||||
|
loaded: function(event) {
|
||||||
|
document.getElementById('lockKey').focus();
|
||||||
|
},
|
||||||
|
submit: function(e,v,m,f){
|
||||||
|
if(v)
|
||||||
|
{
|
||||||
|
var lockKey = document.getElementById('lockKey');
|
||||||
|
|
||||||
|
if (lockKey.value != null)
|
||||||
|
{
|
||||||
|
sharedKey = lockKey.value;
|
||||||
|
lockRoom(true);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function openLinkDialog() {
|
||||||
|
$.prompt('<input id="inviteLinkRef" type="text" value="' + roomUrl + '" onclick="this.select();">',
|
||||||
|
{
|
||||||
|
title: "Share this link with everyone you want to invite",
|
||||||
|
persistent: false,
|
||||||
|
buttons: { "Cancel": false},
|
||||||
|
loaded: function(event) {
|
||||||
|
document.getElementById('inviteLinkRef').select();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function lockRoom(lock) {
|
||||||
|
connection.emuc.lockRoom(sharedKey);
|
||||||
|
|
||||||
|
buttonClick("#lockIcon", "fa fa-unlock fa-lg fa fa-lock fa-lg");
|
||||||
|
}
|
||||||
|
|
||||||
|
function openChat() {
|
||||||
|
var chatspace = $('#chatspace');
|
||||||
|
var videospace = $('#videospace');
|
||||||
|
var chatspaceWidth = chatspace.width();
|
||||||
|
|
||||||
|
if (chatspace.css("opacity") == 1) {
|
||||||
|
chatspace.animate({opacity: 0}, "fast");
|
||||||
|
chatspace.animate({width: 0}, "slow");
|
||||||
|
videospace.animate({right: 0, width:"100%"}, "slow");
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
chatspace.animate({width:"20%"}, "slow");
|
||||||
|
chatspace.animate({opacity: 1}, "slow");
|
||||||
|
videospace.animate({right:chatspaceWidth, width:"80%"}, "slow");
|
||||||
|
}
|
||||||
|
|
||||||
|
// Request the focus in the nickname field or the chat input field.
|
||||||
|
if ($('#nickinput').is(':visible'))
|
||||||
|
$('#nickinput').focus();
|
||||||
|
else
|
||||||
|
$('#usermsg').focus();
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateRoomUrl(newRoomUrl) {
|
||||||
|
roomUrl = newRoomUrl;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
Sorry, this currently only works with chrome because it uses "Plan B".
|
||||||
|
|
@ -0,0 +1,9 @@
|
||||||
|
var config = {
|
||||||
|
hosts: {
|
||||||
|
domain: 'your.domain.example',
|
||||||
|
muc: 'conference.your.domain.example', // FIXME: use XEP-0030
|
||||||
|
bridge: 'jitsi-videobridge.your.domain.example' // FIXME: use XEP-0030
|
||||||
|
},
|
||||||
|
useNicks: false,
|
||||||
|
bosh: '/http-bind' // FIXME: use xep-0156 for that
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,125 @@
|
||||||
|
/*
|
||||||
|
------------------------------
|
||||||
|
Impromptu
|
||||||
|
------------------------------
|
||||||
|
*/
|
||||||
|
.jqifade{
|
||||||
|
position: absolute;
|
||||||
|
background-color: #000;
|
||||||
|
}
|
||||||
|
div.jqi{
|
||||||
|
width: 400px;
|
||||||
|
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
|
||||||
|
position: absolute;
|
||||||
|
background-color: #ffffff;
|
||||||
|
font-size: 11px;
|
||||||
|
text-align: left;
|
||||||
|
border: solid 1px #eeeeee;
|
||||||
|
border-radius: 6px;
|
||||||
|
-moz-border-radius: 6px;
|
||||||
|
-webkit-border-radius: 6px;
|
||||||
|
padding: 7px;
|
||||||
|
}
|
||||||
|
div.jqi .jqicontainer{
|
||||||
|
}
|
||||||
|
div.jqi .jqiclose{
|
||||||
|
position: absolute;
|
||||||
|
top: 4px; right: -2px;
|
||||||
|
width: 18px;
|
||||||
|
cursor: default;
|
||||||
|
color: #bbbbbb;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
div.jqi .jqistate{
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
div.jqi .jqititle{
|
||||||
|
padding: 5px 10px;
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 20px;
|
||||||
|
border-bottom: solid 1px #eeeeee;
|
||||||
|
}
|
||||||
|
div.jqi .jqimessage{
|
||||||
|
padding: 10px;
|
||||||
|
line-height: 20px;
|
||||||
|
color: #444444;
|
||||||
|
}
|
||||||
|
div.jqi .jqibuttons{
|
||||||
|
text-align: right;
|
||||||
|
margin: 0 -7px -7px -7px;
|
||||||
|
border-top: solid 1px #e4e4e4;
|
||||||
|
background-color: #f4f4f4;
|
||||||
|
border-radius: 0 0 6px 6px;
|
||||||
|
-moz-border-radius: 0 0 6px 6px;
|
||||||
|
-webkit-border-radius: 0 0 6px 6px;
|
||||||
|
}
|
||||||
|
div.jqi .jqibuttons button{
|
||||||
|
margin: 0;
|
||||||
|
padding: 5px 20px;
|
||||||
|
background-color: transparent;
|
||||||
|
font-weight: normal;
|
||||||
|
border: none;
|
||||||
|
border-left: solid 1px #e4e4e4;
|
||||||
|
color: #777;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
div.jqi .jqibuttons button.jqidefaultbutton{
|
||||||
|
color: #489afe;
|
||||||
|
}
|
||||||
|
div.jqi .jqibuttons button:hover,
|
||||||
|
div.jqi .jqibuttons button:focus{
|
||||||
|
color: #287ade;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
.jqiwarning .jqi .jqibuttons{
|
||||||
|
background-color: #b95656;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* sub states */
|
||||||
|
div.jqi .jqiparentstate::after{
|
||||||
|
background-color: #777;
|
||||||
|
opacity: 0.6;
|
||||||
|
filter: alpha(opacity=60);
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top:0;left:0;bottom:0;right:0;
|
||||||
|
border-radius: 6px;
|
||||||
|
-moz-border-radius: 6px;
|
||||||
|
-webkit-border-radius: 6px;
|
||||||
|
}
|
||||||
|
div.jqi .jqisubstate{
|
||||||
|
position: absolute;
|
||||||
|
top:0;
|
||||||
|
left: 20%;
|
||||||
|
width: 60%;
|
||||||
|
padding: 7px;
|
||||||
|
border: solid 1px #eeeeee;
|
||||||
|
border-top: none;
|
||||||
|
border-radius: 0 0 6px 6px;
|
||||||
|
-moz-border-radius: 0 0 6px 6px;
|
||||||
|
-webkit-border-radius: 0 0 6px 6px;
|
||||||
|
}
|
||||||
|
div.jqi .jqisubstate .jqibuttons button{
|
||||||
|
padding: 10px 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* arrows for tooltips/tours */
|
||||||
|
.jqi .jqiarrow{ position: absolute; height: 0; width:0; line-height: 0; font-size: 0; border: solid 10px transparent;}
|
||||||
|
|
||||||
|
.jqi .jqiarrowtl{ left: 10px; top: -20px; border-bottom-color: #ffffff; }
|
||||||
|
.jqi .jqiarrowtc{ left: 50%; top: -20px; border-bottom-color: #ffffff; margin-left: -10px; }
|
||||||
|
.jqi .jqiarrowtr{ right: 10px; top: -20px; border-bottom-color: #ffffff; }
|
||||||
|
|
||||||
|
.jqi .jqiarrowbl{ left: 10px; bottom: -20px; border-top-color: #ffffff; }
|
||||||
|
.jqi .jqiarrowbc{ left: 50%; bottom: -20px; border-top-color: #ffffff; margin-left: -10px; }
|
||||||
|
.jqi .jqiarrowbr{ right: 10px; bottom: -20px; border-top-color: #ffffff; }
|
||||||
|
|
||||||
|
.jqi .jqiarrowlt{ left: -20px; top: 10px; border-right-color: #ffffff; }
|
||||||
|
.jqi .jqiarrowlm{ left: -20px; top: 50%; border-right-color: #ffffff; margin-top: -10px; }
|
||||||
|
.jqi .jqiarrowlb{ left: -20px; bottom: 10px; border-right-color: #ffffff; }
|
||||||
|
|
||||||
|
.jqi .jqiarrowrt{ right: -20px; top: 10px; border-left-color: #ffffff; }
|
||||||
|
.jqi .jqiarrowrm{ right: -20px; top: 50%; border-left-color: #ffffff; margin-top: -10px; }
|
||||||
|
.jqi .jqiarrowrb{ right: -20px; bottom: 10px; border-left-color: #ffffff; }
|
||||||
|
|
||||||
|
|
@ -0,0 +1,318 @@
|
||||||
|
html, body{
|
||||||
|
margin:0px;
|
||||||
|
height:100%;
|
||||||
|
color: #424242;
|
||||||
|
font-family:'YanoneKaffeesatzLight',Verdana,Tahoma,Arial;
|
||||||
|
font-weight: 400;
|
||||||
|
background: #e9e9e9;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
#videospace {
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
top: 39px;
|
||||||
|
left: 0px;
|
||||||
|
right: 0px;
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
#largeVideo {
|
||||||
|
display:block;
|
||||||
|
position:relative;
|
||||||
|
width:1280px;
|
||||||
|
height:720px;
|
||||||
|
margin-left:auto;
|
||||||
|
margin-right:auto;
|
||||||
|
z-index: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#remoteVideos {
|
||||||
|
display:block;
|
||||||
|
position:relative;
|
||||||
|
text-align:center;
|
||||||
|
height:196px;
|
||||||
|
width:auto;
|
||||||
|
overflow: hidden;
|
||||||
|
border:1px solid transparent;
|
||||||
|
font-size:0;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
#remoteVideos video {
|
||||||
|
position:relative;
|
||||||
|
top:18px;
|
||||||
|
height:160px;
|
||||||
|
width:auto;
|
||||||
|
z-index:0;
|
||||||
|
border:1px solid #FFFFFF;
|
||||||
|
}
|
||||||
|
|
||||||
|
#remoteVideos video:hover {
|
||||||
|
cursor: pointer;
|
||||||
|
cursor: hand;
|
||||||
|
transform:scale(1.08, 1.08);
|
||||||
|
-webkit-transform:scale(1.08, 1.08);
|
||||||
|
transition-duration: 0.5s;
|
||||||
|
-webkit-transition-duration: 0.5s;
|
||||||
|
background-color: #FFFFFF;
|
||||||
|
-webkit-animation-name: greyPulse;
|
||||||
|
-webkit-animation-duration: 2s;
|
||||||
|
-webkit-animation-iteration-count: 1;
|
||||||
|
-webkit-box-shadow: 0 0 18px #515151;
|
||||||
|
border:1px solid #FFFFFF;
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
|
||||||
|
#chatspace {
|
||||||
|
display:block;
|
||||||
|
position:absolute;
|
||||||
|
float: right;
|
||||||
|
top: 40px;
|
||||||
|
bottom: 0px;
|
||||||
|
right: 0px;
|
||||||
|
width:0;
|
||||||
|
opacity: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
background-color:#f6f6f6;
|
||||||
|
border-left:1px solid #424242;
|
||||||
|
}
|
||||||
|
|
||||||
|
#chatconversation {
|
||||||
|
display:block;
|
||||||
|
position:relative;
|
||||||
|
top: -120px;
|
||||||
|
float:top;
|
||||||
|
text-align:left;
|
||||||
|
line-height:20px;
|
||||||
|
font-size:14px;
|
||||||
|
padding:5px;
|
||||||
|
height:90%;
|
||||||
|
overflow:scroll;
|
||||||
|
visibility:hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.localuser {
|
||||||
|
color: #087dba;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.remoteuser {
|
||||||
|
color: #424242;
|
||||||
|
}
|
||||||
|
|
||||||
|
#usermsg {
|
||||||
|
position:absolute;
|
||||||
|
bottom: 5px;
|
||||||
|
left: 5px;
|
||||||
|
right: 5px;
|
||||||
|
width: 95%;
|
||||||
|
height: 40px;
|
||||||
|
z-index: 5;
|
||||||
|
visibility:hidden;
|
||||||
|
max-height:150px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#nickname {
|
||||||
|
position:relative;
|
||||||
|
text-align:center;
|
||||||
|
color: #9d9d9d;
|
||||||
|
font-size: 18;
|
||||||
|
top: 100px;
|
||||||
|
left: 5px;
|
||||||
|
right: 5px;
|
||||||
|
width: 95%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#nickinput {
|
||||||
|
margin-top: 20px;
|
||||||
|
font-size: 14;
|
||||||
|
}
|
||||||
|
|
||||||
|
div#spacer {
|
||||||
|
height:5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#settings {
|
||||||
|
display:none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#nowebrtc {
|
||||||
|
display:none;
|
||||||
|
}
|
||||||
|
|
||||||
|
div#header{
|
||||||
|
display:block;
|
||||||
|
position:relative;
|
||||||
|
width:100%;
|
||||||
|
height:39px;
|
||||||
|
z-index: 1;
|
||||||
|
text-align:center;
|
||||||
|
background-color:#087dba;
|
||||||
|
}
|
||||||
|
|
||||||
|
div#left {
|
||||||
|
display:block;
|
||||||
|
position: absolute;
|
||||||
|
left: 0px;
|
||||||
|
top: 0px;
|
||||||
|
width: 100px;
|
||||||
|
height: 39px;
|
||||||
|
background-image:url(../images/left1.png);
|
||||||
|
background-repeat:no-repeat;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
div#leftlogo {
|
||||||
|
position:absolute;
|
||||||
|
top: 5px;
|
||||||
|
left: 15px;
|
||||||
|
background-image:url(../images/jitsilogo.png);
|
||||||
|
background-repeat:no-repeat;
|
||||||
|
height: 31px;
|
||||||
|
width: 68px;
|
||||||
|
z-index:1;
|
||||||
|
}
|
||||||
|
|
||||||
|
div#link {
|
||||||
|
display:block;
|
||||||
|
position:relative;
|
||||||
|
height:39px;
|
||||||
|
width:auto;
|
||||||
|
overflow: hidden;
|
||||||
|
z-index:0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button {
|
||||||
|
display: inline-block;
|
||||||
|
position: relative;
|
||||||
|
color: #FFFFFF;
|
||||||
|
top: 0;
|
||||||
|
padding: 10px 0px;
|
||||||
|
height: 19px;
|
||||||
|
width: 39px;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 19px;
|
||||||
|
text-align: center;
|
||||||
|
text-shadow: 0px 1px 0px rgba(255,255,255,.3), 0px -1px 0px rgba(0,0,0,.7);
|
||||||
|
}
|
||||||
|
|
||||||
|
a.button:hover {
|
||||||
|
top: 0;
|
||||||
|
cursor: pointer;
|
||||||
|
background: rgba(0, 0, 0, 0.3);
|
||||||
|
border-radius: 5px;
|
||||||
|
background-clip: padding-box;
|
||||||
|
-webkit-border-radius: 5px;
|
||||||
|
-webkit-background-clip: padding-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.no-fa-video-camera, .fa-microphone-slash {
|
||||||
|
color: #636363;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fade_line {
|
||||||
|
height: 1px;
|
||||||
|
background: black;
|
||||||
|
background: -webkit-gradient(linear, 0 0, 100% 0, from(#e9e9e9), to(#e9e9e9), color-stop(50%, black));
|
||||||
|
}
|
||||||
|
|
||||||
|
.header_button_separator {
|
||||||
|
display: inline-block;
|
||||||
|
position:relative;
|
||||||
|
top: 7;
|
||||||
|
width: 1px;
|
||||||
|
height: 25px;
|
||||||
|
background: white;
|
||||||
|
background: -webkit-gradient(linear, 0 0, 0 100%, from(#087dba), to(#087dba), color-stop(50%, white));
|
||||||
|
}
|
||||||
|
|
||||||
|
div#right {
|
||||||
|
display:block;
|
||||||
|
position:absolute;
|
||||||
|
right: 0px;
|
||||||
|
top: 0px;
|
||||||
|
background-image:url(../images/right1.png);
|
||||||
|
background-repeat:no-repeat;
|
||||||
|
margin:0;
|
||||||
|
padding:0;
|
||||||
|
width:100px;
|
||||||
|
height:39px;
|
||||||
|
}
|
||||||
|
div#rightlogo {
|
||||||
|
position:absolute;
|
||||||
|
top: 6px;
|
||||||
|
right: 15px;
|
||||||
|
background-image:url(../images/estoslogo.png);
|
||||||
|
background-repeat:no-repeat;
|
||||||
|
height: 25px;
|
||||||
|
width: 62px;
|
||||||
|
z-index:1;
|
||||||
|
}
|
||||||
|
|
||||||
|
input, textarea {
|
||||||
|
border: 0px none;
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 14px;
|
||||||
|
padding: 5px;
|
||||||
|
background: #f3f3f3;
|
||||||
|
border-radius: 3px;
|
||||||
|
font-weight: 100;
|
||||||
|
line-height: 20px;
|
||||||
|
height: 40px;
|
||||||
|
color: #333;
|
||||||
|
font-weight: bold;
|
||||||
|
text-align: left;
|
||||||
|
border:1px solid #ACD8F0;
|
||||||
|
outline: none; /* removes the default outline */
|
||||||
|
resize: none; /* prevents the user-resizing, adjust to taste */
|
||||||
|
}
|
||||||
|
|
||||||
|
input, textarea:focus {
|
||||||
|
box-shadow: inset 0 0 3px 2px #ACD8F0; /* provides a more style-able
|
||||||
|
replacement to the outline */
|
||||||
|
}
|
||||||
|
|
||||||
|
textarea {
|
||||||
|
overflow: hidden;
|
||||||
|
word-wrap: break-word;
|
||||||
|
resize: horizontal;
|
||||||
|
}
|
||||||
|
|
||||||
|
button.no-icon {
|
||||||
|
padding: 0 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
border: none;
|
||||||
|
height: 35px;
|
||||||
|
padding: 0 1em 0 2em;
|
||||||
|
position: relative;
|
||||||
|
border-radius: 3px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #fff;
|
||||||
|
line-height: 35px;
|
||||||
|
background: #2c8ad2;
|
||||||
|
}
|
||||||
|
|
||||||
|
button, input, select, textarea {
|
||||||
|
font-size: 100%;
|
||||||
|
margin: 0;
|
||||||
|
vertical-align: baseline;
|
||||||
|
}
|
||||||
|
|
||||||
|
button, input[type="button"], input[type="reset"], input[type="submit"] {
|
||||||
|
cursor: pointer;
|
||||||
|
-webkit-appearance: button;
|
||||||
|
}
|
||||||
|
|
||||||
|
form {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Animated text area. */
|
||||||
|
.animated {
|
||||||
|
-webkit-transition: height 0.2s;
|
||||||
|
-moz-transition: height 0.2s;
|
||||||
|
transition: height 0.2s;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,22 @@
|
||||||
|
.jqistates h2 {
|
||||||
|
padding-bottom: 10px;
|
||||||
|
border-bottom: 1px solid #eee;
|
||||||
|
font-size: 18px;
|
||||||
|
line-height: 25px;
|
||||||
|
text-align: center;
|
||||||
|
color: #424242;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jqistates input {
|
||||||
|
width: 100%;
|
||||||
|
margin: 20px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jqibuttons button {
|
||||||
|
margin-right: 5px;
|
||||||
|
float:right;
|
||||||
|
}
|
||||||
|
|
||||||
|
button.jqidefaultbutton #inviteLinkRef {
|
||||||
|
color: #2c8ad2;
|
||||||
|
}
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.3 KiB |
|
|
@ -0,0 +1,68 @@
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>WebRTC, meet the Jitsi Videobridge</title>
|
||||||
|
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
|
||||||
|
<script src="libs/strophejingle.bundle.js"></script><!-- strophe.jingle bundle -->
|
||||||
|
<script src="libs/colibri.js"></script><!-- colibri focus implementation -->
|
||||||
|
<script src="muc.js"></script><!-- simple MUC library -->
|
||||||
|
<script src="app.js"></script><!-- application logic -->
|
||||||
|
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
|
||||||
|
<link rel="stylesheet" type="text/css" media="screen" href="css/main.css" />
|
||||||
|
<link rel="stylesheet" href="css/jquery-impromptu.css">
|
||||||
|
<link rel="stylesheet" href="css/modaldialog.css">
|
||||||
|
<script src="libs/jquery-impromptu.js"></script>
|
||||||
|
<script src="libs/jquery.autosize.js"></script>
|
||||||
|
<script src="config.js"></script><!-- adapt to your needs, i.e. set hosts and bosh path -->
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="header">
|
||||||
|
<a href="http://jitsi.org" target="_blank"><div id="leftlogo"></div></a>
|
||||||
|
<a href="http://www.estos.com/" target="_blank"><div id="rightlogo"></div></a>
|
||||||
|
<div id="link">
|
||||||
|
<a class="button" onclick='buttonClick("#mute", "fa fa-microphone fa-lg fa fa-microphone-slash fa-lg");toggleAudio();'><i id="mute" title="Mute / unmute" class="fa fa-microphone fa-lg"></i></a>
|
||||||
|
<div class="header_button_separator"></div>
|
||||||
|
<a class="button" onclick='buttonClick("#video", "fa fa-video-camera fa-lg fa fa-video-camera no-fa-video-camera fa-lg");toggleVideo();'><i id="video" title="Start / stop camera" class="fa fa-video-camera fa-lg"></i></a>
|
||||||
|
<div class="header_button_separator"></div>
|
||||||
|
<a class="button" onclick="openLockDialog();"><i id="lockIcon" title="Lock/unlock room" class="fa fa-unlock fa-lg"></i></a>
|
||||||
|
<div class="header_button_separator"></div>
|
||||||
|
<a class="button" onclick="openLinkDialog();"><i title="Invite others" class="fa fa-link fa-lg"></i></a>
|
||||||
|
<div class="header_button_separator"></div>
|
||||||
|
<a class="button" onclick='openChat();'><i id="chat" title="Open chat" class="fa fa-comments fa-lg"></i></a>
|
||||||
|
<!--i class='fa fa-external-link'> </i>Others can join you by just going to <span id='roomurl'></span-->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="settings">
|
||||||
|
<h1>Connection Settings</h1>
|
||||||
|
<form id="loginInfo">
|
||||||
|
<label>JID: <input id="jid" type="text" name="jid" placeholder="me@example.com"/></label>
|
||||||
|
<label>Password: <input id="password" type="password" name="password" placeholder="secret"/></label>
|
||||||
|
<label>BOSH URL: <input id="boshURL" type="text" name="boshURL" placeholder="/http-bind"/></label>
|
||||||
|
<input id="connect" type="submit" value="Connect" />
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="videospace">
|
||||||
|
<div class="fade_line"></div>
|
||||||
|
<video id="largeVideo" autoplay oncontextmenu="return false;"></video>
|
||||||
|
<div class="fade_line"></div>
|
||||||
|
<div id="remoteVideos">
|
||||||
|
<video id="localVideo" autoplay oncontextmenu="return false;" muted/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="chatspace">
|
||||||
|
<div id="nickname">
|
||||||
|
Enter a nickname in the box below
|
||||||
|
<form>
|
||||||
|
<input type='text' id="nickinput" placeholder='Choose a nickname' autofocus>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!--div><i class="fa fa-comments"> </i><span class='nick'></span>: <span class='chattext'></span></div-->
|
||||||
|
<div id="chatconversation"></div>
|
||||||
|
<textarea id="usermsg" class= "animated" placeholder='Enter text...' autofocus></textarea>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,814 @@
|
||||||
|
/* colibri.js -- a COLIBRI focus
|
||||||
|
* The colibri spec has been submitted to the XMPP Standards Foundation
|
||||||
|
* for publications as a XMPP extensions:
|
||||||
|
* http://xmpp.org/extensions/inbox/colibri.html
|
||||||
|
*
|
||||||
|
* colibri.js is a participating focus, i.e. the focus participates
|
||||||
|
* in the conference. The conference itself can be ad-hoc, through a
|
||||||
|
* MUC, through PubSub, etc.
|
||||||
|
*
|
||||||
|
* colibri.js relies heavily on the strophe.jingle library available
|
||||||
|
* from https://github.com/ESTOS/strophe.jingle
|
||||||
|
* and interoperates with the Jitsi videobridge available from
|
||||||
|
* https://jitsi.org/Projects/JitsiVideobridge
|
||||||
|
*/
|
||||||
|
/*
|
||||||
|
Copyright (c) 2013 ESTOS GmbH
|
||||||
|
|
||||||
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||||
|
of this software and associated documentation files (the "Software"), to deal
|
||||||
|
in the Software without restriction, including without limitation the rights
|
||||||
|
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||||
|
copies of the Software, and to permit persons to whom the Software is
|
||||||
|
furnished to do so, subject to the following conditions:
|
||||||
|
|
||||||
|
The above copyright notice and this permission notice shall be included in
|
||||||
|
all copies or substantial portions of the Software.
|
||||||
|
|
||||||
|
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||||
|
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||||
|
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||||
|
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||||
|
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||||
|
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
||||||
|
THE SOFTWARE.
|
||||||
|
*/
|
||||||
|
/* jshint -W117 */
|
||||||
|
function ColibriFocus(connection, bridgejid) {
|
||||||
|
this.connection = connection;
|
||||||
|
this.bridgejid = bridgejid;
|
||||||
|
this.peers = [];
|
||||||
|
this.confid = null;
|
||||||
|
|
||||||
|
this.peerconnection = null;
|
||||||
|
|
||||||
|
this.sid = Math.random().toString(36).substr(2, 12);
|
||||||
|
this.connection.jingle.sessions[this.sid] = this;
|
||||||
|
this.mychannel = [];
|
||||||
|
this.channels = [];
|
||||||
|
this.remotessrc = {};
|
||||||
|
|
||||||
|
// ssrc lines to be added on next update
|
||||||
|
this.addssrc = [];
|
||||||
|
// ssrc lines to be removed on next update
|
||||||
|
this.removessrc = [];
|
||||||
|
|
||||||
|
// silly wait flag
|
||||||
|
this.wait = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
// creates a conferences with an initial set of peers
|
||||||
|
ColibriFocus.prototype.makeConference = function (peers) {
|
||||||
|
var ob = this;
|
||||||
|
if (this.confid !== null) {
|
||||||
|
console.error('makeConference called twice? Ignoring...');
|
||||||
|
// FIXME: just invite peers?
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.confid = 0; // !null
|
||||||
|
this.peers = [];
|
||||||
|
peers.forEach(function (peer) {
|
||||||
|
ob.peers.push(peer);
|
||||||
|
ob.channels.push([]);
|
||||||
|
});
|
||||||
|
|
||||||
|
this.peerconnection = new RTC.peerconnection(this.connection.jingle.ice_config, this.connection.jingle.pc_constraints);
|
||||||
|
this.peerconnection.addStream(this.connection.jingle.localStream);
|
||||||
|
this.peerconnection.oniceconnectionstatechange = function (event) {
|
||||||
|
console.warn('ice connection state changed to', ob.peerconnection.iceConnectionState);
|
||||||
|
/*
|
||||||
|
if (ob.peerconnection.signalingState == 'stable' && ob.peerconnection.iceConnectionState == 'connected') {
|
||||||
|
console.log('adding new remote SSRCs from iceconnectionstatechange');
|
||||||
|
window.setTimeout(function() { ob.modifySources(); }, 1000);
|
||||||
|
}
|
||||||
|
*/
|
||||||
|
};
|
||||||
|
this.peerconnection.onsignalingstatechange = function (event) {
|
||||||
|
console.warn(ob.peerconnection.signalingState);
|
||||||
|
/*
|
||||||
|
if (ob.peerconnection.signalingState == 'stable' && ob.peerconnection.iceConnectionState == 'connected') {
|
||||||
|
console.log('adding new remote SSRCs from signalingstatechange');
|
||||||
|
window.setTimeout(function() { ob.modifySources(); }, 1000);
|
||||||
|
}
|
||||||
|
*/
|
||||||
|
};
|
||||||
|
this.peerconnection.onaddstream = function (event) {
|
||||||
|
ob.remoteStream = event.stream;
|
||||||
|
$(document).trigger('remotestreamadded.jingle', [event, ob.sid]);
|
||||||
|
};
|
||||||
|
this.peerconnection.onicecandidate = function (event) {
|
||||||
|
ob.sendIceCandidate(event.candidate);
|
||||||
|
};
|
||||||
|
this.peerconnection.createOffer(
|
||||||
|
function (offer) {
|
||||||
|
ob.peerconnection.setLocalDescription(
|
||||||
|
offer,
|
||||||
|
function () {
|
||||||
|
// success
|
||||||
|
// FIXME: could call _makeConference here and trickle candidates later
|
||||||
|
},
|
||||||
|
function (error) {
|
||||||
|
console.log('setLocalDescription failed', error);
|
||||||
|
}
|
||||||
|
);
|
||||||
|
},
|
||||||
|
function (error) {
|
||||||
|
console.warn(error);
|
||||||
|
}
|
||||||
|
);
|
||||||
|
this.peerconnection.onicecandidate = function (event) {
|
||||||
|
console.log('candidate', event.candidate);
|
||||||
|
if (!event.candidate) {
|
||||||
|
console.log('end of candidates');
|
||||||
|
ob._makeConference();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
ColibriFocus.prototype._makeConference = function () {
|
||||||
|
var ob = this;
|
||||||
|
var elem = $iq({to: this.bridgejid, type: 'get'});
|
||||||
|
elem.c('conference', {xmlns: 'http://jitsi.org/protocol/colibri'});
|
||||||
|
|
||||||
|
var localSDP = new SDP(this.peerconnection.localDescription.sdp);
|
||||||
|
var contents = SDPUtil.find_lines(localSDP.raw, 'a=mid:').map(SDPUtil.parse_mid);
|
||||||
|
localSDP.media.forEach(function (media, channel) {
|
||||||
|
var name = SDPUtil.parse_mid(SDPUtil.find_line(media, 'a=mid:'));
|
||||||
|
elem.c('content', {name: name});
|
||||||
|
elem.c('channel', {initiator: 'false', expire: '15'});
|
||||||
|
|
||||||
|
// FIXME: should reuse code from .toJingle
|
||||||
|
var mline = SDPUtil.parse_mline(media.split('\r\n')[0]);
|
||||||
|
for (var j = 0; j < mline.fmt.length; j++) {
|
||||||
|
var rtpmap = SDPUtil.find_line(media, 'a=rtpmap:' + mline.fmt[j]);
|
||||||
|
elem.c('payload-type', SDPUtil.parse_rtpmap(rtpmap));
|
||||||
|
elem.up();
|
||||||
|
}
|
||||||
|
|
||||||
|
// FIXME: should reuse code from .toJingle
|
||||||
|
elem.c('transport', {xmlns: 'urn:xmpp:jingle:transports:ice-udp:1'});
|
||||||
|
var tmp = SDPUtil.iceparams(media, localSDP.session);
|
||||||
|
if (tmp) {
|
||||||
|
elem.attrs(tmp);
|
||||||
|
var fingerprints = SDPUtil.find_lines(media, 'a=fingerprint:', localSDP.session);
|
||||||
|
fingerprints.forEach(function (line) {
|
||||||
|
tmp = SDPUtil.parse_fingerprint(line);
|
||||||
|
//tmp.xmlns = 'urn:xmpp:tmp:jingle:apps:dtls:0';
|
||||||
|
tmp.xmlns = 'urn:xmpp:jingle:apps:dtls:0';
|
||||||
|
elem.c('fingerprint').t(tmp.fingerprint);
|
||||||
|
delete tmp.fingerprint;
|
||||||
|
line = SDPUtil.find_line(media, 'a=setup:', ob.session);
|
||||||
|
if (line) {
|
||||||
|
tmp.setup = line.substr(8);
|
||||||
|
}
|
||||||
|
elem.attrs(tmp);
|
||||||
|
elem.up();
|
||||||
|
});
|
||||||
|
// XEP-0176
|
||||||
|
if (SDPUtil.find_line(media, 'a=candidate:', localSDP.session)) { // add any a=candidate lines
|
||||||
|
lines = SDPUtil.find_lines(media, 'a=candidate:', localSDP.session);
|
||||||
|
for (j = 0; j < lines.length; j++) {
|
||||||
|
tmp = SDPUtil.candidateToJingle(lines[j]);
|
||||||
|
elem.c('candidate', tmp).up();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
elem.up(); // end of transport
|
||||||
|
}
|
||||||
|
elem.up(); // end of channel
|
||||||
|
for (j = 0; j < ob.peers.length; j++) {
|
||||||
|
elem.c('channel', {initiator: 'true', expire:'15' }).up();
|
||||||
|
}
|
||||||
|
elem.up(); // end of content
|
||||||
|
});
|
||||||
|
|
||||||
|
this.connection.sendIQ(elem,
|
||||||
|
function (result) {
|
||||||
|
ob.createdConference(result);
|
||||||
|
},
|
||||||
|
function (error) {
|
||||||
|
console.warn(error);
|
||||||
|
}
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
// callback when a conference was created
|
||||||
|
ColibriFocus.prototype.createdConference = function (result) {
|
||||||
|
console.log('created a conference on the bridge');
|
||||||
|
var tmp;
|
||||||
|
|
||||||
|
this.confid = $(result).find('>conference').attr('id');
|
||||||
|
var remotecontents = $(result).find('>conference>content').get();
|
||||||
|
for (var i = 0; i < remotecontents.length; i++) {
|
||||||
|
tmp = $(remotecontents[i]).find('>channel').get();
|
||||||
|
this.mychannel.push($(tmp.shift()));
|
||||||
|
for (j = 0; j < tmp.length; j++) {
|
||||||
|
if (this.channels[j] === undefined) {
|
||||||
|
this.channels[j] = [];
|
||||||
|
}
|
||||||
|
this.channels[j].push(tmp[j]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
console.log('remote channels', this.channels);
|
||||||
|
|
||||||
|
// establish our channel with the bridge
|
||||||
|
// static answer taken from chrome M31, should be replaced by a
|
||||||
|
// dynamic one that is based on our offer FIXME
|
||||||
|
var bridgeSDP = new SDP('v=0\r\no=- 5151055458874951233 2 IN IP4 127.0.0.1\r\ns=-\r\nt=0 0\r\nm=audio 1 RTP/SAVPF 111 103 104 0 8 106 105 13 126\r\nc=IN IP4 0.0.0.0\r\na=rtcp:1 IN IP4 0.0.0.0\r\na=mid:audio\r\na=extmap:1 urn:ietf:params:rtp-hdrext:ssrc-audio-level\r\na=sendrecv\r\na=rtpmap:111 opus/48000/2\r\na=fmtp:111 minptime=10\r\na=rtpmap:103 ISAC/16000\r\na=rtpmap:104 ISAC/32000\r\na=rtpmap:0 PCMU/8000\r\na=rtpmap:8 PCMA/8000\r\na=rtpmap:106 CN/32000\r\na=rtpmap:105 CN/16000\r\na=rtpmap:13 CN/8000\r\na=rtpmap:126 telephone-event/8000\r\na=maxptime:60\r\nm=video 1 RTP/SAVPF 100 116 117\r\nc=IN IP4 0.0.0.0\r\na=rtcp:1 IN IP4 0.0.0.0\r\na=mid:video\r\na=extmap:2 urn:ietf:params:rtp-hdrext:toffset\r\na=extmap:3 http://www.webrtc.org/experiments/rtp-hdrext/abs-send-time\r\na=sendrecv\r\na=rtpmap:100 VP8/90000\r\na=rtcp-fb:100 ccm fir\r\na=rtcp-fb:100 nack\r\na=rtcp-fb:100 goog-remb\r\na=rtpmap:116 red/90000\r\na=rtpmap:117 ulpfec/90000\r\n');
|
||||||
|
// get the mixed ssrc
|
||||||
|
for (var channel = 0; channel < remotecontents.length; channel++) {
|
||||||
|
tmp = $(this.mychannel[channel]).find('>source[xmlns="urn:xmpp:jingle:apps:rtp:ssma:0"]');
|
||||||
|
// FIXME: check rtp-level-relay-type
|
||||||
|
if (tmp.length) {
|
||||||
|
bridgeSDP.media[channel] += 'a=ssrc:' + tmp.attr('ssrc') + ' ' + 'cname:mixed' + '\r\n';
|
||||||
|
bridgeSDP.media[channel] += 'a=ssrc:' + tmp.attr('ssrc') + ' ' + 'label:mixedlabela0' + '\r\n';
|
||||||
|
bridgeSDP.media[channel] += 'a=ssrc:' + tmp.attr('ssrc') + ' ' + 'msid:mixedmslabela0 mixedlabela0' + '\r\n';
|
||||||
|
bridgeSDP.media[channel] += 'a=ssrc:' + tmp.attr('ssrc') + ' ' + 'mslabel:mixedmslabela0' + '\r\n';
|
||||||
|
} else {
|
||||||
|
// make chrome happy... '3735928559' == 0xDEADBEEF
|
||||||
|
bridgeSDP.media[channel] += 'a=ssrc:' + '3735928559' + ' ' + 'cname:mixed' + '\r\n';
|
||||||
|
bridgeSDP.media[channel] += 'a=ssrc:' + '3735928559' + ' ' + 'label:mixedlabelv0' + '\r\n';
|
||||||
|
bridgeSDP.media[channel] += 'a=ssrc:' + '3735928559' + ' ' + 'msid:mixedmslabelv0 mixedlabelv0' + '\r\n';
|
||||||
|
bridgeSDP.media[channel] += 'a=ssrc:' + '3735928559' + ' ' + 'mslabel:mixedmslabelv0' + '\r\n';
|
||||||
|
}
|
||||||
|
|
||||||
|
// FIXME: should take code from .fromJingle
|
||||||
|
tmp = $(this.mychannel[channel]).find('>transport[xmlns="urn:xmpp:jingle:transports:ice-udp:1"]');
|
||||||
|
if (tmp.length) {
|
||||||
|
bridgeSDP.media[channel] += 'a=ice-ufrag:' + tmp.attr('ufrag') + '\r\n';
|
||||||
|
bridgeSDP.media[channel] += 'a=ice-pwd:' + tmp.attr('pwd') + '\r\n';
|
||||||
|
tmp.find('>candidate').each(function () {
|
||||||
|
bridgeSDP.media[channel] += SDPUtil.candidateFromJingle(this);
|
||||||
|
});
|
||||||
|
tmp = tmp.find('>fingerprint');
|
||||||
|
if (tmp.length) {
|
||||||
|
bridgeSDP.media[channel] += 'a=fingerprint:' + tmp.attr('hash') + ' ' + tmp.text() + '\r\n';
|
||||||
|
if (tmp.attr('setup')) {
|
||||||
|
bridgeSDP.media[channel] += 'a=setup:' + tmp.attr('setup') + '\r\n';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
bridgeSDP.raw = bridgeSDP.session + bridgeSDP.media.join('');
|
||||||
|
|
||||||
|
var ob = this;
|
||||||
|
this.peerconnection.setRemoteDescription(
|
||||||
|
new RTCSessionDescription({type: 'answer', sdp: bridgeSDP.raw}),
|
||||||
|
function () {
|
||||||
|
console.log('setRemoteDescription success');
|
||||||
|
// remote channels == remotecontents length - 1!
|
||||||
|
for (var i = 0; i < remotecontents.length - 1; i++) {
|
||||||
|
ob.initiate(ob.peers[i], true);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
function (error) {
|
||||||
|
console.log('setRemoteDescription failed');
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
// send a session-initiate to a new participant
|
||||||
|
ColibriFocus.prototype.initiate = function (peer, isInitiator) {
|
||||||
|
var participant = this.peers.indexOf(peer);
|
||||||
|
console.log('tell', peer, participant);
|
||||||
|
var sdp;
|
||||||
|
if (this.peerconnection != null && this.peerconnection.signalingState == 'stable') {
|
||||||
|
sdp = new SDP(this.peerconnection.remoteDescription.sdp);
|
||||||
|
var localSDP = new SDP(this.peerconnection.localDescription.sdp);
|
||||||
|
// throw away stuff we don't want
|
||||||
|
// not needed with static offer
|
||||||
|
sdp.removeSessionLines('a=group:');
|
||||||
|
sdp.removeSessionLines('a=msid-semantic:'); // FIXME: not mapped over jingle anyway...
|
||||||
|
for (var i = 0; i < sdp.media.length; i++) {
|
||||||
|
sdp.removeMediaLines(i, 'a=rtcp-mux');
|
||||||
|
sdp.removeMediaLines(i, 'a=ssrc:');
|
||||||
|
sdp.removeMediaLines(i, 'a=crypto:');
|
||||||
|
sdp.removeMediaLines(i, 'a=candidate:');
|
||||||
|
sdp.removeMediaLines(i, 'a=ice-options:google-ice');
|
||||||
|
sdp.removeMediaLines(i, 'a=ice-ufrag:');
|
||||||
|
sdp.removeMediaLines(i, 'a=ice-pwd:');
|
||||||
|
sdp.removeMediaLines(i, 'a=fingerprint:');
|
||||||
|
sdp.removeMediaLines(i, 'a=setup:');
|
||||||
|
|
||||||
|
// re-add all remote a=ssrcs
|
||||||
|
for (var jid in this.remotessrc) {
|
||||||
|
if (jid == peer) continue;
|
||||||
|
sdp.media[i] += this.remotessrc[jid][i];
|
||||||
|
}
|
||||||
|
// and local a=ssrc lines
|
||||||
|
sdp.media[i] += SDPUtil.find_lines(localSDP.media[i], 'a=ssrc').join('\r\n') + '\r\n';
|
||||||
|
}
|
||||||
|
sdp.raw = sdp.session + sdp.media.join('');
|
||||||
|
} else {
|
||||||
|
console.error('can not initiate a new session without a stable peerconnection');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// add stuff we got from the bridge
|
||||||
|
for (var j = 0; j < sdp.media.length; j++) {
|
||||||
|
var chan = $(this.channels[participant][j]);
|
||||||
|
console.log('channel id', chan.attr('id'));
|
||||||
|
|
||||||
|
tmp = chan.find('>source[xmlns="urn:xmpp:jingle:apps:rtp:ssma:0"]');
|
||||||
|
if (tmp.length) {
|
||||||
|
sdp.media[j] += 'a=ssrc:' + tmp.attr('ssrc') + ' ' + 'cname:mixed' + '\r\n';
|
||||||
|
sdp.media[j] += 'a=ssrc:' + tmp.attr('ssrc') + ' ' + 'label:mixedlabela0' + '\r\n';
|
||||||
|
sdp.media[j] += 'a=ssrc:' + tmp.attr('ssrc') + ' ' + 'msid:mixedmslabela0 mixedlabela0' + '\r\n';
|
||||||
|
sdp.media[j] += 'a=ssrc:' + tmp.attr('ssrc') + ' ' + 'mslabel:mixedmslabela0' + '\r\n';
|
||||||
|
} else {
|
||||||
|
// make chrome happy... '3735928559' == 0xDEADBEEF
|
||||||
|
sdp.media[j] += 'a=ssrc:' + '3735928559' + ' ' + 'cname:mixed' + '\r\n';
|
||||||
|
sdp.media[j] += 'a=ssrc:' + '3735928559' + ' ' + 'label:mixedlabelv0' + '\r\n';
|
||||||
|
sdp.media[j] += 'a=ssrc:' + '3735928559' + ' ' + 'msid:mixedmslabelv0 mixedlabelv0' + '\r\n';
|
||||||
|
sdp.media[j] += 'a=ssrc:' + '3735928559' + ' ' + 'mslabel:mixedmslabelv0' + '\r\n';
|
||||||
|
}
|
||||||
|
|
||||||
|
tmp = chan.find('>transport[xmlns="urn:xmpp:jingle:transports:ice-udp:1"]');
|
||||||
|
if (tmp.length) {
|
||||||
|
if (tmp.attr('ufrag'))
|
||||||
|
sdp.media[j] += 'a=ice-ufrag:' + tmp.attr('ufrag') + '\r\n';
|
||||||
|
if (tmp.attr('pwd'))
|
||||||
|
sdp.media[j] += 'a=ice-pwd:' + tmp.attr('pwd') + '\r\n';
|
||||||
|
// and the candidates...
|
||||||
|
tmp.find('>candidate').each(function () {
|
||||||
|
sdp.media[j] += SDPUtil.candidateFromJingle(this);
|
||||||
|
});
|
||||||
|
tmp = tmp.find('>fingerprint');
|
||||||
|
if (tmp.length) {
|
||||||
|
sdp.media[j] += 'a=fingerprint:' + tmp.attr('hash') + ' ' + tmp.text() + '\r\n';
|
||||||
|
/*
|
||||||
|
if (tmp.attr('direction')) {
|
||||||
|
sdp.media[j] += 'a=setup:' + tmp.attr('direction') + '\r\n';
|
||||||
|
}
|
||||||
|
*/
|
||||||
|
sdp.media[j] += 'a=setup:actpass\r\n';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// make a new colibri session and configure it
|
||||||
|
// FIXME: is it correct to use this.connection.jid when used in a MUC?
|
||||||
|
var sess = new ColibriSession(this.connection.jid,
|
||||||
|
Math.random().toString(36).substr(2, 12), // random string
|
||||||
|
this.connection);
|
||||||
|
sess.initiate(peer);
|
||||||
|
sess.colibri = this;
|
||||||
|
sess.localStream = this.connection.jingle.localStream;
|
||||||
|
sess.media_constraints = this.connection.jingle.media_constraints;
|
||||||
|
sess.pc_constraints = this.connection.jingle.pc_constraints;
|
||||||
|
sess.ice_config = this.connection.ice_config;
|
||||||
|
|
||||||
|
this.connection.jingle.sessions[sess.sid] = sess;
|
||||||
|
this.connection.jingle.jid2session[sess.peerjid] = sess;
|
||||||
|
|
||||||
|
// send a session-initiate
|
||||||
|
var init = $iq({to: peer, type: 'set'})
|
||||||
|
.c('jingle',
|
||||||
|
{xmlns: 'urn:xmpp:jingle:1',
|
||||||
|
action: 'session-initiate',
|
||||||
|
initiator: sess.me,
|
||||||
|
sid: sess.sid
|
||||||
|
}
|
||||||
|
);
|
||||||
|
sdp.toJingle(init, 'initiator');
|
||||||
|
this.connection.sendIQ(init,
|
||||||
|
function (res) {
|
||||||
|
console.log('got result');
|
||||||
|
},
|
||||||
|
function (err) {
|
||||||
|
console.log('got error');
|
||||||
|
}
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
// pull in a new participant into the conference
|
||||||
|
ColibriFocus.prototype.addNewParticipant = function (peer) {
|
||||||
|
var ob = this;
|
||||||
|
if (this.confid === 0) {
|
||||||
|
// bad state
|
||||||
|
console.log('confid does not exist yet, postponing', peer);
|
||||||
|
window.setTimeout(function () {
|
||||||
|
ob.addNewParticipant(peer);
|
||||||
|
}, 250);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
var index = this.channels.length;
|
||||||
|
this.channels.push([]);
|
||||||
|
this.peers.push(peer);
|
||||||
|
|
||||||
|
var elem = $iq({to: this.bridgejid, type: 'get'});
|
||||||
|
elem.c('conference', {xmlns: 'http://jitsi.org/protocol/colibri', id: this.confid});
|
||||||
|
var localSDP = new SDP(this.peerconnection.localDescription.sdp);
|
||||||
|
var contents = SDPUtil.find_lines(localSDP.raw, 'a=mid:').map(SDPUtil.parse_mid);
|
||||||
|
contents.forEach(function (name) {
|
||||||
|
elem.c('content', {name: name});
|
||||||
|
elem.c('channel', {initiator: 'true', expire:'15'});
|
||||||
|
elem.up(); // end of channel
|
||||||
|
elem.up(); // end of content
|
||||||
|
});
|
||||||
|
|
||||||
|
this.connection.sendIQ(elem,
|
||||||
|
function (result) {
|
||||||
|
var contents = $(result).find('>conference>content').get();
|
||||||
|
for (var i = 0; i < contents.length; i++) {
|
||||||
|
tmp = $(contents[i]).find('>channel').get();
|
||||||
|
ob.channels[index][i] = tmp[0];
|
||||||
|
}
|
||||||
|
ob.initiate(peer, true);
|
||||||
|
},
|
||||||
|
function (error) {
|
||||||
|
console.warn(error);
|
||||||
|
}
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
// update the channel description (payload-types + dtls fp) for a participant
|
||||||
|
ColibriFocus.prototype.updateChannel = function (remoteSDP, participant) {
|
||||||
|
console.log('change allocation for', this.confid);
|
||||||
|
var change = $iq({to: this.bridgejid, type: 'set'});
|
||||||
|
change.c('conference', {xmlns: 'http://jitsi.org/protocol/colibri', id: this.confid});
|
||||||
|
for (channel = 0; channel < this.channels[participant].length; channel++) {
|
||||||
|
change.c('content', {name: channel === 0 ? 'audio' : 'video'});
|
||||||
|
change.c('channel', {id: $(this.channels[participant][channel]).attr('id')});
|
||||||
|
|
||||||
|
var rtpmap = SDPUtil.find_lines(remoteSDP.media[channel], 'a=rtpmap:');
|
||||||
|
rtpmap.forEach(function (val) {
|
||||||
|
// TODO: too much copy-paste
|
||||||
|
var rtpmap = SDPUtil.parse_rtpmap(val);
|
||||||
|
change.c('payload-type', rtpmap);
|
||||||
|
//
|
||||||
|
// put any 'a=fmtp:' + mline.fmt[j] lines into <param name=foo value=bar/>
|
||||||
|
/*
|
||||||
|
if (SDPUtil.find_line(remoteSDP.media[channel], 'a=fmtp:' + rtpmap.id)) {
|
||||||
|
tmp = SDPUtil.parse_fmtp(SDPUtil.find_line(remoteSDP.media[channel], 'a=fmtp:' + rtpmap.id));
|
||||||
|
for (var k = 0; k < tmp.length; k++) {
|
||||||
|
change.c('parameter', tmp[k]).up();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
*/
|
||||||
|
change.up();
|
||||||
|
});
|
||||||
|
|
||||||
|
// now add transport
|
||||||
|
change.c('transport', {xmlns: 'urn:xmpp:jingle:transports:ice-udp:1'});
|
||||||
|
var fingerprints = SDPUtil.find_lines(remoteSDP.media[channel], 'a=fingerprint:', remoteSDP.session);
|
||||||
|
fingerprints.forEach(function (line) {
|
||||||
|
tmp = SDPUtil.parse_fingerprint(line);
|
||||||
|
tmp.xmlns = 'urn:xmpp:jingle:apps:dtls:0';
|
||||||
|
change.c('fingerprint').t(tmp.fingerprint);
|
||||||
|
delete tmp.fingerprint;
|
||||||
|
line = SDPUtil.find_line(remoteSDP.media[channel], 'a=setup:', remoteSDP.session);
|
||||||
|
if (line) {
|
||||||
|
tmp.setup = line.substr(8);
|
||||||
|
}
|
||||||
|
change.attrs(tmp);
|
||||||
|
change.up();
|
||||||
|
});
|
||||||
|
var candidates = SDPUtil.find_lines(remoteSDP.media[channel], 'a=candidate:', remoteSDP.session);
|
||||||
|
candidates.forEach(function (line) {
|
||||||
|
var tmp = SDPUtil.candidateToJingle(line);
|
||||||
|
change.c('candidate', tmp).up();
|
||||||
|
});
|
||||||
|
tmp = SDPUtil.iceparams(remoteSDP.media[channel], remoteSDP.session);
|
||||||
|
if (tmp) {
|
||||||
|
change.attrs(tmp);
|
||||||
|
|
||||||
|
}
|
||||||
|
change.up(); // end of transport
|
||||||
|
change.up(); // end of channel
|
||||||
|
change.up(); // end of content
|
||||||
|
}
|
||||||
|
this.connection.sendIQ(change,
|
||||||
|
function (res) {
|
||||||
|
console.log('got result');
|
||||||
|
},
|
||||||
|
function (err) {
|
||||||
|
console.log('got error');
|
||||||
|
}
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
// tell everyone about a new participants a=ssrc lines (isadd is true)
|
||||||
|
// or a leaving participants a=ssrc lines
|
||||||
|
// FIXME: should not take an SDP, but rather the a=ssrc lines and probably a=mid
|
||||||
|
ColibriFocus.prototype.sendSSRCUpdate = function (sdp, exclude, isadd) {
|
||||||
|
var ob = this;
|
||||||
|
this.peers.forEach(function (peerjid) {
|
||||||
|
if (peerjid == exclude) return;
|
||||||
|
console.log('tell', peerjid, 'about ' + (isadd ? 'new' : 'removed') + ' ssrcs from', exclude);
|
||||||
|
if (!ob.remotessrc[peerjid]) {
|
||||||
|
// FIXME: this should only send to participants that are stable, i.e. who have sent a session-accept
|
||||||
|
// possibly, this.remoteSSRC[session.peerjid] does not exist yet
|
||||||
|
console.warn('do we really want to bother', peerjid, 'with updates yet?');
|
||||||
|
}
|
||||||
|
var channel;
|
||||||
|
var peersess = ob.connection.jingle.jid2session[peerjid];
|
||||||
|
var modify = $iq({to: peerjid, type: 'set'})
|
||||||
|
.c('jingle', {
|
||||||
|
xmlns: 'urn:xmpp:jingle:1',
|
||||||
|
action: isadd ? 'addsource' : 'removesource',
|
||||||
|
initiator: peersess.initiator,
|
||||||
|
sid: peersess.sid
|
||||||
|
}
|
||||||
|
);
|
||||||
|
for (channel = 0; channel < sdp.media.length; channel++) {
|
||||||
|
tmp = SDPUtil.find_lines(sdp.media[channel], 'a=ssrc:');
|
||||||
|
modify.c('content', {name: SDPUtil.parse_mid(SDPUtil.find_line(sdp.media[channel], 'a=mid:'))});
|
||||||
|
modify.c('source', { xmlns: 'urn:xmpp:jingle:apps:rtp:ssma:0' });
|
||||||
|
// FIXME: not completly sure this operates on blocks and / or handles different ssrcs correctly
|
||||||
|
tmp.forEach(function (line) {
|
||||||
|
var idx = line.indexOf(' ');
|
||||||
|
var linessrc = line.substr(0, idx).substr(7);
|
||||||
|
modify.attrs({ssrc: linessrc});
|
||||||
|
|
||||||
|
var kv = line.substr(idx + 1);
|
||||||
|
modify.c('parameter');
|
||||||
|
if (kv.indexOf(':') == -1) {
|
||||||
|
modify.attrs({ name: kv });
|
||||||
|
} else {
|
||||||
|
modify.attrs({ name: kv.split(':', 2)[0] });
|
||||||
|
modify.attrs({ value: kv.split(':', 2)[1] });
|
||||||
|
}
|
||||||
|
modify.up();
|
||||||
|
});
|
||||||
|
modify.up(); // end of source
|
||||||
|
modify.up(); // end of content
|
||||||
|
}
|
||||||
|
ob.connection.sendIQ(modify,
|
||||||
|
function (res) {
|
||||||
|
console.warn('got modify result');
|
||||||
|
},
|
||||||
|
function (err) {
|
||||||
|
console.warn('got modify error');
|
||||||
|
}
|
||||||
|
);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
ColibriFocus.prototype.setRemoteDescription = function (session, elem, desctype) {
|
||||||
|
var participant = this.peers.indexOf(session.peerjid);
|
||||||
|
console.log('Colibri.setRemoteDescription from', session.peerjid, participant);
|
||||||
|
var ob = this;
|
||||||
|
var remoteSDP = new SDP('');
|
||||||
|
var tmp;
|
||||||
|
var channel;
|
||||||
|
remoteSDP.fromJingle(elem);
|
||||||
|
|
||||||
|
// ACT 1: change allocation on bridge
|
||||||
|
this.updateChannel(remoteSDP, participant);
|
||||||
|
|
||||||
|
// ACT 2: tell anyone else about the new SSRCs
|
||||||
|
this.sendSSRCUpdate(remoteSDP, session.peerjid, true);
|
||||||
|
|
||||||
|
// ACT 3: note the SSRCs
|
||||||
|
this.remotessrc[session.peerjid] = [];
|
||||||
|
for (channel = 0; channel < this.channels[participant].length; channel++) {
|
||||||
|
this.remotessrc[session.peerjid][channel] = SDPUtil.find_lines(remoteSDP.media[channel], 'a=ssrc:').join('\r\n') + '\r\n';
|
||||||
|
}
|
||||||
|
|
||||||
|
// ACT 4: add new a=ssrc lines to local remotedescription
|
||||||
|
for (channel = 0; channel < this.channels[participant].length; channel++) {
|
||||||
|
if (!this.addssrc[channel]) this.addssrc[channel] = '';
|
||||||
|
this.addssrc[channel] += SDPUtil.find_lines(remoteSDP.media[channel], 'a=ssrc:').join('\r\n') + '\r\n';
|
||||||
|
}
|
||||||
|
this.modifySources();
|
||||||
|
};
|
||||||
|
|
||||||
|
// relay ice candidates to bridge using trickle
|
||||||
|
ColibriFocus.prototype.addIceCandidate = function (session, elem) {
|
||||||
|
var ob = this;
|
||||||
|
var participant = this.peers.indexOf(session.peerjid);
|
||||||
|
console.log('change transport allocation for', this.confid, session.peerjid, participant);
|
||||||
|
var change = $iq({to: this.bridgejid, type: 'set'});
|
||||||
|
change.c('conference', {xmlns: 'http://jitsi.org/protocol/colibri', id: this.confid});
|
||||||
|
$(elem).each(function () {
|
||||||
|
var name = $(this).attr('name');
|
||||||
|
var channel = name == 'audio' ? 0 : 1; // FIXME: search mlineindex in localdesc
|
||||||
|
|
||||||
|
change.c('content', {name: name});
|
||||||
|
change.c('channel', {id: $(ob.channels[participant][channel]).attr('id')});
|
||||||
|
$(this).find('>transport').each(function () {
|
||||||
|
change.c('transport', {
|
||||||
|
ufrag: $(this).attr('ufrag'),
|
||||||
|
pwd: $(this).attr('pwd'),
|
||||||
|
xmlns: $(this).attr('xmlns')
|
||||||
|
});
|
||||||
|
|
||||||
|
$(this).find('>candidate').each(function () {
|
||||||
|
/* not yet
|
||||||
|
if (this.getAttribute('protocol') == 'tcp' && this.getAttribute('port') == 0) {
|
||||||
|
// chrome generates TCP candidates with port 0
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
*/
|
||||||
|
var line = SDPUtil.candidateFromJingle(this);
|
||||||
|
change.c('candidate', SDPUtil.candidateToJingle(line)).up();
|
||||||
|
});
|
||||||
|
change.up(); // end of transport
|
||||||
|
});
|
||||||
|
change.up(); // end of channel
|
||||||
|
change.up(); // end of content
|
||||||
|
});
|
||||||
|
// FIXME: need to check if there is at least one candidate when filtering TCP ones
|
||||||
|
this.connection.sendIQ(change,
|
||||||
|
function (res) {
|
||||||
|
console.log('got result');
|
||||||
|
},
|
||||||
|
function (err) {
|
||||||
|
console.warn('got error');
|
||||||
|
}
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
// send our own candidate to the bridge
|
||||||
|
ColibriFocus.prototype.sendIceCandidate = function (candidate) {
|
||||||
|
//console.log('candidate', candidate);
|
||||||
|
if (!candidate) {
|
||||||
|
console.log('end of candidates');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
var mycands = $iq({to: this.bridgejid, type: 'set'});
|
||||||
|
mycands.c('conference', {xmlns: 'http://jitsi.org/protocol/colibri', id: this.confid});
|
||||||
|
mycands.c('content', {name: candidate.sdpMid });
|
||||||
|
mycands.c('channel', {id: $(this.mychannel[candidate.sdpMLineIndex]).attr('id')});
|
||||||
|
mycands.c('transport', {xmlns: 'urn:xmpp:jingle:transports:ice-udp:1'});
|
||||||
|
tmp = SDPUtil.candidateToJingle(candidate.candidate);
|
||||||
|
mycands.c('candidate', tmp).up();
|
||||||
|
this.connection.sendIQ(mycands,
|
||||||
|
function (res) {
|
||||||
|
console.log('got result');
|
||||||
|
},
|
||||||
|
function (err) {
|
||||||
|
console.warn('got error');
|
||||||
|
}
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
ColibriFocus.prototype.terminate = function (session, reason) {
|
||||||
|
console.log('remote session terminated from', session.peerjid);
|
||||||
|
var participant = this.peers.indexOf(session.peerjid);
|
||||||
|
if (!this.remotessrc[session.peerjid] || participant == -1) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
console.log('remote ssrcs:', this.remotessrc[session.peerjid]);
|
||||||
|
var ssrcs = this.remotessrc[session.peerjid];
|
||||||
|
for (var i = 0; i < ssrcs.length; i++) {
|
||||||
|
if (!this.removessrc[i]) this.removessrc[i] = '';
|
||||||
|
this.removessrc[i] += ssrcs[i];
|
||||||
|
}
|
||||||
|
// remove from this.peers
|
||||||
|
this.peers.splice(participant, 1);
|
||||||
|
// expire channel on bridge
|
||||||
|
var change = $iq({to: this.bridgejid, type: 'set'});
|
||||||
|
change.c('conference', {xmlns: 'http://jitsi.org/protocol/colibri', id: this.confid});
|
||||||
|
for (var channel = 0; channel < this.channels[participant].length; channel++) {
|
||||||
|
change.c('content', {name: channel === 0 ? 'audio' : 'video'});
|
||||||
|
change.c('channel', {id: $(this.channels[participant][channel]).attr('id'), expire: '0'});
|
||||||
|
change.up(); // end of channel
|
||||||
|
change.up(); // end of content
|
||||||
|
}
|
||||||
|
this.connection.sendIQ(change,
|
||||||
|
function (res) {
|
||||||
|
console.log('got result');
|
||||||
|
},
|
||||||
|
function (err) {
|
||||||
|
console.log('got error');
|
||||||
|
}
|
||||||
|
);
|
||||||
|
// and remove from channels
|
||||||
|
this.channels.splice(participant, 1);
|
||||||
|
|
||||||
|
// tell everyone about the ssrcs to be removed
|
||||||
|
var sdp = new SDP('');
|
||||||
|
var localSDP = new SDP(this.peerconnection.localDescription.sdp);
|
||||||
|
var contents = SDPUtil.find_lines(localSDP.raw, 'a=mid:').map(SDPUtil.parse_mid);
|
||||||
|
for (var j = 0; j < ssrcs.length; j++) {
|
||||||
|
sdp.media[j] = 'a=mid:' + contents[j] + '\r\n';
|
||||||
|
sdp.media[j] += ssrcs[j];
|
||||||
|
this.removessrc[j] += ssrcs[j];
|
||||||
|
}
|
||||||
|
this.sendSSRCUpdate(sdp, session.peerjid, false);
|
||||||
|
|
||||||
|
delete this.remotessrc[session.peerjid];
|
||||||
|
this.modifySources();
|
||||||
|
};
|
||||||
|
|
||||||
|
ColibriFocus.prototype.modifySources = function () {
|
||||||
|
var ob = this;
|
||||||
|
if (!(this.addssrc.length || this.removessrc.length)) return;
|
||||||
|
if (this.peerconnection.signalingState == 'closed') return;
|
||||||
|
|
||||||
|
// FIXME: this is a big hack
|
||||||
|
// https://code.google.com/p/webrtc/issues/detail?id=2688
|
||||||
|
if (!(this.peerconnection.signalingState == 'stable' && this.peerconnection.iceConnectionState == 'connected')) {
|
||||||
|
console.warn('modifySources not yet', this.peerconnection.signalingState, this.peerconnection.iceConnectionState);
|
||||||
|
window.setTimeout(function () { ob.modifySources(); }, 250);
|
||||||
|
this.wait = true;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (this.wait) {
|
||||||
|
window.setTimeout(function () { ob.modifySources(); }, 2500);
|
||||||
|
this.wait = false;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
var sdp = new SDP(this.peerconnection.remoteDescription.sdp);
|
||||||
|
|
||||||
|
// add sources
|
||||||
|
this.addssrc.forEach(function (lines, idx) {
|
||||||
|
sdp.media[idx] += lines;
|
||||||
|
});
|
||||||
|
this.addssrc = [];
|
||||||
|
|
||||||
|
// remove sources
|
||||||
|
this.removessrc.forEach(function (lines, idx) {
|
||||||
|
lines = lines.split('\r\n');
|
||||||
|
lines.pop(); // remove empty last element;
|
||||||
|
lines.forEach(function (line) {
|
||||||
|
sdp.media[idx] = sdp.media[idx].replace(line + '\r\n', '');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
this.removessrc = [];
|
||||||
|
|
||||||
|
sdp.raw = sdp.session + sdp.media.join('');
|
||||||
|
this.peerconnection.setRemoteDescription(
|
||||||
|
new RTCSessionDescription({type: 'offer', sdp: sdp.raw }),
|
||||||
|
function () {
|
||||||
|
console.log('setModifiedRemoteDescription ok');
|
||||||
|
ob.peerconnection.createAnswer(
|
||||||
|
function (modifiedAnswer) {
|
||||||
|
console.log('modifiedAnswer created');
|
||||||
|
// FIXME: pushing down an answer while ice connection state
|
||||||
|
// is still checking is bad...
|
||||||
|
console.log(ob.peerconnection.iceConnectionState);
|
||||||
|
ob.peerconnection.setLocalDescription(modifiedAnswer,
|
||||||
|
function () {
|
||||||
|
console.log('setModifiedLocalDescription ok');
|
||||||
|
},
|
||||||
|
function (error) {
|
||||||
|
console.log('setModifiedLocalDescription failed');
|
||||||
|
}
|
||||||
|
);
|
||||||
|
},
|
||||||
|
function (error) {
|
||||||
|
console.log('createModifiedAnswer failed');
|
||||||
|
}
|
||||||
|
);
|
||||||
|
},
|
||||||
|
function (error) {
|
||||||
|
console.log('setModifiedRemoteDescription failed');
|
||||||
|
}
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
// A colibri session is similar to a jingle session, it just implements some things differently
|
||||||
|
// FIXME: inherit jinglesession, see https://github.com/legastero/Jingle-RTCPeerConnection/blob/master/index.js
|
||||||
|
function ColibriSession(me, sid, connection) {
|
||||||
|
this.me = me;
|
||||||
|
this.sid = sid;
|
||||||
|
this.connection = connection;
|
||||||
|
//this.peerconnection = null;
|
||||||
|
//this.mychannel = null;
|
||||||
|
//this.channels = null;
|
||||||
|
this.peerjid = null;
|
||||||
|
|
||||||
|
this.colibri = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
// implementation of JingleSession interface
|
||||||
|
ColibriSession.prototype.initiate = function (peerjid, isInitiator) {
|
||||||
|
this.peerjid = peerjid;
|
||||||
|
};
|
||||||
|
|
||||||
|
ColibriSession.prototype.sendOffer = function (offer) {
|
||||||
|
console.log('ColibriSession.sendOffer');
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
ColibriSession.prototype.accept = function () {
|
||||||
|
console.log('ColibriSession.accept');
|
||||||
|
};
|
||||||
|
|
||||||
|
ColibriSession.prototype.terminate = function (reason) {
|
||||||
|
this.colibri.terminate(this, reason);
|
||||||
|
};
|
||||||
|
|
||||||
|
ColibriSession.prototype.active = function () {
|
||||||
|
console.log('ColibriSession.active');
|
||||||
|
};
|
||||||
|
|
||||||
|
ColibriSession.prototype.setRemoteDescription = function (elem, desctype) {
|
||||||
|
this.colibri.setRemoteDescription(this, elem, desctype);
|
||||||
|
};
|
||||||
|
|
||||||
|
ColibriSession.prototype.addIceCandidate = function (elem) {
|
||||||
|
this.colibri.addIceCandidate(this, elem);
|
||||||
|
};
|
||||||
|
|
||||||
|
ColibriSession.prototype.sendAnswer = function (sdp, provisional) {
|
||||||
|
console.log('ColibriSession.sendAnswer');
|
||||||
|
};
|
||||||
|
|
||||||
|
ColibriSession.prototype.sendTerminate = function (reason, text) {
|
||||||
|
console.log('ColibriSession.sendTerminate');
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,666 @@
|
||||||
|
/*! jQuery-Impromptu - v5.1.1
|
||||||
|
* http://trentrichardson.com/Impromptu
|
||||||
|
* Copyright (c) 2013 Trent Richardson; Licensed MIT */
|
||||||
|
(function($) {
|
||||||
|
"use strict";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* setDefaults - Sets the default options
|
||||||
|
* @param message String/Object - String of html or Object of states
|
||||||
|
* @param options Object - Options to set the prompt
|
||||||
|
* @return jQuery - container with overlay and prompt
|
||||||
|
*/
|
||||||
|
$.prompt = function(message, options) {
|
||||||
|
// only for backwards compat, to be removed in future version
|
||||||
|
if(options !== undefined && options.classes !== undefined && typeof options.classes === 'string'){
|
||||||
|
options = { box: options.classes };
|
||||||
|
}
|
||||||
|
|
||||||
|
$.prompt.options = $.extend({},$.prompt.defaults,options);
|
||||||
|
$.prompt.currentPrefix = $.prompt.options.prefix;
|
||||||
|
|
||||||
|
// Be sure any previous timeouts are destroyed
|
||||||
|
if($.prompt.timeout){
|
||||||
|
clearTimeout($.prompt.timeout);
|
||||||
|
}
|
||||||
|
$.prompt.timeout = false;
|
||||||
|
|
||||||
|
var opts = $.prompt.options,
|
||||||
|
$body = $(document.body),
|
||||||
|
$window = $(window);
|
||||||
|
|
||||||
|
//build the box and fade
|
||||||
|
var msgbox = '<div class="'+ $.prompt.options.prefix +'box '+ opts.classes.box +'">';
|
||||||
|
if(opts.useiframe && ($('object, applet').length > 0)) {
|
||||||
|
msgbox += '<iframe src="javascript:false;" style="display:block;position:absolute;z-index:-1;" class="'+ opts.prefix +'fade '+ opts.classes.fade +'"></iframe>';
|
||||||
|
} else {
|
||||||
|
msgbox +='<div class="'+ opts.prefix +'fade '+ opts.classes.fade +'"></div>';
|
||||||
|
}
|
||||||
|
msgbox += '<div class="'+ opts.prefix +' '+ opts.classes.prompt +'">'+
|
||||||
|
'<form action="javascript:false;" onsubmit="return false;" class="'+ opts.prefix +'form">'+
|
||||||
|
'<div class="'+ opts.prefix +'close '+ opts.classes.close +'">'+ opts.closeText +'</div>'+
|
||||||
|
'<div class="'+ opts.prefix +'states"></div>'+
|
||||||
|
'</form>'+
|
||||||
|
'</div>'+
|
||||||
|
'</div>';
|
||||||
|
|
||||||
|
$.prompt.jqib = $(msgbox).appendTo($body);
|
||||||
|
$.prompt.jqi = $.prompt.jqib.children('.'+ opts.prefix);//.data('jqi',opts);
|
||||||
|
$.prompt.jqif = $.prompt.jqib.children('.'+ opts.prefix +'fade');
|
||||||
|
|
||||||
|
//if a string was passed, convert to a single state
|
||||||
|
if(message.constructor === String){
|
||||||
|
message = {
|
||||||
|
state0: {
|
||||||
|
title: opts.title,
|
||||||
|
html: message,
|
||||||
|
buttons: opts.buttons,
|
||||||
|
position: opts.position,
|
||||||
|
focus: opts.focus,
|
||||||
|
submit: opts.submit
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
//build the states
|
||||||
|
$.prompt.options.states = {};
|
||||||
|
var k,v;
|
||||||
|
for(k in message){
|
||||||
|
v = $.extend({},$.prompt.defaults.state,{name:k},message[k]);
|
||||||
|
$.prompt.addState(v.name, v);
|
||||||
|
|
||||||
|
if($.prompt.currentStateName === ''){
|
||||||
|
$.prompt.currentStateName = v.name;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Go ahead and transition to the first state. It won't be visible just yet though until we show the prompt
|
||||||
|
var $firstState = $.prompt.jqi.find('.'+ opts.prefix +'states .'+ opts.prefix +'state').eq(0);
|
||||||
|
$.prompt.goToState($firstState.data('jqi-name'));
|
||||||
|
|
||||||
|
//Events
|
||||||
|
$.prompt.jqi.on('click', '.'+ opts.prefix +'buttons button', function(e){
|
||||||
|
var $t = $(this),
|
||||||
|
$state = $t.parents('.'+ opts.prefix +'state'),
|
||||||
|
stateobj = $.prompt.options.states[$state.data('jqi-name')],
|
||||||
|
msg = $state.children('.'+ opts.prefix +'message'),
|
||||||
|
clicked = stateobj.buttons[$t.text()] || stateobj.buttons[$t.html()],
|
||||||
|
forminputs = {};
|
||||||
|
|
||||||
|
// if for some reason we couldn't get the value
|
||||||
|
if(clicked === undefined){
|
||||||
|
for(var i in stateobj.buttons){
|
||||||
|
if(stateobj.buttons[i].title === $t.text() || stateobj.buttons[i].title === $t.html()){
|
||||||
|
clicked = stateobj.buttons[i].value;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//collect all form element values from all states.
|
||||||
|
$.each($.prompt.jqi.children('form').serializeArray(),function(i,obj){
|
||||||
|
if (forminputs[obj.name] === undefined) {
|
||||||
|
forminputs[obj.name] = obj.value;
|
||||||
|
} else if (typeof forminputs[obj.name] === Array || typeof forminputs[obj.name] === 'object') {
|
||||||
|
forminputs[obj.name].push(obj.value);
|
||||||
|
} else {
|
||||||
|
forminputs[obj.name] = [forminputs[obj.name],obj.value];
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// trigger an event
|
||||||
|
var promptsubmite = new $.Event('impromptu:submit');
|
||||||
|
promptsubmite.stateName = stateobj.name;
|
||||||
|
promptsubmite.state = $state;
|
||||||
|
$state.trigger(promptsubmite, [clicked, msg, forminputs]);
|
||||||
|
|
||||||
|
if(!promptsubmite.isDefaultPrevented()){
|
||||||
|
$.prompt.close(true, clicked,msg,forminputs);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// if the fade is clicked blink the prompt
|
||||||
|
var fadeClicked = function(){
|
||||||
|
if(opts.persistent){
|
||||||
|
var offset = (opts.top.toString().indexOf('%') >= 0? ($window.height()*(parseInt(opts.top,10)/100)) : parseInt(opts.top,10)),
|
||||||
|
top = parseInt($.prompt.jqi.css('top').replace('px',''),10) - offset;
|
||||||
|
|
||||||
|
//$window.scrollTop(top);
|
||||||
|
$('html,body').animate({ scrollTop: top }, 'fast', function(){
|
||||||
|
var i = 0;
|
||||||
|
$.prompt.jqib.addClass(opts.prefix +'warning');
|
||||||
|
var intervalid = setInterval(function(){
|
||||||
|
$.prompt.jqib.toggleClass(opts.prefix +'warning');
|
||||||
|
if(i++ > 1){
|
||||||
|
clearInterval(intervalid);
|
||||||
|
$.prompt.jqib.removeClass(opts.prefix +'warning');
|
||||||
|
}
|
||||||
|
}, 100);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
$.prompt.close(true);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// listen for esc or tab keys
|
||||||
|
var keyPressEventHandler = function(e){
|
||||||
|
var key = (window.event) ? event.keyCode : e.keyCode;
|
||||||
|
|
||||||
|
//escape key closes
|
||||||
|
if(key===27) {
|
||||||
|
fadeClicked();
|
||||||
|
}
|
||||||
|
|
||||||
|
//constrain tabs, tabs should iterate through the state and not leave
|
||||||
|
if (key === 9){
|
||||||
|
var $inputels = $('input,select,textarea,button',$.prompt.getCurrentState());
|
||||||
|
var fwd = !e.shiftKey && e.target === $inputels[$inputels.length-1];
|
||||||
|
var back = e.shiftKey && e.target === $inputels[0];
|
||||||
|
if (fwd || back) {
|
||||||
|
setTimeout(function(){
|
||||||
|
if (!$inputels){
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
var el = $inputels[back===true ? $inputels.length-1 : 0];
|
||||||
|
|
||||||
|
if (el){
|
||||||
|
el.focus();
|
||||||
|
}
|
||||||
|
},10);
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
$.prompt.position();
|
||||||
|
$.prompt.style();
|
||||||
|
|
||||||
|
$.prompt.jqif.click(fadeClicked);
|
||||||
|
$window.resize({animate:false}, $.prompt.position);
|
||||||
|
$.prompt.jqi.find('.'+ opts.prefix +'close').click($.prompt.close);
|
||||||
|
$.prompt.jqib.on("keydown",keyPressEventHandler)
|
||||||
|
.on('impromptu:loaded', opts.loaded)
|
||||||
|
.on('impromptu:close', opts.close)
|
||||||
|
.on('impromptu:statechanging', opts.statechanging)
|
||||||
|
.on('impromptu:statechanged', opts.statechanged);
|
||||||
|
|
||||||
|
// Show it
|
||||||
|
$.prompt.jqif[opts.show](opts.overlayspeed);
|
||||||
|
$.prompt.jqi[opts.show](opts.promptspeed, function(){
|
||||||
|
$.prompt.jqib.trigger('impromptu:loaded');
|
||||||
|
});
|
||||||
|
|
||||||
|
// Timeout
|
||||||
|
if(opts.timeout > 0){
|
||||||
|
$.prompt.timeout = setTimeout(function(){ $.prompt.close(true); },opts.timeout);
|
||||||
|
}
|
||||||
|
|
||||||
|
return $.prompt.jqib;
|
||||||
|
};
|
||||||
|
|
||||||
|
$.prompt.defaults = {
|
||||||
|
prefix:'jqi',
|
||||||
|
classes: {
|
||||||
|
box: '',
|
||||||
|
fade: '',
|
||||||
|
prompt: '',
|
||||||
|
close: '',
|
||||||
|
title: '',
|
||||||
|
message: '',
|
||||||
|
buttons: '',
|
||||||
|
button: '',
|
||||||
|
defaultButton: ''
|
||||||
|
},
|
||||||
|
title: '',
|
||||||
|
closeText: '×',
|
||||||
|
buttons: {
|
||||||
|
Ok: true
|
||||||
|
},
|
||||||
|
loaded: function(e){},
|
||||||
|
submit: function(e,v,m,f){},
|
||||||
|
close: function(e,v,m,f){},
|
||||||
|
statechanging: function(e, from, to){},
|
||||||
|
statechanged: function(e, to){},
|
||||||
|
opacity: 0.6,
|
||||||
|
zIndex: 999,
|
||||||
|
overlayspeed: 'slow',
|
||||||
|
promptspeed: 'fast',
|
||||||
|
show: 'fadeIn',
|
||||||
|
focus: 0,
|
||||||
|
defaultButton: 0,
|
||||||
|
useiframe: false,
|
||||||
|
top: '15%',
|
||||||
|
position: {
|
||||||
|
container: null,
|
||||||
|
x: null,
|
||||||
|
y: null,
|
||||||
|
arrow: null,
|
||||||
|
width: null
|
||||||
|
},
|
||||||
|
persistent: true,
|
||||||
|
timeout: 0,
|
||||||
|
states: {},
|
||||||
|
state: {
|
||||||
|
name: null,
|
||||||
|
title: '',
|
||||||
|
html: '',
|
||||||
|
buttons: {
|
||||||
|
Ok: true
|
||||||
|
},
|
||||||
|
focus: 0,
|
||||||
|
defaultButton: 0,
|
||||||
|
position: {
|
||||||
|
container: null,
|
||||||
|
x: null,
|
||||||
|
y: null,
|
||||||
|
arrow: null,
|
||||||
|
width: null
|
||||||
|
},
|
||||||
|
submit: function(e,v,m,f){
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* currentPrefix String - At any time this show be the prefix
|
||||||
|
* of the current prompt ex: "jqi"
|
||||||
|
*/
|
||||||
|
$.prompt.currentPrefix = $.prompt.defaults.prefix;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* currentStateName String - At any time this is the current state
|
||||||
|
* of the current prompt ex: "state0"
|
||||||
|
*/
|
||||||
|
$.prompt.currentStateName = "";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* setDefaults - Sets the default options
|
||||||
|
* @param o Object - Options to set as defaults
|
||||||
|
* @return void
|
||||||
|
*/
|
||||||
|
$.prompt.setDefaults = function(o) {
|
||||||
|
$.prompt.defaults = $.extend({}, $.prompt.defaults, o);
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* setStateDefaults - Sets the default options for a state
|
||||||
|
* @param o Object - Options to set as defaults
|
||||||
|
* @return void
|
||||||
|
*/
|
||||||
|
$.prompt.setStateDefaults = function(o) {
|
||||||
|
$.prompt.defaults.state = $.extend({}, $.prompt.defaults.state, o);
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* position - Repositions the prompt (Used internally)
|
||||||
|
* @return void
|
||||||
|
*/
|
||||||
|
$.prompt.position = function(e){
|
||||||
|
var restoreFx = $.fx.off,
|
||||||
|
$state = $.prompt.getCurrentState(),
|
||||||
|
stateObj = $.prompt.options.states[$state.data('jqi-name')],
|
||||||
|
pos = stateObj? stateObj.position : undefined,
|
||||||
|
$window = $(window),
|
||||||
|
bodyHeight = document.body.scrollHeight, //$(document.body).outerHeight(true),
|
||||||
|
windowHeight = $(window).height(),
|
||||||
|
documentHeight = $(document).height(),
|
||||||
|
height = bodyHeight > windowHeight ? bodyHeight : windowHeight,
|
||||||
|
top = parseInt($window.scrollTop(),10) + ($.prompt.options.top.toString().indexOf('%') >= 0?
|
||||||
|
(windowHeight*(parseInt($.prompt.options.top,10)/100)) : parseInt($.prompt.options.top,10));
|
||||||
|
|
||||||
|
// when resizing the window turn off animation
|
||||||
|
if(e !== undefined && e.data.animate === false){
|
||||||
|
$.fx.off = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
$.prompt.jqib.css({
|
||||||
|
position: "absolute",
|
||||||
|
height: height,
|
||||||
|
width: "100%",
|
||||||
|
top: 0,
|
||||||
|
left: 0,
|
||||||
|
right: 0,
|
||||||
|
bottom: 0
|
||||||
|
});
|
||||||
|
$.prompt.jqif.css({
|
||||||
|
position: "fixed",
|
||||||
|
height: height,
|
||||||
|
width: "100%",
|
||||||
|
top: 0,
|
||||||
|
left: 0,
|
||||||
|
right: 0,
|
||||||
|
bottom: 0
|
||||||
|
});
|
||||||
|
|
||||||
|
// tour positioning
|
||||||
|
if(pos && pos.container){
|
||||||
|
var offset = $(pos.container).offset();
|
||||||
|
|
||||||
|
if($.isPlainObject(offset) && offset.top !== undefined){
|
||||||
|
$.prompt.jqi.css({
|
||||||
|
position: "absolute"
|
||||||
|
});
|
||||||
|
$.prompt.jqi.animate({
|
||||||
|
top: offset.top + pos.y,
|
||||||
|
left: offset.left + pos.x,
|
||||||
|
marginLeft: 0,
|
||||||
|
width: (pos.width !== undefined)? pos.width : null
|
||||||
|
});
|
||||||
|
top = (offset.top + pos.y) - ($.prompt.options.top.toString().indexOf('%') >= 0? (windowHeight*(parseInt($.prompt.options.top,10)/100)) : parseInt($.prompt.options.top,10));
|
||||||
|
$('html,body').animate({ scrollTop: top }, 'slow', 'swing', function(){});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// custom state width animation
|
||||||
|
else if(pos && pos.width){
|
||||||
|
$.prompt.jqi.css({
|
||||||
|
position: "absolute",
|
||||||
|
left: '50%'
|
||||||
|
});
|
||||||
|
$.prompt.jqi.animate({
|
||||||
|
top: pos.y || top,
|
||||||
|
left: pos.x || '50%',
|
||||||
|
marginLeft: ((pos.width/2)*-1),
|
||||||
|
width: pos.width
|
||||||
|
});
|
||||||
|
}
|
||||||
|
// standard prompt positioning
|
||||||
|
else{
|
||||||
|
$.prompt.jqi.css({
|
||||||
|
position: "absolute",
|
||||||
|
top: top,
|
||||||
|
left: '50%',//$window.width()/2,
|
||||||
|
marginLeft: (($.prompt.jqi.outerWidth(false)/2)*-1)
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// restore fx settings
|
||||||
|
if(e !== undefined && e.data.animate === false){
|
||||||
|
$.fx.off = restoreFx;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* style - Restyles the prompt (Used internally)
|
||||||
|
* @return void
|
||||||
|
*/
|
||||||
|
$.prompt.style = function(){
|
||||||
|
$.prompt.jqif.css({
|
||||||
|
zIndex: $.prompt.options.zIndex,
|
||||||
|
display: "none",
|
||||||
|
opacity: $.prompt.options.opacity
|
||||||
|
});
|
||||||
|
$.prompt.jqi.css({
|
||||||
|
zIndex: $.prompt.options.zIndex+1,
|
||||||
|
display: "none"
|
||||||
|
});
|
||||||
|
$.prompt.jqib.css({
|
||||||
|
zIndex: $.prompt.options.zIndex
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* get - Get the prompt
|
||||||
|
* @return jQuery - the prompt
|
||||||
|
*/
|
||||||
|
$.prompt.get = function(state) {
|
||||||
|
return $('.'+ $.prompt.currentPrefix);
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* addState - Injects a state into the prompt
|
||||||
|
* @param statename String - Name of the state
|
||||||
|
* @param stateobj Object - options for the state
|
||||||
|
* @param afterState String - selector of the state to insert after
|
||||||
|
* @return jQuery - the newly created state
|
||||||
|
*/
|
||||||
|
$.prompt.addState = function(statename, stateobj, afterState) {
|
||||||
|
var state = "",
|
||||||
|
$state = null,
|
||||||
|
arrow = "",
|
||||||
|
title = "",
|
||||||
|
opts = $.prompt.options,
|
||||||
|
$jqistates = $('.'+ $.prompt.currentPrefix +'states'),
|
||||||
|
defbtn,k,v,i=0;
|
||||||
|
|
||||||
|
stateobj = $.extend({},$.prompt.defaults.state, {name:statename}, stateobj);
|
||||||
|
|
||||||
|
if(stateobj.position.arrow !== null){
|
||||||
|
arrow = '<div class="'+ opts.prefix + 'arrow '+ opts.prefix + 'arrow'+ stateobj.position.arrow +'"></div>';
|
||||||
|
}
|
||||||
|
if(stateobj.title && stateobj.title !== ''){
|
||||||
|
title = '<div class="lead '+ opts.prefix + 'title '+ opts.classes.title +'">'+ stateobj.title +'</div>';
|
||||||
|
}
|
||||||
|
state += '<div id="'+ opts.prefix +'state_'+ statename +'" class="'+ opts.prefix + 'state" data-jqi-name="'+ statename +'" style="display:none;">'+
|
||||||
|
arrow + title +
|
||||||
|
'<div class="'+ opts.prefix +'message '+ opts.classes.message +'">' + stateobj.html +'</div>'+
|
||||||
|
'<div class="'+ opts.prefix +'buttons '+ opts.classes.buttons +'"'+ ($.isEmptyObject(stateobj.buttons)? 'style="display:none;"':'') +'>';
|
||||||
|
|
||||||
|
for(k in stateobj.buttons){
|
||||||
|
v = stateobj.buttons[k],
|
||||||
|
defbtn = stateobj.focus === i || (isNaN(stateobj.focus) && stateobj.defaultButton === i) ? ($.prompt.currentPrefix + 'defaultbutton ' + opts.classes.defaultButton) : '';
|
||||||
|
|
||||||
|
if(typeof v === 'object'){
|
||||||
|
state += '<button class="'+ opts.classes.button +' '+ defbtn;
|
||||||
|
|
||||||
|
if(typeof v.classes !== "undefined"){
|
||||||
|
state += ' '+ ($.isArray(v.classes)? v.classes.join(' ') : v.classes) + ' ';
|
||||||
|
}
|
||||||
|
|
||||||
|
state += '" name="' + opts.prefix + '_' + statename + '_button' + v.title.replace(/[^a-z0-9]+/gi,'') + '" id="' + opts.prefix + '_' + statename + '_button' + v.title.replace(/[^a-z0-9]+/gi,'') + '" value="' + v.value + '">' + v.title + '</button>';
|
||||||
|
|
||||||
|
} else {
|
||||||
|
state += '<button class="'+ opts.classes.button +' '+ defbtn +'" name="' + opts.prefix + '_' + statename + '_button' + k + '" id="' + opts.prefix + '_' + statename + '_button' + k + '" value="' + v + '">' + k + '</button>';
|
||||||
|
|
||||||
|
}
|
||||||
|
i++;
|
||||||
|
}
|
||||||
|
state += '</div></div>';
|
||||||
|
|
||||||
|
$state = $(state);
|
||||||
|
|
||||||
|
$state.on('impromptu:submit', stateobj.submit);
|
||||||
|
|
||||||
|
if(afterState !== undefined){
|
||||||
|
$jqistates.find('#'+ $.prompt.currentPrefix +'state_'+ afterState).after($state);
|
||||||
|
}
|
||||||
|
else{
|
||||||
|
$jqistates.append($state);
|
||||||
|
}
|
||||||
|
|
||||||
|
$.prompt.options.states[statename] = stateobj;
|
||||||
|
|
||||||
|
return $state;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* removeState - Removes a state from the promt
|
||||||
|
* @param state String - Name of the state
|
||||||
|
* @return Boolean - returns true on success, false on failure
|
||||||
|
*/
|
||||||
|
$.prompt.removeState = function(state) {
|
||||||
|
var $state = $.prompt.getState(state),
|
||||||
|
rm = function(){ $state.remove(); };
|
||||||
|
|
||||||
|
if($state.length === 0){
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
// transition away from it before deleting
|
||||||
|
if($state.is(':visible')){
|
||||||
|
if($state.next().length > 0){
|
||||||
|
$.prompt.nextState(rm);
|
||||||
|
}
|
||||||
|
else{
|
||||||
|
$.prompt.prevState(rm);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else{
|
||||||
|
$state.slideUp('slow', rm);
|
||||||
|
}
|
||||||
|
|
||||||
|
return true;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* getState - Get the state by its name
|
||||||
|
* @param state String - Name of the state
|
||||||
|
* @return jQuery - the state
|
||||||
|
*/
|
||||||
|
$.prompt.getState = function(state) {
|
||||||
|
return $('#'+ $.prompt.currentPrefix +'state_'+ state);
|
||||||
|
};
|
||||||
|
$.prompt.getStateContent = function(state) {
|
||||||
|
return $.prompt.getState(state);
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* getCurrentState - Get the current visible state
|
||||||
|
* @return jQuery - the current visible state
|
||||||
|
*/
|
||||||
|
$.prompt.getCurrentState = function() {
|
||||||
|
return $.prompt.getState($.prompt.getCurrentStateName());
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* getCurrentStateName - Get the name of the current visible state
|
||||||
|
* @return String - the current visible state's name
|
||||||
|
*/
|
||||||
|
$.prompt.getCurrentStateName = function() {
|
||||||
|
return $.prompt.currentStateName;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* goToState - Goto the specified state
|
||||||
|
* @param state String - name of the state to transition to
|
||||||
|
* @param subState Boolean - true to be a sub state within the currently open state
|
||||||
|
* @param callback Function - called when the transition is complete
|
||||||
|
* @return jQuery - the newly active state
|
||||||
|
*/
|
||||||
|
$.prompt.goToState = function(state, subState, callback) {
|
||||||
|
var $jqi = $.prompt.get(),
|
||||||
|
jqiopts = $.prompt.options,
|
||||||
|
$state = $.prompt.getState(state),
|
||||||
|
stateobj = jqiopts.states[$state.data('jqi-name')],
|
||||||
|
promptstatechanginge = new $.Event('impromptu:statechanging');
|
||||||
|
|
||||||
|
// subState can be ommitted
|
||||||
|
if(typeof subState === 'function'){
|
||||||
|
callback = subState;
|
||||||
|
subState = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
$.prompt.jqib.trigger(promptstatechanginge, [$.prompt.getCurrentStateName(), state]);
|
||||||
|
|
||||||
|
if(!promptstatechanginge.isDefaultPrevented() && $state.length > 0){
|
||||||
|
$.prompt.jqi.find('.'+ $.prompt.currentPrefix +'parentstate').removeClass($.prompt.currentPrefix +'parentstate');
|
||||||
|
|
||||||
|
if(subState){ // hide any open substates
|
||||||
|
// get rid of any substates
|
||||||
|
$.prompt.jqi.find('.'+ $.prompt.currentPrefix +'substate').not($state)
|
||||||
|
.slideUp(jqiopts.promptspeed)
|
||||||
|
.removeClass('.'+ $.prompt.currentPrefix +'substate')
|
||||||
|
.find('.'+ $.prompt.currentPrefix +'arrow').hide();
|
||||||
|
|
||||||
|
// add parent state class so it can be visible, but blocked
|
||||||
|
$.prompt.jqi.find('.'+ $.prompt.currentPrefix +'state:visible').addClass($.prompt.currentPrefix +'parentstate');
|
||||||
|
|
||||||
|
// add substate class so we know it will be smaller
|
||||||
|
$state.addClass($.prompt.currentPrefix +'substate');
|
||||||
|
}
|
||||||
|
else{ // hide any open states
|
||||||
|
$.prompt.jqi.find('.'+ $.prompt.currentPrefix +'state').not($state)
|
||||||
|
.slideUp(jqiopts.promptspeed)
|
||||||
|
.find('.'+ $.prompt.currentPrefix +'arrow').hide();
|
||||||
|
}
|
||||||
|
$.prompt.currentStateName = stateobj.name;
|
||||||
|
|
||||||
|
$state.slideDown(jqiopts.promptspeed,function(){
|
||||||
|
var $t = $(this);
|
||||||
|
|
||||||
|
// if focus is a selector, find it, else its button index
|
||||||
|
if(typeof(stateobj.focus) === 'string'){
|
||||||
|
$t.find(stateobj.focus).eq(0).focus();
|
||||||
|
}
|
||||||
|
else{
|
||||||
|
$t.find('.'+ $.prompt.currentPrefix +'defaultbutton').focus();
|
||||||
|
}
|
||||||
|
|
||||||
|
$t.find('.'+ $.prompt.currentPrefix +'arrow').show(jqiopts.promptspeed);
|
||||||
|
|
||||||
|
if (typeof callback === 'function'){
|
||||||
|
$.prompt.jqib.on('impromptu:statechanged', callback);
|
||||||
|
}
|
||||||
|
$.prompt.jqib.trigger('impromptu:statechanged', [state]);
|
||||||
|
if (typeof callback === 'function'){
|
||||||
|
$.prompt.jqib.off('impromptu:statechanged', callback);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
if(!subState){
|
||||||
|
$.prompt.position();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return $state;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* nextState - Transition to the next state
|
||||||
|
* @param callback Function - called when the transition is complete
|
||||||
|
* @return jQuery - the newly active state
|
||||||
|
*/
|
||||||
|
$.prompt.nextState = function(callback) {
|
||||||
|
var $next = $('#'+ $.prompt.currentPrefix +'state_'+ $.prompt.getCurrentStateName()).next();
|
||||||
|
return $.prompt.goToState( $next.attr('id').replace($.prompt.currentPrefix +'state_',''), callback );
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* prevState - Transition to the previous state
|
||||||
|
* @param callback Function - called when the transition is complete
|
||||||
|
* @return jQuery - the newly active state
|
||||||
|
*/
|
||||||
|
$.prompt.prevState = function(callback) {
|
||||||
|
var $prev = $('#'+ $.prompt.currentPrefix +'state_'+ $.prompt.getCurrentStateName()).prev();
|
||||||
|
$.prompt.goToState( $prev.attr('id').replace($.prompt.currentPrefix +'state_',''), callback );
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* close - Closes the prompt
|
||||||
|
* @param callback Function - called when the transition is complete
|
||||||
|
* @param clicked String - value of the button clicked (only used internally)
|
||||||
|
* @param msg jQuery - The state message body (only used internally)
|
||||||
|
* @param forvals Object - key/value pairs of all form field names and values (only used internally)
|
||||||
|
* @return jQuery - the newly active state
|
||||||
|
*/
|
||||||
|
$.prompt.close = function(callCallback, clicked, msg, formvals){
|
||||||
|
if($.prompt.timeout){
|
||||||
|
clearTimeout($.prompt.timeout);
|
||||||
|
$.prompt.timeout = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
$.prompt.jqib.fadeOut('fast',function(){
|
||||||
|
|
||||||
|
if(callCallback) {
|
||||||
|
$.prompt.jqib.trigger('impromptu:close', [clicked,msg,formvals]);
|
||||||
|
}
|
||||||
|
$.prompt.jqib.remove();
|
||||||
|
|
||||||
|
$(window).off('resize',$.prompt.position);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Enable using $('.selector').prompt({});
|
||||||
|
* This will grab the html within the prompt as the prompt message
|
||||||
|
*/
|
||||||
|
$.fn.prompt = function(options){
|
||||||
|
if(options === undefined){
|
||||||
|
options = {};
|
||||||
|
}
|
||||||
|
if(options.withDataAndEvents === undefined){
|
||||||
|
options.withDataAndEvents = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
$.prompt($(this).clone(options.withDataAndEvents).html(),options);
|
||||||
|
};
|
||||||
|
|
||||||
|
})(jQuery);
|
||||||
|
|
@ -0,0 +1,250 @@
|
||||||
|
/*!
|
||||||
|
Autosize v1.18.1 - 2013-11-05
|
||||||
|
Automatically adjust textarea height based on user input.
|
||||||
|
(c) 2013 Jack Moore - http://www.jacklmoore.com/autosize
|
||||||
|
license: http://www.opensource.org/licenses/mit-license.php
|
||||||
|
*/
|
||||||
|
(function ($) {
|
||||||
|
var
|
||||||
|
defaults = {
|
||||||
|
className: 'autosizejs',
|
||||||
|
append: '',
|
||||||
|
callback: false,
|
||||||
|
resizeDelay: 10
|
||||||
|
},
|
||||||
|
|
||||||
|
// border:0 is unnecessary, but avoids a bug in Firefox on OSX
|
||||||
|
copy = '<textarea tabindex="-1" style="position:absolute; top:-999px; left:0; right:auto; bottom:auto; border:0; padding: 0; -moz-box-sizing:content-box; -webkit-box-sizing:content-box; box-sizing:content-box; word-wrap:break-word; height:0 !important; min-height:0 !important; overflow:hidden; transition:none; -webkit-transition:none; -moz-transition:none;"/>',
|
||||||
|
|
||||||
|
// line-height is conditionally included because IE7/IE8/old Opera do not return the correct value.
|
||||||
|
typographyStyles = [
|
||||||
|
'fontFamily',
|
||||||
|
'fontSize',
|
||||||
|
'fontWeight',
|
||||||
|
'fontStyle',
|
||||||
|
'letterSpacing',
|
||||||
|
'textTransform',
|
||||||
|
'wordSpacing',
|
||||||
|
'textIndent'
|
||||||
|
],
|
||||||
|
|
||||||
|
// to keep track which textarea is being mirrored when adjust() is called.
|
||||||
|
mirrored,
|
||||||
|
|
||||||
|
// the mirror element, which is used to calculate what size the mirrored element should be.
|
||||||
|
mirror = $(copy).data('autosize', true)[0];
|
||||||
|
|
||||||
|
// test that line-height can be accurately copied.
|
||||||
|
mirror.style.lineHeight = '99px';
|
||||||
|
if ($(mirror).css('lineHeight') === '99px') {
|
||||||
|
typographyStyles.push('lineHeight');
|
||||||
|
}
|
||||||
|
mirror.style.lineHeight = '';
|
||||||
|
|
||||||
|
$.fn.autosize = function (options) {
|
||||||
|
if (!this.length) {
|
||||||
|
return this;
|
||||||
|
}
|
||||||
|
|
||||||
|
options = $.extend({}, defaults, options || {});
|
||||||
|
|
||||||
|
if (mirror.parentNode !== document.body) {
|
||||||
|
$(document.body).append(mirror);
|
||||||
|
}
|
||||||
|
|
||||||
|
return this.each(function () {
|
||||||
|
var
|
||||||
|
ta = this,
|
||||||
|
$ta = $(ta),
|
||||||
|
maxHeight,
|
||||||
|
minHeight,
|
||||||
|
boxOffset = 0,
|
||||||
|
callback = $.isFunction(options.callback),
|
||||||
|
originalStyles = {
|
||||||
|
height: ta.style.height,
|
||||||
|
overflow: ta.style.overflow,
|
||||||
|
overflowY: ta.style.overflowY,
|
||||||
|
wordWrap: ta.style.wordWrap,
|
||||||
|
resize: ta.style.resize
|
||||||
|
},
|
||||||
|
timeout,
|
||||||
|
width = $ta.width();
|
||||||
|
|
||||||
|
if ($ta.data('autosize')) {
|
||||||
|
// exit if autosize has already been applied, or if the textarea is the mirror element.
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
$ta.data('autosize', true);
|
||||||
|
|
||||||
|
if ($ta.css('box-sizing') === 'border-box' || $ta.css('-moz-box-sizing') === 'border-box' || $ta.css('-webkit-box-sizing') === 'border-box'){
|
||||||
|
boxOffset = $ta.outerHeight() - $ta.height();
|
||||||
|
}
|
||||||
|
|
||||||
|
// IE8 and lower return 'auto', which parses to NaN, if no min-height is set.
|
||||||
|
minHeight = Math.max(parseInt($ta.css('minHeight'), 10) - boxOffset || 0, $ta.height());
|
||||||
|
|
||||||
|
$ta.css({
|
||||||
|
overflow: 'hidden',
|
||||||
|
overflowY: 'hidden',
|
||||||
|
wordWrap: 'break-word', // horizontal overflow is hidden, so break-word is necessary for handling words longer than the textarea width
|
||||||
|
resize: ($ta.css('resize') === 'none' || $ta.css('resize') === 'vertical') ? 'none' : 'horizontal'
|
||||||
|
});
|
||||||
|
|
||||||
|
// The mirror width must exactly match the textarea width, so using getBoundingClientRect because it doesn't round the sub-pixel value.
|
||||||
|
function setWidth() {
|
||||||
|
var style, width;
|
||||||
|
|
||||||
|
if ('getComputedStyle' in window) {
|
||||||
|
style = window.getComputedStyle(ta, null);
|
||||||
|
width = ta.getBoundingClientRect().width;
|
||||||
|
|
||||||
|
$.each(['paddingLeft', 'paddingRight', 'borderLeftWidth', 'borderRightWidth'], function(i,val){
|
||||||
|
width -= parseInt(style[val],10);
|
||||||
|
});
|
||||||
|
|
||||||
|
mirror.style.width = width + 'px';
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
// window.getComputedStyle, getBoundingClientRect returning a width are unsupported and unneeded in IE8 and lower.
|
||||||
|
mirror.style.width = Math.max($ta.width(), 0) + 'px';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function initMirror() {
|
||||||
|
var styles = {};
|
||||||
|
|
||||||
|
mirrored = ta;
|
||||||
|
mirror.className = options.className;
|
||||||
|
maxHeight = parseInt($ta.css('maxHeight'), 10);
|
||||||
|
|
||||||
|
// mirror is a duplicate textarea located off-screen that
|
||||||
|
// is automatically updated to contain the same text as the
|
||||||
|
// original textarea. mirror always has a height of 0.
|
||||||
|
// This gives a cross-browser supported way getting the actual
|
||||||
|
// height of the text, through the scrollTop property.
|
||||||
|
$.each(typographyStyles, function(i,val){
|
||||||
|
styles[val] = $ta.css(val);
|
||||||
|
});
|
||||||
|
$(mirror).css(styles);
|
||||||
|
|
||||||
|
setWidth();
|
||||||
|
|
||||||
|
// Chrome-specific fix:
|
||||||
|
// When the textarea y-overflow is hidden, Chrome doesn't reflow the text to account for the space
|
||||||
|
// made available by removing the scrollbar. This workaround triggers the reflow for Chrome.
|
||||||
|
if (window.chrome) {
|
||||||
|
var width = ta.style.width;
|
||||||
|
ta.style.width = '0px';
|
||||||
|
var ignore = ta.offsetWidth;
|
||||||
|
ta.style.width = width;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Using mainly bare JS in this function because it is going
|
||||||
|
// to fire very often while typing, and needs to very efficient.
|
||||||
|
function adjust() {
|
||||||
|
var height, original;
|
||||||
|
|
||||||
|
if (mirrored !== ta) {
|
||||||
|
initMirror();
|
||||||
|
} else {
|
||||||
|
setWidth();
|
||||||
|
}
|
||||||
|
|
||||||
|
mirror.value = ta.value + options.append;
|
||||||
|
mirror.style.overflowY = ta.style.overflowY;
|
||||||
|
original = parseInt(ta.style.height,10);
|
||||||
|
|
||||||
|
// Setting scrollTop to zero is needed in IE8 and lower for the next step to be accurately applied
|
||||||
|
mirror.scrollTop = 0;
|
||||||
|
|
||||||
|
mirror.scrollTop = 9e4;
|
||||||
|
|
||||||
|
// Using scrollTop rather than scrollHeight because scrollHeight is non-standard and includes padding.
|
||||||
|
height = mirror.scrollTop;
|
||||||
|
|
||||||
|
if (maxHeight && height > maxHeight) {
|
||||||
|
ta.style.overflowY = 'scroll';
|
||||||
|
height = maxHeight;
|
||||||
|
} else {
|
||||||
|
ta.style.overflowY = 'hidden';
|
||||||
|
if (height < minHeight) {
|
||||||
|
height = minHeight;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
height += boxOffset;
|
||||||
|
|
||||||
|
if (original !== height) {
|
||||||
|
ta.style.height = height + 'px';
|
||||||
|
if (callback) {
|
||||||
|
options.callback.call(ta,ta);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function resize () {
|
||||||
|
clearTimeout(timeout);
|
||||||
|
timeout = setTimeout(function(){
|
||||||
|
var newWidth = $ta.width();
|
||||||
|
|
||||||
|
if (newWidth !== width) {
|
||||||
|
width = newWidth;
|
||||||
|
adjust();
|
||||||
|
}
|
||||||
|
}, parseInt(options.resizeDelay,10));
|
||||||
|
}
|
||||||
|
|
||||||
|
if ('onpropertychange' in ta) {
|
||||||
|
if ('oninput' in ta) {
|
||||||
|
// Detects IE9. IE9 does not fire onpropertychange or oninput for deletions,
|
||||||
|
// so binding to onkeyup to catch most of those occasions. There is no way that I
|
||||||
|
// know of to detect something like 'cut' in IE9.
|
||||||
|
$ta.on('input.autosize keyup.autosize', adjust);
|
||||||
|
} else {
|
||||||
|
// IE7 / IE8
|
||||||
|
$ta.on('propertychange.autosize', function(){
|
||||||
|
if(event.propertyName === 'value'){
|
||||||
|
adjust();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
// Modern Browsers
|
||||||
|
$ta.on('input.autosize', adjust);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Set options.resizeDelay to false if using fixed-width textarea elements.
|
||||||
|
// Uses a timeout and width check to reduce the amount of times adjust needs to be called after window resize.
|
||||||
|
|
||||||
|
if (options.resizeDelay !== false) {
|
||||||
|
$(window).on('resize.autosize', resize);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Event for manual triggering if needed.
|
||||||
|
// Should only be needed when the value of the textarea is changed through JavaScript rather than user input.
|
||||||
|
$ta.on('autosize.resize', adjust);
|
||||||
|
|
||||||
|
// Event for manual triggering that also forces the styles to update as well.
|
||||||
|
// Should only be needed if one of typography styles of the textarea change, and the textarea is already the target of the adjust method.
|
||||||
|
$ta.on('autosize.resizeIncludeStyle', function() {
|
||||||
|
mirrored = null;
|
||||||
|
adjust();
|
||||||
|
});
|
||||||
|
|
||||||
|
$ta.on('autosize.destroy', function(){
|
||||||
|
mirrored = null;
|
||||||
|
clearTimeout(timeout);
|
||||||
|
$(window).off('resize', resize);
|
||||||
|
$ta
|
||||||
|
.off('autosize')
|
||||||
|
.off('.autosize')
|
||||||
|
.css(originalStyles)
|
||||||
|
.removeData('autosize');
|
||||||
|
});
|
||||||
|
|
||||||
|
// Call adjust in case the textarea already contains text.
|
||||||
|
adjust();
|
||||||
|
});
|
||||||
|
};
|
||||||
|
}(window.jQuery || window.$)); // jQuery or jQuery-like library, such as Zepto
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,139 @@
|
||||||
|
/* jshint -W117 */
|
||||||
|
/* a simple MUC connection plugin
|
||||||
|
* can only handle a single MUC room
|
||||||
|
*/
|
||||||
|
Strophe.addConnectionPlugin('emuc', {
|
||||||
|
connection: null,
|
||||||
|
roomjid: null,
|
||||||
|
myroomjid: null,
|
||||||
|
members: {},
|
||||||
|
isOwner: false,
|
||||||
|
init: function (conn) {
|
||||||
|
this.connection = conn;
|
||||||
|
},
|
||||||
|
doJoin: function (jid, password) {
|
||||||
|
this.myroomjid = jid;
|
||||||
|
if (!this.roomjid) {
|
||||||
|
this.roomjid = Strophe.getBareJidFromJid(jid);
|
||||||
|
// add handlers (just once)
|
||||||
|
this.connection.addHandler(this.onPresence.bind(this), null, 'presence', null, null, this.roomjid, {matchBare: true});
|
||||||
|
this.connection.addHandler(this.onPresenceUnavailable.bind(this), null, 'presence', 'unavailable', null, this.roomjid, {matchBare: true});
|
||||||
|
this.connection.addHandler(this.onPresenceError.bind(this), null, 'presence', 'error', null, this.roomjid, {matchBare: true});
|
||||||
|
this.connection.addHandler(this.onMessage.bind(this), null, 'message', null, null, this.roomjid, {matchBare: true});
|
||||||
|
}
|
||||||
|
|
||||||
|
var join = $pres({to: this.myroomjid }).c('x', {xmlns: 'http://jabber.org/protocol/muc'});
|
||||||
|
if (password !== null) {
|
||||||
|
join.c('password').t(password);
|
||||||
|
}
|
||||||
|
this.connection.send(join);
|
||||||
|
},
|
||||||
|
onPresence: function (pres) {
|
||||||
|
var from = pres.getAttribute('from');
|
||||||
|
var type = pres.getAttribute('type');
|
||||||
|
if (type != null) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
if ($(pres).find('>x[xmlns="http://jabber.org/protocol/muc#user"]>status[code="201"]').length) {
|
||||||
|
// http://xmpp.org/extensions/xep-0045.html#createroom-instant
|
||||||
|
this.isOwner = true;
|
||||||
|
var create = $iq({type: 'set', to: this.roomjid})
|
||||||
|
.c('query', {xmlns: 'http://jabber.org/protocol/muc#owner'})
|
||||||
|
.c('x', {xmlns: 'jabber:x:data', type: 'submit'});
|
||||||
|
this.connection.send(create); // fire away
|
||||||
|
}
|
||||||
|
|
||||||
|
var member = {};
|
||||||
|
member.show = $(pres).find('>show').text();
|
||||||
|
member.status = $(pres).find('>status').text();
|
||||||
|
var tmp = $(pres).find('>x[xmlns="http://jabber.org/protocol/muc#user"]>item');
|
||||||
|
member.affilication = tmp.attr('affiliation');
|
||||||
|
member.role = tmp.attr('role');
|
||||||
|
if (from == this.myroomjid) {
|
||||||
|
$(document).trigger('joined.muc', [from, member]);
|
||||||
|
} else if (this.members[from] === undefined) {
|
||||||
|
// new participant
|
||||||
|
this.members[from] = member;
|
||||||
|
$(document).trigger('entered.muc', [from, member]);
|
||||||
|
} else {
|
||||||
|
console.log('presence change from', from);
|
||||||
|
}
|
||||||
|
return true;
|
||||||
|
},
|
||||||
|
onPresenceUnavailable: function (pres) {
|
||||||
|
var from = pres.getAttribute('from');
|
||||||
|
delete this.members[from];
|
||||||
|
$(document).trigger('left.muc', [from]);
|
||||||
|
return true;
|
||||||
|
},
|
||||||
|
onPresenceError: function (pres) {
|
||||||
|
var from = pres.getAttribute('from');
|
||||||
|
if ($(pres).find('>error[type="auth"]>not-authorized[xmlns="urn:ietf:params:xml:ns:xmpp-stanzas"]').length) {
|
||||||
|
$(document).trigger('passwordrequired.muc', [from]);
|
||||||
|
|
||||||
|
// FIXME: remove once moved to passwordrequired which should reuse dojoin
|
||||||
|
var ob = this;
|
||||||
|
window.setTimeout(function () {
|
||||||
|
var given = window.prompt('Password required');
|
||||||
|
if (given != null) {
|
||||||
|
// FIXME: reuse doJoin?
|
||||||
|
ob.connection.send($pres({to: ob.myroomjid }).c('x', {xmlns: 'http://jabber.org/protocol/muc'}).c('password').t(given));
|
||||||
|
} else {
|
||||||
|
// user aborted
|
||||||
|
}
|
||||||
|
}, 50);
|
||||||
|
} else {
|
||||||
|
console.warn('onPresError ', pres);
|
||||||
|
}
|
||||||
|
return true;
|
||||||
|
},
|
||||||
|
sendMessage: function (body, nickname) {
|
||||||
|
var msg = $msg({to: this.roomjid, type: 'groupchat'});
|
||||||
|
msg.c('body', body).up();
|
||||||
|
if (nickname) {
|
||||||
|
msg.c('nick', {xmlns: 'http://jabber.org/protocol/nick'}).t(nickname).up().up();
|
||||||
|
}
|
||||||
|
this.connection.send(msg);
|
||||||
|
},
|
||||||
|
onMessage: function (msg) {
|
||||||
|
var txt = $(msg).find('>body').text();
|
||||||
|
// TODO: <subject/>
|
||||||
|
// FIXME: this is a hack. but jingle on muc makes nickchanges hard
|
||||||
|
var nick = $(msg).find('>nick[xmlns="http://jabber.org/protocol/nick"]').text() || Strophe.getResourceFromJid(msg.getAttribute('from'));
|
||||||
|
if (txt) {
|
||||||
|
console.log('chat', nick, txt);
|
||||||
|
|
||||||
|
updateChatConversation(nick, txt);
|
||||||
|
}
|
||||||
|
return true;
|
||||||
|
},
|
||||||
|
lockRoom: function (key) {
|
||||||
|
//http://xmpp.org/extensions/xep-0045.html#roomconfig
|
||||||
|
var ob = this;
|
||||||
|
this.connection.sendIQ($iq({to: this.roomjid, type: 'get'}).c('query', {xmlns: 'http://jabber.org/protocol/muc#owner'}),
|
||||||
|
function (res) {
|
||||||
|
if ($(res).find('>query>x[xmlns="jabber:x:data"]>field[var="muc#roomconfig_roomsecret"]').length) {
|
||||||
|
var formsubmit = $iq({to: ob.roomjid, type: 'set'}).c('query', {xmlns: 'http://jabber.org/protocol/muc#owner'});
|
||||||
|
formsubmit.c('x', {xmlns: 'jabber:x:data', type: 'submit'});
|
||||||
|
formsubmit.c('field', {'var': 'FORM_TYPE'}).c('value').t('http://jabber.org/protocol/muc#roomconfig').up().up();
|
||||||
|
formsubmit.c('field', {'var': 'muc#roomconfig_roomsecret'}).c('value').t(key).up().up();
|
||||||
|
// FIXME: is muc#roomconfig_passwordprotectedroom required?
|
||||||
|
this.connection.sendIQ(formsubmit,
|
||||||
|
function (res) {
|
||||||
|
console.log('set room password');
|
||||||
|
},
|
||||||
|
function (err) {
|
||||||
|
console.warn('setting password failed', err);
|
||||||
|
}
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
console.warn('room passwords not supported');
|
||||||
|
}
|
||||||
|
},
|
||||||
|
function (err) {
|
||||||
|
console.warn('setting password failed', err);
|
||||||
|
}
|
||||||
|
);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
Sorry, webrtc is required for this and your browser does not seem to support it.
|
||||||
Loading…
Reference in New Issue