mirror of https://github.com/xwiki-labs/cryptpad
Jitsi integration in a side panel of pads
This commit is contained in:
parent
605aae222c
commit
46bc63de67
|
@ -154,7 +154,6 @@ module.exports = {
|
||||||
*/
|
*/
|
||||||
//defaultStorageLimit: 50 * 1024 * 1024,
|
//defaultStorageLimit: 50 * 1024 * 1024,
|
||||||
|
|
||||||
|
|
||||||
/* =====================
|
/* =====================
|
||||||
* STORAGE
|
* STORAGE
|
||||||
* ===================== */
|
* ===================== */
|
||||||
|
|
|
@ -154,6 +154,76 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.cp-toolbar-videoconf-drawer {
|
||||||
|
background-color: @toolbar-bg-color;
|
||||||
|
background-color: var(--toolbar-bg-color);
|
||||||
|
font: @colortheme_app-font-size @colortheme_font;
|
||||||
|
width: 20%;
|
||||||
|
min-width: 200px;
|
||||||
|
display: block;
|
||||||
|
overflow-y: auto;
|
||||||
|
overflow-x: hidden;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
position: relative;
|
||||||
|
order: -2;
|
||||||
|
resize: horizontal;
|
||||||
|
z-index: 1;
|
||||||
|
#cp-app-videoconf-container {
|
||||||
|
span {
|
||||||
|
display: block;
|
||||||
|
margin: auto;
|
||||||
|
width: 80%;
|
||||||
|
padding: 20px;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
button {
|
||||||
|
margin: auto;
|
||||||
|
padding-top: 20px;
|
||||||
|
padding-bottom: 20px;
|
||||||
|
display: block;
|
||||||
|
min-width: 230px;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
height: 100%;
|
||||||
|
text-align: center;
|
||||||
|
iframe {
|
||||||
|
display: block;
|
||||||
|
width: 300px;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.cp-toolbar-videoconf-drawer-size {
|
||||||
|
color: @toolbar-color;
|
||||||
|
color: var(--toolbar-color);
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 30px;
|
||||||
|
font-size: 15px;
|
||||||
|
opacity: 0.5;
|
||||||
|
cursor: pointer;
|
||||||
|
text-shadow: unset;
|
||||||
|
&:hover {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.cp-toolbar-videoconf-drawer-close {
|
||||||
|
color: @toolbar-color;
|
||||||
|
color: var(--toolbar-color);
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 1px;
|
||||||
|
font-size: 15px;
|
||||||
|
opacity: 0.5;
|
||||||
|
cursor: pointer;
|
||||||
|
text-shadow: unset;
|
||||||
|
&:hover {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.cp-toolbar-chat-drawer {
|
.cp-toolbar-chat-drawer {
|
||||||
background-color: @toolbar-bg-color;
|
background-color: @toolbar-bg-color;
|
||||||
background-color: var(--toolbar-bg-color);
|
background-color: var(--toolbar-bg-color);
|
||||||
|
@ -1069,8 +1139,9 @@
|
||||||
|
|
||||||
#cp-toolbar-userlist-drawer-open { order: 0; }
|
#cp-toolbar-userlist-drawer-open { order: 0; }
|
||||||
#cp-toolbar-chat-drawer-open { order: 1; }
|
#cp-toolbar-chat-drawer-open { order: 1; }
|
||||||
.cp-toolbar-share-button { order: 2; }
|
#cp-toolbar-videoconf-drawer-open { order: 2; }
|
||||||
.cp-toolbar-spinner { order: 3; }
|
.cp-toolbar-share-button { order: 3; }
|
||||||
|
.cp-toolbar-spinner { order: 4; }
|
||||||
|
|
||||||
#cp-toolbar-userlist-drawer-open button {
|
#cp-toolbar-userlist-drawer-open button {
|
||||||
width: 125px;
|
width: 125px;
|
||||||
|
@ -1081,6 +1152,11 @@
|
||||||
animation: notification 2s ease-in-out infinite;
|
animation: notification 2s ease-in-out infinite;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
#cp-toolbar-videoconf-drawer-open button {
|
||||||
|
&.cp-toolbar-notification {
|
||||||
|
animation: notification 2s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
}
|
||||||
.cp-toolbar-share-button {
|
.cp-toolbar-share-button {
|
||||||
width: 50px;
|
width: 50px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
|
@ -9,4 +9,4 @@
|
||||||
<link href="/customize/src/outer.css" rel="stylesheet" type="text/css">
|
<link href="/customize/src/outer.css" rel="stylesheet" type="text/css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<iframe id="sbox-iframe">
|
<iframe id="sbox-iframe" allow="microphone *;camera *">
|
||||||
|
|
|
@ -173,5 +173,9 @@ define(function() {
|
||||||
// You can change the value here.
|
// You can change the value here.
|
||||||
// config.maxOwnedTeams = 1;
|
// config.maxOwnedTeams = 1;
|
||||||
|
|
||||||
|
// Integrations
|
||||||
|
// JITSI Integration
|
||||||
|
config.conferencingURL = "https://meet.jit.si/";
|
||||||
|
|
||||||
return config;
|
return config;
|
||||||
});
|
});
|
||||||
|
|
|
@ -649,6 +649,7 @@ define([
|
||||||
}, onLocal);
|
}, onLocal);
|
||||||
var configTb = {
|
var configTb = {
|
||||||
displayed: [
|
displayed: [
|
||||||
|
'videoconf',
|
||||||
'chat',
|
'chat',
|
||||||
'userlist',
|
'userlist',
|
||||||
'title',
|
'title',
|
||||||
|
|
|
@ -356,6 +356,7 @@ MessengerUI, Messages) {
|
||||||
$span.append($rightCol);
|
$span.append($rightCol);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
$span.data('uid', data.uid);
|
$span.data('uid', data.uid);
|
||||||
$editUsersList.append($span);
|
$editUsersList.append($span);
|
||||||
});
|
});
|
||||||
|
@ -442,6 +443,115 @@ MessengerUI, Messages) {
|
||||||
return $container;
|
return $container;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
|
var initVideoConf = function (toolbar, config) {
|
||||||
|
var $container = $('<div>', {
|
||||||
|
id: 'cp-app-videoconf-container',
|
||||||
|
'class': 'cp-app-videoconf-inapp'
|
||||||
|
}).prependTo(toolbar.videoconfContent);
|
||||||
|
|
||||||
|
var baseURL = (Config.conferencingURL) ? Config.conferencingURL : 'https://meet.jit.si/';
|
||||||
|
var pd = config.metadataMgr.getPrivateData();
|
||||||
|
var cid = pd.channel;
|
||||||
|
|
||||||
|
var $videoText = $('<span>' + Messages._getKey('videoconfText', [baseURL]) + '</span>').appendTo($container);
|
||||||
|
var $videoButton = $('<button>' + Messages.videoconfButton + '</button>', {'title': Messages.videoconfButton }).appendTo($container);
|
||||||
|
$videoButton.click(function() {
|
||||||
|
var src = baseURL + 'cryptpad' + cid;
|
||||||
|
var $videoIframe = $('<iframe>', {'src': src, 'allow': 'camera *;microphone *',
|
||||||
|
'frameborder':'0', 'border': '0'}).appendTo($container);
|
||||||
|
$videoText.hide();
|
||||||
|
$videoButton.hide();
|
||||||
|
$urlButton.hide();
|
||||||
|
});
|
||||||
|
var $urlButton = $('<button>' + Messages.videoconfOwnUrl + '</button>', {'title': Messages.videoconfOwnUrl }).appendTo($container);
|
||||||
|
$urlButton.click(function() {
|
||||||
|
UI.prompt(Messages.videoConfChooseUrl, Messages.videoConfChooseUrlTitle, function (src) {
|
||||||
|
if (src.trim()!="") {
|
||||||
|
var $videoIframe = $('<iframe>', {'src': src, 'allow': 'camera *;microphone *',
|
||||||
|
'frameborder':'0', 'border': '0'}).appendTo($container);
|
||||||
|
$videoText.hide();
|
||||||
|
$videoButton.hide();
|
||||||
|
$urlButton.hide();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
};
|
||||||
|
var createVideoConf = function (toolbar, config) {
|
||||||
|
if (!config.metadataMgr) {
|
||||||
|
throw new Error("You must provide a `metadataMgr` to display the video conf");
|
||||||
|
}
|
||||||
|
if (Config.availablePadTypes.indexOf('contacts') === -1) { return; }
|
||||||
|
var $content = $('<div>', {'class': 'cp-toolbar-videoconf-drawer'});
|
||||||
|
$content.on('drop dragover', function (e) {
|
||||||
|
e.preventDefault();
|
||||||
|
e.stopPropagation();
|
||||||
|
});
|
||||||
|
var $closeIcon = $('<span>', {"class": "fa fa-window-close cp-toolbar-videoconf-drawer-close"}).appendTo($content);
|
||||||
|
var $sizeIcon = $('<span>', {"class": "fa fa-expand cp-toolbar-videoconf-drawer-size"}).appendTo($content);
|
||||||
|
|
||||||
|
toolbar.videoconfContent = $content;
|
||||||
|
|
||||||
|
var $container = $('<span>', {id: 'cp-toolbar-videoconf-drawer-open', title: Messages.videoconfButton});
|
||||||
|
|
||||||
|
var $button = $('<button>', {'class': 'fa fa-video-camera'}).appendTo($container);
|
||||||
|
$('<span>',{'class': 'cp-dropdown-button-title'}).appendTo($button);
|
||||||
|
|
||||||
|
toolbar.$leftside.prepend($container);
|
||||||
|
|
||||||
|
if (config.$contentContainer) {
|
||||||
|
config.$contentContainer.prepend($content);
|
||||||
|
}
|
||||||
|
|
||||||
|
$sizeIcon.click(function () {
|
||||||
|
var style = $(".cp-toolbar-videoconf-drawer")[0].style;
|
||||||
|
if (style.width=="100%")
|
||||||
|
style.width="";
|
||||||
|
else if (style.width=="450px")
|
||||||
|
style.width="100%";
|
||||||
|
else
|
||||||
|
style.width="450px";
|
||||||
|
});
|
||||||
|
|
||||||
|
var hide = function (closed) {
|
||||||
|
if (!closed) {
|
||||||
|
// It means it's the initial state so we're going to make the icon blink
|
||||||
|
$button.addClass('cp-toolbar-notification');
|
||||||
|
}
|
||||||
|
$content.hide();
|
||||||
|
$button.removeClass('cp-toolbar-button-active');
|
||||||
|
config.$contentContainer.removeClass('cp-videoconf-visible');
|
||||||
|
};
|
||||||
|
var show = function () {
|
||||||
|
if (Bar.isEmbed) { $content.hide(); return; }
|
||||||
|
$content.show();
|
||||||
|
$button.addClass('cp-toolbar-button-active');
|
||||||
|
config.$contentContainer.addClass('cp-videoconf-visible');
|
||||||
|
$button.removeClass('cp-toolbar-notification');
|
||||||
|
};
|
||||||
|
$closeIcon.click(function () {
|
||||||
|
Common.setAttribute(['toolbar', 'videoconf-drawer'], false);
|
||||||
|
hide(true);
|
||||||
|
});
|
||||||
|
$button.click(function () {
|
||||||
|
var visible = $content.is(':visible');
|
||||||
|
if (visible) { hide(true); }
|
||||||
|
else { show(); }
|
||||||
|
visible = !visible;
|
||||||
|
Common.setAttribute(['toolbar', 'videoconf-drawer'], visible);
|
||||||
|
});
|
||||||
|
show();
|
||||||
|
Common.getAttribute(['toolbar', 'videoconf-drawer'], function (err, val) {
|
||||||
|
if (!val || Util.isSmallScreen()) {
|
||||||
|
return void hide(val === false);
|
||||||
|
}
|
||||||
|
show();
|
||||||
|
});
|
||||||
|
|
||||||
|
initVideoConf(toolbar, config);
|
||||||
|
return $container;
|
||||||
|
}
|
||||||
|
|
||||||
var initChat = function (toolbar) {
|
var initChat = function (toolbar) {
|
||||||
var $container = $('<div>', {
|
var $container = $('<div>', {
|
||||||
id: 'cp-app-contacts-container',
|
id: 'cp-app-contacts-container',
|
||||||
|
@ -1238,6 +1348,7 @@ MessengerUI, Messages) {
|
||||||
tb['useradmin'] = createUserAdmin;
|
tb['useradmin'] = createUserAdmin;
|
||||||
tb['unpinnedWarning'] = createUnpinnedWarning;
|
tb['unpinnedWarning'] = createUnpinnedWarning;
|
||||||
tb['notifications'] = createNotifications;
|
tb['notifications'] = createNotifications;
|
||||||
|
tb['videoconf'] = createVideoConf;
|
||||||
|
|
||||||
var addElement = toolbar.addElement = function (arr, additionalCfg, init) {
|
var addElement = toolbar.addElement = function (arr, additionalCfg, init) {
|
||||||
if (typeof additionalCfg === "object") { $.extend(true, config, additionalCfg); }
|
if (typeof additionalCfg === "object") { $.extend(true, config, additionalCfg); }
|
||||||
|
|
|
@ -1337,5 +1337,10 @@
|
||||||
"kanban_clearFilter": "Clear filter",
|
"kanban_clearFilter": "Clear filter",
|
||||||
"kanban_editCard": "Edit this card",
|
"kanban_editCard": "Edit this card",
|
||||||
"kanban_editBoard": "Edit this board",
|
"kanban_editBoard": "Edit this board",
|
||||||
"oo_isLocked": "syncing changes, please wait"
|
"oo_isLocked": "syncing changes, please wait",
|
||||||
|
"videoconfButton": "Start video-conferencing",
|
||||||
|
"videoconfText": "You can join the video conference on {0}. Warning: video conferencing is not end to end encrypted",
|
||||||
|
"videoconfOwnUrl": "Insert your own URL",
|
||||||
|
"videoConfChooseUrl": "Choose the URL you would like to embed",
|
||||||
|
"videoConfChooseUrlTitle": "Insert your own URL"
|
||||||
}
|
}
|
||||||
|
|
|
@ -11,7 +11,7 @@
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<iframe id="sbox-iframe">
|
<iframe id="sbox-iframe" allow="camera *;microphone *">
|
||||||
</iframe>
|
</iframe>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
@ -9,4 +9,4 @@
|
||||||
<link href="/customize/src/outer.css" rel="stylesheet" type="text/css">
|
<link href="/customize/src/outer.css" rel="stylesheet" type="text/css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<iframe id="sbox-iframe">
|
<iframe id="sbox-iframe" allow="camera *;microphone *">
|
||||||
|
|
|
@ -9,4 +9,4 @@
|
||||||
<link href="/customize/src/outer.css" rel="stylesheet" type="text/css">
|
<link href="/customize/src/outer.css" rel="stylesheet" type="text/css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<iframe id="sbox-iframe">
|
<iframe id="sbox-iframe" allow="camera *;microphone *">
|
||||||
|
|
|
@ -9,4 +9,4 @@
|
||||||
<link href="/customize/src/outer.css" rel="stylesheet" type="text/css">
|
<link href="/customize/src/outer.css" rel="stylesheet" type="text/css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<iframe id="sbox-iframe">
|
<iframe id="sbox-iframe" allow="camera *;microphone *">
|
||||||
|
|
|
@ -9,4 +9,4 @@
|
||||||
<link href="/customize/src/outer.css" rel="stylesheet" type="text/css">
|
<link href="/customize/src/outer.css" rel="stylesheet" type="text/css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<iframe id="sbox-iframe">
|
<iframe id="sbox-iframe" allow="camera *;microphone *">
|
||||||
|
|
|
@ -9,4 +9,4 @@
|
||||||
<link href="/customize/src/outer.css" rel="stylesheet" type="text/css">
|
<link href="/customize/src/outer.css" rel="stylesheet" type="text/css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<iframe id="sbox-iframe">
|
<iframe id="sbox-iframe" allow="camera *;microphone *">
|
||||||
|
|
|
@ -9,4 +9,4 @@
|
||||||
<link href="/customize/src/outer.css" rel="stylesheet" type="text/css">
|
<link href="/customize/src/outer.css" rel="stylesheet" type="text/css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<iframe id="sbox-iframe">
|
<iframe id="sbox-iframe" allow="camera *;microphone *">
|
||||||
|
|
Loading…
Reference in New Issue