multiple fixes, added node packaging

bocchilorenzo · Feb 26, 2023 · 956bfcb · 956bfcb
1 parent 77b8371
commit 956bfcb
Show file tree

Hide file tree

Showing 10 changed files with 125 additions and 83 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "git.ignoreLimitWarning": true
+}
diff --git a/README.md b/README.md
@@ -2,16 +2,16 @@
 A cross-platform radio desktop app for Windows 10+, Linux and macOS.
 
 ## Requirements
-- NodeJS v14+. It's required for the extension to work (the dns lookup required by the radio API)
 - on Linux, either libayatana-appindicator or libappindicator3-1 might be needed to make Neutralino work correctly
 
-Tested and working on Windows 10 with NodeJS v16 and Ubuntu 22.10 with NodeJS v18.
+Tested and working on Windows 10 and Ubuntu 22.10.
 
 ## To-do
 - add neutralino storage instead of browser localstorage (https://stackoverflow.com/questions/65095952/neutralinojs-storage)
 
 - use the state instead of the localstorage for the favorites, and save them to localstorage only when the tab is closed (to have less computations and better performance with a long favorites list), like following:
-```
+
+```js
 await Neutralino.events.on(`windowClose`, () => {
   // Save the favorites list to the storage
   // Call Neutralino.app.exit() to exit
@@ -23,19 +23,57 @@ await Neutralino.events.on(`windowClose`, () => {
 ## Building
 
 ### Requirements
-- NodeJS
+- NodeJS v14+. It's required for the extension to work (the dns lookup required by the radio API)
 - Neutralino CLI
 
 ### Steps
 - clone this repository
-- run the command "neu update" in the root folder to download neutralino's binaries
-- move in the "xradio-vue" folder and install dependencies with "npm i"
-- build the frontend with "npm run build"
+- run the command `neu update` in the root folder to download neutralino's binaries
+- move in the `xradio-vue` folder and install dependencies with `npm i`
+- build the frontend with `npm run build`
 - move back to the root folder and then to the extensions -> dnslookup folder
-- install dependencies with "npm i" and then move back to the root
-- build the app with "neu build" (or "neu build --release" if you also want to generate the zip file)
+- if you don't have pkg installed, install it with `npm i -g pkg`
+- install dependencies with `npm i`
+- build the extension with `pkg .`
+- go back to the root folder and build the app with `neu build` (or `neu build --release` if you also want to generate the zip file)
+
+If you don't want to build the extension because you want to use the app on a computer with node installed and prefer to keep the overall size of the app lower, you have to go in the `neutralino.config.json` and change:
+
+```json
+"extensions": [
+  {
+    "id": "js.neutralino.dnslookup",
+    "commandLinux": "${NL_PATH}/extensions/dnslookup/dnslookup-linux",
+    "commandDarwin": "${NL_PATH}/extensions/dnslookup/dnslookup-macos",
+    "commandWindows": "${NL_PATH}/extensions/dnslookup/dnslookup-win.exe"
+  }
+],
+```
+
+into
+
+```json
+"extensions": [
+  {
+    "id": "js.neutralino.dnslookup",
+    "commandLinux": "node ${NL_PATH}/extensions/dnslookup/main.js --linux",
+    "commandDarwin": "node ${NL_PATH}/extensions/dnslookup/main.js --darwin",
+    "commandWindows": "node ${NL_PATH}/extensions/dnslookup/main.js --windows"
+  }
+],
+```
+
+Then you can skip the pkg part in the building steps.
 
 ## Notes
 - It can also work on Windows 7, 8 and 8.1 if you install WebView2 from https://developer.microsoft.com/it-it/microsoft-edge/webview2/ and download the Evergreen Standalone Installer
 - If the rendering seems broken on Windows 10+, you probably don't have WebView2 installed and it's using IE11. In that case, follow the link above
-- If you want to build it to use your favorite browser instead of being in a standalone window, simply change "defaultMode": "window" to "defaultMode": "browser" in neutralino.config.json and rebuild the project
+- If you want to build it to use your favorite browser instead of being in a standalone window, simply change
+```json
+"defaultMode": "window"
+```
+to
+```json
+"defaultMode": "browser"
+```
+in `neutralino.config.json` and rebuild the project
diff --git a/extensions/dnslookup/package.json b/extensions/dnslookup/package.json
@@ -3,6 +3,7 @@
   "version": "1.0.0",
   "description": "",
   "main": "main.js",
+  "bin": "main.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },

diff --git a/neutralino.config.json b/neutralino.config.json
@@ -1,6 +1,6 @@
 {
   "applicationId": "js.neutralino.xradio",
-  "version": "0.2.1",
+  "version": "1.0.0",
   "defaultMode": "window",
   "documentRoot": "/xradio-vue/dist/",
   "port": 6498,
@@ -10,9 +10,9 @@
   "extensions": [
     {
       "id": "js.neutralino.dnslookup",
-      "commandLinux": "node ${NL_PATH}/extensions/dnslookup/main.js --linux",
-      "commandDarwin": "node ${NL_PATH}/extensions/dnslookup/main.js --darwin",
-      "commandWindows": "node ${NL_PATH}/extensions/dnslookup/main.js --windows"
+      "commandLinux": "${NL_PATH}/extensions/dnslookup/dnslookup-linux",
+      "commandDarwin": "${NL_PATH}/extensions/dnslookup/dnslookup-macos",
+      "commandWindows": "${NL_PATH}/extensions/dnslookup/dnslookup-win.exe"
     }
   ],
   "enableExtensions": true,
@@ -21,9 +21,11 @@
       "title": "XRadio",
       "width": 900,
       "height": 640,
-      "minWidth": 400,
-      "minHeight": 200,
-      "resizable": false,
+      "minWidth": 640,
+      "minHeight": 640,
+      "maxHeight": 800,
+      "maxWidth": 1200,
+      "resizable": true,
       "icon": "/resources/icons/icon.png",
       "borderless": false,
       "maximize": false,

diff --git a/xradio-vue/package.json b/xradio-vue/package.json
@@ -1,6 +1,6 @@
 {
   "name": "xradio",
-  "version": "0.2.1",
+  "version": "1.0.0",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",

diff --git a/xradio-vue/src/App.vue b/xradio-vue/src/App.vue
@@ -1,36 +1,12 @@
 <template>
   <main
-    class="
-      min-h-screen
-      relative
-      text-nord-gray1
-      dark:text-nord-white3
-      dark:bg-nord-gray1
-      bg-white
-      transition-colors
-      duration-100
-      ease-out
-      select-none
-    "
+    class="min-h-screen relative text-nord-gray1 dark:text-nord-white3 dark:bg-nord-gray1 bg-white transition-colors duration-100 ease-out select-none"
     @contextmenu.prevent="null"
   >
     <nav-bar-2 />
     <button
       @click="switchTheme"
-      class="
-        w-8
-        h-8
-        p-1
-        rounded-full
-        border-2
-        dark:border-nord-white3
-        border-nord-gray1
-        mx-2
-        mt-2
-        sticky
-        top-2
-        float-right
-      "
+      class="w-8 h-8 p-1 rounded-full border-2 dark:border-nord-white3 border-nord-gray1 mx-2 mt-2 sticky top-2 float-right"
     >
       <span class="sr-only">Switch theme</span>
       <svg class="fill-current" viewBox="0 0 24 24">
@@ -44,7 +20,7 @@
         />
       </svg>
     </button>
-    <transition name="slideLeft">
+    <transition name="slideRight">
       <snack-bar v-if="showSnack" :msg="snackMsg" />
     </transition>
     <transition name="slideLeft">
@@ -142,6 +118,7 @@ export default {
     };
     window.addEventListener("wheel", handleWheel, { passive: false });
 
+    //this.checkNode();
     let theme = localStorage.getItem("theme");
     if ((theme && theme == "dark") || !theme) {
       document.querySelector("html").classList.add("dark");
@@ -158,8 +135,11 @@ export default {
       this.$store.dispatch("volume", parseInt(localStorage.getItem("volume")));
     }
     if (localStorage.getItem("selectedCountries")) {
-      this.$store.dispatch("setSelectedCountries", JSON.parse(localStorage.getItem("selectedCountries")));
-		}
+      this.$store.dispatch(
+        "setSelectedCountries",
+        JSON.parse(localStorage.getItem("selectedCountries"))
+      );
+    }
     this.dns();
     Neutralino.events.on("baseHost", (event) => {
       this.baseUrl = event.detail;
@@ -169,6 +149,10 @@ export default {
     });
   },
   methods: {
+    async checkNode() {
+      let info = await Neutralino.os.execCommand("node -v");
+      console.log(`Node version: ${info.stdOut}`);
+    },
     async link(url) {
       await Neutralino.os.open(url);
     },
@@ -339,28 +323,32 @@ export default {
 *::-webkit-scrollbar-track {
   background: var(--scrollbarBGLight);
   border-radius: 10px;
-  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
+  transition-property: color, background-color, border-color,
+    text-decoration-color, fill, stroke;
   transition-timing-function: ease-out;
   transition-duration: 100ms;
 }
 .dark *::-webkit-scrollbar-track {
   background: var(--scrollbarBGDark);
-  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
+  transition-property: color, background-color, border-color,
+    text-decoration-color, fill, stroke;
   transition-timing-function: ease-out;
   transition-duration: 100ms;
 }
 *::-webkit-scrollbar-thumb {
   background-color: var(--thumbBGLight);
   /* border: 1px solid var(--scrollbarBGLight); */
   border-radius: 10px;
-  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
+  transition-property: color, background-color, border-color,
+    text-decoration-color, fill, stroke;
   transition-timing-function: ease-out;
   transition-duration: 100ms;
 }
 .dark *::-webkit-scrollbar-thumb {
   background-color: var(--thumbBGDark);
   /* border: 1px solid var(--scrollbarBGDark); */
-  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
+  transition-property: color, background-color, border-color,
+    text-decoration-color, fill, stroke;
   transition-timing-function: ease-out;
   transition-duration: 100ms;
 }
@@ -369,7 +357,7 @@ export default {
   scrollbar-width: thin !important;
   scrollbar-color: var(--thumbBGLight) var(--scrollbarBGLight);
 }
-.dark *{
+.dark * {
   scrollbar-color: var(--thumbBGDark) var(--scrollbarBGDark);
 }
 h1 {
@@ -399,7 +387,6 @@ h1 {
   opacity: 0.5;
   transform: translateY(-100%);
 }
-
 .slideLeft-enter {
   opacity: 0.5;
   transform: translateX(-100%);
@@ -412,4 +399,16 @@ h1 {
   opacity: 0.5;
   transform: translateX(-100%);
 }
-</style>
+.slideRight-enter {
+  opacity: 0.5;
+  transform: translateX(-100%);
+}
+.slideRight-enter-active,
+.slideRight-leave-active {
+  transition: 0.2s ease-out;
+}
+.slideRight-leave-to {
+  opacity: 0.5;
+  transform: translateX(100%);
+}
+</style>
diff --git a/xradio-vue/src/components/player.vue b/xradio-vue/src/components/player.vue
@@ -203,7 +203,7 @@
         </button>
         <transition name="fade">
           <div
-            class="absolute mt-16 pt-1 mb-48 pl-10 -rotate-90 transform-gpu"
+            class="absolute mt-16 py-2 pr-6 mb-48 pl-14 -rotate-90"
             v-if="showVol"
           >
             <input

diff --git a/xradio-vue/src/components/snackbar.vue b/xradio-vue/src/components/snackbar.vue
@@ -7,25 +7,18 @@
       items-center
       shadow-md
       w-fit
-      absolute
-      right-0
+      sticky
+      top-2
+      float-right
       mt-2
-      mr-2
       p-2
       gap-x-2
       text-black
       bg-nord-aurora1
+      z-10
+      text-large
     "
   >
-    <svg
-      class="fill-current"
-      style="width: 24px; height: 24px"
-      viewBox="0 0 24 24"
-    >
-      <path
-        d="M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2C6.47,2 2,6.47 2,12C2,17.53 6.47,22 12,22C17.53,22 22,17.53 22,12C22,6.47 17.53,2 12,2M14.59,8L12,10.59L9.41,8L8,9.41L10.59,12L8,14.59L9.41,16L12,13.41L14.59,16L16,14.59L13.41,12L16,9.41L14.59,8Z"
-      />
-    </svg>
     <span>{{ msg }}</span>
   </div>
 </template>

diff --git a/xradio-vue/src/components/updateBanner.vue b/xradio-vue/src/components/updateBanner.vue
@@ -2,7 +2,7 @@
   <div
     class="
       sticky
-      top-0
+      top-2
       w-max
       text-black
       pl-14

diff --git a/xradio-vue/src/views/favorites.vue b/xradio-vue/src/views/favorites.vue
@@ -1,9 +1,25 @@
 <template>
   <div>
     <div class="mb-10">
-      <h1 class="text-xl mb-6 dark:text-nord-white3 font-bold">
-        Favorites
-      </h1>
+      <header class="flex justify-between content-center items-center">
+        <h1 class="text-xl mb-6 dark:text-nord-white3 font-bold">Favorites</h1>
+        <!-- <button
+          @click="$emit('emptyFav')"
+          class="h-full p-2 mb-4 rounded hover:bg-nord-white2 dark:hover:bg-nord-gray3 transition-colors duration-100 ease-out"
+          title="Empty favorites"
+        >
+          <svg
+            class="h-6"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+          >
+            <path
+              fill="currentColor"
+              d="M9,3V4H4V6H5V19A2,2 0 0,0 7,21H17A2,2 0 0,0 19,19V6H20V4H15V3H9M7,6H17V19H7V6M9,8V17H11V8H9M13,8V17H15V8H13Z"
+            />
+          </svg>
+        </button> -->
+      </header>
       <div v-if="Object.keys(favorites).length != 0">
         <div
           class="flex content-center items-center gap-x-2"
@@ -13,17 +29,7 @@
           <station-list @click="play(station)" :station="station" />
           <button
             @click="$emit('removeFav', station.stationuuid)"
-            class="
-              h-full
-              p-2
-              mb-4
-              rounded
-              hover:bg-nord-white2
-              dark:hover:bg-nord-gray3
-              transition-colors
-              duration-100
-              ease-out
-            "
+            class="h-full p-2 mb-4 rounded hover:bg-nord-white2 dark:hover:bg-nord-gray3 transition-colors duration-100 ease-out"
           >
             <svg class="h-6" viewBox="0 0 24 24">
               <path
@@ -61,4 +67,4 @@ export default {
     },
   },
 };
-</script>
+</script>