Briq
/
multiparty-meeting
7
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Add overlay when holding file above drop element

master
Torjus 2018-07-31 15:24:08 +02:00
parent 60c6221af7
commit b3c45d004b
5 changed files with 145 additions and 108 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
app/lib/components/FileSharing/DragDropSharing.jsx 100644
View File

@ -0,0 +1,14 @@
import React from 'react';
import dragDrop from 'drag-drop';
import { shareFiles } from './index';
export const configureDragDrop = () =>
{
dragDrop('body', async(files) => await shareFiles(files));
};
export const HoldingOverlay = () => (
<div id='holding-overlay'>
Drop files here to share them
</div>
);

5
app/lib/components/FileSharing/index.jsx
View File

@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import WebTorrent from 'webtorrent';
import createTorrent from 'create-torrent';
import dragDrop from 'drag-drop';
import randomString from 'random-string';
import * as stateActions from '../../redux/stateActions';
import * as requestActions from '../../redux/requestActions';
@ -26,7 +25,7 @@ const notifyPeers = (file) =>
store.dispatch(requestActions.sendFile(file, displayName, picture));
};
const shareFiles = async(files) =>
export const shareFiles = async(files) =>
{
const notification =
{
@ -70,8 +69,6 @@ const shareFiles = async(files) =>
});
};
dragDrop('body', async(files) => await shareFiles(files));
class FileSharing extends Component
{
constructor(props)

9
app/lib/components/Room.jsx
View File

@ -1,4 +1,4 @@
import React from 'react';
import React, { Fragment } from 'react';
import { connect } from 'react-redux';
import ReactTooltip from 'react-tooltip';
import PropTypes from 'prop-types';
@ -18,6 +18,9 @@ import Draggable from 'react-draggable';
import { idle } from '../utils';
import Sidebar from './Sidebar';
import Filmstrip from './Filmstrip';
import { configureDragDrop, HoldingOverlay } from './FileSharing/DragDropSharing';
configureDragDrop();
// Hide toolbars after 10 seconds of inactivity.
const TIMEOUT = 10 * 1000;
@ -73,6 +76,9 @@ class Room extends React.Component
}[room.mode];
return (
<Fragment>
<HoldingOverlay />
<Appear duration={300}>
<div data-component='Room'>
<FullScreenView advancedMode={room.advancedMode} />
@ -169,6 +175,7 @@ class Room extends React.Component
</div>
</div>
</Appear>
</Fragment>
);
}
}

19
app/stylus/components/FileSharing.styl
View File

@ -59,3 +59,22 @@
}
}
}
#holding-overlay {
display: none;
}
.drag #holding-overlay {
display: flex;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.6);
color: #FFF;
align-items: center;
justify-content: center;
font-size: 2rem;
z-index: 2000;
}

36
app/stylus/index.styl
View File

@ -34,26 +34,26 @@ body {
#multiparty-meeting {
height: 100%;
width: 100%;
// Components
@import './components/Room';
@import './components/Sidebar';
@import './components/Me';
@import './components/Peers';
@import './components/Peer';
@import './components/PeerView';
@import './components/ScreenView';
@import './components/Notifications';
@import './components/Chat';
@import './components/Settings';
@import './components/ToolArea';
@import './components/ParticipantList';
@import './components/FullScreenView';
@import './components/FullView';
@import './components/Filmstrip';
@import './components/FileSharing';
}
// Components
@import './components/Room';
@import './components/Sidebar';
@import './components/Me';
@import './components/Peers';
@import './components/Peer';
@import './components/PeerView';
@import './components/ScreenView';
@import './components/Notifications';
@import './components/Chat';
@import './components/Settings';
@import './components/ToolArea';
@import './components/ParticipantList';
@import './components/FullScreenView';
@import './components/FullView';
@import './components/Filmstrip';
@import './components/FileSharing';
// Hack to detect in JS the current media query
#multiparty-meeting-media-query-detector {
position: absolute;