Add support for linux Desktop

Author: nathan-fiscaletti

.github/workflows/dev-build.yml

@@ -4,11 +4,12 @@ on:
     push:
       branches:
         - dev
+        - linux-desktop
       paths:
         - 'application/**'
 
 jobs:
-  build-desktop-app:
+  build-windows-app:
     runs-on: windows-latest
     steps:
     - uses: actions/checkout@v2
@@ -110,3 +111,46 @@ jobs:
         path: |
             application/dist/Keyboard-Sounds-Setup-windows-x64.exe
             application/dist/Keyboard-Sounds-Setup-windows-x64.exe.blockmap
+
+  build-linux-app:
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v2
+    - name: Set up Python
+      uses: actions/setup-python@v2
+      with:
+        python-version: '3.12'
+    - name: Install Python dependencies
+      run: |
+        python -m pip install --upgrade pip
+        pip install pyinstaller
+        pip install -r requirements.txt
+    - name: Build Runtime
+      run: ./build-runtime.sh
+    - name: Copy profiles to application
+      run: |
+        Copy-Item -Path ./keyboardsounds/profiles -Destination ./application/.runtime/profiles -Recurse
+      shell: pwsh
+    - name: Install Node.js
+      uses: actions/setup-node@v1
+      with:
+        node-version: '18'
+    - name: Install dependencies
+      run: npm install
+      working-directory: ./application
+    - name: Package Webpack
+      run: npm run package
+      working-directory: ./application
+    - name: Build Installer
+      run: npm run make-installer:linux
+      working-directory: ./application
+      env:
+        GH_TOKEN: ${{secrets.GITHUB_TOKEN}}
+    - name: Rename Installer
+      run: mv "dist/kbs_*.deb" "dist/Keyboard-Sounds-x86_64.deb"
+      working-directory: ./application
+    - name: Upload artifacts
+      uses: actions/upload-artifact@v4
+      with:
+        name: build-artifacts
+        path: application/dist/Keyboard-Sounds-x86_64.deb

.gitignore

@@ -2,4 +2,5 @@ __pycache__
 dist
 keyboardsounds.egg-info
 build
-app-version.txt
+app-version.txt
+version.py

README.md

@@ -32,7 +32,7 @@ Keyboard Sounds is a free application that makes any keyboard sound like a Mecha
 <br><br>
 
 > [!NOTE]\
-> The desktop application is only available for **Windows**. The [command line application](#command-line-macos-linux-or-windows) can be used on any platform that supports Python.
+> The desktop application is only available for **Windows** and **Linux**. The [command line application](#command-line-macos-linux-or-windows) can be used on any platform that supports Python.
 
 ## Features
 
@@ -114,13 +114,15 @@ To enable this window you have several options:
 
 ## Uninstalling
 
-You can uninstall the Keyboard Sounds Desktop Application from the "Apps" section of your system Settings application. 
+### Desktop Application
 
-- Uninstalling the desktop app will **not** remove the Python package from your system, you will need to do this manually if you no longer wish to use the Python package using the following command:
+You can uninstall the Keyboard Sounds Desktop Application from the "Apps" section of your system Settings application.
 
-  ```sh
-  $ pip uninstall keyboardsounds
-  ```
+### Command Line Application
+
+```sh
+$ pip uninstall keyboardsounds
+```
 
 ## Development
 

application/app_icon.icns

@@ -1,5 +1,5 @@
 {
-  "name": "kbs-electron",
+  "name": "kbs",
   "productName": "Keyboard Sounds",
   "version": "2.2.0",
   "description": "https://keyboardsounds.net/",
@@ -33,13 +33,15 @@
     },
     "linux": {
       "target": "deb",
-      "category": "AudioVideo"
+      "category": "AudioVideo",
+      "icon": "./app_icon.icns"
     }
   },
   "scripts": {
     "start": "cross-env NODE_ENV=development electron-forge start",
     "package": "electron-forge package",
     "make-installer:win": "electron-builder -w \"-c.extraMetadata.main=.webpack\\x64\\main\\index.js\"",
+    "make-installer:linux": "electron-builder -l \"-c.extraMetadata.main=.webpack/x64/main/index.js\"",
     "lint": "echo \"No linting configured\""
   },
   "devDependencies": {

application/app_icon.png

@@ -30,7 +30,9 @@ const kbs = {
 			? path.join(process.cwd(), '.runtime')
 			: path.join(process.resourcesPath, '.runtime');
 
-		return Promise.resolve(path.join(runtimePath, 'kbs.exe'));
+		const appName = process.platform === 'win32' ? 'kbs.exe' : 'kbs';
+
+		return Promise.resolve(path.join(runtimePath, appName));
 	},
 
 	kbsCli: function (cmd, print=true) {
@@ -50,6 +52,10 @@ const kbs = {
 		});
 	},
 
+	isLinux: function() {
+		return Promise.resolve(`${process.platform !== 'win32'}`);
+	},
+
 	setSimulateProd: function(val) {
 		this.simulateProd = val;
 	},
@@ -722,12 +728,21 @@ const kbs = {
 				newHeightNum = Number(newHeight);
 			} catch (e) {}
 
-			animateBounds(this.mainWindow, {
-				x: width  - 510,
-				y: height - newHeightNum - 10,
-				width:  500,
-				height: newHeightNum
-			});
+			if (process.platform !== 'win32') { // isLinux
+				animateBounds(this.mainWindow, {
+					x: this.mainWindow.getBounds().x,
+					y: this.mainWindow.getBounds().y,
+					width:  500,
+					height: newHeightNum
+				});
+			} else {
+				animateBounds(this.mainWindow, {
+					x: width  - 510,
+					y: height - newHeightNum - 10,
+					width:  500,
+					height: newHeightNum
+				});
+			}
 
 			this.mainWindow.setResizable(false);
 		}

