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

Merge pull request #1451 from chme/web/next

Browse Source 
Update web interface
This commit is contained in:
Christian Meffert 2022-04-17 10:46:19 +02:00 committed by GitHub
commit 9c4d246c8b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
77 changed files with 532 additions and 7097 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
htdocs/Makefile.am
View File

@ -24,10 +24,5 @@ htdocsassetsdir = $(datadir)/owntone/htdocs/assets
dist_htdocsassets_DATA = \
assets/index.css \
assets/index.js \
assets/materialdesignicons-webfont.svg \
assets/materialdesignicons-webfont.ttf \
assets/materialdesignicons-webfont.woff2 \
assets/materialdesignicons-webfont.woff \
assets/materialdesignicons-webfont.eot
assets/index.js
endif

2
htdocs/assets/index.css
View File

File diff suppressed because one or more lines are too long

32
htdocs/assets/index.js
View File

File diff suppressed because one or more lines are too long

BIN
htdocs/assets/materialdesignicons-webfont.eot
View File

Binary file not shown.

6741
htdocs/assets/materialdesignicons-webfont.svg
View File

File diff suppressed because one or more lines are too long
Side by Side

Before

Width:  |  Height:  |  Size: 2.3 MiB

BIN
htdocs/assets/materialdesignicons-webfont.ttf
View File

Binary file not shown.

BIN
htdocs/assets/materialdesignicons-webfont.woff
View File

Binary file not shown.

BIN
htdocs/assets/materialdesignicons-webfont.woff2
View File

Binary file not shown.

40
web-src/package-lock.json generated
View File

@ -9,13 +9,14 @@
"version": "2.0.0",
"dependencies": {
"@aacassandra/vue3-progressbar": "^1.0.3",
"@mdi/js": "^6.6.96",
"@ts-pro/vue-eternal-loading": "^1.2.0",
"@vueform/slider": "github:chme/slider#faff83ed8a77f2cdbcb7252505ef734301efd139",
"axios": "^0.26.1",
"bulma": "^0.9.3",
"bulma-switch": "^2.0.4",
"luxon": "^2.3.1",
"mdi": "^2.2.43",
"mdi-vue": "^3.0.12",
"reconnectingwebsocket": "^1.0.0",
"spotify-web-api-js": "^1.5.2",
"string-to-color": "^2.2.2",
@ -97,6 +98,11 @@
"integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==",
"dev": true
},
"node_modules/@mdi/js": {
"version": "6.6.96",
"resolved": "https://registry.npmjs.org/@mdi/js/-/js-6.6.96.tgz",
"integrity": "sha512-ke9PN5DjPCOlMfhioxeZYADz8Yiz6v47W0IYRza01SSJD7y1EwESVpwFnnFUso+eCoWtE1CO9cTIvQF6sEreuA=="
},
"node_modules/@ts-pro/vue-eternal-loading": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/@ts-pro/vue-eternal-loading/-/vue-eternal-loading-1.2.0.tgz",
@ -1485,11 +1491,17 @@
"sourcemap-codec": "^1.4.8"
}
},
"node_modules/mdi": {
"version": "2.2.43",
"resolved": "https://registry.npmjs.org/mdi/-/mdi-2.2.43.tgz",
"integrity": "sha512-g3m6z4303qieltUM20JL2gdsJZvoVzIzO74qa2XxZ2kg9JPwrPEAgooVhRDHZi1vvRh0gB8Dg+c9XqNdz4jcIg==",
"deprecated": "The mdi package was renamed to @mdi/font after v2.2.43. Please rename in your package.json for future updates."
"node_modules/mdi-vue": {
"version": "3.0.12",
"resolved": "https://registry.npmjs.org/mdi-vue/-/mdi-vue-3.0.12.tgz",
"integrity": "sha512-rc4rq99Hafa7v1u3KyfzGRr13v7/AzBvNrcXdhcgPQvj8wYafimbLGfNvQcGiAYZMow40KpXlZuG07132XccKw==",
"dependencies": {
"@mdi/js": "*"
},
"peerDependencies": {
"@mdi/js": "*",
"vue": "*"
}
},
"node_modules/minimatch": {
"version": "3.1.2",
@ -2182,6 +2194,11 @@
"integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==",
"dev": true
},
"@mdi/js": {
"version": "6.6.96",
"resolved": "https://registry.npmjs.org/@mdi/js/-/js-6.6.96.tgz",
"integrity": "sha512-ke9PN5DjPCOlMfhioxeZYADz8Yiz6v47W0IYRza01SSJD7y1EwESVpwFnnFUso+eCoWtE1CO9cTIvQF6sEreuA=="
},
"@ts-pro/vue-eternal-loading": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/@ts-pro/vue-eternal-loading/-/vue-eternal-loading-1.2.0.tgz",
@ -3145,10 +3162,13 @@
"sourcemap-codec": "^1.4.8"
}
},
"mdi": {
"version": "2.2.43",
"resolved": "https://registry.npmjs.org/mdi/-/mdi-2.2.43.tgz",
"integrity": "sha512-g3m6z4303qieltUM20JL2gdsJZvoVzIzO74qa2XxZ2kg9JPwrPEAgooVhRDHZi1vvRh0gB8Dg+c9XqNdz4jcIg=="
"mdi-vue": {
"version": "3.0.12",
"resolved": "https://registry.npmjs.org/mdi-vue/-/mdi-vue-3.0.12.tgz",
"integrity": "sha512-rc4rq99Hafa7v1u3KyfzGRr13v7/AzBvNrcXdhcgPQvj8wYafimbLGfNvQcGiAYZMow40KpXlZuG07132XccKw==",
"requires": {
"@mdi/js": "*"
}
},
"minimatch": {
"version": "3.1.2",

3
web-src/package.json
View File

@ -11,13 +11,14 @@
},
"dependencies": {
"@aacassandra/vue3-progressbar": "^1.0.3",
"@mdi/js": "^6.6.96",
"@ts-pro/vue-eternal-loading": "^1.2.0",
"@vueform/slider": "github:chme/slider#faff83ed8a77f2cdbcb7252505ef734301efd139",
"axios": "^0.26.1",
"bulma": "^0.9.3",
"bulma-switch": "^2.0.4",
"luxon": "^2.3.1",
"mdi": "^2.2.43",
"mdi-vue": "^3.0.12",
"reconnectingwebsocket": "^1.0.0",
"spotify-web-api-js": "^1.5.2",
"string-to-color": "^2.2.2",

4
web-src/src/components/DropdownMenu.vue
View File

@ -12,8 +12,8 @@
@click="is_active = !is_active"
>
<span>{{ modelValue }}</span>
<span class="icon is-small">
<i class="mdi mdi-chevron-down" aria-hidden="true" />
<span class="icon">
<mdicon name="chevron-down" size="16" />
</span>
</button>
</div>

2
web-src/src/components/ListAlbums.vue
View File

@ -41,7 +41,7 @@
<div class="media-right" style="padding-top: 0.7rem">
<a @click.prevent.stop="open_dialog(album.item)">
<span class="icon has-text-dark"
><i class="mdi mdi-dots-vertical mdi-18px"
><mdicon name="dots-vertical" size="16"
/></span>
</a>
</div>

2
web-src/src/components/ListArtists.vue
View File

@ -22,7 +22,7 @@
<div class="media-right">
<a @click.prevent.stop="open_dialog(artist.item)">
<span class="icon has-text-dark"
><i class="mdi mdi-dots-vertical mdi-18px"
><mdicon name="dots-vertical" size="16"
/></span>
</a>
</div>

2
web-src/src/components/ListComposers.vue
View File

@ -22,7 +22,7 @@
<div class="media-right">
<a @click.prevent.stop="open_dialog(composer.item)">
<span class="icon has-text-dark"
><i class="mdi mdi-dots-vertical mdi-18px"
><mdicon name="dots-vertical" size="16"
/></span>
</a>
</div>

6
web-src/src/components/ListDirectories.vue
View File

@ -6,7 +6,7 @@
>
<figure class="media-left fd-has-action">
<span class="icon">
<i class="mdi mdi-subdirectory-arrow-left" />
<mdicon name="subdirectory-arrow-left" size="16" />
</span>
</figure>
<div class="media-content fd-has-action is-clipped">
@ -20,7 +20,7 @@
<div class="media" @click="open_directory(directory)">
<figure class="media-left fd-has-action">
<span class="icon">
<i class="mdi mdi-folder" />
<mdicon name="folder" size="16" />
</span>
</figure>
<div class="media-content fd-has-action is-clipped">
@ -34,7 +34,7 @@
<div class="media-right">
<a @click.prevent.stop="open_dialog(directory)">
<span class="icon has-text-dark"
><i class="mdi mdi-dots-vertical mdi-18px"
><mdicon name="dots-vertical" size="16"
/></span>
</a>
</div>

2
web-src/src/components/ListGenres.vue
View File

@ -18,7 +18,7 @@
<div class="media-right">
<a @click.prevent.stop="open_dialog(genre.item)">
<span class="icon has-text-dark"
><i class="mdi mdi-dots-vertical mdi-18px"
><mdicon name="dots-vertical" size="16"
/></span>
</a>
</div>

2
web-src/src/components/ListItemQueueItem.vue
View File

@ -2,7 +2,7 @@
<div v-if="is_next || !show_only_next_items" class="media">
<div v-if="edit_mode" class="media-left">
<span class="icon has-text-grey fd-is-movable handle"
><i class="mdi mdi-drag-horizontal mdi-18px"
><mdicon name="drag-horizontal" size="16"
/></span>
</div>

29
web-src/src/components/ListPlaylists.vue
View File

@ -1,32 +1,25 @@
<template>
<div
v-for="playlist in playlists"
:key="playlist.id"
:key="playlist.itemId"
class="media"
:playlist="playlist"
@click="open_playlist(playlist)"
@click="open_playlist(playlist.item)"
>
<figure class="media-left fd-has-action">
<span class="icon">
<i
class="mdi"
:class="{
'mdi-library-music': playlist.type !== 'folder',
'mdi-rss': playlist.type === 'rss',
'mdi-folder': playlist.type === 'folder'
}"
/>
<mdicon :name="icon_name(playlist.item)" size="16" />
</span>
</figure>
<div class="media-content fd-has-action is-clipped">
<h1 class="title is-6">
{{ playlist.name }}
{{ playlist.item.name }}
</h1>
</div>
<div class="media-right">
<a @click.prevent.stop="open_dialog(playlist)">
<a @click.prevent.stop="open_dialog(playlist.item)">
<span class="icon has-text-dark"
><i class="mdi mdi-dots-vertical mdi-18px"
><mdicon name="dots-vertical" size="16"
/></span>
</a>
</div>
@ -68,6 +61,16 @@ export default {
open_dialog: function (playlist) {
this.selected_playlist = playlist
this.show_details_modal = true
},
icon_name: function (playlist) {
if (playlist.type === 'folder') {
return 'folder'
} else if (playlist.type === 'rss') {
return 'rss'
} else {
return 'music-box-multiple'
}
}
}
}

