diff options
Diffstat (limited to 'client/components/Browser/Folder/Files.jsx')
| -rw-r--r-- | client/components/Browser/Folder/Files.jsx | 83 |
1 files changed, 83 insertions, 0 deletions
diff --git a/client/components/Browser/Folder/Files.jsx b/client/components/Browser/Folder/Files.jsx new file mode 100644 index 0000000..7d439c5 --- /dev/null +++ b/client/components/Browser/Folder/Files.jsx @@ -0,0 +1,83 @@ +import { h, Component } from 'preact' + +import { audioPlayFile } from '../../../actions' + +import client from '../../../client.js' + +import FileUploadButton from './FileUploadButton.jsx' +import FileLink from '../../../containers/fileLink.js' +import TaskContentLink from '../../../containers/taskContentLink.js' +import TaskStyleLink from '../../../containers/taskStyleLink.js' + +export default class Files extends Component { + constructor(props) { + super() + this.state = { + files: props.folder.files || [], + selected: null, + } + this.addFiles = this.addFiles.bind(this) + if (! props.folder.files) { + client.file.index({ folder_id: props.folder.id }).then( files => this.setState({ files }) ) + } + } + addFiles(newFiles) { + if (! newFiles) return + const files = this.state.files.concat(newFiles).sort( (a,b) => { return b.id - a.id } ) + this.setState({ files }) + } + handleClick(file) { + if (file.type === 'audio') { + audioPlayFile(file) + document.body.style.backgroundImage = 'url(' + pngpath(file) + ')' + } + this.setState({ selected: file }) + } + render() { + const files = (this.state.files).map(toFilenamePair).sort(sortByFilename).map(fromPair).map( (file, i) => { + if (! file) return + return ( + <div key={i} class={this.state.selected === file ? 'selected' : ''}> + <span class='name'><FileLink file={file}>{file.name}</FileLink></span> + <span class='mime'>{file.mime}</span> + <span class='duration'>{file.duration.toFixed(1) + 's'}</span> + <span class='actions'> + <TaskContentLink file={file}>content</TaskContentLink> + <TaskStyleLink file={file}>style</TaskStyleLink> + </span> + </div> + ) + }) + return ( + <div class='window'> + <div class='heading'> + <b>{this.props.folder.name}</b> + <div class='buttons'> + <FileUploadButton folder={this.props.folder} addFiles={this.addFiles} /> + <button onClick={this.props.onClose}>×</button> + </div> + </div> + <div class='list'> + {files} + </div> + </div> + ) + } +} + +function toFilenamePair (file) { return [file.name.toLowerCase(), file] } +function sortByFilename (a,b) { return a[0] < b[0] ? -1 : a[0] == b[0] ? 0 : 1 } +function fromPair (pair) { return pair[1] } + +function filepath (file) { + return '/data/' + file.folder_id + '/' + encodeURIComponent(file.name) +} +function mp3path (file) { + if (file.mime !== 'audio/mp3') { + return filepath(file) + '.mp3' + } + return filepath(file) +} +function pngpath (file) { + return filepath(file) + '.png' +}
\ No newline at end of file |