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

Minor styling improvements to the file sharing tab

master
Torjus 2018-07-30 16:33:06 +02:00
parent 6042d305ac
commit fbe509b930
11 changed files with 130 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
app/lib/RoomClient.js
View File

@ -211,14 +211,14 @@ export default class RoomClient
return this._protoo.send('send-file', { file }) return this._protoo.send('send-file', { file })
.catch((error) => .catch((error) =>
{ {
logger.error('sendFile() | failed: %o', error); logger.error('sendFile() | failed: %o', error);
this._dispatch(requestActions.notify({ this._dispatch(requestActions.notify({
typ: 'error', typ : 'error',
text: 'An error occurred while sharing a file' text : 'An error occurred while sharing a file'
})); }));
}); });
} }
getChatHistory() getChatHistory()
@ -1171,7 +1171,7 @@ export default class RoomClient
this._dispatch(stateActions.addFile(payload)); this._dispatch(stateActions.addFile(payload));
this._dispatch(requestActions.notify({ this._dispatch(requestActions.notify({
text: `${payload.name} shared a file` text : `${payload.name} shared a file`
})); }));
break; break;

50
app/lib/components/FileSharing/FileEntry.jsx
View File

@ -5,6 +5,8 @@ import * as requestActions from '../../redux/requestActions';
import { saveAs } from 'file-saver/FileSaver'; import { saveAs } from 'file-saver/FileSaver';
import { client } from './index'; import { client } from './index';
const DEFAULT_PICTURE = 'resources/images/avatar-empty.jpeg';
class FileEntry extends Component class FileEntry extends Component
{ {
state = { state = {
@ -91,28 +93,30 @@ class FileEntry extends Component
render() render()
{ {
return ( return (
<Fragment> <div className='file-entry'>
<div> <img className='file-avatar' src={this.props.data.picture || DEFAULT_PICTURE} />
<div className='file-content'>
{this.props.data.me ? (
<p>You shared a file.</p>
) : (
<p>{this.props.data.name} shared a file.</p>
)}
{!this.state.active && !this.state.files && ( {!this.state.active && !this.state.files && (
<Fragment> <div className='file-info'>
{this.props.data.me ? ( <span className='button' onClick={this.download}>
<p>You shared a file.</p> <img src='resources/images/download-icon.svg' />
) : ( </span>
<p>A new file was shared.</p>
)}
<p>{magnet.decode(this.props.data.file.magnet).dn}</p> <p>{magnet.decode(this.props.data.file.magnet).dn}</p>
</div>
<button onClick={this.download}>
Download
</button>
</Fragment>
)} )}
{this.state.active && this.state.numPeers === 0 && ( {this.state.active && this.state.numPeers === 0 && (
<div> <p>
Locating peers Locating peers
</div> </p>
)} )}
{this.state.active && this.state.numPeers > 0 && ( {this.state.active && this.state.numPeers > 0 && (
@ -120,22 +124,22 @@ class FileEntry extends Component
)} )}
{this.state.files && ( {this.state.files && (
<div> <Fragment>
<p>Torrent finished downloading.</p> <p>Torrent finished downloading.</p>
{this.state.files.map((file, i) => ( {this.state.files.map((file, i) => (
<div key={i}> <div className='file-info' key={i}>
{file.name} <span className='button' onClick={() => this.saveFile(file)}>
<img src='resources/images/save-icon.svg' />
</span>
<button onClick={() => this.saveFile(file)}> <p>{file.name}</p>
Save
</button>
</div> </div>
))} ))}
</div> </Fragment>
)} )}
</div> </div>
</Fragment> </div>
); );
} }
} }

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

@ -25,7 +25,7 @@ const notifyPeers = (file) =>
store.dispatch(requestActions.sendFile(file, displayName, picture)); store.dispatch(requestActions.sendFile(file, displayName, picture));
}; };
const shareFiles = async (files) => const shareFiles = async(files) =>
{ {
const notification = const notification =
{ {
@ -98,8 +98,8 @@ class FileSharing extends Component
render() render()
{ {
return ( return (
<div> <div data-component='FileSharing'>
<div> <div className='sharing-toolbar'>
<input <input
style={{ display: 'none' }} style={{ display: 'none' }}
ref={this.fileInput} ref={this.fileInput}
@ -108,18 +108,20 @@ class FileSharing extends Component
multiple multiple
/> />
<button <div
type='button' type='button'
onClick={this.handleClick} onClick={this.handleClick}
className='share-file'
> >
share file <span>Share file</span>
</button> </div>
</div> </div>
<div> <div className='shared-files'>
{this.props.sharing.map((entry) => ( {this.props.sharing.map((entry, i) => (
<FileEntry <FileEntry
data={entry} data={entry}
key={i}
/> />
))} ))}
</div> </div>
@ -130,7 +132,7 @@ class FileSharing extends Component
const mapStateToProps = (state) => const mapStateToProps = (state) =>
({ ({
sharing: state.sharing sharing : state.sharing
}); });
export default connect( export default connect(

3
app/lib/redux/reducers/chatmessages.js
View File

@ -1,7 +1,6 @@
import import
{ {
createNewMessage, createNewMessage
createNewFile
} from './helper'; } from './helper';
const chatmessages = (state = [], action) => const chatmessages = (state = [], action) =>

18
app/lib/redux/reducers/sharing.js
View File

@ -1,16 +1,16 @@
const sharing = (state = [], action) => const sharing = (state = [], action) =>
{ {
switch (action.type) switch (action.type)
{ {
case 'SEND_FILE': case 'SEND_FILE':
return [ ...state, { ...action.payload, me: true }]; return [ ...state, { ...action.payload, me: true } ];
case 'ADD_FILE': case 'ADD_FILE':
return [ ...state, action.payload ]; return [ ...state, action.payload ];
default: default:
return state; return state;
} }
}; };
export default sharing; export default sharing;

7
app/lib/redux/requestActions.js
View File

@ -2,8 +2,7 @@ import randomString from 'random-string';
import * as stateActions from './stateActions'; import * as stateActions from './stateActions';
import import
{ {
createNewMessage, createNewMessage
createNewFile
} from './reducers/helper'; } from './reducers/helper';
export const joinRoom = ( export const joinRoom = (
@ -217,8 +216,8 @@ export const sendChatMessage = (text, name, picture) =>
export const sendFile = (file, name, picture) => export const sendFile = (file, name, picture) =>
{ {
return { return {
type: 'SEND_FILE', type : 'SEND_FILE',
payload: { file, name, picture } payload : { file, name, picture }
}; };
}; };

2
app/lib/redux/stateActions.js
View File

@ -444,7 +444,7 @@ export const dropMessages = () =>
export const addFile = (payload) => export const addFile = (payload) =>
{ {
return { return {
type: 'ADD_FILE', type : 'ADD_FILE',
payload payload
}; };
}; };

4
app/resources/images/download-icon.svg 100644
View File

@ -0,0 +1,4 @@
<svg fill="#FFF" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path d="M19 12v7H5v-7H3v7c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-7h-2zm-6 .67l2.59-2.58L17 11.5l-5 5-5-5 1.41-1.41L11 12.67V3h2z"/>
<path fill="none" d="M0 0h24v24H0z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 276 B

4
app/resources/images/save-icon.svg 100644
View File

@ -0,0 +1,4 @@
<svg fill="#FFF" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path d="M0 0h24v24H0z" fill="none"/>
<path d="M17 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V7l-4-4zm-5 16c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3zm3-10H5V5h10v4z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 304 B

61
app/stylus/components/FileSharing.styl 100644
View File

@ -0,0 +1,61 @@
[data-component='FileSharing'] {
> .sharing-toolbar {
> .share-file {
cursor: pointer;
width: 100%;
background: #252525;
border: 1px solid #151515;
padding: 1rem;
border-bottom: 5px solid #151515;
border-radius: 3px 3px 0 0;
}
}
> .shared-files {
> .file-entry {
background-color: rgba(0,0,0,0.1);
border-radius: 5px;
width: 100%;
padding: 0.5rem;
display: flex;
margin-top: 0.5rem;
> .file-avatar {
height: 2rem;
border-radius: 50%;
}
> .file-content {
flex-grow: 1;
padding-left: 0.5rem;
> p:not(:first-child) {
margin-top: 0.5rem;
}
> .file-info {
display: flex;
padding-top: 0.5rem;
align-items: center;
> .button {
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
background: #252525;
border: 1px solid #151515;
padding: 0.3rem;
border-bottom: 5px solid #151515;
border-radius: 3px 3px 0 0;
}
> p {
flex-grow: 1;
padding-left: 0.5rem;
}
}
}
}
}
}

1
app/stylus/index.styl
View File

@ -51,6 +51,7 @@ body {
@import './components/FullScreenView'; @import './components/FullScreenView';
@import './components/FullView'; @import './components/FullView';
@import './components/Filmstrip'; @import './components/Filmstrip';
@import './components/FileSharing';
} }
// Hack to detect in JS the current media query // Hack to detect in JS the current media query