MyFavMirrors/owntone-server
1
0
Fork 0
mirror of https://github.com/owntone/owntone-server.git synced 2025-02-05 10:48:09 -05:00
Code Issues Packages Projects Releases Wiki Activity

[web] Reorder properties and methods

Browse Source
This commit is contained in:
Alain Nussbaumer 2023-12-14 20:47:27 +01:00
parent 1b666fe936
commit 67f716ff43
5 changed files with 221 additions and 271 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
web-src/src/pages/PageAlbumSpotify.vue
View File

@ -122,11 +122,9 @@ export default {
data() { data() {
return { return {
album: { artists: [{}], tracks: {} }, album: { artists: [{}], tracks: {} },
show_track_details_modal: false,
selected_track: {}, selected_track: {},
show_details_modal: false,
show_details_modal: false show_track_details_modal: false
} }
}, },

107
web-src/src/pages/PageSearchLibrary.vue
View File

@ -283,14 +283,14 @@ export default {
data() { data() {
return { return {
search_query: '',
tracks: new GroupByList(),
artists: new GroupByList(),
albums: new GroupByList(), albums: new GroupByList(),
artists: new GroupByList(),
audiobooks: new GroupByList(),
composers: new GroupByList(), composers: new GroupByList(),
playlists: new GroupByList(), playlists: new GroupByList(),
audiobooks: new GroupByList(), podcasts: new GroupByList(),
podcasts: new GroupByList() search_query: '',
tracks: new GroupByList()
} }
}, },
@ -298,62 +298,55 @@ export default {
recent_searches() { recent_searches() {
return this.$store.state.recent_searches return this.$store.state.recent_searches
}, },
show_tracks() {
return this.$route.query.type && this.$route.query.type.includes('track')
},
show_all_tracks_button() {
return this.tracks.total > this.tracks.items.length
},
show_artists() {
return this.$route.query.type && this.$route.query.type.includes('artist')
},
show_all_artists_button() {
return this.artists.total > this.artists.items.length
},
show_albums() { show_albums() {
return this.$route.query.type && this.$route.query.type.includes('album') return this.$route.query.type && this.$route.query.type.includes('album')
}, },
show_all_albums_button() { show_all_albums_button() {
return this.albums.total > this.albums.items.length return this.albums.total > this.albums.items.length
}, },
show_all_artists_button() {
show_composers() { return this.artists.total > this.artists.items.length
return ( },
this.$route.query.type && this.$route.query.type.includes('composer') show_all_audiobooks_button() {
) return this.audiobooks.total > this.audiobooks.items.length
}, },
show_all_composers_button() { show_all_composers_button() {
return this.composers.total > this.composers.items.length return this.composers.total > this.composers.items.length
}, },
show_playlists() {
return (
this.$route.query.type && this.$route.query.type.includes('playlist')
)
},
show_all_playlists_button() { show_all_playlists_button() {
return this.playlists.total > this.playlists.items.length return this.playlists.total > this.playlists.items.length
}, },
show_all_podcasts_button() {
return this.podcasts.total > this.podcasts.items.length
},
show_all_tracks_button() {
return this.tracks.total > this.tracks.items.length
},
show_artists() {
return this.$route.query.type && this.$route.query.type.includes('artist')
},
show_audiobooks() { show_audiobooks() {
return ( return (
this.$route.query.type && this.$route.query.type.includes('audiobook') this.$route.query.type && this.$route.query.type.includes('audiobook')
) )
}, },
show_all_audiobooks_button() { show_composers() {
return this.audiobooks.total > this.audiobooks.items.length return (
this.$route.query.type && this.$route.query.type.includes('composer')
)
},
show_playlists() {
return (
this.$route.query.type && this.$route.query.type.includes('playlist')
)
}, },
show_podcasts() { show_podcasts() {
return ( return (
this.$route.query.type && this.$route.query.type.includes('podcast') this.$route.query.type && this.$route.query.type.includes('podcast')
) )
}, },
show_all_podcasts_button() { show_tracks() {
return this.podcasts.total > this.podcasts.items.length return this.$route.query.type && this.$route.query.type.includes('track')
} }
}, },
@ -398,7 +391,7 @@ export default {
} }
if (query.query.startsWith('query:')) { if (query.query.startsWith('query:')) {
searchParams.expression = query.query.replace(/^query:/, '').trim() searchParams.expression = query.query.replace(/^query:/u, '').trim()
} else { } else {
searchParams.query = query.query searchParams.query = query.query
} }
@ -428,7 +421,7 @@ export default {
} }
if (query.query.startsWith('query:')) { if (query.query.startsWith('query:')) {
searchParams.expression = query.query.replace(/^query:/, '').trim() searchParams.expression = query.query.replace(/^query:/u, '').trim()
} else { } else {
searchParams.expression = `((album includes "${query.query}" or artist includes "${query.query}") and media_kind is audiobook)` searchParams.expression = `((album includes "${query.query}" or artist includes "${query.query}") and media_kind is audiobook)`
} }
@ -454,7 +447,7 @@ export default {
} }
if (query.query.startsWith('query:')) { if (query.query.startsWith('query:')) {
searchParams.expression = query.query.replace(/^query:/, '').trim() searchParams.expression = query.query.replace(/^query:/u, '').trim()
} else { } else {
searchParams.expression = `((album includes "${query.query}" or artist includes "${query.query}") and media_kind is podcast)` searchParams.expression = `((album includes "${query.query}" or artist includes "${query.query}") and media_kind is podcast)`
} }
@ -477,10 +470,10 @@ export default {
this.$router.push({ this.$router.push({
name: 'search-library', name: 'search-library',
query: { query: {
type: 'track,artist,album,playlist,audiobook,podcast,composer',
query: this.search_query,
limit: 3, limit: 3,
offset: 0 offset: 0,
query: this.search_query,
type: 'track,artist,album,playlist,audiobook,podcast,composer'
} }
}) })
this.$refs.search_field.blur() this.$refs.search_field.blur()
@ -490,8 +483,8 @@ export default {
this.$router.push({ this.$router.push({
name: 'search-library', name: 'search-library',
query: { query: {
type: 'track', query: this.$route.query.query,
query: this.$route.query.query type: 'track'
} }
}) })
}, },
@ -500,8 +493,8 @@ export default {
this.$router.push({ this.$router.push({
name: 'search-library', name: 'search-library',
query: { query: {
type: 'artist', query: this.$route.query.query,
query: this.$route.query.query type: 'artist'
} }
}) })
}, },
@ -510,8 +503,8 @@ export default {
this.$router.push({ this.$router.push({
name: 'search-library', name: 'search-library',
query: { query: {
type: 'album', query: this.$route.query.query,
query: this.$route.query.query type: 'album'
} }
}) })
}, },
@ -520,8 +513,8 @@ export default {
this.$router.push({ this.$router.push({
name: 'search-library', name: 'search-library',
query: { query: {
type: 'tracks', query: this.$route.query.query,
query: this.$route.query.query type: 'tracks'
} }
}) })
}, },
@ -530,8 +523,8 @@ export default {
this.$router.push({ this.$router.push({
name: 'search-library', name: 'search-library',
query: { query: {
type: 'playlist', query: this.$route.query.query,
query: this.$route.query.query type: 'playlist'
} }
}) })
}, },
@ -540,8 +533,8 @@ export default {
this.$router.push({ this.$router.push({
name: 'search-library', name: 'search-library',
query: { query: {
type: 'audiobook', query: this.$route.query.query,
query: this.$route.query.query type: 'audiobook'
} }
}) })
}, },
@ -550,8 +543,8 @@ export default {
this.$router.push({ this.$router.push({
name: 'search-library', name: 'search-library',
query: { query: {
type: 'podcast', query: this.$route.query.query,
query: this.$route.query.query type: 'podcast'
} }
}) })
}, },

