toggle pause/play button on track cover

- added state for isTrackPlaying for global state.

refs #142

src/components/AudioPlayer.vue

@@ -13,7 +13,7 @@
         <icon name="skip" />
       </a>
       <a href="#" @click.prevent="play()"
-          v-if="!isPlaying">
+          v-if="!isTrackPlaying">
         <icon name="play" />
       </a>
       <a href="#" @click.prevent="pause()"
@@ -44,9 +44,11 @@
   </div>
 </template>
 <script>
+import { mapGetters, mapMutations } from 'vuex';
 import { videoPlayer } from 'vue-video-player';
 import Icon from '@/components/Icon.vue';
 import ProgressBar from '@/components/ProgressBar.vue';
+import * as types from '@/store/types';
 import '../../node_modules/video.js/dist/video-js.css';
 
 
@@ -60,7 +62,6 @@ export default {
   props: ['track'],
   data() {
     return {
-      isPlaying: false,
       currentTime: 0,
       duration: 0,
       playerOptions: {
@@ -74,6 +75,14 @@ export default {
     };
   },
   computed: {
+    ...mapGetters({
+      currentTrack: types.POST,
+    }),
+
+    isTrackPlaying() {
+      return this.$store.state.isTrackPlaying;
+    },
+
     player() {
       return this.$refs.videoPlayer.player;
     },
@@ -89,25 +98,35 @@ export default {
 
   watch: {
     track(newTrack) {
-      if (!this.player || !newTrack) return;
+      if (!this.player) return;
+
+      if (!newTrack) {
+        this.pause();
+        return;
+      }
+
       this.player.src({ type: 'audio/mp3', src: newTrack.attachment_url });
       this.play();
     },
   },
 
   methods: {
+    ...mapMutations({
+      setCurrentTrack: types.POST,
+    }),
+
     onTimeUpdate() {
       this.duration = this.player.duration().toFixed(2);
     },
 
     play() {
       this.player.play();
-      this.isPlaying = true;
+      this.$store.commit('isTrackPlaying', true);
     },
 
     pause() {
       this.player.pause();
-      this.isPlaying = false;
+      this.$store.commit('isTrackPlaying', false);
     },
 
     seek(secs) {

src/components/artist/TrackCover.vue

@@ -2,6 +2,7 @@
   <div class="track"
        :style="{ backgroundImage: `url(${track.coverUrl})` }">
     <header>
+      <span v-if="currentTrack">{{currentTrack.id}}</span>
       <span class="cost">
         <span class="fiat">$47</span>
         <span class="divider">/</span>
@@ -18,16 +19,23 @@
          class="thumb-button"
          :class="{ voted_up: track.voted_up }"
          v-else
-         @click.prevent="upvoteTrack(track)">
+         @click.prevent="upvoteTrack()">
         <icon name="thumb" />
         <icon name="thumbHover" />
       </a>
     </header>
     <a href="#"
        class="play-button"
-       @click.prevent="playTrack(track)">
+       @click.prevent="playTrack()"
+       v-if="!isPlaying">
       <icon name="play" />
     </a>
+    <a href="#"
+       class="pause-button"
+       @click.prevent="pauseTrack()"
+       v-if="isPlaying">
+      <icon name="pause" />
+    </a>
     <footer>
       <h3><a href="#">{{track.title}}</a></h3>
       <h4><router-link :to="`/artist/${track.id}`">{{track.artist}}</router-link></h4>
@@ -51,36 +59,44 @@ export default {
     };
   },
   computed: {
+    isPlaying() {
+      if (!this.currentTrack) return false;
+
+      return this.$store.state.isTrackPlaying && this.currentTrack.id === this.track.id;
+    },
+
     isLoggedIn() {
       return Boolean(this.token);
     },
     ...mapGetters({
       user: types.ACCOUNTS_USER,
       token: types.ACCOUNTS_TOKEN,
+      currentTrack: types.POST,
     }),
   },
   methods: {
     ...mapActions({
       upvote: types.POST_UPVOTE,
       downvote: types.POST_DOWNVOTE,
-    }),
-    ...mapGetters({
-      currentTrack: types.POST_GET,
+      setCurrentTrack: types.POST,
     }),
 
     ...mapMutations({
-      setCurrentTrack: types.POST,
       toggleLogin: types.TOGGLER_LOGIN,
     }),
 
-    playTrack(track) {
-      this.setCurrentTrack(track);
+    playTrack() {
+      this.setCurrentTrack(this.track);
+    },
+
+    pauseTrack() {
+      this.setCurrentTrack(null);
     },
 
-    upvoteTrack(track) {
-      this.upvote(track)
+    upvoteTrack() {
+      this.upvote(this.track)
         .then(() => {
-          track.voted_up += 1;
+          this.track.voted_up += 1;
         });
     },
   },
@@ -104,7 +120,7 @@ export default {
   box-shadow: inset 0px 35px 30px -10px #000000b3,
     inset 0px -35px 30px -5px #000000e6;
 
-  .play-button {
+  .play-button, .pause-button {
     align-self: center;
   }
 

src/store/index.js

@@ -14,6 +14,7 @@ Vue.use(Vuex);
 const store = new Vuex.Store({
   state: {
     isModalOpen: false,
+    isTrackPlaying: false,
   },
   mutations,
   modules: {

src/store/modules/posts.js

@@ -57,6 +57,10 @@ const actions = {
         res.data.results[0].children.length ?
         res.data.results[0].children[0] : null);
     }),
+  [types.POST]: ({ commit }, data) => {
+    commit('isTrackPlaying', Boolean(data));
+    commit(types.POST, data);
+  },
 };
 
 const mutations = {

src/store/mutations.js

@@ -3,4 +3,8 @@ export default {
     state.isModalOpen = isOpen;
     document.body.className = isOpen ? 'modal-open' : '';
   },
+
+  isTrackPlaying(state, isPlaying) {
+    state.isTrackPlaying = isPlaying;
+  },
 };