application/package.json

@@ -1,4 +1,4 @@
-const { app, ipcMain, shell, BrowserWindow, Menu, Tray, screen, dialog } = require('electron');
+const { app, ipcMain, shell, BrowserWindow, Menu, Tray, screen, dialog, Notification } = require('electron');
 
 import path from 'path';
 
@@ -21,7 +21,7 @@ let justShownWindow = false;
 
 // When enabled, even if NODE_ENV=development, the application will still
 // act as if it is running in a production state.
-const simulateProd = false;
+const simulateProd = true;
 
 const toggleWindow = () => {
   console.log('toggleWindow() called');
@@ -57,33 +57,23 @@ const toggleWindow = () => {
   const { width, height } = screen.getPrimaryDisplay().workAreaSize;
   // Calculate the x and y position for the window
   // Position the window on the bottom right of the screen
-  const x = width - appWidth - 10;
-  const y = height - appHeight - 10;
-
-  var extraVars = {};
-  console.log(`(container) process.env.NODE_ENV=${process.env.NODE_ENV}`);
-  if (process.env.NODE_ENV === 'development' && !simulateProd) {
-    extraVars = {
-      frame: true,
-      show: true,
-      resizable: true,
-      minimizable: true,
-      skipTaskbar: false,
-      movable: true,
+  const coords = {};
+
+  if (process.platform === 'win32') {
+    coords = {
+      x: width - appWidth - 10,
+      y: height - appHeight - 10
     };
   }
 
-  // Create the browser window.
-  mainWindow = new BrowserWindow({
-    x: x,
-    y: y,
+  let appVars = {
+    ...coords,
     frame: false,
     resizable: false,
     movable: false,
     minimizable: false,
     maximizable: false,
     closable: false,
-    alwaysOnTop: true,
     fullscreenable: false,
     hiddenInMissionControl: true,
     show: false,
@@ -93,12 +83,49 @@ const toggleWindow = () => {
     webPreferences: {
       preload: MAIN_WINDOW_PRELOAD_WEBPACK_ENTRY,
     },
+  }
 
-    ...extraVars,
-  });
+  switch(process.platform) {
+    case 'win32': {
+      if (process.env.NODE_ENV === 'development' && !simulateProd) {
+        appVars = {
+          ...appVars,
+          frame: true,
+          show: true,
+          resizable: true,
+          minimizable: true,
+          skipTaskbar: false,
+          alwaysOnTop: true,
+          movable: true,
+        }
+      } else {
+        appVars = {
+          ...appVars,
+          alwaysOnTop: true,
+        }
+      }
+    }
+
+    default: {
+      appVars = {
+        ...appVars,
+        frame: true,
+        show: true,
+        minimizable: true,
+        movable: true,
+      }
+    }
+  }
+
+  // Create the browser window.
+  mainWindow = new BrowserWindow(appVars);
 
-  // Close the window when it loses focus.
   if (process.env.NODE_ENV !== 'development' || simulateProd) {
+    mainWindow.setMenuBarVisibility(false);
+  }
+
+  // Close the window when it loses focus.
+  if ((process.env.NODE_ENV !== 'development' || simulateProd) && process.platform === 'win32') {
     mainWindow.on('blur', async () => {
       // Don't hide if we just showed the window (prevents race condition)
       if (justShownWindow) {
@@ -268,21 +295,23 @@ app.whenReady().then(async () => {
   toggleWindow();
 
   // Wait for the main window to be ready before proceeding
-  await new Promise((resolve) => {
-    if (mainWindow && !mainWindow.isDestroyed()) {
-      if (mainWindow.webContents.isLoading()) {
-        mainWindow.webContents.once('did-finish-load', () => {
+  if (process.platform === 'win32') {
+    await new Promise((resolve) => {
+      if (mainWindow && !mainWindow.isDestroyed()) {
+        if (mainWindow.webContents.isLoading()) {
+          mainWindow.webContents.once('did-finish-load', () => {
+            mainWindow.hide();
+            resolve();
+          });
+        } else {
           mainWindow.hide();
           resolve();
-        });
+        }
       } else {
-        mainWindow.hide();
         resolve();
       }
-    } else {
-      resolve();
-    }
-  });
+    });
+  }
 
   // Initialize system tray
   await initializeSystemTrayAndApp();

application/src/api/core.js

@@ -152,6 +152,7 @@ function App() {
   const [runOnStartUp, setRunOnStartup] = useState(true);
   const [enableDaemonWindow, setEnableDaemonWindow] = useState(true);
   const [runSoundDaemonOnStartup, setRunSoundDaemonOnStartup] = useState(true);
+  const [isLinux, setIsLinux] = useState(false);
 
   // Get the version from the backend
   useEffect(() => {
@@ -168,6 +169,13 @@ function App() {
     };
     run();
   }, []);
+  useEffect(() => {
+    const run = async () => {
+      const isLinux = await execute("isLinux");
+      setIsLinux(isLinux === `${true}`);
+    };
+    run();
+  }, []);
 
   // Load the profile, volume, pitch shift and notification preferences from the backend
   useEffect(() => {
@@ -497,9 +505,9 @@ function App() {
   useEffect(() => {
     if (selectedTab === 0) {        // Audio
       execute(`setHeight 790`);
-    } else if (selectedTab === 3) { // Settings
-      execute(`setHeight 932`);
-    } else if (selectedTab === 4) { // Community
+    } else if (selectedTab === (isLinux ? 2 : 3)) { // Settings
+      execute(`setHeight ${isLinux ? 852 : 932}`);
+    } else if (selectedTab === (isLinux ? 3 : 4)) { // Community
       execute(`setHeight 796`);
     } else {                        // All Other Pages
       execute(`setHeight 800`);
@@ -604,7 +612,7 @@ function App() {
           >
             <Tooltip title="Audio" arrow><Tab icon={<GraphicEqIcon />} /></Tooltip>
             <Tooltip title="Profiles" arrow><Tab icon={<LibraryMusicIcon />} /></Tooltip>
-            <Tooltip title="Rules" arrow><Tab icon={<GavelIcon />} /></Tooltip>
+            {!isLinux && (<Tooltip title="Rules" arrow><Tab icon={<GavelIcon />} /></Tooltip>)}
             <Tooltip title="Settings" arrow><Tab icon={<SettingsIcon />} /></Tooltip>
             <Tooltip title="Community" arrow><Tab icon={<ForumIcon />} /></Tooltip>
           </Tabs>
@@ -644,7 +652,7 @@ function App() {
               />
             )}
 
-            {selectedTab === 2 && (
+            {selectedTab === 2 && !isLinux && (
               <AppRules
                 appRules={appRules}
                 appRulesLoaded={appRulesLoaded}
@@ -654,7 +662,7 @@ function App() {
               />
             )}
 
-            {selectedTab === 3 && (
+            {selectedTab === (isLinux ? 2 : 3) && (
               <Settings
                 appVersion={appVersion}
                 backEndVersion={backEndVersion}
@@ -673,7 +681,7 @@ function App() {
               />
             )}
 
-            {selectedTab === 4 && (
+            {selectedTab === (isLinux ? 3 : 4) && (
               <About />
             )}
           </Box>