updated to vue 3, minor fixes

bocchilorenzo · Jul 17, 2022 · 671219e · 671219e
1 parent 0fdf4de
commit 671219e
Show file tree

Hide file tree

Showing 18 changed files with 64 additions and 1,032 deletions.
diff --git a/README.md b/README.md
@@ -2,8 +2,8 @@
 A cross-platform radio desktop app for Windows 10+, Linux and macOS.
 
 ## Requirements
-- NodeJS (any reasonably recent version should do). It's required for the extension to work (the dns lookup required by the radio API)
-- on Linux, appindicator is needed to make Neutralino work correctly
+- 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 (probably not needed, need more testing to verify)
 
 ## To-do
 - add neutralino storage instead of browser localstorage (https://stackoverflow.com/questions/65095952/neutralinojs-storage)

diff --git a/extensions/dnslookup/main.js b/extensions/dnslookup/main.js
@@ -59,9 +59,7 @@ client.onmessage = async function (e) {
         // to send an event here
         switch (message.event) {
             case 'dnsLookup':
-                await get_radiobrowser_base_urls().then(hosts => {
-                    return get_radiobrowser_base_url_random();
-                }).then(random_host => {
+                await get_radiobrowser_base_url_random().then(random_host => {
                     // Use Neutralinojs server's messaging protocol to trigger native API functions
                     // Use app.broadcast method to send an event to all app instances
                     client.send(JSON.stringify({

diff --git a/neutralino.config.json b/neutralino.config.json
@@ -1,6 +1,6 @@
 {
   "applicationId": "js.neutralino.xradio",
-  "version": "0.0.4",
+  "version": "0.1.0",
   "defaultMode": "window",
   "documentRoot": "/xradio-vue/dist/",
   "port": 6498,

diff --git a/xradio-vue/package.json b/xradio-vue/package.json
@@ -1,29 +1,25 @@
 {
   "name": "xradio",
-  "version": "0.0.4",
+  "version": "0.1.0",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build"
   },
   "dependencies": {
-    "@tailwindcss/postcss7-compat": "^2.2.17",
-    "autoprefixer": "^9",
-    "axios": "^0.25.0",
+    "axios": "^0.27.2",
     "howler": "^2.2.3",
-    "icecast-metadata-js": "^0.6.2",
-    "postcss": "^7",
-    "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.17",
-    "vue": "^2.6.11",
-    "vue-marquee-text-component": "^1.2.0",
-    "vue-router": "^3.2.0",
-    "vuex": "^3.4.0"
+    "vue": "^3.2.13",
+    "vue-marquee-text-component": "^2.0.1",
+    "vue-router": "^4.0.3",
+    "vuex": "^4.0.0"
   },
   "devDependencies": {
-    "@vue/cli-plugin-router": "~4.5.0",
-    "@vue/cli-plugin-vuex": "~4.5.0",
-    "@vue/cli-service": "~4.5.0",
-    "vue-cli-plugin-tailwind": "~2.2.18",
-    "vue-template-compiler": "^2.6.11"
+    "@vue/cli-plugin-router": "~5.0.0",
+    "@vue/cli-plugin-vuex": "~5.0.0",
+    "@vue/cli-service": "~5.0.0",
+    "autoprefixer": "^10.4.7",
+    "postcss": "^8.4.14",
+    "tailwindcss": "^3.1.6"
   }
 }
diff --git a/xradio-vue/postcss.config.js b/xradio-vue/postcss.config.js
@@ -1,6 +1,6 @@
 module.exports = {
   plugins: {
     tailwindcss: {},
-    autoprefixer: {}
-  }
+    autoprefixer: {},
+  },
 }
diff --git a/xradio-vue/src/App.vue b/xradio-vue/src/App.vue
@@ -1,6 +1,5 @@
 <template>
-  <div
-    id="app"
+  <main
     class="
       min-h-screen
       bg-white
@@ -12,9 +11,9 @@
       ease-out
       select-none
     "
-    @contextmenu.prevent="&quot;&quot;;"
+    @contextmenu.prevent="null"
   >
-    <navbar-2 @switchTheme="switchTheme" />
+    <navbar-2 />
     <button
       @click="switchTheme"
       class="
@@ -27,6 +26,8 @@
         border-nord-gray1
         mx-2
         mt-2
+        sticky
+        top-2
         float-right
       "
     >
@@ -72,15 +73,15 @@
     </transition>
     <router-view
       v-if="baseUrl != ''"
-      class="w-3/4 lg:w-3/5 px-4 mx-auto min-h-full py-12 pl-14"
+      class="w-3/4 px-4 mx-auto min-h-full py-12 pl-14"
       :baseUrl="baseUrl"
       :favorites="favorites"
       :config="config"
       @play="play"
       @removeFav="manageFavorites"
       @link="link"
     />
-  </div>
+  </main>
 </template>
 
 <script>
@@ -307,7 +308,6 @@ export default {
       let data = {
         getUrls: true,
       };
-
       await Neutralino.extensions.dispatch(extension, event, data);
     },
   },
@@ -384,4 +384,4 @@ h1 {
   opacity: 0.5;
   transform: translateX(-100%);
 }
-</style>
+</style>
diff --git a/xradio-vue/src/assets/logo.png b/xradio-vue/src/assets/logo.png
diff --git a/xradio-vue/src/assets/tailwind.css b/xradio-vue/src/assets/tailwind.css
@@ -1,5 +1,3 @@
 @tailwind base;
-
 @tailwind components;
-
-@tailwind utilities;
+@tailwind utilities;
diff --git a/xradio-vue/src/components/updateBanner.vue b/xradio-vue/src/components/updateBanner.vue
@@ -1,7 +1,8 @@
 <template>
   <div
     class="
-      absolute
+      sticky
+      top-0
       w-max
       pl-14
       p-2
@@ -10,6 +11,7 @@
       content-center
       items-center
       gap-x-2
+      z-10
     "
   >
     <h1 class="text-large cursor-pointer inline" @click="$emit('update')">

diff --git a/xradio-vue/src/main.js b/xradio-vue/src/main.js
@@ -1,15 +1,8 @@
-import Vue from 'vue'
+import { createApp } from 'vue'
 import App from './App.vue'
 import router from './router'
 import store from './store'
 import './assets/tailwind.css'
 
-Vue.config.productionTip = false
-
-new Vue({
-  router,
-  store,
-  render: function (h) { return h(App) }
-}).$mount('#app')
-
-window.Neutralino.init();
+window.Neutralino.init()
+createApp(App).use(store).use(router).mount('#app')
diff --git a/xradio-vue/src/router/index.js b/xradio-vue/src/router/index.js
@@ -1,9 +1,6 @@
-import Vue from 'vue'
-import VueRouter from 'vue-router'
+import { createRouter, createWebHashHistory } from 'vue-router'
 import home from '../views/home.vue'
 
-Vue.use(VueRouter)
-
 const routes = [
   {
     path: '/',
@@ -40,10 +37,11 @@ const routes = [
   }
 ]
 
-const router = new VueRouter({
+const router = createRouter({
+  history: createWebHashHistory(),
   saveScrollPosition: false,
   base: process.env.BASE_URL,
-  routes: routes
+  routes
 })
 
 export default router
diff --git a/xradio-vue/src/store/index.js b/xradio-vue/src/store/index.js
@@ -1,9 +1,6 @@
-import Vue from 'vue'
-import Vuex from 'vuex'
+import { createStore } from 'vuex'
 
-Vue.use(Vuex)
-
-export default new Vuex.Store({
+export default createStore({
   state: {
     baseUrl: "",
     countries: [],
@@ -69,5 +66,5 @@ export default new Vuex.Store({
     volume(store, value) {
       store.volume = value
     }
-  },
+  }
 })
diff --git a/xradio-vue/src/views/about.vue b/xradio-vue/src/views/about.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="mx-auto w-auto">
+  <div>
     <h1 class="text-xl mb-6 dark:text-nord-white3 font-bold">About</h1>
     <img src="https://www.gnu.org/graphics/agplv3-with-text-162x68.png" alt="AGPLv3"/>
     <p>

diff --git a/xradio-vue/src/views/favorites.vue b/xradio-vue/src/views/favorites.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="mx-auto w-auto">
+  <div>
     <div class="mb-10">
       <h1 class="text-xl mb-6 dark:text-nord-white3 font-bold">
         Favorite stations
@@ -10,7 +10,7 @@
           v-for="station in favorites"
           :key="station.stationuuid"
         >
-          <station-list @click.native="play(station)" :station="station" />
+          <station-list @click="play(station)" :station="station" />
           <button
             @click="$emit('removeFav', station.stationuuid)"
             class="

diff --git a/xradio-vue/src/views/home.vue b/xradio-vue/src/views/home.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="mx-auto w-auto">
+  <div>
     <div class="mb-10">
       <h1 class="text-xl mb-6 dark:text-nord-white3 font-bold">
         Most recent stations
@@ -9,7 +9,7 @@
           <station-card
             v-for="station in $store.state.recentStations"
             :key="station.stationuuid"
-            @click.native="play(station)"
+            @click="play(station)"
             :station="station"
           />
         </div>
@@ -22,7 +22,7 @@
       <station-list
         v-for="station in $store.state.mostPopular"
         :key="station.stationuuid"
-        @click.native="play(station)"
+        @click="play(station)"
         :station="station"
       />
     </div>
@@ -33,7 +33,7 @@
       <station-list
         v-for="station in $store.state.mostRated"
         :key="station.stationuuid"
-        @click.native="play(station)"
+        @click="play(station)"
         :station="station"
       />
     </div>

diff --git a/xradio-vue/src/views/search.vue b/xradio-vue/src/views/search.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="mx-auto w-auto">
+  <div>
     <div class="relative w-full group">
       <svg
         class="
@@ -139,7 +139,7 @@
       <station-list
         v-for="station in resultsShow"
         :key="station.stationuuid"
-        @click.native="play(station)"
+        @click="play(station)"
         :station="station"
       />
     </div>
@@ -261,7 +261,7 @@ export default {
       }
     },
   },
-  beforeDestroy() {
+  beforeUnmount() {
     window.removeEventListener("scroll", () => {
       this.bottom = this.bottomVisible();
     });

diff --git a/xradio-vue/src/views/searchHub.vue b/xradio-vue/src/views/searchHub.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="mx-auto w-auto">
+  <div>
     <div class="relative w-full group">
       <svg
         class="
@@ -143,7 +143,7 @@ export default {
           params: {
             mode: mode,
             q: this.searchText
-              .replace(/[^a-z0-9áéíóúñü \.,_-]/gim, "")
+              .replace(/[^a-z0-9áéíóúñü .,_-]/gim, "")
               .trim(),
           },
         });
@@ -152,7 +152,7 @@ export default {
           name: "search",
           params: {
             mode: mode,
-            q: q.replace(/[^a-z0-9áéíóúñü \.,_-]/gim, "").trim(),
+            q: q.replace(/[^a-z0-9áéíóúñü .,_-]/gim, "").trim(),
           },
         });
       }
@@ -181,7 +181,7 @@ export default {
       }
     },
   },
-  beforeDestroy() {
+  beforeUnmount() {
     window.removeEventListener("scroll", () => {
       this.bottom = this.bottomVisible();
     });