[web] Fix running dev server with remote owntone server; update docs
This commit is contained in:
chme
parent
02af9f2a23
commit
8f934ec690
|
|
@ -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`.
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue