diff --git a/src/misc/UploadButton.js b/src/misc/UploadButton.js
index d97132d..c232cee 100644
--- a/src/misc/UploadButton.js
+++ b/src/misc/UploadButton.js
@@ -3,9 +3,9 @@ import React from 'react';
import FormInlineButton from './FormInlineButton';
export default function UploadButton(props) {
- const { acceptType, label, onError, onStart, onUpload, ...other } = props;
+ const { acceptTypes, label, onError, onStart, onUpload, ...other } = props;
- const acceptString = props.acceptTypes.map((t) => t.mimetype).join(',');
+ const accept = props.acceptTypes.map((t) => t.mimetype);
const handleUpload = (event) => {
const handler = (event) => {
@@ -23,7 +23,14 @@ export default function UploadButton(props) {
let type = null;
for (let t of props.acceptTypes) {
- if (t.mimetype === file.type) {
+ const accept = t.mimetype.split('/');
+ const actual = file.type.split('/');
+
+ if (accept[0] !== actual[0]) {
+ continue;
+ }
+
+ if (accept[1] === '*' || accept[1] === actual[1]) {
type = t;
break;
}
@@ -34,7 +41,7 @@ export default function UploadButton(props) {
props.onError({
type: 'mimetype',
actual: file.type,
- allowed: acceptString,
+ allowed: accept.slice(),
});
return;
}
@@ -61,7 +68,7 @@ export default function UploadButton(props) {
return;
}
- props.onUpload(reader.result, type.extension);
+ props.onUpload(reader.result, type.extension, type.mimetype);
};
};
@@ -77,7 +84,7 @@ export default function UploadButton(props) {
return (
{props.label}
-
+
);
}
diff --git a/src/views/Edit/Sources/VideoLoop.js b/src/views/Edit/Sources/VideoLoop.js
index 782e688..298768a 100644
--- a/src/views/Edit/Sources/VideoLoop.js
+++ b/src/views/Edit/Sources/VideoLoop.js
@@ -16,8 +16,8 @@ import FormInlineButton from '../../../misc/FormInlineButton';
import UploadButton from '../../../misc/UploadButton';
const imageTypes = [
- { mimetype: 'image/png', extension: 'png', maxSize: 2 * 1024 * 1024 },
- { mimetype: 'image/jpeg', extension: 'jpg', maxSize: 2 * 1024 * 1024 },
+ { mimetype: 'image/*', extension: 'image', maxSize: 2 * 1024 * 1024 },
+ { mimetype: 'video/*', extension: 'video', maxSize: 25 * 1024 * 1024 },
];
const useStyles = makeStyles((theme) => ({
@@ -33,6 +33,7 @@ const initSettings = (initialSettings) => {
const settings = {
address: '',
+ mimetype: '',
...initialSettings,
};
@@ -46,8 +47,12 @@ const createInputs = (settings) => {
options: [],
};
- input.options.push('-loop', '1');
- input.options.push('-framerate', '1');
+ if (settings.mimetype.startsWith('image/')) {
+ input.options.push('-framerate', '1');
+ input.options.push('-loop', '1');
+ } else {
+ input.options.push('-stream_loop', '-1');
+ }
input.options.push('-re');
return [input];
@@ -63,24 +68,13 @@ function Source(props) {
message: '',
});
- const handleChange = (what) => (event) => {
- let data = {};
-
- data[what] = event.target.value;
+ const handleFileUpload = async (data, extension, mimetype) => {
+ const path = await props.onStore('loop.source', data);
props.onChange({
...settings,
- ...data,
- });
- };
-
- const handleImageUpload = async (data, extension) => {
- const path = await props.onStore('input.' + extension, data);
-
- handleChange('address')({
- target: {
- value: path,
- },
+ address: path,
+ mimetype: mimetype,
});
setSaving(false);
@@ -100,7 +94,7 @@ function Source(props) {
case 'mimetype':
message = (
- The selected file type ({err.actual}) is not allowed. Allowed file types are {err.allowed}
+ The selected file type ({err.actual}) is not allowed. Allowed file types are {err.allowed.join(', ')}
);
break;
@@ -147,23 +141,21 @@ function Source(props) {
return (
+
+
+ Upload an image or video file ({imageTypes.map((t) => t.mimetype).join(', ')}) in order to loop it.
+
+
- Image path}
- value={settings.address}
- onChange={handleChange('address')}
- />
+ File path} value={settings.address} readOnly />
Upload}
acceptTypes={imageTypes}
onStart={handleUploadStart}
- onError={handleUploadError(Uploading the image failed)}
- onUpload={handleImageUpload}
+ onError={handleUploadError(Uploading the file failed)}
+ onUpload={handleFileUpload}
/>
diff --git a/src/views/Playersite.js b/src/views/Playersite.js
index aa8de45..b4c50a3 100644
--- a/src/views/Playersite.js
+++ b/src/views/Playersite.js
@@ -160,7 +160,7 @@ export default function Playersite(props) {
case 'mimetype':
message = (
- The selected file type ({err.actual}) is not allowed. Allowed file types are {err.allowed}
+ The selected file type ({err.actual}) is not allowed. Allowed file types are {err.allowed.join(', ')}
);
break;
diff --git a/src/views/Publication/Player.js b/src/views/Publication/Player.js
index baf611e..7c44463 100644
--- a/src/views/Publication/Player.js
+++ b/src/views/Publication/Player.js
@@ -197,7 +197,7 @@ export default function Edit(props) {
case 'mimetype':
message = (
- The selected file type ({err.actual}) is not allowed. Allowed file types are {err.allowed}
+ The selected file type ({err.actual}) is not allowed. Allowed file types are {err.allowed.join(', ')}
);
break;