Renamed every side to page

src/components/blenderController.ts

@@ -2,11 +2,11 @@ import { blenderPath, blenderScriptPath, dataPath, templatePath } from "./paths"
 import {spawn} from "child_process";
 import logger from "./logger";
 import { setBlenderLoading, setBlenderStatus } from "./ui/menu";
-import { setLogNumber, setPastTime, setRemainingTime, setRenderDisplayProgress, setStatus, setPastTimeNow, setRemainingTimeNow } from "./ui/renderingSide";
+import { setLogNumber, setPastTime, setRemainingTime, setRenderDisplayProgress, setStatus, setPastTimeNow, setRemainingTimeNow } from "./ui/renderingPage";
-import {imageLoading, imageLoaded} from "./ui/settingsSide";
+import {imageLoading, imageLoaded} from "./ui/settingsPage";
 import { getLogList, getLogSize, settingList } from "./settings";
 import isValid from "is-valid-path";
-import { sideSetRendering, setProgress, openSide, Side } from "../renderer";
+import { pageSetRendering, setProgress, openPage, Page } from "../renderer";
 import { ipcRenderer } from "electron";
 // import { getDoNotDisturb } from "electron-notification-state";
 
@@ -113,10 +113,10 @@ function startBlender() {
             setRenderProgress(parseInt(log), false, parseInt(frames), parseInt(lastFrame));
         }
         if(dataStr.includes("Finished") && renderingVideo) {
-            sideSetRendering(false);
+            pageSetRendering(false);
             renderInfo.endTime = new Date().getTime();
             if(lastFrame == frames) {
-                openSide(Side.RenderFinish);
+                openPage(Page.RenderFinish);
                 // TODO: only show notification if not in do not disturb mode, currently not working. Details: https://github.com/felixrieseberg/macos-notification-state/issues/30
                     new Notification("Render Finished", {
                         body: "Rendering finished successfully!"
@@ -140,7 +140,7 @@ function startBlender() {
         }
         
         if(dataStr.includes("Waiting for command")) {
-            sideSetRendering(false);
+            pageSetRendering(false);
             setProgress();
             
             if(renderingPicture) {
@@ -170,7 +170,7 @@ function startBlender() {
 }
 
 function restartBlender() {
-    sideSetRendering(false);
+    pageSetRendering(false);
     blenderConsole.kill();
     blenderConsole = spawn(blenderPath, blenderStartString);
     startBlender();
@@ -220,7 +220,7 @@ function blender(command:blenderCmd) {
                 
                 readyToAcceptCommand = false;
                 renderingVideo = true;
-                sideSetRendering(true);
+                pageSetRendering(true);
                 setBlenderStatus("Rendering");
                 setBlenderLoading(true);
                 blenderConsole.stdin.write("startRendering\n");

src/components/ui/mainPage.tsx

@@ -8,7 +8,7 @@ import {platformCharacter} from "../paths";
 import {getLogTime} from "../logReader";
 import {formatDate} from "../dateFormat";
 
-function MainSide() {
+function MainPage() {
     const [logs, setLogs] = useState(settingList.log);
     const [output, setOutput] = useState(settingList.output);
     const [logTable, setLogTable] = useState([<tr key={0}></tr>]);
@@ -143,4 +143,4 @@ function openVid(updateHook:React.Dispatch<React.SetStateAction<string>>) {
     });
 }
 
-export default MainSide;
+export default MainPage;

src/components/ui/menu.tsx

@@ -1,5 +1,5 @@
 import React, {useState} from "react";
-import { openSide, Side } from "../../renderer";
+import { openPage, Page } from "../../renderer";
 import { platform, Platform } from "../platform";
 import { ipcRenderer } from "electron";
 
@@ -20,8 +20,8 @@ const WinButtons = () => (
     </>
 )
 
-const MainSideButtonsWin = () => (
+const MainPageButtonsWin = () => (
-    <div id="settings-button-win" onClick={() => openSide(Side.Settings)}>
+    <div id="settings-button-win" onClick={() => openPage(Page.Settings)}>
         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
             {/* Font Awesome Pro 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. */}
             <path
@@ -29,8 +29,8 @@ const MainSideButtonsWin = () => (
         </svg>
     </div>
 )
-const MainSideButtonsLinux = () => (
+const MainPageButtonsLinux = () => (
-    <div id="settings-button-linux" onClick={() => openSide(Side.Settings)}>
+    <div id="settings-button-linux" onClick={() => openPage(Page.Settings)}>
         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
             {/* Font Awesome Pro 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. */}
             <path
@@ -39,8 +39,8 @@ const MainSideButtonsLinux = () => (
     </div>
 )
 
-const SettingsSideButtonsWin = () => (
+const SettingsPageButtonsWin = () => (
-    <div id="backButton-win" onClick={() => openSide(Side.Main)}>
+    <div id="backButton-win" onClick={() => openPage(Page.Main)}>
         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
             {/* <!--! Font Awesome Pro 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --> */}
             <path d="M256 0C114.6 0 0 114.6 0 256c0 141.4 114.6 256 256 256s256-114.6 256-256C512 114.6 397.4 0 256 0zM310.6 345.4c12.5 12.5 12.5 32.75 0 45.25s-32.75 12.5-45.25 0l-112-112C147.1 272.4 144 264.2 144 256s3.125-16.38 9.375-22.62l112-112c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25L221.3 256L310.6 345.4z"/>
@@ -48,8 +48,8 @@ const SettingsSideButtonsWin = () => (
     </div>
 )
 
-const SettingsSideButtonsLinux = () => (
+const SettingsPageButtonsLinux = () => (
-    <button className="back-button-linux" onClick={() => openSide(Side.Main)}>Back</button>
+    <button className="back-button-linux" onClick={() => openPage(Page.Main)}>Back</button>
 )
 
 const BlenderLoadingSVG = () => (
@@ -65,14 +65,14 @@ const BlenderReadySVG = () => (
     </svg>
 )
 
-function WindowsMenu({side, blenderLoading, blenderStatus}:{side:Side, blenderLoading:boolean, blenderStatus:string}) {
+function WindowsMenu({page, blenderLoading, blenderStatus}:{page:Page, blenderLoading:boolean, blenderStatus:string}) {
     return (
         <header id="winHeader">
             <h4>
-                {(side == Side.Main)? "StickExporterTX" : null}
+                {(page == Page.Main)? "StickExporterTX" : null}
-                {(side == Side.Settings)? "Settings" : null}
+                {(page == Page.Settings)? "Settings" : null}
-                {(side == Side.Rendering)? "Rendering" : null}
+                {(page == Page.Rendering)? "Rendering" : null}
-                {(side == Side.RenderFinish)? "Render Finished" : null}
+                {(page == Page.RenderFinish)? "Render Finished" : null}
             </h4>
             <div id="blender-info-win">
                 <div id="blender-icon-win">
@@ -80,21 +80,21 @@ function WindowsMenu({side, blenderLoading, blenderStatus}:{side:Side, blenderLo
                 </div>
                 <p>{blenderStatus}</p>
             </div>
-            {(side == Side.Main)? <MainSideButtonsWin/> : null}
+            {(page == Page.Main)? <MainPageButtonsWin/> : null}
-            {(side == Side.Settings)? <SettingsSideButtonsWin/> : null}
+            {(page == Page.Settings)? <SettingsPageButtonsWin/> : null}
             <WinButtons/>
         </header>
     )
 }
 
-function LinuxMenu({side, blenderLoading, blenderStatus}:{side:Side, blenderLoading:boolean, blenderStatus:string}) {
+function LinuxMenu({page, blenderLoading, blenderStatus}:{page:Page, blenderLoading:boolean, blenderStatus:string}) {
     return (
         <header id="linuxHeader">
             <h1>
-                {(side == Side.Main)? "StickExporterTX" : null}
+                {(page == Page.Main)? "StickExporterTX" : null}
-                {(side == Side.Settings)? "Settings" : null}
+                {(page == Page.Settings)? "Settings" : null}
-                {(side == Side.Rendering)? "Rendering" : null}
+                {(page == Page.Rendering)? "Rendering" : null}
-                {(side == Side.RenderFinish)? "Render Finished" : null}
+                {(page == Page.RenderFinish)? "Render Finished" : null}
             </h1>
             <div id="blender-info-linux">
                 <div id="blender-icon-linux">
@@ -102,8 +102,8 @@ function LinuxMenu({side, blenderLoading, blenderStatus}:{side:Side, blenderLoad
                 </div>
                 <p>{blenderStatus}</p>
             </div>
-            {(side == Side.Main)? <MainSideButtonsLinux/> : null}
+            {(page == Page.Main)? <MainPageButtonsLinux/> : null}
-            {(side == Side.Settings)? <SettingsSideButtonsLinux/> : null}
+            {(page == Page.Settings)? <SettingsPageButtonsLinux/> : null}
         </header>
     )
 }
@@ -111,7 +111,7 @@ function LinuxMenu({side, blenderLoading, blenderStatus}:{side:Side, blenderLoad
 let setBlenderLoading:React.Dispatch<React.SetStateAction<boolean>>;
 let setBlenderStatus:React.Dispatch<React.SetStateAction<string>>;
 
-function Menu({side}:{side:Side}) {
+function Menu({page}:{page:Page}) {
     
     const [blenderLoading, setBlenderLoadingInner] = useState(true);
     setBlenderLoading = setBlenderLoadingInner;
@@ -120,8 +120,8 @@ function Menu({side}:{side:Side}) {
     
     return (
         <>
-            {(platform === Platform.Windows)? <WindowsMenu side={side} blenderLoading={blenderLoading} blenderStatus={blenderStatus}/> : null}
+            {(platform === Platform.Windows)? <WindowsMenu page={page} blenderLoading={blenderLoading} blenderStatus={blenderStatus}/> : null}
-            {(platform === Platform.Linux)? <LinuxMenu side={side} blenderLoading={blenderLoading} blenderStatus={blenderStatus}/> : null}
+            {(platform === Platform.Linux)? <LinuxMenu page={page} blenderLoading={blenderLoading} blenderStatus={blenderStatus}/> : null}
         </>
     )
 }

src/components/ui/renderFinishPage.tsx

@@ -1,5 +1,5 @@
 import React, { CSSProperties } from "react";
-import {openSide, Side} from "../../renderer";
+import {openPage, Page} from "../../renderer";
 import {renderInfo} from "../blenderController";
 import openFolder from "../openFolder";
 import {settingList} from "../settings";
@@ -17,7 +17,7 @@ const detailsInnerStyle:CSSProperties = {
     marginRight: "5px",
 }
 
-function RenderFinishSide() {
+function RenderFinishPage() {
     const [logPlaying, setLogPlaying] = React.useState(path.join(settingList.output, settingList.log.substring(1).slice(0, -1).split('""')[0].split(platformCharacter())[settingList.log.substring(1).slice(0, -1).split('""')[0].split(platformCharacter()).length - 1].replace(".csv", "."+settingList.videoFormat)));
     
     const [logList, setLogList] = React.useState([<li key={0}></li>]);
@@ -75,7 +75,7 @@ function RenderFinishSide() {
                 marginRight: "10px",
                 backgroundColor: "#00c24a",
             }} onClick={() => {
-                openSide(Side.Main);
+                openPage(Page.Main);
             }}>Finish</button>
             <button onClick={() => openFolder(settingList.output)}>Open Output Folder</button>
             <div style={{
@@ -90,4 +90,4 @@ function RenderFinishSide() {
     );
 }
 
-export default RenderFinishSide;
+export default RenderFinishPage;

src/components/ui/renderingPage.tsx

@@ -12,7 +12,7 @@ let setRemainingTime:React.Dispatch<React.SetStateAction<string>>;
 let pastTimeNow = "0m 0s";
 let remainingTimeNow = "calculating...";
 
-function RenderingSide() {
+function RenderingPage() {
     const [logNumber, setLogNumberInner] = useState("0");
     setLogNumber = setLogNumberInner;
     const [status, setStatusInner] = useState("Idle");
@@ -82,7 +82,7 @@ function setRemainingTimeNow(time:string) {
     remainingTimeNow = time;
 }
 
-export default RenderingSide;
+export default RenderingPage;
 export {
     setLogNumber,
     setStatus,

src/components/ui/settingsPage.tsx

@@ -6,7 +6,7 @@ import path from "path";
 
 let setRenderImg:React.Dispatch<React.SetStateAction<string>>;
 let setRenderLoading:React.Dispatch<React.SetStateAction<boolean>>;
-let sideLoaded = false;
+let pageLoaded = false;
 
 function picturePath() {
     return path.join(dataPath, "render.png?t="+Date.now());
@@ -57,7 +57,7 @@ function VideoFormatWarning({videoFormat}:{videoFormat:VideoFormat}) {
     );
 }
 
-function SettingsSide() {
+function SettingsPage() {
     
     const [fps, setFps] = useState(settingList.fps);
     const [width, setWidth] = useState(settingList.width);
@@ -86,7 +86,7 @@ function SettingsSide() {
         return () => clearTimeout(timer);
     }, [fps, videoFormat]);
     
-    sideLoaded = true;
+    pageLoaded = true;
     
     const VideoFormatOptions = Object.keys(VideoFormat).filter((el) => { return isNaN(Number(el)) }).map(key => {
         return <option key={key} value={key}>{key}</option>;
@@ -158,16 +158,16 @@ function SettingsSide() {
 }
 
 function imageLoading() {
-    if(sideLoaded) setRenderLoading(true);
+    if(pageLoaded) setRenderLoading(true);
 }
 function imageLoaded() {
-    if(sideLoaded) {
+    if(pageLoaded) {
         setRenderImg(picturePath());
         setRenderLoading(false);
     }
 }
 
-export default SettingsSide;
+export default SettingsPage;
 export {
     imageLoading,
     imageLoaded

src/renderer.tsx

@@ -1,16 +1,16 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
 import Menu from "./components/ui/menu";
-import MainSide from "./components/ui/mainSide";
+import MainPage from "./components/ui/mainPage";
-import SettingsSite from "./components/ui/settingsSide";
+import SettingsPage from "./components/ui/settingsPage";
-import RenderingSide from "./components/ui/renderingSide";
+import RenderingPage from "./components/ui/renderingPage";
-import RenderFinishSide from "./components/ui/renderFinishSide";
+import RenderFinishPage from "./components/ui/renderFinishPage";
 import "./index.css";
 import "./toggle-switchy.css";
 import { startBlender } from "./components/blenderController";
 import {ipcRenderer} from "electron";
 
-enum Side {
+enum Page {
     Main,
     Rendering,
     Settings,
@@ -18,39 +18,39 @@ enum Side {
 }
 
 let rendering = false;
-let currentSide = Side.Main;
+let currentPage = Page.Main;
 
 const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement);
-function openSide(side:Side) {
+function openPage(page:Page) {
-    if(side == Side.Main && rendering) {
+    if(page == Page.Main && rendering) {
-        side = Side.Rendering;
+        page = Page.Rendering;
     }
-    currentSide = side;
+    currentPage = page;
     
     root.render(
         <React.StrictMode>
-            <Menu side={side}/>
+            <Menu page={page}/>
-            {(side === Side.Main)? <MainSide/> : null}
+            {(page === Page.Main)? <MainPage/> : null}
-            {(side === Side.Settings)? <SettingsSite/> : null}
+            {(page === Page.Settings)? <SettingsPage/> : null}
-            {(side === Side.Rendering)? <RenderingSide/> : null}
+            {(page === Page.Rendering)? <RenderingPage/> : null}
-            {(side === Side.RenderFinish)? <RenderFinishSide/> : null}
+            {(page === Page.RenderFinish)? <RenderFinishPage/> : null}
         </React.StrictMode>
     );
 }
 
-openSide(currentSide);
+openPage(currentPage);
 
 startBlender();
 
-function sideSetRendering(value:boolean) {
+function pageSetRendering(value:boolean) {
     rendering = value;
     if(value) {
-        if(currentSide === Side.Main) {
+        if(currentPage === Page.Main) {
-            openSide(Side.Rendering);
+            openPage(Page.Rendering);
         }
     } else {
-        if(currentSide === Side.Rendering) {
+        if(currentPage === Page.Rendering) {
-            openSide(Side.Main);
+            openPage(Page.Main);
         }
     }
 }
@@ -64,8 +64,8 @@ function setProgress(value?:number) {
 }
         
 export {
-    openSide,
+    openPage,
-    Side,
+    Page,
-    sideSetRendering,
+    pageSetRendering,
     setProgress
 }