dnrops
/
cryptpad
mirror of https://github.com/xwiki-labs/cryptpad
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Jitsi integration in a side panel of pads

This commit is contained in:
Ludovic Dubost 2020-03-22 17:26:21 +01:00
parent 605aae222c
commit 46bc63de67
14 changed files with 208 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
config/config.example.js
View File

@ -154,7 +154,6 @@ module.exports = {
*/
//defaultStorageLimit: 50 * 1024 * 1024,
/* =====================
* STORAGE
* ===================== */

80
customize.dist/src/less2/include/toolbar.less
View File

@ -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 {
background-color: @toolbar-bg-color;
background-color: var(--toolbar-bg-color);
@ -1069,8 +1139,9 @@
#cp-toolbar-userlist-drawer-open { order: 0; }
#cp-toolbar-chat-drawer-open { order: 1; }
.cp-toolbar-share-button { order: 2; }
.cp-toolbar-spinner { order: 3; }
#cp-toolbar-videoconf-drawer-open { order: 2; }
.cp-toolbar-share-button { order: 3; }
.cp-toolbar-spinner { order: 4; }
#cp-toolbar-userlist-drawer-open button {
width: 125px;
@ -1081,6 +1152,11 @@
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 {
width: 50px;
text-align: center;

2
www/code/index.html
View File

@ -9,4 +9,4 @@
<link href="/customize/src/outer.css" rel="stylesheet" type="text/css">
</head>
<body>
<iframe id="sbox-iframe">
<iframe id="sbox-iframe" allow="microphone *;camera *">

4
www/common/application_config_internal.js
View File

@ -173,5 +173,9 @@ define(function() {
// You can change the value here.
// config.maxOwnedTeams = 1;
// Integrations
// JITSI Integration
config.conferencingURL = "https://meet.jit.si/";
return config;
});

1
www/common/sframe-app-framework.js
View File

@ -649,6 +649,7 @@ define([
}, onLocal);
var configTb = {
displayed: [
'videoconf',
'chat',
'userlist',
'title',

111
www/common/toolbar3.js
View File

@ -356,6 +356,7 @@ MessengerUI, Messages) {
$span.append($rightCol);
});
}
$span.data('uid', data.uid);
$editUsersList.append($span);
});
@ -442,6 +443,115 @@ MessengerUI, Messages) {
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 $container = $('<div>', {
id: 'cp-app-contacts-container',
@ -1238,6 +1348,7 @@ MessengerUI, Messages) {
tb['useradmin'] = createUserAdmin;
tb['unpinnedWarning'] = createUnpinnedWarning;
tb['notifications'] = createNotifications;
tb['videoconf'] = createVideoConf;
var addElement = toolbar.addElement = function (arr, additionalCfg, init) {
if (typeof additionalCfg === "object") { $.extend(true, config, additionalCfg); }

7
www/common/translations/messages.json
View File

@ -1337,5 +1337,10 @@
"kanban_clearFilter": "Clear filter",
"kanban_editCard": "Edit this card",
"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"
}

2
www/kanban/index.html
View File

@ -11,7 +11,7 @@
</head>
<body>
<iframe id="sbox-iframe">
<iframe id="sbox-iframe" allow="camera *;microphone *">
</iframe>
</body>
</html>

2
www/oodoc/index.html
View File

@ -9,4 +9,4 @@
<link href="/customize/src/outer.css" rel="stylesheet" type="text/css">
</head>
<body>
<iframe id="sbox-iframe">
<iframe id="sbox-iframe" allow="camera *;microphone *">

2
www/ooslide/index.html
View File

@ -9,4 +9,4 @@
<link href="/customize/src/outer.css" rel="stylesheet" type="text/css">
</head>
<body>
<iframe id="sbox-iframe">
<iframe id="sbox-iframe" allow="camera *;microphone *">

2
www/pad/index.html
View File

@ -9,4 +9,4 @@
<link href="/customize/src/outer.css" rel="stylesheet" type="text/css">
</head>
<body>
<iframe id="sbox-iframe">
<iframe id="sbox-iframe" allow="camera *;microphone *">

2
www/poll/index.html
View File

@ -9,4 +9,4 @@
<link href="/customize/src/outer.css" rel="stylesheet" type="text/css">
</head>
<body>
<iframe id="sbox-iframe">
<iframe id="sbox-iframe" allow="camera *;microphone *">

2
www/sheet/index.html
View File

@ -9,4 +9,4 @@
<link href="/customize/src/outer.css" rel="stylesheet" type="text/css">
</head>
<body>
<iframe id="sbox-iframe">
<iframe id="sbox-iframe" allow="camera *;microphone *">

2
www/whiteboard/index.html
View File

@ -9,4 +9,4 @@
<link href="/customize/src/outer.css" rel="stylesheet" type="text/css">
</head>
<body>
<iframe id="sbox-iframe">
<iframe id="sbox-iframe" allow="camera *;microphone *">