Fix:Back button to close modal #267 and back button to minimize fullscreen player #267

components/app/AudioPlayer.vue

@@ -139,8 +139,9 @@ export default {
     }
   },
   watch: {
-    showFullscreen() {
+    showFullscreen(val) {
       this.updateScreenSize()
+      this.$store.commit('setPlayerFullscreen', !!val)
     }
   },
   computed: {
@@ -712,6 +713,10 @@ export default {
       var coverHeight = this.fullscreenBookCoverWidth * this.bookCoverAspectRatio
       document.documentElement.style.setProperty('--cover-image-width', this.fullscreenBookCoverWidth + 'px')
       document.documentElement.style.setProperty('--cover-image-height', coverHeight + 'px')
+    },
+    minimizePlayerEvt() {
+      console.log('Minimize Player Evt')
+      this.showFullscreen = false
     }
   },
   mounted() {
@@ -719,6 +724,8 @@ export default {
     if (screen.orientation) {
       screen.orientation.addEventListener('change', this.screenOrientationChange)
     }
+
+    this.$eventBus.$on('minimize-player', this.minimizePlayerEvt)
     document.body.addEventListener('touchstart', this.touchstart)
     document.body.addEventListener('touchend', this.touchend)
     document.body.addEventListener('touchmove', this.touchmove)
@@ -735,6 +742,7 @@ export default {
     }
 
     this.forceCloseDropdownMenu()
+    this.$eventBus.$off('minimize-player', this.minimizePlayerEvt)
     document.body.removeEventListener('touchstart', this.touchstart)
     document.body.removeEventListener('touchend', this.touchend)
     document.body.removeEventListener('touchmove', this.touchmove)

components/modals/Modal.vue

@@ -77,6 +77,8 @@ export default {
       }
     },
     setShow() {
+      this.$store.commit('globals/setIsModalOpen', true)
+
       document.body.appendChild(this.el)
       setTimeout(() => {
         this.content.style.transform = 'scale(1)'
@@ -84,18 +86,28 @@ export default {
       document.documentElement.classList.add('modal-open')
     },
     setHide() {
+      this.$store.commit('globals/setIsModalOpen', false)
+
       this.content.style.transform = 'scale(0)'
       this.el.remove()
       document.documentElement.classList.remove('modal-open')
+    },
+    closeModalEvt() {
+      console.log('Close modal event')
+      this.show = false
     }
   },
   mounted() {
+    this.$eventBus.$on('close-modal', this.closeModalEvt)
     this.el = this.$refs.wrapper
     this.content = this.$refs.content
     this.content.style.transform = 'scale(0)'
     this.content.style.transition = 'transform 0.25s cubic-bezier(0.16, 1, 0.3, 1)'
     this.el.style.opacity = 1
     this.el.remove()
+  },
+  beforeDestroy() {
+    this.$eventBus.$off('close-modal', this.closeModalEvt)
   }
 }
 </script>