4
web-src/src/components/ListTracks.vue
View File

@ -9,7 +9,7 @@
>
<figure v-if="show_icon" class="media-left fd-has-action">
<span class="icon">
<i class="mdi mdi-file-outline" />
<mdicon name="file-outline" size="16" />
</span>
</figure>
<div class="media-content fd-has-action is-clipped">
@ -37,7 +37,7 @@
<div class="media-right">
<a @click.prevent.stop="open_dialog(track)">
<span class="icon has-text-dark"
><i class="mdi mdi-dots-vertical mdi-18px"
><mdicon name="dots-vertical" size="16"
/></span>
</a>
</div>

6
web-src/src/components/ModalDialog.vue
View File

@ -13,7 +13,7 @@
</div>
<footer class="card-footer">
<a class="card-footer-item has-text-dark" @click="$emit('close')">
<span class="icon"><i class="mdi mdi-cancel" /></span>
<span class="icon"><mdicon name="cancel" size="16" /></span>
<span class="is-size-7">{{
close_action ? close_action : 'Cancel'
}}</span>
@ -23,7 +23,7 @@
class="card-footer-item has-background-danger has-text-white has-text-weight-bold"
@click="$emit('delete')"
>
<span class="icon"><i class="mdi mdi-delete" /></span>
<span class="icon"><mdicon name="delete" size="16" /></span>
<span class="is-size-7">{{ delete_action }}</span>
</a>
<a
@ -31,7 +31,7 @@
class="card-footer-item has-background-info has-text-white has-text-weight-bold"
@click="$emit('ok')"
>
<span class="icon"><i class="mdi mdi-check" /></span>
<span class="icon"><mdicon name="check" size="16" /></span>
<span class="is-size-7">{{ ok_action }}</span>
</a>
</footer>

10
web-src/src/components/ModalDialogAddRss.vue
View File

@ -19,7 +19,7 @@
:disabled="loading"
/>
<span class="icon is-left">
<i class="mdi mdi-rss" />
<mdicon name="rss" size="16" />
</span>
</p>
<p class="help">
@ -31,7 +31,7 @@
</div>
<footer v-if="loading" class="card-footer">
<a class="card-footer-item button is-loading">
<span class="icon"><i class="mdi mdi-web" /></span>
<span class="icon"><mdicon name="web" size="16" /></span>
<span class="is-size-7">Processing ...</span>
</a>
</footer>
@ -40,14 +40,16 @@
class="card-footer-item has-text-danger"
@click="$emit('close')"
>
<span class="icon"><i class="mdi mdi-cancel" /></span>
<span class="icon"><mdicon name="cancel" size="16" /></span>
<span class="is-size-7">Cancel</span>
</a>
<a
class="card-footer-item has-background-info has-text-white has-text-weight-bold"
@click="add_stream"
>
<span class="icon"><i class="mdi mdi-playlist-plus" /></span>
<span class="icon"
><mdicon name="playlist-plus" size="16"
/></span>
<span class="is-size-7">Add</span>
</a>
</footer>

12
web-src/src/components/ModalDialogAddUrlStream.vue
View File

@ -19,7 +19,7 @@
:disabled="loading"
/>
<span class="icon is-left">
<i class="mdi mdi-web" />
<mdicon name="web" size="16" />
</span>
</p>
</div>
@ -27,7 +27,7 @@
</div>
<footer v-if="loading" class="card-footer">
<a class="card-footer-item has-text-dark">
<span class="icon"><i class="mdi mdi-web" /></span>
<span class="icon"><mdicon name="web" size="16" /></span>
<span class="is-size-7">Loading ...</span>
</a>
</footer>
@ -36,18 +36,20 @@
class="card-footer-item has-text-danger"
@click="$emit('close')"
>
<span class="icon"><i class="mdi mdi-cancel" /></span>
<span class="icon"><mdicon name="cancel" size="16" /></span>
<span class="is-size-7">Cancel</span>
</a>
<a class="card-footer-item has-text-dark" @click="add_stream">
<span class="icon"><i class="mdi mdi-playlist-plus" /></span>
<span class="icon"
><mdicon name="playlist-plus" size="16"
/></span>
<span class="is-size-7">Add</span>
</a>
<a
class="card-footer-item has-background-info has-text-white has-text-weight-bold"
@click="play"
>
<span class="icon"><i class="mdi mdi-play" /></span>
<span class="icon"><mdicon name="play" size="16" /></span>
<span class="is-size-7">Play</span>
</a>
</footer>

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

@ -68,15 +68,19 @@
</div>
<footer class="card-footer">
<a class="card-footer-item has-text-dark" @click="queue_add">
<span class="icon"><i class="mdi mdi-playlist-plus" /></span>
<span class="icon"
><mdicon name="playlist-plus" size="16"
/></span>
<span class="is-size-7">Add</span>
</a>
<a class="card-footer-item has-text-dark" @click="queue_add_next">
<span class="icon"><i class="mdi mdi-playlist-play" /></span>
<span class="icon"
><mdicon name="playlist-play" size="16"
/></span>
<span class="is-size-7">Add Next</span>
</a>
<a class="card-footer-item has-text-dark" @click="play">
<span class="icon"><i class="mdi mdi-play" /></span>
<span class="icon"><mdicon name="play" size="16" /></span>
<span class="is-size-7">Play</span>
</a>
</footer>

10
web-src/src/components/ModalDialogArtist.vue
View File

@ -34,15 +34,19 @@
</div>
<footer class="card-footer">
<a class="card-footer-item has-text-dark" @click="queue_add">
<span class="icon"><i class="mdi mdi-playlist-plus" /></span>
<span class="icon"
><mdicon name="playlist-plus" size="16"
/></span>
<span class="is-size-7">Add</span>
</a>
<a class="card-footer-item has-text-dark" @click="queue_add_next">
<span class="icon"><i class="mdi mdi-playlist-play" /></span>
<span class="icon"
><mdicon name="playlist-play" size="16"
/></span>
<span class="is-size-7">Add Next</span>
</a>
<a class="card-footer-item has-text-dark" @click="play">
<span class="icon"><i class="mdi mdi-play" /></span>
<span class="icon"><mdicon name="play" size="16" /></span>
<span class="is-size-7">Play</span>
</a>
</footer>

10
web-src/src/components/ModalDialogComposer.vue
View File

