Mirrors/webamp
1
0
Fork 0
mirror of https://github.com/captbaritone/webamp.git synced 2026-07-22 09:37:17 +00:00
Code Issues Projects Releases Wiki Activity

Abstract file dragging (#166)

Browse source
This commit is contained in:
Jordan Eldredge 2016-07-28 08:33:11 -07:00 • committed by GitHub
parent e70d1bbbbe
commit 83aec4c474
3 changed files with 79 additions and 63 deletions
Download patch file Download diff file Expand all files Collapse all files

29
js/DragTarget.jsx Normal file
View file

@ -0,0 +1,29 @@
import React from 'react';
class DragTarget extends React.Component {
constructor(props) {
super(props);
this.handleDrop = this.handleDrop.bind(this);
}
supress(e) {
e.stopPropagation();
e.preventDefault();
}
handleDrop(e) {
this.supress(e);
this.props.handleFiles(e.dataTransfer.files);
}
render() {
return <div
onDragEnter={this.supress}
onDragOver={this.supress}
onDrop={this.handleDrop}>;
{this.props.children}
</div>;
}
}
module.exports = DragTarget;

91
js/MainWindow.jsx
View file

@ -6,6 +6,7 @@ import Actions from './Actions.jsx';
import Balance from './Balance.jsx';
import Close from './Close.jsx';
import ContextMenu from './ContextMenu.jsx';
import DragTarget from './DragTarget.jsx';
import Eject from './Eject.jsx';
import Kbps from './Kbps.jsx';
import Khz from './Khz.jsx';
@ -36,49 +37,57 @@ const MainWindow = (props) => {
shade,
closed
});
return <div id='main-window' className={className}>
<div id='loading'>Loading...</div>
<div id='title-bar' className='selected'>
<ContextMenu mediaPlayer={props.mediaPlayer} winamp={props.winamp} />
<ShadeTime />
<div id='minimize'></div>
<Shade />
<Close />
</div>
<div className='status'>
<div id='clutter-bar'>
<div id='button-o'></div>
<div id='button-a'></div>
<div id='button-i'></div>
<div id='button-d' className={props.display.doubled ? 'selected' : ''}></div>
<div id='button-v'></div>
// TODO: Move this to an actionCreator
const handleDrop = (files) => {
props.winamp.loadFromFileReference(files[0]);
};
return <DragTarget handleFiles={handleDrop}>
<div id='main-window' className={className}>
<div id='loading'>Loading...</div>
<div id='title-bar' className='selected'>
<ContextMenu mediaPlayer={props.mediaPlayer} winamp={props.winamp} />
<ShadeTime />
<div id='minimize'></div>
<Shade />
<Close />
</div>
<div id='play-pause'></div>
<div id='work-indicator' className={props.display.working ? 'selected' : ''}></div>
<Time />
<canvas id='visualizer' width='152' height='32'></canvas>
<div className='status'>
<div id='clutter-bar'>
<div id='button-o'></div>
<div id='button-a'></div>
<div id='button-i'></div>
<div id='button-d' className={props.display.doubled ? 'selected' : ''}></div>
<div id='button-v'></div>
</div>
<div id='play-pause'></div>
<div id='work-indicator' className={props.display.working ? 'selected' : ''}></div>
<Time />
<canvas id='visualizer' width='152' height='32'></canvas>
</div>
<div className='media-info'>
<Marquee />
<Kbps />
<Khz />
<MonoStereo />
</div>
<Volume />
<Balance />
<div className='windows'>
<div id='equalizer-button'></div>
<div id='playlist-button'></div>
</div>
<Position mediaPlayer={props.mediaPlayer} />
<Actions mediaPlayer={props.mediaPlayer} />
<Eject />
<div className='shuffle-repeat'>
<Shuffle />
<Repeat />
</div>
<a id='about' target='blank' href= 'https://github.com/captbaritone/winamp2-js'></a>
</div>
<div className='media-info'>
<Marquee />
<Kbps />
<Khz />
<MonoStereo />
</div>
<Volume />
<Balance />
<div className='windows'>
<div id='equalizer-button'></div>
<div id='playlist-button'></div>
</div>
<Position mediaPlayer={props.mediaPlayer} />
<Actions mediaPlayer={props.mediaPlayer} />
<Eject />
<div className='shuffle-repeat'>
<Shuffle />
<Repeat />
</div>
<a id='about' target='blank' href= 'https://github.com/captbaritone/winamp2-js'></a>
</div>;
</DragTarget>;
};
module.exports = connect(state => state)(MainWindow);

22
js/main-window.js
View file

@ -30,27 +30,5 @@ module.exports = {
this.nodes.visualizer.onclick = function() {
self.winamp.toggleVisualizer();
};
this.nodes.window.addEventListener('dragenter', this.dragenter.bind(this));
this.nodes.window.addEventListener('dragover', this.dragover.bind(this));
this.nodes.window.addEventListener('drop', this.drop.bind(this));
},
dragenter: function(e) {
e.stopPropagation();
e.preventDefault();
},
dragover: function(e) {
e.stopPropagation();
e.preventDefault();
},
drop: function(e) {
e.stopPropagation();
e.preventDefault();
var dt = e.dataTransfer;
var file = dt.files[0];
this.winamp.loadFromFileReference(file);
}
};