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

[web] Only include icons in bundle that are used in the web interface

Browse Source
This commit is contained in:
chme
2022-04-16 10:14:03 +02:00
parent b3a661cae8
commit 7fff11ef30
68 changed files with 476 additions and 314 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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>

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

@@ -8,14 +8,7 @@
>
<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)" size="16" />
</span>
</figure>
<div class="media-content fd-has-action is-clipped">
@@ -26,7 +19,7 @@
<div class="media-right">
<a @click.prevent.stop="open_dialog(playlist)">
<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>

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

@@ -24,15 +24,19 @@
</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>