diff --git a/README_PLAYER_WEBINTERFACE.md b/README_PLAYER_WEBINTERFACE.md index 7f045282..6ca76cd3 100644 --- a/README_PLAYER_WEBINTERFACE.md +++ b/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 -npm run dev +# Serve with hot reload at localhost:3000 +# (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 -npm run build --report +# Format code +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`. diff --git a/web-src/MIGRATION_VUE3.md b/web-src/MIGRATION_VUE3.md deleted file mode 100644 index c02c4e73..00000000 --- a/web-src/MIGRATION_VUE3.md +++ /dev/null @@ -1,85 +0,0 @@ -# Vue 3 + Vite Migration - -- [ ] vite does not support env vars in `vite.config.js` from `.env` files - - - - - - -- [ ] 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: - - [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: - - - Replace mixin with composition api? - - Copied nav guards into each component - -- [x] vue-router link does not support `tag` and `active-class` properties: - -- [x] `vue-tiny-lazyload-img` does not support Vue 3 - - - No sign of interesst to add support - - `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` () - - 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`: - -- [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 diff --git a/web-src/src/App.vue b/web-src/src/App.vue index 00bbe5b1..675f0a2e 100644 --- a/web-src/src/App.vue +++ b/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' && - import.meta.env.VUE_APP_WEBSOCKET_SERVER - ) { - // If we are running in the development server, use the websocket url configured in .env.development - wsUrl = import.meta.env.VUE_APP_WEBSOCKET_SERVER + + if (import.meta.env.DEV && import.meta.env.VITE_OWNTONE_URL) { + // If we are running in development mode, construct the websocket url + // from the host of the environment variable VITE_OWNTONE_URL + const owntoneUrl = new URL(import.meta.env.VITE_OWNTONE_URL) + 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 diff --git a/web-src/vite.config.js b/web-src/vite.config.js index 6d48f919..12e09329 100644 --- a/web-src/vite.config.js +++ b/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 } } }