@ -32,15 +32,19 @@
</div>
<footer class="card-footer">
<a class="card-footer-item has-text-dark" @click="queue_add">
<span class="icon"><i class="mdi mdi-playlist-plus" /></span>
<span class="icon"
><mdicon name="playlist-plus" size="16"
/></span>
<span class="is-size-7">Add</span>
</a>
<a class="card-footer-item has-text-dark" @click="queue_add_next">
<span class="icon"><i class="mdi mdi-playlist-play" /></span>
<span class="icon"
><mdicon name="playlist-play" size="16"
/></span>
<span class="is-size-7">Add Next</span>
</a>
<a class="card-footer-item has-text-dark" @click="play">
<span class="icon"><i class="mdi mdi-play" /></span>
<span class="icon"><mdicon name="play" size="16" /></span>
<span class="is-size-7">Play</span>
</a>
</footer>

10
web-src/src/components/ModalDialogDirectory.vue
View File

@ -12,15 +12,19 @@
</div>
<footer class="card-footer">
<a class="card-footer-item has-text-dark" @click="queue_add">
<span class="icon"><i class="mdi mdi-playlist-plus" /></span>
<span class="icon"
><mdicon name="playlist-plus" size="16"
/></span>
<span class="is-size-7">Add</span>
</a>
<a class="card-footer-item has-text-dark" @click="queue_add_next">
<span class="icon"><i class="mdi mdi-playlist-play" /></span>
<span class="icon"
><mdicon name="playlist-play" size="16"
/></span>
<span class="is-size-7">Add Next</span>
</a>
<a class="card-footer-item has-text-dark" @click="play">
<span class="icon"><i class="mdi mdi-play" /></span>
<span class="icon"><mdicon name="play" size="16" /></span>
<span class="is-size-7">Play</span>
</a>
</footer>

10
web-src/src/components/ModalDialogGenre.vue
View File

@ -30,15 +30,19 @@
</div>
<footer class="card-footer">
<a class="card-footer-item has-text-dark" @click="queue_add">
<span class="icon"><i class="mdi mdi-playlist-plus" /></span>
<span class="icon"
><mdicon name="playlist-plus" size="16"
/></span>
<span class="is-size-7">Add</span>
</a>
<a class="card-footer-item has-text-dark" @click="queue_add_next">
<span class="icon"><i class="mdi mdi-playlist-play" /></span>
<span class="icon"
><mdicon name="playlist-play" size="16"
/></span>
<span class="is-size-7">Add Next</span>
</a>
<a class="card-footer-item has-text-dark" @click="play">
<span class="icon"><i class="mdi mdi-play" /></span>
<span class="icon"><mdicon name="play" size="16" /></span>
<span class="is-size-7">Play</span>
</a>
</footer>

14
web-src/src/components/ModalDialogPlaylist.vue
View File

@ -20,19 +20,27 @@
<span class="heading">Type</span>
<span class="title is-6">{{ playlist.type }}</span>
</p>
<p v-if="!playlist.folder">
<span class="heading">Track count</span>
<span class="title is-6">{{ playlist.item_count }}</span>
</p>
</div>
</div>
<footer v-if="!playlist.folder" class="card-footer">
<a class="card-footer-item has-text-dark" @click="queue_add">
<span class="icon"><i class="mdi mdi-playlist-plus" /></span>
<span class="icon"
><mdicon name="playlist-plus" size="16"
/></span>
<span class="is-size-7">Add</span>
</a>
<a class="card-footer-item has-text-dark" @click="queue_add_next">
<span class="icon"><i class="mdi mdi-playlist-play" /></span>
<span class="icon"
><mdicon name="playlist-play" size="16"
/></span>
<span class="is-size-7">Add Next</span>
</a>
<a class="card-footer-item has-text-dark" @click="play">
<span class="icon"><i class="mdi mdi-play" /></span>
<span class="icon"><mdicon name="play" size="16" /></span>
<span class="is-size-7">Play</span>
</a>
</footer>

10
web-src/src/components/ModalDialogPlaylistSave.vue
View File

@ -19,7 +19,7 @@
:disabled="loading"
/>
<span class="icon is-left">
<i class="mdi mdi-file-music" />
<mdicon name="file-music" size="16" />
</span>
</p>
</div>
@ -27,7 +27,7 @@
</div>
<footer v-if="loading" class="card-footer">
<a class="card-footer-item has-text-dark">
<span class="icon"><i class="mdi mdi-web" /></span>
<span class="icon"><mdicon name="web" size="16" /></span>
<span class="is-size-7">Saving ...</span>
</a>
</footer>
@ -36,14 +36,16 @@
class="card-footer-item has-text-danger"
@click="$emit('close')"
>
<span class="icon"><i class="mdi mdi-cancel" /></span>
<span class="icon"><mdicon name="cancel" size="16" /></span>
<span class="is-size-7">Cancel</span>
</a>
<a
class="card-footer-item has-background-info has-text-white has-text-weight-bold"
@click="save"
>
<span class="icon"><i class="mdi mdi-content-save" /></span>
<span class="icon"
><mdicon name="content-save" size="16"
/></span>
<span class="is-size-7">Save</span>
</a>
</footer>

4
web-src/src/components/ModalDialogQueueItem.vue
View File

@ -92,11 +92,11 @@
</div>
<footer class="card-footer">
<a class="card-footer-item has-text-dark" @click="remove">
<span class="icon"><i class="mdi mdi-delete" /></span>
<span class="icon"><mdicon name="delete" size="16" /></span>
<span class="is-size-7">Remove</span>
</a>
<a class="card-footer-item has-text-dark" @click="play">
<span class="icon"><i class="mdi mdi-play" /></span>
<span class="icon"><mdicon name="play" size="16" /></span>
<span class="is-size-7">Play</span>
</a>
</footer>

4
web-src/src/components/ModalDialogRemotePairing.vue
View File

@ -29,14 +29,14 @@
class="card-footer-item has-text-danger"
@click="$emit('close')"
>
<span class="icon"><i class="mdi mdi-cancel" /></span>
<span class="icon"><mdicon name="cancel" size="16" /></span>
<span class="is-size-7">Cancel</span>
</a>
<a
class="card-footer-item has-background-info has-text-white has-text-weight-bold"
@click="kickoff_pairing"
>
<span class="icon"><i class="mdi mdi-cellphone-iphone" /></span>
<span class="icon"><mdicon name="cellphone" size="16" /></span>
<span class="is-size-7">Pair Remote</span>
</a>
</footer>

10
web-src/src/components/ModalDialogTrack.vue
View File

@ -124,15 +124,19 @@
</div>
<footer class="card-footer">
<a class="card-footer-item has-text-dark" @click="queue_add">
<span class="icon"><i class="mdi mdi-playlist-plus" /></span>
<span class="icon"
><mdicon name="playlist-plus" size="16"
/></span>
<span class="is-size-7">Add</span>
</a>
<a class="card-footer-item has-text-dark" @click="queue_add_next">
<span class="icon"><i class="mdi mdi-playlist-play" /></span>
<span class="icon"
><mdicon name="playlist-play" size="16"
/></span>
<span class="is-size-7">Add Next</span>
</a>
<a class="card-footer-item has-text-dark" @click="play_track">
<span class="icon"><i class="mdi mdi-play" /></span>
<span class="icon"><mdicon name="play" size="16" /></span>
<span class="is-size-7">Play</span>
</a>
</footer>

62
web-src/src/components/NavbarBottom.vue
View File

@ -12,7 +12,7 @@
<div class="navbar-brand fd-expanded">
<!-- Link to queue -->
<navbar-item-link to="/" exact>
<span class="icon"><i class="mdi mdi-24px mdi-playlist-play" /></span>
<span class="icon"><mdicon name="playlist-play" size="24" /></span>
</navbar-item-link>
<!-- Now playing artist/title (not visible on "now playing" page) -->
@ -39,31 +39,31 @@
<player-button-previous
v-if="is_now_playing_page"
class="navbar-item fd-margin-left-auto"
icon_style="mdi-24px"
:icon_size="24"
/>
<player-button-seek-back
v-if="is_now_playing_page"
seek_ms="10000"
:seek_ms="10000"
class="navbar-item"
icon_style="mdi-24px"
:icon_size="24"
/>
<!-- Play/pause -->
<player-button-play-pause
class="navbar-item"
icon_style="mdi-36px"
:icon_size="36"
show_disabled_message
/>
<player-button-seek-forward
v-if="is_now_playing_page"
seek_ms="30000"
:seek_ms="30000"
class="navbar-item"
icon_style="mdi-24px"
:icon_size="24"
/>
<!-- Skip next (not visible on "now playing" page) -->
<player-button-next
v-if="is_now_playing_page"
class="navbar-item"
icon_style="mdi-24px"
:icon_size="24"
/>
<!-- Player menu button (only visible on mobile and tablet) -->
@ -72,12 +72,9 @@
@click="show_player_menu = !show_player_menu"
>
<span class="icon"
><i
class="mdi mdi-18px"
:class="{
'mdi-chevron-up': !show_player_menu,
'mdi-chevron-down': show_player_menu
}"
><mdicon
:name="show_player_menu ? 'chevron-down' : 'chevron-up'"
size="18"
/></span>
</a>
@ -91,12 +88,9 @@
@click="show_player_menu = !show_player_menu"
>
<span class="icon"
><i
class="mdi mdi-18px"
:class="{
'mdi-chevron-up': !show_player_menu,
'mdi-chevron-down': show_player_menu
}"
><mdicon
:name="show_player_menu ? 'chevron-down' : 'chevron-up'"
size="18"
/></span>
</a>
@ -114,12 +108,9 @@
@click="toggle_mute_volume"
>
<span class="icon"
><i
class="mdi mdi-18px"
:class="{
'mdi-volume-off': player.volume <= 0,
'mdi-volume-high': player.volume > 0
}"
><mdicon
:name="player.volume > 0 ? 'volume-high' : 'volume-off'"
size="18"
/></span>
</a>
</div>
@ -173,7 +164,7 @@
'is-loading': loading
}"
@click="togglePlay"
><i class="mdi mdi-18px mdi-radio-tower" /></span
><mdicon name="radio-tower" size="18" /></span
></a>
</div>
<div class="level-item fd-expanded">
@ -239,9 +230,9 @@
<!-- Repeat/shuffle/consume -->
<div class="navbar-item">
<div class="buttons is-centered">
<player-button-repeat class="button" icon_style="mdi-18px" />
<player-button-shuffle class="button" icon_style="mdi-18px" />
<player-button-consume class="button" icon_style="mdi-18px" />
<player-button-repeat class="button" :icon_size="18" />
<player-button-shuffle class="button" :icon_size="18" />
<player-button-consume class="button" :icon_size="18" />
</div>
</div>
@ -254,12 +245,9 @@
<div class="level-item" style="flex-grow: 0">
<a class="button is-white is-small" @click="toggle_mute_volume">
<span class="icon"
><i
class="mdi mdi-18px"
:class="{
'mdi-volume-off': player.volume <= 0,
'mdi-volume-high': player.volume > 0
}"
><mdicon
:name="player.volume > 0 ? 'volume-high' : 'volume-off'"
size="18"
/></span>
</a>
</div>
@ -313,7 +301,7 @@
'is-loading': loading
}"
@click="togglePlay"
><i class="mdi mdi-18px mdi-radio-tower" />
><mdicon name="radio-tower" size="16" />
</span>
</a>
</div>

14
web-src/src/components/NavbarItemOutput.vue
View File

