Cool_Tools/upscayl
1
0
Fork 0
mirror of https://github.com/upscayl/upscayl.git synced 2025-01-19 01:24:09 +01:00
Code Releases Wiki Activity

Merge pull request #297 from yevgeniyakimenko/fix-react-infinite-loop

Browse Source 
fixed react infinite loop on adding single image
This commit is contained in:
Suvojit Ghosh 2023-05-05 20:23:27 +05:30 committed by GitHub
commit 31985b1de6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 42 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
renderer/pages/index.tsx
View File

@ -480,15 +480,6 @@ const Home = () => {
resetImagePaths();
};
const formatPath = (path) => {
//USE REGEX TO GET THE FILENAME AND ENCODE IT INTO PROPER FORM IN ORDER TO AVOID ERRORS DUE TO SPECIAL CHARACTERS
logit("📢 Formatting path: ", path);
return path.replace(
/([^/\\]+)$/i,
encodeURIComponent(path.match(/[^/\\]+$/i)[0])
);
};
const allowedFileTypes = ["png", "jpg", "jpeg", "webp"];
const allowedVideoFileTypes = ["webm", "mp4", "mkv"];
@ -629,7 +620,19 @@ const Home = () => {
<img
src={
"file://" +
`${upscaledImagePath ? upscaledImagePath : imagePath}`
`${
upscaledImagePath
? upscaledImagePath.replace(
/([^/\\]+)$/i,
encodeURIComponent(
upscaledImagePath.match(/[^/\\]+$/i)[0]
)
)
: imagePath.replace(
/([^/\\]+)$/i,
encodeURIComponent(imagePath.match(/[^/\\]+$/i)[0])
)
}`
}
onLoad={(e: any) => {
setDimensions({
@ -639,7 +642,7 @@ const Home = () => {
}}
draggable="false"
alt=""
className={`h-full w-full bg-[#1d1c23] object-contain`}
className="h-full w-full bg-[#1d1c23] object-contain"
/>
</>
)}
@ -687,7 +690,14 @@ const Home = () => {
</p>
<img
src={"file:///" + imagePath}
/* USE REGEX TO GET THE FILENAME AND ENCODE IT INTO PROPER FORM IN ORDER TO AVOID ERRORS DUE TO SPECIAL CHARACTERS */
src={
"file:///" +
imagePath.replace(
/([^/\\]+)$/i,
encodeURIComponent(imagePath.match(/[^/\\]+$/i)[0])
)
}
alt="Original"
onMouseMove={handleMouseMove}
style={{
@ -705,7 +715,16 @@ const Home = () => {
Upscayled
</p>
<img
src={"file://" + upscaledImagePath}
/* USE REGEX TO GET THE FILENAME AND ENCODE IT INTO PROPER FORM IN ORDER TO AVOID ERRORS DUE TO SPECIAL CHARACTERS */
src={
"file://" +
upscaledImagePath.replace(
/([^/\\]+)$/i,
encodeURIComponent(
upscaledImagePath.match(/[^/\\]+$/i)[0]
)
)
}
alt="Upscayl"
style={{
objectFit: "contain",
@ -724,7 +743,16 @@ const Home = () => {
{isVideo && videoPath.length > 0 && upscaledVideoPath.length === 0 && (
<video autoPlay controls className="m-10 w-11/12 rounded-2xl">
<source src={"file://" + videoPath} type="video/mp4" />
<source
src={
"file://" +
videoPath.replace(
/([^/\\]+)$/i,
encodeURIComponent(videoPath.match(/[^/\\]+$/i)[0])
)
}
type="video/mp4"
/>
</video>
)}
</div>