Skip to content

GitLab

Commit e389ada7 authored by Sergey's avatar Sergey
Browse files

add screencust and videocam recording (audio not working)

parent 1625d42a
Expand all Hide whitespace changes
Inline Side-by-side
src/QEditor.jsx
View file @ e389ada7
This diff is collapsed.
src/components/ToolBar.js
View file @ e389ada7
......@@ -49,12 +49,6 @@ const toolsInit = {
'iframe',
]
},
{
type: 'g',
items: [
'webcamera',
]
},
{
type: 'g',
items: [
......@@ -82,7 +76,14 @@ const toolsInit = {
'mergeOrSplit',
'deleteTable'
]
}
},
{
type: 'g',
items: [
'webcamera',
'screencust'
]
},
],
'text': [
{
......@@ -102,12 +103,6 @@ const toolsInit = {
'h4'
]
},
{
type: 'g',
items: [
'webcamera',
]
},
{
type: 'g',
items: [
......@@ -134,6 +129,13 @@ const toolsInit = {
'hardBreak',
]
},
{
type: 'g',
items: [
'webcamera',
'screencust'
]
},
]
}
......
src/extensions/DragAndDrop.js
View file @ e389ada7
......@@ -50,30 +50,21 @@ const DragAndDrop = Extension.create({
// }));
// console.log(hasFiles)
if (!hasFiles) {
if (hasFiles) {
event.preventDefault();
const images = event.dataTransfer.files;
const {schema} = view.state;
const coordinates = view.posAtCoords({left: event.clientX, top: event.clientY});
const transaction = view.state.tr.insert(coordinates.pos, schema.text(
event.dataTransfer.getData("text/plain")
));
view.dispatch(transaction)
return
}
event.preventDefault();
const images = event.dataTransfer.files;
const {schema} = view.state;
const coordinates = view.posAtCoords({left: event.clientX, top: event.clientY});
for (let i = 0; i < images.length; i++) {
const imageSrc = await upload(images[i]);
if (imageSrc) {
const node = schema.nodes.image.create({
src: imageSrc
});
const transaction = view.state.tr.insert(coordinates.pos, node);
view.dispatch(transaction)
for (let i = 0; i < images.length; i++) {
const imageSrc = await upload(images[i]);
if (imageSrc) {
const node = schema.nodes.image.create({
src: imageSrc
});
const transaction = view.state.tr.insert(coordinates.pos, node);
view.dispatch(transaction)
}
}
}
}
......
src/extensions/VoiceMessage.js 0 → 100644
View file @ e389ada7
import React from 'react';
import { mergeAttributes, Node } from "@tiptap/core";
const VoiceMessage = Node.create({
addCommands() {
return {
setVoiceMessage: (options) => ({ chain }) => {
console.log(options)
return chain()
.insertContent('<h1>' + options.src + '</h1>')
.run()
},
}
}
});
export default VoiceMessage;
src/index.scss
View file @ e389ada7
......@@ -7,57 +7,228 @@ body{
padding-bottom: 12px;
}
.webwrap {
.progress-btn {
background-color: #1790FF;
border-radius: 24px;
color: #AAB2BD;
}
.audio-player {
width: 100%;
height: 51px;
background-color: #E6F7FF;
border-radius: 51px;
display: flex;
justify-content: center;
justify-content: space-between;
align-items: center;
flex-direction: column;
}
.btn {
&-video {
border-radius: 66px;
width: 200px;
height: 50px;
&-start {
height: 33px;
width: 33px;
background-color: white;
border-radius: 100px;
display: flex;
justify-content: center;
align-items: center;
}
&-center-start {
width: 70%;
height: 70%;
background-color: #FF3B30;
border-radius: 100px;
cursor: pointer;
color: white;
margin: 5px;
}
&-center-recording {
width: 40%;
height: 40%;
background-color: #FF3B30;
border-radius: 2px;
cursor: pointer;
}
&-margin {
margin: 10px;
}
&-voice {
width: 70%;
border-bottom: 2px dotted #1790FF;
}
&-timer {
margin-right: 20px;
color: #1790FF;
}
}
.web {
&-bottom-elements {
display: flex;
flex-direction: row;
justify-content: space-between;
margin-top: 30px;
border: none;
font-size: 17px;
}
&:hover {
-webkit-box-shadow: 4px 4px 26px 12px rgba(34, 60, 80, 0.2);
-moz-box-shadow: 4px 4px 26px 12px rgba(34, 60, 80, 0.2);
box-shadow: 4px 4px 26px 12px rgba(34, 60, 80, 0.2);
}
&-button-wrap {
cursor: pointer;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
&-disabled {
background-color: #AAB2BD;
&-button-rerecord {
cursor: pointer;
width: 30px;
height: 30px;
background-image: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_220_1498)'%3E%3Ccircle cx='15' cy='15' r='15' fill='%23AAB2BD'/%3E%3Cpath d='M9.16992 15.8948C9.16992 19.3059 11.918 22.0608 15.3223 22.0608C18.7334 22.0608 21.4814 19.3059 21.4814 15.8948C21.4814 12.4836 18.7676 9.76294 15.3633 9.76294C15.0557 9.76294 14.7549 9.79028 14.4951 9.84497L16.0195 8.34106C16.1494 8.19751 16.2246 8.03345 16.2246 7.82837C16.2246 7.41138 15.9033 7.06958 15.4863 7.06958C15.2744 7.06958 15.1035 7.14478 14.9668 7.29517L12.1641 10.1389C12.0137 10.2893 11.9316 10.4875 11.9316 10.6926C11.9316 10.9045 12.0068 11.0891 12.1641 11.2532L14.9668 14.0764C15.0967 14.2131 15.2744 14.2815 15.4863 14.2815C15.9033 14.2815 16.2246 13.9602 16.2246 13.5364C16.2246 13.3381 16.1494 13.1741 16.0127 13.0374L14.29 11.3284C14.6045 11.2668 14.9668 11.2395 15.3633 11.2395C17.9268 11.2395 19.957 13.2903 19.957 15.8948C19.957 18.4651 17.8994 20.5364 15.3223 20.5364C12.7588 20.5364 10.6875 18.4651 10.6875 15.8948C10.6875 15.4368 10.3867 15.1155 9.94922 15.1155C9.49121 15.1155 9.16992 15.4368 9.16992 15.8948Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_220_1498'%3E%3Crect width='30' height='30' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
&-text {
margin-left: 10px;
font-weight: 400;
font-size: 17px;
line-height: 20px;
text-align: center;
color: #AAB2BD;
}
}
&-wrap {
display: flex;
flex-direction: row;
}
&-button-mute {
cursor: pointer;
width: 36px;
height: 36px;
background-image: url("data:image/svg+xml,%3Csvg width='36' height='36' viewBox='0 0 36 36' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M17.85 4.5C15.0784 4.5 12.75 6.82843 12.75 9.6V15.45C12.75 18.2216 15.0784 20.55 17.85 20.55C20.8296 20.55 23.064 18.3294 22.9512 15.51C22.9504 15.49 22.95 15.47 22.95 15.45V9.6C22.95 6.82843 20.6216 4.5 17.85 4.5ZM9.75 9.6C9.75 5.17157 13.4216 1.5 17.85 1.5C22.2784 1.5 25.95 5.17157 25.95 9.6V15.4215C26.1191 20.0862 22.3603 23.55 17.85 23.55C13.4216 23.55 9.75 19.8784 9.75 15.45V9.6ZM6 13.95C6.82843 13.95 7.5 14.6216 7.5 15.45C7.5 21.2284 12.2275 25.9308 17.9659 25.8004L18 25.8C23.634 25.8 28.35 21.2092 28.35 15.45C28.35 14.6216 29.0216 13.95 29.85 13.95C30.6784 13.95 31.35 14.6216 31.35 15.45C31.35 22.4247 26.0042 28.0538 19.35 28.7315V33C19.35 33.8284 18.6785 34.5 17.85 34.5C17.0216 34.5 16.35 33.8284 16.35 33V28.7309C9.67992 28.0296 4.5 22.3045 4.5 15.45C4.5 14.6216 5.17157 13.95 6 13.95Z' fill='%23AAB2BD'/%3E%3C/svg%3E");
}
&-record {
background-color: #72c85f;
}
&-button-unmute {
cursor: pointer;
width: 36px;
height: 36px;
background-image: url("data:image/svg+xml,%3Csvg width='36' height='36' viewBox='0 0 36 36' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M17.85 4.5C15.0784 4.5 12.75 6.82843 12.75 9.6V15.45C12.75 18.2216 15.0784 20.55 17.85 20.55C20.8296 20.55 23.064 18.3294 22.9512 15.51C22.9504 15.49 22.95 15.47 22.95 15.45V9.6C22.95 6.82843 20.6216 4.5 17.85 4.5ZM9.75 9.6C9.75 5.17157 13.4216 1.5 17.85 1.5C22.2784 1.5 25.95 5.17157 25.95 9.6V15.4215C26.1191 20.0862 22.3603 23.55 17.85 23.55C13.4216 23.55 9.75 19.8784 9.75 15.45V9.6ZM6 13.95C6.82843 13.95 7.5 14.6216 7.5 15.45C7.5 21.2284 12.2275 25.9308 17.9659 25.8004L18 25.8C23.634 25.8 28.35 21.2092 28.35 15.45C28.35 14.6216 29.0216 13.95 29.85 13.95C30.6784 13.95 31.35 14.6216 31.35 15.45C31.35 22.4247 26.0042 28.0538 19.35 28.7315V33C19.35 33.8284 18.6785 34.5 17.85 34.5C17.0216 34.5 16.35 33.8284 16.35 33V28.7309C9.67992 28.0296 4.5 22.3045 4.5 15.45C4.5 14.6216 5.17157 13.95 6 13.95Z' fill='%23AAB2BD'/%3E%3Crect y='3.12558' width='3' height='45.1821' rx='1.5' transform='rotate(-45.1148 0 3.12558)' fill='%23FF5F56'/%3E%3C/svg%3E");
}
&-stop {
background-color: #EE505A;
}
&-button-spacer {
cursor: pointer;
width: 36px;
height: 36px;
}
}
&-mute {
background-color: #AAB2BD;
}
.webwrap {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
&-video {
width: 50vw;
height: 50vh;
}
&-start-border {
border: 3px solid white;
border-radius: 100px;
position: absolute;
bottom: 210px;
height: 70px;
width: 70px;
padding: 5px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
z-index: 2;
}
&-timer {
position: absolute;
top: 120px;
font-weight: 400;
font-size: 21px;
line-height: 20px;
text-align: center;
color: #ffffff;
margin-top: 30px;
z-index: 2;
}
&-start-center {
width: 100%;
height: 100%;
background-color: #FF3B30;
border-radius: 100px;
border: none;
cursor: pointer;
z-index: 2;
}
&-record-center {
width: 65%;
height: 65%;
background-color: #FF3B30;
border-radius: 12px;
border: none;
cursor: pointer;
z-index: 2;
}
&-content {
width: 50vw;
height: 55vh;
background-color: black;
border-radius: 12px;
display: flex;
justify-content: center;
align-items: center;
}
}
//.btn {
// &-video {
// border-radius: 66px;
// width: 200px;
// height: 50px;
// display: flex;
// justify-content: center;
// align-items: center;
// cursor: pointer;
// color: white;
// margin: 5px;
// margin-top: 30px;
// border: none;
// font-size: 17px;
//
// &:hover {
// -webkit-box-shadow: 4px 4px 26px 12px rgba(34, 60, 80, 0.2);
// -moz-box-shadow: 4px 4px 26px 12px rgba(34, 60, 80, 0.2);
// box-shadow: 4px 4px 26px 12px rgba(34, 60, 80, 0.2);
// }
//
// &-disabled {
// background-color: #AAB2BD;
// }
//
// &-wrap {
// display: flex;
// flex-direction: row;
// }
//
// &-record {
// background-color: #72c85f;
// }
//
// &-stop {
// background-color: #EE505A;
// }
//
// &-mute {
// background-color: #AAB2BD;
// }
// }
//}
.atma-editor {
position: relative;
border-radius: 8px;
......@@ -787,10 +958,15 @@ body{
&.qfile{
background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%229%22%20height%3D%2216%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M4.85%2015c-1.062%200-1.969-.365-2.721-1.094C1.376%2013.177%201%2012.282%201%2011.22V3.695c0-.747.265-1.382.796-1.908A2.627%202.627%200%200%201%203.713%201c.758%200%201.4.262%201.925.787.524.526.787%201.167.787%201.926v6.894c0%20.444-.152.82-.455%201.13-.303.308-.677.463-1.12.463-.443%200-.817-.166-1.12-.499a1.694%201.694%200%200%201-.455-1.181V4.01c0-.093.035-.175.105-.245a.336.336%200%200%201%20.49%200c.07.07.105.152.105.245v6.562c0%20.257.085.476.254.657.169.18.376.271.621.271a.83.83%200%200%200%20.621-.262.874.874%200%200%200%20.254-.63V3.694c0-.56-.195-1.033-.586-1.417A1.956%201.956%200%200%200%203.713%201.7c-.56%200-1.036.193-1.427.578-.39.384-.586.857-.586%201.417v7.56c0%20.852.31%201.572.928%202.161.618.59%201.359.884%202.222.884.875%200%201.619-.298%202.231-.893.613-.595.919-1.324.919-2.187V4.01c0-.093.035-.175.105-.245a.336.336%200%200%201%20.49%200c.07.07.105.152.105.245v7.192c0%201.062-.376%201.96-1.129%202.696C6.82%2014.632%205.911%2015%204.85%2015z%22%20fill%3D%22%231D1D1F%22%20fill-rule%3D%22nonzero%22%20stroke%3D%22%231D1D1F%22%20stroke-width%3D%22.5%22%2F%3E%3C%2Fsvg%3E');
}
&.qvoicemessage {
background-image: url("data:image/svg+xml,%3Csvg width='12' height='16' viewBox='0 0 12 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5.93333 2.00001C4.70151 2.00001 3.66667 3.03486 3.66667 4.26667V6.86667C3.66667 8.09849 4.70151 9.13334 5.93333 9.13334C7.2576 9.13334 8.25067 8.14641 8.20053 6.89334C8.20018 6.88445 8.2 6.87556 8.2 6.86667V4.26667C8.2 3.03486 7.16516 2.00001 5.93333 2.00001ZM2.33333 4.26667C2.33333 2.29848 3.96516 0.666672 5.93333 0.666672C7.90151 0.666672 9.53333 2.29848 9.53333 4.26667V6.85401C9.60849 8.92721 7.93791 10.4667 5.93333 10.4667C3.96516 10.4667 2.33333 8.83485 2.33333 6.86667V4.26667ZM0.666667 6.20001C1.03486 6.20001 1.33333 6.49849 1.33333 6.86667C1.33333 9.43485 3.43444 11.5248 5.98485 11.4669L6 11.4667C8.504 11.4667 10.6 9.42632 10.6 6.86667C10.6 6.49849 10.8985 6.20001 11.2667 6.20001C11.6348 6.20001 11.9333 6.49849 11.9333 6.86667C11.9333 9.96654 9.55742 12.4684 6.6 12.7696V14.6667C6.6 15.0349 6.30156 15.3333 5.93333 15.3333C5.56516 15.3333 5.26667 15.0349 5.26667 14.6667V12.7693C2.30219 12.4576 0 9.91312 0 6.86667C0 6.49849 0.298476 6.20001 0.666667 6.20001Z' fill='%23151618'/%3E%3C/svg%3E");
}
&.qscreencust {
background-image: url("data:image/svg+xml,%3Csvg width='17' height='16' viewBox='0 0 17 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.075 1V0.925H8H3C1.85403 0.925 0.925 1.85403 0.925 3V11C0.925 12.146 1.85403 13.075 3 13.075H14C15.146 13.075 16.075 12.146 16.075 11V9V8.925H16H15H14.925V9V11C14.925 11.5109 14.5109 11.925 14 11.925H3C2.48911 11.925 2.075 11.5109 2.075 11V3C2.075 2.48911 2.48911 2.075 3 2.075H8H8.075V2V1ZM4.5 13.925C4.18246 13.925 3.925 14.1825 3.925 14.5C3.925 14.8175 4.18246 15.075 4.5 15.075H12.5C12.8175 15.075 13.075 14.8175 13.075 14.5C13.075 14.1825 12.8175 13.925 12.5 13.925H4.5ZM15.5 0.925H11C10.6825 0.925 10.425 1.18246 10.425 1.5C10.425 1.81754 10.6825 2.075 11 2.075H14.1118L9.09345 7.09339C8.86885 7.31799 8.86885 7.68201 9.09345 7.90661C9.31799 8.13115 9.68207 8.13115 9.90661 7.90661L14.925 2.88816V6C14.925 6.31754 15.1825 6.575 15.5 6.575C15.8176 6.575 16.075 6.31754 16.075 6V1.5C16.075 1.18246 15.8176 0.925 15.5 0.925Z' fill='%23151618' stroke='%23151618' stroke-width='0.15'/%3E%3C/svg%3E");
}
&.qwebcamera {
background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2214%22%20height%3D%2214%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20transform%3D%22translate%281.107%20.622%29%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Crect%20stroke%3D%22%231F1E1D%22%20stroke-width%3D%221.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20width%3D%2212%22%20height%3D%2212%22%20rx%3D%222%22%2F%3E%3Ccircle%20fill%3D%22%231F1E1D%22%20cx%3D%223.667%22%20cy%3D%223.667%22%20r%3D%221%22%2F%3E%3Cpath%20stroke%3D%22%231F1E1D%22%20stroke-width%3D%221.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20d%3D%22m11.467%208.006-3-3.273-6.6%207.2%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
background-image: url("data:image/svg+xml,%3Csvg width='14' height='10' viewBox='0 0 14 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M1.27273 2.46667C1.27273 1.82524 1.74901 1.33333 2.32851 1.33333H7.21696C7.79643 1.33333 8.27273 1.82524 8.27273 2.46667V3.00164C8.27252 3.01142 8.27252 3.0212 8.27273 3.03102V7.53333C8.27273 8.12422 7.7815 8.66667 7.21696 8.66667H2.32851C1.76398 8.66667 1.27273 8.12422 1.27273 7.53333V2.46667ZM9.54545 3.44462V7.53333C9.54545 8.80911 8.53258 10 7.21696 10H2.32851C1.01288 10 0 8.80911 0 7.53333V2.46667C0 1.10811 1.02785 0 2.32851 0H7.21696C8.36458 0 9.29982 0.862711 9.50401 1.99898L12.0515 0.781853C12.0704 0.772787 12.0898 0.764702 12.1096 0.757631C12.5346 0.605311 12.9875 0.64676 13.3512 0.864022C13.7212 1.08499 14 1.49567 14 2.0144V7.96102C14 8.49769 13.6881 8.91382 13.3323 9.13142C12.9765 9.34902 12.4888 9.42467 12.0386 9.18742L10.8723 8.63018C10.5525 8.47738 10.4115 8.08196 10.5574 7.74698C10.7032 7.412 11.0807 7.26427 11.4004 7.41702L12.5796 7.9804C12.5897 7.98524 12.5997 7.9904 12.6096 7.99578C12.6143 7.99831 12.6204 8.00067 12.6331 7.99982C12.648 7.99889 12.669 7.9932 12.6907 7.97991C12.7101 7.96804 12.7218 7.9552 12.7273 7.94747V2.02649C12.7255 2.02524 12.7235 2.02387 12.721 2.02236C12.694 2.00627 12.6313 1.98702 12.5442 2.01191L9.54545 3.44462Z' fill='%23151618'/%3E%3C/svg%3E"); }
}
}
.qcolors{
display: inline-block;
......
yarn.lock
View file @ e389ada7
......@@ -8249,7 +8249,7 @@ ms@2.1.2:
resolved "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz"
integrity sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==
 
ms@2.1.3, ms@^2.1.1:
ms@2.1.3, ms@^2.1.1, ms@^2.1.2:
version "2.1.3"
resolved "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz"
integrity sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==
......@@ -10280,6 +10280,13 @@ react-scripts@^3.4.1:
optionalDependencies:
fsevents "2.1.2"
 
react-stopwatch@^2.0.4:
version "2.0.4"
resolved "https://registry.yarnpkg.com/react-stopwatch/-/react-stopwatch-2.0.4.tgz#b76e25bbcee0da62cfe58facd7b36c85404366bf"
integrity sha512-FBF5MS3ODWbGWi7f5wkspMuazZFBZTdUZ2Qgjct7k6tnicHTuUdY1v//MmB3PKmFDX5wrtU++DhTO3ARGVr2wQ==
dependencies:
ms "^2.1.2"
react-webcam@^7.0.1:
version "7.0.1"
resolved "https://registry.yarnpkg.com/react-webcam/-/react-webcam-7.0.1.tgz#8249e1d621eb4bba7e3f52135f562439d0528df3"
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment