MyFavMirrors/owntone-server
1
0
Fork 0
mirror of https://github.com/owntone/owntone-server.git synced 2025-04-18 18:05:20 -04:00
Code Issues Packages Projects Releases Wiki Activity

[docs] Make web interface documentation more comprehensible

Browse Source
This commit is contained in:
Alain Nussbaumer 2024-03-12 01:36:30 +01:00
parent d35d52c6af
commit 006093c643
1 changed files with 77 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

106
docs/clients/web-interface.md
View File

@ -1,16 +1,19 @@
# Web Interface # Web Interface
Mobile friendly player web interface for [OwnTone](http://owntone.github.io/owntone-server/) build The web interface is a mobile-friendly music player and browser for OwnTone.
with [Vue.js](https://vuejs.org), [Bulma](http://bulma.io).
You can find the web interface at [http://owntone.local:3689](http://owntone.local:3689) You can reach it at [http://owntone.local:3689](http://owntone.local:3689)
or alternatively at http://SERVER_ADDRESS:3689. or depending on the OwnTone installation at `http://<server-address>:<port>`.
Use the web interface to control playback, trigger manual library rescans, pair This interface becomes useful when you need to control playback, trigger
with remotes, select speakers, authenticate with Spotify, etc. manual library rescans, pair with remotes, select speakers, grant access to
Spotify, and for many other operations.
## Screenshots ## Screenshots
Below you have a selection of screenshots that shows different part of the
interface.
![Now playing](../assets/images/screenshot-now-playing.png){: class="zoom" } ![Now playing](../assets/images/screenshot-now-playing.png){: class="zoom" }
![Queue](../assets/images/screenshot-queue.png){: class="zoom" } ![Queue](../assets/images/screenshot-queue.png){: class="zoom" }
![Music browse](../assets/images/screenshot-music-browse.png){: class="zoom" } ![Music browse](../assets/images/screenshot-music-browse.png){: class="zoom" }
@ -31,45 +34,90 @@ with remotes, select speakers, authenticate with Spotify, etc.
## Usage ## Usage
You can find OwnTone's web interface at [http://owntone.local:3689](http://owntone.local:3689) The web interface is usually reachable at [http://owntone.local:3689](http://owntone.local:3689).
or alternatively at http://SERVER_ADDRESS:3689. But depending on the setup of OwnTone you might need to adjust the server name
and port of the server accordingly `http://<server-name>:<port>`.
## Build Setup ## Building and Serving
The source is located in the `web-src` folder. The web interface is built with [Vite](https://vitejs.dev/) and [Bulma](http://bulma.io).
```bash Its source code is located in the `web-src` folder and therefore all `npm`
commands must be run under this folder.
To switch to this folder, run the command hereafter.
```shell
cd web-src cd web-src
``` ```
The web interface is built with [Vite](https://vitejs.dev/), makes use of Prettier for code formatting ### Dependencies Installation
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 First of all, the dependencies to libraries must be installed with the command
# install dependencies below.
```shell
npm install npm install
```
# Serve with hot reload at localhost:3000 Once the libraries installed, you can either [build](#source-code-building),
# (assumes that OwnTone server is running on localhost:3689) [format](#source-code-formatting), and [lint](#source-code-linting) the source
npm run serve code, or [serve](#serving) the web interface locally.
# Serve with hot reload at localhost:3000 ### Source Code Building
# (with remote OwnTone server reachable under owntone.local:3689)
export VITE_OWNTONE_URL=http://owntone.local:3689 npm run serve
# Build for production with minification (will update web interface The following command builds the web interface for production with minification
# in "../htdocs") and stores it under the folder `../htdocs`.
```shell
npm run build npm run build
```
# Format code ### Source Code Formatting
The source code follows certain formatting conventions for maintainability and
readability. To ensure that the source code follows these conventions,
[Prettier](https://prettier.io/) is used.
The command below applies formatting conventions to the source code based on a
preset configuration. Note that a additional configuration is made in the file
`.prettierrc.json`.
```shell
npm run format npm run format
```
# Lint code (and fix errors that can be automatically fixed) ### Source Code Linting
In order to flag programming errors, bugs, stylistic errors and suspicious
constructs in the source code, [ESLint](https://eslint.org) is used.
Note that ESLint has been configured following this [guide](https://vueschool.io/articles/vuejs-tutorials/eslint-and-prettier-with-vite-and-vue-js-3/).
The following command lints the source code and fixes all automatically fixable
errors.
```shell
npm run lint npm run lint
``` ```
After running `npm run serve` the web interface is reachable at [localhost:3000](http://localhost:3000). ### Serving
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`. In order to serve locally the web interface, the following command can be run.
```shell
npm run serve
```
After running `npm run serve` the web interface is reachable at [localhost:3000](http://localhost:3000).
By default the above command expects the OwnTone server to be running at
[localhost:3689](http://localhost:3689) and proxies API calls to this location.
If the server is running at a different location you have to set the
environment variable `VITE_OWNTONE_URL`, like in the example below.
```shell
export VITE_OWNTONE_URL=http://owntone.local:3689
npm run serve
```