自动漫游识时务地自觉停止

src/config.js

@@ -32,5 +32,6 @@ export default {
   },
   audioName: {
     relicsAppr: '清晨氛围',
+    swkkView: '清晨氛围',
   }
 }

src/main.js

@@ -16,6 +16,7 @@ console.log(`version: ${process.env.VUE_APP_VERSION}`)
 const audioNode = document.createElement("audio")
 audioNode.id = 'global-audio'
 audioNode.style.display = 'none'
+audioNode.loop = true
 document.body.appendChild(audioNode)
 
 const uaParser = new UAParser()

src/router/index.js

@@ -38,8 +38,8 @@ const routes = [
     },
     beforeEnter (to, from, next) {
       const audioNode = document.getElementById('global-audio')
-      if (audioNode.src !== require(`@/assets/audios/${globalConfig.audioName.relicsAppr}.mp3`)) {
-        audioNode.src = require(`@/assets/audios/${globalConfig.audioName.relicsAppr}.mp3`)
+      if (audioNode.src !== require(`@/assets/audios/${globalConfig.audioName.swkkView}.mp3`)) {
+        audioNode.src = require(`@/assets/audios/${globalConfig.audioName.swkkView}.mp3`)
         audioNode.play()
       }
       next()

src/store/index.js

@@ -5,6 +5,7 @@ Vue.use(Vuex)
 
 export default new Vuex.Store({
   state: {
+    _isMutedBackup: false,
     isMuted: false,
     isFullScreen: false,
   },
@@ -13,6 +14,14 @@ export default new Vuex.Store({
   mutations: {
     toggleMute(state) {
       state.isMuted = !state.isMuted
+      state._isMutedBackup = state.isMuted
+    },
+    mustMute(state) {
+      state._isMutedBackup = state.isMuted
+      state.isMuted = true
+    },
+    cancelMustMute(state) {
+      state.isMuted = state._isMutedBackup
     },
     toggleFullScreen(state) {
       state.isFullScreen = !state.isFullScreen

src/views/HomeView.vue

@@ -90,12 +90,14 @@ export default {
       this.isShowSkip = true
     }, 3000)
     let dom = document.querySelector("#VideoDom")
-    dom.addEventListener('canplaythrough', () => {
-      dom.play()
-    })
-    dom.addEventListener("ended", () => {
-      this.isShowVideo = false
-    })
+    if (dom) {
+      dom.addEventListener('canplaythrough', () => {
+        dom.play()
+      })
+      dom.addEventListener("ended", () => {
+        this.isShowVideo = false
+      })
+    }
   }
 }
 </script>

src/views/SwkkView.vue

@@ -194,7 +194,19 @@ export default {
       playing: false,
     }
   },
+  computed: {
+    ...globalMapState([
+      'isMuted',
+    ])
+  },
   watch: {
+    isMuted: {
+      handler(vNew) {
+        if (!vNew) {
+          this.stopAutoMoving()
+        }
+      }
+    },
     isAutoMoving: {
       handler(vNew) {
         if (vNew) {
@@ -240,21 +252,23 @@ export default {
         player.on("play", ({ partId, frameId }) => {
           this.isAutoMoving = true
           this.isChangingAutoMovingStatus = false
+          this.mustMute()
         })
         player.on("pause", ({ partId, frameId }) => {
           this.isAutoMoving = false
           this.isChangingAutoMovingStatus = false
+          this.cancelMustMute()
         })
         player.on("end", async () => {
           this.isAutoMoving = false
           this.isChangingAutoMovingStatus = false
           this.progress = 0
           this.frameId = null
+          this.cancelMustMute()
         })
 
         player.on("progress", ({ partId, frameId, progress }) => {
           this.curSceneIdx = frameId
-
           this.autoMovingProgress = Number(progress * 100).toFixed(5)
         })
       })
@@ -386,9 +400,14 @@ export default {
     }, 1000)
 
   },
-  unMounted() {
+  beforeDestroy() {
+    this.stopAutoMoving()
   },
   methods: {
+    ...globalMapMutations([
+      'mustMute',
+      'cancelMustMute',
+    ]),
     // 切换楼层
     changeFloor(val) {
       this.$router.replace({
@@ -399,17 +418,28 @@ export default {
         location.reload(true)
       }, 200)
     },
-    async onClickAutoMoving() {
-      if (this.isChangingAutoMovingStatus) {
+    onClickAutoMoving() {
+      if (this.isAutoMoving) {
+        this.stopAutoMoving()
+      } else {
+        this.startAutoMoving()
+      }
+    },
+    async startAutoMoving() {
+      if (this.isChangingAutoMovingStatus || this.isAutoMoving) {
         return
       }
       this.isChangingAutoMovingStatus = true
       let player = await this.kankan.TourManager.player
-      if (this.isAutoMoving) {
-        player.pause()
-      } else {
-        player.play()
+      player.play()
+    },
+    async stopAutoMoving() {
+      if (this.isChangingAutoMovingStatus || !this.isAutoMoving) {
+        return
       }
+      this.isChangingAutoMovingStatus = true
+      let player = await this.kankan.TourManager.player
+      player.pause()
     },
     onClickCjdl() {
       this.isShowTourGuide = !this.isShowTourGuide
@@ -418,15 +448,19 @@ export default {
       this.kankan.Camera.panorama()
     },
     onClickMnmx() {
+      this.stopAutoMoving()
       this.kankan.Camera.dollhouse()
     },
     onClickDbfs() {
+      this.stopAutoMoving()
       this.kankan.Camera.floorplan()
     },
     async changeScene(index) {
       if (this.isChangingScene) {
         return
       }
+      this.stopAutoMoving()
+
       this.isChangingScene = true
       this.curSceneIdx = index