diff --git a/src/misc/UploadButton.js b/src/misc/UploadButton.js index 360205d..d97132d 100644 --- a/src/misc/UploadButton.js +++ b/src/misc/UploadButton.js @@ -3,6 +3,8 @@ import React from 'react'; import FormInlineButton from './FormInlineButton'; export default function UploadButton(props) { + const { acceptType, label, onError, onStart, onUpload, ...other } = props; + const acceptString = props.acceptTypes.map((t) => t.mimetype).join(','); const handleUpload = (event) => { @@ -73,7 +75,7 @@ export default function UploadButton(props) { }; return ( - + {props.label} diff --git a/src/views/Playersite.js b/src/views/Playersite.js index 9a86675..aa8de45 100644 --- a/src/views/Playersite.js +++ b/src/views/Playersite.js @@ -20,6 +20,7 @@ import playerSiteThumb from '../assets/images/playersite.png'; import Checkbox from '../misc/Checkbox'; import ColorPicker from '../misc/ColorPicker'; import Dialog from '../misc/modals/Dialog'; +import Filesize from '../misc/Filesize'; import FormInlineButton from '../misc/FormInlineButton'; import H from '../utils/help'; import NotifyContext from '../contexts/Notify'; @@ -30,6 +31,7 @@ import PaperThumb from '../misc/PaperThumb'; import Select from '../misc/Select'; import TabPanel from '../misc/TabPanel'; import TabsVerticalGrid from '../misc/TabsVerticalGrid'; +import UploadButton from '../misc/UploadButton'; const useStyles = makeStyles((theme) => ({ buttonOpen: { @@ -45,12 +47,8 @@ const imageTypes = [ { mimetype: 'image/svg+xml', extension: 'svg', maxSize: 1 * 1024 * 1024 }, ]; -const imageAcceptString = imageTypes.map((t) => t.mimetype).join(','); - const templateTypes = [{ mimetype: 'text/html', extension: 'html', maxSize: 500 * 1024 }]; -const templateAcceptString = templateTypes.map((t) => t.mimetype).join(','); - export default function Playersite(props) { const classes = useStyles(); const navigate = useNavigate(); @@ -110,175 +108,87 @@ export default function Playersite(props) { }); }; - const handleBackgroundImageUpload = (event) => { - const handler = (event) => { - const files = event.target.files; - - setSaving(true); - - if (files.length === 0) { - // no files selected - setSaving(false); - showUploadError(Please select a file to upload.); - return; - } - - const file = files[0]; + const handleBackgroundImageUpload = async (data, extension) => { + const path = await props.restreamer.UploadPlayersiteBackgroundImage(data, extension); - let type = null; - for (let t of imageTypes) { - if (t.mimetype === file.type) { - type = t; - break; - } - } - - if (type === null) { - // not one of the allowed mimetypes - setSaving(false); - const types = imageAcceptString; - showUploadError( - - The selected file type ({file.type}) is not allowed. Allowed file types are {types} - - ); - return; - } - - if (file.size > type.maxSize) { - // the file is too big - setSaving(false); - showUploadError( - - The selected file is too big ({file.size} bytes). Only {type.maxSize} bytes are allowed. - - ); - return; - } - - let reader = new FileReader(); - reader.readAsArrayBuffer(file); - reader.onloadend = async () => { - if (reader.result === null) { - // reading the file failed - setSaving(false); - showUploadError(There was an error during upload: {reader.error.message}); - return; - } - - const path = await props.restreamer.UploadPlayersiteBackgroundImage(reader.result, type.extension); + handleChange('bgimage_url')({ + target: { + value: path, + }, + }); - handleChange('bgimage_url')({ - target: { - value: path, - }, - }); + setSaving(false); + }; - setSaving(false); - }; - }; + const handleTemplateUpload = async (data, extension) => { + const name = await props.restreamer.UploadPlayersiteTemplate(data, $settings.templatename); - handler(event); + setTemplates(await props.restreamer.ListPlayersiteTemplates()); + setSettings({ + ...$settings, + template: name, + templatename: '', + }); - // reset the value such that the onChange event will be triggered again - // if the same file gets selected again - event.target.value = null; + setSaving(false); }; - const handleTemplateUpload = (event) => { - const handler = (event) => { - const files = event.target.files; + const handleTemplateDelete = async () => { + setSaving(true); - setSaving(true); + await props.restreamer.DeletePlayersiteTemplate($settings.template); + setSettings({ + ...$settings, + template: '!default', + }); + setTemplates(await props.restreamer.ListPlayersiteTemplates()); - if (files.length === 0) { - // no files selected - setSaving(false); - showUploadError(Please select a file to upload.); - return; - } + setSaving(false); + }; - const file = files[0]; + const handleUploadStart = () => { + setSaving(true); + }; - let type = null; - for (let t of templateTypes) { - if (t.mimetype === file.type) { - type = t; - break; - } - } + const handleUploadError = (title) => (err) => { + let message = null; - if (type === null) { - // not one of the allowed mimetypes - setSaving(false); - const types = templateAcceptString; - showUploadError( + switch (err.type) { + case 'nofiles': + message = Please select a file to upload.; + break; + case 'mimetype': + message = ( - The selected file type ({file.type}) is not allowed. Allowed file types are {types} + The selected file type ({err.actual}) is not allowed. Allowed file types are {err.allowed} ); - return; - } - - if (file.size > type.maxSize) { - // the file is too big - setSaving(false); - showUploadError( + break; + case 'size': + message = ( - The selected file is too big ({file.size} bytes). Only {type.maxSize} bytes are allowed. + The selected file is too big ( + ). Only are allowed. ); - return; - } - - let reader = new FileReader(); - reader.readAsArrayBuffer(file); - reader.onloadend = async () => { - if (reader.result === null) { - // reading the file failed - setSaving(false); - showUploadError(There was an error during upload: {reader.error.message}); - return; - } - - const name = await props.restreamer.UploadPlayersiteTemplate(reader.result, $settings.templatename); - - setTemplates(await props.restreamer.ListPlayersiteTemplates()); - setSettings({ - ...$settings, - template: name, - templatename: '', - }); - - setSaving(false); - }; - }; - - handler(event); - - // reset the value such that the onChange event will be triggered again - // if the same file gets selected again - event.target.value = null; - }; - - const handleTemplateDelete = async () => { - setSaving(true); - - await props.restreamer.DeletePlayersiteTemplate($settings.template); - setSettings({ - ...$settings, - template: '!default', - }); - setTemplates(await props.restreamer.ListPlayersiteTemplates()); + break; + case 'read': + message = There was an error during upload: {err.message}; + break; + default: + message = Unknown upload error; + } setSaving(false); + + showUploadError(title, message); }; - const showUploadError = (message) => { + const showUploadError = (title, message) => { setError({ ...$error, open: true, - title: Uploading the file failed, + title: title, message: message, }); }; @@ -511,10 +421,16 @@ export default function Playersite(props) { - - Upload - - + Upload} + acceptTypes={templateTypes} + onStart={handleUploadStart} + onError={handleUploadError(Uploading the file failed)} + onUpload={handleTemplateUpload} + /> @@ -646,10 +562,13 @@ export default function Playersite(props) { - - Upload - - + Upload} + acceptTypes={imageTypes} + onStart={handleUploadStart} + onError={handleUploadError(Uploading the file failed)} + onUpload={handleBackgroundImageUpload} + />