From c263f1f0d48b0d4c3526dc4a1a51d875b98be0bd Mon Sep 17 00:00:00 2001 From: Ingo Oppermann Date: Mon, 6 Nov 2023 17:03:43 +0100 Subject: [PATCH] Use UploadButton component for playersite --- src/misc/UploadButton.js | 4 +- src/views/Playersite.js | 233 +++++++++++++-------------------------- 2 files changed, 79 insertions(+), 158 deletions(-) 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,155 +108,29 @@ export default function Playersite(props) { }); }; - const handleBackgroundImageUpload = (event) => { - const handler = (event) => { - const files = event.target.files; + const handleBackgroundImageUpload = async (data, extension) => { + const path = await props.restreamer.UploadPlayersiteBackgroundImage(data, extension); - setSaving(true); + handleChange('bgimage_url')({ + target: { + value: path, + }, + }); - if (files.length === 0) { - // no files selected - setSaving(false); - showUploadError(Please select a file to upload.); - return; - } - - const file = files[0]; - - 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, - }, - }); - - 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; + setSaving(false); }; - const handleTemplateUpload = (event) => { - const handler = (event) => { - const files = event.target.files; + const handleTemplateUpload = async (data, extension) => { + const name = await props.restreamer.UploadPlayersiteTemplate(data, $settings.templatename); - setSaving(true); + setTemplates(await props.restreamer.ListPlayersiteTemplates()); + setSettings({ + ...$settings, + template: name, + templatename: '', + }); - if (files.length === 0) { - // no files selected - setSaving(false); - showUploadError(Please select a file to upload.); - return; - } - - const file = files[0]; - - let type = null; - for (let t of templateTypes) { - if (t.mimetype === file.type) { - type = t; - break; - } - } - - if (type === null) { - // not one of the allowed mimetypes - setSaving(false); - const types = templateAcceptString; - 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 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; + setSaving(false); }; const handleTemplateDelete = async () => { @@ -274,11 +146,49 @@ export default function Playersite(props) { setSaving(false); }; - const showUploadError = (message) => { + const handleUploadStart = () => { + setSaving(true); + }; + + const handleUploadError = (title) => (err) => { + let message = null; + + switch (err.type) { + case 'nofiles': + message = Please select a file to upload.; + break; + case 'mimetype': + message = ( + + The selected file type ({err.actual}) is not allowed. Allowed file types are {err.allowed} + + ); + break; + case 'size': + message = ( + + The selected file is too big ( + ). Only are allowed. + + ); + 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 = (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} + />