idk what im doing
This commit is contained in:
parent
63a0adaa6e
commit
6310ee11f9
8 changed files with 9023 additions and 4 deletions
|
@ -8,7 +8,7 @@
|
|||
"node": ">=14.6.0"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "webpack serve --config ./webpack.dev.js --open",
|
||||
"start": "webpack serve --config ./webpack.dev.js",
|
||||
"build": "webpack --config ./webpack.prod.js"
|
||||
},
|
||||
"keywords": [],
|
||||
|
@ -37,7 +37,8 @@
|
|||
"react-modal": "^3.13.1",
|
||||
"sanitize-html": "^2.5.3",
|
||||
"tippy.js": "^6.3.1",
|
||||
"twemoji": "^13.1.0"
|
||||
"twemoji": "^13.1.0",
|
||||
"url": "^0.11.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.15.5",
|
||||
|
|
8917
pnpm-lock.yaml
Normal file
8917
pnpm-lock.yaml
Normal file
File diff suppressed because it is too large
Load diff
76
src/app/organisms/room/AttachmentTypeSelector.jsx
Normal file
76
src/app/organisms/room/AttachmentTypeSelector.jsx
Normal file
|
@ -0,0 +1,76 @@
|
|||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import IconButton from '../../atoms/button/IconButton';
|
||||
import CirclePlusIC from '../../../../public/res/ic/outlined/circle-plus.svg';
|
||||
import ContextMenu, { MenuHeader, MenuItem } from '../../atoms/context-menu/ContextMenu';
|
||||
|
||||
function AttachmentTypeSelector({ uploadFile }) {
|
||||
const recordVoice = () => {
|
||||
navigator.getUserMedia = navigator.getUserMedia
|
||||
|| navigator.webkitGetUserMedia
|
||||
|| navigator.mozGetUserMedia
|
||||
|| navigator.msGetUserMedia;
|
||||
|
||||
navigator.mediaDevices.getUserMedia({ audio: true })
|
||||
.then((stream) => {
|
||||
const mediaRecorder = new MediaRecorder(stream);
|
||||
mediaRecorder.start();
|
||||
const audioChunks = [];
|
||||
|
||||
mediaRecorder.addEventListener('dataavailable', (event) => {
|
||||
audioChunks.push(event.data);
|
||||
});
|
||||
|
||||
mediaRecorder.addEventListener('stop', () => {
|
||||
const audioBlob = new Blob(audioChunks, { type: 'audio/webm; codecs=opus' });
|
||||
const audioUrl = URL.createObjectURL(audioBlob);
|
||||
|
||||
console.log(audioUrl);
|
||||
});
|
||||
|
||||
setTimeout(() => {
|
||||
mediaRecorder.stop();
|
||||
}, 1000); // 1 hour 3600000
|
||||
})
|
||||
.catch((e) => console.log(e));
|
||||
};
|
||||
|
||||
return (
|
||||
<ContextMenu
|
||||
maxWidth={200}
|
||||
content={(toggleMenu) => (
|
||||
<>
|
||||
<MenuHeader>Attachment</MenuHeader>
|
||||
<MenuItem
|
||||
onClick={() => {
|
||||
uploadFile(); toggleMenu();
|
||||
}}
|
||||
>
|
||||
File
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
onClick={() => {
|
||||
recordVoice(); toggleMenu();
|
||||
}}
|
||||
>
|
||||
Audio
|
||||
</MenuItem>
|
||||
|
||||
</>
|
||||
)}
|
||||
render={(toggleMenu) => (
|
||||
<IconButton onClick={toggleMenu} tooltip={true === null ? 'Upload' : 'Cancel'} src={CirclePlusIC} />
|
||||
)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
AttachmentTypeSelector.propTypes = {
|
||||
uploadFile: PropTypes.func,
|
||||
};
|
||||
|
||||
AttachmentTypeSelector.defaultProps = {
|
||||
uploadFile: null,
|
||||
};
|
||||
|
||||
export { AttachmentTypeSelector };
|
|
@ -8,7 +8,7 @@ import TextareaAutosize from 'react-autosize-textarea';
|
|||
import initMatrix from '../../../client/initMatrix';
|
||||
import cons from '../../../client/state/cons';
|
||||
import settings from '../../../client/state/settings';
|
||||
import { openEmojiBoard } from '../../../client/action/navigation';
|
||||
import { openAttachmentTypeSelector, openEmojiBoard } from '../../../client/action/navigation';
|
||||
import navigation from '../../../client/state/navigation';
|
||||
import { bytesToSize, getEventCords } from '../../../util/common';
|
||||
import { getUsername } from '../../../util/matrixUtil';
|
||||
|
@ -29,6 +29,7 @@ import VolumeFullIC from '../../../../public/res/ic/outlined/volume-full.svg';
|
|||
import MarkdownIC from '../../../../public/res/ic/outlined/markdown.svg';
|
||||
import FileIC from '../../../../public/res/ic/outlined/file.svg';
|
||||
import CrossIC from '../../../../public/res/ic/outlined/cross.svg';
|
||||
import { AttachmentTypeSelector } from './AttachmentTypeSelector';
|
||||
|
||||
const CMD_REGEX = /(^\/|:|@)(\S*)$/;
|
||||
let isTyping = false;
|
||||
|
@ -312,8 +313,14 @@ function RoomViewInput({
|
|||
return (
|
||||
<>
|
||||
<div className={`room-input__option-container${attachment === null ? '' : ' room-attachment__option'}`}>
|
||||
<AttachmentTypeSelector
|
||||
ref={uploadInputRef}
|
||||
tooltip={attachment === null ? 'Upload' : 'Cancel'}
|
||||
uploadFile={() => handleUploadClick()}
|
||||
/>
|
||||
<input onChange={uploadFileChange} style={{ display: 'none' }} ref={uploadInputRef} type="file" />
|
||||
<IconButton onClick={handleUploadClick} tooltip={attachment === null ? 'Upload' : 'Cancel'} src={CirclePlusIC} />
|
||||
{/* <IconButton onClick={handleUploadClick}
|
||||
tooltip={attachment === null ? 'Upload' : 'Cancel'} src={CirclePlusIC} /> */}
|
||||
</div>
|
||||
<div ref={inputBaseRef} className="room-input__input-container">
|
||||
{roomTimeline.isEncrypted() && <RawIcon size="extra-small" src={ShieldIC} />}
|
||||
|
|
|
@ -95,6 +95,13 @@ export function openRoomOptions(cords, roomId) {
|
|||
});
|
||||
}
|
||||
|
||||
export function openAttachmentTypeSelector(params) {
|
||||
appDispatcher.dispatch({
|
||||
type: cons.actions.navigation.OPEN_ATTACHMENT_TYPE_SELECTOR,
|
||||
params,
|
||||
});
|
||||
}
|
||||
|
||||
export function replyTo(userId, eventId, body) {
|
||||
appDispatcher.dispatch({
|
||||
type: cons.actions.navigation.CLICK_REPLY_TO,
|
||||
|
|
|
@ -42,6 +42,7 @@ const cons = {
|
|||
OPEN_ROOMOPTIONS: 'OPEN_ROOMOPTIONS',
|
||||
CLICK_REPLY_TO: 'CLICK_REPLY_TO',
|
||||
OPEN_SEARCH: 'OPEN_SEARCH',
|
||||
OPEN_ATTACHMENT_TYPE_SELECTOR: 'OPEN_ATTACHMENT_TYPE_SELECTOR',
|
||||
},
|
||||
room: {
|
||||
JOIN: 'JOIN',
|
||||
|
@ -76,6 +77,7 @@ const cons = {
|
|||
READRECEIPTS_OPENED: 'READRECEIPTS_OPENED',
|
||||
ROOMOPTIONS_OPENED: 'ROOMOPTIONS_OPENED',
|
||||
REPLY_TO_CLICKED: 'REPLY_TO_CLICKED',
|
||||
OPEN_ATTACHMENT_TYPE_SELECTOR: 'OPEN_ATTACHMENT_TYPE_SELECTOR',
|
||||
SEARCH_OPENED: 'SEARCH_OPENED',
|
||||
},
|
||||
roomList: {
|
||||
|
|
|
@ -131,6 +131,13 @@ class Navigation extends EventEmitter {
|
|||
action.roomId,
|
||||
);
|
||||
},
|
||||
[cons.actions.navigation.OPEN_ATTACHMENT_TYPE_SELECTOR]: () => {
|
||||
this.emit(
|
||||
cons.events.navigation.OPEN_ATTACHMENT_TYPE_SELECTOR,
|
||||
action.cords,
|
||||
action.roomId,
|
||||
);
|
||||
},
|
||||
[cons.actions.navigation.CLICK_REPLY_TO]: () => {
|
||||
this.emit(
|
||||
cons.events.navigation.REPLY_TO_CLICKED,
|
||||
|
|
|
@ -16,6 +16,8 @@ module.exports = {
|
|||
'stream': require.resolve('stream-browserify'),
|
||||
'util': require.resolve('util/'),
|
||||
'assert': require.resolve('assert/'),
|
||||
'events': require.resolve('events/'),
|
||||
'url': require.resolve('url/'),
|
||||
}
|
||||
},
|
||||
node: {
|
||||
|
|
Loading…
Reference in a new issue