prettier

README.md

@@ -7,19 +7,21 @@
 ## Install Dependencies
 
 First of all we need to install dependencies, run in terminal
+
 ```
 npm install
 ```
 
 ## NPM Scripts
 
-* 🔥 `start` - run development server
-* 🔧 `dev` - run development server
-* 🔧 `build` - build web app for production
+- 🔥 `start` - run development server
+- 🔧 `dev` - run development server
+- 🔧 `build` - build web app for production
 
 ## Vite
 
 There is a [Vite](https://vitejs.dev) bundler setup. It compiles and bundles all "front-end" resources. You should work only with files located in `/src` folder. Vite config located in `vite.config.js`.
+
 ## Assets
 
 Assets (icons, splash screens) source images located in `assets-src` folder. To generate your own icons and splash screen images, you will need to replace all assets in this directory with your own images (pay attention to image size and format), and run the following command in the project directory:
@@ -34,19 +36,17 @@ Or launch UI where you will be able to change icons and splash screens:
 framework7 assets --ui
 ```
 
-
-
 ## Documentation & Resources
 
-* [Framework7 Core Documentation](https://framework7.io/docs/)
-* [Framework7 Vue Documentation](https://framework7.io/vue/)
-
+- [Framework7 Core Documentation](https://framework7.io/docs/)
+- [Framework7 Vue Documentation](https://framework7.io/vue/)
 
-* [Framework7 Icons Reference](https://framework7.io/icons/)
-* [Community Forum](https://forum.framework7.io)
+- [Framework7 Icons Reference](https://framework7.io/icons/)
+- [Community Forum](https://forum.framework7.io)
 
 ## Support Framework7
 
 Love Framework7? Support project by donating or pledging on:
+
 - Patreon: https://patreon.com/framework7
-- OpenCollective: https://opencollective.com/framework7
+- OpenCollective: https://opencollective.com/framework7

framework7.json

@@ -1,8 +1,6 @@
 {
   "cwd": "/home/les/dev/plaid2",
-  "type": [
-    "web"
-  ],
+  "type": ["web"],
   "name": "plaid",
   "framework": "vue",
   "template": "single-view",
@@ -16,4 +14,4 @@
     "fillBars": true
   },
   "customBuild": false
-}
+}

package.json

@@ -39,7 +39,9 @@
     "@vue/compiler-sfc": "^3.2.45",
     "cpy-cli": "^4.2.0",
     "cross-env": "^7.0.3",
+    "eslint-config-prettier": "^9.0.0",
     "postcss-preset-env": "^7.8.3",
+    "prettier": "3.0.3",
     "vite": "^4.0.4"
   }
 }

public/manifest.json

@@ -1,9 +1,9 @@
 {
-	"short_name": "plaid",
-	"name": "Plaid: ascolta le radio",
-	"icons": [],
-	"id": "/?source=pwa",
-	"start_url": "/?source=pwa",
-	"display": "standalone",
-	"prefer_related_applications": false
+  "short_name": "plaid",
+  "name": "Plaid: ascolta le radio",
+  "icons": [],
+  "id": "/?source=pwa",
+  "start_url": "/?source=pwa",
+  "display": "standalone",
+  "prefer_related_applications": false
 }

src/components/Player.vue

@@ -1,102 +1,116 @@
 <template>
-<f7-toolbar style='position: fixed; height: 80px;' bottom v-if="status != 'empty'">
-  <!--
+  <f7-toolbar
+    style="position: fixed; height: 80px"
+    bottom
+    v-if="status != 'empty'"
+  >
+    <!--
     il player avra' due stati aperto e chiuso? non so quanto mi piace, mi sembra che 
     le informazioni utili possano stare benissimo in questa toolbar.
     nel caso cmq bisogna fare una classe css per questi stati con l'altezza che varia.
   -->
-  <f7-block>
-    <f7-icon class='cursor-pointer' to='#' size='52px' f7='play_circle' @click="onPlay" v-if="!loading && status == 'pause'" />
-    <f7-icon class='cursor-pointer' size='52px' f7='pause_circle' @click="onPause" v-if="!loading && status == 'playing'" />
-    <f7-preloader size='42px' color='white' v-if='loading'/>
-  </f7-block>
-  <f7-block>
-    <f7-link v-if='!loading'>{{title}}</f7-link>
-  </f7-block>
-
-</f7-toolbar>
+    <f7-block>
+      <f7-icon
+        class="cursor-pointer"
+        to="#"
+        size="52px"
+        f7="play_circle"
+        @click="onPlay"
+        v-if="!loading && status == 'pause'"
+      />
+      <f7-icon
+        class="cursor-pointer"
+        size="52px"
+        f7="pause_circle"
+        @click="onPause"
+        v-if="!loading && status == 'playing'"
+      />
+      <f7-preloader size="42px" color="white" v-if="loading" />
+    </f7-block>
+    <f7-block>
+      <f7-link v-if="!loading">{{ title }}</f7-link>
+    </f7-block>
+  </f7-toolbar>
 </template>
 
 <script>
-import eventBus from '../js/eventBus'
+import eventBus from "../js/eventBus";
 
-import { Howl } from 'howler'
+import { Howl } from "howler";
 
 export default {
-  components: { },
-  data () {
+  components: {},
+  data() {
     return {
       loading: true,
-      status: 'empty',
+      status: "empty",
       volume: 100,
-      title: 'RadioBlackout > DIRETTA',
-      subtitle: '',
+      title: "RadioBlackout > DIRETTA",
+      subtitle: "",
       live: true,
-      player: null
-    }
+      player: null,
+    };
   },
-  destroyed () {
-    eventBus.$off('play:now')
+  destroyed() {
+    eventBus.$off("play:now");
   },
-  mounted () {
-    eventBus.$on('play:now', (url, metadata) => {
-        this.play(url, metadata)
-        })
-    eventBus.$on('play:pause', () => {
-        if(this.player) {
-          this.player.pause()
-        }
-	})
-    eventBus.$on('play:resume', () => {
-        if(this.player) {
-          this.player.play()
-        }
-        })
+  mounted() {
+    eventBus.$on("play:now", (url, metadata) => {
+      this.play(url, metadata);
+    });
+    eventBus.$on("play:pause", () => {
+      if (this.player) {
+        this.player.pause();
+      }
+    });
+    eventBus.$on("play:resume", () => {
+      if (this.player) {
+        this.player.play();
+      }
+    });
   },
   methods: {
-     onPlay() {
-       eventBus.$emit('play:resume')
-     },
-     onPause() {
-       eventBus.$emit('play:pause')
-     },
-   updateStatusFromPlayer () {
-     this.status = this.player.playing() ? 'playing' : 'pause'
-   },
-    play (url, metadata) {
-      this.loading = true
+    onPlay() {
+      eventBus.$emit("play:resume");
+    },
+    onPause() {
+      eventBus.$emit("play:pause");
+    },
+    updateStatusFromPlayer() {
+      this.status = this.player.playing() ? "playing" : "pause";
+    },
+    play(url, metadata) {
+      this.loading = true;
       let newPlayer = new Howl({
         autoSuspend: false,
         html5: true,
         preload: true,
         src: Array.isArray(url) ? url : [url],
-      })
-      for(const eventName of ['pause', 'play', 'end']) {
-        newPlayer.on(eventName, this.updateStatusFromPlayer)
+      });
+      for (const eventName of ["pause", "play", "end"]) {
+        newPlayer.on(eventName, this.updateStatusFromPlayer);
       }
-      newPlayer.once('play', () => {
-        if(this.player) {
-          this.player.stop()
-          this.player.unload()
+      newPlayer.once("play", () => {
+        if (this.player) {
+          this.player.stop();
+          this.player.unload();
         }
-        this.player = newPlayer
-        if(metadata !== undefined) {
-          this.title = metadata.title
-          this.live = metadata.live
+        this.player = newPlayer;
+        if (metadata !== undefined) {
+          this.title = metadata.title;
+          this.live = metadata.live;
         }
-        this.loading = false
-        this.updateStatusFromPlayer()
-      })
-      newPlayer.play()
-
+        this.loading = false;
+        this.updateStatusFromPlayer();
+      });
+      newPlayer.play();
     },
-    stop () {
+    stop() {
       if (this.player) {
-        this.player.stop()
+        this.player.stop();
       }
-      this.$refs.button.stop()
+      this.$refs.button.stop();
     },
-  }
-}
+  },
+};
 </script>
-

src/components/app.vue

@@ -1,38 +1,36 @@
 <script setup>
-  import Player from '../components/Player.vue'  
-  import routes from '../js/routes.js';
-  import store from '../js/store';
+import Player from "../components/Player.vue";
+import routes from "../js/routes.js";
+import store from "../js/store";
 
-  // Framework7 Parameters
-  const f7params = {
-    name: 'plaid', // App name
-    theme: 'md', // Automatic theme detection
-    view: {
-      browserHistory: true,
-      iosDynamicNavbar: true,
-      xhrCache: false,
-      masterDetailBreakpoint: 800,
-      main: true,
-    },
+// Framework7 Parameters
+const f7params = {
+  name: "plaid", // App name
+  theme: "md", // Automatic theme detection
+  view: {
+    browserHistory: true,
+    iosDynamicNavbar: true,
+    xhrCache: false,
+    masterDetailBreakpoint: 800,
+    main: true,
+  },
 
-    // passRouteParamsToRequest: true,
-    // App store
-    store,
-
-    // App routes
-    routes,
-  };
+  // passRouteParamsToRequest: true,
+  // App store
+  store,
 
+  // App routes
+  routes,
+};
 </script>
 <template>
-  <f7-app v-bind="f7params" >
+  <f7-app v-bind="f7params">
     <!-- Top Navbar -->
-    <f7-navbar back-link="Back" title='plaid' />
+    <f7-navbar back-link="Back" title="plaid" />
 
     <!-- Your main view, should have "view-main" class -->
-    <f7-view main url="/" class='view-main main-view'>
+    <f7-view main url="/" class="view-main main-view">
       <Player />
     </f7-view>
-
   </f7-app>
 </template>

src/css/app.css

@@ -12,10 +12,10 @@
   --f7-bars-translucent-opacity: 0.9;
   --f7-bars-text-color: #fff;
   --f7-bars-link-color: #fff;
-  --f7-navbar-subtitle-text-color: rgba(255,255,255,0.85);
+  --f7-navbar-subtitle-text-color: rgba(255, 255, 255, 0.85);
   --f7-bars-border-color: transparent;
   --f7-tabbar-link-active-color: #fff;
-  --f7-tabbar-link-inactive-color: rgba(255,255,255,0.54);
+  --f7-tabbar-link-inactive-color: rgba(255, 255, 255, 0.54);
   --f7-sheet-border-color: transparent;
   --f7-tabbar-link-active-border-color: #fff;
 }
@@ -29,7 +29,7 @@
   --f7-link-highlight-color: var(--f7-link-highlight-white);
   --f7-link-touch-ripple-color: var(--f7-touch-ripple-white);
   --f7-button-text-color: #fff;
-  --f7-button-pressed-bg-color: rgba(255,255,255,0.1);
+  --f7-button-pressed-bg-color: rgba(255, 255, 255, 0.1);
 }
 .navbar-large-transparent,
 .navbar-large.navbar-transparent {
@@ -50,4 +50,4 @@
   --f7-navbar-large-title-text-color: #fff;
 }
 
-/* Your app custom styles here */
+/* Your app custom styles here */

src/css/app.less

@@ -1,4 +1,4 @@
 /* Your app custom styles here */
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
+@tailwind utilities;

src/css/icons.css

@@ -1,14 +1,16 @@
 /* Material Icons Font (for MD theme) */
 @font-face {
-  font-family: 'Material Icons';
+  font-family: "Material Icons";
   font-style: normal;
   font-weight: 400;
-  src: local('Material Icons'), local('MaterialIcons-Regular'),
-    url(../fonts/material-icons.woff2) format('woff2'),
-    url(../fonts/material-icons.woff) format('woff');
+  src:
+    local("Material Icons"),
+    local("MaterialIcons-Regular"),
+    url(../fonts/material-icons.woff2) format("woff2"),
+    url(../fonts/material-icons.woff) format("woff");
 }
 .material-icons {
-  font-family: 'Material Icons';
+  font-family: "Material Icons";
   font-weight: normal;
   font-style: normal;
   font-size: 24px;
@@ -22,19 +24,20 @@
   -webkit-font-smoothing: antialiased;
   text-rendering: optimizeLegibility;
   -moz-osx-font-smoothing: grayscale;
-  font-feature-settings: 'liga';
+  font-feature-settings: "liga";
 }
 
 /* Framework7 Icons Font (for iOS theme) */
 @font-face {
-  font-family: 'Framework7 Icons';
+  font-family: "Framework7 Icons";
   font-style: normal;
   font-weight: 400;
-  src: url('../fonts/Framework7Icons-Regular.woff2') format('woff2'),
-    url('../fonts/Framework7Icons-Regular.woff') format('woff');
+  src:
+    url("../fonts/Framework7Icons-Regular.woff2") format("woff2"),
+    url("../fonts/Framework7Icons-Regular.woff") format("woff");
 }
 .f7-icons {
-  font-family: 'Framework7 Icons';
+  font-family: "Framework7 Icons";
   font-weight: normal;
   font-style: normal;
   font-size: 28px;
@@ -48,9 +51,9 @@
   -webkit-font-smoothing: antialiased;
   text-rendering: optimizeLegibility;
   -moz-osx-font-smoothing: grayscale;
-  -webkit-font-feature-settings: 'liga';
-  -moz-font-feature-settings: 'liga=1';
-  -moz-font-feature-settings: 'liga';
-  font-feature-settings: 'liga';
+  -webkit-font-feature-settings: "liga";
+  -moz-font-feature-settings: "liga=1";
+  -moz-font-feature-settings: "liga";
+  font-feature-settings: "liga";
   text-align: center;
 }

src/fonts/_mixins.scss

@@ -1,5 +1,5 @@
 // @see https://github.com/twbs/bootstrap/blob/main/scss/_functions.scss
-@function material-icons-str-replace($string, $search, $replace: '') {
+@function material-icons-str-replace($string, $search, $replace: "") {
   $index: str-index($string, $search);
   @if $index {
     @return str-slice($string, 1, $index - 1) + $replace +
@@ -27,12 +27,12 @@
   -webkit-font-smoothing: antialiased; // Support for all WebKit browsers
   -moz-osx-font-smoothing: grayscale; // Support for Firefox
   text-rendering: optimizeLegibility; // Support for Safari and Chrome
-  font-feature-settings: 'liga'; // Support for IE
+  font-feature-settings: "liga"; // Support for IE
 }
 
 @mixin material-icons-font($font-family) {
   $class-name: to-lower-case($font-family);
-  $class-name: material-icons-str-replace($class-name, ' ', '-');
+  $class-name: material-icons-str-replace($class-name, " ", "-");
   $font-file: $material-icons-font-path + $class-name;
 
   @font-face {
@@ -40,8 +40,9 @@
     font-style: normal;
     font-weight: 400;
     font-display: $material-icons-font-display;
-    src: url('#{$font-file}.woff2') format('woff2'),
-      url('#{$font-file}.woff') format('woff');
+    src:
+      url("#{$font-file}.woff2") format("woff2"),
+      url("#{$font-file}.woff") format("woff");
   }
 
   .#{$class-name} {
@@ -51,5 +52,5 @@
 
 @mixin material-icons() {
   @warn "material-icons() Sass mixin has been deprecated as of 1.0. Use '@extend .material-icons;' instead of '@include material-icons();'.";
-  @include material-icons-font-class('Material Icons');
+  @include material-icons-font-class("Material Icons");
 }

src/fonts/_variables.scss

@@ -1,3 +1,3 @@
-$material-icons-font-path: './' !default;
+$material-icons-font-path: "./" !default;
 $material-icons-font-size: 24px !default;
 $material-icons-font-display: block !default;

src/fonts/filled.css

@@ -3,7 +3,9 @@
   font-style: normal;
   font-weight: 400;
   font-display: block;
-  src: url("./material-icons.woff2") format("woff2"), url("./material-icons.woff") format("woff");
+  src:
+    url("./material-icons.woff2") format("woff2"),
+    url("./material-icons.woff") format("woff");
 }
 .material-icons {
   font-family: "Material Icons";

src/fonts/filled.scss

@@ -1,4 +1,4 @@
-@import 'variables';
-@import 'mixins';
+@import "variables";
+@import "mixins";
 
-@include material-icons-font('Material Icons');
+@include material-icons-font("Material Icons");

src/fonts/material-icons.css

@@ -3,7 +3,9 @@
   font-style: normal;
   font-weight: 400;
   font-display: block;
-  src: url("./material-icons.woff2") format("woff2"), url("./material-icons.woff") format("woff");
+  src:
+    url("./material-icons.woff2") format("woff2"),
+    url("./material-icons.woff") format("woff");
 }
 .material-icons {
   font-family: "Material Icons";
@@ -28,7 +30,9 @@
   font-style: normal;
   font-weight: 400;
   font-display: block;
-  src: url("./material-icons-outlined.woff2") format("woff2"), url("./material-icons-outlined.woff") format("woff");
+  src:
+    url("./material-icons-outlined.woff2") format("woff2"),
+    url("./material-icons-outlined.woff") format("woff");
 }
 .material-icons-outlined {
   font-family: "Material Icons Outlined";
@@ -53,7 +57,9 @@
   font-style: normal;
   font-weight: 400;
   font-display: block;
-  src: url("./material-icons-round.woff2") format("woff2"), url("./material-icons-round.woff") format("woff");
+  src:
+    url("./material-icons-round.woff2") format("woff2"),
+    url("./material-icons-round.woff") format("woff");
 }
 .material-icons-round {
   font-family: "Material Icons Round";
@@ -78,7 +84,9 @@
   font-style: normal;
   font-weight: 400;
   font-display: block;
-  src: url("./material-icons-sharp.woff2") format("woff2"), url("./material-icons-sharp.woff") format("woff");
+  src:
+    url("./material-icons-sharp.woff2") format("woff2"),
+    url("./material-icons-sharp.woff") format("woff");
 }
 .material-icons-sharp {
   font-family: "Material Icons Sharp";
@@ -103,7 +111,9 @@
   font-style: normal;
   font-weight: 400;
   font-display: block;
-  src: url("./material-icons-two-tone.woff2") format("woff2"), url("./material-icons-two-tone.woff") format("woff");
+  src:
+    url("./material-icons-two-tone.woff2") format("woff2"),
+    url("./material-icons-two-tone.woff") format("woff");
 }
 .material-icons-two-tone {
   font-family: "Material Icons Two Tone";

src/fonts/material-icons.scss

@@ -1,5 +1,5 @@
-@import 'filled';
-@import 'outlined';
-@import 'round';
-@import 'sharp';
-@import 'two-tone';
+@import "filled";
+@import "outlined";
+@import "round";
+@import "sharp";
+@import "two-tone";

src/fonts/outlined.css

@@ -3,7 +3,9 @@
   font-style: normal;
   font-weight: 400;
   font-display: block;
-  src: url("./material-icons-outlined.woff2") format("woff2"), url("./material-icons-outlined.woff") format("woff");
+  src:
+    url("./material-icons-outlined.woff2") format("woff2"),
+    url("./material-icons-outlined.woff") format("woff");
 }
 .material-icons-outlined {
   font-family: "Material Icons Outlined";

src/fonts/outlined.scss

@@ -1,4 +1,4 @@
-@import 'variables';
-@import 'mixins';
+@import "variables";
+@import "mixins";
 
-@include material-icons-font('Material Icons Outlined');
+@include material-icons-font("Material Icons Outlined");

src/fonts/round.css

@@ -3,7 +3,9 @@
   font-style: normal;
   font-weight: 400;
   font-display: block;
-  src: url("./material-icons-round.woff2") format("woff2"), url("./material-icons-round.woff") format("woff");
+  src:
+    url("./material-icons-round.woff2") format("woff2"),
+    url("./material-icons-round.woff") format("woff");
 }
 .material-icons-round {
   font-family: "Material Icons Round";

src/fonts/round.scss

@@ -1,4 +1,4 @@
-@import 'variables';
-@import 'mixins';
+@import "variables";
+@import "mixins";
 
-@include material-icons-font('Material Icons Round');
+@include material-icons-font("Material Icons Round");

src/fonts/sharp.css

@@ -3,7 +3,9 @@
   font-style: normal;
   font-weight: 400;
   font-display: block;
-  src: url("./material-icons-sharp.woff2") format("woff2"), url("./material-icons-sharp.woff") format("woff");
+  src:
+    url("./material-icons-sharp.woff2") format("woff2"),
+    url("./material-icons-sharp.woff") format("woff");
 }
 .material-icons-sharp {
   font-family: "Material Icons Sharp";

src/fonts/sharp.scss

@@ -1,4 +1,4 @@
-@import 'variables';
-@import 'mixins';
+@import "variables";
+@import "mixins";
 
-@include material-icons-font('Material Icons Sharp');
+@include material-icons-font("Material Icons Sharp");

src/fonts/two-tone.css

@@ -3,7 +3,9 @@
   font-style: normal;
   font-weight: 400;
   font-display: block;
-  src: url("./material-icons-two-tone.woff2") format("woff2"), url("./material-icons-two-tone.woff") format("woff");
+  src:
+    url("./material-icons-two-tone.woff2") format("woff2"),
+    url("./material-icons-two-tone.woff") format("woff");
 }
 .material-icons-two-tone {
   font-family: "Material Icons Two Tone";

src/fonts/two-tone.scss

@@ -1,4 +1,4 @@
-@import 'variables';
-@import 'mixins';
+@import "variables";
+@import "mixins";
 
-@include material-icons-font('Material Icons Two Tone');
+@include material-icons-font("Material Icons Two Tone");

src/index.html

@@ -1,8 +1,8 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
-<head>
-  <meta charset="utf-8">
-  <!--
+  <head>
+    <meta charset="utf-8" />
+    <!--
   Customize this policy to fit your own app's needs. For more guidance, please refer to the docs:
       https://cordova.apache.org/docs/en/latest/
   Some notes:
@@ -10,25 +10,33 @@
     * Disables use of inline scripts in order to mitigate risk of XSS vulnerabilities. To change this:
       * Enable inline JS: add 'unsafe-inline' to default-src
   -->
-  <meta http-equiv="Content-Security-Policy" content="default-src * 'self' 'unsafe-inline' 'unsafe-eval' data: content:">
-  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, viewport-fit=cover">
+    <meta
+      http-equiv="Content-Security-Policy"
+      content="default-src * 'self' 'unsafe-inline' 'unsafe-eval' data: content:"
+    />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, viewport-fit=cover"
+    />
 
-  <meta name="theme-color" content="#007aff">
-  <meta name="format-detection" content="telephone=no">
-  <meta name="msapplication-tap-highlight" content="no">
-  <title>plaid</title>
-  
-  <meta name="apple-mobile-web-app-capable" content="yes">
-  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
-  <link rel="apple-touch-icon" href="icons/apple-touch-icon.png">
-  <link rel="icon" href="icons/favicon.png">
-  
-  
-  <!-- built styles file will be auto injected -->
-</head>
-<body>
-  <div id="app"></div>
-  
-  <script type="module" src="./js/app.js"></script>
-</body>
-</html>
+    <meta name="theme-color" content="#007aff" />
+    <meta name="format-detection" content="telephone=no" />
+    <meta name="msapplication-tap-highlight" content="no" />
+    <title>plaid</title>
+
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta
+      name="apple-mobile-web-app-status-bar-style"
+      content="black-translucent"
+    />
+    <link rel="apple-touch-icon" href="icons/apple-touch-icon.png" />
+    <link rel="icon" href="icons/favicon.png" />
+
+    <!-- built styles file will be auto injected -->
+  </head>
+  <body>
+    <div id="app"></div>
+
+    <script type="module" src="./js/app.js"></script>
+  </body>
+</html>

src/js/app.js

@@ -1,21 +1,21 @@
 // Import Vue
-import { createApp } from 'vue';
+import { createApp } from "vue";
 
 // Import Framework7
-import Framework7 from 'framework7/lite-bundle';
+import Framework7 from "framework7/lite-bundle";
 
 // Import Framework7-Vue Plugin
-import Framework7Vue, { registerComponents } from 'framework7-vue/bundle';
+import Framework7Vue, { registerComponents } from "framework7-vue/bundle";
 
 // Import Framework7 Styles
-import 'framework7/css/bundle';
+import "framework7/css/bundle";
 
 // Import Icons and App Custom Styles
-import '../css/icons.css';
-import '../css/app.css';
+import "../css/icons.css";
+import "../css/app.css";
 
 // Import App Component
-import App from '../components/app.vue';
+import App from "../components/app.vue";
 
 // Init Framework7-Vue Plugin
 Framework7.use(Framework7Vue);
@@ -27,4 +27,4 @@ const app = createApp(App);
 registerComponents(app);
 
 // Mount the app
-app.mount('#app');
+app.mount("#app");

src/js/eventBus.js

@@ -1,9 +1,9 @@
 // see https://v3-migration.vuejs.org/breaking-changes/events-api.html#_3-x-update
-import emitter from 'tiny-emitter/instance'
+import emitter from "tiny-emitter/instance";
 
 export default {
   $on: (...args) => emitter.on(...args),
   $once: (...args) => emitter.once(...args),
   $off: (...args) => emitter.off(...args),
-  $emit: (...args) => emitter.emit(...args)
-}
+  $emit: (...args) => emitter.emit(...args),
+};

src/js/podcast.js

@@ -1,17 +1,17 @@
-import getPodcastFromFeed from "podparse"
+import getPodcastFromFeed from "podparse";
 
 /* Avoids "mixed content" problems, hoping for the best */
 function httpsIze(url) {
-    if(location.protocol === 'https:' && url.startsWith('http:')) {
-        return url.replace('http:', 'https:')
-    }
-    return url
+  if (location.protocol === "https:" && url.startsWith("http:")) {
+    return url.replace("http:", "https:");
+  }
+  return url;
 }
 
 async function getPodcast(url) {
-  let feedContent = await fetch(httpsIze(url))
-  feedContent = await feedContent.text()
-  return await getPodcastFromFeed(feedContent)
+  let feedContent = await fetch(httpsIze(url));
+  feedContent = await feedContent.text();
+  return await getPodcastFromFeed(feedContent);
 }
 
-export default getPodcast
+export default getPodcast;

src/js/radiomanifest.js

@@ -1,34 +1,44 @@
-import radiomanifest from 'radiomanifest'
-
-const cachedRadiomanifest = {}
+import radiomanifest from "radiomanifest";
 
+const cachedRadiomanifest = {};
 
 const RM = {
-
   radio: {
-    'ROR': { name: 'Radio Onda Rossa', description: 'un segnale che disturba', url: 'https://www.ondarossa.info' },
-    'Spore':  { name: 'Radio Spore', description: 'una voce senza padrone', url: 'https://radiospore.oziosi.org' },
-    'Wombat': { name: 'Radio Wombat', url: 'https://radiowombat.net' },
-    'Gramma': { name: 'Radio Gramma', description: 'supporto parziale!', url: 'https://test.radiogramma.org' },
+    ROR: {
+      name: "Radio Onda Rossa",
+      description: "un segnale che disturba",
+      url: "https://www.ondarossa.info",
+    },
+    Spore: {
+      name: "Radio Spore",
+      description: "una voce senza padrone",
+      url: "https://radiospore.oziosi.org",
+    },
+    Wombat: { name: "Radio Wombat", url: "https://radiowombat.net" },
+    Gramma: {
+      name: "Radio Gramma",
+      description: "supporto parziale!",
+      url: "https://test.radiogramma.org",
+    },
     // 'RBO': { }
   },
 
-  currentRadio : null,
+  currentRadio: null,
 
-  async get (id) {
+  async get(id) {
     // check if this radio id exists
     if (!RM.radio[id]) {
-      throw new Error('This radio id does not exists!')
+      throw new Error("This radio id does not exists!");
     }
 
     // check if is cached, load it otherwise
     if (!cachedRadiomanifest[id]) {
-      const radio = RM.radio[id]
-      cachedRadiomanifest[id] = await radiomanifest.get(radio.url)
+      const radio = RM.radio[id];
+      cachedRadiomanifest[id] = await radiomanifest.get(radio.url);
     }
-    this.currentRadio = cachedRadiomanifest[id]
-    return cachedRadiomanifest[id]
-  }
-}
+    this.currentRadio = cachedRadiomanifest[id];
+    return cachedRadiomanifest[id];
+  },
+};
 
-export default RM
+export default RM;

src/js/routes.js

@@ -1,42 +1,42 @@
-
-import HomePage from '../pages/home.vue'
-import RadioPage from '../pages/Radio.vue'
-import RadioLivePage from '../pages/RadioLive.vue'
-import RadioShowsPage from '../pages/RadioShows.vue'
-import ShowPage from '../pages/Show.vue'
-import NotFoundPage from '../pages/404.vue'
+import HomePage from "../pages/home.vue";
+import RadioPage from "../pages/Radio.vue";
+import RadioLivePage from "../pages/RadioLive.vue";
+import RadioShowsPage from "../pages/RadioShows.vue";
+import ShowPage from "../pages/Show.vue";
+import NotFoundPage from "../pages/404.vue";
 
 var routes = [
   {
-    path: (process.env.NODE_ENV === 'development') ? '/' : '/plaid/',
+    path: process.env.NODE_ENV === "development" ? "/" : "/plaid/",
     master: true,
     component: HomePage,
     detailRoutes: [
-    {
-      name: 'Radio',
-      path: '/radio/:radioName',
-      component: RadioPage,
-    },
-    {
-      name: 'RadioLive',
-      path: '/radio/:radioName/live',
-      component: RadioLivePage,
-    },
-    {
-      name: 'RadioShows',
-      path: '/radio/:radioName/shows',
-      component: RadioShowsPage,
-    },
-    {
-      name: 'ShowPage',
-      path: '/radio/:radioId/shows/:showId',
-      component: ShowPage
-    }],
+      {
+        name: "Radio",
+        path: "/radio/:radioName",
+        component: RadioPage,
+      },
+      {
+        name: "RadioLive",
+        path: "/radio/:radioName/live",
+        component: RadioLivePage,
+      },
+      {
+        name: "RadioShows",
+        path: "/radio/:radioName/shows",
+        component: RadioShowsPage,
+      },
+      {
+        name: "ShowPage",
+        path: "/radio/:radioId/shows/:showId",
+        component: ShowPage,
+      },
+    ],
   },
   {
-    path: '(.*)',
+    path: "(.*)",
     component: NotFoundPage,
   },
-]
+];
 
-export default routes
+export default routes;

src/js/store.js

@@ -1,14 +1,22 @@
-
-import { createStore } from 'framework7/lite'
+import { createStore } from "framework7/lite";
 
 const store = createStore({
   state: {
     radios: [
-      { id: 1, name: 'Radio Onda Rossa', description: 'un segnale che disturba', url: 'https://www.ondarossa.info' },
-      { id: 2, name: 'Radio Spore', description: 'una voce senza padrone', url: 'https://radiospore.oziosi.org' },
+      {
+        id: 1,
+        name: "Radio Onda Rossa",
+        description: "un segnale che disturba",
+        url: "https://www.ondarossa.info",
+      },
+      {
+        id: 2,
+        name: "Radio Spore",
+        description: "una voce senza padrone",
+        url: "https://radiospore.oziosi.org",
+      },
     ],
   },
-  actions: {
-  },
-})
+  actions: {},
+});
 export default store;

src/pages/404.vue

@@ -8,5 +8,5 @@
   </f7-page>
 </template>
 <script>
-  export default {};
-</script>
+export default {};
+</script>

src/pages/Player.vue

@@ -1,26 +1,24 @@
 <template>
-  <f7-page name="player">
-status={{player}}
-  </f7-page>    
+  <f7-page name="player"> status={{ player }} </f7-page>
 </template>
 
 <script>
-import radiomanifest from '../js/radiomanifest'
-import Player from '../components/Player.vue'
+import radiomanifest from "../js/radiomanifest";
+import Player from "../components/Player.vue";
 
 export default {
   components: { Player },
-  name: 'player',
-  data () {
+  name: "player",
+  data() {
     return {
       loading: true,
       player: null,
-    }
+    };
   },
   props: { f7route: Object, f7router: Object },
-  async mounted () {
-    console.log(Player)
-    let player = Player
-  }
-}
+  async mounted() {
+    console.log(Player);
+    let player = Player;
+  },
+};
 </script>

src/pages/Radio.vue

@@ -1,46 +1,48 @@
 <template>
   <f7-page name="radio">
-    <img :src='Radio.logo' id='logo'/> 
-    <f7-block-title>{{Radio.name}}</f7-block-title>
-    <f7-block-header>{{Radio.description}}</f7-block-header>
+    <img :src="Radio.logo" id="logo" />
+    <f7-block-title>{{ Radio.name }}</f7-block-title>
+    <f7-block-header>{{ Radio.description }}</f7-block-header>
 
-    <div v-if='loading' strong class="text-align-center">
-      <f7-preloader v-if='loading' />
+    <div v-if="loading" strong class="text-align-center">
+      <f7-preloader v-if="loading" />
     </div>
     <f7-list v-else>
-        <f7-list-item title="Diretta" :link='`/radio/${radioId}/live`' />
-        <f7-list-item title="Trasmissioni" :link='`/radio/${radioId}/shows`' />
-        <f7-list-item title="Contatti" :link='`/radio/${radioId}/contacts`' disabled />
-
+      <f7-list-item title="Diretta" :link="`/radio/${radioId}/live`" />
+      <f7-list-item title="Trasmissioni" :link="`/radio/${radioId}/shows`" />
+      <f7-list-item
+        title="Contatti"
+        :link="`/radio/${radioId}/contacts`"
+        disabled
+      />
     </f7-list>
-  </f7-page>    
+  </f7-page>
 </template>
 
 <script>
-import radiomanifest from '../js/radiomanifest'
+import radiomanifest from "../js/radiomanifest";
 
 export default {
-  name: 'radio',
-  data () {
+  name: "radio",
+  data() {
     return {
       loading: true,
       radioId: null,
-      radio: { name: '' },
-      Radio: { }
-    }
+      radio: { name: "" },
+      Radio: {},
+    };
   },
   props: { f7route: Object, f7router: Object },
-  async mounted () {
-    this.radioId = this.f7route.params.radioName
+  async mounted() {
+    this.radioId = this.f7route.params.radioName;
     try {
-      this.Radio = await radiomanifest.get(this.f7route.params.radioName)
-      this.loading = false
+      this.Radio = await radiomanifest.get(this.f7route.params.radioName);
+      this.loading = false;
     } catch (e) {
-      console.error('le cose non vanno mai sempre bene!', e)
+      console.error("le cose non vanno mai sempre bene!", e);
     }
-  }
-}
-
+  },
+};
 </script>
 <style>
 #logo {
@@ -48,4 +50,3 @@ export default {
   max-width: 40px;
 }
 </style>
-

src/pages/RadioLive.vue

@@ -1,59 +1,60 @@
 <template>
   <f7-page name="RadioLive">
-    <img :src='Radio.logo' id='logo'/> 
-    <f7-block-title>{{Radio.name}}</f7-block-title>
-    <f7-block-header>{{Radio.description}}</f7-block-header>
+    <img :src="Radio.logo" id="logo" />
+    <f7-block-title>{{ Radio.name }}</f7-block-title>
+    <f7-block-header>{{ Radio.description }}</f7-block-header>
 
-    <div v-if='loading' strong class="text-align-center">
+    <div v-if="loading" strong class="text-align-center">
       <f7-preloader />
     </div>
     <f7-block v-else>
-      {{currentShowName}}
-      
-      <f7-button class='block' large outline  @click="playLive">Ascolta la diretta</f7-button>
+      {{ currentShowName }}
+
+      <f7-button class="block" large outline @click="playLive"
+        >Ascolta la diretta</f7-button
+      >
     </f7-block>
-  </f7-page>    
+  </f7-page>
 </template>
 
 <script>
-import radiomanifest from '../js/radiomanifest'
-import eventBus from '../js/eventBus'
-
+import radiomanifest from "../js/radiomanifest";
+import eventBus from "../js/eventBus";
 
 export default {
-  name: 'radio',
-  data () {
+  name: "radio",
+  data() {
     return {
       loading: true,
       radioId: null,
-      radio: { name: '' },
-      currentShowName: '',
-      Radio: { }
-    }
+      radio: { name: "" },
+      currentShowName: "",
+      Radio: {},
+    };
   },
   props: { f7route: Object, f7router: Object },
-  async mounted () {
-    this.radioId = this.f7route.params.radioName
+  async mounted() {
+    this.radioId = this.f7route.params.radioName;
     try {
-      this.Radio = await radiomanifest.get(this.f7route.params.radioName)
+      this.Radio = await radiomanifest.get(this.f7route.params.radioName);
       const currentShow = this.Radio.getShowAtTime();
-      this.currentShowName = currentShow == null ? "live" : currentShow.getName();
-      this.loading = false
+      this.currentShowName =
+        currentShow == null ? "live" : currentShow.getName();
+      this.loading = false;
     } catch (e) {
-      console.error('le cose non vanno mai sempre bene!', e)
+      console.error("le cose non vanno mai sempre bene!", e);
     }
   },
   methods: {
-             async playLive() {
-             const urls = await this.Radio.getStreaming().pickURLs();
-             eventBus.$emit('play:now', urls, {
-              live: true,
-              title: this.Radio.getName() + " - live"
-              })
-             }
-  }
-}
-
+    async playLive() {
+      const urls = await this.Radio.getStreaming().pickURLs();
+      eventBus.$emit("play:now", urls, {
+        live: true,
+        title: this.Radio.getName() + " - live",
+      });
+    },
+  },
+};
 </script>
 <style>
 #logo {
@@ -61,5 +62,3 @@ export default {
   max-width: 40px;
 }
 </style>
-
-

src/pages/RadioShows.vue

@@ -1,44 +1,48 @@
 <template>
   <f7-page name="RadioShows">
-    <img :src='Radio.logo' id='logo'/> 
-    <f7-block-title>{{Radio.name}}</f7-block-title>
-    <f7-block-header>{{Radio.description}}</f7-block-header>
+    <img :src="Radio.logo" id="logo" />
+    <f7-block-title>{{ Radio.name }}</f7-block-title>
+    <f7-block-header>{{ Radio.description }}</f7-block-header>
 
-    <div v-if='loading' strong class="text-align-center">
+    <div v-if="loading" strong class="text-align-center">
       <f7-preloader />
     </div>
     <f7-list v-else>
-        <f7-list-item v-for='show in Radio.shows' :key='show.name' :title='show.name'
-          :link='`/radio/${radioId}/shows/${show.name}`' :footer='show.description'/>
+      <f7-list-item
+        v-for="show in Radio.shows"
+        :key="show.name"
+        :title="show.name"
+        :link="`/radio/${radioId}/shows/${show.name}`"
+        :footer="show.description"
+      />
     </f7-list>
-  </f7-page>    
+  </f7-page>
 </template>
 
 <script>
-import radiomanifest from '../js/radiomanifest'
+import radiomanifest from "../js/radiomanifest";
 
 export default {
-  name: 'radio',
-  data () {
+  name: "radio",
+  data() {
     return {
       loading: true,
       radioId: null,
-      radio: { name: '' },
-      Radio: { }
-    }
+      radio: { name: "" },
+      Radio: {},
+    };
   },
   props: { f7route: Object, f7router: Object },
-  async mounted () {
-    this.radioId = this.f7route.params.radioName
+  async mounted() {
+    this.radioId = this.f7route.params.radioName;
     try {
-      this.Radio = await radiomanifest.get(this.f7route.params.radioName)
-      this.loading = false
+      this.Radio = await radiomanifest.get(this.f7route.params.radioName);
+      this.loading = false;
     } catch (e) {
-      console.error('le cose non vanno mai sempre bene!', e)
+      console.error("le cose non vanno mai sempre bene!", e);
     }
-  }
-}
-
+  },
+};
 </script>
 <style>
 #logo {

src/pages/Show.vue

@@ -1,73 +1,73 @@
 <template>
   <f7-page name="show">
-
-    <f7-preloader v-if='loading_meta' />
+    <f7-preloader v-if="loading_meta" />
     <f7-block v-else>
-        <f7-block-title>{{ShowBasicInfo.name}}</f7-block-title>
-        <f7-block-header>{{Radio.name}}</f7-block-header>
+      <f7-block-title>{{ ShowBasicInfo.name }}</f7-block-title>
+      <f7-block-header>{{ Radio.name }}</f7-block-header>
     </f7-block>
-    
-    <div v-if='loading' strong class="text-align-center">
+
+    <div v-if="loading" strong class="text-align-center">
       <f7-preloader />
     </div>
     <f7-list media-list v-else>
-      <f7-list-item v-for='episode in Show.episodes' :key='episode.url'
-        :title='episode.title' 
-        :after='new Date(episode.pubDate).toLocaleString()'
-        link='#'
-        @click="play(episode)">
-          <small v-html='episode.description'/>
+      <f7-list-item
+        v-for="episode in Show.episodes"
+        :key="episode.url"
+        :title="episode.title"
+        :after="new Date(episode.pubDate).toLocaleString()"
+        link="#"
+        @click="play(episode)"
+      >
+        <small v-html="episode.description" />
         <!--
           - l'html della descrizione va tagliato e filtato
           - qua ci sta mettere l'immagine se c'e', nelle f7-list c'e' uno slot media apposito
         -->
       </f7-list-item>
     </f7-list>
-
-  </f7-page>    
+  </f7-page>
 </template>
 
 <script>
-import radiomanifest from '../js/radiomanifest'
-import getPodcast from '../js/podcast'
-import eventBus from '../js/eventBus'
+import radiomanifest from "../js/radiomanifest";
+import getPodcast from "../js/podcast";
+import eventBus from "../js/eventBus";
 
 export default {
-  name: 'radio',
-  data () {
+  name: "radio",
+  data() {
     return {
       loading_meta: true,
       loading: true,
       radioId: null,
       showId: null,
       Show: null,
-    }
+    };
   },
   props: { f7route: Object, f7router: Object },
-  async mounted () {
-    this.radioId = this.f7route.params.radioId
-    this.showId = this.f7route.params.showId
-    this.ShowBasicInfo = {}
+  async mounted() {
+    this.radioId = this.f7route.params.radioId;
+    this.showId = this.f7route.params.showId;
+    this.ShowBasicInfo = {};
 
     try {
-      this.Radio = await radiomanifest.get(this.f7route.params.radioId)
-      this.ShowBasicInfo = this.Radio.getShowByName(this.showId)
-      this.loading_meta = false
-      this.Show = await getPodcast(this.ShowBasicInfo.getFeed())
-      console.log('Show =', this.Show)
-      this.loading = false
+      this.Radio = await radiomanifest.get(this.f7route.params.radioId);
+      this.ShowBasicInfo = this.Radio.getShowByName(this.showId);
+      this.loading_meta = false;
+      this.Show = await getPodcast(this.ShowBasicInfo.getFeed());
+      console.log("Show =", this.Show);
+      this.loading = false;
     } catch (e) {
-      console.error('le cose non vanno mai sempre bene!', e)
+      console.error("le cose non vanno mai sempre bene!", e);
     }
   },
   methods: {
-    play: function(episode) {
-      eventBus.$emit('play:now', episode.enclosure.url, {
+    play: function (episode) {
+      eventBus.$emit("play:now", episode.enclosure.url, {
         live: false,
-        title: episode.title
-        })
-    }
-  }
-}
-
+        title: episode.title,
+      });
+    },
+  },
+};
 </script>

src/pages/home.vue

@@ -1,16 +1,17 @@
 <script setup>
-import radiomanifest from '../js/radiomanifest'
-
+import radiomanifest from "../js/radiomanifest";
 </script>
 <template>
   <f7-page name="home">
-
     <!-- Page content-->
     <f7-block-title>Radio</f7-block-title>
     <f7-list>
-      <f7-list-item v-for='(radio, id) in radiomanifest.radio' :key='id' :link="`/radio/${id}`" :title="radio.name" />
+      <f7-list-item
+        v-for="(radio, id) in radiomanifest.radio"
+        :key="id"
+        :link="`/radio/${id}`"
+        :title="radio.name"
+      />
     </f7-list>
-
-
   </f7-page>
 </template>

tailwind.config.js

@@ -1,4 +1,4 @@
 module.exports = {
-    content: ['./src/index.html', './src/**/*.{vue,svelte,js,ts}'], 
-    plugins: [],
-  }
+  content: ["./src/index.html", "./src/**/*.{vue,svelte,js,ts}"],
+  plugins: [],
+};

vite.config.js

@@ -1,18 +1,14 @@
+import path from "path";
+import vue from "@vitejs/plugin-vue";
 
-import path from 'path';
-import vue from '@vitejs/plugin-vue';
-
-const SRC_DIR = path.resolve(__dirname, './src');
-const PUBLIC_DIR = path.resolve(__dirname, './public');
-const BUILD_DIR = path.resolve(__dirname, './www',);
+const SRC_DIR = path.resolve(__dirname, "./src");
+const PUBLIC_DIR = path.resolve(__dirname, "./public");
+const BUILD_DIR = path.resolve(__dirname, "./www");
 
 export default {
-  plugins: [
-    vue(),
-
-  ],
+  plugins: [vue()],
   root: SRC_DIR,
-  base: '',
+  base: "",
   publicDir: PUBLIC_DIR,
   build: {
     outDir: BUILD_DIR,
@@ -24,11 +20,10 @@ export default {
   },
   resolve: {
     alias: {
-      '@': SRC_DIR,
+      "@": SRC_DIR,
     },
   },
   server: {
     host: true,
   },
-
 };