305
web-src/src/pages/PageSearchSpotify.vue
View File

@ -307,73 +307,62 @@ export default {
data() { data() {
return { return {
search_query: '',
tracks: { items: [], total: 0 },
artists: { items: [], total: 0 },
albums: { items: [], total: 0 }, albums: { items: [], total: 0 },
artists: { items: [], total: 0 },
playlists: { items: [], total: 0 }, playlists: { items: [], total: 0 },
query: {}, query: {},
search_param: {}, search_param: {},
search_query: '',
show_track_details_modal: false,
selected_track: {},
show_album_details_modal: false,
selected_album: {}, selected_album: {},
show_artist_details_modal: false,
selected_artist: {}, selected_artist: {},
show_playlist_details_modal: false,
selected_playlist: {}, selected_playlist: {},
selected_track: {},
show_album_details_modal: false,
show_artist_details_modal: false,
show_playlist_details_modal: false,
show_track_details_modal: false,
tracks: { items: [], total: 0 },
validSearchTypes: ['track', 'artist', 'album', 'playlist'] validSearchTypes: ['track', 'artist', 'album', 'playlist']
} }
}, },
computed: { computed: {
is_visible_artwork() {
return this.$store.getters.settings_option(
'webinterface',
'show_cover_artwork_in_album_lists'
).value
},
recent_searches() { recent_searches() {
return this.$store.state.recent_searches.filter( return this.$store.state.recent_searches.filter(
(search) => !search.startsWith('query:') (search) => !search.startsWith('query:')
) )
}, },
show_tracks() {
return this.$route.query.type && this.$route.query.type.includes('track')
},
show_all_tracks_button() {
return this.tracks.total > this.tracks.items.length
},
show_artists() {
return this.$route.query.type && this.$route.query.type.includes('artist')
},
show_all_artists_button() {
return this.artists.total > this.artists.items.length
},
show_albums() { show_albums() {
return this.$route.query.type && this.$route.query.type.includes('album') return this.$route.query.type && this.$route.query.type.includes('album')
}, },
show_all_albums_button() { show_all_albums_button() {
return this.albums.total > this.albums.items.length return this.albums.total > this.albums.items.length
}, },
show_all_artists_button() {
return this.artists.total > this.artists.items.length
},
show_all_playlists_button() {
return this.playlists.total > this.playlists.items.length
},
show_all_tracks_button() {
return this.tracks.total > this.tracks.items.length
},
show_artists() {
return this.$route.query.type && this.$route.query.type.includes('artist')
},
show_playlists() { show_playlists() {
return ( return (
this.$route.query.type && this.$route.query.type.includes('playlist') this.$route.query.type && this.$route.query.type.includes('playlist')
) )
}, },
show_all_playlists_button() { show_tracks() {
return this.playlists.total > this.playlists.items.length return this.$route.query.type && this.$route.query.type.includes('track')
},
is_visible_artwork() {
return this.$store.getters.settings_option(
'webinterface',
'show_cover_artwork_in_album_lists'
).value
} }
}, },
@ -390,16 +379,97 @@ export default {
}, },
methods: { methods: {
artwork_url(album) {
if (album.images && album.images.length > 0) {
return album.images[0].url
}
return ''
},
new_search() {
if (!this.search_query) {
return
}
this.$router.push({
name: 'search-spotify',
query: {
limit: 3,
offset: 0,
query: this.search_query,
type: 'track,artist,album,playlist,audiobook,podcast'
}
})
this.$refs.search_field.blur()
},
open_album(album) {
this.$router.push({
name: 'music-spotify-album',
params: { id: album.id }
})
},
open_album_dialog(album) {
this.selected_album = album
this.show_album_details_modal = true
},
open_artist_dialog(artist) {
this.selected_artist = artist
this.show_artist_details_modal = true
},
open_playlist_dialog(playlist) {
this.selected_playlist = playlist
this.show_playlist_details_modal = true
},
open_recent_search(query) {
this.search_query = query
this.new_search()
},
open_search_albums() {
this.$router.push({
name: 'search-spotify',
query: {
query: this.$route.query.query,
type: 'album'
}
})
},
open_search_artists() {
this.$router.push({
name: 'search-spotify',
query: {
query: this.$route.query.query,
type: 'artist'
}
})
},
open_search_playlists() {
this.$router.push({
name: 'search-spotify',
query: {
query: this.$route.query.query,
type: 'playlist'
}
})
},
open_search_tracks() {
this.$router.push({
name: 'search-spotify',
query: {
query: this.$route.query.query,
type: 'track'
}
})
},
open_track_dialog(track) {
this.selected_track = track
this.show_track_details_modal = true
},
reset() { reset() {
this.tracks = { items: [], total: 0 } this.tracks = { items: [], total: 0 }
this.artists = { items: [], total: 0 } this.artists = { items: [], total: 0 }
this.albums = { items: [], total: 0 } this.albums = { items: [], total: 0 }
this.playlists = { items: [], total: 0 } this.playlists = { items: [], total: 0 }
}, },
search() { search() {
this.reset() this.reset()
// If no search query present reset and focus search field // If no search query present reset and focus search field
if ( if (
!this.query.query || !this.query.query ||
@ -410,30 +480,20 @@ export default {
this.$refs.search_field.focus() this.$refs.search_field.focus()
return return
} }
this.search_query = this.query.query this.search_query = this.query.query
this.search_param.limit = this.query.limit ? this.query.limit : PAGE_SIZE this.search_param.limit = this.query.limit ? this.query.limit : PAGE_SIZE
this.search_param.offset = this.query.offset ? this.query.offset : 0 this.search_param.offset = this.query.offset ? this.query.offset : 0
this.$store.commit(types.ADD_RECENT_SEARCH, this.query.query) this.$store.commit(types.ADD_RECENT_SEARCH, this.query.query)
this.search_all() this.search_all()
}, },
search_albums_next({ loaded }) {
spotify_search() { this.spotify_search().then((data) => {
return webapi.spotify().then(({ data }) => { this.albums.items = this.albums.items.concat(data.albums.items)
this.search_param.market = data.webapi_country this.albums.total = data.albums.total
this.search_param.offset += data.albums.limit
const spotifyApi = new SpotifyWebApi() loaded(data.albums.items.length, PAGE_SIZE)
spotifyApi.setAccessToken(data.webapi_token)
const types = this.query.type
.split(',')
.filter((type) => this.validSearchTypes.includes(type))
return spotifyApi.search(this.query.query, types, this.search_param)
}) })
}, },
search_all() { search_all() {
this.spotify_search().then((data) => { this.spotify_search().then((data) => {
this.tracks = data.tracks ? data.tracks : { items: [], total: 0 } this.tracks = data.tracks ? data.tracks : { items: [], total: 0 }
@ -444,141 +504,40 @@ export default {
: { items: [], total: 0 } : { items: [], total: 0 }
}) })
}, },
search_tracks_next({ loaded }) {
this.spotify_search().then((data) => {
this.tracks.items = this.tracks.items.concat(data.tracks.items)
this.tracks.total = data.tracks.total
this.search_param.offset += data.tracks.limit
loaded(data.tracks.items.length, PAGE_SIZE)
})
},
search_artists_next({ loaded }) { search_artists_next({ loaded }) {
this.spotify_search().then((data) => { this.spotify_search().then((data) => {
this.artists.items = this.artists.items.concat(data.artists.items) this.artists.items = this.artists.items.concat(data.artists.items)
this.artists.total = data.artists.total this.artists.total = data.artists.total
this.search_param.offset += data.artists.limit this.search_param.offset += data.artists.limit
loaded(data.artists.items.length, PAGE_SIZE) loaded(data.artists.items.length, PAGE_SIZE)
}) })
}, },
search_albums_next({ loaded }) {
this.spotify_search().then((data) => {
this.albums.items = this.albums.items.concat(data.albums.items)
this.albums.total = data.albums.total
this.search_param.offset += data.albums.limit
loaded(data.albums.items.length, PAGE_SIZE)
})
},
search_playlists_next({ loaded }) { search_playlists_next({ loaded }) {
this.spotify_search().then((data) => { this.spotify_search().then((data) => {
this.playlists.items = this.playlists.items.concat(data.playlists.items) this.playlists.items = this.playlists.items.concat(data.playlists.items)
this.playlists.total = data.playlists.total this.playlists.total = data.playlists.total
this.search_param.offset += data.playlists.limit this.search_param.offset += data.playlists.limit
loaded(data.playlists.items.length, PAGE_SIZE) loaded(data.playlists.items.length, PAGE_SIZE)
}) })
}, },
search_tracks_next({ loaded }) {
new_search() { this.spotify_search().then((data) => {
if (!this.search_query) { this.tracks.items = this.tracks.items.concat(data.tracks.items)
return this.tracks.total = data.tracks.total
} this.search_param.offset += data.tracks.limit
loaded(data.tracks.items.length, PAGE_SIZE)
this.$router.push({
name: 'search-spotify',
query: {
type: 'track,artist,album,playlist,audiobook,podcast',
query: this.search_query,
limit: 3,
offset: 0
}
})
this.$refs.search_field.blur()
},
open_search_tracks() {
this.$router.push({
name: 'search-spotify',
query: {
type: 'track',
query: this.$route.query.query
}
}) })
}, },
spotify_search() {
open_search_artists() { return webapi.spotify().then(({ data }) => {
this.$router.push({ this.search_param.market = data.webapi_country
name: 'search-spotify', const spotifyApi = new SpotifyWebApi()
query: { spotifyApi.setAccessToken(data.webapi_token)
type: 'artist', const types = this.query.type
query: this.$route.query.query .split(',')
} .filter((type) => this.validSearchTypes.includes(type))
return spotifyApi.search(this.query.query, types, this.search_param)
}) })
},
open_search_albums() {
this.$router.push({
name: 'search-spotify',
query: {
type: 'album',
query: this.$route.query.query
}
})
},
open_search_playlists() {
this.$router.push({
name: 'search-spotify',
query: {
type: 'playlist',
query: this.$route.query.query
}
})
},
open_recent_search(query) {
this.search_query = query
this.new_search()
},
open_track_dialog(track) {
this.selected_track = track
this.show_track_details_modal = true
},
open_album_dialog(album) {
this.selected_album = album
this.show_album_details_modal = true
},
open_artist_dialog(artist) {
this.selected_artist = artist
this.show_artist_details_modal = true
},
open_playlist_dialog(playlist) {
this.selected_playlist = playlist
this.show_playlist_details_modal = true
},
open_album(album) {
this.$router.push({
name: 'music-spotify-album',
params: { id: album.id }
})
},
artwork_url(album) {
if (album.images && album.images.length > 0) {
return album.images[0].url
}
return ''
} }
} }
} }

