Dynamic playlist

[franciscohanna92]

I have the playlist prop as it follows:

:list="$store.state.player.playlist"

I have a Vuex store that keeps an array called playlist that holds objects to be played.

The first time I set the playlist it works fine. Then, if I change the playlist to another array, the first track of this new list gets played, but the it resumes the first track of the old one.

Am I making myself clear? What could it be?

[ali-hallaji]

Also, I have exactly this problem and how should I fix it? Just FYI I used from the newest version.

[ali-hallaji]

I have the playlist prop as it follows:

:list="$store.state.player.playlist"

I have a Vuex store that keeps an array called playlist that holds objects to be played.

The first time I set the playlist it works fine. Then, if I change the playlist to another array, the first track of this new list gets played, but the it resumes the first track of the old one.

Am I making myself clear? What could it be?

I fixed this issue in my code. you should set the next item of music list to internalMusic. With this trick, you can fix the problem.

self.aplayerRemote.internalMusic = self.music_list[indexCurrent + 1]

[lnvglr]

I found another solution, a little hacky, but it works:
(Adding to this approach, in case you don't want a shuffled list)

shuffle attribute makes sure, the shuffle array in the APlayer component gets refreshed.
ref="player" is used to hook into the APlayer component.
v-on:play="play" calls the play() method when the APlayer emits a play event.

With the shuffledList(), you make sure the APlayer listens to a new list and with the play()method you can change the shuffled list back to your ordered list.

Say this is the template:

<template>
  <vue-a-player
    ref="player"
    shuffle
    :music="this.playList[0]"
    :list="this.playList"
    v-on:play="play"
  />
</template>

And this is your script:

<script>
import VueAPlayer from "vue-aplayer";

export default {
  components: {
    VueAPlayer
  },
  data() {
    return {
      playList: [
        {
          title: ' ',
          artist: ' ',
          src: ' ',
          pic: ' '
        }
      ]
    }
  },
  computed: {
    shuffledList() {
      return this.playList
    },
  },
  mounted() {
    axios.get('playListObjectUrl').then(response => { // dynamically load your play list
        this.playList = response.data;
      })
      .catch(e => {
        console.log(e);
      });
  },
  methods: {
    play(event) {
      this.$refs.player.shuffledList = this.playList;
    },
  },
};
</script>