linux: add support

CHANGELOG.md

@@ -11,6 +11,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
   - Added English
   - Added Spanish (Español)
 - Add safe mode (e926) and enabled by default, you can disable this on **Search** settings
+- Add support to Linux using AppImage
 
 ### Removed
 

README.md

@@ -40,22 +40,27 @@ Wanna bring e621/e926 to your desktop? You got it, e6Hub is an app that allows y
 
 | OS Name    | Status | Type |
 | ---------- | :----: | ---: |
-| Windows 7  |:heavy_exclamation_mark:     | .exe |
+| Windows 7  |✔<sup>1</sup>     | .exe |
 | Windows 8  |✔     | .exe |
 | Windows 10 |✔     | .exe |
-| Debian     |❌     | .deb |
-| Fedora     |❌     | .rpm |
-| Arch       |❌     | .tar |
+| Debian     |✔     | .AppImage |
+| Fedora     |✔     | .AppImage |
+| Arch       |✔     | .AppImage |
 | macOS      |⚠     | .dmg |
 
 * ✔ Supported
 * ❌ Not supported but can compile it
-* ✖ Unstable
 * ⚠ Not tested yet
-* :heavy_exclamation_mark: Unstable since some version of Electron (mostly Electron 6 or 8)
 
+1. A clean installation of Windows 7 (w/o recent updates) have the black screen issue. Learn more about [this Electron issue](https://github.com/electron/electron/issues/19569).
 
-## 💾 Install
+### 🍎 macOS support
+We still looking for macOS testers, if you are a macOS user you can make a development build in your machine and let us know about it. If you want to provide private feedback reach out to the project author at Discord ( `saek#3000` )
+
+## 💾 Development build
+### 🚧 Requirements
+* Node.js ( v12 or above )
+* Git
 ### 💽 Clone
 ```
 git clone https://github.com/e6Hub/app.git

package.json

@@ -8,7 +8,8 @@
     "dev": "vue-cli-service electron:serve",
     "postinstall": "electron-builder install-app-deps",
     "postuninstall": "electron-builder install-app-deps",
-    "pbuild": "vue-cli-service electron:build -p always"
+    "pbuild": "vue-cli-service electron:build -p always",
+    "genicons": "electron-icon-builder --input=./public/icon.png --output=build --flatten"
   },
   "main": "background.js",
   "dependencies": {
@@ -35,6 +36,7 @@
     "@vue/cli-service": "^4.5.9",
     "babel-loader": "^8.2.2",
     "electron": "^8.2.4",
+    "electron-icon-builder": "^2.0.1",
     "vue-cli-plugin-electron-builder": "^2.0.0-rc.5",
     "vue-svg-loader": "^0.16.0",
     "vue-template-compiler": "^2.6.11"

src/App.vue

@@ -1,12 +1,12 @@
 <template>
   <div id="main" class="bg-dark-9 inset-0 absolute">
-    <Titlebar />
+    <Titlebar v-if="$isWindows"/>
     <div
       id="app-container"
       class="absolute flex inset-0 text-white pl-16 duration-200"
       :class="{
-        'mt-6': this.setting('titlebarStyle') === 'small',
-        'mt-8': this.setting('titlebarStyle') === 'win10'
+        'mt-6': $isWindows && this.setting('titlebarStyle') === 'small',
+        'mt-8': $isWindows && this.setting('titlebarStyle') === 'win10'
       }"
     >
       <Sidebar ref="sidebar" />

src/background.js

@@ -1,9 +1,11 @@
-import { app, protocol, BrowserWindow, ipcMain } from 'electron';
+import { app, protocol, BrowserWindow, ipcMain, Menu } from 'electron';
 import { createProtocol } from 'vue-cli-plugin-electron-builder/lib';
 import { autoUpdater as updater } from 'electron-updater';
 import fs from 'fs';
+import path from 'path';
 
 const isDev = process.env.NODE_ENV !== 'production';
+Menu.setApplicationMenu(null);
 
 /**
  * Register a protocol for the app.
@@ -58,21 +60,21 @@ function handleExterns(e, url) {
 app.on('ready', () => {
   win = new BrowserWindow({
     webPreferences: {
-      nodeIntegration: true,
+      nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION,
       plugins: true
     },
     minWidth: 1024,
     minHeight: 600,
     width: 1024,
     height: 600,
-    frame: false,
-    nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION 
+    frame: process.platform === 'win32' ? false : true,
+    icon: path.join(__static, 'icon.png')
   });
 
   if (isDev) {
     win.loadURL(process.env.WEBPACK_DEV_SERVER_URL);
     if (!process.env.IS_TEST) win.webContents.openDevTools();
-    win.setIcon('e6hub.ico');
+    if (process.platform === 'win32') win.setIcon('e6hub.ico');
   } else {
     createProtocol('app');
     win.loadURL('app://./index.html/');
@@ -81,7 +83,8 @@ app.on('ready', () => {
   win.webContents.on('will-navigate', handleExterns);
   win.webContents.on('new-window', handleExterns);
 
-  updater.checkForUpdates();
+  const supportedPlatforms = ['win32', 'linux'];
+  if (supportedPlatforms.indexOf(process.platform) >= 0) updater.checkForUpdates();
 
   /**
    * Set the win variable to null

src/i18n/en.js

@@ -134,7 +134,9 @@ export default {
       checkForUpdate: 'Check for updates',
       checkingForUpdate: 'Checking for updates...',
       devBuild: 'Development build',
+      unsupportedBuild: 'Unsupported build',
       resetSettings: 'Reset settings',
+      versionDetail: 'e6Hub {0}, running on {1} ({2}/{3})'
     }
   },
   // Other

src/i18n/es.js

@@ -134,7 +134,9 @@ export default {
       checkForUpdate: 'Comprobar actualizaciones',
       checkingForUpdate: 'Comprobando actualizaciones...',
       devBuild: 'Compilación de desarrollo',
+      unsupportedBuild: 'Compilación sin soporte',
       resetSettings: 'Restablecer ajustes',
+      versionDetail: 'e6Hub {0}, ejecutando en {1} ({2}/{3})'
     }
   },
   // Other

src/main.js

@@ -8,6 +8,7 @@ import i18n from './i18n';
 import './assets/app.css';
 
 import Updater from './plugins/updater';
+import Platform from './plugins/platform';
 import PluginManager from './pluginman';
 
 Vue.prototype.$events = new Vue();
@@ -17,6 +18,7 @@ Vue.use(VueFeather);
 
 // App plugins
 Vue.use(Updater);
+Vue.use(Platform);
 Vue.use(PluginManager);
 
 Vue.config.productionTip = false;

src/modules/updater.store.js

@@ -17,7 +17,7 @@ function l(s) {
 export default {
   namespaced: true,
   state: {
-    updateStatus: null
+    updateStatus: 'uptodate'
   },
   mutations: {
     _setUpdateStatus(state, v) {

src/plugins/platform.js

@@ -0,0 +1,34 @@
+const platformController = {
+  /**
+   * Returns the platform codename which the app is running on.
+   */
+  getPlatformName() {
+    return process.platform;
+  },
+  /**
+   * Returns true if the app is running on Microsoft Windows
+   */
+  isWindows() {
+    return process.platform === 'win32';
+  },
+  /**
+   * Returns true if the app is running on GNU/Linux
+   */
+  isLinux() {
+    return process.platform === 'linux';
+  }
+}
+
+const platformPlugin = {
+  /**
+   * Get ready the platform plugin for the app
+   * @param {Object} Vue A Vue instance
+   */
+  install(Vue) {
+    Vue.prototype.$platformName = platformController.getPlatformName();
+    Vue.prototype.$isWindows = platformController.isWindows();
+    Vue.prototype.$isLinux = platformController.isLinux();
+  }
+}
+
+export default platformPlugin;

src/plugins/updater.js

@@ -33,24 +33,32 @@ const updaterController = {
    * the events with ipcRenderer.
    */
   init() {
+    const supportedPlatforms = ['win32', 'linux'];
+    this.l(`Initialized on <${process.platform}> platform`);
+
     if (process.env.NODE_ENV !== 'production') {
       this.l('Development build');
       this.setStatus('dev');
     }
 
-    ipcRenderer.on('updateCheck', (e) => {
+    if (supportedPlatforms.indexOf(process.platform) === -1) {
+      this.l(`Unsupported build for platform: ${process.platform}`);
+      this.setStatus('unsupported');
+    }
+
+    ipcRenderer.on('updateCheck', () => {
       this.setStatus('checking');
     });
 
-    ipcRenderer.on('updateAlert', (e) => {
+    ipcRenderer.on('updateAlert', () => {
       this.setStatus('pendingRestart');
     });
 
-    ipcRenderer.on('updateUpToDate', (e) => {
+    ipcRenderer.on('updateUpToDate', () => {
       this.setStatus('uptodate');
     });
 
-    ipcRenderer.on('updateAvailable', (e, ver) => {
+    ipcRenderer.on('updateAvailable', () => {
       this.setStatus('downloading');
     });
   },

src/views/Settings/About.Settings.vue

@@ -8,41 +8,28 @@
         <a href="https://raw.githubusercontent.com/e6Hub/app/master/LICENSE" v-text="$t('settings.about.aboutLicense')"/>
       </i18n>
     </div>
-    <p>{{ require("../../../package.json").version }}</p>
     <div id="e6h__about_actions" class="mt-4">
       <btn
-        v-if="updateStatus == 'pendingRestart'"
-        @click.native="restartForUpdate"
-        role="safe"
-        v-text="$t('settings.about.restartToUpdate')"
-      />
-      <btn
-        v-else-if="updateStatus == 'downloading'"
-        role="busy"
-        v-text="$t('settings.about.downloadingUpdate')"
-      />
-      <btn
-        v-else-if="updateStatus == 'uptodate'"
-        @click.native="checkForUpdate"
-        v-text="$t('settings.about.checkForUpdate')"
-      />
-      <btn
-        v-else-if="updateStatus == 'checking'"
-        role="disabledBusy"
-        v-text="$t('settings.about.checkingForUpdate')"
-      />
-      <btn
-        v-else-if="updateStatus == 'dev'"
-        role="disabled"
-        v-text="$t('settings.about.devBuild')"
+        v-if="currentUpdaterStatus"
+        @click.native="currentUpdaterAction"
+        :role="currentUpdaterRoleButton"
+        v-text="currentUpdaterStatus"
+        class="mr-4"
       />
       <btn
         @click.native="resetSets"
         role="warn"
-        class="ml-4"
         v-text="$t('settings.about.resetSettings')"
       />
     </div>
+    <div id="e6h__about_version" class="mt-8 text-gray-6 text-center select-text">
+      <i18n path="settings.about.versionDetail" tag="p">
+        <span v-text="require('../../../package.json').version"/>
+        <span v-text="platform.type"/>
+        <span v-text="platform.release"/>
+        <span v-text="platform.arch"/>
+      </i18n>
+    </div>
   </SettingView>
 </template>
 
@@ -51,28 +38,78 @@ import SettingView from "@/components/SettingView.vue";
 import Btn from "@/components/Button.vue";
 import { ipcRenderer } from "electron";
 import { mapGetters, mapActions } from "vuex";
+import os from 'os';
 
 export default {
   name: "AboutSettings",
   components: { SettingView, Btn },
-  computed: {
-    ...mapGetters("updater", ["updateStatus"]),
+  data() {
+    return {
+      currentUpdaterAction: null,
+      currentUpdaterStatus: this.updateStatus,
+      currentUpdaterRoleButton: 'disabledBusy',
+      platform: {
+        type: os.type(),
+        arch: os.arch(),
+        release: os.release()
+      },
+
+    }
+  },
+  computed: mapGetters("updater", ["updateStatus"]),
+  watch: {
+    updateStatus() {
+      this.onUpdateStatus();
+    }
   },
   methods: {
     ...mapActions("settings", ["resetSettings"]),
+    onUpdateStatus() {
+      switch (this.updateStatus) {
+        case 'pendingRestart':
+          this.currentUpdaterStatus = this.$t('settings.about.restartToUpdate');
+          this.currentUpdaterAction = this.restartForUpdate;
+          this.currentUpdaterRoleButton = 'safe';
+          break;
+        case 'downloading':
+          this.currentUpdaterStatus = this.$t('settings.about.downloadingUpdate');
+          this.currentUpdaterAction = null;
+          this.currentUpdaterRoleButton = 'busy';
+          break;
+        case 'uptodate':
+          this.currentUpdaterStatus = this.$t('settings.about.checkForUpdate');
+          this.currentUpdaterAction = this.checkForUpdate;
+          this.currentUpdaterRoleButton = 'normal';
+          break;
+        case 'checking':
+          this.currentUpdaterStatus = this.$t('settings.about.checkingForUpdate');
+          this.currentUpdaterAction = null;
+          this.currentUpdaterRoleButton = 'disabledBusy';
+          break;
+        case 'dev':
+          this.currentUpdaterStatus = this.$t('settings.about.devBuild');
+          this.currentUpdaterAction = null;
+          this.currentUpdaterRoleButton = 'disabled';
+          break;
+        default:
+          this.currentUpdaterStatus = this.$t('settings.about.unsupportedBuild');
+          this.currentUpdaterAction = null;
+          this.currentUpdaterRoleButton = 'disabled';
+          break;
+      }
+    },
     restartForUpdate() {
       ipcRenderer.send("restartForUpdate");
     },
     checkForUpdate() {
       ipcRenderer.send("checkForUpdates");
     },
-    openExternal(e) {
-      e.preventDefault();
-      require("electron").shell.openExternal(e.target.getAttribute("href"));
-    },
     resetSets() {
       this.resetSettings();
     },
   },
+  created() {
+    this.onUpdateStatus();
+  }
 };
 </script>

src/views/Settings/Appearance.Settings.vue

@@ -1,7 +1,7 @@
 <template>
   <SettingView id="appearance-settings" :title="$t('settings.appearance.title')">
     <div id="appearance-settings-content">
-      <section>
+      <section v-if="$isWindows">
         <h4 class="text-sm font-bold uppercase text-gray-3 mb-2" v-text="$t('settings.appearance.titlebarStyle')"/>
         <RadioForm
           id="appearance-topbar-style-form"