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>

ios/App/Podfile

@@ -9,12 +9,12 @@ install! 'cocoapods', :disable_input_output_paths => true
 def capacitor_pods
   pod 'Capacitor', :path => '../../node_modules/@capacitor/ios'
   pod 'CapacitorCordova', :path => '../../node_modules/@capacitor/ios'
-  pod 'CapacitorApp', :path => '../../node_modules/@capacitor/app'
-  pod 'CapacitorDialog', :path => '../../node_modules/@capacitor/dialog'
-  pod 'CapacitorHaptics', :path => '../../node_modules/@capacitor/haptics'
-  pod 'CapacitorNetwork', :path => '../../node_modules/@capacitor/network'
-  pod 'CapacitorStatusBar', :path => '../../node_modules/@capacitor/status-bar'
-  pod 'CapacitorStorage', :path => '../../node_modules/@capacitor/storage'
+  pod 'CapacitorApp', :path => '..\..\node_modules\@capacitor\app'
+  pod 'CapacitorDialog', :path => '..\..\node_modules\@capacitor\dialog'
+  pod 'CapacitorHaptics', :path => '..\..\node_modules\@capacitor\haptics'
+  pod 'CapacitorNetwork', :path => '..\..\node_modules\@capacitor\network'
+  pod 'CapacitorStatusBar', :path => '..\..\node_modules\@capacitor\status-bar'
+  pod 'CapacitorStorage', :path => '..\..\node_modules\@capacitor\storage'
 end
 
 target 'App' do

plugins/capacitor/AbsAudioPlayer.js

@@ -131,6 +131,11 @@ class AbsAudioPlayerWeb extends WebPlugin {
     }
   }
 
+  // PluginMethod
+  async getIsCastAvailable() {
+    return false
+  }
+
   initializePlayer() {
     if (document.getElementById('audio-player')) {
       document.getElementById('audio-player').remove()

plugins/init.client.js

@@ -14,21 +14,6 @@ if (Capacitor.getPlatform() != 'web') {
   setStatusBarStyleDark()
 }
 
-App.addListener('backButton', async ({ canGoBack }) => {
-  if (!canGoBack) {
-    const { value } = await Dialog.confirm({
-      title: 'Confirm',
-      message: `Did you want to exit the app?`,
-    })
-    if (value) {
-      App.exitApp()
-    }
-
-  } else {
-    window.history.back()
-  }
-})
-
 Vue.prototype.$isDev = process.env.NODE_ENV !== 'production'
 
 Vue.prototype.$dateDistanceFromNow = (unixms) => {
@@ -135,6 +120,30 @@ Vue.prototype.$encode = encode
 const decode = (text) => Buffer.from(decodeURIComponent(text), 'base64').toString()
 Vue.prototype.$decode = decode
 
+export default ({ store }) => {
+  App.addListener('backButton', async ({ canGoBack }) => {
+    if (store.state.globals.isModalOpen) {
+      Vue.prototype.$eventBus.$emit('close-modal')
+      return
+    }
+    if (store.state.playerIsFullscreen) {
+      Vue.prototype.$eventBus.$emit('minimize-player')
+      return
+    }
+    if (!canGoBack) {
+      const { value } = await Dialog.confirm({
+        title: 'Confirm',
+        message: `Did you want to exit the app?`,
+      })
+      if (value) {
+        App.exitApp()
+      }
+    } else {
+      window.history.back()
+    }
+  })
+}
+
 export {
   encode,
   decode

store/globals.js

@@ -1,4 +1,5 @@
 export const state = () => ({
+  isModalOpen: false,
   itemDownloads: [],
   bookshelfListView: false,
   series: null,
@@ -93,6 +94,9 @@ export const actions = {
 }
 
 export const mutations = {
+  setIsModalOpen(state, val) {
+    state.isModalOpen = val
+  },
   addUpdateItemDownload(state, downloadItem) {
     var index = state.itemDownloads.findIndex(i => i.id == downloadItem.id)
     if (index >= 0) {

store/index.js

@@ -6,6 +6,7 @@ export const state = () => ({
   playerEpisodeId: null,
   playerIsLocal: false,
   playerIsPlaying: false,
+  playerIsFullscreen: false,
   isCasting: false,
   isCastAvailable: false,
   socketConnected: false,
@@ -93,6 +94,9 @@ export const mutations = {
   setPlayerPlaying(state, val) {
     state.playerIsPlaying = val
   },
+  setPlayerFullscreen(state, val) {
+    state.playerIsFullscreen = val
+  },
   setHasStoragePermission(state, val) {
     state.hasStoragePermission = val
   },