diff --git a/web-src/src/App.vue b/web-src/src/App.vue index 4d7e4302..c8e4b507 100644 --- a/web-src/src/App.vue +++ b/web-src/src/App.vue @@ -151,21 +151,17 @@ export default { protocol = 'wss://' } - let wsUrl = - protocol + - window.location.hostname + - ':' + + let wsUrl = `${protocol + window.location.hostname}:${ vm.$store.state.config.websocket_port + }` 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 + - ':' + + wsUrl = `${protocol + owntoneUrl.hostname}:${ vm.$store.state.config.websocket_port + }` } const socket = new ReconnectingWebSocket(wsUrl, 'notify', { diff --git a/web-src/src/audio.js b/web-src/src/audio.js index ac131143..5af2824d 100644 --- a/web-src/src/audio.js +++ b/web-src/src/audio.js @@ -40,7 +40,7 @@ export default { playSource(source) { this.stopAudio() this._context.resume().then(() => { - this._audio.src = String(source || '') + '?x=' + Date.now() + this._audio.src = `${String(source || '')}?x=${Date.now()}` this._audio.crossOrigin = 'anonymous' this._audio.load() }) diff --git a/web-src/src/components/CoverArtwork.vue b/web-src/src/components/CoverArtwork.vue index a63ebf96..2466e989 100644 --- a/web-src/src/components/CoverArtwork.vue +++ b/web-src/src/components/CoverArtwork.vue @@ -44,7 +44,7 @@ export default { }, alt_text() { - return this.artist + ' - ' + this.album + return `${this.artist} - ${this.album}` }, caption() { diff --git a/web-src/src/components/ModalDialogComposer.vue b/web-src/src/components/ModalDialogComposer.vue index 748770d7..fee1bc5f 100644 --- a/web-src/src/components/ModalDialogComposer.vue +++ b/web-src/src/components/ModalDialogComposer.vue @@ -78,7 +78,7 @@ export default { play() { this.$emit('close') webapi.player_play_expression( - 'composer is "' + this.composer.name + '" and media_kind is music', + `composer is "${this.composer.name}" and media_kind is music`, false ) }, @@ -86,14 +86,14 @@ export default { queue_add() { this.$emit('close') webapi.queue_expression_add( - 'composer is "' + this.composer.name + '" and media_kind is music' + `composer is "${this.composer.name}" and media_kind is music` ) }, queue_add_next() { this.$emit('close') webapi.queue_expression_add_next( - 'composer is "' + this.composer.name + '" and media_kind is music' + `composer is "${this.composer.name}" and media_kind is music` ) }, diff --git a/web-src/src/components/ModalDialogDirectory.vue b/web-src/src/components/ModalDialogDirectory.vue index 523a6e49..843d0778 100644 --- a/web-src/src/components/ModalDialogDirectory.vue +++ b/web-src/src/components/ModalDialogDirectory.vue @@ -49,7 +49,7 @@ export default { play() { this.$emit('close') webapi.player_play_expression( - 'path starts with "' + this.directory + '" order by path asc', + `path starts with "${this.directory}" order by path asc`, false ) }, @@ -57,14 +57,14 @@ export default { queue_add() { this.$emit('close') webapi.queue_expression_add( - 'path starts with "' + this.directory + '" order by path asc' + `path starts with "${this.directory}" order by path asc` ) }, queue_add_next() { this.$emit('close') webapi.queue_expression_add_next( - 'path starts with "' + this.directory + '" order by path asc' + `path starts with "${this.directory}" order by path asc` ) } } diff --git a/web-src/src/components/NavbarTop.vue b/web-src/src/components/NavbarTop.vue index ae7b9851..5a19c348 100644 --- a/web-src/src/components/NavbarTop.vue +++ b/web-src/src/components/NavbarTop.vue @@ -231,7 +231,7 @@ export default { search_name: { get() { - return 'search-' + this.$store.state.search_source + return `search-${this.$store.state.search_source}` } }, diff --git a/web-src/src/components/ProgressBar.vue b/web-src/src/components/ProgressBar.vue index 2060ffe2..23364d04 100644 --- a/web-src/src/components/ProgressBar.vue +++ b/web-src/src/components/ProgressBar.vue @@ -19,7 +19,7 @@ export default { return 0 }, width_percent() { - return this.width + '%' + return `${this.width}%` } } } diff --git a/web-src/src/lib/SVGRenderer.js b/web-src/src/lib/SVGRenderer.js index 6f7bec18..bd4099b5 100644 --- a/web-src/src/lib/SVGRenderer.js +++ b/web-src/src/lib/SVGRenderer.js @@ -24,46 +24,26 @@ function calc_text_color(background_color) { function createSVG(data) { const svg = - '' + - '' + - '' + - '' + - '' + - ' ' + - ' ' + - ' ' + - data.caption + - '' + - ' ' + - '' + - '' + `` + + `` + + `` + + `` + + `` + + ` ` + + ` ` + + ` ${data.caption}` + + ` ` + + `` + + `` - return 'data:image/svg+xml;charset=UTF-8,' + encodeURIComponent(svg) + return `data:image/svg+xml;charset=UTF-8,${encodeURIComponent(svg)}` } function renderSVG(caption, alt_text, params) { diff --git a/web-src/src/pages/PageComposerAlbums.vue b/web-src/src/pages/PageComposerAlbums.vue index a2c9f8fd..84483490 100644 --- a/web-src/src/pages/PageComposerAlbums.vue +++ b/web-src/src/pages/PageComposerAlbums.vue @@ -105,7 +105,7 @@ export default { play() { webapi.player_play_expression( - 'composer is "' + this.composer.name + '" and media_kind is music', + `composer is "${this.composer.name}" and media_kind is music`, true ) } diff --git a/web-src/src/pages/PageComposerTracks.vue b/web-src/src/pages/PageComposerTracks.vue index adf15ee3..a3207dff 100644 --- a/web-src/src/pages/PageComposerTracks.vue +++ b/web-src/src/pages/PageComposerTracks.vue @@ -130,7 +130,7 @@ export default { computed: { expression() { - return 'composer is "' + this.composer.name + '" and media_kind is music' + return `composer is "${this.composer.name}" and media_kind is music` }, selected_groupby_option_id: { get() { diff --git a/web-src/src/pages/PageFiles.vue b/web-src/src/pages/PageFiles.vue index a123b392..f4e89fe8 100644 --- a/web-src/src/pages/PageFiles.vue +++ b/web-src/src/pages/PageFiles.vue @@ -110,9 +110,7 @@ export default { }, play_expression() { - return ( - 'path starts with "' + this.current_directory + '" order by path asc' - ) + return `path starts with "${this.current_directory}" order by path asc` } }, diff --git a/web-src/src/pages/PageSearchLibrary.vue b/web-src/src/pages/PageSearchLibrary.vue index 5a4fca14..08b3d0d0 100644 --- a/web-src/src/pages/PageSearchLibrary.vue +++ b/web-src/src/pages/PageSearchLibrary.vue @@ -430,12 +430,7 @@ export default { if (query.query.startsWith('query:')) { searchParams.expression = query.query.replace(/^query:/, '').trim() } 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)` } if (query.limit) { @@ -461,12 +456,7 @@ export default { if (query.query.startsWith('query:')) { searchParams.expression = query.query.replace(/^query:/, '').trim() } 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)` } if (query.limit) { diff --git a/web-src/src/webapi/index.js b/web-src/src/webapi/index.js index 17ddc959..4a2fda39 100644 --- a/web-src/src/webapi/index.js +++ b/web-src/src/webapi/index.js @@ -33,10 +33,7 @@ export default { }, settings_update(categoryName, option) { - return axios.put( - './api/settings/' + categoryName + '/' + option.name, - option - ) + return axios.put(`./api/settings/${categoryName}/${option.name}`, option) }, library_stats() { @@ -60,7 +57,7 @@ export default { }, library_count(expression) { - return axios.get('./api/library/count?expression=' + expression) + return axios.get(`./api/library/count?expression=${expression}`) }, queue() { @@ -72,17 +69,15 @@ export default { }, queue_remove(itemId) { - return axios.delete('./api/queue/items/' + itemId) + return axios.delete(`./api/queue/items/${itemId}`) }, queue_move(itemId, newPosition) { - return axios.put( - './api/queue/items/' + itemId + '?new_position=' + newPosition - ) + return axios.put(`./api/queue/items/${itemId}?new_position=${newPosition}`) }, queue_add(uri) { - return axios.post('./api/queue/items/add?uris=' + uri).then((response) => { + return axios.post(`./api/queue/items/add?uris=${uri}`).then((response) => { store.dispatch('add_notification', { text: t('server.appended-tracks', { count: response.data.count }), type: 'info', @@ -98,7 +93,7 @@ export default { position = store.getters.now_playing.position + 1 } return axios - .post('./api/queue/items/add?uris=' + uri + '&position=' + position) + .post(`./api/queue/items/add?uris=${uri}&position=${position}`) .then((response) => { store.dispatch('add_notification', { text: t('server.appended-tracks', { @@ -195,11 +190,11 @@ export default { }, player_playpos(position) { - return axios.put('./api/player/play?position=' + position) + return axios.put(`./api/player/play?position=${position}`) }, player_playid(itemId) { - return axios.put('./api/player/play?item_id=' + itemId) + return axios.put(`./api/player/play?item_id=${itemId}`) }, player_pause() { @@ -220,34 +215,34 @@ export default { player_shuffle(newState) { const shuffle = newState ? 'true' : 'false' - return axios.put('./api/player/shuffle?state=' + shuffle) + return axios.put(`./api/player/shuffle?state=${shuffle}`) }, player_consume(newState) { const consume = newState ? 'true' : 'false' - return axios.put('./api/player/consume?state=' + consume) + return axios.put(`./api/player/consume?state=${consume}`) }, player_repeat(newRepeatMode) { - return axios.put('./api/player/repeat?state=' + newRepeatMode) + return axios.put(`./api/player/repeat?state=${newRepeatMode}`) }, player_volume(volume) { - return axios.put('./api/player/volume?volume=' + volume) + return axios.put(`./api/player/volume?volume=${volume}`) }, player_output_volume(outputId, outputVolume) { return axios.put( - './api/player/volume?volume=' + outputVolume + '&output_id=' + outputId + `./api/player/volume?volume=${outputVolume}&output_id=${outputId}` ) }, player_seek_to_pos(newPosition) { - return axios.put('./api/player/seek?position_ms=' + newPosition) + return axios.put(`./api/player/seek?position_ms=${newPosition}`) }, player_seek(seekMs) { - return axios.put('./api/player/seek?seek_ms=' + seekMs) + return axios.put(`./api/player/seek?seek_ms=${seekMs}`) }, outputs() { @@ -255,11 +250,11 @@ export default { }, output_update(outputId, output) { - return axios.put('./api/outputs/' + outputId, output) + return axios.put(`./api/outputs/${outputId}`, output) }, output_toggle(outputId) { - return axios.put('./api/outputs/' + outputId + '/toggle') + return axios.put(`./api/outputs/${outputId}/toggle`) }, library_artists(media_kind = undefined) { @@ -269,11 +264,11 @@ export default { }, library_artist(artistId) { - return axios.get('./api/library/artists/' + artistId) + return axios.get(`./api/library/artists/${artistId}`) }, library_artist_albums(artistId) { - return axios.get('./api/library/artists/' + artistId + '/albums') + return axios.get(`./api/library/artists/${artistId}/albums`) }, library_albums(media_kind = undefined) { @@ -283,17 +278,17 @@ export default { }, library_album(albumId) { - return axios.get('./api/library/albums/' + albumId) + return axios.get(`./api/library/albums/${albumId}`) }, library_album_tracks(albumId, filter = { limit: -1, offset: 0 }) { - return axios.get('./api/library/albums/' + albumId + '/tracks', { + return axios.get(`./api/library/albums/${albumId}/tracks`, { params: filter }) }, library_album_track_update(albumId, attributes) { - return axios.put('./api/library/albums/' + albumId + '/tracks', undefined, { + return axios.put(`./api/library/albums/${albumId}/tracks`, undefined, { params: attributes }) }, @@ -375,7 +370,7 @@ export default { if (artist) { const artistParams = { type: 'tracks', - expression: 'songartistid is "' + artist + '"' + expression: `songartistid is "${artist}"` } return axios.get('./api/search', { params: artistParams @@ -397,10 +392,7 @@ export default { library_podcast_episodes(albumId) { const episodesParams = { type: 'tracks', - expression: - 'media_kind is podcast and songalbumid is "' + - albumId + - '" ORDER BY date_released DESC' + expression: `media_kind is podcast and songalbumid is "${albumId}" ORDER BY date_released DESC` } return axios.get('./api/search', { params: episodesParams @@ -412,7 +404,7 @@ export default { }, library_playlist_delete(playlistId) { - return axios.delete('./api/library/playlists/' + playlistId, undefined) + return axios.delete(`./api/library/playlists/${playlistId}`, undefined) }, library_playlists() { @@ -420,27 +412,27 @@ export default { }, library_playlist_folder(playlistId = 0) { - return axios.get('./api/library/playlists/' + playlistId + '/playlists') + return axios.get(`./api/library/playlists/${playlistId}/playlists`) }, library_playlist(playlistId) { - return axios.get('./api/library/playlists/' + playlistId) + return axios.get(`./api/library/playlists/${playlistId}`) }, library_playlist_tracks(playlistId) { - return axios.get('./api/library/playlists/' + playlistId + '/tracks') + return axios.get(`./api/library/playlists/${playlistId}/tracks`) }, library_track(trackId) { - return axios.get('./api/library/tracks/' + trackId) + return axios.get(`./api/library/tracks/${trackId}`) }, library_track_playlists(trackId) { - return axios.get('./api/library/tracks/' + trackId + '/playlists') + return axios.get(`./api/library/tracks/${trackId}/playlists`) }, library_track_update(trackId, attributes = {}) { - return axios.put('./api/library/tracks/' + trackId, undefined, { + return axios.put(`./api/library/tracks/${trackId}`, undefined, { params: attributes }) }, @@ -493,9 +485,9 @@ export default { 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 + '?maxwidth=' + maxwidth + '&maxheight=' + maxheight + return `${artworkUrl}?maxwidth=${maxwidth}&maxheight=${maxheight}` } return artworkUrl }