MyFavMirrors
/
owntone-server
mirror of https://github.com/owntone/owntone-server.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

[web-src] Make ListItemXXX functional components

This commit is contained in:
chme 2018-12-17 10:35:39 +01:00
parent 219d9df024
commit 8f391ecd6a
16 changed files with 100 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
web-src/src/components/ListItemArtist.vue
View File

@ -1,7 +1,7 @@
<template>
<div class="media" :id="'index_' + anchor">
<div class="media-content fd-has-action is-clipped" v-on:click="open_artist">
<h1 class="title is-6">{{ artist.name }}</h1>
<template functional>
<div class="media" :id="'index_' + props.anchor">
<div class="media-content fd-has-action is-clipped" @click="listeners.click">
<h1 class="title is-6">{{ props.artist.name }}</h1>
</div>
<div class="media-right">
<slot name="actions"></slot>
@ -12,15 +12,7 @@
<script>
export default {
name: 'ListItemArtist',
components: {},
props: ['artist', 'anchor'],
methods: {
open_artist: function () {
this.$router.push({ path: '/music/artists/' + this.artist.id })
}
}
props: ['artist', 'anchor']
}
</script>

19
web-src/src/components/ListItemGenre.vue
View File

@ -1,7 +1,7 @@
<template>
<div class="media" :id="'index_' + anchor">
<div class="media-content fd-has-action is-clipped" v-on:click="open_genre">
<h1 class="title is-6">{{ genre.name }}</h1>
<template functional>
<div class="media" :id="'index_' + props.anchor">
<div class="media-content fd-has-action is-clipped" @click="listeners.click">
<h1 class="title is-6">{{ props.genre.name }}</h1>
</div>
<div class="media-right">
<slot name="actions"></slot>
@ -12,16 +12,7 @@
<script>
export default {
name: 'ListItemGenre',
components: {},
props: [ 'genre', 'anchor' ],
methods: {
open_genre: function () {
this.show_details_modal = false
this.$router.push({ name: 'Genre', params: { genre: this.genre.name } })
}
}
props: [ 'genre', 'anchor' ]
}
</script>

17
web-src/src/components/ListItemPlaylist.vue
View File

@ -1,7 +1,7 @@
<template>
<template functional>
<div class="media">
<div class="media-content fd-has-action is-clipped" v-on:click="open_playlist">
<h1 class="title is-6">{{ playlist.name }}</h1>
<div class="media-content fd-has-action is-clipped" @click="listeners.click">
<h1 class="title is-6">{{ props.playlist.name }}</h1>
</div>
<div class="media-right">
<slot name="actions"></slot>
@ -12,16 +12,7 @@
<script>
export default {
name: 'ListItemPlaylist',
components: {},
props: ['playlist'],
methods: {
open_playlist: function () {
this.show_details_modal = false
this.$router.push({ path: '/playlists/' + this.playlist.id })
}
}
props: ['playlist']
}
</script>

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

@ -1,9 +1,9 @@
<template>
<template functional>
<div class="media">
<div class="media-content fd-has-action is-clipped" v-on:click="play">
<h1 class="title is-6">{{ track.title }}</h1>
<h2 class="subtitle is-7 has-text-grey"><b>{{ track.artist }}</b></h2>
<h2 class="subtitle is-7 has-text-grey">{{ track.album }}</h2>
<div class="media-content fd-has-action is-clipped" @click="listeners.click">
<h1 class="title is-6">{{ props.track.title }}</h1>
<h2 class="subtitle is-7 has-text-grey"><b>{{ props.track.artist }}</b></h2>
<h2 class="subtitle is-7 has-text-grey">{{ props.track.album }}</h2>
</div>
<div class="media-right">
<slot name="actions"></slot>
@ -12,24 +12,9 @@
</template>
<script>
import webapi from '@/webapi'
export default {
name: 'ListItemTrack',
components: {},
props: ['track', 'position', 'context_uri'],
data () {
return {
}
},
methods: {
play: function () {
webapi.player_play_uri(this.context_uri, false, this.position)
}
}
props: ['track']
}
</script>

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

