diff --git a/public/index.html b/public/index.html index da86d54..9fd4100 100644 --- a/public/index.html +++ b/public/index.html @@ -51,6 +51,7 @@ --> diff --git a/src/App.css b/src/App.css index 908693f..3d270d3 100644 --- a/src/App.css +++ b/src/App.css @@ -232,4 +232,24 @@ footer a { footer a:hover { text-decoration: underline; +} +.description-text { + font-size: 1rem; + color: #666; + text-align: center; + /* position: fixed; */ + /* z-index: 0; */ + /* top:10px */ +} +.description-box { + z-index: 0; + position: fixed; + top:10px; + background-color: #38ff0021; + border: 2px solid #999; + border-radius: 10px; + padding: 20px; + margin-top: 20px; + max-width: 400px; + text-align: center; } \ No newline at end of file diff --git a/src/App.tsx b/src/App.tsx index 62087c8..c161b9f 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -46,7 +46,7 @@ const App: React.FC = () => { progress: number; time: number; } - + const onProgress = function (progress_obj: progressOBJ) { if (progress_obj.progress > 1000) { return } // sometimes happend to ffmpeg.wasm const progress = progress_obj.progress * 100; @@ -87,21 +87,21 @@ const App: React.FC = () => { } else { console.log("no ffmpeg instance, using setpostFFmpegInstance") - setpostFFmpegInstance(() => { setCurrentScreen(Screen.PREVIEW);setpostFFmpegInstance(null) }) + setpostFFmpegInstance(() => { setCurrentScreen(Screen.PREVIEW); setpostFFmpegInstance(null) }) } }; const { getRootProps, getInputProps } = useDropzone({ - accept: { "image/gif": [], "video/*": [], "audio/*": [], "image/*": []}, + accept: { "image/gif": [], "video/*": [], "audio/*": [], "image/*": [] }, onDrop: handleFileUpload, }); const handleConvert = async () => { setCurrentScreen(Screen.CONVERTING); - window.addEventListener("popstate", ()=>{;handleReset_reload()}) + window.addEventListener("popstate", () => { ; handleReset_reload() }) - window.history.pushState({}, "converting", "#converting"); + window.history.pushState({}, "converting", "#converting"); // window.removeEventListener('popstate',handleReset); // console.log(`resetting outputFiles from [${outputFiles}] to []`); @@ -113,7 +113,7 @@ const App: React.FC = () => { const mimetype: string = ConvertOptions[output_ext].mimetype; // the first in the list is the default const newOutputFiles = []; const verifyFFmpegWorking = () => { // we cannot use progress value here since react save the state, so it always be zero - if (ProgressBarRef.current?.value === 0) { const s = ("ffmpeg not returning any progress in 8 seconds. maybe your browser killed it. if it continue to be on 0%, please reload"); setErrorMessage(s)} + if (ProgressBarRef.current?.value === 0) { const s = ("ffmpeg not returning any progress in 8 seconds. maybe your browser killed it. if it continue to be on 0%, please reload"); setErrorMessage(s) } } for (const [i, inputFile] of selectedFiles.entries()) { @@ -127,8 +127,8 @@ const App: React.FC = () => { if (mostInputFormat) { ffmpeg_arguments = mostInputFormat.optional_convert_routes[output_ext] console.log("ffmpeg arguments:", ffmpeg_arguments) - if (ffmpeg_arguments===undefined){ - console.log("mostInputFormat:",mostInputFormat,output_ext); + if (ffmpeg_arguments === undefined) { + console.log("mostInputFormat:", mostInputFormat, output_ext); } } @@ -154,7 +154,7 @@ const App: React.FC = () => { clearTimeout(it) newOutputFiles.push(outFile); } - if (!ffmpegInstance.loaded){ + if (!ffmpegInstance.loaded) { console.log("get ffmpegInstance.loaded=false") handleReset(); return; @@ -168,9 +168,9 @@ const App: React.FC = () => { setErrorMessage(err); } }; - const handleReset_reload = ()=>{handleReset("true")} + const handleReset_reload = () => { handleReset("true") } - const handleReset = (x:any="false") => { + const handleReset = (x: any = "false") => { setSelectedFiles([]); setConversionProgress(0); setCurrentScreen(Screen.UPLOAD); @@ -179,24 +179,34 @@ const App: React.FC = () => { setMostInputFormat(null); setLogs([]); setOutputFiles([]); - if (ffmpegInstance && (x==="true")){ + if (ffmpegInstance && (x === "true")) { ffmpegInstance.reload() } - window.removeEventListener('popstate',handleReset_reload); + window.removeEventListener('popstate', handleReset_reload); }; function renderScreen() { switch (currentScreen) { case Screen.UPLOAD: return ( -
-
- -

- Drag files here or click here to upload files -

+ <> +
+

+ Private Convert is a private (static) website to convert media files privately in your browser.

+ Your files will stay locally on your computer. + {/* **without** be uploaded to our servers. */} + +

+
+
+ +

+ Drag files here or click here to upload files +

+
+

-
+ ); case Screen.PREVIEW: @@ -390,7 +400,7 @@ const App: React.FC = () => { value={conversionProgress} ref={ProgressBarRef} max={100} /> - {conversionProgress !==0 && {conversionProgress.toFixed(2)}%} + {conversionProgress !== 0 && {conversionProgress.toFixed(2)}%} {errorMessage && <>

{errorMessage}