removed com.apple.security.network.server from entitlements.plist, ad…

…ded fileformat hover tooltip to fileuploader box, removed onation links (commented out), improved table UI css (#49)
MartinBarker · Feb 21, 2025 · a1d0739 · a1d0739
1 parent cac65f6
commit a1d0739
Show file tree

Hide file tree

Showing 8 changed files with 162 additions and 78 deletions.
diff --git a/entitlements.mas.plist b/entitlements.mas.plist
@@ -10,8 +10,6 @@
 	</array>
 	<key>com.apple.security.network.client</key>
 	<true/>
-	<key>com.apple.security.network.server</key>
-	<true/>
 	<key>com.apple.security.files.user-selected.read-write</key>
 	<true/>
 </dict>

diff --git a/main.js b/main.js
@@ -25,7 +25,7 @@ app.disableHardwareAcceleration();
 
 // Define audio and image file extensions
 const audioExtensions = ['mp3', 'wav', 'flac', 'ogg', 'm4a', 'aac', 'aiff', 'wma', 'amr', 'opus', 'alac', 'pcm', 'mid', 'midi', 'aif', 'caf'];
-const imageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'tiff', 'webp', 'heif', 'heic', 'ico', 'svg', 'raw', 'cr2', 'nef', 'orf', 'arw', 'raf', 'dng', 'pef', 'sr2'];
+const imageExtensions = ['aiff', 'jpg', 'jpeg', 'png', 'gif', 'bmp', 'tiff', 'webp', 'heif', 'heic', 'ico', 'svg', 'raw', 'cr2', 'nef', 'orf', 'arw', 'raf', 'dng', 'pef', 'sr2'];
 
 const thumbnailCacheDir = path.join(os.tmpdir(), 'RenderTune-thumbnails');
 if (!fs.existsSync(thumbnailCacheDir)) {
@@ -212,17 +212,28 @@ function setupAutoUpdater() {
 
 // Function to sanitize FFmpeg command arguments
 function sanitizeFFmpegArgs(args) {
-  return args;
-  /*
-  const sanitizedArgs = args.map(arg => {
+  return args.map(arg => {
     if (typeof arg === 'string') {
       // Remove any potentially harmful characters
       return arg.replace(/[<>`"'&;]/g, '');
     }
     return arg;
   });
+}
+
+// Function to validate FFmpeg path
+function validateFFmpegPath(ffmpegPath) {
+  const validPathPattern = /^[a-zA-Z0-9_\-\/\\:.]+$/;
+  return validPathPattern.test(ffmpegPath);
+}
+
+// Function to perform security checks on FFmpeg command and path
+function performSecurityChecks(ffmpegPath, cmdArgs) {
+  if (!validateFFmpegPath(ffmpegPath)) {
+    throw new Error('Invalid FFmpeg path detected.');
+  }
+  const sanitizedArgs = sanitizeFFmpegArgs(cmdArgs);
   return sanitizedArgs;
-  */
 }
 
 // Function to check file path and get metadata
@@ -262,13 +273,13 @@ async function checkFilePath(filePath) {
 // IPC event to run an FFmpeg command
 ipcMain.on('run-ffmpeg-command', async (event, ffmpegArgs) => {
   try {
-    var cmdArgsList = sanitizeFFmpegArgs(ffmpegArgs.cmdArgs);
-    var duration = parseInt(ffmpegArgs.outputDuration, 10);
-    var renderId = ffmpegArgs.renderId;
+    const ffmpegPath = getFfmpegPath();
+    const cmdArgsList = performSecurityChecks(ffmpegPath, ffmpegArgs.cmdArgs);
+    const duration = parseInt(ffmpegArgs.outputDuration, 10);
+    const renderId = ffmpegArgs.renderId;
     console.log('Received FFmpeg command:', cmdArgsList);
     console.log('Duration:', duration);
 
-    const ffmpegPath = getFfmpegPath();
     console.log('Using FFmpeg path:', ffmpegPath);
 
     const process = execa(ffmpegPath, cmdArgsList);
@@ -618,3 +629,11 @@ ipcMain.on('open-url', async (event, url) => {
   }
 });
 
+// Add this handler after other ipcMain handlers
+ipcMain.on('get-file-extensions', (event) => {
+  event.reply('file-extensions-response', {
+    audioExtensions,
+    imageExtensions
+  });
+});
+
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "RenderTune",
-  "version": "2.0.4",
+  "version": "2.0.5",
   "description": "Combine audio and image files to create video files",
   "type": "module",
   "main": "main.js",

diff --git a/preload.js b/preload.js
@@ -28,7 +28,8 @@ contextBridge.exposeInMainWorld('api', {
             'check-filepath',
             'sort-files',
             'open-url',
-            'restart_app'
+            'restart_app',
+            'get-file-extensions'
         ];
         if (validSendChannels.includes(channel)) {
             ipcRenderer.send(channel, data);
@@ -51,7 +52,8 @@ contextBridge.exposeInMainWorld('api', {
             'sort-files-enriched-response',
             'update_available',
             'update_downloaded',
-            'delete-file-response'
+            'delete-file-response',
+            'file-extensions-response'
         ];
         if (validReceiveChannels.includes(channel) || channel.startsWith('color-palette-response-')) {
             ipcRenderer.on(channel, (event, ...args) => func(...args));

diff --git a/src/FileUploader/FileUploader.js b/src/FileUploader/FileUploader.js
@@ -5,6 +5,20 @@ const { webUtils } = window.api;
 
 const FileUploader = ({ onFilesMetadata }) => {
   const [highlight, setHighlight] = useState(false);
+  const [extensions, setExtensions] = useState(null);
+  const [showFormats, setShowFormats] = useState(false);
+
+  useEffect(() => {
+    // Request file extensions when component mounts
+    window.api.send('get-file-extensions');
+    window.api.receive('file-extensions-response', (data) => {
+      setExtensions(data);
+    });
+
+    return () => {
+      window.api.removeAllListeners('file-extensions-response');
+    };
+  }, []);
 
   const handleDragOver = (event) => {
     event.preventDefault();
@@ -87,7 +101,26 @@ const FileUploader = ({ onFilesMetadata }) => {
       onClick={openNativeFileDialog}
     >
       <div className={styles.fileUploaderBox}>
-        Drag and drop or select files to get started
+        <div>Drag and drop or select files to get started</div>
+        <div 
+          className={styles.formatInfo}
+          onMouseEnter={() => setShowFormats(true)}
+          onMouseLeave={() => setShowFormats(false)}
+        >
+          Hover to view accepted input file formats
+          {showFormats && extensions && (
+            <div className={styles.formatsPopup}>
+              <div>
+                <strong>Audio formats:</strong>
+                <div>{extensions.audioExtensions.join(', ')}</div>
+              </div>
+              <div>
+                <strong>Image formats:</strong>
+                <div>{extensions.imageExtensions.join(', ')}</div>
+              </div>
+            </div>
+          )}
+        </div>
       </div>
     </div>
   );

diff --git a/src/FileUploader/FileUploader.module.css b/src/FileUploader/FileUploader.module.css
@@ -23,3 +23,34 @@
 .fileUploaderBox button:hover {
     cursor: pointer;
 }
+
+.formatInfo {
+    margin-top: 10px;
+    font-size: 0.9em;
+    color: #666;
+    cursor: help;
+    position: relative;
+}
+
+.formatsPopup {
+    position: absolute;
+    bottom: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    background: white;
+    border: 1px solid #ccc;
+    padding: 15px;
+    border-radius: 5px;
+    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+    width: max-content;
+    max-width: 300px;
+    z-index: 1000;
+}
+
+.formatsPopup > div {
+    margin-bottom: 10px;
+}
+
+.formatsPopup > div:last-child {
+    margin-bottom: 0;
+}
diff --git a/src/Home/Home.js b/src/Home/Home.js
@@ -89,7 +89,7 @@ function Home() {
     <div className={styles.homeContainer}>
       <h1>Welcome to RenderTune!</h1>
       <h2 className={styles.subtitle}>
-        A free open-source video rendering app created by<a href="#" className={styles.creatorLink} data-tooltip="Visit Martin Barker's website" onClick={(event) => handleLinkClick('https://www.martinbarker.me', event)} onMouseOver={createTooltip}>Martin Barker</a>
+        A free open-source program to create video fiels by combining audio + image files, created by<a href="#" className={styles.creatorLink} data-tooltip="Visit Martin Barker's website" onClick={(event) => handleLinkClick('https://www.martinbarker.me', event)} onMouseOver={createTooltip}>Martin Barker</a>
       </h2>
       <div>
         <p>
@@ -107,22 +107,26 @@ function Home() {
           ))}
         </ul>
       </div>
-      <hr className={styles.sectionDivider} /> 
+      <hr className={styles.sectionDivider} />
       <div className={styles.supportersSection}>
         <h2>Thank You to Our Supporters!</h2>
         <p className={styles.supportersNames}>{shuffledSupporters.join(', ')}</p>
+
+        {/* 
         <p className={styles.donationLinks}>
-          <a href="#" data-tooltip="Open Ko-fi page" onClick={(event) => handleLinkClick('https://ko-fi.com/martinradio', event)} onMouseOver={createTooltip} target="_blank" rel="noopener noreferrer">Ko-fi</a> / 
-          <a href="#" data-tooltip="Open Patreon page" onClick={(event) => handleLinkClick('https://www.patreon.com/c/martinradio', event)} onMouseOver={createTooltip} target="_blank" rel="noopener noreferrer">Patreon</a> / 
+          <a href="#" data-tooltip="Open Ko-fi page" onClick={(event) => handleLinkClick('https://ko-fi.com/martinradio', event)} onMouseOver={createTooltip} target="_blank" rel="noopener noreferrer">Ko-fi</a> /
+          <a href="#" data-tooltip="Open Patreon page" onClick={(event) => handleLinkClick('https://www.patreon.com/c/martinradio', event)} onMouseOver={createTooltip} target="_blank" rel="noopener noreferrer">Patreon</a> /
           <a href="#" data-tooltip="Open GitHub Sponsors page" onClick={(event) => handleLinkClick('https://github.com/sponsors/MartinBarker', event)} onMouseOver={createTooltip} target="_blank" rel="noopener noreferrer">GitHub Sponsors</a>
         </p>
+        */}
+
       </div>
       <div className={styles.feedbackSection}>
         <h2>Feedback</h2>
         <ul>
           {feedbackLinks.map((link, index) => (
             <li key={index}>
-<a href="#" data-tooltip={link.tooltip} onClick={(event) => handleLinkClick(link.url, event)} onMouseOver={createTooltip} target="_blank" rel="noopener noreferrer" className={styles.feedbackLink}>
+              <a href="#" data-tooltip={link.tooltip} onClick={(event) => handleLinkClick(link.url, event)} onMouseOver={createTooltip} target="_blank" rel="noopener noreferrer" className={styles.feedbackLink}>
                 {link.text}
               </a>
             </li>