@ -18,7 +18,7 @@
</template>
<template slot="content">
<p class="heading has-text-centered-mobile">{{ album.track_count }} tracks</p>
<list-item-track v-for="(track, index) in tracks" :key="track.id" :track="track" :position="index" :context_uri="album.uri">
<list-item-track v-for="(track, index) in tracks" :key="track.id" :track="track" @click="play_track(index)">
<template slot="actions">
<a @click="open_dialog(track)">
<span class="icon has-text-dark"><i class="mdi mdi-dots-vertical mdi-18px"></i></span>
@ -76,6 +76,10 @@ export default {
webapi.player_play_uri(this.album.uri, true)
},
play_track: function (position) {
webapi.player_play_uri(this.album.uri, false, position)
},
open_dialog: function (track) {
this.selected_track = track
this.show_details_modal = true

21
web-src/src/pages/PageArtists.vue
View File

@ -19,12 +19,17 @@
</a>
</template>
<template slot="content">
<list-item-artist v-for="(artist, index) in artists.items" :key="artist.id" :artist="artist" :anchor="anchor(artist, index)" v-if="!hide_singles || artist.track_count > (artist.album_count * 2)">
<template slot="actions">
<a @click="open_dialog(artist)">
<span class="icon has-text-dark"><i class="mdi mdi-dots-vertical mdi-18px"></i></span>
</a>
</template>
<list-item-artist v-for="(artist, index) in artists.items"
:key="artist.id"
:artist="artist"
:anchor="anchor(artist, index)"
@click="open_artist(artist)"
v-if="!hide_singles || artist.track_count > (artist.album_count * 2)">
<template slot="actions">
<a @click="open_dialog(artist)">
<span class="icon has-text-dark"><i class="mdi mdi-dots-vertical mdi-18px"></i></span>
</a>
</template>
</list-item-artist>
<modal-dialog-artist :show="show_details_modal" :artist="selected_artist" @close="show_details_modal = false" />
</template>
@ -87,6 +92,10 @@ export default {
return artist.name_sort.charAt(0).toUpperCase()
},
open_artist: function (artist) {
this.$router.push({ path: '/music/artists/' + artist.id })
},
open_dialog: function (artist) {
this.selected_artist = artist
this.show_details_modal = true

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

@ -14,7 +14,7 @@
</template>
<template slot="content">
<p class="heading has-text-centered-mobile">{{ album.track_count }} tracks</p>
<list-item-track v-for="(track, index) in tracks" :key="track.id" :track="track" :position="index" :context_uri="album.uri">
<list-item-track v-for="(track, index) in tracks" :key="track.id" :track="track" @click="play_track(index)">
<template slot="actions">
<a @click="open_dialog(track)">
<span class="icon has-text-dark"><i class="mdi mdi-dots-vertical mdi-18px"></i></span>
@ -67,6 +67,10 @@ export default {
webapi.player_play_uri(this.album.uri, false)
},
play_track: function (position) {
webapi.player_play_uri(this.album.uri, false, position)
},
open_dialog: function (track) {
this.selected_track = track
this.show_details_modal = true

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

@ -34,7 +34,7 @@
<p class="heading">tracks</p>
</template>
<template slot="content">
<list-item-track v-for="track in recently_played.items" :key="track.id" :track="track" :position="0" :context_uri="track.uri">
<list-item-track v-for="track in recently_played.items" :key="track.id" :track="track" @click="play_track(track)">
<template slot="actions">
<a @click="open_track_dialog(track)">
<span class="icon has-text-dark"><i class="mdi mdi-dots-vertical mdi-18px"></i></span>
@ -113,6 +113,10 @@ export default {
open_album_dialog: function (album) {
this.selected_album = album
this.show_album_details_modal = true
},
play_track: function (track) {
webapi.player_play_uri(track.uri, false)
}
}
}

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

@ -8,7 +8,7 @@
<p class="heading">tracks</p>
</template>
<template slot="content">
<list-item-track v-for="track in recently_played.items" :key="track.id" :track="track" :position="0" :context_uri="track.uri">
<list-item-track v-for="track in recently_played.items" :key="track.id" :track="track" @click="play_track(track)">
<template slot="actions">
<a @click="open_dialog(track)">
<span class="icon has-text-dark"><i class="mdi mdi-dots-vertical mdi-18px"></i></span>
@ -61,6 +61,10 @@ export default {
open_dialog: function (track) {
this.selected_track = track
this.show_details_modal = true
},
play_track: function (track) {
webapi.player_play_uri(track.uri, false)
}
}
}

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

@ -11,7 +11,7 @@
</template>
<template slot="content">
<p class="heading has-text-centered-mobile"><a class="has-text-link" @click="open_genre">albums</a> | {{ tracks.total }} tracks</p>
<list-item-track v-for="(track, index) in tracks.items" :key="track.id" :track="track" :position="index" :context_uri="tracks.items.map(a => a.uri).join(',')" :links="links">
<list-item-track v-for="(track, index) in tracks.items" :key="track.id" :track="track" @click="play_track(index)">
<template slot="actions">
<a @click="open_dialog(track)">
<span class="icon has-text-dark"><i class="mdi mdi-dots-vertical mdi-18px"></i></span>
@ -51,7 +51,6 @@ export default {
return {
tracks: {},
genre: '',
links: [],
show_details_modal: false,
selected_track: {}
@ -68,6 +67,10 @@ export default {
webapi.player_play_uri(this.tracks.items.map(a => a.uri).join(','), true)
},
play_track: function (position) {
webapi.player_play_uri(this.tracks.items.map(a => a.uri).join(','), false, position)
},
open_dialog: function (track) {
this.selected_track = track
this.show_details_modal = true

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

@ -11,7 +11,7 @@
<p class="heading">{{ genres.total }} genres</p>
</template>
<template slot="content">
<list-item-genre v-for="(genre, index) in genres.items" :key="genre.name" :genre="genre" :anchor="anchor(genre, index)">
<list-item-genre v-for="(genre, index) in genres.items" :key="genre.name" :genre="genre" :anchor="anchor(genre, index)" @click="open_genre(genre)">
<template slot="actions">
<a @click="open_dialog(genre)">
<span class="icon has-text-dark"><i class="mdi mdi-dots-vertical mdi-18px"></i></span>
@ -69,6 +69,10 @@ export default {
return genre.name.charAt(0).toUpperCase()
},
open_genre: function (genre) {
this.$router.push({ name: 'Genre', params: { genre: genre.name } })
},
open_dialog: function (genre) {
this.selected_genre = genre
this.show_details_modal = true

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

@ -10,7 +10,7 @@
</template>
<template slot="content">
<p class="heading has-text-centered-mobile">{{ tracks.length }} tracks</p>
<list-item-track v-for="(track, index) in tracks" :key="track.id" :track="track" :position="index" :context_uri="playlist.uri">
<list-item-track v-for="(track, index) in tracks" :key="track.id" :track="track" @click="play_track(index)">
<template slot="actions">
<a @click="open_dialog(track)">
<span class="icon has-text-dark"><i class="mdi mdi-dots-vertical mdi-18px"></i></span>
@ -63,6 +63,10 @@ export default {
webapi.player_play_uri(this.playlist.uri, true)
},
play_track: function (position) {
webapi.player_play_uri(this.playlist.uri, false, position)
},
open_dialog: function (track) {
this.selected_track = track
this.show_details_modal = true

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

@ -5,7 +5,7 @@
<p class="heading">{{ playlists.total }} playlists</p>
</template>
<template slot="content">
<list-item-playlist v-for="playlist in playlists.items" :key="playlist.id" :playlist="playlist">
<list-item-playlist v-for="playlist in playlists.items" :key="playlist.id" :playlist="playlist" @click="open_playlist(playlist)">
<template slot="actions">
<a @click="open_dialog(playlist)">
<span class="icon has-text-dark"><i class="mdi mdi-dots-vertical mdi-18px"></i></span>
@ -50,6 +50,10 @@ export default {
},
methods: {
open_playlist: function (playlist) {
this.$router.push({ path: '/playlists/' + playlist.id })
},
open_dialog: function (playlist) {
this.selected_playlist = playlist
this.show_details_modal = true

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

@ -13,7 +13,7 @@
</template>
<template slot="content">
<p class="heading has-text-centered-mobile">{{ album.track_count }} tracks</p>
<list-item-track v-for="(track, index) in tracks" :key="track.id" :track="track" :position="index" :context_uri="album.uri">
<list-item-track v-for="(track, index) in tracks" :key="track.id" :track="track" @click="play_track(index)">
<template slot="actions">
<a @click="open_dialog(track)">
<span class="icon has-text-dark"><i class="mdi mdi-dots-vertical mdi-18px"></i></span>
@ -66,6 +66,10 @@ export default {
webapi.player_play_uri(this.album.uri, false)
},
play_track: function (position) {
webapi.player_play_uri(this.album.uri, false, position)
},
open_dialog: function (track) {
this.selected_track = track
this.show_details_modal = true

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

@ -31,7 +31,7 @@
<p class="title is-4">Tracks</p>
</template>
<template slot="content">
<list-item-track v-for="track in tracks.items" :key="track.id" :track="track" :position="0" :context_uri="track.uri">
<list-item-track v-for="track in tracks.items" :key="track.id" :track="track" @click="play_track(track)">
<template slot="actions">
<a @click="open_track_dialog(track)">
<span class="icon has-text-dark"><i class="mdi mdi-dots-vertical mdi-18px"></i></span>
@ -56,7 +56,7 @@
<p class="title is-4">Artists</p>
</template>
<template slot="content">
<list-item-artist v-for="artist in artists.items" :key="artist.id" :artist="artist">
<list-item-artist v-for="artist in artists.items" :key="artist.id" :artist="artist" @click="open_artist(artist)">
<template slot="actions">
<a @click="open_artist_dialog(artist)">
<span class="icon has-text-dark"><i class="mdi mdi-dots-vertical mdi-18px"></i></span>
@ -106,7 +106,7 @@
<p class="title is-4">Playlists</p>
</template>
<template slot="content">
<list-item-playlist v-for="playlist in playlists.items" :key="playlist.id" :playlist="playlist">
<list-item-playlist v-for="playlist in playlists.items" :key="playlist.id" :playlist="playlist" @click="open_playlist(playlist)">
<template slot="actions">
<a @click="open_playlist_dialog(playlist)">
<span class="icon has-text-dark"><i class="mdi mdi-dots-vertical mdi-18px"></i></span>
@ -282,10 +282,22 @@ export default {
})
},
play_track: function (track) {
webapi.player_play_uri(track.uri, false)
},
open_artist: function (artist) {
this.$router.push({ path: '/music/artists/' + artist.id })
},
open_album: function (album) {
this.$router.push({ path: '/music/albums/' + album.id })
},
open_playlist: function (playlist) {
this.$router.push({ path: '/playlists/' + playlist.id })
},
open_recent_search: function (query) {
this.search_query = query
this.new_search()

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

@ -11,7 +11,7 @@
</template>
<template slot="content">
<p class="heading has-text-centered-mobile"><a class="has-text-link" @click="open_artist">{{ artist.album_count }} albums</a> | {{ artist.track_count }} tracks</p>
<list-item-track v-for="(track, index) in tracks.items" :key="track.id" :track="track" :position="index" :context_uri="tracks.items.map(a => a.uri).join(',')">
<list-item-track v-for="(track, index) in tracks.items" :key="track.id" :track="track" @click="play_track(index)">
<template slot="actions">
<a @click="open_dialog(track)">
<span class="icon has-text-dark"><i class="mdi mdi-dots-vertical mdi-18px"></i></span>
@ -70,6 +70,10 @@ export default {
webapi.player_play_uri(this.tracks.items.map(a => a.uri).join(','), true)
},
play_track: function (position) {
webapi.player_play_uri(this.tracks.items.map(a => a.uri).join(','), false, position)
},
open_dialog: function (track) {
this.selected_track = track
this.show_details_modal = true