diff options
Diffstat (limited to 'client')
| -rw-r--r-- | client/client.js | 13 | ||||
| -rw-r--r-- | client/components/Folder/Folder.jsx | 31 |
2 files changed, 39 insertions, 5 deletions
diff --git a/client/client.js b/client/client.js index 451358e..ee50373 100644 --- a/client/client.js +++ b/client/client.js @@ -1,10 +1,17 @@ -function _get(data) { +function _get_url(_url, data) { + const url = new URL(document.origin + _url) + console.log(_url, data, document.origin) + if (data) { + Object.keys(data).forEach(key => url.searchParams.append(key, data[key])) + } + return url +} +function _get_headers() { return { method: 'GET', headers: { 'Accept': 'application/json', }, - query: data, } } function post(data) { @@ -53,7 +60,7 @@ function crud(type_s) { const type = '/' + type_s + 's/' return { index: (data) => { - return fetch(type, _get(data)) + return fetch(_get_url(type, data), _get_headers()) .then(req => req.json()) .catch(error) }, diff --git a/client/components/Folder/Folder.jsx b/client/components/Folder/Folder.jsx index 88c937a..4a2e4d2 100644 --- a/client/components/Folder/Folder.jsx +++ b/client/components/Folder/Folder.jsx @@ -17,6 +17,7 @@ export default class Folder extends Component { if (! props.folder.files) { client.file.index({ folder_id: props.folder.id }).then( files => this.setState({ files }) ) } + this.audio = document.createElement('audio') } addFiles(newFiles) { console.log(newFiles) @@ -24,13 +25,22 @@ export default class Folder extends Component { const files = this.state.files.concat(newFiles).sort( (a,b) => { return b.id - a.id } ) this.setState({ files }) } + handleClick(file) { + console.log(file) + if (file.type === 'audio') { + this.audio.setAttribute('src', mp3path(file)) + this.audio.play() + console.log(pngpath(file)) + document.body.style.backgroundImage = 'url(' + pngpath(file) + ')' + } + } render() { console.log(this.props) - const files = (this.state.files).map( (file, i) => { + const files = (this.state.files).map(toFilenamePair).sort(sortByFilename).map(fromPair).map( (file, i) => { if (! file) return return ( <div key={i}> - <span class='name'>{file.name}</span> + <span class='name' onClick={() => this.handleClick(file)}>{file.name}</span> <span class='mime'>{file.mime}</span> </div> ) @@ -51,3 +61,20 @@ export default class Folder extends Component { ) } } + +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 |