[web] Fix running dev server with remote owntone server; update docs

README_PLAYER_WEBINTERFACE.md

@@ -1,6 +1,7 @@
-# OwnTone player web interface
+# OwnTone web interface
 
-Mobile friendly player web interface for [OwnTone](http://owntone.github.io/owntone-server/) build with [Vue.js](https://vuejs.org), [Bulma](http://bulma.io).
+Mobile friendly player web interface for [OwnTone](http://owntone.github.io/owntone-server/) build
+with [Vue.js](https://vuejs.org), [Bulma](http://bulma.io).
 
 ## Screenshots
 
@@ -21,20 +22,34 @@ The source is located in the `web-src` folder.
 cd web-src
 ```
 
-It is based on the Vue.js webpack template. For a detailed explanation on how things work, check out the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).
+The web interface is built with [Vite](https://vitejs.dev/), makes use of Prettier for code formatting
+and ESLint for code linting (the project was set up following the guide [ESLint and Prettier with Vite and Vue.js 3](https://vueschool.io/articles/vuejs-tutorials/eslint-and-prettier-with-vite-and-vue-js-3/)
 
 ``` bash
 # install dependencies
 npm install
 
-# serve with hot reload at localhost:8080
+# Serve with hot reload at localhost:3000
-npm run dev
+# (assumes that OwnTone server is running on localhost:3689)
+npm run serve
 
-# build for production with minification (will update player web interface in "../htdocs")
+# Serve with hot reload at localhost:3000
+# (with remote OwnTone server reachable under owntone.local:3689)
+VITE_OWNTONE_URL=http://owntone.local:3689 npm run serve
+
+
+# Build for production with minification (will update web interface in "../htdocs")
 npm run build
 
-# build for production and view the bundle analyzer report
+# Format code
-npm run build --report
+npm run format
+
+# Lint code (and fix errors that can be automatically fixed)
+npm run lint
 ```
 
-After running `npm run dev` the web interface is reachable at [localhost:8080](http://localhost:8080). By default it expects **owntone** to be running at [localhost:3689](http://localhost:3689) and proxies all JSON API calls to this location. If the server is running at a different location you need to modify the `proxyTable` configuration in `config/index.js`
+After running `npm run serve` the web interface is reachable at [localhost:3000](http://localhost:3000).
+By default it expects **owntone** to be running at [localhost:3689](http://localhost:3689) and proxies all
+JSON API calls to this location.
+
+If the server is running at a different location you have to set the env variable `VITE_OWNTONE_URL`.

web-src/MIGRATION_VUE3.md

@@ -1,85 +0,0 @@
-# Vue 3 + Vite Migration
-
-- [ ] vite does not support env vars in `vite.config.js` from `.env` files
-
-  - <https://stackoverflow.com/questions/66389043/how-can-i-use-vite-env-variables-in-vite-config-js>
-  - <https://github.com/vitejs/vite/issues/1930>
-
-- [ ] Documentation update
-
-- [x] Add linting (ESLint)
-
-- [x] Update dialog is missing scan options
-
-- [ ] Performance with huge artists/albums/tracks list (no functional template supported any more)
-
-  - [ ] Do not reload data, if using the index-nav
-    - [x] PageAlbums
-    - [x] PageArtists
-    - [ ] PageGenres
-    - [ ] ...
-  - [ ] Albums page is slow to load (because of the number of vue components - ListItem+CoverArtwork)
-    - [ ] Evaluate removing ListItem and CoverArtwork component
-
-- [x] JS error on Podacst page
-
-  - Problem caused by the Slider component
-  - Replace with plain html
-
-- [x] vue-router scroll-behavior
-
-  - [x] Index list not always hidden
-  - [x] Check transitions
-  - [x] Page display is "jumpy" - "fixed" by removing the page transition effect
-
-- [x] Index navigation "scroll up/down" button does not scroll down, if index is visible
-
-  - [x] Use native intersection observer solves it in desktop mode
-  - [x] Mobile view still broken
-
-- [x] Update to latest dependency versions (vite, vue, etc.)
-
-- [x] Index navigation is broken (jump to "A")
-
-  - Change in `$router.push` syntax, hash has to be passed as a separate parameter instead of as part of the path
-
-- [x] `vue-range-slider` is not compatible with vue3
-
-  - replacement option: <https://github.com/vueform/slider>
-  - [x] `@vueform/slider` for volume control
-  - [x] track progress (now playing)
-  - [x] track progress (podcasts)
-
-- [x] vue-router does not support navigation guards in mixins: <https://github.com/vuejs/vue-router-next/issues/454>
-
-  - Replace mixin with composition api? <https://next.router.vuejs.org/guide/advanced/composition-api.html#navigation-guards>
-  - Copied nav guards into each component
-
-- [x] vue-router link does not support `tag` and `active-class` properties: <https://next.router.vuejs.org/guide/migration/index.html#removal-of-event-and-tag-props-in-router-link>
-
-- [x] `vue-tiny-lazyload-img` does not support Vue 3
-
-  - No sign of interesst to add support <https://github.com/mazipan/vue-tiny-lazyload-img>
-  - `v-lazy-image` (<https://github.com/alexjoverm/v-lazy-image>) seems to be supported and popular
-    - Works as a component instead of a directive
-    - **DOES NOT** have a good error handling, if the (remote) image does not exist
-  - `vue3-lazyload` (<https://github.com/murongg/vue3-lazyload>)
-    - Works as a directive
-    - Easy replacement for `vue-tiny-lazyload-img`
-
-- [x] Top margin in pages is wrong (related to vue-router scroll behavior changes)
-
-  - Solved by adding the correct margin to take the top navbar (and where shown the tabs) into account
-
-- [x] Mobile view seems to be broken
-
-  - Looks like the cause of this was the broken router-link in bulma tabs component
-
-- [x] Changing sort option (artist albums view) does not work
-
-- [x] Replace unmaintained `vue-infinite-loading` dependency
-
-  - Replace with `@ts-pro/vue-eternal-loading`: <https://github.com/ts-pro/vue-eternal-loading>
-
-- [x] Replace `bulma-switch` with `@vueform/toggle`?
-  - Update of `bulma-switch` (or `vite`) fixed the import of the sass file, no need to replace it now

web-src/src/App.vue

@@ -167,12 +167,16 @@ export default {
         window.location.hostname +
         ':' +
         vm.$store.state.config.websocket_port
-      if (
+
-        import.meta.env.NODE_ENV === 'development' &&
+      if (import.meta.env.DEV && import.meta.env.VITE_OWNTONE_URL) {
-        import.meta.env.VUE_APP_WEBSOCKET_SERVER
+        // If we are running in development mode, construct the websocket url
-      ) {
+        // from the host of the environment variable VITE_OWNTONE_URL
-        // If we are running in the development server, use the websocket url configured in .env.development
+        const owntoneUrl = new URL(import.meta.env.VITE_OWNTONE_URL)
-        wsUrl = import.meta.env.VUE_APP_WEBSOCKET_SERVER
+        wsUrl =
+          protocol +
+          owntoneUrl.hostname +
+          ':' +
+          vm.$store.state.config.websocket_port
       }
 
       const socket = new ReconnectingWebSocket(wsUrl, 'notify', {
@@ -238,7 +242,7 @@ export default {
       var update_throttled = false
 
       function update_info() {
-        if ( update_throttled ) {
+        if (update_throttled) {
           return
         }
 
@@ -252,7 +256,9 @@ export default {
         vm.update_pairing()
 
         update_throttled = true
-        setTimeout(function () { update_throttled = false }, 500)
+        setTimeout(function () {
+          update_throttled = false
+        }, 500)
       }
 
       // These events are fired when the window becomes active in different ways

web-src/vite.config.js

@@ -1,6 +1,15 @@
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 
+// Support for setting the OwnTone server URL as env var VITE_OWNTONE_URL
+// in development mode.
+// E. g. start the DEV server with
+//
+//     VITE_OWNTONE_URL=https://owntone.local:3689 npm run serve
+//
+// will connect the web interface with a remote OwnTone server.
+const owntoneUrl = process.env.VITE_OWNTONE_URL ?? 'http://localhost:3689'
+
 // https://vitejs.dev/config/
 export default defineConfig({
   resolve: { alias: { '@': '/src' } },
@@ -18,13 +27,13 @@ export default defineConfig({
   server: {
     proxy: {
       '/api': {
-        target: 'http://localhost:3689'
+        target: owntoneUrl
       },
       '/artwork': {
-        target: 'http://localhost:3689'
+        target: owntoneUrl
       },
       '/stream.mp3': {
-        target: 'http://localhost:3689'
+        target: owntoneUrl
       }
     }
   }