From 2ec67268c4e7f20ce709729ac88a2cbf9755e05e Mon Sep 17 00:00:00 2001 From: marcelveldt Date: Thu, 16 May 2019 22:14:57 +0200 Subject: [PATCH] frontend fixes --- .../web/components/infoheader.vue.js | 23 ++++--- .../web/components/listviewItem.vue.js | 20 +----- music_assistant/web/components/player.vue.js | 10 +-- .../web/components/playmenu.vue.js | 53 ++++++--------- .../web/components/providericons.vue.js | 68 +++++++++++++++++++ .../web/components/qualityicon.vue.js | 60 ---------------- .../web/components/volumecontrol.vue.js | 4 +- music_assistant/web/index.html | 5 +- .../web/pages/artistdetails.vue.js | 3 +- .../web/pages/playlistdetails.vue.js | 1 + music_assistant/web/pages/queue.vue.js | 44 +++--------- music_assistant/web/pages/trackdetails.vue.js | 2 +- music_assistant/web/strings.js | 26 +++++++ 13 files changed, 155 insertions(+), 164 deletions(-) create mode 100644 music_assistant/web/components/providericons.vue.js delete mode 100644 music_assistant/web/components/qualityicon.vue.js diff --git a/music_assistant/web/components/infoheader.vue.js b/music_assistant/web/components/infoheader.vue.js index 8ccf6619..5afea5ed 100644 --- a/music_assistant/web/components/infoheader.vue.js +++ b/music_assistant/web/components/infoheader.vue.js @@ -5,7 +5,7 @@ Vue.component("infoheader", {
- - - -
- -
+
@@ -42,10 +37,10 @@ Vue.component("infoheader", { {{ artist.name }} - - {{ info.artist.name }} + + {{ info.artist.name }} - + {{ info.owner }} @@ -88,6 +83,8 @@ Vue.component("infoheader", { methods: { getFanartImage() { var img = ''; + if (!this.info) + return '' if (this.info.metadata && this.info.metadata.fanart) img = this.info.metadata.fanart; else if (this.info.artists) @@ -95,10 +92,14 @@ Vue.component("infoheader", { if (artist.metadata && artist.metadata.fanart) img = artist.metadata.fanart; }); + else if (this.info.artist && this.info.artist.metadata.fanart) + img = this.info.artist.metadata.fanart; return img; }, getThumb() { var img = ''; + if (!this.info) + return '' if (this.info.metadata && this.info.metadata.image) img = this.info.metadata.image; else if (this.info.album && this.info.album.metadata && this.info.album.metadata.image) @@ -112,6 +113,8 @@ Vue.component("infoheader", { }, getDescription() { var desc = ''; + if (!this.info) + return '' if (this.info.metadata && this.info.metadata.description) return this.info.metadata.description; else if (this.info.metadata && this.info.metadata.biography) diff --git a/music_assistant/web/components/listviewItem.vue.js b/music_assistant/web/components/listviewItem.vue.js index e54b811c..ff05edac 100755 --- a/music_assistant/web/components/listviewItem.vue.js +++ b/music_assistant/web/components/listviewItem.vue.js @@ -30,7 +30,7 @@ Vue.component("listviewItem", { - {{ item.artist.name }} + {{ item.artist.name }} @@ -39,17 +39,7 @@ Vue.component("listviewItem", { - - - - - - {{ provider.details }} - {{ provider.quality }} - - + @@ -78,11 +68,7 @@ Vue.component("listviewItem", { `, props: ['item', 'index', 'totalitems', 'hideavatar', 'hidetracknum', 'hideproviders', 'hidemenu', 'hidelibrary', 'hideduration'], data() { - return { - selected: [2], - items: [], - offset: 0, - } + return {} }, methods: { } diff --git a/music_assistant/web/components/player.vue.js b/music_assistant/web/components/player.vue.js index f0a545ff..4dc6e81d 100755 --- a/music_assistant/web/components/player.vue.js +++ b/music_assistant/web/components/player.vue.js @@ -85,7 +85,7 @@ Vue.component("player", { - Players + {{ $t('players') }} @@ -98,7 +98,7 @@ Vue.component("player", { {{ player.name }} - {{ player.state }} + {{ $t('state.' + player.state) }} @@ -121,7 +121,7 @@ Vue.component("player", { - + `, @@ -261,7 +261,7 @@ Vue.component("player", { // TODO: store previous player in local storage if (!this.active_player_id) for (var player_id in this.players) - if (this.players[player_id].state == 'playing' && this.players[player_id].enabled) { + if (this.players[player_id].state == 'playing' && this.players[player_id].enabled && !this.players[player_id].group_parent) { // prefer the first playing player this.active_player_id = player_id; break; @@ -269,7 +269,7 @@ Vue.component("player", { if (!this.active_player_id) for (var player_id in this.players) { // fallback to just the first player - if (this.players[player_id].enabled) + if (this.players[player_id].enabled && !this.players[player_id].group_parent) { this.active_player_id = player_id; break; diff --git a/music_assistant/web/components/playmenu.vue.js b/music_assistant/web/components/playmenu.vue.js index 6b3bacd9..d1a84d2c 100644 --- a/music_assistant/web/components/playmenu.vue.js +++ b/music_assistant/web/components/playmenu.vue.js @@ -3,65 +3,45 @@ Vue.component("playmenu", { - {{ !!$globals.playmenuitem ? $globals.playmenuitem.name : 'nix' }} - Play on: beneden + {{ !!$globals.playmenuitem ? $globals.playmenuitem.name : 'nix' }} + {{ $t('play_on') }} {{ active_player.name }} - + play_circle_outline - Play Now + {{ $t('play_now') }} - - - play_circle_outline - - - Replace - - - - - + queue_play_next - Play Next + {{ $t('play_next') }} - + playlist_add - Add to Queue + {{ $t('add_queue') }} - - - shuffle - - - Play now (shuffle) - - - - - + info - Show info + {{ $t('show_info') }} @@ -70,7 +50,7 @@ Vue.component("playmenu", { `, - props: ['value'], + props: ['value', 'active_player'], data (){ return{ fav: true, @@ -80,5 +60,14 @@ Vue.component("playmenu", { }, mounted() { }, created() { }, - methods: { } + methods: { + itemClick(cmd) { + if (cmd == 'info') + this.$router.push({ path: '/tracks/' + this.$globals.playmenuitem.item_id, params: {provider: this.$globals.playmenuitem.provider}}) + else + this.$emit('playItem', this.$globals.playmenuitem, cmd) + // close dialog + this.$globals.showplaymenu = false; + }, + } }) diff --git a/music_assistant/web/components/providericons.vue.js b/music_assistant/web/components/providericons.vue.js new file mode 100644 index 00000000..0e0124d0 --- /dev/null +++ b/music_assistant/web/components/providericons.vue.js @@ -0,0 +1,68 @@ +Vue.component("providericons", { + template: ` +
+ + + +
+ +
{{ getFileFormatDesc(provider) }} +
+ {{ provider.provider }} + + +
+`, + props: ['item','height','compact', 'dark', 'hiresonly'], + data (){ + return{} + }, + mounted() { }, + created() { }, + computed: { + uniqueProviders() { + var keys = []; + var qualities = []; + if (!this.item || !this.item.provider_ids) + return [] + let sorted_item_ids = this.item.provider_ids.sort((a,b) => (a.quality < b.quality) ? 1 : ((b.quality < a.quality) ? -1 : 0)); + if (!this.compact) + return sorted_item_ids; + for (provider of sorted_item_ids) { + if (!keys.includes(provider.provider)){ + qualities.push(provider); + keys.push(provider.provider); + } + } + return qualities; + } + }, + methods: { + + getFileFormatLogo(provider) { + if (provider.quality == 0) + return 'images/icons/mp3.png' + else if (provider.quality == 1) + return 'images/icons/vorbis.png' + else if (provider.quality == 2) + return 'images/icons/aac.png' + else if (provider.quality > 2) + return 'images/icons/flac.png' + }, + getFileFormatDesc(provider) { + var desc = ''; + if (provider.details) + desc += ' ' + provider.details; + return desc; + }, + getMaxQualityFormatDesc() { + var desc = ''; + if (provider.details) + desc += ' ' + provider.details; + return desc; + } + } + }) diff --git a/music_assistant/web/components/qualityicon.vue.js b/music_assistant/web/components/qualityicon.vue.js deleted file mode 100644 index 48baf2b5..00000000 --- a/music_assistant/web/components/qualityicon.vue.js +++ /dev/null @@ -1,60 +0,0 @@ -Vue.component("qualityicon", { - template: ` -
- - - - {{ getFileFormatDesc() }} - - {{ getFileFormatDesc() }} -
-`, - props: ['item','height','compact', 'dark', 'hiresonly'], - data (){ - return{} - }, - mounted() { }, - created() { }, - methods: { - - getFileFormatLogo() { - if (this.item.quality == 0) - return 'images/icons/mp3.png' - else if (this.item.quality == 1) - return 'images/icons/vorbis.png' - else if (this.item.quality == 2) - return 'images/icons/aac.png' - else if (this.item.quality > 2) - return 'images/icons/flac.png' - }, - getFileFormatDesc() { - var desc = ''; - if (this.item && this.item.quality) - { - if (this.item.quality == 0) - desc = 'MP3'; - else if (this.item.quality == 1) - desc = 'Ogg Vorbis'; - else if (this.item.quality == 2) - desc = 'AAC'; - else if (this.item.quality > 2) - desc = 'FLAC'; - else - desc = 'unknown'; - } - // append details - if (this.item && this.item.metadata) - { - if (!!this.item.metadata && this.item.metadata.maximum_technical_specifications) - desc += ' ' + this.item.metadata.maximum_technical_specifications; - if (!!this.item.metadata && this.item.metadata.sample_rate && this.item.metadata.bit_depth) - desc += ' ' + this.item.metadata.sample_rate + 'kHz ' + this.item.metadata.bit_depth + 'bit'; - } - return desc; - } - } - }) diff --git a/music_assistant/web/components/volumecontrol.vue.js b/music_assistant/web/components/volumecontrol.vue.js index c6d264bf..7ef20ab8 100644 --- a/music_assistant/web/components/volumecontrol.vue.js +++ b/music_assistant/web/components/volumecontrol.vue.js @@ -8,7 +8,7 @@ Vue.component("volumecontrol", { {{ players[player_id].name }} - {{ players[player_id].state }} + {{ $t('state.' + players[player_id].state) }} @@ -39,6 +39,8 @@ Vue.component("volumecontrol", { prepend-icon="volume_down" append-icon="volume_up" @end="$emit('setPlayerVolume', child_id, $event)" + @click:append="$emit('setPlayerVolume', child_id, 'up')" + @click:prepend="$emit('setPlayerVolume', child_id, 'down')" > diff --git a/music_assistant/web/index.html b/music_assistant/web/index.html index 33402515..375ebf21 100755 --- a/music_assistant/web/index.html +++ b/music_assistant/web/index.html @@ -81,7 +81,8 @@ endpoint = "/playlists/" item_id = item.item_id.toString(); var url = endpoint + item_id; - router.push({ path: url, params: {provider: item.provider}}); + console.log(url + ' - ' + item.provider); + router.push({ path: url, query: {provider: item.provider}}); } String.prototype.formatDuration = function () { @@ -143,7 +144,7 @@ - + diff --git a/music_assistant/web/pages/artistdetails.vue.js b/music_assistant/web/pages/artistdetails.vue.js index 073c3d9e..46600303 100755 --- a/music_assistant/web/pages/artistdetails.vue.js +++ b/music_assistant/web/pages/artistdetails.vue.js @@ -73,7 +73,8 @@ var ArtistDetails = Vue.component('ArtistDetails', { }, getInfo (lazy=true) { this.$globals.loading = true; - const api_url = '/api/artists/' + this.media_id + const api_url = '/api/artists/' + this.media_id; + console.log(api_url + ' - ' + this.provider); axios .get(api_url, { params: { lazy: lazy, provider: this.provider }}) .then(result => { diff --git a/music_assistant/web/pages/playlistdetails.vue.js b/music_assistant/web/pages/playlistdetails.vue.js index 9ee1da74..b9c617d4 100755 --- a/music_assistant/web/pages/playlistdetails.vue.js +++ b/music_assistant/web/pages/playlistdetails.vue.js @@ -33,6 +33,7 @@ var PlaylistDetails = Vue.component('PlaylistDetails', { info: {}, items: [], offset: 0, + active: 0 } }, created() { diff --git a/music_assistant/web/pages/queue.vue.js b/music_assistant/web/pages/queue.vue.js index d470208f..9bc25a94 100755 --- a/music_assistant/web/pages/queue.vue.js +++ b/music_assistant/web/pages/queue.vue.js @@ -24,45 +24,19 @@ var Queue = Vue.component('Queue', { }, created() { this.$globals.windowtitle = this.$t('queue') - this.getQueueTracks(); - this.scroll(this.Queue); + this.getQueueTracks(0, 25); }, methods: { - getInfo () { - const api_url = '/api/players/' + this.media_id - axios - .get(api_url, { params: { provider: this.provider }}) - .then(result => { - data = result.data; - this.info = data; - }) - .catch(error => { - console.log("error", error); - }); - }, - getQueueTracks () { - this.$globals.loading = true + + getQueueTracks (offset, limit) { const api_url = '/api/players/' + this.player_id + '/queue' - axios - .get(api_url, { params: { offset: this.offset, limit: 50}}) - .then(result => { - data = result.data; - this.items.push(...data); - this.offset += 25; - this.$globals.loading = false; + return axios.get(api_url, { params: { offset: offset, limit: limit}}) + .then(response => { + if (response.data.length < 1 ) + return; + this.items.push(...response.data) + return this.getQueueTracks(offset+limit, 100) }) - .catch(error => { - console.log("error", error); - }); - - }, - scroll (Browse) { - window.onscroll = () => { - let bottomOfWindow = document.documentElement.scrollTop + window.innerHeight === document.documentElement.offsetHeight; - if (bottomOfWindow) { - this.getQueueTracks(); - } - }; } } }) diff --git a/music_assistant/web/pages/trackdetails.vue.js b/music_assistant/web/pages/trackdetails.vue.js index 497f6b35..e8f08963 100755 --- a/music_assistant/web/pages/trackdetails.vue.js +++ b/music_assistant/web/pages/trackdetails.vue.js @@ -40,7 +40,7 @@ var TrackDetails = Vue.component('TrackDetails', { } }, created() { - this.$globals.windowtitle = "Track info" + this.$globals.windowtitle = "" this.getInfo(); }, methods: { diff --git a/music_assistant/web/strings.js b/music_assistant/web/strings.js index 051fa7e2..09c3ed18 100644 --- a/music_assistant/web/strings.js +++ b/music_assistant/web/strings.js @@ -42,6 +42,19 @@ const messages = { player_power_play: "Issue play command on power on", file_prov_music_path: "Path to music files", file_prov_playlists_path: "Path to playlists (.m3u)", + // player strings + players: "Players", + play_on: "Play on:", + play_now: "Play Now", + play_next: "Play Next", + add_queue: "Add to Queue", + show_info: "Show info", + state: { + playing: "playing", + stopped: "stopped", + paused: "paused", + off: "off" + } }, @@ -86,5 +99,18 @@ const messages = { player_power_play: "Automatisch afspelen bij inschakelen", file_prov_music_path: "Pad naar muziek bestanden", file_prov_playlists_path: "Pad naar playlist bestanden (.m3u)", + // player strings + players: "Spelers", + play_on: "Afspelen op:", + play_now: "Nu afspelen", + play_next: "Speel als volgende af", + add_queue: "Voeg toe aan wachtrij", + show_info: "Bekijk informatie", + state: { + playing: "afspelen", + stopped: "gestopt", + paused: "gepauzeerd", + off: "uitgeschakeld" + } } } \ No newline at end of file -- 2.34.1