MyFavMirrors/owntone-server
1
0
Fork 0
mirror of https://github.com/owntone/owntone-server.git synced 2024-12-26 07:05:57 -05:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #769 from chme/webupdate

Browse Source 
Small fixes for the player web interface
This commit is contained in:
Christian Meffert 2019-07-07 10:20:36 +02:00 committed by GitHub
commit b240460469
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 81 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
web-src/src/App.vue
View File

@ -3,7 +3,8 @@
<navbar-top />
<vue-progress-bar class="fd-progress-bar" />
<transition name="fade">
<router-view v-show="!show_burger_menu" />
<!-- Setting v-show to true on the router-view tag avoids jumpiness during transitions -->
<router-view v-show="true" />
</transition>
<notifications v-show="!show_burger_menu" />
<navbar-bottom v-show="!show_burger_menu" />
@ -181,9 +182,6 @@ export default {
},
watch: {
'$route' (to, from) {
this.$store.commit(types.SHOW_BURGER_MENU, false)
},
'show_burger_menu' () {
if (this.show_burger_menu) {
document.querySelector('html').classList.add('is-clipped')

5
web-src/src/components/ModalDialogAlbum.vue
View File

@ -61,10 +61,7 @@ export default {
computed: {
artwork_url: function () {
if (this.album.artwork_url && this.album.artwork_url.startsWith('/')) {
return this.album.artwork_url + '?maxwidth=600&maxheight=600'
}
return this.album.artwork_url
return webapi.artwork_url_append_size_params(this.album.artwork_url)
}
},

32
web-src/src/components/NavbarItemLink.vue Normal file
View File

@ -0,0 +1,32 @@
<template>
<a class="navbar-item" :class="{ 'is-active': is_active }" @click="open_link()" :href="full_path()">
<slot></slot>
</a>
</template>
<script>
import * as types from '@/store/mutation_types'
export default {
name: 'NavbarItemLink',
props: [ 'to' ],
computed: {
is_active () {
return this.$route.path.startsWith(this.to)
}
},
methods: {
open_link: function () {
this.$store.commit(types.SHOW_BURGER_MENU, false)
this.$router.push({ path: this.to })
},
full_path: function () {
const resolved = this.$router.resolve(this.to)
return resolved.href
}
}
}
</script>

2
web-src/src/components/NavBarItemOutput.vue → web-src/src/components/NavbarItemOutput.vue
View File

@ -29,7 +29,7 @@ import RangeSlider from 'vue-range-slider'
import webapi from '@/webapi'
export default {
name: 'NavBarItemOutput',
name: 'NavbarItemOutput',
components: { RangeSlider },
props: [ 'output' ],

57
web-src/src/components/NavbarTop.vue
View File

@ -1,24 +1,24 @@
<template>
<nav class="navbar is-light is-fixed-top" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<router-link to="/playlists" class="navbar-item" active-class="is-active">
<navbar-item-link to="/playlists">
<span class="icon"><i class="mdi mdi-library-music"></i></span>
</router-link>
<router-link to="/music" class="navbar-item" active-class="is-active">
</navbar-item-link>
<navbar-item-link to="/music">
<span class="icon"><i class="mdi mdi-music"></i></span>
</router-link>
<router-link to="/podcasts" class="navbar-item" active-class="is-active" v-if="podcasts.tracks > 0">
</navbar-item-link>
<navbar-item-link to="/podcasts" v-if="podcasts.tracks > 0">
<span class="icon"><i class="mdi mdi-microphone"></i></span>
</router-link>
<router-link to="/audiobooks" class="navbar-item" active-class="is-active" v-if="audiobooks.tracks > 0">
</navbar-item-link>
<navbar-item-link to="/audiobooks" v-if="audiobooks.tracks > 0">
<span class="icon"><i class="mdi mdi-book-open-variant"></i></span>
</router-link>
<router-link to="/files" class="navbar-item" active-class="is-active">
</navbar-item-link>
<navbar-item-link to="/files">
<span class="icon"><i class="mdi mdi-folder-open"></i></span>
</router-link>
<router-link to="/search" class="navbar-item" active-class="is-active">
</navbar-item-link>
<navbar-item-link to="/search">
<span class="icon"><i class="mdi mdi-magnify"></i></span>
</router-link>
</navbar-item-link>
<div class="navbar-burger" @click="update_show_burger_menu" :class="{ 'is-active': show_burger_menu }">
<span></span>
@ -26,16 +26,20 @@
<span></span>
</div>
</div>
<div class="navbar-menu" :class="{ 'is-active': show_burger_menu }">
<div class="navbar-start">
</div>
<div class="navbar-end">
<!-- Outputs dropdown -->
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link"><span class="icon is-hidden-mobile is-hidden-tablet-only"><i class="mdi mdi-volume-high"></i></span> <span class="is-hidden-desktop">Volume</span></a>
<a class="navbar-link is-arrowless"><span class="icon is-hidden-mobile is-hidden-tablet-only"><i class="mdi mdi-volume-high"></i></span> <span class="is-hidden-desktop has-text-weight-bold">Volume</span></a>
<div class="navbar-dropdown is-right">
<div class="navbar-item">
<!-- Outputs: master volume -->
<div class="level is-mobile">
<div class="level-left fd-expanded">
<div class="level-item" style="flex-grow: 0;">
@ -59,9 +63,12 @@
</div>
</div>
</div>
<hr class="navbar-divider">
<nav-bar-item-output v-for="output in outputs" :key="output.id" :output="output"></nav-bar-item-output>
<!-- Outputs: master volume -->
<hr class="navbar-divider">
<navbar-item-output v-for="output in outputs" :key="output.id" :output="output"></navbar-item-output>
<!-- Outputs: stream volume -->
<hr class="navbar-divider">
<div class="navbar-item">
<div class="level is-mobile">
@ -87,6 +94,7 @@
</div>
</div>
<!-- Playback controls -->
<hr class="navbar-divider">
<div class="navbar-item">
<div class="level is-mobile">
@ -110,18 +118,20 @@
</div>
</div>
</div>
<!-- Settings drop down -->
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link"><span class="icon is-hidden-mobile is-hidden-tablet-only"><i class="mdi mdi-settings"></i></span> <span class="is-hidden-desktop">Settings</span></a>
<a class="navbar-link is-arrowless"><span class="icon is-hidden-mobile is-hidden-tablet-only"><i class="mdi mdi-settings"></i></span> <span class="is-hidden-desktop has-text-weight-bold">Settings</span></a>
<div class="navbar-dropdown is-right">
<a class="navbar-item" href="/admin.html">Admin</a>
<hr class="navbar-divider">
<a class="navbar-item" v-on:click="open_about">
<navbar-item-link to="/about">
<div>
<p class="title is-7">forked-daapd</p>
<p class="subtitle is-7">{{ config.version }}</p>
</div>
</a>
</navbar-item-link>
</div>
</div>
</div>
@ -132,7 +142,8 @@
<script>
import webapi from '@/webapi'
import _audio from '@/audio'
import NavBarItemOutput from './NavBarItemOutput'
import NavbarItemLink from './NavbarItemLink'
import NavbarItemOutput from './NavbarItemOutput'
import PlayerButtonPlayPause from './PlayerButtonPlayPause'
import PlayerButtonNext from './PlayerButtonNext'
import PlayerButtonPrevious from './PlayerButtonPrevious'
@ -144,11 +155,10 @@ import * as types from '@/store/mutation_types'
export default {
name: 'NavbarTop',
components: { NavBarItemOutput, PlayerButtonPlayPause, PlayerButtonNext, PlayerButtonPrevious, PlayerButtonShuffle, PlayerButtonConsume, PlayerButtonRepeat, RangeSlider },
components: { NavbarItemLink, NavbarItemOutput, PlayerButtonPlayPause, PlayerButtonNext, PlayerButtonPrevious, PlayerButtonShuffle, PlayerButtonConsume, PlayerButtonRepeat, RangeSlider },
data () {
return {
search_query: '',
old_volume: 0,
playing: false,
@ -204,11 +214,6 @@ export default {
}
},
open_about: function () {
this.$store.commit(types.SHOW_BURGER_MENU, false)
this.$router.push({ path: '/about' })
},
setupAudio: function () {
const a = _audio.setupAudio()

5
web-src/src/pages/PageNowPlaying.vue
View File

@ -107,10 +107,7 @@ export default {
},
artwork_url: function () {
if (this.now_playing.artwork_url && this.now_playing.artwork_url.startsWith('/')) {
return this.now_playing.artwork_url + '?maxwidth=600&maxheight=600'
}
return this.now_playing.artwork_url
return webapi.artwork_url_append_size_params(this.now_playing.artwork_url)
}
},

7
web-src/src/router/index.js
View File

@ -247,10 +247,9 @@ export const router = new VueRouter({
})
router.beforeEach((to, from, next) => {
if (store.state.show_burger_menu) {
const burgerMenuVisible = store.state.show_burger_menu
if (burgerMenuVisible) {
store.commit(types.SHOW_BURGER_MENU, false)
next(false)
} else {
next()
}
next(!burgerMenuVisible)
})

10
web-src/src/webapi/index.js
View File

@ -302,5 +302,15 @@ export default {
spotify () {
return axios.get('/api/spotify')
},
artwork_url_append_size_params (artworkUrl, maxwidth = 600, maxheight = 600) {
if (artworkUrl && artworkUrl.startsWith('/')) {
if (artworkUrl.includes('?')) {
return artworkUrl + '&maxwidth=' + maxwidth + '&maxheight=' + maxheight
}
return artworkUrl + '?maxwidth=' + maxwidth + '&maxheight=' + maxheight
}
return artworkUrl
}
}