r/p5.js-web-editor
1
0
Fork 0
Code Issues 1 Pull requests Releases 1 Wiki Activity

add support for audio files

Browse source
This commit is contained in:
catarak 2016-07-21 14:18:38 -04:00
parent 9201cb247c
commit 979fcf2152
4 changed files with 32 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
client/modules/IDE/actions/files.js
View file

@ -1,6 +1,8 @@
import * as ActionTypes from '../../../constants'; import * as ActionTypes from '../../../constants';
import axios from 'axios'; import axios from 'axios';
import blobUtil from 'blob-util'; import blobUtil from 'blob-util';
import xhr from 'xhr';
import fileType from 'file-type';
const ROOT_URL = location.href.indexOf('localhost') > 0 ? 'http://localhost:8000/api' : '/api'; const ROOT_URL = location.href.indexOf('localhost') > 0 ? 'http://localhost:8000/api' : '/api';
@ -33,7 +35,14 @@ export function updateFileContent(name, content) {
export function getBlobUrl(file) { export function getBlobUrl(file) {
return (dispatch) => { return (dispatch) => {
blobUtil.imgSrcToBlob(file.url, undefined, { crossOrigin: 'Anonymous' }) xhr({
uri: file.url,
responseType: 'arraybuffer',
useXDR: true
}, (err, body, res) => {
if (err) throw err;
const typeOfFile = fileType(new Uint8Array(res));
blobUtil.arrayBufferToBlob(res, typeOfFile.mime)
.then(blobUtil.createObjectURL) .then(blobUtil.createObjectURL)
.then(objectURL => { .then(objectURL => {
dispatch({ dispatch({
@ -42,6 +51,17 @@ export function getBlobUrl(file) {
blobURL: objectURL blobURL: objectURL
}); });
}); });
});
// blobUtil.imgSrcToBlob(file.url, undefined, { crossOrigin: 'Anonymous' })
// .then(blobUtil.createObjectURL)
// .then(objectURL => {
// dispatch({
// type: ActionTypes.SET_BLOB_URL,
// name: file.name,
// blobURL: objectURL
// });
// });
}; };
} }

2
client/modules/IDE/components/FileUploader.js
View file

@ -23,7 +23,7 @@ class FileUploader extends React.Component {
maxThumbnailFilesize: 8, // 3MB maxThumbnailFilesize: 8, // 3MB
thumbnailWidth: 200, thumbnailWidth: 200,
thumbnailHeight: 200, thumbnailHeight: 200,
acceptedMimeTypes: 'image/bmp,image/gif,image/jpg,image/jpeg,image/png', acceptedFiles: 'image/bmp,image/gif,image/jpg,image/jpeg,image/png,audio/*',
dictDefaultMessage: 'Drop files here to upload or click to use the file browser', dictDefaultMessage: 'Drop files here to upload or click to use the file browser',
accept: this.props.dropzoneAcceptCallback, accept: this.props.dropzoneAcceptCallback,
sending: this.props.dropzoneSendingCallback, sending: this.props.dropzoneSendingCallback,

2
client/modules/IDE/components/PreviewFrame.js
View file

@ -97,7 +97,7 @@ class PreviewFrame extends React.Component {
let jsFileStrings = newJSFile.content.match(/(['"])((\\\1|.)*?)\1/gm); let jsFileStrings = newJSFile.content.match(/(['"])((\\\1|.)*?)\1/gm);
jsFileStrings = jsFileStrings || []; jsFileStrings = jsFileStrings || [];
jsFileStrings.forEach(jsFileString => { jsFileStrings.forEach(jsFileString => {
if (jsFileString.match(/^('|")(?!(http:\/\/|https:\/\/)).*\.(png|jpg|jpeg|gif|bmp)('|")$/)) { if (jsFileString.match(/^('|")(?!(http:\/\/|https:\/\/)).*\.(png|jpg|jpeg|gif|bmp|mp3|wav|aiff|ogg)('|")$/)) {
const filePath = jsFileString.substr(1, jsFileString.length - 2); const filePath = jsFileString.substr(1, jsFileString.length - 2);
let fileName = filePath; let fileName = filePath;
if (fileName.match(/^\.\//)) { if (fileName.match(/^\.\//)) {

4
package.json
View file

@ -75,6 +75,7 @@
"express": "^4.13.4", "express": "^4.13.4",
"express-session": "^1.13.0", "express-session": "^1.13.0",
"file-saver": "^1.3.2", "file-saver": "^1.3.2",
"file-type": "^3.8.0",
"htmlhint": "^0.9.13", "htmlhint": "^0.9.13",
"jshint": "^2.9.2", "jshint": "^2.9.2",
"jszip": "^3.0.0", "jszip": "^3.0.0",
@ -96,6 +97,7 @@
"s3-policy": "^0.2.0", "s3-policy": "^0.2.0",
"shortid": "^2.2.6", "shortid": "^2.2.6",
"srcdoc-polyfill": "^0.2.0", "srcdoc-polyfill": "^0.2.0",
"throttle-debounce": "^1.0.1" "throttle-debounce": "^1.0.1",
"xhr": "^2.2.1"
} }
} }