Album art not showing

[gmglickman]

Everything else works, but I'm seeing only a generic icon where the album art should be. Except during commercial, then the graphic appears. Has anyone seen this?

[CFenner]

Did it ever work correct? Is the album art also missing if you tune into a radio station?

[dinkybluebug]

radio station album art works for me. still get name of station , and then second line which is bbc.media.radio2_mf_p?s=1517844460&.....

[CFenner]

@gmglickman can you query the sonos api and post the results here?

[hdurdle]

See jishi/node-sonos-http-api#673
I have a pull request in that mitigates this: #28

[jca2112]

Is there any update on this issue?

I know the problem is the url for absoluteAlbumArtUri is relative, and doesn't include the full url when playing tracks from a local network media library, giving a broken album cover image. The /getaa?... image url won't work locally, but will if you give it a full url with any Sonos player's network ip.

I'm aware of the #28 pull request by @hdurdle which adds the artBase config to put in that needed Sonos ip, but that code doesn't work for me. It returns a "Uncaught (in promise) TypeError: cover is undefined" error. That pull request is still marked Open and needing branch conflicts resolved.

[Thorn2910]

Ive updated my MMM-Sonos.js in the follwoing way (only the section update Room List all the way to the clean section)

Works for me ...

  updateRoomList: function (data) {
    const roomList = []
    data.forEach(function (item) {
      const roomName = this.getRoomName(item)
      if (roomName !== '') {
        const currentTrack = item.coordinator.state.currentTrack
        //Extract http from absoluteAlbumArtUri - might be required later
        let baseUrl = currentTrack.absoluteAlbumArtUri.split('/').slice(0, 3).join('/');
        let artist = currentTrack.artist
        let track = currentTrack.title
        // Get cover from albumArtUri - could be http or /getaa Version
        let cover = currentTrack.albumArtUri
        // Check what we got from albumArtUri and either add baseUrl or leave it 
        if (!cover.startsWith("http")) {
                // If not, prepend the base URL
                cover = baseUrl + cover;
            }
        //let cover = currentTrack.absoluteAlbumArtUri
        //        var streamInfo = currentTrack.streamInfo;
        //        var type = currentTrack.type;

        // clean data

[CFenner]

Great, could you change that in the repository and create a pull request? I currently have no working setup to test this.

[Thorn2910]

Just created pull request 97 - hope this helps

[belerovon]

I had a similar Issue. In my case absoluteAlbumArtUri contains the m3u8 in the json.
Instead I used albumArtUri.

updateRoomList: function (data) {
const roomList = []
data.forEach(function (item) {
const roomName = this.getRoomName(item)
if (roomName !== '') {
const currentTrack = item.coordinator.state.currentTrack
let artist = currentTrack.artist
let track = currentTrack.title
//let cover = currentTrack.absoluteAlbumArtUri
let cover = currentTrack.albumArtUri

[Thorn2910]

I had a similar Issue. In my case absoluteAlbumArtUri contains the m3u8 in the json.

Instead I used albumArtUri.

updateRoomList: function (data) {

const roomList = []

data.forEach(function (item) {

  const roomName = this.getRoomName(item)

  if (roomName !== '') {

    const currentTrack = item.coordinator.state.currentTrack

    let artist = currentTrack.artist

    let track = currentTrack.title

    **//let cover = currentTrack.absoluteAlbumArtUri

    let cover = currentTrack.albumArtUri**

Check out my pull request - Album covers are a nightmare - I could only test with Apple Music / Radio / Amazon Music - don't know how it fares with other subscriptions

[belerovon]

I tested with the latest repo and for me it works out of the box :)

[robkochman]

This fixed all album issues:

/* Magic Mirror

• Module: MagicMirror-Sonos-Module
• By Christopher Fenner https://github.com/CFenner
• MIT Licensed.
  */
  Module.register('MMM-Sonos', {
  defaults: {
  showStoppedRoom: true,
  showAlbumArt: true,
  albumArtLocation: 'right',
  showRoomName: true,
  animationSpeed: 1000,
  updateInterval: 0.5, // every 0.5 minutes
  apiBase: 'http://localhost',
  apiPort: 5005,
  apiEndpoint: 'zones',
  exclude: []
  },
  roomList: [],

start: function () {
Log.info('Starting module: ' + this.name)
this.update()
setInterval(this.update.bind(this), this.config.updateInterval * 60 * 1000)
},

update: function () {
this.sendSocketNotification(
'SONOS_UPDATE',
this.config.apiBase + ':' + this.config.apiPort + '/' + this.config.apiEndpoint
)
},

getRoomName: function (room) {
const roomList = []
if (room.members.length > 1) {
room.members.forEach(member => {
if (!this.isRoomExcluded(member.roomName)) roomList.push(member.roomName)
})
} else {
if (!this.isRoomExcluded(room.coordinator.roomName)) roomList.push(room.coordinator.roomName)
}
return roomList.join(', ')
},

isRoomExcluded: function (roomName) {
return this.config.exclude.includes(roomName)
},

isInTVMode: function (artist, track, cover) {
return !artist && !track && !cover
},

getValidAlbumArt: function (currentTrack) {
if (currentTrack.albumArtUri && currentTrack.albumArtUri.startsWith('http')) {
return currentTrack.albumArtUri
} else if (currentTrack.absoluteAlbumArtUri && currentTrack.absoluteAlbumArtUri.startsWith('http')) {
return currentTrack.absoluteAlbumArtUri
} else {
return ''
}
},

updateRoomList: function (data) {
console.log('Sonos API Response:', data) // Debugging: log raw API response
const roomList = []
data.forEach(item => {
const roomName = this.getRoomName(item)
if (roomName !== '') {
const currentTrack = item.coordinator.state.currentTrack
let artist = currentTrack.artist ? currentTrack.artist.trim() : ''
let track = currentTrack.title ? currentTrack.title.trim() : ''
let cover = this.getValidAlbumArt(currentTrack)

    if (currentTrack.trackUri && currentTrack.trackUri.includes(track)) {
      track = ''
    }

    roomList.push({
      name: roomName,
      state: this.isInTVMode(artist, track, cover) ? 'TV' : item.coordinator.state.playbackState,
      artist: artist,
      track: track,
      albumArt: cover
    })
  }
})

this.loaded = true
if (JSON.stringify(this.roomList) === JSON.stringify(roomList)) {
  return
}
this.roomList = roomList
this.updateDom(this.config.animationSpeed)

},

getStyles: function () {
return [${this.name}.css]
},

getTemplate: function () {
return ${this.name}.njk
},

getTemplateData: function () {
return {
flip: this.data.position.startsWith('left'),
loaded: this.loaded,
showAlbumArtRight: this.config.showAlbumArt && this.config.albumArtLocation !== 'left',
showAlbumArtLeft: this.config.showAlbumArt && this.config.albumArtLocation === 'left',
showRoomName: this.config.showRoomName,
showStoppedRoom: this.config.showStoppedRoom,
roomList: this.roomList,
labelLoading: this.translate('LOADING')
}
},

socketNotificationReceived: function (notification, payload) {
if (notification === 'SONOS_DATA') {
Log.debug('Received SONOS_DATA')
this.updateRoomList(payload)
}
}
})

[belerovon]

Wow Cool that's a nice solution. thanks