@ -9,11 +9,7 @@
:class="{ 'has-text-grey-light': !output.selected }"
@click="set_enabled"
>
<i
class="mdi mdi-18px"
:class="type_class"
:title="output.type"
/>
<mdicon :name="type_class" size="18" :title="output.type" />
</span>
</a>
</div>
@ -68,13 +64,13 @@ export default {
computed: {
type_class() {
if (this.output.type.startsWith('AirPlay')) {
return 'mdi-airplay'
return 'cast-variant'
} else if (this.output.type === 'Chromecast') {
return 'mdi-cast'
return 'cast'
} else if (this.output.type === 'fifo') {
return 'mdi-pipe'
return 'pipe'
} else {
return 'mdi-server'
return 'server'
}
},

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

@ -7,25 +7,25 @@
>
<div class="navbar-brand">
<navbar-item-link v-if="is_visible_playlists" to="/playlists">
<span class="icon"><i class="mdi mdi-library-music" /></span>
<span class="icon"><mdicon name="music-box-multiple" size="16" /></span>
</navbar-item-link>
<navbar-item-link v-if="is_visible_music" to="/music">
<span class="icon"><i class="mdi mdi-music" /></span>
<span class="icon"><mdicon name="music" size="16" /></span>
</navbar-item-link>
<navbar-item-link v-if="is_visible_podcasts" to="/podcasts">
<span class="icon"><i class="mdi mdi-microphone" /></span>
<span class="icon"><mdicon name="microphone" size="16" /></span>
</navbar-item-link>
<navbar-item-link v-if="is_visible_audiobooks" to="/audiobooks">
<span class="icon"><i class="mdi mdi-book-open-variant" /></span>
<span class="icon"><mdicon name="book-open-variant" size="16" /></span>
</navbar-item-link>
<navbar-item-link v-if="is_visible_radio" to="/radio">
<span class="icon"><i class="mdi mdi-radio" /></span>
<span class="icon"><mdicon name="radio" size="16" /></span>
</navbar-item-link>
<navbar-item-link v-if="is_visible_files" to="/files">
<span class="icon"><i class="mdi mdi-folder-open" /></span>
<span class="icon"><mdicon name="folder-open" size="16" /></span>
</navbar-item-link>
<navbar-item-link v-if="is_visible_search" to="/search">
<span class="icon"><i class="mdi mdi-magnify" /></span>
<span class="icon"><mdicon name="magnify" size="16" /></span>
</navbar-item-link>
<div
@ -51,18 +51,20 @@
>
<a class="navbar-link is-arrowless">
<span class="icon is-hidden-touch"
><i class="mdi mdi-24px mdi-menu"
><mdicon name="menu" size="24"
/></span>
<span class="is-hidden-desktop has-text-weight-bold">OwnTone</span>
</a>
<div class="navbar-dropdown is-right">
<navbar-item-link to="/playlists">
<span class="icon"><i class="mdi mdi-library-music" /></span>
<span class="icon"
><mdicon name="music-box-multiple" size="16"
/></span>
<b>Playlists</b>
</navbar-item-link>
<navbar-item-link to="/music" exact>
<span class="icon"><i class="mdi mdi-music" /></span>
<span class="icon"><mdicon name="music" size="16" /></span>
<b>Music</b>
</navbar-item-link>
<navbar-item-link to="/music/artists">
@ -78,23 +80,25 @@
<span class="fd-navbar-item-level2">Spotify</span>
</navbar-item-link>
<navbar-item-link to="/podcasts">
<span class="icon"><i class="mdi mdi-microphone" /></span>
<span class="icon"><mdicon name="microphone" size="16" /></span>
<b>Podcasts</b>
</navbar-item-link>
<navbar-item-link to="/audiobooks">
<span class="icon"><i class="mdi mdi-book-open-variant" /></span>
<span class="icon"
><mdicon name="book-open-variant" size="16"
/></span>
<b>Audiobooks</b>
</navbar-item-link>
<navbar-item-link to="/radio">
<span class="icon"><i class="mdi mdi-radio" /></span>
<span class="icon"><mdicon name="radio" size="16" /></span>
<b>Radio</b>
</navbar-item-link>
<navbar-item-link to="/files">
<span class="icon"><i class="mdi mdi-folder-open" /></span>
<span class="icon"><mdicon name="folder-open" size="16" /></span>
<b>Files</b>
</navbar-item-link>
<navbar-item-link to="/search">
<span class="icon"><i class="mdi mdi-magnify" /></span>
<span class="icon"><mdicon name="magnify" size="16" /></span>
<b>Search</b>
</navbar-item-link>
<hr class="fd-navbar-divider" />

7
web-src/src/components/PlayerButtonConsume.vue
View File

@ -1,6 +1,6 @@
<template>
<a :class="{ 'is-warning': is_consume }" @click="toggle_consume_mode">
<span class="icon"><i class="mdi mdi-fire" :class="icon_style" /></span>
<span class="icon"><mdicon name="fire" :size="icon_size" /></span>
</a>
</template>
@ -11,7 +11,10 @@ export default {
name: 'PlayerButtonConsume',
props: {
icon_style: String
icon_size: {
type: Number,
default: 16
}
},
computed: {

9
web-src/src/components/PlayerButtonNext.vue
View File

@ -1,8 +1,6 @@
<template>
<a :disabled="disabled" @click="play_next">
<span class="icon"
><i class="mdi mdi-skip-forward" :class="icon_style"
/></span>
<span class="icon"><mdicon name="skip-forward" :size="icon_size" /></span>
</a>
</template>
@ -13,7 +11,10 @@ export default {
name: 'PlayerButtonNext',
props: {
icon_style: String
icon_size: {
type: Number,
default: 16
}
},
computed: {

27
web-src/src/components/PlayerButtonPlayPause.vue
View File

@ -1,17 +1,6 @@
<template>
<a :disabled="disabled" @click="toggle_play_pause">
<span class="icon"
><i
class="mdi"
:class="[
icon_style,
{
'mdi-play': !is_playing,
'mdi-pause': is_playing && is_pause_allowed,
'mdi-stop': is_playing && !is_pause_allowed
}
]"
/></span>
<span class="icon"><mdicon :name="icon_name" :size="icon_size" /></span>
</a>
</template>
@ -22,7 +11,10 @@ export default {
name: 'PlayerButtonPlayPause',
props: {
icon_style: String,
icon_size: {
type: Number,
default: 16
},
show_disabled_message: Boolean
},
@ -40,6 +32,15 @@ export default {
disabled() {
return !this.$store.state.queue || this.$store.state.queue.count <= 0
},
icon_name() {
if (!this.is_playing) {
return 'play'
} else if (this.is_pause_allowed) {
return 'pause'
}
return 'stop'
}
},

9
web-src/src/components/PlayerButtonPrevious.vue
View File

@ -1,8 +1,6 @@
<template>
<a :disabled="disabled" @click="play_previous">
<span class="icon"
><i class="mdi mdi-skip-backward" :class="icon_style"
/></span>
<span class="icon"><mdicon name="skip-backward" :size="icon_size" /></span>
</a>
</template>
@ -13,7 +11,10 @@ export default {
name: 'PlayerButtonPrevious',
props: {
icon_style: String
icon_size: {
type: Number,
default: 16
}
},
computed: {

26
web-src/src/components/PlayerButtonRepeat.vue
View File

@ -1,17 +1,6 @@
<template>
<a :class="{ 'is-warning': !is_repeat_off }" @click="toggle_repeat_mode">
<span class="icon"
><i
class="mdi"
:class="[
icon_style,
{
'mdi-repeat': is_repeat_all,
'mdi-repeat-once': is_repeat_single,
'mdi-repeat-off': is_repeat_off
}
]"
/></span>
<span class="icon"><mdicon :name="icon_name" :size="icon_size" /></span>
</a>
</template>
@ -22,7 +11,10 @@ export default {
name: 'PlayerButtonRepeat',
props: {
icon_style: String
icon_size: {
type: Number,
default: 16
}
},
computed: {
@ -34,6 +26,14 @@ export default {
},
is_repeat_off() {
return !this.is_repeat_all && !this.is_repeat_single
},
icon_name() {
if (this.is_repeat_all) {
return 'repeat'
} else if (this.is_repeat_single) {
return 'repeat-once'
}
return 'repeat-off'
}
},

10
web-src/src/components/PlayerButtonSeekBack.vue
View File

@ -1,6 +1,6 @@
<template>
<a v-if="visible" :disabled="disabled" @click="seek">
<span class="icon"><i class="mdi mdi-rewind" :class="icon_style" /></span>
<span class="icon"><mdicon name="rewind" :size="icon_size" /></span>
</a>
</template>
@ -9,7 +9,13 @@ import webapi from '@/webapi'
export default {
name: 'PlayerButtonSeekBack',
props: ['seek_ms', 'icon_style'],
props: {
seek_ms: Number,
icon_size: {
type: Number,
default: 16
}
},
computed: {
now_playing() {

12
web-src/src/components/PlayerButtonSeekForward.vue
View File

@ -1,8 +1,6 @@
<template>
<a v-if="visible" :disabled="disabled" @click="seek">
<span class="icon"
><i class="mdi mdi-fast-forward" :class="icon_style"
/></span>
<span class="icon"><mdicon name="fast-forward" :size="icon_size" /></span>
</a>
</template>
@ -11,7 +9,13 @@ import webapi from '@/webapi'
export default {
name: 'PlayerButtonSeekForward',
props: ['seek_ms', 'icon_style'],
props: {
seek_ms: Number,
icon_size: {
type: Number,
default: 16
}
},
computed: {
now_playing() {

20
web-src/src/components/PlayerButtonShuffle.vue
View File

@ -1,13 +1,6 @@
<template>
<a :class="{ 'is-warning': is_shuffle }" @click="toggle_shuffle_mode">
<span class="icon"
><i
class="mdi"
:class="[
icon_style,
{ 'mdi-shuffle': is_shuffle, 'mdi-shuffle-disabled': !is_shuffle }
]"
/></span>
<span class="icon"><mdicon :name="icon_name" :size="icon_size" /></span>
</a>
</template>
@ -18,12 +11,21 @@ export default {
name: 'PlayerButtonShuffle',
props: {
icon_style: String
icon_size: {
type: Number,
default: 16
}
},
computed: {
is_shuffle() {
return this.$store.state.player.shuffle
},
icon_name() {
if (this.is_shuffle) {
return 'shuffle'
}
return 'shuffle-disabled'
}
},

10
web-src/src/components/SpotifyModalDialogAlbum.vue
View File

@ -43,15 +43,19 @@
</div>
<footer class="card-footer">
<a class="card-footer-item has-text-dark" @click="queue_add">
<span class="icon"><i class="mdi mdi-playlist-plus" /></span>
<span class="icon"
><mdicon name="playlist-plus" size="16"
/></span>
<span class="is-size-7">Add</span>
</a>
<a class="card-footer-item has-text-dark" @click="queue_add_next">
<span class="icon"><i class="mdi mdi-playlist-play" /></span>
<span class="icon"
><mdicon name="playlist-play" size="16"
/></span>
<span class="is-size-7">Add Next</span>
</a>
<a class="card-footer-item has-text-dark" @click="play">
<span class="icon"><i class="mdi mdi-play" /></span>
<span class="icon"><mdicon name="play" size="16" /></span>
<span class="is-size-7">Play</span>
</a>
</footer>

10
web-src/src/components/SpotifyModalDialogArtist.vue
View File

@ -27,15 +27,19 @@
</div>
<footer class="card-footer">
<a class="card-footer-item has-text-dark" @click="queue_add">
<span class="icon"><i class="mdi mdi-playlist-plus" /></span>
<span class="icon"
><mdicon name="playlist-plus" size="16"
/></span>
<span class="is-size-7">Add</span>
</a>
<a class="card-footer-item has-text-dark" @click="queue_add_next">
<span class="icon"><i class="mdi mdi-playlist-play" /></span>
<span class="icon"
><mdicon name="playlist-play" size="16"
/></span>
<span class="is-size-7">Add Next</span>
</a>
<a class="card-footer-item has-text-dark" @click="play">
<span class="icon"><i class="mdi mdi-play" /></span>
<span class="icon"><mdicon name="play" size="16" /></span>
<span class="is-size-7">Play</span>
</a>
</footer>

10
web-src/src/components/SpotifyModalDialogPlaylist.vue
View File

@ -30,15 +30,19 @@
</div>
<footer class="card-footer">
<a class="card-footer-item has-text-dark" @click="queue_add">
<span class="icon"><i class="mdi mdi-playlist-plus" /></span>
<span class="icon"
><mdicon name="playlist-plus" size="16"
/></span>
<span class="is-size-7">Add</span>
</a>
<a class="card-footer-item has-text-dark" @click="queue_add_next">
<span class="icon"><i class="mdi mdi-playlist-play" /></span>
<span class="icon"
><mdicon name="playlist-play" size="16"
/></span>
<span class="is-size-7">Add Next</span>
</a>
<a class="card-footer-item has-text-dark" @click="play">
<span class="icon"><i class="mdi mdi-play" /></span>
<span class="icon"><mdicon name="play" size="16" /></span>
<span class="is-size-7">Play</span>
</a>
</footer>

10
web-src/src/components/SpotifyModalDialogTrack.vue
View File

@ -51,15 +51,19 @@
</div>
<footer class="card-footer">
<a class="card-footer-item has-text-dark" @click="queue_add">
<span class="icon"><i class="mdi mdi-playlist-plus" /></span>
<span class="icon"
><mdicon name="playlist-plus" size="16"
/></span>
<span class="is-size-7">Add</span>
</a>
<a class="card-footer-item has-text-dark" @click="queue_add_next">
<span class="icon"><i class="mdi mdi-playlist-play" /></span>
<span class="icon"
><mdicon name="playlist-play" size="16"
/></span>
<span class="is-size-7">Add Next</span>
</a>
<a class="card-footer-item has-text-dark" @click="play">
<span class="icon"><i class="mdi mdi-play" /></span>
<span class="icon"><mdicon name="play" size="16" /></span>
<span class="is-size-7">Play</span>
</a>
</footer>

4
web-src/src/components/TabsAudiobooks.vue
View File

@ -13,7 +13,7 @@
<li :class="{ 'is-active': isActive }">
<a @click="navigate" @keypress.enter="navigate">
<span class="icon is-small"
><i class="mdi mdi-artist"
><mdicon name="account-music" size="16"
/></span>
<span class="">Authors</span>
</a>
@ -27,7 +27,7 @@
<li :class="{ 'is-active': isActive }">
<a @click="navigate" @keypress.enter="navigate">
<span class="icon is-small"
><i class="mdi mdi-album"
><mdicon name="album" size="16"
/></span>
<span class="">Audiobooks</span>
</a>

14
web-src/src/components/TabsMusic.vue
View File

@ -12,7 +12,9 @@
>
<li :class="{ 'is-active': isActive }">
<a @click="navigate" @keypress.enter="navigate">
<span class="icon is-small"><i class="mdi mdi-web" /></span>
<span class="icon is-small"
><mdicon name="web" size="16"
/></span>
<span class="">Browse</span>
</a>
</li>
@ -25,7 +27,7 @@
<li :class="{ 'is-active': isActive }">
<a @click="navigate" @keypress.enter="navigate">
<span class="icon is-small"
><i class="mdi mdi-artist"
><mdicon name="account-music" size="16"
/></span>
<span class="">Artists</span>
</a>
@ -39,7 +41,7 @@
<li :class="{ 'is-active': isActive }">
<a @click="navigate" @keypress.enter="navigate">
<span class="icon is-small"
><i class="mdi mdi-album"
><mdicon name="album" size="16"
/></span>
<span class="">Albums</span>
</a>
@ -53,7 +55,7 @@
<li :class="{ 'is-active': isActive }">
<a @click="navigate" @keypress.enter="navigate">
<span class="icon is-small"
><i class="mdi mdi-speaker"
><mdicon name="speaker" size="16"
/></span>
<span class="">Genres</span>
</a>
@ -67,7 +69,7 @@
<li :class="{ 'is-active': isActive }">
<a @click="navigate" @keypress.enter="navigate">
<span class="icon is-small"
><i class="mdi mdi-book-open-page-variant"
><mdicon name="book-open-page-variant" size="16"
/></span>
<span class="">Composers</span>
</a>
@ -82,7 +84,7 @@
<li :class="{ 'is-active': isActive }">
<a @click="navigate" @keypress.enter="navigate">
<span class="icon is-small"
><i class="mdi mdi-spotify"
><mdicon name="spotify" size="16"
/></span>
<span class="">Spotify</span>
</a>

16
web-src/src/components/TabsSearch.vue
View File

@ -5,18 +5,26 @@
<div class="column is-four-fifths">
<div class="tabs is-centered is-small is-toggle is-toggle-rounded">
<ul>
<li :class="{ 'is-active': $store.state.search_path === '/search/library' }">
<li
:class="{
'is-active': $store.state.search_path === '/search/library'
}"
>
<a @click="search_library">
<span class="icon is-small"
><i class="mdi mdi-library-books"
><mdicon name="bookshelf" size="16"
/></span>
<span class="">Library</span>
</a>
</li>
<li :class="{ 'is-active': $store.state.search_path === '/search/spotify' }">
<li
:class="{
'is-active': $store.state.search_path === '/search/spotify'
}"
>
<a @click="search_spotify">
<span class="icon is-small"
><i class="mdi mdi-spotify"
><mdicon name="spotify" size="16"
/></span>
<span class="">Spotify</span>
</a>

117
web-src/src/icons.js Normal file
View File

@ -0,0 +1,117 @@
import {
mdiAccountMusic,
mdiAlbum,
mdiArrowCollapseDown,
mdiBookOpenVariant,
mdiBookOpenPageVariant,
mdiBookshelf,
mdiCancel,
mdiCast,
mdiCastVariant,
mdiCellphone,
mdiCheck,
mdiChevronDown,
mdiChevronUp,
mdiContentSave,
mdiDelete,
mdiDeleteEmpty,
mdiDotsHorizontal,
mdiDotsVertical,
mdiDragHorizontal,
mdiFastForward,
mdiFileMusic,
mdiFileOutline,
mdiFire,
mdiFolder,
mdiFolderOpen,
mdiMagnify,
mdiMenu,
mdiMicrophone,
mdiMusic,
mdiMusicBoxMultiple,
mdiPause,
mdiPencil,
mdiPipe,
mdiPlay,
mdiPlaylistPlay,
mdiPlaylistPlus,
mdiRadio,
mdiRadioTower,
mdiRefresh,
mdiRepeat,
mdiRepeatOff,
mdiRepeatOnce,
mdiRewind,
mdiRss,
mdiServer,
mdiShuffle,
mdiShuffleDisabled,
mdiSkipBackward,
mdiSkipForward,
mdiSpeaker,
mdiSpotify,
mdiStop,
mdiSubdirectoryArrowLeft,
mdiVolumeHigh,
mdiVolumeOff,
mdiWeb
} from '@mdi/js'
export const icons = {
mdiAccountMusic,
mdiAlbum,
mdiArrowCollapseDown,
mdiBookOpenVariant,
mdiBookOpenPageVariant,
mdiBookshelf,
mdiCancel,
mdiCast,
mdiCastVariant,
mdiCellphone,
mdiCheck,
mdiChevronDown,
mdiChevronUp,
mdiContentSave,
mdiDelete,
mdiDeleteEmpty,
mdiDotsHorizontal,
mdiDotsVertical,
mdiDragHorizontal,
mdiFastForward,
mdiFileMusic,
mdiFileOutline,
mdiFire,
mdiFolder,
mdiFolderOpen,
mdiMagnify,
mdiMenu,
mdiMicrophone,
mdiMusic,
mdiMusicBoxMultiple,
mdiPause,
mdiPencil,
mdiPipe,
mdiPlay,
mdiPlaylistPlay,
mdiPlaylistPlus,
mdiRadio,
mdiRadioTower,
mdiRefresh,
mdiRepeat,
mdiRepeatOff,
mdiRepeatOnce,
mdiRewind,
mdiRss,
mdiServer,
mdiShuffle,
mdiShuffleDisabled,
mdiSkipBackward,
mdiSkipForward,
mdiSpeaker,
mdiSpotify,
mdiStop,
mdiSubdirectoryArrowLeft,
mdiVolumeHigh,
mdiVolumeOff,
mdiWeb
}

31
web-src/src/main copy.js
View File

@ -1,31 +0,0 @@
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import { router } from './router'
import store from './store'
import './filter'
import './progress'
import vClickOutside from 'v-click-outside'
import VueTinyLazyloadImg from 'vue-tiny-lazyload-img'
import VueObserveVisibility from 'vue-observe-visibility'
import VueScrollTo from 'vue-scrollto'
import 'mdi/css/materialdesignicons.css'
import 'vue-range-slider/dist/vue-range-slider.css'
import './mystyles.scss'
Vue.config.productionTip = false
Vue.use(vClickOutside)
Vue.use(VueTinyLazyloadImg)
Vue.use(VueObserveVisibility)
Vue.use(VueScrollTo)
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
store,
components: { App },
template: '<App/>'
})

6
web-src/src/main.js
View File

@ -5,11 +5,12 @@ import VueProgressBar from '@aacassandra/vue3-progressbar'
import VueClickAway from 'vue3-click-away'
import VueLazyLoad from 'vue3-lazyload'
import VueScrollTo from 'vue-scrollto'
import mdiVue from 'mdi-vue/v3'
import { filters } from './filter'
import { icons } from './icons'
import App from './App.vue'
import './mystyles.scss'
import 'mdi/css/materialdesignicons.css'
import '@vueform/slider/themes/default.css'
const app = createApp(App)
@ -26,6 +27,9 @@ const app = createApp(App)
log: false
})
.use(VueScrollTo)
.use(mdiVue, {
icons: icons
})
app.config.globalProperties.$filters = filters
app.mount('#app')

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

@ -10,16 +10,14 @@
<div class="buttons fd-is-centered-mobile fd-has-margin-top">
<a class="button is-small is-dark is-rounded" @click="play">
<span class="icon"><i class="mdi mdi-shuffle" /></span>
<span class="icon"><mdicon name="shuffle" size="16" /></span>
<span>Shuffle</span>
</a>
<a
class="button is-small is-light is-rounded"
@click="show_album_details_modal = true"
>
<span class="icon"
><i class="mdi mdi-dots-horizontal mdi-18px"
/></span>
<span class="icon"><mdicon name="dots-horizontal" size="16" /></span>
</a>
</div>
</template>

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

@ -22,12 +22,10 @@
class="button is-small is-light is-rounded"
@click="show_artist_details_modal = true"
>
<span class="icon"
><i class="mdi mdi-dots-horizontal mdi-18px"
/></span>
<span class="icon"><mdicon name="dots-horizontal" size="16" /></span>
</a>
<a class="button is-small is-dark is-rounded" @click="play">
<span class="icon"><i class="mdi mdi-shuffle" /></span>
<span class="icon"><mdicon name="shuffle" size="16" /></span>
<span>Shuffle</span>
</a>
</div>

4
web-src/src/pages/PageArtistTracks.vue
View File

@ -16,11 +16,11 @@
@click="show_artist_details_modal = true"
>
<span class="icon"
><i class="mdi mdi-dots-horizontal mdi-18px"
><mdicon name="dots-horizontal" size="16"
/></span>
</a>
<a class="button is-small is-dark is-rounded" @click="play">
<span class="icon"><i class="mdi mdi-shuffle" /></span>
<span class="icon"><mdicon name="shuffle" size="16" /></span>
<span>Shuffle</span>
</a>
</div>

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

@ -10,16 +10,14 @@
<div class="buttons fd-is-centered-mobile fd-has-margin-top">
<a class="button is-small is-dark is-rounded" @click="play">
<span class="icon"><i class="mdi mdi-play" /></span>
<span class="icon"><mdicon name="play" size="16" /></span>
<span>Play</span>
</a>
<a
class="button is-small is-light is-rounded"
@click="show_album_details_modal = true"
>
<span class="icon"
><i class="mdi mdi-dots-horizontal mdi-18px"
/></span>
<span class="icon"><mdicon name="dots-horizontal" size="16" /></span>
</a>
</div>
</template>

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

@ -11,12 +11,10 @@
class="button is-small is-light is-rounded"
@click="show_artist_details_modal = true"
>
<span class="icon"
><i class="mdi mdi-dots-horizontal mdi-18px"
/></span>
<span class="icon"><mdicon name="dots-horizontal" size="16" /></span>
</a>
<a class="button is-small is-dark is-rounded" @click="play">
<span class="icon"><i class="mdi mdi-play" /></span>
<span class="icon"><mdicon name="play" size="16" /></span>
<span>Shuffle</span>
</a>
</div>

4
web-src/src/pages/PageComposer.vue
View File

@ -13,11 +13,11 @@
@click="show_composer_details_modal = true"
>
<span class="icon"
><i class="mdi mdi-dots-horizontal mdi-18px"
><mdicon name="dots-horizontal" size="16"
/></span>
</a>
<a class="button is-small is-dark is-rounded" @click="play">
<span class="icon"><i class="mdi mdi-shuffle" /></span>
<span class="icon"><mdicon name="shuffle" size="16" /></span>
<span>Shuffle</span>
</a>
</div>

4
web-src/src/pages/PageComposerTracks.vue
View File

@ -13,11 +13,11 @@
@click="show_composer_details_modal = true"
>
<span class="icon"
><i class="mdi mdi-dots-horizontal mdi-18px"
><mdicon name="dots-horizontal" size="16"
/></span>
</a>
<a class="button is-small is-dark is-rounded" @click="play">
<span class="icon"><i class="mdi mdi-shuffle" /></span>
<span class="icon"><mdicon name="shuffle" size="16" /></span>
<span>Shuffle</span>
</a>
</div>

4
web-src/src/pages/PageFiles.vue
View File

@ -14,11 +14,11 @@
@click="open_directory_dialog({ path: current_directory })"
>
<span class="icon"
><i class="mdi mdi-dots-horizontal mdi-18px"
><mdicon name="dots-horizontal" size="16"
/></span>
</a>
<a class="button is-small is-dark is-rounded" @click="play">
<span class="icon"><i class="mdi mdi-play" /></span>
<span class="icon"><mdicon name="play" size="16" /></span>
<span>Play</span>
</a>
</div>

4
web-src/src/pages/PageGenre.vue
View File

@ -16,11 +16,11 @@
@click="show_genre_details_modal = true"
>
<span class="icon"
><i class="mdi mdi-dots-horizontal mdi-18px"
><mdicon name="dots-horizontal" size="16"
/></span>
</a>
<a class="button is-small is-dark is-rounded" @click="play">
<span class="icon"><i class="mdi mdi-shuffle" /></span>
<span class="icon"><mdicon name="shuffle" size="16" /></span>
<span>Shuffle</span>
</a>
</div>

4
web-src/src/pages/PageGenreTracks.vue
View File

@ -16,11 +16,11 @@
@click="show_genre_details_modal = true"
>
<span class="icon"
><i class="mdi mdi-dots-horizontal mdi-18px"
><mdicon name="dots-horizontal" size="16"
/></span>
</a>
<a class="button is-small is-dark is-rounded" @click="play">
<span class="icon"><i class="mdi mdi-shuffle" /></span>
<span class="icon"><mdicon name="shuffle" size="16" /></span>
<span>Shuffle</span>
</a>
</div>

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

@ -11,12 +11,10 @@
class="button is-small is-light is-rounded"
@click="show_playlist_details_modal = true"
>
<span class="icon"
><i class="mdi mdi-dots-horizontal mdi-18px"
/></span>
<span class="icon"><mdicon name="dots-horizontal" size="16" /></span>
</a>
<a class="button is-small is-dark is-rounded" @click="play">
<span class="icon"><i class="mdi mdi-shuffle" /></span>
<span class="icon"><mdicon name="shuffle" size="16" /></span>
<span>Shuffle</span>
</a>
</div>

27
web-src/src/pages/PagePlaylists.vue
View File

@ -4,10 +4,10 @@
<p class="title is-4">
{{ playlist.name }}
</p>
<p class="heading">{{ playlists.total }} playlists</p>
<p class="heading">{{ playlists.count }} playlists</p>
</template>
<template #content>
<list-playlists :playlists="playlists.items" />
<list-playlists :playlists="playlists" />
</template>
</content-with-heading>
</template>
@ -16,6 +16,7 @@
import ContentWithHeading from '@/templates/ContentWithHeading.vue'
import ListPlaylists from '@/components/ListPlaylists.vue'
import webapi from '@/webapi'
import { GroupByList, noop } from '@/lib/GroupByList'
const dataObject = {
load: function (to) {
@ -27,7 +28,7 @@ const dataObject = {
set: function (vm, response) {
vm.playlist = response[0].data
vm.playlists = response[1].data
vm.playlists_list = new GroupByList(response[1].data)
}
}
@ -51,7 +52,25 @@ export default {
data() {
return {
playlist: {},
playlists: {}
playlists_list: new GroupByList()
}
},
computed: {
radio_playlists() {
return this.$store.state.config.radio_playlists
},
playlists() {
this.playlists_list.group(noop(), [
(playlist) =>
playlist.folder ||
this.radio_playlists ||
playlist.stream_count === 0 ||
playlist.item_count > playlist.stream_count
])
return this.playlists_list
}
}
}

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

@ -11,13 +11,11 @@
class="button is-small is-light is-rounded"
@click="show_album_details_modal = true"
>
<span class="icon"
><i class="mdi mdi-dots-horizontal mdi-18px"
/></span>
<span class="icon"><mdicon name="dots-horizontal" size="16" /></span>
</a>
<a class="button is-small is-dark is-rounded" @click="play">
<span class="icon">
<i class="mdi mdi-play" />
<mdicon name="play" size="16" />
</span>
<span>Play</span>
</a>

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

@ -8,7 +8,7 @@
<div class="buttons is-centered">
<a class="button is-small" @click="mark_all_played">
<span class="icon">
<i class="mdi mdi-pencil" />
<mdicon name="pencil" size="16" />
</span>
<span>Mark All Played</span>
</a>
@ -32,13 +32,13 @@
<div class="buttons is-centered">
<a v-if="rss.tracks > 0" class="button is-small" @click="update_rss">
<span class="icon">
<i class="mdi mdi-refresh" />
<mdicon name="refresh" size="16" />
</span>
<span>Update</span>
</a>
<a class="button is-small" @click="open_add_podcast_dialog">
<span class="icon">
<i class="mdi mdi-rss" />
<mdicon name="rss" size="16" />
</span>
<span>Add Podcast</span>
</a>

14
web-src/src/pages/PageQueue.vue
View File

@ -12,13 +12,13 @@
@click="update_show_next_items"
>
<span class="icon">
<i class="mdi mdi-arrow-collapse-down" />
<mdicon name="arrow-collapse-down" size="16" />
</span>
<span>Hide previous</span>
</a>
<a class="button is-small" @click="open_add_stream_dialog">
<span class="icon">
<i class="mdi mdi-web" />
<mdicon name="web" size="16" />
</span>
<span>Add Stream</span>
</a>
@ -28,13 +28,13 @@
@click="edit_mode = !edit_mode"
>
<span class="icon">
<i class="mdi mdi-pencil" />
<mdicon name="pencil" size="16" />
</span>
<span>Edit</span>
</a>
<a class="button is-small" @click="queue_clear">
<span class="icon">
<i class="mdi mdi-delete-empty" />
<mdicon name="delete-empty" size="16" />
</span>
<span>Clear</span>
</a>
@ -45,7 +45,7 @@
@click="save_dialog"
>
<span class="icon">
<i class="mdi mdi-content-save" />
<mdicon name="content-save" size="16" />
</span>
<span>Save</span>
</a>
@ -69,7 +69,7 @@
<template #actions>
<a v-if="!edit_mode" @click.prevent.stop="open_dialog(element)">
<span class="icon has-text-dark"
><i class="mdi mdi-dots-vertical mdi-18px"
><mdicon name="dots-vertical" size="16"
/></span>
</a>
<a
@ -77,7 +77,7 @@
@click.prevent.stop="remove(element)"
>
<span class="icon has-text-grey"
><i class="mdi mdi-delete mdi-18px"
><mdicon name="delete" size="18"
/></span>
</a>
</template>

20
web-src/src/pages/PageSearch.vue
View File

@ -17,7 +17,7 @@
autocomplete="off"
/>
<span class="icon is-left">
<i class="mdi mdi-magnify" />
<mdicon name="magnify" size="16" />
</span>
</p>
<p class="help has-text-centered">
@ -131,7 +131,7 @@
<p class="title is-4">Composers</p>
</template>
<template #content>
<list-composers :composers="composers.items" />
<list-composers :composers="composers" />
</template>
<template #footer>
<nav v-if="show_all_composers_button" class="level">
@ -139,7 +139,7 @@
<a
class="button is-light is-small is-rounded"
@click="open_search_composers"
>Show all {{ composers.total }} composers</a
>Show all {{ composers.total.toLocaleString() }} composers</a
>
</p>
</nav>
@ -157,7 +157,7 @@
<p class="title is-4">Playlists</p>
</template>
<template #content>
<list-playlists :playlists="playlists.items" />
<list-playlists :playlists="playlists" />
</template>
<template #footer>
<nav v-if="show_all_playlists_button" class="level">
@ -264,8 +264,8 @@ export default {
tracks: { items: [], total: 0 },
artists: new GroupByList(),
albums: new GroupByList(),
composers: { items: [], total: 0 },
playlists: { items: [], total: 0 },
composers: new GroupByList(),
playlists: new GroupByList(),
audiobooks: new GroupByList(),
podcasts: new GroupByList()
}
@ -396,12 +396,8 @@ export default {
this.tracks = data.tracks ? data.tracks : { items: [], total: 0 }
this.artists = new GroupByList(data.artists)
this.albums = new GroupByList(data.albums)
this.composers = data.composers
? data.composers
: { items: [], total: 0 }
this.playlists = data.playlists
? data.playlists
: { items: [], total: 0 }
this.composers = new GroupByList(data.composers)
this.playlists = new GroupByList(data.playlists)
})
},

8
web-src/src/pages/SpotifyPageAlbum.vue
View File

@ -12,16 +12,14 @@
<div class="buttons fd-is-centered-mobile fd-has-margin-top">
<a class="button is-small is-dark is-rounded" @click="play">
<span class="icon"><i class="mdi mdi-shuffle" /></span>
<span class="icon"><mdicon name="shuffle" size="16" /></span>
<span>Shuffle</span>
</a>
<a
class="button is-small is-light is-rounded"
@click="show_album_details_modal = true"
>
<span class="icon"
><i class="mdi mdi-dots-horizontal mdi-18px"
/></span>
<span class="icon"><mdicon name="dots-horizontal" size="16" /></span>
</a>
</div>
</template>
@ -52,7 +50,7 @@
<template #actions>
<a @click.prevent.stop="open_track_dialog(track)">
<span class="icon has-text-dark"
><i class="mdi mdi-dots-vertical mdi-18px"
><mdicon name="dots-vertical" size="16"
/></span>
</a>
</template>

8
web-src/src/pages/SpotifyPageArtist.vue
View File

@ -11,12 +11,10 @@
class="button is-small is-light is-rounded"
@click="show_artist_details_modal = true"
>
<span class="icon"
><i class="mdi mdi-dots-horizontal mdi-18px"
/></span>
<span class="icon"><mdicon name="dots-horizontal" size="16" /></span>
</a>
<a class="button is-small is-dark is-rounded" @click="play">
<span class="icon"><i class="mdi mdi-shuffle" /></span>
<span class="icon"><mdicon name="shuffle" size="16" /></span>
<span>Shuffle</span>
</a>
</div>
@ -43,7 +41,7 @@
<template #actions>
<a @click.prevent.stop="open_dialog(album)">
<span class="icon has-text-dark"
><i class="mdi mdi-dots-vertical mdi-18px"
><mdicon name="dots-vertical" size="16"
/></span>
</a>
</template>

4
web-src/src/pages/SpotifyPageBrowse.vue
View File

@ -28,7 +28,7 @@
<template #actions>
<a @click.prevent.stop="open_album_dialog(album)">
<span class="icon has-text-dark"
><i class="mdi mdi-dots-vertical mdi-18px"
><mdicon name="dots-vertical" size="16"
/></span>
</a>
</template>
@ -67,7 +67,7 @@
<template #actions>
<a @click.prevent.stop="open_playlist_dialog(playlist)">
<span class="icon has-text-dark"
><i class="mdi mdi-dots-vertical mdi-18px"
><mdicon name="dots-vertical" size="16"
/></span>
</a>
</template>

2
web-src/src/pages/SpotifyPageBrowseFeaturedPlaylists.vue
View File

@ -15,7 +15,7 @@
<template #actions>
<a @click.prevent.stop="open_playlist_dialog(playlist)">
<span class="icon has-text-dark"
><i class="mdi mdi-dots-vertical mdi-18px"
><mdicon name="dots-vertical" size="16"
/></span>
</a>
</template>

2
web-src/src/pages/SpotifyPageBrowseNewReleases.vue
View File

@ -27,7 +27,7 @@
<template #actions>
<a @click.prevent.stop="open_album_dialog(album)">
<span class="icon has-text-dark"
><i class="mdi mdi-dots-vertical mdi-18px"
><mdicon name="dots-vertical" size="16"
/></span>
</a>
</template>

8
web-src/src/pages/SpotifyPagePlaylist.vue
View File

@ -11,12 +11,10 @@
class="button is-small is-light is-rounded"
@click="show_playlist_details_modal = true"
>
<span class="icon"
><i class="mdi mdi-dots-horizontal mdi-18px"
/></span>
<span class="icon"><mdicon name="dots-horizontal" size="16" /></span>
</a>
<a class="button is-small is-dark is-rounded" @click="play">
<span class="icon"><i class="mdi mdi-shuffle" /></span>
<span class="icon"><mdicon name="shuffle" size="16" /></span>
<span>Shuffle</span>
</a>
</div>
@ -36,7 +34,7 @@
<template #actions>
<a @click.prevent.stop="open_track_dialog(item.track)">
<span class="icon has-text-dark"
><i class="mdi mdi-dots-vertical mdi-18px"
><mdicon name="dots-vertical" size="16"
/></span>
</a>
</template>

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

@ -17,7 +17,7 @@
autocomplete="off"
/>
<span class="icon is-left">
<i class="mdi mdi-magnify" />
<mdicon name="magnify" size="16" />
</span>
</p>
</div>
@ -55,7 +55,7 @@
<template #actions>
<a @click.prevent.stop="open_track_dialog(track)">
<span class="icon has-text-dark"
><i class="mdi mdi-dots-vertical mdi-18px"
><mdicon name="dots-vertical" size="16"
/></span>
</a>
</template>
@ -105,7 +105,7 @@
<template #actions>
<a @click.prevent.stop="open_artist_dialog(artist)">
<span class="icon has-text-dark"
><i class="mdi mdi-dots-vertical mdi-18px"
><mdicon name="dots-vertical" size="16"
/></span>
</a>
</template>
@ -166,7 +166,7 @@
<template #actions>
<a @click.prevent.stop="open_album_dialog(album)">
<span class="icon has-text-dark"
><i class="mdi mdi-dots-vertical mdi-18px"
><mdicon name="dots-vertical" size="16"
/></span>
</a>
</template>
@ -215,7 +215,7 @@
<template #actions>
<a @click.prevent.stop="open_playlist_dialog(playlist)">
<span class="icon has-text-dark"
><i class="mdi mdi-dots-vertical mdi-18px"
><mdicon name="dots-vertical" size="16"
/></span>
</a>
</template>

4
web-src/src/templates/ContentWithHeading.vue
View File

@ -15,14 +15,14 @@
class="button is-small is-white"
@click="scroll_to_top"
><span class="icon is-small"
><i class="mdi mdi-chevron-up" /></span
><mdicon name="chevron-up" size="16" /></span
></a>
<a
v-else
class="button is-small is-white"
@click="scroll_to_content"
><span class="icon is-small"
><i class="mdi mdi-chevron-down" /></span
><mdicon name="chevron-down" size="16" /></span
></a>
</nav>
</section>