lfajardo
/
cloud_bbb
mirror of https://github.com/sualko/cloud_bbb
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat: show room url with qr code in edit dialog

pull/120/head
sualko 2021-01-26 10:29:13 +01:00
parent c7e75a7033
commit 74e3472ebd
4 changed files with 61 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -45,6 +45,7 @@
"dotenv": "^8.2.0", "dotenv": "^8.2.0",
"execa": "^4.0.0", "execa": "^4.0.0",
"libxmljs": "^0.19.7", "libxmljs": "^0.19.7",
"qrcode.react": "^1.0.1",
"react-copy-to-clipboard": "^5.0.2", "react-copy-to-clipboard": "^5.0.2",
"simple-git": "^2.20.1" "simple-git": "^2.20.1"
}, },

34
ts/Manager/App.scss
View File

@ -250,3 +250,37 @@ pre {
white-space: normal; white-space: normal;
} }
} }
.bbb-input-container {
display: flex;
}
.bbb-qrcode-container {
display: block;
height: 34px;
width: 34px;
margin: 3px;
position: relative;
cursor: zoom-in;
canvas {
max-width: 100%;
max-height: 100%;
position: absolute;
top: 0;
right: 0;
}
input[type="checkbox"] {
display: none;
&:checked + canvas {
max-width: none;
max-height: none;
box-shadow: 0 0 10px;
box-shadow: 0 0 5px var(--color-box-shadow);
cursor: zoom-out;
border: 5px solid #fff;
}
}
}

12
ts/Manager/EditRoomDialog.tsx
View File

@ -1,5 +1,6 @@
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
import { CopyToClipboard } from 'react-copy-to-clipboard'; import { CopyToClipboard } from 'react-copy-to-clipboard';
import QRCode from 'qrcode.react';
import { Access, Room, Permission, RoomShare, api, Restriction } from '../Common/Api'; import { Access, Room, Permission, RoomShare, api, Restriction } from '../Common/Api';
import Dialog from './Dialog'; import Dialog from './Dialog';
import ShareWith from './ShareWith'; import ShareWith from './ShareWith';
@ -97,6 +98,17 @@ const EditRoomDialog: React.FC<Props> = ({ room, restriction, updateProperty, op
return ( return (
<Dialog open={open} onClose={() => setOpen(false)} title={t('bbb', 'Edit "{room}"', { room: room.name })}> <Dialog open={open} onClose={() => setOpen(false)} title={t('bbb', 'Edit "{room}"', { room: room.name })}>
<div className="bbb-form-element">
<h3>{t('bbb', 'Raum URL')}</h3>
<div className="bbb-input-container">
<CopyToClipboard text={api.getRoomUrl(room)}><input type="text" readOnly={true} className="icon-clippy" value={api.getRoomUrl(room)} /></CopyToClipboard>
<label className="bbb-qrcode-container">
<input type="checkbox" />
<QRCode value={api.getRoomUrl(room)} level="M" imageSettings={{src: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAOxAAADsQBlSsOGwAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAGnSURBVFiF7de9TxRBHMbxzxG5BonRBOGsVRJfIvGFPwFKX0tjJGqsrfwvCC0YtbJSQyT4J0hB1BhtjZFCI4FoqTRCsbO43g24e+5Q3ZNsZm9+z8zzvZns7Rw9/a0jeIx1bNZ8rYe5WzuFt7CSILj9WsFwHtooADzA7XD/DG/CgDrUwHlcDZ/ncLfdtBoCn9cUGtN8yPiWd/QVikOhfZcQ4G1oD8cA8u2oa9ljyufe3vq+HYx7ph7Avv8YO4Rx2b4uy35oKqubFWhiBl+wiJf4imn0V52smxWYxc22vn7cwwHcqjJZ1RUYi4QXNYUzKQEm/1FvYCIlwEAJz/6UAB9KeN6nBFjAp13qH2VPRjKADdkr9Uek9h3XgicZwGk8wcFI7VConUoFMIZXOLGL5ySWVHgUywI08RSDJbyDwdusE+AGjpb0wjFcrxPgSoXwXJerAnScVgo63gXAaKSv49RVBFgL7dnIwN9dAMR0LrSreUfxbfgCd3BJdix/7Q/pBn5WDPuF++G+gQu4WMjq0Ii9+WPyWeFU3K4WHsm2o+7gNTwMX7SnbW0BScCZl0uGVe8AAAAASUVORK5CYII=', excavate: true, height: 32, width: 32}} />
</label>
</div>
</div>
{inputElement(t('bbb', 'Name'), 'name')} {inputElement(t('bbb', 'Name'), 'name')}
{inputElement(t('bbb', 'Welcome'), 'welcome')} {inputElement(t('bbb', 'Welcome'), 'welcome')}
{inputElement(t('bbb', 'Participant limit'), 'maxParticipants', 'number')} {inputElement(t('bbb', 'Participant limit'), 'maxParticipants', 'number')}

14
yarn.lock
View File

@ -6564,6 +6564,20 @@ q@^1.5.1:
resolved "https://registry.yarnpkg.com/q/-/q-1.5.1.tgz#7e32f75b41381291d04611f1bf14109ac00651d7" resolved "https://registry.yarnpkg.com/q/-/q-1.5.1.tgz#7e32f75b41381291d04611f1bf14109ac00651d7"
integrity sha1-fjL3W0E4EpHQRhHxvxQQmsAGUdc= integrity sha1-fjL3W0E4EpHQRhHxvxQQmsAGUdc=
qr.js@0.0.0:
version "0.0.0"
resolved "https://registry.yarnpkg.com/qr.js/-/qr.js-0.0.0.tgz#cace86386f59a0db8050fa90d9b6b0e88a1e364f"
integrity sha1-ys6GOG9ZoNuAUPqQ2baw6IoeNk8=
qrcode.react@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/qrcode.react/-/qrcode.react-1.0.1.tgz#2834bb50e5e275ffe5af6906eff15391fe9e38a5"
integrity sha512-8d3Tackk8IRLXTo67Y+c1rpaiXjoz/Dd2HpcMdW//62/x8J1Nbho14Kh8x974t9prsLHN6XqVgcnRiBGFptQmg==
dependencies:
loose-envify "^1.4.0"
prop-types "^15.6.0"
qr.js "0.0.0"
qs@~6.5.2: qs@~6.5.2:
version "6.5.2" version "6.5.2"
resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.2.tgz#cb3ae806e8740444584ef154ce8ee98d403f3e36" resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.2.tgz#cb3ae806e8740444584ef154ce8ee98d403f3e36"