10
web-src/src/pages/PageSettingsOnlineServices.vue
View File

@ -140,9 +140,9 @@ export default {
data() { data() {
return { return {
lastfm_login: { lastfm_login: {
user: '', errors: { error: '', password: '', user: '' },
password: '', password: '',
errors: { user: '', password: '', error: '' } user: ''
} }
} }
}, },
@ -177,9 +177,6 @@ export default {
}, },
methods: { methods: {
logout_spotify() {
webapi.spotify_logout()
},
login_lastfm() { login_lastfm() {
webapi.lastfm_login(this.lastfm_login).then((response) => { webapi.lastfm_login(this.lastfm_login).then((response) => {
this.lastfm_login.user = '' this.lastfm_login.user = ''
@ -197,6 +194,9 @@ export default {
}, },
logoutLastfm() { logoutLastfm() {
webapi.lastfm_logout() webapi.lastfm_logout()
},
logout_spotify() {
webapi.spotify_logout()
} }
} }
} }

60
web-src/src/store/index.js
View File

@ -5,9 +5,9 @@ export default createStore({
state() { state() {
return { return {
albums_sort: 1, albums_sort: 1,
artists_sort: 1,
artist_albums_sort: 1, artist_albums_sort: 1,
artist_tracks_sort: 1, artist_tracks_sort: 1,
artists_sort: 1,
composer_tracks_sort: 1, composer_tracks_sort: 1,
config: { config: {
buildoptions: [], buildoptions: [],
@ -17,6 +17,7 @@ export default createStore({
genre_tracks_sort: 1, genre_tracks_sort: 1,
hide_singles: false, hide_singles: false,
hide_spotify: false, hide_spotify: false,
lastfm: {},
library: { library: {
albums: 0, albums: 0,
artists: 0, artists: 0,
@ -26,7 +27,6 @@ export default createStore({
updated_at: '01', updated_at: '01',
updating: false updating: false
}, },
lastfm: {},
lyrics: { lyrics: {
content: [], content: [],
pane: false pane: false
@ -42,9 +42,9 @@ export default createStore({
item_id: 0, item_id: 0,
item_length_ms: 0, item_length_ms: 0,
item_progress_ms: 0, item_progress_ms: 0,
repeat: 'off',
shuffle: false, shuffle: false,
state: 'stop', state: 'stop',
repeat: 'off',
volume: 0 volume: 0
}, },
queue: { queue: {
@ -79,14 +79,8 @@ export default createStore({
return item === undefined ? {} : item return item === undefined ? {} : item
}, },
settings_webinterface: (state) => { settings_category: (state) => (categoryName) =>
if (state.settings) { state.settings.categories.find((e) => e.name === categoryName),
return state.settings.categories.find(
(elem) => elem.name === 'webinterface'
)
}
return null
},
settings_option_recently_added_limit: (state, getters) => { settings_option_recently_added_limit: (state, getters) => {
if (getters.settings_webinterface) { if (getters.settings_webinterface) {
@ -100,16 +94,14 @@ export default createStore({
return 100 return 100
}, },
settings_option_show_composer_now_playing: (state, getters) => { settings_option: (state) => (categoryName, optionName) => {
if (getters.settings_webinterface) { const category = state.settings.categories.find(
const option = getters.settings_webinterface.options.find( (elem) => elem.name === categoryName
(elem) => elem.name === 'show_composer_now_playing'
) )
if (option) { if (!category) {
return option.value return {}
} }
} return category.options.find((elem) => elem.name === optionName)
return false
}, },
settings_option_show_composer_for_genre: (state, getters) => { settings_option_show_composer_for_genre: (state, getters) => {
@ -124,6 +116,18 @@ export default createStore({
return null return null
}, },
settings_option_show_composer_now_playing: (state, getters) => {
if (getters.settings_webinterface) {
const option = getters.settings_webinterface.options.find(
(elem) => elem.name === 'show_composer_now_playing'
)
if (option) {
return option.value
}
}
return false
},
settings_option_show_filepath_now_playing: (state, getters) => { settings_option_show_filepath_now_playing: (state, getters) => {
if (getters.settings_webinterface) { if (getters.settings_webinterface) {
const option = getters.settings_webinterface.options.find( const option = getters.settings_webinterface.options.find(
@ -136,17 +140,13 @@ export default createStore({
return false return false
}, },
settings_category: (state) => (categoryName) => settings_webinterface: (state) => {
state.settings.categories.find((e) => e.name === categoryName), if (state.settings) {
return state.settings.categories.find(
settings_option: (state) => (categoryName, optionName) => { (elem) => elem.name === 'webinterface'
const category = state.settings.categories.find(
(elem) => elem.name === categoryName
) )
if (!category) {
return {}
} }
return category.options.find((elem) => elem.name === optionName) return null
} }
}, },
@ -278,10 +278,10 @@ export default createStore({
add_notification({ commit, state }, notification) { add_notification({ commit, state }, notification) {
const newNotification = { const newNotification = {
id: state.notifications.next_id++, id: state.notifications.next_id++,
type: notification.type,
text: notification.text, text: notification.text,
timeout: notification.timeout,
topic: notification.topic, topic: notification.topic,
timeout: notification.timeout type: notification.type
} }
commit(types.ADD_NOTIFICATION, newNotification) commit(types.ADD_NOTIFICATION, newNotification)